Merge pull request #2 from datopian/feat/resource-chart

Add charts to the homepage

Author: willy1989cv

messages/en.json

@@ -1,7 +1,7 @@
 {
   "Site": {
     "title": "Research Portal",
-    "description": "The data in this demo is for illustration only and should not be used for research, analysis, or decision-making.",
+    "description": "Data provided for demonstration purposes only.",
     "homeTitle": "Home"
   },
   "Common": {

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import DatasetCard from "@/components/package/dataset/DatasetCard";
+import HomeDataSignalCarousel from "@/components/home/HomeDataSignalCarousel";
 import HomePromptChips from "@/components/home/HomePromptChips";
 import ReportCard from "@/components/reports/ReportCard";
 import SearchForm from "@/components/package/search/SearchForm";
@@ -43,8 +44,12 @@ export default async function Home() {
     "mailto:data@example.com?subject=Open%20Data%20Request";
   const suggestedPrompts = QUERYLESS_SUGGESTED_PROMPTS;
 
-  const [featuredDatasetsResult, statsResult, visualizationsResult, allGroups] =
-    await Promise.all([
+  const [
+    featuredDatasetsResult,
+    statsResult,
+    visualizationsResult,
+    allGroups,
+  ] = await Promise.all([
       searchDatasets({
         options: {
           limit: 4,
@@ -188,6 +193,8 @@ export default async function Home() {
               ))}
             </div>
           </div>
+
+          <HomeDataSignalCarousel />
         </Container>
       </section>
 

src/components/csv-explorer/DataProvider.tsx

@@ -11,7 +11,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import Papa from "papaparse";
+import { parseCsvRows } from "@/lib/csv";
+import type { ParseMeta, ParseResult } from "papaparse";
 import { isValidDate } from "./utils";
 
 export type SortConfig =
@@ -82,12 +83,15 @@ export const useResourceDataSafe = () => {
   return context;
 };
 
-const parseData = (stringData: string): Papa.ParseResult<RowData> => {
-  return Papa.parse<RowData>(stringData, {
-    header: true,
-    skipEmptyLines: true,
-    dynamicTyping: true,
-  });
+const parseData = (stringData: string): ParseResult<RowData> => {
+  return {
+    data: parseCsvRows<RowData>(stringData, {
+      dynamicTyping: true,
+      throwOnErrors: false,
+    }),
+    errors: [],
+    meta: {} as ParseMeta,
+  };
 };
 
 export const DataStateProvider = ({

src/components/csv-explorer/SearchDataForm.tsx

@@ -1,26 +1,15 @@
 "use client";
 
 import { useCallback, useRef, useState } from "react";
-import Papa from "papaparse";
+import { parseCsvRows, unparseCsvRows } from "@/lib/csv";
 import { useResourceData } from "./DataProvider";
 import { Loader2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 
 type CsvRow = Record<string, string | number | null | undefined>;
 
 function parseCsv(data: string): CsvRow[] {
-  const result = Papa.parse<CsvRow>(data, {
-    header: true,
-    skipEmptyLines: true,
-  });
-
-  if (result.errors.length > 0) {
-    throw new Error(
-      `CSV parsing errors: ${result.errors.map((e) => e.message).join(", ")}`
-    );
-  }
-
-  return result.data;
+  return parseCsvRows<CsvRow>(data);
 }
 
 export default function SearchDataForm() {
@@ -68,7 +57,7 @@ export default function SearchDataForm() {
           )
         );
 
-        const csvString = Papa.unparse(matchingRows);
+        const csvString = unparseCsvRows(matchingRows);
         context.setTableData(csvString);
         context.setCurrentPage(1);
       } catch (err) {
@@ -89,7 +78,7 @@ export default function SearchDataForm() {
       const baseRows = await ensureRows();
       if (!baseRows) return;
 
-      const csvString = Papa.unparse(baseRows);
+      const csvString = unparseCsvRows(baseRows);
       context.setTableData(csvString);
       context.setCurrentPage(1);
     } catch (err) {

src/components/home/HomeDataSignalCarousel.tsx

@@ -0,0 +1,139 @@
+import { ResourceChart } from "@/components/resource-chart";
+import { getDatasetDetails } from "@/lib/ckan/dataset";
+import { getResourceByName } from "@/lib/ckan/resource";
+import { toPublicOrgSlug } from "@/lib/portal-name";
+import type { ResourceChartConfig } from "@/components/resource-chart";
+import HomeDataSignalCarouselClient, {
+  type HomeDataSignalSlide,
+} from "./HomeDataSignalCarouselClient";
+
+type SlideDefinition = HomeDataSignalSlide & {
+  resourceName: string;
+  config: ResourceChartConfig;
+};
+
+type ResolvedSlide = SlideDefinition & {
+  resourceId: string;
+  resourceHref?: string;
+};
+
+const SLIDES: SlideDefinition[] = [
+  {
+    id: "co2-concentration",
+    resourceName: "co2-annmean-mlo",
+    eyebrow: "Data signal",
+    title: "Atmospheric CO2 concentration",
+    description:
+      "Annual mean carbon dioxide levels measured at Mauna Loa, showing the long-run trend in atmospheric concentration.",
+    badges: ["CO2 concentration", "Annual series"],
+    config: {
+      type: "line",
+      x: "Year",
+      y: "Mean",
+      aggregation: "avg",
+      sort: "x-asc",
+      limit: 90,
+      xLabel: "Year",
+      yLabel: "CO2 concentration (ppm)",
+      height: 270,
+    },
+  },
+  {
+    id: "temperature-anomaly",
+    resourceName: "annual",
+    eyebrow: "Climate record",
+    title: "Global temperature anomaly",
+    description:
+      "Annual global surface temperature anomaly, useful for seeing how measured temperatures diverge from the historical baseline.",
+    badges: ["Temperature anomaly", "Annual series"],
+    config: {
+      type: "line",
+      x: "Year",
+      y: "Mean",
+      filters: { Source: "GCAG" },
+      aggregation: "avg",
+      sort: "x-asc",
+      limit: 180,
+      xLabel: "Year",
+      yLabel: "Temperature anomaly",
+      height: 270,
+    },
+  },
+  {
+    id: "fossil-co2-emitters",
+    resourceName: "top-emitters",
+    eyebrow: "Country comparison",
+    title: "Largest fossil CO2 emitters in 2020",
+    description:
+      "A ranked snapshot of country-level fossil-fuel and cement-related CO2 emissions for the latest year in this resource.",
+    badges: ["Million tonnes CO2", "Top countries"],
+    config: {
+      type: "bar-h",
+      x: "country",
+      y: "total_mt",
+      filters: { year: 2020 },
+      aggregation: "sum",
+      sort: "y-desc",
+      limit: 8,
+      xLabel: "Total emissions",
+      yLabel: "Country",
+      height: 330,
+    },
+  },
+];
+
+function toClientSlide(slide: SlideDefinition): HomeDataSignalSlide {
+  return {
+    id: slide.id,
+    eyebrow: slide.eyebrow,
+    title: slide.title,
+    description: slide.description,
+    badges: slide.badges,
+    resourceHref: slide.resourceHref,
+  };
+}
+
+export default async function HomeDataSignalCarousel() {
+  const resources = await Promise.all(
+    SLIDES.map((slide) => getResourceByName(slide.resourceName)),
+  );
+  const datasets = await Promise.all(
+    resources.map((resource) =>
+      resource?.package_id ? getDatasetDetails(resource.package_id).catch(() => null) : null,
+    ),
+  );
+
+  const slides = SLIDES.reduce<ResolvedSlide[]>((resolvedSlides, slide, index) => {
+    const resource = resources[index];
+    const dataset = datasets[index];
+
+    if (!resource?.id) return resolvedSlides;
+
+    resolvedSlides.push({
+      ...slide,
+      resourceId: resource.id,
+      resourceHref:
+        dataset?.name && dataset.organization?.name
+          ? `/@${toPublicOrgSlug(dataset.organization.name)}/${dataset.name}`
+          : undefined,
+    });
+
+    return resolvedSlides;
+  }, []);
+
+  if (slides.length === 0) return null;
+
+  return (
+    <HomeDataSignalCarouselClient
+      slides={slides.map(toClientSlide)}
+    >
+      {slides.map((slide) => (
+        <ResourceChart
+          key={slide.id}
+          resourceId={slide.resourceId}
+          config={slide.config}
+        />
+      ))}
+    </HomeDataSignalCarouselClient>
+  );
+}