[examples/openspending][xl]: add table preview to showcase page, minor fixes (#895)

Co-authored-by: deme <joaommdemenech@gmail.com>

examples/openspending/components/DatasetsSearch.tsx

@@ -49,20 +49,35 @@ export default function DatasetsSearch({
         ? dataset.countryCode === watch().country
         : true
     )
-    // TODO: Does that really makes sense?
+    .filter((dataset) => {
-    // What if the fiscalPeriod is 2015-2017 and inputs are
+      const filterMinDate = watch().minDate;
-    // set to 2015-2016. It's going to be filtered out but
+      const filterMaxDate = watch().maxDate;
-    // it shouldn't.
+
-    .filter((dataset) =>
+      const datasetMinDate = dataset.fiscalPeriod?.start;
-      watch().minDate && watch().minDate !== ''
+      const datasetMaxDate = dataset.fiscalPeriod?.end;
-        ? dataset.fiscalPeriod?.start >= watch().minDate
+
-        : true
+      let datasetStartOverlaps = false;
-    )
+      if (datasetMinDate) {
-    .filter((dataset) =>
+        datasetStartOverlaps =
-      watch().maxDate && watch().maxDate !== ''
+          datasetMinDate >= filterMinDate && datasetMinDate <= filterMaxDate;
-        ? dataset.fiscalPeriod?.end <= watch().maxDate
+      }
-        : true
+
-    );
+      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({
           </select>
         </div>
         <div className="sm:basis-1/6">
-          <label className="text-sm text-gray-600 font-medium">Min. date</label>
+          <label className="text-sm text-gray-600 font-medium">
+            Fiscal Period Start
+          </label>
           <div className="relative">
             <input
               aria-label="Min. date"
@@ -122,7 +139,9 @@ export default function DatasetsSearch({
           </div>
         </div>
         <div className="sm:basis-1/6">
-          <label className="text-sm text-gray-600 font-medium">Max. date</label>
+          <label className="text-sm text-gray-600 font-medium">
+            Fiscal Period End
+          </label>
           <div className="relative">
             <input
               aria-label="Max. date"
@@ -196,9 +215,9 @@ const CloseIcon = () => {
           id="Vector"
           d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18"
           stroke="currentColor"
-          stroke-width="2"
+          strokeWidth="2"
-          stroke-linecap="round"
+          strokeLinecap="round"
-          stroke-linejoin="round"
+          strokeLinejoin="round"
         />
       </g>
     </svg>

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
     <QueryClientProvider client={queryClient}>
@@ -87,7 +87,7 @@ const TableInner: React.FC<{ url: string }> = ({ url }) => {
     </div>;
   if (parsedData)
     return (
-      <div className="h-[500px] overflow-scroll">
+      <div className="h-[500px] w-full">
         <Grid data={parsedData.data} />
       </div>
     );

examples/openspending/components/_shared/Layout.tsx

@@ -2,7 +2,7 @@ import { Header } from '../Header';
 
 export default function Layout({ children }) {
   return (
-    <div className="bg-white min-h-screen">
+    <div className="bg-white min-h-screen pb-32">
       <Header />
       {children}
     </div>

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({
         <h3 className="mb-1 mt-10">Data files</h3>
         <p>
           This dataset contains {project.files.length} file
-          {project.files.length != 1 ? '' : 's'}
+          {project.files.length == 1 ? '' : 's'}
         </p>
         <div className="inline-block min-w-full py-2 align-middle">
           <table className="mt-0 min-w-full divide-y divide-gray-300">
@@ -137,7 +137,6 @@ export default function ProjectPage({
                     }
                   }
                 }
-
                 return (
                   <tr key={file.name}>
                     <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
@@ -169,6 +168,44 @@ export default function ProjectPage({
           </table>
         </div>
 
+        <div className="flex flex-col gap-y-16 ">
+          {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 (
+              <div key={file.name}>
+                {file.path && (
+                  <>
+                    <h4>
+                      {file.name}
+                      {file.format ? `.${file.format}` : ''}
+                    </h4>
+                    {file.bytes >= 5132288 && (
+                      <span>Previewing 5MB out of {size}</span>
+                    )}
+                    <FlatUiTable
+                      url={
+                        file.path.startsWith('http')
+                          ? file.path
+                          : `https://raw.githubusercontent.com/${project.owner.name}/${project.repo.name}/main/${file.path}`
+                      }
+                    />
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
         {readme && (
           <>
             <hr />
@@ -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: {

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"]