Loading...
)
+ }
+
+ return (
+
+
+ )
+}
+
+export default Chart
\ No newline at end of file
diff --git a/components/Table.js b/components/Table.js
new file mode 100644
index 00000000..c2865a4d
--- /dev/null
+++ b/components/Table.js
@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+/*
+ * @param schema: Frictionless Table Schmea
+ * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
+ */
+const Table = ({ schema, data }) => {
+ const columns = schema.fields.map((field) => (
+ {
+ field: field.title || field.name,
+ headerName: field.name,
+ width: 300
+ }
+ ))
+ data = data.map((item, index)=>{
+ item.id = index //Datagrid requires every row to have an ID
+ return item
+ })
+
+ return (
+
+
+ );
+}
+
+export default Table
diff --git a/examples/catalog/.babelrc b/examples/catalog/.babelrc
new file mode 100644
index 00000000..1ff94f7e
--- /dev/null
+++ b/examples/catalog/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["next/babel"]
+}
diff --git a/examples/catalog/.eslintrc.js b/examples/catalog/.eslintrc.js
new file mode 100644
index 00000000..ea57f4e5
--- /dev/null
+++ b/examples/catalog/.eslintrc.js
@@ -0,0 +1,46 @@
+module.exports = {
+ root: true,
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaFeatures: { jsx: true },
+ },
+ env: {
+ browser: true,
+ node: true,
+ },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/eslint-recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react/recommended',
+ 'plugin:jsx-a11y/recommended',
+ // Prettier plugin and recommended rules
+ 'prettier/@typescript-eslint',
+ 'plugin:prettier/recommended',
+ ],
+ rules: {
+ // Include .prettierrc.js rules
+ 'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+ 'react/prop-types': 'off',
+ 'react/react-in-jsx-scope': 'off',
+ '@typescript-eslint/explicit-function-return-type': 'off',
+ '@typescript-eslint/ban-ts-ignore': 'off',
+ '@typescript-eslint/no-var-requires': 'off',
+ 'jsx-a11y/label-has-associated-control': [
+ 'error',
+ {
+ labelComponents: [],
+ labelAttributes: [],
+ controlComponents: [],
+ assert: 'either',
+ depth: 25,
+ },
+ ],
+ '@typescript-eslint/no-explicit-any': 'off',
+ },
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+};
diff --git a/examples/catalog/.prettierignore b/examples/catalog/.prettierignore
new file mode 100644
index 00000000..168d4b12
--- /dev/null
+++ b/examples/catalog/.prettierignore
@@ -0,0 +1,24 @@
+node_modules/
+
+# testing
+/coverage
+
+# next.js
+.next/
+/out/
+
+# yarn
+yarn-error.log
+yarn.lock
+
+# sass
+.sass-cache
+
+# misc
+sandbox/*
+.env
+.staging.env
+.nyc_output/*
+.DS_Store
+
+public/
diff --git a/examples/catalog/.prettierrc.js b/examples/catalog/.prettierrc.js
new file mode 100644
index 00000000..19ccceba
--- /dev/null
+++ b/examples/catalog/.prettierrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+ semi: true,
+ trailingComma: 'es5',
+ singleQuote: true,
+ printWidth: 79,
+ tabWidth: 2,
+ useTabs: false,
+};
diff --git a/examples/catalog/README.md b/examples/catalog/README.md
new file mode 100644
index 00000000..f656f809
--- /dev/null
+++ b/examples/catalog/README.md
@@ -0,0 +1,306 @@
+
+
+🌀 Portal.JS
+The javascript framework for
+data portals
+
+
+
+🌀 `Portal` is a framework for rapidly building rich data portal frontends using a modern frontend approach (javascript, React, SSR).
+
+`Portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN][]. `portal` is built in Javascript and React on top of the popular [Next.js][] framework.
+
+[ckan]: https://ckan.org/
+[next.js]: https://nextjs.com/
+
+Live DEMO: https://portal.datopian1.now.sh
+
+## Features
+
+- 🗺️ Unified sites: present data and content in one seamless site, pulling datasets from a DMS (e.g. CKAN) and content from a CMS (e.g. wordpress) with a common internal API.
+- 👩💻 Developer friendly: built with familiar frontend tech Javascript, React etc
+- 🔋 Batteries included: Full set of portal components out of the box e.g. catalog search, dataset showcase, blog etc.
+- 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly.
+- 🧱 Extensible: quickly extend and develop/import your own React components
+- 📝 Well documented: full set of documentation plus the documentation of NextJS and Apollo.
+
+### For developers
+
+- 🏗 Build with modern, familiar frontend tech such as Javascript and React.
+- 🚀 NextJS framework: so everything in NextJS for free React, SSR, static site generation, huge number of examples and integrations etc.
+ - SSR => unlimited number of pages, SEO etc whilst still using React.
+ - Static Site Generation (SSG) (good for small sites) => ultra-simple deployment, great performance and lighthouse scores etc
+- 📋 Typescript support
+
+## Getting Started
+
+### Setup
+
+Install a recent version of Node. You'll need Node 10.13 or later.
+
+### Create a Portal app
+
+To create a Portal app, open your terminal, cd into the directory you'd like to create the app in, and run the following command:
+
+```console
+npm init portal-app my-data-portal
+```
+
+> NB: Under the hood, this uses the tool called create-next-app, which bootstraps a Next.js app for you. It uses this template through the --example flag.
+>
+> If it doesn’t work, please open an issue.
+
+## Guide
+
+### Styling 🎨
+
+We use Tailwind as a CSS framework. Take a look at `/styles/index.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file.
+
+Have a look at Next.js support of CSS and ways of writing CSS:
+
+https://nextjs.org/docs/basic-features/built-in-css-support
+
+### Backend
+
+So far the app is running with mocked data behind. You can connect CMS and DMS backends easily via environment variables:
+
+```console
+$ export DMS=http://ckan:5000
+$ export CMS=http://myblog.wordpress.com
+```
+
+> Note that we don't yet have implementations for the following CKAN features:
+>
+> - Activities
+> - Auth
+> - Groups
+> - Facets
+
+### Routes
+
+These are the default routes set up in the "starter" app.
+
+- Home `/`
+- Search `/search`
+- Dataset `/@org/dataset`
+- Resource `/@org/dataset/r/resource`
+- Organization `/@org`
+- Collection (aka group in CKAN) (?) - suggest to merge into org
+- Static pages, eg, `/about` etc. from CMS or can do it without external CMS, e.g., in Next.js
+
+### New Routes
+
+TODO
+
+### Data fetching
+
+We use Apollo client which allows us to query data with GraphQL. We have setup CKAN API for the demo (it uses demo.ckan.org as DMS):
+
+http://portal.datopian1.now.sh/
+
+Note that we don't have Apollo Server but we connect CKAN API using [`apollo-link-rest`](https://www.apollographql.com/docs/link/links/rest/) module. You can see how it works in [lib/apolloClient.ts](https://github.com/datopian/portal/blob/master/lib/apolloClient.ts) and then have a look at [pages/\_app.tsx](https://github.com/datopian/portal/blob/master/pages/_app.tsx).
+
+For development/debugging purposes, we suggest installing the Chrome extension - https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm.
+
+#### i18n configuration
+
+Portal.js is configured by default to support both `English` and `French` subpath for language translation. But for subsequent users, this following steps can be used to configure i18n for other languages;
+
+1. Update `next.config.js`, to add more languages to the i18n locales
+
+```js
+i18n: {
+ locales: ['en', 'fr', 'nl-NL'], // add more language to the list
+ defaultLocale: 'en', // set the default language to use
+},
+```
+
+2. Create a folder for the language in `locales` --> `locales/en-Us`
+
+3. In the language folder, different namespace files (json) can be created for each translation. For the `index.js` use-case, I named it `common.json`
+
+```json
+// locales/en/common.json
+{
+ "title" : "Portal js in English",
+}
+
+// locales/fr/common.json
+{
+ "title" : "Portal js in French",
+}
+```
+
+4. To use on pages using Server-side Props.
+
+```js
+import { loadNamespaces } from './_app';
+import useTranslation from 'next-translate/useTranslation';
+
+const Home: React.FC = ()=> {
+ const { t } = useTranslation();
+ return (
+ {t(`common:title`)}
// we use common and title base on the common.json data
+ );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
+ ........ ........
+ return {
+ props : {
+ _ns: await loadNamespaces(['common'], locale),
+ }
+ };
+};
+
+```
+
+5. Go to the browser and view the changes using language subpath like this `http://localhost:3000` and `http://localhost:3000/fr`. **Note** The subpath also activate chrome language Translator
+
+#### Pre-fetch data in the server-side
+
+When visiting a dataset page, you may want to fetch the dataset metadata in the server-side. To do so, you can use `getServerSideProps` function from NextJS:
+
+```javascript
+import { GetServerSideProps } from 'next';
+import { initializeApollo } from '../lib/apolloClient';
+import gql from 'graphql-tag';
+
+const QUERY = gql`
+ query dataset($id: String) {
+ dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+ result
+ }
+ }
+`;
+
+...
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+ const apolloClient = initializeApollo();
+
+ await apolloClient.query({
+ query: QUERY,
+ variables: {
+ id: 'my-dataset'
+ },
+ });
+
+ return {
+ props: {
+ initialApolloState: apolloClient.cache.extract(),
+ },
+ };
+};
+```
+
+This would fetch the data from DMS and save it in the Apollo cache so that we can query it again from the components.
+
+#### Access data from a component
+
+Consider situation when rendering a component for org info on the dataset page. We already have pre-fetched dataset metadata that includes `organization` property with attributes such as `name`, `title` etc. We can now query only organization part for our `Org` component:
+
+```javascript
+import { useQuery } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+
+export const GET_ORG_QUERY = gql`
+ query dataset($id: String) {
+ dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") {
+ result {
+ organization {
+ name
+ title
+ image_url
+ }
+ }
+ }
+ }
+`;
+
+export default function Org({ variables }) {
+ const { loading, error, data } = useQuery(
+ GET_ORG_QUERY,
+ {
+ variables: { id: 'my-dataset' }
+ }
+ );
+
+ ...
+
+ const { organization } = data.dataset.result;
+
+ return (
+ <>
+ {organization ? (
+ <>
+
+
+
+`;
+
+exports[`📸 of Form component with query 1`] = `
+
+
+
+`;
diff --git a/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap b/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap
new file mode 100644
index 00000000..f3c5230e
--- /dev/null
+++ b/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Input component with empty 1`] = `
+
+
+`;
diff --git a/examples/catalog/components/_shared/CustomLink.tsx b/examples/catalog/components/_shared/CustomLink.tsx
new file mode 100644
index 00000000..2b50236e
--- /dev/null
+++ b/examples/catalog/components/_shared/CustomLink.tsx
@@ -0,0 +1,15 @@
+type LinkProps = {
+ url: string;
+ format: any;
+};
+
+const CustomLink: React.FC+ + 12 + +
+ + dataset + + +| + {name} + | + ))} +
|---|
| + {(render && typeof render === 'function' && render(item)) || + item[key] || + ''} + | + ))} +
Loading
;
+
+ const { result } = data.dataset;
+ return Loading
;
+
+ const { organization } = data.dataset.result;
+ return (
+ <>
+ {organization ? (
+ <>
+ Loading
;
+
+ const { result } = data.dataset;
+
+ return (
+ <>
+ Data Files
+Loading
;
+
+ const { result } = data.dataset;
+ const resource = result.resources.find(
+ (item) => item.name === variables.resource
+ );
+
+ return <>{JSON.stringify(resource)};
+};
+
+export default DataExplorer;
diff --git a/examples/catalog/components/search/Form.tsx b/examples/catalog/components/search/Form.tsx
new file mode 100644
index 00000000..0824c8ff
--- /dev/null
+++ b/examples/catalog/components/search/Form.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+const Form: React.FC = () => {
+ const router = useRouter();
+ const [q, setQ] = useState(router.query.q);
+ const [sort, setSort] = useState(router.query.sort);
+
+ const handleChange = (event) => {
+ if (event.target.name === 'q') {
+ setQ(event.target.value);
+ } else if (event.target.name === 'sort') {
+ setSort(event.target.value);
+ }
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ router.push({
+ pathname: '/search',
+ query: { q, sort },
+ });
+ };
+
+ return (
+
+ );
+};
+
+export default Form;
diff --git a/examples/catalog/components/search/Item.tsx b/examples/catalog/components/search/Item.tsx
new file mode 100644
index 00000000..bbd5ffae
--- /dev/null
+++ b/examples/catalog/components/search/Item.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import Link from 'next/link';
+
+const Item: React.FC<{ datapackage: any }> = ({ datapackage }) => {
+ return (
+
+
+ );
+};
+
+export default Item;
diff --git a/examples/catalog/components/search/List.tsx b/examples/catalog/components/search/List.tsx
new file mode 100644
index 00000000..fc488e0d
--- /dev/null
+++ b/examples/catalog/components/search/List.tsx
@@ -0,0 +1,27 @@
+import { useQuery } from '@apollo/react-hooks';
+import Item from './Item';
+import { ErrorMessage } from '../_shared';
+import { SEARCH_QUERY } from '../../graphql/queries';
+
+const List: React.FC<{ variables: any }> = ({ variables }) => {
+ const { loading, error, data } = useQuery(SEARCH_QUERY, {
+ variables,
+ // Setting this value to true will make the component rerender when
+ // the "networkStatus" changes, so we are able to know if it is fetching
+ // more data
+ notifyOnNetworkStatusChange: true,
+ });
+
+ if (error) return + + + {datapackage.title || datapackage.name} + + +
+ + + {datapackage.organization + ? datapackage.organization.title + : 'dataset'} + + +
+ {datapackage.description || datapackage.notes}
+
+ Loading
;
+ const { result } = data.search;
+ return (
+ -
+ {result.results.map((pkg, index) => (
+
- + ))} +
Loading
;
+
+ const { result } = data.search;
+
+ return (
+ + {result.count} results found +
+ ); +}; + +export default Total; diff --git a/examples/catalog/components/static/List.tsx b/examples/catalog/components/static/List.tsx new file mode 100644 index 00000000..c560ea11 --- /dev/null +++ b/examples/catalog/components/static/List.tsx @@ -0,0 +1,39 @@ +import parse from 'html-react-parser'; +import { useQuery } from '@apollo/react-hooks'; +import { ErrorMessage } from '../_shared'; +import { GET_POSTS_QUERY } from '../../graphql/queries'; + +const List: React.FC = () => { + const { loading, error, data } = useQuery(GET_POSTS_QUERY, { + // Setting this value to true will make the component rerender when + // the "networkStatus" changes, so we are able to know if it is fetching + // more data + notifyOnNetworkStatusChange: true, + }); + + if (error) returnLoading
;
+
+ const { posts, found } = data.posts;
+
+ return (
+ <>
+ + {found} posts found +
+ {posts.map((post, index) => ( +
+
+ {parse(post.title)}
+
+
+ ))}
+
+ );
+};
+
+export default List;
diff --git a/examples/catalog/components/static/Page.tsx b/examples/catalog/components/static/Page.tsx
new file mode 100644
index 00000000..87dcb19d
--- /dev/null
+++ b/examples/catalog/components/static/Page.tsx
@@ -0,0 +1,32 @@
+import parse from 'html-react-parser';
+import { useQuery } from '@apollo/react-hooks';
+import { ErrorMessage } from '../_shared';
+import { GET_PAGE_QUERY } from '../../graphql/queries';
+
+const Page: React.FC<{ variables: any }> = ({ variables }) => {
+ const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
+ variables,
+ // Setting this value to true will make the component rerender when
+ // the "networkStatus" changes, so we are able to know if it is fetching
+ // more data
+ notifyOnNetworkStatusChange: true,
+ });
+
+ if (error) return {parse(post.excerpt)}
+Loading
;
+
+ const { title, content, modified, featured_image } = data.page;
+
+ return (
+ <>
+ + {title} +
+Edited: {modified}
+{parse(content)}
+
+ );
+};
+
+export default Page;
diff --git a/examples/catalog/components/static/Post.tsx b/examples/catalog/components/static/Post.tsx
new file mode 100644
index 00000000..65d4aa42
--- /dev/null
+++ b/examples/catalog/components/static/Post.tsx
@@ -0,0 +1,32 @@
+import parse from 'html-react-parser';
+import { useQuery } from '@apollo/react-hooks';
+import { ErrorMessage } from '../_shared';
+import { GET_PAGE_QUERY } from '../../graphql/queries';
+
+const Post: React.FC<{ variables: any }> = ({ variables }) => {
+ const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
+ variables,
+ // Setting this value to true will make the component rerender when
+ // the "networkStatus" changes, so we are able to know if it is fetching
+ // more data
+ notifyOnNetworkStatusChange: true,
+ });
+
+ if (error) return Loading
;
+
+ const { title, content, modified, featured_image } = data.page;
+
+ return (
+ <>
+ + {title} +
+Edited: {modified}
+{parse(content)}
+
+ );
+};
+
+export default Post;
diff --git a/examples/catalog/config/jest/cssTransform.js b/examples/catalog/config/jest/cssTransform.js
new file mode 100644
index 00000000..6f1e7146
--- /dev/null
+++ b/examples/catalog/config/jest/cssTransform.js
@@ -0,0 +1,8 @@
+module.exports = {
+ process() {
+ return 'module.exports = {};';
+ },
+ getCacheKey() {
+ return 'cssTransform';
+ },
+};
diff --git a/examples/catalog/cypress.json b/examples/catalog/cypress.json
new file mode 100644
index 00000000..17ef242e
--- /dev/null
+++ b/examples/catalog/cypress.json
@@ -0,0 +1,3 @@
+{
+ "baseUrl": "http://localhost:3000"
+}
diff --git a/examples/catalog/cypress/fixtures/example.json b/examples/catalog/cypress/fixtures/example.json
new file mode 100644
index 00000000..02e42543
--- /dev/null
+++ b/examples/catalog/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/examples/catalog/cypress/integration/pages/homepage-spec.js b/examples/catalog/cypress/integration/pages/homepage-spec.js
new file mode 100644
index 00000000..4bec2407
--- /dev/null
+++ b/examples/catalog/cypress/integration/pages/homepage-spec.js
@@ -0,0 +1,32 @@
+describe('Test Home Page', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ });
+
+ it('renders the hero title', () => {
+ cy.contains('Find, Share and Publish Quality Data with Datahub');
+ });
+
+ it('checks that a search form exists', () => {
+ cy.get('form').contains('Search');
+ });
+
+ // it('submits the search form', () => {
+ // cy.get('form').find('[type="text"]').type('gdp');
+ // cy.get('form').submit();
+ // cy.url().should('include', '/search?q=gdp&sort=');
+ // cy.get('.text-3xl').and('contain.text', '1 results found');
+ // });
+
+ it('shows the recent datasets', () => {
+ cy.contains('Recent Datasets');
+ });
+
+ it('returns the expected number of recent datasets', () => {
+ cy.get('.recent')
+ .find('div')
+ .should(($div) => {
+ expect($div).to.have.length.of.at.least(2);
+ });
+ });
+});
diff --git a/examples/catalog/cypress/integration/pages/search-spec.js b/examples/catalog/cypress/integration/pages/search-spec.js
new file mode 100644
index 00000000..9715c278
--- /dev/null
+++ b/examples/catalog/cypress/integration/pages/search-spec.js
@@ -0,0 +1,21 @@
+describe('Test Search Page', () => {
+ beforeEach(() => {
+ cy.visit('/search');
+ });
+
+ it('has a search form', () => {
+ cy.contains('form');
+ cy.contains('Search');
+ });
+
+ // it('should return a search result', () => {
+ // cy.get('form').find('[type="text"]').type('gdp');
+ // cy.get('form').submit();
+ // cy.url().should('include', 'search?q=gdp&sort=');
+ // cy.get('.text-3xl').should('have.text', '1 results found');
+ // cy.get('.text-xl > .text-primary').should(
+ // 'have.text',
+ // 'Country, Regional and World GDP (Gross Domestic Product)'
+ // );
+ // });
+});
diff --git a/examples/catalog/cypress/plugins/index.js b/examples/catalog/cypress/plugins/index.js
new file mode 100644
index 00000000..8dd144a6
--- /dev/null
+++ b/examples/catalog/cypress/plugins/index.js
@@ -0,0 +1,21 @@
+/// Loading
;
+ const { result } = data.dataset;
+
+ return (
+ <>
+
+ Loading
;
+ const result = data.dataset.result;
+ // Find right resource
+ const resource = result.resources.find(
+ (item) => item.name === variables.resource
+ );
+ return (
+ <>
+
+ + {resource.title || resource.name} +
+
+
+ {t(`common:title`)}
+
+
+
+
+
+
+
+ );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({
+ locale,
+ locales,
+}) => {
+ const apolloClient = initializeApollo();
+
+ await apolloClient.query({
+ query: SEARCH_QUERY,
+ variables: {
+ sort: 'metadata_created desc',
+ rows: 3,
+ },
+ });
+
+ return {
+ props: {
+ initialApolloState: apolloClient.cache.extract(),
+ _ns: await loadNamespaces(['common'], locale),
+ locale,
+ locales,
+ },
+ };
+};
+
+export default Home;
diff --git a/examples/catalog/pages/p/[page]/index.tsx b/examples/catalog/pages/p/[page]/index.tsx
new file mode 100644
index 00000000..6fe1ccae
--- /dev/null
+++ b/examples/catalog/pages/p/[page]/index.tsx
@@ -0,0 +1,45 @@
+import { GetServerSideProps } from 'next';
+import Head from 'next/head';
+import { initializeApollo } from '../../../lib/apolloClient';
+import Nav from '../../../components/home/Nav';
+import Page from '../../../components/static/Page';
+import { GET_PAGE_QUERY } from '../../../graphql/queries';
+
+type Props = {
+ variables: any;
+};
+
+const PageItem: React.FC
+
+ Find, Share and Publish
+
+
+ Find, Share and Publish
Quality Data with{' '}
+ Datahub
+
+ + {t(`common:description`)} +
+ +
+ 
+
+
+
+
+ Dataset
+
+
+
+
+
+ )
+ }
+
+ 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
+ })
+
+ }
+
+ return (
+ + No dataset found in path +
+
+
+ Dataset
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ 'No preview is available for this dataset'
+ )}
+
+
+
+
+
+
+ )
+}
+
+
+export async function getStaticProps() {
+ if (!datasetsDirectory) {
+ return { props: {} }
+ }
+
+ const dataset = await getDataset(datasetsDirectory)
+ const datasetWithViews = addView(dataset)
+ return datasetWithViews
+
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..3fa0a951
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..4965832f
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 00000000..67496685
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,3 @@
+.MuiTableCell-root {
+ @apply font-mono
+}
diff --git a/styles/tailwind.css b/styles/tailwind.css
new file mode 100644
index 00000000..bd6213e1
--- /dev/null
+++ b/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..45e0e788
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,22 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ container: {
+ center: true,
+ },
+ extend: {
+ fontFamily: {
+ mono: ["Inconsolata", ...defaultTheme.fontFamily.mono]
+ }
+ },
+ },
+ variants: {
+ extend: {},
+ },
+ plugins: [
+ require('@tailwindcss/typography'),
+ ],
+}
diff --git a/tests/components/Chart.test.js b/tests/components/Chart.test.js
new file mode 100644
index 00000000..3f17ea34
--- /dev/null
+++ b/tests/components/Chart.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import {render } from '@testing-library/react';
+import path from 'path'
+import Chart from '../../components/Chart';
+import { getDataset } from "../../lib/dataset"
+import { addView } from '../../lib/utils'
+
+
+let dataset
+let datasetWithView
+
+beforeAll(async () => {
+ const datasetsDirectory = path.join(process.cwd(), 'fixtures', 'datasetsPlotlyView')
+ dataset = await getDataset(datasetsDirectory)
+ datasetWithView = addView(dataset)
+});
+
+
+/** @test {Chart Component} */
+describe('Chart Component', () => {
+ it('should render without crashing', async () => {
+ const spec = JSON.parse(datasetWithView.props.specs)[0]
+ const { findByTestId } = render(+ {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}
+Data Files
+
+
+
+ {resources.map((resource, index) => {
+ return (
+
+
+ File
+
+
+ Description
+
+
+ Size
+
+
+ Last Changed
+
+
+ Download
+
+
+ )
+ })}
+
+
+ {resource.name}
+
+
+ {resource.description || "No description"}
+
+
+ {filesize(resource.size, { bits: true })}
+
+
+
+ {resource.updated}
+Graph
+ {!specs || Object.keys(specs).length == 0 ? (
+
) :
+ (
+ Object.values(JSON.parse(specs)).map((spec, i) => {
+ if (spec.specType == "vega") {
+ return (
+ No graph to display
+
+
+ )
+ } else if (["simple", "plotly"].includes(spec.specType)) {
+ return (
+
+
)
+ } else {
+ return Cannot display view
+ } + }) + + )} +Data Preview
+{descriptor.title}
+ {resources[0].sample ? ( +README
+
+
+
+