Merge pull request #565 from datopian/update/examples

Update single dataset example to use portal.js

.github/workflows/main.yml

@@ -0,0 +1,39 @@
+name: github pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2.1.2
+        with:
+          node-version: '12.x'
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn export
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

examples/dataset-frictionless/components/Chart.js

@@ -1,31 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import createPlotlyComponent from "react-plotly.js/factory";
-
-let Plot;
-
-const Chart = (props) => {
-    const [plotCreated, setPlotCreated] = useState(0) //0: false, 1: true
-
-    useEffect(() => {
-        import(`plotly.js-basic-dist`).then(Plotly => { //import Plotly dist when Page has been generated
-            Plot = createPlotlyComponent(Plotly);
-            setPlotCreated(1)
-        });
-    }, [])
-
-    if (!plotCreated) {
-        return (<div>Loading...</div>)
-    }
-
-    return (
-        <div data-testid="plotlyChart">
-            <Plot {...props.spec}
-                layout={{ autosize: true }}
-                style={{ width: "100%", height: "100%" }}
-                useResizeHandler={true}
-            />
-        </div>
-    )
-}
-
-export default Chart 

examples/dataset-frictionless/components/Table.js

@@ -1,28 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
-/*
- * @param schema: Frictionless Table Schmea
- * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
- */
-const Table = ({ schema, data }) => {
-  const columns = schema.fields.map((field) => (
-    {
-      field: field.title || field.name,
-      headerName: field.name,
-      width: 300
-    }
-  ))
-  data = data.map((item, index)=>{
-    item.id = index //Datagrid requires every row to have an ID
-    return item
-  })
-  
-  return (
-    <div data-testid="tableGrid" style={{ height: 400, width: '100%' }}>
-      <DataGrid rows={data} columns={columns} pageSize={5} />
-    </div>
-  );
-}
-
-export default Table

examples/dataset-frictionless/package.json

@@ -19,12 +19,22 @@
     "@material-ui/data-grid": "^4.0.0-alpha.20",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.0.4",
+    "chalk": "^4.1.0",
+    "commander": "^6.2.0",
+    "cpy": "^8.1.1",
+    "cross-spawn": "^7.0.3",
     "datapackage-render": "git+https://github.com/frictionlessdata/datapackage-render-js.git",
+    "figlet": "^1.5.0",
     "filesize": "^6.1.0",
     "frictionless.js": "^0.13.4",
+    "listr": "^0.14.3",
     "next": "latest",
+    "open": "^8.0.2",
+    "ora": "^5.1.0",
     "plotly.js-basic-dist": "^1.58.4",
+    "portal": "https://github.com/datopian/portal.js",
     "postcss": "^8.2.10",
+    "prompts": "^2.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-plotly.js": "^2.5.1",
@@ -34,16 +44,7 @@
     "remark-html": "^13.0.1",
     "tailwindcss": "^2.0.2",
     "vega": "^5.19.1",
-    "vega-lite": "^5.0.0",
+    "vega-lite": "^5.0.0"
-    "chalk": "^4.1.0",
-    "commander": "^6.2.0",
-    "cpy": "^8.1.1",
-    "cross-spawn": "^7.0.3",
-    "figlet": "^1.5.0",
-    "listr": "^0.14.3",
-    "open": "^8.0.2",
-    "ora": "^5.1.0",
-    "prompts": "^2.4.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^7.29.6",

examples/dataset-frictionless/pages/index.js

@@ -1,17 +1,20 @@
+import {
+  ResourceInfo,
+  KeyInfo,
+  PlotlyChart,
+  Table,
+  ReadMe
+} from 'portal'
 import path from 'path'
 import Head from 'next/head'
-import Link from 'next/link'
-import Table from '../components/Table'
-import filesize from 'filesize'
-import { Vega } from 'react-vega';
 import { getDataset } from '../lib/dataset'
-import Chart from '../components/Chart'
 import { addView } from '../lib/utils'
