From bedc9a8d33cb9cddad549f4858b7cb86198b6357 Mon Sep 17 00:00:00 2001 From: Luccas Mateus Date: Fri, 19 May 2023 14:44:34 -0300 Subject: [PATCH] [examples/openspending][xl]: add table preview to showcase page, minor fixes (#895) Co-authored-by: deme --- .../components/DatasetsSearch.tsx | 57 ++++++++++++------- .../components/{Table.tsx => FlatUiTable.tsx} | 4 +- .../components/_shared/Layout.tsx | 2 +- .../pages/@org/[org]/[project].tsx | 51 +++++++++++++++-- examples/openspending/tsconfig.json | 5 +- 5 files changed, 91 insertions(+), 28 deletions(-) rename examples/openspending/components/{Table.tsx => FlatUiTable.tsx} (96%) diff --git a/examples/openspending/components/DatasetsSearch.tsx b/examples/openspending/components/DatasetsSearch.tsx index 7e7d364c..1d872f97 100644 --- a/examples/openspending/components/DatasetsSearch.tsx +++ b/examples/openspending/components/DatasetsSearch.tsx @@ -49,20 +49,35 @@ export default function DatasetsSearch({ ? dataset.countryCode === watch().country : true ) - // TODO: Does that really makes sense? - // What if the fiscalPeriod is 2015-2017 and inputs are - // set to 2015-2016. It's going to be filtered out but - // it shouldn't. - .filter((dataset) => - watch().minDate && watch().minDate !== '' - ? dataset.fiscalPeriod?.start >= watch().minDate - : true - ) - .filter((dataset) => - watch().maxDate && watch().maxDate !== '' - ? dataset.fiscalPeriod?.end <= watch().maxDate - : true - ); + .filter((dataset) => { + const filterMinDate = watch().minDate; + const filterMaxDate = watch().maxDate; + + const datasetMinDate = dataset.fiscalPeriod?.start; + const datasetMaxDate = dataset.fiscalPeriod?.end; + + let datasetStartOverlaps = false; + if (datasetMinDate) { + datasetStartOverlaps = + datasetMinDate >= filterMinDate && datasetMinDate <= filterMaxDate; + } + + let datasetEndOverlaps = false; + if (datasetMaxDate) { + datasetEndOverlaps = + datasetMaxDate >= filterMinDate && datasetMaxDate <= filterMaxDate; + } + + if (filterMinDate && filterMaxDate) { + return datasetStartOverlaps || datasetEndOverlaps; + } else if (filterMinDate) { + return datasetMinDate >= filterMinDate; + } else if (filterMaxDate) { + return datasetMinDate <= filterMaxDate; + } + + return true; + }); const paginatedDatasets = filteredDatasets.slice( (page - 1) * itemsPerPage, @@ -111,7 +126,9 @@ export default function DatasetsSearch({
- +
- +
{ id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" /> diff --git a/examples/openspending/components/Table.tsx b/examples/openspending/components/FlatUiTable.tsx similarity index 96% rename from examples/openspending/components/Table.tsx rename to examples/openspending/components/FlatUiTable.tsx index 9b646206..f9f01083 100644 --- a/examples/openspending/components/Table.tsx +++ b/examples/openspending/components/FlatUiTable.tsx @@ -62,7 +62,7 @@ const Spinning = () => { ); }; -export const Table: React.FC<{ url: string }> = ({ url }) => { +export const FlatUiTable: React.FC<{ url: string }> = ({ url }) => { return ( // Provide the client to your App @@ -87,7 +87,7 @@ const TableInner: React.FC<{ url: string }> = ({ url }) => {
; if (parsedData) return ( -
+
); diff --git a/examples/openspending/components/_shared/Layout.tsx b/examples/openspending/components/_shared/Layout.tsx index 7c10c66f..01ce8580 100644 --- a/examples/openspending/components/_shared/Layout.tsx +++ b/examples/openspending/components/_shared/Layout.tsx @@ -2,7 +2,7 @@ import { Header } from '../Header'; export default function Layout({ children }) { return ( -
+
{children}
diff --git a/examples/openspending/pages/@org/[org]/[project].tsx b/examples/openspending/pages/@org/[org]/[project].tsx index bedc6a89..858ddffc 100644 --- a/examples/openspending/pages/@org/[org]/[project].tsx +++ b/examples/openspending/pages/@org/[org]/[project].tsx @@ -13,6 +13,7 @@ import Layout from '../../../components/_shared/Layout'; import Link from 'next/link'; import { Project } from '../../../lib/project.interface'; import ExternalLinkIcon from '../../../components/icons/ExternalLinkIcon'; +import { FlatUiTable } from '@/components/FlatUiTable'; export default function ProjectPage({ project, @@ -21,7 +22,6 @@ export default function ProjectPage({ project: Project; readme: string; }) { - // Get description from datapackage or calculate // excerpt from README by getting all the content // up to the first dot. @@ -98,7 +98,7 @@ export default function ProjectPage({

Data files

This dataset contains {project.files.length} file - {project.files.length != 1 ? '' : 's'} + {project.files.length == 1 ? '' : 's'}

@@ -137,7 +137,6 @@ export default function ProjectPage({ } } } - return (
@@ -169,6 +168,44 @@ export default function ProjectPage({
+
+ {project.files?.map((file) => { + let size: number | string = file.size; + + if (!size) { + if (file.bytes) { + if (file.bytes > 1000000) { + size = (file.bytes / 1000000).toFixed(2) + ' MB'; + } else { + size = (file.bytes / 1000).toFixed(2) + ' kB'; + } + } + } + return ( +
+ {file.path && ( + <> +

+ {file.name} + {file.format ? `.${file.format}` : ''} +

+ {file.bytes >= 5132288 && ( + Previewing 5MB out of {size} + )} + + + )} +
+ ); + })} +
+ {readme && ( <>
@@ -192,7 +229,6 @@ export async function getStaticPaths() { github_pat ); - console.log(allProjects) const paths = allProjects.results.map((project) => ({ params: { // TODO: dynamize the org @@ -223,7 +259,12 @@ export async function getStaticProps({ params }) { const project = loadDataPackage(datapackage, repo); // TODO: should this be moved to the loader? - const readme = await getProjectReadme(orgName, projectName, 'main', github_pat); + const readme = await getProjectReadme( + orgName, + projectName, + 'main', + github_pat + ); return { props: { diff --git a/examples/openspending/tsconfig.json b/examples/openspending/tsconfig.json index b8d59788..71bfe9e4 100644 --- a/examples/openspending/tsconfig.json +++ b/examples/openspending/tsconfig.json @@ -13,7 +13,10 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "paths": { + "@/*": ["./*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]