From fb94cc471ae473a25681568106e629f585cdda9f Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 29 Sep 2022 17:43:39 +0200
Subject: [PATCH] fix: Metadata is now correctly displayed for Grouped and
 Stacked column charts

---
 app/charts/column/columns-grouped-state.tsx | 3 +++
 app/charts/column/columns-stacked-state.tsx | 5 ++++-
 app/charts/shared/axis-height-linear.tsx    | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index e7a37d9e2..0e9b769b2 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/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,
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 81a8e6ad0..a538eb27f 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/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,
diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx
index 65d3de8f0..5bd24a00f 100644
--- a/app/charts/shared/axis-height-linear.tsx
+++ b/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;