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

[Key info component][s]: bug fixes and improvements to follow official frictionless spec.

Browse Source
This commit is contained in:
anuveyatsu 2021-08-14 20:15:30 +06:00
parent e8f9d2bc8e
commit f9b9cf3680
3 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -22,7 +22,8 @@
"postcss": "^8.1.10",
"react-plotly.js": "^2.5.1",
"react-scripts": "3.4.3",
"tailwindcss": "^2.0.2"
"tailwindcss": "^2.0.2",
"timeago.js": "^4.0.2"
},
"peerDependencies": {
"react": "^17.0.1",

59
src/components/dataset/KeyInfo.js
View File

@ -1,20 +1,11 @@
import React from 'react';
import filesize from 'filesize'
import * as timeago from 'timeago.js';
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
* }
* KeyInfo component receives two arguments.
* @param {Object} descriptor A Frictionless datapackage descriptor object with the following fields
* @param {Array} resources A Frictionless datapackage resource array
* @returns React Component
*/
@ -28,13 +19,12 @@ const KeyInfo = ({ descriptor, resources }) => {
})
}
const formats = resources.map(item => item.format).join(', ');
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>
<section className="mt-8 mb-8" name="key-info" id="key-info">
<h2 className="text-xl font-bold mb-4">Key info</h2>
<div className="grid grid-cols-7 gap-4">
<div>
<h3 className="text-1xl font-bold mb-2">Files</h3>
@ -52,10 +42,10 @@ const KeyInfo = ({ descriptor, resources }) => {
<h3 className="text-1xl font-bold mb-2">Updated</h3>
</div>
<div>
<h3 className="text-1xl font-bold mb-2">Licence</h3>
<h3 className="text-1xl font-bold mb-2">Licenses</h3>
</div>
<div>
<h3 className="text-1xl font-bold mb-2">Source</h3>
<h3 className="text-1xl font-bold mb-2">Sources</h3>
</div>
</div>
<div className="grid grid-cols-7 gap-4">
@ -63,27 +53,36 @@ const KeyInfo = ({ descriptor, resources }) => {
<h3 className="text-1xl">{resources.length}</h3>
</div>
<div>
<h3 className="text-1xl">{datasetSize && filesize(datasetSize, { bits: true })}</h3>
<h3 className="text-1xl">{datasetSize}</h3>
</div>
<div>
<h3 className="text-1xl">{resources[0]["format"]} zip</h3>
<h3 className="text-1xl">{formats}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor["created"]}</h3>
<h3 className="text-1xl">{descriptor.created && timeago.format(descriptor.created)}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor["updated"]}</h3>
<h3 className="text-1xl">{descriptor.updated && timeago.format(descriptor.updated)}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor["license"]}</h3>
</div>
<div>
<h3 className="text-1xl">
<h3 className="text-1xl">{
descriptor.licenses?.length && (descriptor.licenses.map((item, index) => (
<a className="text-yellow-600"
href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
{descriptor["sources"] && descriptor["sources"][0]["title"]}
href={item.path || '#'} title={item.title || ''}
key={index}>
{item.name}
</a>
</h3>
)))
}</h3>
</div>
<div>
<h3 className="text-1xl">{
descriptor.sources?.length && (descriptor.sources.map((item, index) => (
<a className="text-yellow-600" href={item.path} key={index}>
{item.title}
</a>
)))
}</h3>
</div>
</div>
</section>

5
yarn.lock
View File

@ -12453,6 +12453,11 @@ thunky@^1.0.2:
resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
timeago.js@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
timers-browserify@^2.0.4:
version "2.0.12"
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"