sankey chart visual tests (metabase#49457)

* sankey visual specs, polish * Update Loki Snapshots * improve type --------- Co-authored-by: Metabase Automation <github-automation@metabase.com>
ttanay · Nov 25, 2024 · 095f1a1 · 095f1a1
1 parent 25bab86
commit 095f1a1
Show file tree

Hide file tree

Showing 35 changed files with 3,477 additions and 19 deletions.
diff --git a/...bed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Month_Year.png b/...bed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Month_Year.png
diff --git a/...rEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Quarter_Year_Dropdown.png b/...rEmbeddedDashboardView_filters_Dark_Theme_Date_Filter_Quarter_Year_Dropdown.png
diff --git a/...p_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Range.png b/...p_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Range.png
diff --git a/...mbed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Relative.png b/...mbed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Relative.png
diff --git a/...ference/chrome_laptop_embed_PublicOrEmbeddedQuestionView_Dark_Theme_Default.png b/...ference/chrome_laptop_embed_PublicOrEmbeddedQuestionView_Dark_Theme_Default.png
diff --git a/...erence/chrome_laptop_embed_PublicOrEmbeddedQuestionView_Light_Theme_Default.png b/...erence/chrome_laptop_embed_PublicOrEmbeddedQuestionView_Light_Theme_Default.png
diff --git a/.../chrome_laptop_embed_PublicOrEmbeddedQuestionView_Transparent_Theme_Default.png b/.../chrome_laptop_embed_PublicOrEmbeddedQuestionView_Transparent_Theme_Default.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Disconnected_Graphs.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Disconnected_Graphs.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Auto.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Auto.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Compact.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Compact.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Full.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Edge_Labels_Full.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Gray_Edges.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Gray_Edges.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Justify.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Justify.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Left.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Left.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Right.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Node_Align_Right.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Target_Color_Edges.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Target_Color_Edges.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Unaggregated_Data.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_Unaggregated_Data.png
diff --git a/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_With_Edges_Labels.png b/.loki/reference/chrome_laptop_viz_SankeyChart_Sankey_With_Edges_Labels.png
diff --git a/frontend/src/metabase/static-viz/index.js b/frontend/src/metabase/static-viz/index.js
@@ -6,17 +6,11 @@ import ReactDOMServer from "react-dom/server";
 
 import "metabase/lib/dayjs";
 
-import { formatValue } from "metabase/lib/formatting";
 import { StaticVisualization } from "metabase/static-viz/components/StaticVisualization";
-import { createColorGetter } from "metabase/static-viz/lib/colors";
-import {
-  measureTextEChartsAdapter,
-  measureTextHeight,
-  measureTextWidth,
-} from "metabase/static-viz/lib/text";
+import { createStaticRenderingContext } from "metabase/static-viz/lib/rendering-context";
+import { measureTextEChartsAdapter } from "metabase/static-viz/lib/text";
 import { extractRemappings } from "metabase/visualizations";
 import { extendCardWithDashcardSettings } from "metabase/visualizations/lib/settings/typed-utils";
-import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
 
 import { LegacyStaticChart } from "./containers/LegacyStaticChart";
 
@@ -49,16 +43,7 @@ function getRawSeriesWithDashcardSettings(rawSeries, dashcardSettings) {
 }
 
 export function RenderChart(rawSeries, dashcardSettings, colors) {
-  const getColor = createColorGetter(colors);
-  const renderingContext = {
-    getColor,
-    formatValue,
-    measureText: (text, style) =>
-      measureTextWidth(text, style.size, style.weight),
-    measureTextHeight: (_, style) => measureTextHeight(style.size),
-    fontFamily: "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
-    theme: DEFAULT_VISUALIZATION_THEME,
-  };
+  const renderingContext = createStaticRenderingContext(colors);
 
   const rawSeriesWithDashcardSettings = getRawSeriesWithDashcardSettings(
     rawSeries,

diff --git a/frontend/src/metabase/static-viz/lib/rendering-context.ts b/frontend/src/metabase/static-viz/lib/rendering-context.ts
@@ -0,0 +1,40 @@
+import type { ColorPalette } from "metabase/lib/colors/types";
+import { DEFAULT_VISUALIZATION_THEME } from "metabase/visualizations/shared/utils/theme";
+import type { RenderingContext } from "metabase/visualizations/types";
+
+import { createColorGetter } from "../lib/colors";
+
+import { measureTextHeight, measureTextWidth } from "./text";
+
+export const createStaticRenderingContext = (
+  colors?: ColorPalette,
+): RenderingContext => {
+  const getColor = createColorGetter(colors);
+
+  return {
+    getColor,
+    measureText: (text, style) => {
+      const size =
+        typeof style.size === "number" ? style.size : parseInt(style.size);
+      const weight =
+        typeof style.weight === "number"
+          ? style.weight
+          : parseInt(style.weight);
+
+      if (!isFinite(size) || !isFinite(weight)) {
+        throw new Error(
+          `Incompatible for static rendering font style: ${JSON.stringify(
+            style,
+          )} `,
+        );
+      }
+      return measureTextWidth(text, size, weight);
+    },
+    measureTextHeight: (_, style) =>
+      measureTextHeight(
+        typeof style.size === "number" ? style.size : parseInt(style.size),
+      ),
+    fontFamily: "Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    theme: DEFAULT_VISUALIZATION_THEME,
+  };
+};
diff --git a/frontend/src/metabase/visualizations/echarts/graph/sankey/layout/index.ts b/frontend/src/metabase/visualizations/echarts/graph/sankey/layout/index.ts
@@ -58,7 +58,7 @@ const getLabelValueFormatting = (
 
   const totalNodesWidth = SANKEY_CHART_STYLE.nodeWidth * nodeLevelsCount;
   const widthPerLevel =
-    (boundaryWidth - totalNodesWidth) / Math.min(nodeLevelsCount - 1, 1);
+    (boundaryWidth - totalNodesWidth) / Math.max(nodeLevelsCount - 1, 1);
 
   return maxEdgeLabelWidth >= widthPerLevel ? "compact" : "full";
 };

diff --git a/frontend/src/metabase/visualizations/visualizations/SankeyChart/SankeyChart.stories.tsx b/frontend/src/metabase/visualizations/visualizations/SankeyChart/SankeyChart.stories.tsx
@@ -0,0 +1,92 @@
+import type { StoryFn } from "@storybook/react";
+
+import { IsomorphicVisualizationStory } from "__support__/storybook";
+import type { StaticChartProps } from "metabase/static-viz/components/StaticVisualization";
+
+import * as data from "./stories-data";
+
+export default {
+  title: "viz/SankeyChart",
+  component: IsomorphicVisualizationStory,
+};
+
+const Template: StoryFn<StaticChartProps> = args => {
+  return <IsomorphicVisualizationStory {...args} />;
+};
+
+export const SankeyUnaggregatedData = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyUnaggregatedData,
+  },
+};
+
+export const SankeyWithEdgesLabels = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyWithEdgesLabels,
+  },
+};
+
+export const SankeyNodeAlignJustify = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyNodeAlignJustify,
+  },
+};
+
+export const SankeyNodeAlignLeft = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyNodeAlignLeft,
+  },
+};
+
+export const SankeyNodeAlignRight = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyNodeAlignRight,
+  },
+};
+
+export const SankeyDisconnectedGraphs = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyDisconnectedGraphs,
+  },
+};
+
+export const SankeyGrayEdges = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyGrayEdges,
+  },
+};
+
+export const SankeyTargetColorEdges = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyTargetColorEdges,
+  },
+};
+
+export const SankeyEdgeLabelsAuto = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyEdgeLabelsAuto,
+  },
+};
+
+export const SankeyEdgeLabelsFull = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyEdgeLabelsFull,
+  },
+};
+
+export const SankeyEdgeLabelsCompact = {
+  render: Template,
+  args: {
+    rawSeries: data.sankeyEdgeLabelsCompact,
+  },
+};
diff --git a/frontend/src/metabase/visualizations/visualizations/SankeyChart/stories-data/index.ts b/frontend/src/metabase/visualizations/visualizations/SankeyChart/stories-data/index.ts
@@ -0,0 +1,25 @@
+import sankeyDisconnectedGraphs from "./sankey-disconnected-graphs.json";
+import sankeyEdgeLabelsAuto from "./sankey-edge-labels-auto.json";
+import sankeyEdgeLabelsCompact from "./sankey-edge-labels-compact.json";
+import sankeyEdgeLabelsFull from "./sankey-edge-labels-full.json";
+import sankeyGrayEdges from "./sankey-gray-edges.json";
+import sankeyNodeAlignJustify from "./sankey-node-align-justify.json";
+import sankeyNodeAlignLeft from "./sankey-node-align-left.json";
+import sankeyNodeAlignRight from "./sankey-node-align-right.json";
+import sankeyTargetColorEdges from "./sankey-target-color-edges.json";
+import sankeyUnaggregatedData from "./sankey-unaggregated-data.json";
+import sankeyWithEdgesLabels from "./sankey-with-edges-labels.json";
+
+export {
+  sankeyDisconnectedGraphs,
+  sankeyEdgeLabelsAuto,
+  sankeyEdgeLabelsCompact,
+  sankeyEdgeLabelsFull,
+  sankeyGrayEdges,
+  sankeyNodeAlignJustify,
+  sankeyNodeAlignLeft,
+  sankeyNodeAlignRight,
+  sankeyTargetColorEdges,
+  sankeyUnaggregatedData,
+  sankeyWithEdgesLabels,
+};