Merge branch 'main' of github.com:visualize-admin/visualization-tool …

…into fix/keep-color-mapping-up-to-date
visualize-admin · Jan 6, 2025 · 1e62027 · 1e62027
2 parents 0502747 + 8c80967
commit 1e62027
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ You can also check the
   - Color mapping is now correctly kept up to date in case of editing an old
     chart and the cube has been updated in the meantime and contains new values
     in the color dimension
+  - 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 });
+});