[refactor,#527][m]: move the nextjs app at root of repo to examples/dataset-frictionless.

The current app at root of repo is for single frictionless dataset. Should be in its own example so we have space going forward for multiple example and for root to have core portal.js code.

* Also refactor its README (moved from root) to reflect it is just an example
* Move design content from the root README.md into DESIGN.md
* Stub a new root README.md based largely on examples/catalog/README.md

examples/dataset-frictionless/lib/dataset.js

@@ -0,0 +1,32 @@
+import remark from 'remark'
+import html from 'remark-html'
+import { Dataset } from 'frictionless.js'
+import toArray from 'stream-to-array'
+
+
+export async function getDataset(directory) {
+  // get dataset descriptor and resources
+  const f11sDataset = await Dataset.load(directory)
+  const descriptor = f11sDataset.descriptor
+
+  const resources = await Promise.all(f11sDataset.resources.map(async (resource) => {
+    let _tmp = resource.descriptor
+    let rowStream = await resource.rows({ keyed: true })
+    _tmp.sample = await toArray(rowStream)
+    _tmp.size = resource.size
+    return _tmp
+  }))
+  const readme = descriptor.readme
+  const processed = await remark()
+    .use(html)
+    .process(readme)
+
+  const readmeHtml = processed.toString()
+  const dataset = {
+    readme: readme,
+    readmeHtml: readmeHtml,
+    descriptor: descriptor,
+    resources: resources
+  }
+  return dataset
+}

examples/dataset-frictionless/lib/utils.js

@@ -0,0 +1,110 @@
+import { simpleToPlotly, plotlyToPlotly, vegaToVega } from 'datapackage-render'
+
+
+/**
+ * Prepare views for dataset
+ * @params {object} dataset object of the form: 
+* { readme: readme,
+    readmeHtml: readmeHtml,
+    descriptor: descriptor,
+    resources: resources 
+  }
+ */
+export function addView(dataset) {
+    const views = dataset.descriptor.views
+    const countViews = views ? views.length : 0
+    if (countViews === 0) {
+        return {
+            props: {
+                dataset,
+                error: true
+            }
+        }
+    }
+
+    const specs = {} //hold list of view specs
+    for (let i = 0; i < countViews; i++) {
+        const view = views[i]
+        if (("resources" in view) && Array.isArray(view.resources)) {
+            let resource;
+            const resourceKey = view.resources[0]
+            if (typeof resourceKey == 'number') {
+                resource = dataset.resources[resourceKey]
+                view.resources[0] = resource
+
+            } else {
+                resource = dataset.resources.filter((resource) => {
+                    return resource.name == resourceKey
+                })
+                view.resources[0] = resource[0]
+            }
+        } else {
+            view.resources = [dataset.resources[0]] //take the first resources in datapackage
+        }
+        view.resources[0].data = getDataForViewSpec(view.resources[0], view.specType)
+        view.resources[0]._values = view.resources[0].data
+
+        if (view.specType === 'simple') {
+            try {
+                const spec = simpleToPlotly(view)
+                if (spec) {
+                    spec.specType = 'simple'
+                    specs[i] = spec
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        } else if (view.specType === 'plotly') {
+            try {
+                const spec = plotlyToPlotly(view)
+                if (spec) {
+                    spec.specType = 'plotly'
+                    specs[i] = spec
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        } else if (view.specType === 'vega') {
+            try {
+                const spec = vegaToVega(view)
+                if (spec) {
+                    spec.specType = 'vega'
+                    specs[i] = spec
+                }
+            } catch (err) {
+                console.log(err);
+            }
+        }
+    }
+
+    return {
+        props: {
+            dataset,
+            specs: JSON.stringify(specs),
+            error: false
+        }
+    }
+}
+
+/**
+ * Generates the data for each view spec. Plotly and Vega accept different data
+ * formats.
+ * @param {*} resource 
+ * @param {*} specType 
+ */
+export function getDataForViewSpec(resource, specType) {
+    if (specType == "vega") {
+        return resource.sample
+    } else if (["simple", 'plotly'].includes(specType)) {
+        const sample = resource.sample
+        let data = []
+        data.push(Object.keys(sample[0])) //add the column names
+        for (let i = 0; i < sample.length; i++) {
+            const item = sample[i];
+            data.push(Object.values(item)) //add the rows
+        }
+        return data
+    }
+
+
+}