refactor: Split ChartCombo into three charts

visualize-admin · Oct 2, 2023 · d66e27e · d66e27e
1 parent 3bfd883
commit d66e27e
Show file tree

Hide file tree

Showing 17 changed files with 472 additions and 189 deletions.
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -19,7 +19,9 @@ import {
   ColorScaleType,
   ColumnConfig,
   ColumnSegmentField,
-  ComboConfig,
+  ComboLineColumnConfig,
+  ComboLineDualConfig,
+  ComboLineSingleConfig,
   ComponentType,
   GenericField,
   LineConfig,
@@ -54,7 +56,7 @@ import { getDefaultCategoricalPaletteName } from "@/palettes";
 
 type BaseEncodingFieldType = "animation";
 type MapEncodingFieldType = "baseLayer" | "areaLayer" | "symbolLayer";
-type XYEncodingFieldType = "x" | "y" | "yMulti" | "segment";
+type XYEncodingFieldType = "x" | "y" | "segment";
 export type EncodingFieldType =
   | BaseEncodingFieldType
   | MapEncodingFieldType
@@ -259,7 +261,9 @@ interface ChartSpecs {
   pie: ChartSpec<PieConfig>;
   scatterplot: ChartSpec<ScatterPlotConfig>;
   table: ChartSpec<TableConfig>;
-  combo: ChartSpec<ComboConfig>;
+  comboLineSingle: ChartSpec<ComboLineSingleConfig>;
+  comboLineDual: ChartSpec<ComboLineDualConfig>;
+  comboLineColumn: ChartSpec<ComboLineColumnConfig>;
 }
 
 const SEGMENT_COMPONENT_TYPES: ComponentType[] = [
@@ -876,11 +880,49 @@ const chartConfigOptionsUISpec: ChartSpecs = {
     encodings: [],
     interactiveFilters: [],
   },
-  combo: {
-    chartType: "combo",
+  comboLineSingle: {
+    chartType: "comboLineSingle",
     encodings: [
       {
-        field: "yMulti",
+        field: "y",
+        optional: false,
+        customComponent: true,
+        componentTypes: ["NumericalMeasure"],
+        filters: false,
+      },
+      {
+        field: "x",
+        optional: false,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
+    ],
+    interactiveFilters: [],
+  },
+  comboLineDual: {
+    chartType: "comboLineDual",
+    encodings: [
+      {
+        field: "y",
+        optional: false,
+        customComponent: true,
+        componentTypes: ["NumericalMeasure"],
+        filters: false,
+      },
+      {
+        field: "x",
+        optional: false,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
+    ],
+    interactiveFilters: [],
+  },
+  comboLineColumn: {
+    chartType: "comboLineColumn",
+    encodings: [
+      {
+        field: "y",
         optional: false,
         customComponent: true,
         componentTypes: ["NumericalMeasure"],

diff --git a/app/charts/combo/chart-combo.tsx → app/charts/combo/chart-combo-line-single.tsx b/app/charts/combo/chart-combo.tsx → app/charts/combo/chart-combo-line-single.tsx
@@ -1,9 +1,6 @@
-import { Box } from "@mui/material";
 import { memo } from "react";
 
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
-import { ComboLineColumnChart } from "@/charts/combo/combo-line-column-state";
-import { ComboLineDualChart } from "@/charts/combo/combo-line-dual-state";
 import { ComboLineSingle } from "@/charts/combo/combo-line-single";
 import { ComboLineSingleChart } from "@/charts/combo/combo-line-single-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
@@ -20,7 +17,11 @@ import { Ruler } from "@/charts/shared/interaction/ruler";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
 import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
-import { ComboConfig, DataSource, QueryFilters } from "@/config-types";
+import {
+  ComboLineSingleConfig,
+  DataSource,
+  QueryFilters,
+} from "@/config-types";
 import {
   useComponentsQuery,
   useDataCubeMetadataQuery,
@@ -30,16 +31,16 @@ import { useLocale } from "@/locales/use-locale";
 
 import { ChartProps } from "../shared/ChartProps";
 
-type ChartComboVisualizationProps = {
+type ChartComboLineSingleVisualizationProps = {
   dataSetIri: string;
   dataSource: DataSource;
-  chartConfig: ComboConfig;
+  chartConfig: ComboLineSingleConfig;
   queryFilters: QueryFilters;
   published: boolean;
 };
 
-export const ChartComboVisualization = (
-  props: ChartComboVisualizationProps
+export const ChartComboLineSingleVisualization = (
+  props: ChartComboLineSingleVisualizationProps
 ) => {
   const { dataSetIri, dataSource, chartConfig, queryFilters, published } =
     props;
@@ -76,17 +77,17 @@ export const ChartComboVisualization = (
       componentsQuery={componentsQuery}
       observationsQuery={observationsQuery}
       chartConfig={chartConfig}
-      Component={ChartCombo}
+      Component={ChartComboLineSingle}
     />
   );
 };
 
-export const ChartCombo = memo((props: ChartProps<ComboConfig>) => {
-  const { chartConfig } = props;
-  const { interactiveFiltersConfig } = chartConfig;
+export const ChartComboLineSingle = memo(
+  (props: ChartProps<ComboLineSingleConfig>) => {
+    const { chartConfig } = props;
+    const { interactiveFiltersConfig } = chartConfig;
 
-  return chartConfig.chartSubtype === "line" ? (
-    chartConfig.fields.y.axisMode === "single" ? (
+    return (
       <ComboLineSingleChart aspectRatio={0.4} {...props}>
         <ChartContainer>
           <ChartSvg>
@@ -103,14 +104,6 @@ export const ChartCombo = memo((props: ChartProps<ComboConfig>) => {
           <LegendColor chartConfig={chartConfig} symbol="line" />
         </ChartControlsContainer>
       </ComboLineSingleChart>
-    ) : (
-      <ComboLineDualChart aspectRatio={0.4} {...props}>
-        <Box>ComboLineDualChart</Box>
-      </ComboLineDualChart>
-    )
-  ) : (
-    <ComboLineColumnChart aspectRatio={0.4} {...props}>
-      <Box>ComboLineColumnChart</Box>
-    </ComboLineColumnChart>
-  );
-});
+    );
+  }
+);
diff --git a/app/charts/combo/combo-line-single-state-props.ts b/app/charts/combo/combo-line-single-state-props.ts
@@ -9,7 +9,7 @@ import {
   useChartData,
   useTemporalXVariables,
 } from "@/charts/shared/chart-state";
-import { ComboConfig } from "@/configurator";
+import { ComboLineSingleConfig } from "@/configurator";
 
 import { ChartProps } from "../shared/ChartProps";
 
@@ -24,7 +24,7 @@ export type ComboLineSingleStateVariables = BaseVariables &
   NumericalYComboLineSingleVariables;
 
 export const useComboLineSingleStateVariables = (
-  props: ChartProps<ComboConfig> & { aspectRatio: number }
+  props: ChartProps<ComboLineSingleConfig> & { aspectRatio: number }
 ): ComboLineSingleStateVariables => {
   const { chartConfig, dimensionsByIri, measuresByIri } = props;
   const { fields } = chartConfig;
@@ -35,14 +35,6 @@ export const useComboLineSingleStateVariables = (
     dimensionsByIri,
   });
 
-  if (chartConfig.chartSubtype !== "line") {
-    throw new Error("This hook is only for line charts!");
-  }
-
-  if (chartConfig.fields.y.axisMode !== "single") {
-    throw new Error("This hook is only for single axis line charts!");
-  }
-
   const numericalYVariables: NumericalYComboLineSingleVariables = {
     y: {
       lines: chartConfig.fields.y.componentIris.map((iri) => ({
@@ -63,7 +55,7 @@ export const useComboLineSingleStateVariables = (
 };
 
 export const useComboLineSingleStateData = (
-  chartProps: ChartProps<ComboConfig> & { aspectRatio: number },
+  chartProps: ChartProps<ComboLineSingleConfig> & { aspectRatio: number },
   variables: ComboLineSingleStateVariables
 ): ChartStateData => {
   const { chartConfig, observations } = chartProps;

diff --git a/app/charts/combo/combo-line-single-state.tsx b/app/charts/combo/combo-line-single-state.tsx
@@ -20,7 +20,7 @@ import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import { getCenteredTooltipPlacement } from "@/charts/shared/interaction/tooltip-box";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { Observer, useWidth } from "@/charts/shared/use-width";
-import { ComboConfig } from "@/configurator";
+import { ComboLineSingleConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
 import { getPalette } from "@/palettes";
@@ -30,7 +30,7 @@ import { ChartProps } from "../shared/ChartProps";
 export type ComboLineSingleState = CommonChartState &
   ComboLineSingleStateVariables &
   InteractiveXTimeRangeState & {
-    chartType: "combo";
+    chartType: "comboLineSingle";
     xKey: string;
     xScale: d3.ScaleTime<number, number>;
     yScale: d3.ScaleLinear<number, number>;
@@ -42,7 +42,7 @@ export type ComboLineSingleState = CommonChartState &
   };
 
 const useComboLineSingleState = (
-  chartProps: ChartProps<ComboConfig> & { aspectRatio: number },
+  chartProps: ChartProps<ComboLineSingleConfig> & { aspectRatio: number },
   variables: ComboLineSingleStateVariables,
   data: ChartStateData
 ): ComboLineSingleState => {
@@ -185,7 +185,7 @@ const useComboLineSingleState = (
       yAnchor: yScale(
         variables.y.lines
           .map(({ getY }) => getY(d) ?? 0)
-          .reduce((a, b) => a + b, 0) * 0.5
+          .reduce((a, b) => a + b, 0) * (variables.y.lines.length > 1 ? 0.5 : 1)
       ),
       xValue: timeFormatUnit(x, xDimension.timeUnit),
       placement: getCenteredTooltipPlacement({
@@ -208,7 +208,7 @@ const useComboLineSingleState = (
   };
 
   return {
-    chartType: "combo",
+    chartType: "comboLineSingle",
     xKey,
     bounds,
     chartData,
@@ -227,7 +227,7 @@ const useComboLineSingleState = (
 
 const ComboLineSingleChartProvider = (
   props: React.PropsWithChildren<
-    ChartProps<ComboConfig> & { aspectRatio: number }
+    ChartProps<ComboLineSingleConfig> & { aspectRatio: number }
   >
 ) => {
   const { children, ...chartProps } = props;
@@ -242,7 +242,7 @@ const ComboLineSingleChartProvider = (
 
 export const ComboLineSingleChart = (
   props: React.PropsWithChildren<
-    ChartProps<ComboConfig> & { aspectRatio: number }
+    ChartProps<ComboLineSingleConfig> & { aspectRatio: number }
   >
 ) => {
   return (