knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dataset-single][m]: Update dataset-single example to use portaljs

Browse Source
This commit is contained in:
Rising Odegua 2021-05-21 10:11:25 +01:00
parent 7bf76d7c38
commit 59dc4cc919
5 changed files with 7761 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/dataset-frictionless/package.json
View File

@ -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",
"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"
"vega-lite": "^5.0.0"
},
"devDependencies": {
"@testing-library/dom": "^7.29.6",
@ -55,4 +56,4 @@
"jest-canvas-mock": "^2.3.1",
"jest-dom": "^4.0.0"
}
}
}

152
examples/dataset-frictionless/pages/index.js
View File

@ -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) {
datasetSize = resources.length == 1 ?
resources[0].size :
resources.reduce((accumulator, currentValue) => {
return accumulator.size + currentValue.size
})
}
const columns = resources[0].schema.fields.map((field) => {
return { field: field.name, headerName: field.name }
})
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">
{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>
<KeyInfo descriptor={descriptor} resources={resources} />
</section>
<section className="m-8" name="file-list">
<h1 className="text-2xl font-bold mb-4">Data Files</h1>
<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>
)
})}
<ResourceInfo resources={resources} />
</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") {
return (
<div key={`${i}_views`} className="ml-14">
<Vega spec={spec} />
</div>
)
} else if (["simple", "plotly"].includes(spec.specType)) {
if (["simple", "plotly"].includes(spec.specType)) {
return (
<div key={`${i}_views`}>
<Chart spec={spec} />
</div>)
} else {
return <h1 key={`${i}_views`}>Cannot display view</h1>
<PlotlyChart spec={spec} />
</div>
)
}
})
@ -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">
<div dangerouslySetInnerHTML={{ __html: dataset.readmeHtml }} />
</div>
<ReadMe readme={dataset.readmeHtml} />
</section>
</div>

7823
examples/dataset-frictionless/yarn.lock
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -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",

22
yarn.lock
View File

@ -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"