From 95fd9293661c29e58e9cda36278fe9569811700e Mon Sep 17 00:00:00 2001
From: kilemensi <kilemensi@gmail.com>
Date: Fri, 10 Nov 2023 16:32:42 +0300
Subject: [PATCH] Switch from Flourish data script to iframe

This means this component can no longer be reusable for different kind
of charts and hence the renaming
---
 .../components/EmbeddedChart/EmbeddedChart.js |  38 ------
 .../src/components/EmbeddedChart/index.js     |   3 -
 .../components/FlourishChart/FlourishChart.js |  61 ++++++++++
 .../FlourishChart.snap.js}                    |  17 ++-
 .../FlourishChart.test.js}                    |  13 +-
 .../src/components/FlourishChart/index.js     |   3 +
 .../src/pages/[...slugs].page.js              |   4 +-
 .../src/payload/blocks/EmbeddedChart.js       | 112 ------------------
 .../src/payload/blocks/FlourishChart.js       |  62 ++++++++++
 .../src/payload/collections/Pages.js          |   4 +-
 10 files changed, 142 insertions(+), 175 deletions(-)
 delete mode 100644 apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.js
 delete mode 100644 apps/charterafrica/src/components/EmbeddedChart/index.js
 create mode 100644 apps/charterafrica/src/components/FlourishChart/FlourishChart.js
 rename apps/charterafrica/src/components/{EmbeddedChart/EmbeddedChart.snap.js => FlourishChart/FlourishChart.snap.js} (69%)
 rename apps/charterafrica/src/components/{EmbeddedChart/EmbeddedChart.test.js => FlourishChart/FlourishChart.test.js} (65%)
 create mode 100644 apps/charterafrica/src/components/FlourishChart/index.js
 delete mode 100644 apps/charterafrica/src/payload/blocks/EmbeddedChart.js
 create mode 100644 apps/charterafrica/src/payload/blocks/FlourishChart.js

diff --git a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.js b/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.js
deleted file mode 100644
index 91b392030..000000000
--- a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { RichTypography, Section } from "@commons-ui/core";
-import { Box } from "@mui/material";
-import React from "react";
-
-const EmbeddedChart = React.forwardRef(function EmbeddedChart(props, ref) {
-  const { backgroundColor, html, subtitle, title, width } = props;
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: { backgroundColor },
-      }}
-      ref={ref}
-    >
-      <Section
-        sx={{
-          px: { xs: 5, sm: 0 },
-          py: 2.5,
-        }}
-      >
-        <RichTypography html={false} variant="h5SemiBold" color="neutral.dark">
-          {title}
-        </RichTypography>
-        <RichTypography
-          color="neutral.dark"
-          html={false}
-          variant="p1"
-          sx={{ my: 1 }}
-        >
-          {subtitle}
-        </RichTypography>
-        <RichTypography sx={{ margin: "0 auto", width }}>{html}</RichTypography>
-      </Section>
-    </Box>
-  );
-});
-
-export default EmbeddedChart;
diff --git a/apps/charterafrica/src/components/EmbeddedChart/index.js b/apps/charterafrica/src/components/EmbeddedChart/index.js
deleted file mode 100644
index f99e65e36..000000000
--- a/apps/charterafrica/src/components/EmbeddedChart/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import EmbeddedChart from "./EmbeddedChart";
-
-export default EmbeddedChart;
diff --git a/apps/charterafrica/src/components/FlourishChart/FlourishChart.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.js
new file mode 100644
index 000000000..e314266b5
--- /dev/null
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.js
@@ -0,0 +1,61 @@
+/* eslint-env browser */
+import { RichTypography, Section } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React, { useEffect, useState } from "react";
+
+const FlourishChart = React.forwardRef(function FlourishChart(props, ref) {
+  const { backgroundColor, chartId, subtitle, title } = props;
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const handleMessageEvent = (event) => {
+      const { sender, context, ...message } = JSON.parse(event.data) || {};
+      if (sender === "Flourish" && context === "iframe.resize") {
+        setHeight(Math.ceil(message.height));
+      }
+    };
+    window.addEventListener("message", handleMessageEvent);
+    return () => {
+      document.removeEventListener("message", handleMessageEvent);
+    };
+  });
+
+  if (!chartId?.length) {
+    return null;
+  }
+  return (
+    <Box
+      sx={{
+        backgroundColor: { backgroundColor },
+      }}
+      ref={ref}
+    >
+      <Section
+        sx={{
+          px: { xs: 5, sm: 0 },
+          py: 2.5,
+        }}
+      >
+        <RichTypography html={false} variant="h5SemiBold" color="neutral.dark">
+          {title}
+        </RichTypography>
+        <RichTypography color="neutral.dark" variant="p1" sx={{ my: 1 }}>
+          {subtitle}
+        </RichTypography>
+        <iframe
+          key={chartId}
+          title={title || "Flourish Chart "}
+          src={`https://flo.uri.sh/${chartId}/embed?auto=1`}
+          scrolling="no"
+          style={{
+            border: 0,
+            height,
+            width: "100%",
+          }}
+        />
+      </Section>
+    </Box>
+  );
+});
+
+export default FlourishChart;
diff --git a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.snap.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
similarity index 69%
rename from apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.snap.js
rename to apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
index 5c988e094..e0640e494 100644
--- a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.snap.js
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.snap.js
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<EmbeddedChart /> renders unchanged 1`] = `
+exports[`<FlourishChart /> renders unchanged 1`] = `
 <div>
   <div
     class="MuiBox-root css-1k9ek97"
@@ -13,18 +13,17 @@ exports[`<EmbeddedChart /> renders unchanged 1`] = `
       >
         Flourish Charts
       </h5>
