feat: Set up initial ComboLineColumn chart

app/charts/combo/chart-combo-line-column.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
+import { AxisHeightLinearDual } from "@/charts/combo/axes-height-linear-dual";
+import { ComboLineColumnChart } from "@/charts/combo/combo-line-column-state";
+import { ComboLineDual } from "@/charts/combo/combo-line-dual";
+import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
+import { BrushTime } from "@/charts/shared/brush";
+import { extractComponentIris } from "@/charts/shared/chart-helpers";
+import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
+import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
+import { Ruler } from "@/charts/shared/interaction/ruler";
+import { Tooltip } from "@/charts/shared/interaction/tooltip";
+import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
+import {
+  ComboLineColumnConfig,
+  DataSource,
+  QueryFilters,
+} from "@/config-types";
+import {
+  useComponentsQuery,
+  useDataCubeMetadataQuery,
+  useDataCubeObservationsQuery,
+} from "@/graphql/query-hooks";
+import { useLocale } from "@/locales/use-locale";
+
+import { ChartProps } from "../shared/ChartProps";
+
+type ChartComboLineColumnVisualizationProps = {
+  dataSetIri: string;
+  dataSource: DataSource;
+  chartConfig: ComboLineColumnConfig;
+  queryFilters: QueryFilters;
+  published: boolean;
+};
+
+export const ChartComboLineColumnVisualization = (
+  props: ChartComboLineColumnVisualizationProps
+) => {
+  const { dataSetIri, dataSource, chartConfig, queryFilters, published } =
+    props;
+  const locale = useLocale();
+  const componentIris = published
+    ? extractComponentIris(chartConfig)
+    : undefined;
+  const commonQueryVariables = {
+    iri: dataSetIri,
+    sourceType: dataSource.type,
+    sourceUrl: dataSource.url,
+    locale,
+  };
+  const [metadataQuery] = useDataCubeMetadataQuery({
+    variables: commonQueryVariables,
+  });
+  const [componentsQuery] = useComponentsQuery({
+    variables: {
+      ...commonQueryVariables,
+      componentIris,
+    },
+  });
+  const [observationsQuery] = useDataCubeObservationsQuery({
+    variables: {
+      ...commonQueryVariables,
+      componentIris,
+      filters: queryFilters,
+    },
+  });
+
+  return (
+    <ChartLoadingWrapper
+      metadataQuery={metadataQuery}
+      componentsQuery={componentsQuery}
+      observationsQuery={observationsQuery}
+      chartConfig={chartConfig}
+      Component={ChartComboLineColumn}
+    />
+  );
+};
+
+export const ChartComboLineColumn = React.memo(
+  (props: ChartProps<ComboLineColumnConfig>) => {
+    const { chartConfig } = props;
+    const { interactiveFiltersConfig } = chartConfig;
+
+    return (
+      <ComboLineColumnChart aspectRatio={0.4} {...props}>
+        <ChartContainer>
+          <ChartSvg>
+            <AxisHeightLinearDual orientation="left" />
+            <AxisHeightLinearDual orientation="right" /> <AxisTime />
+            <AxisTimeDomain />
+            <ComboLineDual />
+            <InteractionHorizontal />
+            {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+          </ChartSvg>
+          <HoverDotMultiple />
+          <Ruler />
+          <Tooltip type="multiple" />
+        </ChartContainer>
+      </ComboLineColumnChart>
+    );
+  }
+);

app/charts/combo/combo-line-column-state-props.ts

@@ -10,28 +10,28 @@ import {
   useChartData,
   useTemporalXVariables,
 } from "@/charts/shared/chart-state";
-import { ComboConfig } from "@/configurator";
+import { ComboLineColumnConfig } from "@/configurator";
 
 import { ChartProps } from "../shared/ChartProps";
 
 type NumericalYComboLineColumnVariables = {
   y: {
-    axisMode: "dual";
-    line: BaseYGetter & {
-      orientation: "left" | "right";
-    };
-    column: BaseYGetter & {
-      orientation: "left" | "right";
-    };
+    left: YGetter;
+    right: YGetter;
   };
 };
 
+type YGetter = BaseYGetter & {
+  chartType: "line" | "column";
+  orientation: "left" | "right";
+};
+
 export type ComboLineColumnStateVariables = BaseVariables &
   TemporalXVariables &
   NumericalYComboLineColumnVariables;
 
 export const useComboLineColumnStateVariables = (
-  props: ChartProps<ComboConfig> & { aspectRatio: number }
+  props: ChartProps<ComboLineColumnConfig> & { aspectRatio: number }
 ): ComboLineColumnStateVariables => {
   const { chartConfig, dimensionsByIri, measuresByIri } = props;
   const { fields } = chartConfig;
@@ -42,34 +42,46 @@ export const useComboLineColumnStateVariables = (
     dimensionsByIri,
   });
 
-  if (chartConfig.chartSubtype !== "line-column") {
-    throw new Error("This hook is only for line-column charts!");
-  }
-
   const lineIri = chartConfig.fields.y.lineComponentIri;
   const lineAxisOrientation = chartConfig.fields.y.lineAxisOrientation;
   const columnIri = chartConfig.fields.y.columnComponentIri;
-  const numericalYVariables: NumericalYComboLineColumnVariables = {
-    y: {
-      axisMode: "dual",
-      line: {
-        iri: lineIri,
-        label: getLabelWithUnit(measuresByIri[lineIri]),
-        orientation: lineAxisOrientation,
-        getY: (d) => {
-          return d[lineIri] !== null ? Number(d[lineIri]) : null;
-        },
-      },
-      column: {
-        iri: columnIri,
-        label: getLabelWithUnit(measuresByIri[columnIri]),
-        orientation: lineAxisOrientation === "left" ? "right" : "left",
-        getY: (d) => {
-          return d[columnIri] !== null ? Number(d[columnIri]) : null;
-        },
-      },
+  let numericalYVariables: NumericalYComboLineColumnVariables;
+  const lineYGetter: YGetter = {
+    chartType: "line",
+    orientation: lineAxisOrientation,
+    dimension: dimensionsByIri[lineIri],
+    iri: lineIri,
+    label: getLabelWithUnit(measuresByIri[lineIri]),
+    getY: (d) => {
+      return d[lineIri] !== null ? Number(d[lineIri]) : null;
     },
   };
+  const columnYGetter: YGetter = {
+    chartType: "column",
+    orientation: lineAxisOrientation === "left" ? "right" : "left",
+    dimension: dimensionsByIri[columnIri],
+    iri: columnIri,
+    label: getLabelWithUnit(measuresByIri[columnIri]),
+    getY: (d) => {
+      return d[columnIri] !== null ? Number(d[columnIri]) : null;
+    },
+  };
+
+  if (lineAxisOrientation === "left") {
+    numericalYVariables = {
+      y: {
+        left: lineYGetter,
+        right: columnYGetter,
+      },
+    };
+  } else {
+    numericalYVariables = {
+      y: {
+        left: columnYGetter,
+        right: lineYGetter,
+      },
+    };
+  }
 
   return {
     ...baseVariables,
@@ -79,7 +91,7 @@ export const useComboLineColumnStateVariables = (
 };
 
 export const useComboLineColumnStateData = (
-  chartProps: ChartProps<ComboConfig> & { aspectRatio: number },
+  chartProps: ChartProps<ComboLineColumnConfig> & { aspectRatio: number },
   variables: ComboLineColumnStateVariables
 ): ChartStateData => {
   const { chartConfig, observations } = chartProps;