add units in tooltip

types/api/stats.ts

@@ -44,6 +44,7 @@ export type StatsChartInfo = {
   id: string;
   title: string;
   description: string;
+  units: string | null;
 }
 
 export type StatsChart = { chart: Array<StatsChartItem> };

ui/shared/chart/ChartTooltip.tsx

@@ -80,7 +80,10 @@ const ChartTooltip = ({ chartId, xScale, yScale, width, tooltipWidth, height, da
   const updateDisplayedValue = React.useCallback((d: TimeChartItem, i: number) => {
     d3.selectAll(`${ chartId ? `#${ chartId }` : '' } .ChartTooltip__value`)
       .filter((td, tIndex) => tIndex === i)
-      .text(data[i].valueFormatter?.(d.value) || d.value.toLocaleString());
+      .text(
+        (data[i].valueFormatter?.(d.value) || d.value.toLocaleString()) +
+        (data[i].units ? ` ${ data[i].units }` : ''),
+      );
   }, [ data, chartId ]);
 
   const drawPoints = React.useCallback((x: number) => {

ui/shared/chart/ChartWidget.tsx

@@ -37,6 +37,7 @@ type Props = {
   items?: Array<TimeChartItem>;
   title: string;
   description?: string;
+  units?: string;
   isLoading: boolean;
   className?: string;
   isError: boolean;
@@ -44,7 +45,7 @@ type Props = {
 
 const DOWNLOAD_IMAGE_SCALE = 5;
 
-const ChartWidget = ({ items, title, description, isLoading, className, isError }: Props) => {
+const ChartWidget = ({ items, title, description, isLoading, className, isError, units }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   const [ isFullscreen, setIsFullscreen ] = useState(false);
   const [ isZoomResetInitial, setIsZoomResetInitial ] = React.useState(true);
@@ -151,6 +152,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError
           onZoom={ handleZoom }
           isZoomResetInitial={ isZoomResetInitial }
           title={ title }
+          units={ units }
         />
       </Box>
     );

ui/shared/chart/ChartWidgetGraph.tsx

@@ -20,6 +20,7 @@ import calculateInnerSize from 'ui/shared/chart/utils/calculateInnerSize';
 interface Props {
   isEnlarged?: boolean;
   title: string;
+  units?: string;
   items: Array<TimeChartItem>;
   onZoom: () => void;
   isZoomResetInitial: boolean;
@@ -29,7 +30,7 @@ interface Props {
 const MAX_SHOW_ITEMS = 100;
 const DEFAULT_CHART_MARGIN = { bottom: 20, left: 40, right: 20, top: 10 };
 
-const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin }: Props) => {
+const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title, margin, units }: Props) => {
   const isMobile = useIsMobile();
   const color = useToken('colors', 'blue.200');
   const overlayRef = React.useRef<SVGRectElement>(null);
@@ -53,7 +54,7 @@ const ChartWidgetGraph = ({ isEnlarged, items, onZoom, isZoomResetInitial, title
       return rangedItems;
     }
   }, [ isGroupedValues, rangedItems ]);
-  const chartData = [ { items: displayedData, name: 'Value', color } ];
+  const chartData = React.useMemo(() => ([ { items: displayedData, name: 'Value', color, units } ]), [ color, displayedData, units ]);
 
   const { xTickFormat, yTickFormat, xScale, yScale } = useTimeChartController({
     data: [ { items: displayedData, name: title, color } ],

ui/shared/chart/types.tsx

@@ -19,6 +19,7 @@ export interface ChartOffset {
 export interface TimeChartDataItem {
   items: Array<TimeChartItem>;
   name: string;
+  units?: string;
   color?: string;
   valueFormatter?: (value: number) => string;
 }

ui/stats/ChartWidgetContainer.tsx

@@ -11,6 +11,7 @@ type Props = {
   id: string;
   title: string;
   description: string;
+  units?: string;
   interval: StatsIntervalIds;
   onLoadingError: () => void;
 }
@@ -19,7 +20,7 @@ function formatDate(date: Date) {
   return date.toISOString().substring(0, 10);
 }
 
-const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError }: Props) => {
+const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError, units }: Props) => {
   const selectedInterval = STATS_INTERVALS[interval];
 
   const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
@@ -48,6 +49,7 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
       isError={ isError }
       items={ items }
       title={ title }
+      units={ units }
       description={ description }
       isLoading={ isLoading }
     />

ui/stats/ChartsWidgetsList.tsx

@@ -99,6 +99,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isLoading, charts, interval }
                       title={ chart.title }
                       description={ chart.description }
                       interval={ interval }
+                      units={ chart.units || undefined }
                       onLoadingError={ handleChartLoadingError }
                     />
                   </GridItem>