fix: Temporal values in X axis in column charts

app/charts/area/areas-state.tsx

@@ -115,7 +115,8 @@ const useAreasState = (
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/column/columns-grouped-state.tsx

@@ -29,6 +29,7 @@ import {
 import {
   getLabelWithUnit,
   useDataAfterInteractiveFilters,
+  useMaybeTemporalDimensionValues,
   useOptionalNumericVariable,
   usePlottableData,
   useTemporalVariable,
@@ -105,11 +106,13 @@ const useGroupedColumnsState = (
   }
 
   const xIsTime = isTemporalDimension(xDimension);
+  const xDimensionValues = useMaybeTemporalDimensionValues(xDimension, data);
 
   const { getAbbreviationOrLabelByValue: getXAbbreviationOrLabel } =
     useMaybeAbbreviations({
       useAbbreviations: fields.x.useAbbreviations,
-      dimension: xDimension,
+      dimensionIri: xDimension.iri,
+      dimensionValues: xDimensionValues,
     });
 
   const { getValue: getX, getLabel: getXLabel } = useObservationLabels(
@@ -132,7 +135,8 @@ const useGroupedColumnsState = (
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/column/columns-stacked-state.tsx

@@ -34,6 +34,7 @@ import {
   getLabelWithUnit,
   getWideData,
   useDataAfterInteractiveFilters,
+  useMaybeTemporalDimensionValues,
   useOptionalNumericVariable,
   usePlottableData,
   useTemporalVariable,
@@ -108,11 +109,13 @@ const useColumnsStackedState = (
   }
 
   const xIsTime = isTemporalDimension(xDimension);
+  const xDimensionValues = useMaybeTemporalDimensionValues(xDimension, data);
 
   const { getAbbreviationOrLabelByValue: getXAbbreviationOrLabel } =
     useMaybeAbbreviations({
       useAbbreviations: fields.x.useAbbreviations,
-      dimension: xDimension,
+      dimensionIri: xDimension.iri,
+      dimensionValues: xDimensionValues,
     });
 
   const { getValue: getX, getLabel: getXLabel } = useObservationLabels(
@@ -133,7 +136,8 @@ const useColumnsStackedState = (
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/column/columns-state.tsx

@@ -26,6 +26,7 @@ import {
 import {
   getLabelWithUnit,
   useDataAfterInteractiveFilters,
+  useMaybeTemporalDimensionValues,
   useOptionalNumericVariable,
   usePlottableData,
   useSegment,
@@ -112,11 +113,13 @@ const useColumnsState = (
   const timeUnit = xIsTime
     ? (xDimension as TemporalDimension).timeUnit
     : undefined;
+  const xDimensionValues = useMaybeTemporalDimensionValues(xDimension, data);
 
   const { getAbbreviationOrLabelByValue: getXAbbreviationOrLabel } =
     useMaybeAbbreviations({
       useAbbreviations: fields.x.useAbbreviations,
-      dimension: xDimension,
+      dimensionIri: xDimension.iri,
+      dimensionValues: xDimensionValues,
     });
 
   const { getValue: getX, getLabel: getXLabel } = useObservationLabels(

app/charts/line/lines-state.tsx

@@ -111,7 +111,8 @@ const useLinesState = (
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/pie/pie-state.tsx

@@ -72,7 +72,8 @@ const usePieState = (
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/scatterplot/scatterplot-state.tsx

@@ -76,7 +76,8 @@ const useScatterplotState = ({
     abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
   } = useMaybeAbbreviations({
     useAbbreviations: fields.segment?.useAbbreviations,
-    dimension: segmentDimension,
+    dimensionIri: segmentDimension?.iri,
+    dimensionValues: segmentDimension?.values,
   });
 
   const { getValue: getSegment, getLabel: getSegmentLabel } =

app/charts/shared/chart-helpers.spec.tsx

@@ -1,14 +1,17 @@
+import { renderHook } from "@testing-library/react-hooks";
 import { InternMap } from "d3";
 import merge from "lodash/merge";
 
 import {
   getWideData,
   prepareQueryFilters,
+  useMaybeTemporalDimensionValues,
 } from "@/charts/shared/chart-helpers";
 import { InteractiveFiltersState } from "@/charts/shared/use-interactive-filters";
 import { ChartType, Filters, InteractiveFiltersConfig } from "@/configurator";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { Observation } from "@/domain/data";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import line1Fixture from "@/test/__fixtures/config/prod/line-1.json";
 
 const makeCubeNsGetters = (cubeIri: string) => ({
@@ -137,3 +140,50 @@ describe("getWideData", () => {
     ]);
   });
 });
+
+describe("useMaybeTemporalDimensionValues", () => {
+  it("should return data values if dimension is temporal", () => {
+    const temporalDimension = {
+      __typename: "TemporalDimension",
+      iri: "year",
+      values: [
+        { label: "1996", value: "1996" },
+        { label: "2023", value: "2023" },
+      ],
+    } as DimensionMetadataFragment;
+    const data: Observation[] = [
+      { [temporalDimension.iri]: "1997" },
+      { [temporalDimension.iri]: "2002" },
+      { [temporalDimension.iri]: "2023" },
+    ];
+
+    const { result } = renderHook(() => {
+      return useMaybeTemporalDimensionValues(temporalDimension, data);
+    });
+
+    expect(result.current).toEqual([
+      { label: "1997", value: "1997" },
+      { label: "2002", value: "2002" },
+      { label: "2023", value: "2023" },
+    ]);
+  });
+
+  it("should return dimension values if dimension is not temporal", () => {
+    const dimension = {
+      __typename: "NominalDimension",
+      iri: "year",
+      values: [
+        { label: "A", value: "A" },
+        { label: "B", value: "B" },
+        { label: "C", value: "C" },
+      ],
+    } as DimensionMetadataFragment;
+    const data: Observation[] = [];
+
+    const { result } = renderHook(() => {
+      return useMaybeTemporalDimensionValues(dimension, data);
+    });
+
+    expect(result.current).toEqual(dimension.values);
+  });
+});

app/charts/shared/chart-helpers.tsx

@@ -1,6 +1,7 @@
 import { group, InternMap, sum } from "d3";
 import omitBy from "lodash/omitBy";
 import overEvery from "lodash/overEvery";
+import uniq from "lodash/uniq";
 import { useCallback, useMemo } from "react";
 
 import {
@@ -22,7 +23,11 @@ import {
   QueryFilters,
 } from "@/configurator/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
-import { Observation } from "@/domain/data";
+import {
+  DimensionValue,
+  isTemporalDimension,
+  Observation,
+} from "@/domain/data";
 import { truthy } from "@/domain/types";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 
@@ -411,3 +416,23 @@ export const useImputationNeeded = ({
 
   return imputationNeeded;
 };
+
+/** Use to potentially extract temporal values from data. This is needed for
+ * column charts, where the temporal dimension is used as X axis (and we
+ * do not fetch all values for temporal dimensions, only the min and max).
+ */
+export const useMaybeTemporalDimensionValues = (
+  dimension: DimensionMetadataFragment,
+  data: Observation[]
+) => {
+  const maybeTemporalDimensionValues: DimensionValue[] = useMemo(() => {
+    if (isTemporalDimension(dimension)) {
+      const dates = data.map((d) => d[dimension.iri] as string);
+      return uniq(dates).map((d) => ({ label: d, value: d }));
+    } else {
+      return dimension.values;
+    }
+  }, [dimension, data]);
+
+  return maybeTemporalDimensionValues;
+};

app/charts/shared/use-abbreviations.ts

@@ -1,18 +1,19 @@
 import React from "react";
 
 import { DimensionValue, Observation, ObservationValue } from "@/domain/data";
-import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 
 export const useMaybeAbbreviations = ({
   useAbbreviations,
-  dimension,
+  dimensionIri,
+  dimensionValues,
 }: {
   useAbbreviations: boolean | undefined;
-  dimension: DimensionMetadataFragment | undefined;
+  dimensionIri: string | undefined;
+  dimensionValues: DimensionValue[] | undefined;
 }) => {
   const { valueLookup, labelLookup, abbreviationOrLabelLookup } =
     React.useMemo(() => {
-      const values = dimension?.values ?? [];
+      const values = dimensionValues ?? [];
 
       const valueLookup = new Map<
         NonNullable<ObservationValue>,
@@ -37,16 +38,16 @@ export const useMaybeAbbreviations = ({
         labelLookup,
         abbreviationOrLabelLookup,
       };
-    }, [dimension?.values, useAbbreviations]);
+    }, [dimensionValues, useAbbreviations]);
 
   const getAbbreviationOrLabelByValue = React.useCallback(
     (d: Observation) => {
-      if (!dimension) {
+      if (!dimensionIri) {
         return "";
       }
 
-      const value = d[`${dimension.iri}/__iri__`] as string | undefined;
-      const label = d[dimension.iri] as string | undefined;
+      const value = d[`${dimensionIri}/__iri__`] as string | undefined;
+      const label = d[dimensionIri] as string | undefined;
 
       if (value === undefined && label === undefined) {
         return "";
@@ -55,13 +56,14 @@ export const useMaybeAbbreviations = ({
       const lookedUpObservation =
         (value ? valueLookup.get(value) : null) ??
         (label ? labelLookup.get(label) : null);
+
       const lookedUpLabel = lookedUpObservation?.label ?? "";
 
       return useAbbreviations
         ? lookedUpObservation?.alternateName ?? lookedUpLabel
         : lookedUpLabel;
     },
-    [dimension, valueLookup, labelLookup, useAbbreviations]
+    [dimensionIri, valueLookup, labelLookup, useAbbreviations]
   );
 
   return {