Merge pull request #748 from visualize-admin/fix/metadata-axis-height…

…-linear

fix: Metadata is now correctly displayed for Grouped and Stacked column charts

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

@@ -78,6 +78,7 @@ export interface GroupedColumnsState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
+  yAxisDescription: string | undefined;
   grouped: [string, Observation[]][];
   getAnnotationInfo: (d: Observation) => TooltipInfo;
   showStandardError: boolean;
@@ -339,6 +340,7 @@ const useGroupedColumnsState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
+  const yAxisDescription = yMeasure.description || undefined;
 
   // Group
   const grouped = useMemo(() => {
@@ -478,6 +480,7 @@ const useGroupedColumnsState = (
     getSegment,
     getSegmentLabel,
     yAxisLabel,
+    yAxisDescription,
     segments,
     colors,
     grouped,

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

@@ -22,7 +22,7 @@ import {
   sum,
 } from "d3";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy"
+import sortBy from "lodash/sortBy";
 import React, { ReactNode, useCallback, useMemo } from "react";
 
 import {
@@ -77,6 +77,7 @@ export interface StackedColumnsState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
+  yAxisDescription: string | undefined;
   chartWideData: ArrayLike<Observation>;
   allDataWide: ArrayLike<Observation>;
   grouped: [string, Observation[]][];
@@ -352,6 +353,7 @@ const useColumnsStackedState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
+  const yAxisDescription = yMeasure.description || undefined;
 
   const yScale = scaleLinear().domain(yStackDomain).nice();
 
@@ -530,6 +532,7 @@ const useColumnsStackedState = (
     getSegment,
     getSegmentLabel,
     yAxisLabel,
+    yAxisDescription,
     segments,
     colors,
     chartWideData,

app/charts/shared/axis-height-linear.tsx

@@ -3,6 +3,8 @@ import { select, Selection } from "d3";
 import { useEffect, useRef } from "react";
 
 import { AreasState } from "@/charts/area/areas-state";
+import { GroupedColumnsState } from "@/charts/column/columns-grouped-state";
+import { StackedColumnsState } from "@/charts/column/columns-stacked-state";
 import { ColumnsState } from "@/charts/column/columns-state";
 import { LinesState } from "@/charts/line/lines-state";
 import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
@@ -24,6 +26,8 @@ export const AxisHeightLinear = () => {
   const { yScale, yAxisLabel, yAxisDescription, bounds } = useChartState() as
     | AreasState
     | ColumnsState
+    | GroupedColumnsState
+    | StackedColumnsState
     | LinesState
     | ScatterplotState;