Add unit to analysis chart y axis

NASA-IMPACT · Oct 30, 2023 · 4aa735a · 4aa735a
1 parent 949a61b
commit 4aa735a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
@@ -10,23 +10,28 @@ 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;
 
 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
@@ -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
@@ -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;