diff --git a/src/components/dataset/DataExplorer.js b/src/components/dataset/DataExplorer.js new file mode 100644 index 00000000..5ce7db18 --- /dev/null +++ b/src/components/dataset/DataExplorer.js @@ -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; diff --git a/src/components/dataset/KeyInfo.js b/src/components/dataset/KeyInfo.js new file mode 100644 index 00000000..07139469 --- /dev/null +++ b/src/components/dataset/KeyInfo.js @@ -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 ( + <> +
+

+ {descriptor.title} +

+

Key info

+
+
+

Files

+
+
+

Size

+
+
+

Format

+
+
+

Created

+
+
+

Updated

+
+
+

Licence

+
+
+

Source

+
+
+
+
+

{resources.length}

+
+
+

{filesize(datasetSize, { bits: true })}

+
+
+

{resources[0].format} zip

+
+
+

{descriptor.created}

+
+
+

{descriptor.updated}

+
+
+

{descriptor.license}

+
+
+

+ + {descriptor.sources[0].title} + +

+
+
+
+ + + ) +} + +KeyInfo.propTypes = { + descriptor: PropTypes.object.isRequired, + resources: PropTypes.array.isRequired +} +export default KeyInfo \ No newline at end of file diff --git a/src/components/dataset/Org.js b/src/components/dataset/Org.js new file mode 100644 index 00000000..c5b5c414 --- /dev/null +++ b/src/components/dataset/Org.js @@ -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 ? ( + <> + org_img + + + {organization.title || organization.name} + + + + ) : ( + '' + )} + + ); +}; + +Org.propTypes = { + organization: PropTypes.object.isRequired +} + +export default Org; diff --git a/src/components/dataset/Readme.js b/src/components/dataset/Readme.js new file mode 100644 index 00000000..14ae9dbc --- /dev/null +++ b/src/components/dataset/Readme.js @@ -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 ( + <> +
+

README

+
+
+
+
+ + ) +} + +ReadMe.propTypes = { + readmeHtml: PropTypes.string.isRequired +} + +export default ReadMe \ No newline at end of file diff --git a/src/components/dataset/ResourceInfo.js b/src/components/dataset/ResourceInfo.js new file mode 100644 index 00000000..e1c9f583 --- /dev/null +++ b/src/components/dataset/ResourceInfo.js @@ -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 ( + <> +
+

Data Files

+
+
+

File

+
+
+

Description

+
+
+

Size

+
+
+

Last Changed

+
+
+

Download

+
+
+ + {resources.map((resource, index) => { + return ( +
+
+

{resource.name}

+
+
+

{resource.description || "No description"}

+
+
+

{filesize(resource.size, { bits: true })}

+
+
+

{resource.updated}

+
+
+

+ + {resource.format} ({filesize(resource.size, { bits: true })}) + +

+
+
+ ) + })} +
+ + ) +} + + +ResourcesInfo.propTypes = { + resources: PropTypes.array.isRequired +} +export default ResourcesInfo \ No newline at end of file