Adds new result element code

stiftelsen-effekt · Nov 21, 2024 · fa84387 · fa84387
1 parent a608be6
commit fa84387
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 37 deletions.
diff --git a/components/main/blocks/ResultContentRenderer.tsx b/components/main/blocks/ResultContentRenderer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import links from "./Links/Links.module.scss";
 import {
   SectionContainerProps,
@@ -13,6 +13,41 @@ import { GiveBlock } from "./GiveBlock/GiveBlock";
 import { ResultsGraphData } from "../../../pages/ResultsPage";
 import dynamic from "next/dynamic";
 import { stegaClean } from "@sanity/client/stega";
+import { ResultsHeadline } from "../../shared/components/ResultsHeadline/ResultsHeadline";
+
+const CumulativeDonationsSkeleton = () => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "670px",
+        backgroundColor: "#f3f4f6",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      LOADING!
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: "-100%",
+          width: "100%",
+          height: "100%",
+          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent)",
+          animation: "shimmer 1s infinite",
+        }}
+      />
+      <style>{`
+        @keyframes shimmer {
+          100% {
+            transform: translateX(200%);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
 
 /** Dynamic imports */
 const CumulativeDonations = dynamic(() =>
@@ -67,6 +102,30 @@ export const ResultContentRenderer: React.FC<{ content: any; graphData: ResultsG
                             <Links links={block.links}></Links>
                           </div>
                         );
+                      case "resultsheadline":
+                        const totalOutputs = block.outputs.map((output: string) => {
+                          const data = graphData.monthlyDonationsPerOutput.find(
+                            (o) => o.output === mapSanityOutputToDataOutput(output),
+                          );
+                          if (!data) {
+                            return "Did not find data for output type " + output;
+                          }
+                          return {
+                            name:
+                              data.output.indexOf("vitamin") > -1
+                                ? data.output
+                                : data.output.toLowerCase(),
+                            outputs: data.total.numberOfOutputs,
+                          };
+                        });
+
+                        return (
+                          <ResultsHeadline
+                            key={block._key || block._id}
+                            headlineNumbers={graphData.resultsHeadlineNumbers}
+                            totalOutputs={totalOutputs}
+                          />
+                        );
                       case "contactinfo":
                         return (
                           <ContactInfo
@@ -108,11 +167,13 @@ export const ResultContentRenderer: React.FC<{ content: any; graphData: ResultsG
                       }
                       case "cumulativedonationsgraph":
                         return (
-                          <CumulativeDonations
-                            key={block._key || block._id}
-                            dailyDonations={graphData.dailyDonations}
-                            graphContext={block.graphcontext}
-                          />
+                          <Suspense fallback={<CumulativeDonationsSkeleton />}>
+                            <CumulativeDonations
+                              key={block._key || block._id}
+                              dailyDonations={graphData.dailyDonations}
+                              graphContext={block.graphcontext}
+                            />
+                          </Suspense>
                         );
                       case "resultsoutput":
                         const data = graphData.monthlyDonationsPerOutput.find(

diff --git a/components/shared/components/Graphs/Results/CumulativeDonations/CumulativeDonations.tsx b/components/shared/components/Graphs/Results/CumulativeDonations/CumulativeDonations.tsx
@@ -3,8 +3,6 @@ import { useRef } from "react";
 import { useEffect } from "react";
 import { useState } from "react";
 import * as Plot from "@observablehq/plot";
-import AnimateHeight from "react-animate-height";
-import { BlockTablesContent } from "../../../../../main/blocks/BlockTable/BlockTablesContent";
 import styles from "./CumulativeDonations.module.scss";
 import resultsStyle from "../Shared.module.scss";
 import { useDebouncedCallback } from "use-debounce";
@@ -23,6 +21,9 @@ export const CumulativeDonations: React.FC<{
   const resizeGraph = useCallback(() => {
     if (graphRef.current) {
       graphRef.current.innerHTML = "";
+      console.log(
+        `Resizing graph to ${graphRef.current.clientWidth}x${graphRef.current.clientHeight}`,
+      );
       setSize({ width: graphRef.current!.clientWidth, height: graphRef.current!.clientHeight });
     }
   }, [graphRef]);
@@ -31,11 +32,16 @@ export const CumulativeDonations: React.FC<{
   useEffect(() => {
     if (graphRef.current) {
       setSize({ width: graphRef.current.clientWidth, height: graphRef.current.clientHeight });
-      window.addEventListener("resize", () => {
-        if (graphRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        const newWidth = entries[0].contentRect.width;
+        console.log(newWidth, size.width);
+        if (newWidth !== size.width) {
           debouncedResizeGraph();
         }
       });
+
+      resizeObserver.observe(graphRef.current);
+      return () => resizeObserver.disconnect();
     }
   }, [graphRef]);
 
@@ -255,11 +261,6 @@ const dayCount = getDaysInMonth(true).reduce(
   [0],
 );
 
-const isLeapYear = (year: number) => {
-  if ((year & 3) != 0) return false;
-  return year % 100 != 0 || year % 400 == 0;
-};
-
 const getDOY = (date: Date) => {
   var mn = date.getMonth();
   var dn = date.getDate();

diff --git a/components/shared/components/ResultsOutput/ResultsOutput.tsx b/components/shared/components/ResultsOutput/ResultsOutput.tsx
@@ -95,8 +95,6 @@ export const ResultsOutput: React.FC<{
     return Math.ceil(Math.max(...Object.values(groupedByPeriod), 0));
   }, [transformedMonthlyDonationsPerOutput]);
 
-  console.log(`maxY: ${maxY} for ${graphData.output}`);
-
   const [normalizeYAxis, setNormalizeYAxis] = useState(false);
 
   return (

diff --git a/pages/ResultsPage.tsx b/pages/ResultsPage.tsx
@@ -15,6 +15,7 @@ import { ResultContentRenderer } from "../components/main/blocks/ResultContentRe
 import { MonthlyDonationsPerOutputResult } from "../components/shared/components/Graphs/Results/Outputs/Outputs";
 import { token } from "../token";
 import { stegaClean } from "@sanity/client/stega";
+import { ResultsHadlineNumbers } from "../components/shared/components/ResultsHeadline/ResultsHeadline";
 
 const fetchResultsPageSlug = groq`
 {
@@ -33,6 +34,7 @@ export type ResultsGraphData = {
   dailyDonations: DailyDonations;
   referralSums: ReferralSumsResult[];
   monthlyDonationsPerOutput: MonthlyDonationsPerOutputResult[];
+  resultsHeadlineNumbers: ResultsHadlineNumbers;
 };
 
 export const ResultsPage = withStaticProps(
@@ -56,6 +58,11 @@ export const ResultsPage = withStaticProps(
     );
     const monthlyDonationsPerOutput = await monthlyDonationsPerOutputResult.json();
 
+    const resultsHeadlineNumbersResult = await fetch(
+      `${process.env.NEXT_PUBLIC_EFFEKT_API}/results/headline`,
+    );
+    const resultsHeadlineNumbers = await resultsHeadlineNumbersResult.json();
+
     return {
       appStaticProps,
       draftMode,
@@ -69,6 +76,7 @@ export const ResultsPage = withStaticProps(
           referralSums: referralSums.content as ReferralSumsResult[],
           monthlyDonationsPerOutput:
             monthlyDonationsPerOutput.content as MonthlyDonationsPerOutputResult[],
+          resultsHeadlineNumbers: resultsHeadlineNumbers.content as ResultsHadlineNumbers,
         },
       },
     }; // satisfies GeneralPageProps (requires next@13);;
@@ -105,7 +113,7 @@ export const ResultsPage = withStaticProps(
           title={header.title}
           inngress={header.inngress}
           links={header.links}
-          layout={header.centered ? "centered" : "default"}
+          layout={header.layout}
         />
       </div>
 

diff --git a/studio/schemas/schema.ts b/studio/schemas/schema.ts
@@ -79,6 +79,7 @@ import { pages } from "./pages/_pages";
 import { dashboardpages } from "./dashboard/_dashboardPages";
 import plausiblerevenuetracker from "./types/plausiblerevenuetracker";
 import opendistributionbutton from "./types/opendistributionbutton";
+import resultsheadline from "./types/results/resultsheadline";
 
 const paymentMethods = [vipps, bank, swish, autogiro, avtalegiro] as const;
 
@@ -146,6 +147,7 @@ export const types = [
   graphcontext,
   cumulativedonationsgraph,
   resultsoutput,
+  resultsheadline,
   resultssection,
   referralgraph,
   latex,

diff --git a/studio/schemas/types/results/resultsoutput.ts b/studio/schemas/types/results/resultsoutput.ts
@@ -1,28 +1,12 @@
 import { BarChart } from "react-feather";
+import { outputType } from "./_outputtype";
 
 export default {
   type: "object",
   name: "resultsoutput",
   icon: BarChart,
   fields: [
-    {
-      type: "string",
-      name: "outputType",
-      title: "Output Type",
-      options: {
-        list: [
-          "Bednets",
-          "Deworming",
-          "Cash",
-          "Cash zakat",
-          "Cash climate fund",
-          "Vitamin A",
-          "Malaria treatment",
-          "Vaccinations",
-          "Years of food fortification",
-        ],
-      },
-    },
+    outputType,
     {
       type: "array",
       name: "description",

diff --git a/studio/schemas/types/results/resultssection.ts b/studio/schemas/types/results/resultssection.ts
@@ -54,6 +54,7 @@ export default {
         { type: "links" },
         { type: "normalimage" },
         { type: "fullimage" },
+        { type: "resultsheadline" },
         { type: "cumulativedonationsgraph" },
         { type: "resultsoutput" },
         { type: "referralgraph" },

diff --git a/util/formatting.ts b/util/formatting.ts
@@ -13,7 +13,7 @@ export const longDate = (isoDate: string): string => {
 };
 
 export const thousandize = (number: number | null) =>
-  number !== null ? number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") : "-";
+  number !== null ? number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "\u00A0") : "-";
 
 export const thousandizeString = (number: string | null) =>
   number !== null ? number.replace(/\B(?=(\d{3})+(?!\d))/g, " ") : "-";