99 lines
3.8 KiB
JavaScript
99 lines
3.8 KiB
JavaScript
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 || 0) :
|
|
resources.reduce((accumulator, currentValue) => {
|
|
return (accumulator.size || 0) + (currentValue.size || 0)
|
|
})
|
|
}
|
|
|
|
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">{datasetSize && 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"] && descriptor["sources"][0]["web"]}>
|
|
{descriptor["sources"] && descriptor["sources"][0]["title"]}
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
KeyInfo.propTypes = {
|
|
descriptor: PropTypes.object.isRequired,
|
|
resources: PropTypes.array.isRequired
|
|
}
|
|
export default KeyInfo |