fix: Preview via API (iframe)

visualize-admin · Jan 6, 2025 · 3c45964 · 3c45964
1 parent 716d2ae
commit 3c45964
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ You can also check the
 
 - Features
   - It's now possible to export charts as images
+- Fixes
+  - Fixed preview via API (iframe)
 
 # [5.0.2] - 2024-11-28
 

diff --git a/app/pages/_preview.tsx b/app/pages/_preview.tsx
@@ -2,7 +2,6 @@ import { Box } from "@mui/material";
 import { useEffect } from "react";
 
 import { useLocale } from "@/locales/use-locale";
-import { migrateConfiguratorState } from "@/utils/chart-config/versioning";
 
 const Page = () => {
   const locale = useLocale();
@@ -12,52 +11,7 @@ const Page = () => {
       const iframeWindow = iframe?.contentWindow as Window | undefined;
 
       if (iframeWindow) {
-        iframeWindow.postMessage(
-          await migrateConfiguratorState({
-            state: "CONFIGURING_CHART",
-            dataSet:
-              "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/2",
-            dataSource: {
-              type: "sparql",
-              url: "https://lindas.admin.ch/query",
-            },
-            meta: {
-              title: { de: "", fr: "", it: "", en: "" },
-              description: { de: "", fr: "", it: "", en: "" },
-            },
-            chartConfig: {
-              version: "1.4.2",
-              chartType: "column",
-              filters: {
-                "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Kanton":
-                  { type: "single", value: "https://ld.admin.ch/canton/1" },
-              },
-              interactiveFiltersConfig: {
-                legend: { active: false, componentIri: "" },
-                timeRange: {
-                  active: false,
-                  componentIri:
-                    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
-                  presets: { type: "range", from: "", to: "" },
-                },
-                dataFilters: { active: false, componentIris: [] },
-                calculation: { active: false, type: "identity" },
-              },
-              fields: {
-                x: {
-                  componentIri:
-                    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
-                  sorting: { sortingType: "byAuto", sortingOrder: "asc" },
-                },
-                y: {
-                  componentIri:
-                    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/AnzahlAnlagen",
-                },
-              },
-            },
-          }),
-          "*"
-        );
+        iframeWindow.postMessage(CONFIGURATOR_STATE, "*");
       }
     };
   }, []);
@@ -78,3 +32,47 @@ const Page = () => {
 };
 
 export default Page;
+
+const CONFIGURATOR_STATE = {
+  state: "CONFIGURING_CHART",
+  dataSet:
+    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/2",
+  dataSource: {
+    type: "sparql",
+    url: "https://lindas.admin.ch/query",
+  },
+  meta: {
+    title: { de: "", fr: "", it: "", en: "" },
+    description: { de: "", fr: "", it: "", en: "" },
+  },
+  chartConfig: {
+    version: "1.4.2",
+    chartType: "column",
+    filters: {
+      "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Kanton":
+        { type: "single", value: "https://ld.admin.ch/canton/1" },
+    },
+    interactiveFiltersConfig: {
+      legend: { active: false, componentIri: "" },
+      timeRange: {
+        active: false,
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
+        presets: { type: "range", from: "", to: "" },
+      },
+      dataFilters: { active: false, componentIris: [] },
+      calculation: { active: false, type: "identity" },
+    },
+    fields: {
+      x: {
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
+        sorting: { sortingType: "byAuto", sortingOrder: "asc" },
+      },
+      y: {
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/AnzahlAnlagen",
+      },
+    },
+  },
+};
diff --git a/app/pages/preview.tsx b/app/pages/preview.tsx
@@ -3,7 +3,10 @@ import { ThemeProvider } from "@mui/material";
 import create, { useStore } from "zustand";
 
 import { ChartPublished } from "@/components/chart-published";
-import { ConfiguratorStatePublished } from "@/config-types";
+import {
+  ConfiguratorStatePublished,
+  decodeConfiguratorState,
+} from "@/config-types";
 import { GraphqlProvider } from "@/graphql/GraphqlProvider";
 import { i18n } from "@/locales/locales";
 import { LocaleProvider, useLocale } from "@/locales/use-locale";
@@ -20,15 +23,23 @@ const chartStateStore = create<{
 }));
 
 if (typeof window !== "undefined") {
-  window.addEventListener("message", async (event) => {
-    if (event.data.key) {
-      chartStateStore.setState({
-        state: {
-          ...(await migrateConfiguratorState(event.data)),
-          // Force state published for <ChartPublished /> to work correctly
-          state: "PUBLISHED",
-        } as ConfiguratorStatePublished,
-      });
+  window.addEventListener("message", async (e) => {
+    try {
+      const state = decodeConfiguratorState(
+        await migrateConfiguratorState(e.data)
+      );
+
+      if (state) {
+        chartStateStore.setState({
+          state: {
+            ...state,
+            // Force state published for <ChartPublished /> to work correctly
+            state: "PUBLISHED",
+          } as ConfiguratorStatePublished,
+        });
+      }
+    } catch (e) {
+      console.error(e);
     }
   });
 }

diff --git a/e2e/preview-via-api.spec.ts b/e2e/preview-via-api.spec.ts
@@ -0,0 +1,15 @@
+import { setup } from "./common";
+
+const { test } = setup();
+
+test("should be possible to preview charts via API (iframe)", async ({
+  page,
+  selectors,
+}) => {
+  await page.goto("/en/_preview");
+  await page.waitForSelector("iframe");
+  const iframe = page.locator("iframe");
+  const contentFrame = iframe.contentFrame();
+  await selectors.chart.loaded();
+  await contentFrame.locator("svg").first().waitFor({ timeout: 10_000 });
+});