[dataset-single][m]: Update dataset-single example to use portaljs
This commit is contained in:
Rising Odegua
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user