[Components][s]: Add components for creating dataset page
This commit is contained in:
Rising Odegua
parent
6d21042911
commit
acd1c118a1
19
src/components/dataset/DataExplorer.js
Normal file
19
src/components/dataset/DataExplorer.js
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Opens a frictionless resource in data explorer. Data explorer gives you
|
||||
* an interface to interact with a resource. That means you can do things like
|
||||
* data filtering, sorting, e.t.c
|
||||
* @param {object} resource A frictionless Data resource
|
||||
* @returns React component
|
||||
*/
|
||||
const DataExplorer = ({ resource }) => {
|
||||
// TODO: Add data explorer code
|
||||
return <>{JSON.stringify(resource)}</>;
|
||||
};
|
||||
|
||||
DataExplorer.propTypes = {
|
||||
resource: PropTypes.object.isRequired
|
||||
}
|
||||
export default DataExplorer;
|
||||
99
src/components/dataset/KeyInfo.js
Normal file
99
src/components/dataset/KeyInfo.js
Normal file
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import filesize from 'filesize'
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* KeyInfo component receives two arguments.
|
||||
* @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields:
|
||||
* {
|
||||
* title: "Title of the data package",
|
||||
* length: "The number of resources present in the data package"
|
||||
* datasetSize: The combined size of the data package resources
|
||||
* format: The format of resources in the dataset. e.g csv, json, excel
|
||||
* created: The date the dataset was created
|
||||
* updated: The date the dataset was last updated
|
||||
* licence: The licence of the dataset
|
||||
* sources: An array of the data set sources
|
||||
* }
|
||||
* @param {Array} resources A Frictionless datapackage resource array
|
||||
* @returns React Component
|
||||
*/
|
||||
const KeyInfo = ({ descriptor, resources }) => {
|
||||
let datasetSize = 0
|
||||
if (resources) {
|
||||
datasetSize = resources.length == 1 ?
|
||||
resources[0].size :
|
||||
resources.reduce((accumulator, currentValue) => {
|
||||
return accumulator.size + currentValue.size
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="m-8" name="key-info" id="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>
|
||||
</section>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
KeyInfo.propTypes = {
|
||||
descriptor: PropTypes.object.isRequired,
|
||||
resources: PropTypes.array.isRequired
|
||||
}
|
||||
export default KeyInfo
|
||||
45
src/components/dataset/Org.js
Normal file
45
src/components/dataset/Org.js
Normal file
@ -0,0 +1,45 @@
|
||||
import Link from 'next/link';
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* Displays information about an organization in a dataset page
|
||||
* @param {Object} props object describing the dataset organization.
|
||||
* organization: {
|
||||
* image_url: The image url of the organization
|
||||
* name: The name of the organization
|
||||
* title: The title of the organization
|
||||
* }
|
||||
* @returns
|
||||
*/
|
||||
const Org = ({ organization }) => {
|
||||
return (
|
||||
<>
|
||||
{organization ? (
|
||||
<>
|
||||
<img
|
||||
src={
|
||||
organization.image_url ||
|
||||
'https://datahub.io/static/img/datahub-cube-edited.svg'
|
||||
}
|
||||
className="h-5 w-5 mr-2 inline-block"
|
||||
alt="org_img"
|
||||
/>
|
||||
<Link href={`/@${organization.name}`}>
|
||||
<a className="font-semibold text-primary underline">
|
||||
{organization.title || organization.name}
|
||||
</a>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Org.propTypes = {
|
||||
organization: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default Org;
|
||||
26
src/components/dataset/Readme.js
Normal file
26
src/components/dataset/Readme.js
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* ReadMe component displays the markdown description of a datapackage
|
||||
* @param {string} readme parsed html of data package readme
|
||||
* @returns React Component
|
||||
*/
|
||||
const ReadMe = ({ readmeHtml }) => {
|
||||
return (
|
||||
<>
|
||||
<section className="m-8" name="sample-table">
|
||||
<h1 className="text-2xl font-bold mb-4">README</h1>
|
||||
<div className="prose">
|
||||
<div dangerouslySetInnerHTML={{ __html: readmeHtml }} />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
ReadMe.propTypes = {
|
||||
readmeHtml: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
export default ReadMe
|
||||
67
src/components/dataset/ResourceInfo.js
Normal file
67
src/components/dataset/ResourceInfo.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import filesize from 'filesize'
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
/**
|
||||
* ResourceInfo component displays all resources in a data package
|
||||
* @param {Array} resources A Frictionless datapackage resource object
|
||||
* @returns React Component
|
||||
*/
|
||||
const ResourcesInfo = ({ resources }) => {
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
<a className="text-yellow-600" href={`/dataset/${resource.path}`}>
|
||||
{resource.format} ({filesize(resource.size, { bits: true })})
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
ResourcesInfo.propTypes = {
|
||||
resources: PropTypes.array.isRequired
|
||||
}
|
||||
export default ResourcesInfo
|
||||
Loading…
x
Reference in New Issue
Block a user