-      <p
+      <div
         class="MuiTypography-root MuiTypography-p1 css-h5smwp-MuiTypography-root"
       >
         Flourish Charts
-      </p>
-      <div
-        class="MuiTypography-root MuiTypography-p1 css-a3yf55-MuiTypography-root"
-      >
-        <div>
-          Flourish Charts
-        </div>
       </div>
+      <iframe
+        scrolling="no"
+        src="https://flo.uri.sh/story/1946372/embed?auto=1"
+        style="border: 0px; height: 0px; width: 100%;"
+        title="Flourish Charts"
+      />
     </div>
   </div>
 </div>
diff --git a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.test.js b/apps/charterafrica/src/components/FlourishChart/FlourishChart.test.js
similarity index 65%
rename from apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.test.js
rename to apps/charterafrica/src/components/FlourishChart/FlourishChart.test.js
index e456b4582..adb803754 100644
--- a/apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.test.js
+++ b/apps/charterafrica/src/components/FlourishChart/FlourishChart.test.js
@@ -1,7 +1,7 @@
 import { createRender } from "@commons-ui/testing-library";
 import React from "react";
 
-import EmbeddedChart from "./EmbeddedChart";
+import FlourishChart from "./FlourishChart";
 
 import theme from "@/charterafrica/theme";
 
@@ -10,18 +10,13 @@ const render = createRender({ theme });
 
 const defaultProps = {
   backgroundColor: "#fff",
-  html: "<div>Flourish Charts</div>",
+  chartId: "story/1946372",
   subtitle: "Flourish Charts",
   title: "Flourish Charts",
-  width: {
-    xs: "100%",
-    sm: "100%",
-    md: "100%",
-  },
 };
 