+
 const datasetsDirectory = process.env.PORTAL_DATASET_PATH || path.join(process.cwd(), "public", "dataset")
 
 export default function Home({ dataset, specs }) {
 
-  if (!dataset && !specs) {
+  if (!dataset) {
     return (
       <div className="container">
         <Head>
@@ -29,16 +32,11 @@ export default function Home({ dataset, specs }) {
 
   const descriptor = dataset['descriptor']
   const resources = dataset['resources']
-  let datasetSize = 0
 
-  if (resources) {
+  const columns = resources[0].schema.fields.map((field) => {
-    datasetSize = resources.length == 1 ?
+    return { field: field.name, headerName: field.name }
-      resources[0].size :
-      resources.reduce((accumulator, currentValue) => {
-        return accumulator.size + currentValue.size
   })
-
+  const tableSample = resources[0].sample
-  }
 
   return (
     <div className="container">
@@ -51,110 +49,11 @@ export default function Home({ dataset, specs }) {
 
 
       <section className="m-8" name="key-info">
-        <h1 data-testid="datasetTitle" className="text-3xl font-bold mb-8">
+        <KeyInfo descriptor={descriptor} resources={resources} />
-          {descriptor.title}
-        </h1>
-        <h1 className="text-2xl font-bold mb-4">Key info</h1>
-        <div className="grid grid-cols-7 gap-4">
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Files</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Size</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Format</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Created</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Updated</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Licence</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Source</h3>
-          </div>
-        </div>
-        <div className="grid grid-cols-7 gap-4">
-          <div>
-            <h3 className="text-1xl">{resources.length}</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">{filesize(datasetSize, { bits: true })}</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">{resources[0].format} zip</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">{descriptor.created}</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">{descriptor.updated}</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">{descriptor.license}</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl">
-              <a className="text-yellow-600"
-                href={descriptor.sources[0].web}>
-                {descriptor.sources[0].title}
-              </a>
-            </h3>
-          </div>
-        </div>
       </section>
 
       <section className="m-8" name="file-list">
-        <h1 className="text-2xl font-bold mb-4">Data Files</h1>
+        <ResourceInfo resources={resources} />
-        <div className="grid grid-cols-7 gap-4">
-          <div>
-            <h3 className="text-1xl font-bold mb-2">File</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Description</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Size</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Last Changed</h3>
-          </div>
-          <div>
-            <h3 className="text-1xl font-bold mb-2">Download</h3>
-          </div>
-        </div>
-
-        {resources.map((resource, index) => {
-          return (
-            <div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4">
-              <div>
-                <h3 className="text-1xl">{resource.name}</h3>
-              </div>
-              <div>
-                <h3 className="text-1xl">{resource.description || "No description"}</h3>
-              </div>
-              <div>
-                <h3 className="text-1xl">{filesize(resource.size, { bits: true })}</h3>
-              </div>
-              <div>
-                <h3 className="text-1xl">{resource.updated}</h3>
-              </div>
-              <div>
-                <h3 className="text-1xl">
-                  <Link href={`/dataset/${resource.path}`}>
-                    <a className="text-yellow-600">
-                      {resource.format} ({filesize(resource.size, { bits: true })})
-                    </a>
-                  </Link>
-                </h3>
-              </div>
-            </div>
-          )
-        })}
       </section>
 
       <section className="m-8" name="graph">
@@ -164,19 +63,12 @@ export default function Home({ dataset, specs }) {
         </div>) :
           (
             Object.values(JSON.parse(specs)).map((spec, i) => {
-              if (spec.specType == "vega") {
+              if (["simple", "plotly"].includes(spec.specType)) {
-                return (
-                  <div key={`${i}_views`} className="ml-14">
-                    <Vega spec={spec} />
-                  </div>
-                )
-              } else if (["simple", "plotly"].includes(spec.specType)) {
                 return (
                   <div key={`${i}_views`}>
-                    <Chart spec={spec} />
+                    <PlotlyChart spec={spec} />
-                  </div>)
+                  </div>
-              } else {
+                )
-                return <h1 key={`${i}_views`}>Cannot display view</h1>
               }
             })
 
@@ -187,7 +79,7 @@ export default function Home({ dataset, specs }) {
         <h1 className="text-2xl font-bold mb-4">Data Preview</h1>
         <h2 className="text-1xl">{descriptor.title}</h2>
         {resources[0].sample ? (
-          <Table data={resources[0].sample} schema={resources[0].schema} />
+          <Table columns={columns} data={tableSample} />
         ) : (
           'No preview is available for this dataset'
         )}
@@ -195,9 +87,7 @@ export default function Home({ dataset, specs }) {
 
       <section className="m-8" name="sample-table">
         <h1 className="text-2xl font-bold mb-4">README</h1>
-        <div className="prose">
+        <ReadMe readme={dataset.readmeHtml} />
-          <div dangerouslySetInnerHTML={{ __html: dataset.readmeHtml }} />
-        </div>
       </section>
 
     </div>

examples/dataset-frictionless/tests/components/Chart.test.js

@@ -1,26 +0,0 @@
-import React from 'react'
-import {render } from '@testing-library/react';
-import path from 'path'
-import Chart from '../../components/Chart';
-import { getDataset } from "../../lib/dataset"
-import { addView } from '../../lib/utils'
-
-
-let dataset
-let datasetWithView
-
-beforeAll(async () => {
-    const datasetsDirectory = path.join(process.cwd(), 'fixtures', 'datasetsPlotlyView')
-    dataset = await getDataset(datasetsDirectory)
-    datasetWithView = addView(dataset)
-});
-
-
-/** @test {Chart Component} */
-describe('Chart Component', () => {
-    it('should render without crashing', async () => {
-        const spec = JSON.parse(datasetWithView.props.specs)[0]
-        const { findByTestId } = render(<Chart spec={spec} />)
-        expect(await findByTestId("plotlyChart"))
-    });
-});

examples/dataset-frictionless/tests/components/Table.test.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react';
-import path from 'path'
-import Table from '../../components/Table';
-import { getDataset } from "../../lib/dataset"
-
-
-let dataset
-
-beforeAll(async () => {
-    const datasetsDirectory = path.join(process.cwd(), 'fixtures', 'datasetsPlotlyView')
-    dataset = await getDataset(datasetsDirectory)
-});
-
-
-/** @test {Table Component} */
-describe('Table Component', () => {
-    it('should render without crashing', async () => {
-        const resource = dataset.resources[0]
-        render(<Table data={resource.sample} schema={resource.schema} />)
-    });
-    it('tableGrid div is found', async () => {
-        const resource = dataset.resources[0]
-        const { findByTestId } = render(<Table data={resource.sample} schema={resource.schema} />)
-        expect(await findByTestId('tableGrid'))
-    });
-});

examples/dataset-frictionless/tests/pages/index.test.js

@@ -1,39 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react';
-import path from 'path'
-import Home from '../../pages/index';
-import { getDataset } from "../../lib/dataset"
-import { addView } from '../../lib/utils'
-
-
-let plotlyDatasetWithView
-
-beforeAll(async () => {
-    const plotlyDatasetsDirectory = path.join(process.cwd(), 'fixtures', 'datasetsPlotlyView')
-
-    const plotlyDataset = await getDataset(plotlyDatasetsDirectory)
-    plotlyDatasetWithView = addView(plotlyDataset)
-});
-
-
-/** @test {Home Component} */
-describe('Home Component', () => {
-    it('should render without crashing', async () => {
-        const dataset = plotlyDatasetWithView.props.dataset
-        const specs = plotlyDatasetWithView.props.specs
-        const { findAllByText } = render(<Home dataset={dataset} specs={specs} />)
-        expect(await findAllByText('README'))
-
-    });
-    it('Sections are found in home page', async () => {
-        const dataset = plotlyDatasetWithView.props.dataset
-        const specs = plotlyDatasetWithView.props.specs
-        const { findByTestId, findAllByText } = render(<Home dataset={dataset} specs={specs} />)
-        expect(await findAllByText('Key info'))
-        expect(await findAllByText('Data Files'))
-        expect(await findAllByText('Graph'))
-        expect(await findAllByText('Data Preview'))
-        expect(await findByTestId('datasetTitle'))
-
-    });
-});

package.json

@@ -19,6 +19,7 @@
     "html-react-parser": "^1.2.6",
     "next": "latest",
     "plotly.js-basic-dist": "^1.58.4",
+    "portal": "https://github.com/datopian/portal.js",
     "postcss": "^8.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

yarn.lock

@@ -4557,11 +4557,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-dayjs@^1.10.4:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
-  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
-
 debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -9764,6 +9759,23 @@ popper.js@1.16.1-lts:
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
   integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
+"portal@https://github.com/datopian/portal.js":
+  version "0.1.0"
+  resolved "https://github.com/datopian/portal.js#6d32c7b94d69ff69eac68c54384da508123479a4"
+  dependencies:
+    "@material-ui/core" "^4.11.3"
+    "@material-ui/data-grid" "^4.0.0-alpha.20"
+    filesize "^6.3.0"
+    html-react-parser "^1.2.6"
+    next latest
+    plotly.js-basic-dist "^1.58.4"
+    postcss "^8.1.10"
+    react "^17.0.1"
+    react-dom "^17.0.1"
+    react-plotly.js "^2.5.1"
+    react-scripts "3.4.3"
+    tailwindcss "^2.0.2"
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"