From 4aa735a6a709117816184aef1cf54392b55d27fd Mon Sep 17 00:00:00 2001
From: Daniel da Silva <danielfdsilva@gmail.com>
Date: Mon, 30 Oct 2023 10:26:21 +0000
Subject: [PATCH] Add unit to analysis chart y axis

---
 .../components/datasets/dataset-chart.tsx     | 31 ++++++++++++++++---
 .../components/datasets/dataset-list-item.tsx |  2 +-
 .../components/exploration/constants.ts       |  2 +-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
index e7c7b82f6..1bb1b3361 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
@@ -10,6 +10,10 @@ import { DatasetTrackMessage } from './dataset-track-message';
 import { DataMetric } from './analysis-metrics';
 
 import { getNumForChart } from '$components/common/chart/utils';
+import {
+  TimelineDatasetAnalysisSuccess,
+  TimelineDatasetSuccess
+} from '$components/exploration/types.d.ts';
 
 const CHART_MARGIN = 8;
 
@@ -17,16 +21,17 @@ interface DatasetChartProps {
   width: number;
   xScaled: ScaleTime<number, number>;
   isVisible: boolean;
-  data: any;
+  dataset: TimelineDatasetSuccess;
   activeMetrics: DataMetric[];
   highlightDate?: Date;
 }
 
 export function DatasetChart(props: DatasetChartProps) {
-  const { xScaled, width, isVisible, data, activeMetrics, highlightDate } =
+  const { xScaled, width, isVisible, dataset, activeMetrics, highlightDate } =
     props;
 
-  const timeseries = data.data.timeseries;
+  const analysisData = dataset.analysis as TimelineDatasetAnalysisSuccess;
+  const timeseries = analysisData.data.timeseries;
 
   const theme = useTheme();
 
@@ -67,8 +72,10 @@ export function DatasetChart(props: DatasetChartProps) {
 
         <g transform={`translate(0, ${CHART_MARGIN})`}>
           <AxisGrid
+            yLabel={dataset.data.legend?.unit?.label}
             y={y}
             width={width}
+            height={height}
             isVisible={isVisible}
             isExpanded={isExpanded}
           />
@@ -164,12 +171,14 @@ function DataLine(props: DateLineProps) {
 interface AxisGridProps {
   y: ScaleLinear<number, number>;
   width: number;
+  height: number;
+  yLabel?: string;
   isVisible: boolean;
   isExpanded: boolean;
 }
 
 function AxisGrid(props: AxisGridProps) {
-  const { y, width, isVisible, isExpanded } = props;
+  const { y, width, height, isVisible, isExpanded, yLabel } = props;
 
   const theme = useTheme();
 
@@ -184,6 +193,18 @@ function AxisGrid(props: AxisGridProps) {
           exit={{ opacity: 0 }}
           transition={{ duration: 0.16 }}
         >
+          {yLabel && (
+            <text
+              y={width + RIGHT_AXIS_SPACE - 20}
+              x={-height / 2}
+              transform='rotate(-90)'
+              textAnchor='middle'
+              fontSize='0.75rem'
+              fill={theme.color?.base}
+            >
+              {yLabel}
+            </text>
+          )}
           {ticks.map((tick) => (
             <React.Fragment key={tick}>
               <line
@@ -196,7 +217,7 @@ function AxisGrid(props: AxisGridProps) {
                 strokeOpacity={isVisible ? 1 : 0.5}
               />
               <text
-                x={width + 10}
+                x={width + 8}
                 y={y(tick)}
                 fontSize='0.75rem'
                 dy='0.25em'
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index 00996f2ba..86c60e68e 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -294,7 +294,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
                   xScaled={xScaled!}
                   width={width}
                   isVisible={!!isVisible}
-                  data={dataset.analysis}
+                  dataset={dataset}
                   activeMetrics={analysisMetrics}
                   highlightDate={dataPoint?.date}
                 />
diff --git a/app/scripts/components/exploration/constants.ts b/app/scripts/components/exploration/constants.ts
index b7124fca6..96ac5d1ba 100644
--- a/app/scripts/components/exploration/constants.ts
+++ b/app/scripts/components/exploration/constants.ts
@@ -1,4 +1,4 @@
-export const RIGHT_AXIS_SPACE = 80;
+export const RIGHT_AXIS_SPACE = 96;
 export const HEADER_COLUMN_WIDTH = 320;
 export const DATASET_TRACK_BLOCK_HEIGHT = 16;