-describe("<EmbeddedChart />", () => {
-  const { container } = render(<EmbeddedChart {...defaultProps} />);
+describe("<FlourishChart />", () => {
+  const { container } = render(<FlourishChart {...defaultProps} />);
 
   it("renders unchanged", async () => {
     await expect(container).toMatchSnapshot();
diff --git a/apps/charterafrica/src/components/FlourishChart/index.js b/apps/charterafrica/src/components/FlourishChart/index.js
new file mode 100644
index 000000000..18f4487d2
--- /dev/null
+++ b/apps/charterafrica/src/components/FlourishChart/index.js
@@ -0,0 +1,3 @@
+import FlourishChart from "./FlourishChart";
+
+export default FlourishChart;
diff --git a/apps/charterafrica/src/pages/[...slugs].page.js b/apps/charterafrica/src/pages/[...slugs].page.js
index efb95ac54..6ff0aba86 100644
--- a/apps/charterafrica/src/pages/[...slugs].page.js
+++ b/apps/charterafrica/src/pages/[...slugs].page.js
@@ -10,11 +10,11 @@ import Datasets from "@/charterafrica/components/Datasets";
 import Document from "@/charterafrica/components/Document";
 import Documents from "@/charterafrica/components/Documents";
 import Ecosystem from "@/charterafrica/components/Ecosystem";
-import EmbeddedChart from "@/charterafrica/components/EmbeddedChart";
 import Entity from "@/charterafrica/components/Entity";
 import Explainers from "@/charterafrica/components/Explainers";
 import FAQ from "@/charterafrica/components/FAQ";
 import FeaturedPostCard from "@/charterafrica/components/FeaturedPostCard";
+import FlourishChart from "@/charterafrica/components/FlourishChart";
 import FocalCountries from "@/charterafrica/components/FocalCountries";
 import Grantees from "@/charterafrica/components/Grantees";
 import GuidingPrinciples from "@/charterafrica/components/GuidingPrinciples";
@@ -46,13 +46,13 @@ const componentsBySlugs = {
   dataset: Dataset,
   documents: Documents,
   ecosystem: Ecosystem,
-  "embedded-chart": EmbeddedChart,
   "embedded-playlist": Consultations,
   document: Document,
   explainers: Explainers,
   faq: FAQ,
   "featured-post": FeaturedPostCard,
   "fellowships-and-grants-header": OpportunityHeader,
+  "flourish-chart": FlourishChart,
   "focal-countries": FocalCountries,
   "guiding-principles": GuidingPrinciples,
   helpdesk: Helpdesk,
diff --git a/apps/charterafrica/src/payload/blocks/EmbeddedChart.js b/apps/charterafrica/src/payload/blocks/EmbeddedChart.js
deleted file mode 100644
index 37c3ef1b9..000000000
--- a/apps/charterafrica/src/payload/blocks/EmbeddedChart.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { validateHexColor } from "../utils/colors";
-
-const EmbeddedChart = {
-  slug: "embedded-chart",
-  labels: {
-    singular: {
-      en: "Embedded Chart",
-      fr: "Graphique intégré",
-      pt: "Gráfico incorporado",
-    },
-    plural: {
-      en: "Embedded Chart",
-      fr: "Graphique intégré",
-      pt: "Gráfico incorporado",
-    },
-  },
-  fields: [
-    {
-      name: "title",
-      label: {
-        en: "Title",
-        fr: "Titre",
-        pt: "Título",
-      },
-      type: "text",
-      required: true,
-      localized: true,
-    },
-    {
-      name: "subtitle",
-      label: {
-        en: "Subtitle",
-        fr: "Sous-titre",
-        pt: "Subtítulo",
-      },
-      type: "text",
-      required: true,
-      localized: true,
-    },
-    {
-      name: "html",
-      label: {
-        en: "Embed Code",
-        fr: "Code d'intégration",
-        pt: "Código de incorporação",
-      },
-      type: "code",
-      required: true,
-      localized: true,
-      admin: {
-        language: "html",
-      },
-    },
-    {
-      name: "backgroundColor",
-      label: {
-        en: "Background color",
-        fr: "Couleur de fond",
-        pt: "Cor de fundo",
-      },
-      type: "text",
-      required: true,
-      defaultValue: "#ffffff",
-      validate: validateHexColor,
-    },
-    {
-      name: "width",
-      label: {
-        en: "Width",
-        fr: "Largeur",
-      },
-      type: "group",
-      required: true,
-      fields: [
-        {
-          name: "xs",
-          label: {
-            en: "Mobile",
-            pt: "Móveis",
-          },
-          type: "text",
-          required: true,
-          localized: true,
-          defaultValue: "100%",
-        },
-        {
-          name: "sm",
-          label: {
-            en: "Tablet",
-            fr: "Tablette",
-          },
-          type: "text",
-          required: true,
-          localized: true,
-          defaultValue: "100%",
-        },
-        {
-          name: "md",
-          label: {
-            en: "Desktop",
-          },
-          type: "text",
-          required: true,
-          localized: true,
-          defaultValue: "100%",
-        },
-      ],
-    },
-  ],
-};
-
-export default EmbeddedChart;
diff --git a/apps/charterafrica/src/payload/blocks/FlourishChart.js b/apps/charterafrica/src/payload/blocks/FlourishChart.js
new file mode 100644
index 000000000..4649f33ad
--- /dev/null
+++ b/apps/charterafrica/src/payload/blocks/FlourishChart.js
@@ -0,0 +1,62 @@
+import { validateHexColor } from "../utils/colors";
+
+const FlourishChart = {
+  slug: "flourish-chart",
+  labels: {
+    singular: {
+      en: "Flourish Chart",
+    },
+    plural: {
+      en: "Flourish Chart",
+    },
+  },
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+        fr: "Titre",
+        pt: "Título",
+      },
+      type: "text",
+      localized: true,
+    },
+    {
+      name: "subtitle",
+      label: {
+        en: "Subtitle",
+        fr: "Sous-titre",
+        pt: "Subtítulo",
+      },
+      type: "text",
+      localized: true,
+    },
+    {
+      name: "chartId",
+      label: {
+        en: "Chart ID",
+      },
+      type: "text",
+      required: true,
+      localized: true,
+      admin: {
+        description:
+          "This should be in type/number format e.g. visualisation/14834715 or story/1946372",
+      },
+    },
+    {
+      name: "backgroundColor",
+      label: {
+        en: "Background color",
+        fr: "Couleur de fond",
+        pt: "Cor de fundo",
+      },
+      type: "text",
+      required: true,
+      defaultValue: "#ffffff",
+      validate: validateHexColor,
+    },
+  ],
+};
+
+export default FlourishChart;
diff --git a/apps/charterafrica/src/payload/collections/Pages.js b/apps/charterafrica/src/payload/collections/Pages.js
index 1ec50bf4a..7bbd786de 100644
--- a/apps/charterafrica/src/payload/collections/Pages.js
+++ b/apps/charterafrica/src/payload/collections/Pages.js
@@ -5,12 +5,12 @@ import Datasets from "../blocks/Datasets";
 import DemocracyHelpdeskContent from "../blocks/DemocracyHelpdeskPageContent";
 import Documents from "../blocks/Documents";
 import Ecosystem from "../blocks/Ecosystem";
-import EmbeddedChart from "../blocks/EmbeddedChart";
 import EmbeddedDocuments from "../blocks/EmbeddedDocuments";
 import EmbeddedPlaylist from "../blocks/EmbeddedPlaylist";
 import Error from "../blocks/Error";
 import FAQ from "../blocks/FAQ";
 import FeaturedPost from "../blocks/FeaturedPost";
+import FlourishChart from "../blocks/FlourishChart";
 import Global from "../blocks/Global";
 import Grantees from "../blocks/Grantees";
 import GuidingPrincipals from "../blocks/GuidingPrinciples";
@@ -61,12 +61,12 @@ const Pages = {
         DemocracyHelpdeskContent,
         Documents,
         Ecosystem,
-        EmbeddedChart,
         EmbeddedDocuments,
         EmbeddedPlaylist,
         Error,
         FAQ,
         FeaturedPost,
+        FlourishChart,
         Global,
         GuidingPrincipals,
         Grantees,