@scality/core-ui 0.186.0 → 0.187.0

package/src/lib/components/{barchartv2/Barchart.component.tsx → charts/barchart/Barchart.tsx}

@@ -1,26 +1,28 @@
 import { useState, useRef } from 'react';
 import {
   Bar,
-  BarChart,
+  BarChart as RechartsBarChart,
   CartesianGrid,
-  ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
   XAxis,
   YAxis,
 } from 'recharts';
-import styled, { useTheme } from 'styled-components';
-import { spacing, Stack, Wrap } from '../../spacing';
-import { chartColors, ChartColors, fontSize } from '../../style/theme';
-import { Box } from '../box/Box';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { IconHelp } from '../iconhelper/IconHelper';
-import { Loader } from '../loader/Loader.component';
-import { Text } from '../text/Text.component';
+import { useTheme } from 'styled-components';
+import { Stack } from '../../../spacing';
+import { chartColors, ChartColors, fontSize } from '../../../style/theme';
+import { useChartLegend } from '../legend/ChartLegendWrapper';
 import { BarchartTooltip } from './BarchartTooltip';
-import { getTicks, UnitRange, useChartData } from './utils';
+import { formatToISONumber, getTicks } from '../common/chartUtils';
+import { useChartData } from './Barchart.utils';
+import {
+  ChartHeader,
+  ChartError,
+  ChartLoading,
+  CustomTick,
+  StyledResponsiveContainer,
+} from '../common/SharedComponents';
+import { TimeType, CategoryType, UnitRange } from '../types';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 4,
@@ -34,23 +36,9 @@ const CHART_CONSTANTS = {
     bottom: 0,
   },
 };
-const maxWidthTooltip = { maxWidth: '20rem' };
 
 /* ---------------------------------- TYPE ---------------------------------- */
 
-export type TimeType = {
-  type: 'time';
-  timeRange: {
-    startDate: Date;
-    endDate: Date;
-    interval: number;
-  };
-};
-
-export type CategoryType = {
-  type: 'category';
-  gap?: number;
-};
 export type Point = {
   key: string | number;
   values: { label: string; value: number }[];
@@ -98,168 +86,6 @@ export type BarchartProps<T extends BarchartBars> = {
   isError?: boolean;
 };
 
-interface CustomTickProps {
-  x: number;
-  y: number;
-  payload: {
-    value: number;
-  };
-  visibleTicksCount: number;
-  width: number;
-  type: TimeType;
-}
-
-/* ---------------------------------- COMPONENTS ---------------------------------- */
-
-/**
- * Get the format of the date based on the duration
- * @param duration - Duration in seconds
- * @returns Formatted string
- */
-export const formatDate = (
-  duration: number,
-): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
-  if (duration <= 24 * 60 * 60) {
-    return 'time';
-  } else if (duration <= 7 * 24 * 60 * 60) {
-    return 'day-month-abbreviated';
-  } else {
-    return 'chart-long-term-date';
-  }
-};
-
-export const CustomTick = ({
-  x,
-  y,
-  payload,
-  visibleTicksCount,
-  width,
-  type,
-}: CustomTickProps) => {
-  const theme = useTheme();
-  const tickWidth =
-    width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
-  const centerX = x - tickWidth / 2;
-
-  const duration =
-    type.type === 'time'
-      ? (type.timeRange.endDate.getTime() -
-          type.timeRange.startDate.getTime()) /
-        1000
-      : 0;
-
-  return (
-    <foreignObject
-      x={centerX}
-      y={y - 8}
-      width={tickWidth}
-      color={theme.textSecondary}
-      overflow="visible"
-    >
-      <ConstrainedText
-        color="textSecondary"
-        text={
-          <Text variant="Smaller">
-            {type.type === 'time' ? (
-              <FormattedDateTime
-                format={formatDate(duration)}
-                value={new Date(payload.value)}
-              />
-            ) : (
-              String(payload.value)
-            )}
-          </Text>
-        }
-        centered
-        tooltipStyle={{
-          backgroundColor: theme.backgroundLevel1,
-          padding: spacing.r10,
-          borderRadius: spacing.r8,
-          border: `1px solid ${theme.border}`,
-          position: 'absolute',
-        }}
-      />
-    </foreignObject>
-  );
-};
-
-export const StyledResponsiveContainer = styled(ResponsiveContainer)`
-  // Avoid tooltip over constrained text to be cut off
-  & .recharts-surface {
-    outline: none;
-    overflow: visible;
-  }
-`;
-
-const ChartHeader = ({
-  title,
-  secondaryTitle,
-  helpTooltip,
-  rightTitle,
-}: {
-  title?: string;
-  secondaryTitle?: string;
-  helpTooltip?: React.ReactNode;
-  rightTitle?: React.ReactNode;
-}) => {
-  return (
-    <Wrap>
-      <Stack gap="r4">
-        <Text variant="ChartTitle">{title}</Text>
-        {helpTooltip && (
-          <IconHelp
-            tooltipMessage={helpTooltip}
-            overlayStyle={maxWidthTooltip}
-          />
-        )}
-
-        {secondaryTitle && (
-          <Text
-            color="textSecondary"
-            style={{
-              marginLeft: spacing.r8,
-            }}
-          >
-            {secondaryTitle}
-          </Text>
-        )}
-      </Stack>
-
-      {rightTitle && <Text>{rightTitle}</Text>}
-    </Wrap>
-  );
-};
-
-const Error = ({ height }: { height: number }) => {
-  return (
-    <Box
-      height={height}
-      style={{
-        alignItems: 'center',
-        justifyContent: 'center',
-        display: 'flex',
-      }}
-    >
-      <Text>Chart data is not available</Text>
-    </Box>
-  );
-};
-
-const Loading = ({ height }: { height: number }) => {
-  return (
-    <Box
-      height={height}
-      style={{
-        alignItems: 'center',
-        justifyContent: 'center',
-        display: 'flex',
-      }}
-    >
-      <Loader size="larger" children={<Text>Loading Chart Data...</Text>} />
-    </Box>
-  );
-};
-
 /* ---------------------------------- MAIN COMPONENT ---------------------------------- */
 
 export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
@@ -297,16 +123,21 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     {} as Record<string, ChartColors | string>,
   );
 
-  const { rechartsBars, unitLabel, roundReferenceValue, rechartsData, topDomain } =
-    useChartData(
-      bars || [],
-      type,
-      colorSet || {},
-      stacked,
-      defaultSort,
-      unitRange,
-      stackedBarSort,
-    );
+  const {
+    rechartsBars,
+    unitLabel,
+    roundReferenceValue,
+    rechartsData,
+    topDomain,
+  } = useChartData(
+    bars || [],
+    type,
+    colorSet || {},
+    stacked,
+    defaultSort,
+    unitRange,
+    stackedBarSort,
+  );
   const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
   return (
     <Stack direction="vertical" style={{ gap: '0' }}>
@@ -317,12 +148,12 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
         rightTitle={rightTitle}
       />
       {isError || (!bars && !isLoading) ? (
-        <Error height={height} />
+        <ChartError height={height} />
       ) : isLoading ? (
-        <Loading height={height} />
+        <ChartLoading height={height} />
       ) : (
         <StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
-          <BarChart
+          <RechartsBarChart
             data={rechartsData}
             accessibilityLayer
             barSize={
@@ -365,9 +196,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
               interval={0}
               domain={[0, topDomain]}
               ticks={getTicks(roundReferenceValue, false)}
-              tickFormatter={
-                (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator
-              }
+              tickFormatter={(value) => formatToISONumber(value)}
               axisLine={{ stroke: theme.border }}
               tick={{
                 fill: theme.textSecondary,
@@ -378,7 +207,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
 
             <XAxis
               dataKey="category"
-              tick={(props) => <CustomTick {...props} type={type} />}
+              tick={(props) => (
+                <CustomTick
+                  {...props}
+                  type={type}
+                  tickWidthOffset={CHART_CONSTANTS.TICK_WIDTH_OFFSET}
+                />
+              )}
               type="category"
               interval={0}
               allowDataOverflow={true}
@@ -404,7 +239,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
               )}
               cursor={false}
             />
-          </BarChart>
+          </RechartsBarChart>
         </StyledResponsiveContainer>
       )}
     </Stack>

package/src/lib/components/{barchartv2/utils.test.ts → charts/barchart/Barchart.utils.test.ts}

@@ -1,18 +1,14 @@
-import { coreUIAvailableThemes } from '../../style/theme';
+import { coreUIAvailableThemes } from '../../../style/theme';
 import {
   applySortingToData,
-  computeUnitLabelAndRoundReferenceValue,
   filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
   getCurrentPoint,
   getMaxBarValue,
-  getRoundReferenceValue,
-  getTicks,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
-  UnitRange,
-} from './utils';
+} from './Barchart.utils';
 
 // Test date constants to avoid repetition
 const TEST_DATES = {
@@ -504,77 +500,6 @@ describe('applySortingToData', () => {
   });
 });
 
-describe('getRoundReferenceValue', () => {
-  it('should return appropriate rounded values with 10% buffer', () => {
-    // Small values (< 10)
-    expect(getRoundReferenceValue(0.1)).toBe(0.1); // 0.1 → 0.11 → 0.1 (magnitude 0.1, remainder 0.01)
-    expect(getRoundReferenceValue(1)).toBe(1); // 1 → 1.1 → 1 (magnitude 1, remainder 0.1)
-    expect(getRoundReferenceValue(2)).toBe(2); // 2 → 2.2 → 2 (magnitude 1, remainder 0.2)
-    expect(getRoundReferenceValue(3)).toBe(3); // 3 → 3.3 → 3 (magnitude 1, remainder 0.3)
-
-    // Values 5-10 range
-    expect(getRoundReferenceValue(6)).toBe(6); // 6 → 6.6 → 6 (magnitude 1, remainder 0.6)
-    expect(getRoundReferenceValue(9)).toBe(9); // 9 → 9.9 → 9 (magnitude 1, remainder 0.9)
-
-    // Larger values get 10% buffer applied
-    expect(getRoundReferenceValue(15)).toBe(10); // 15 → 16.5, remainder 5, incremented 20 > 16.5, so round down to 10
-    expect(getRoundReferenceValue(35)).toBe(30); // 35 → 38.5, remainder 5, incremented 40 > 38.5, so round down to 30
-    expect(getRoundReferenceValue(75)).toBe(80); // 75 → 82.5, remainder 5, incremented 80 <= 82.5, so round up to 80
-    expect(getRoundReferenceValue(150)).toBe(150); // 150 → 165, remainder 0, so return 150
-    expect(getRoundReferenceValue(350)).toBe(350); // 350 → 385, remainder 0, so return 350
-    expect(getRoundReferenceValue(750)).toBe(750); // 750 → 825, remainder 0, so return 750
-    expect(getRoundReferenceValue(1500)).toBe(1500); // 1500 → 1650, remainder 0, so return 1500
-    expect(getRoundReferenceValue(3500)).toBe(3500); // 3500 → 3850, remainder 0, so return 3500
-    expect(getRoundReferenceValue(7500)).toBe(7500); // 7500 → 8250, remainder 0, so return 7500
-    expect(getRoundReferenceValue(15000)).toBe(15000); // 15000 → 16500, remainder 0, so return 15000
-  });
-});
-
-describe('getTicks', () => {
-  describe('small values (< 10)', () => {
-    it('should return 2 ticks for non-symmetrical small values', () => {
-      expect(getTicks(1, false)).toEqual([0, 0.5, 1]); // 1 % 2 != 0, defaults to 3 ticks
-      expect(getTicks(2, false)).toEqual([0, 1, 2]); // 2 % (3-1) == 0, uses 3 ticks
-      expect(getTicks(5, false)).toEqual([0, 2.5, 5]); // 5 % 2 != 0 and 5 % 3 != 0, defaults to 3 ticks
-    });
-
-    it('should return 3 ticks for symmetrical small values', () => {
-      expect(getTicks(1, true)).toEqual([-1, -0.5, 0, 0.5, 1]); // 1 % 2 != 0, defaults to 3 ticks, symmetrical adds negatives
-      expect(getTicks(2, true)).toEqual([-2, -1, 0, 1, 2]); // 2 % (3-1) == 0, uses 3 ticks, symmetrical adds negatives
-      expect(getTicks(5, true)).toEqual([-5, -2.5, 0, 2.5, 5]); // 5 % 2 != 0 and 5 % 3 != 0, defaults to 3 ticks, symmetrical adds negatives
-    });
-  });
-
-  describe('even topValue (divisible by 2)', () => {
-    it('should return 3 ticks for non-symmetrical even values', () => {
-      expect(getTicks(10, false)).toEqual([0, 5, 10]);
-      expect(getTicks(20, false)).toEqual([0, 10, 20]);
-      expect(getTicks(40, false)).toEqual([0, 20, 40]);
-      expect(getTicks(50, false)).toEqual([0, 25, 50]);
-      expect(getTicks(100, false)).toEqual([0, 50, 100]);
-      expect(getTicks(1000, false)).toEqual([0, 500, 1000]);
-    });
-
-    it('should return 5 ticks for symmetrical even values', () => {
-      expect(getTicks(10, true)).toEqual([-10, -5, 0, 5, 10]);
-      expect(getTicks(100, true)).toEqual([-100, -50, 0, 50, 100]);
-    });
-  });
-
-  describe('odd topValue (not divisible by 2) - 7.5 multiples', () => {
-    it('should return 4 ticks for non-symmetrical values from 7.5 × magnitude', () => {
-      expect(getTicks(75, false)).toEqual([0, 25, 50, 75]);
-      expect(getTicks(750, false)).toEqual([0, 250, 500, 750]);
-      expect(getTicks(7500, false)).toEqual([0, 2500, 5000, 7500]);
-    });
-
-    it('should return 7 ticks for symmetrical values from 7.5 × magnitude', () => {
-      expect(getTicks(75, true)).toEqual([-75, -50, -25, 0, 25, 50, 75]);
-      expect(getTicks(750, true)).toEqual([-750, -500, -250, 0, 250, 500, 750]);
-    });
-  });
-});
-
 describe('getMaxBarValue', () => {
   it('should return the maximum value from chart data', () => {
     const data = [
@@ -716,70 +641,6 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
   });
 });
 
-describe('computeUnitLabelAndRoundReferenceValue', () => {
-  it('should compute the unit label and round reference value correctly when reaching threshold', () => {
-    const data = [
-      {
-        category: 'category1',
-        success: 1680,
-      },
-    ];
-    const maxValue = 1680;
-    const unitRange: UnitRange = [
-      {
-        threshold: 1000,
-        label: 'kB',
-      },
-    ];
-    const result = computeUnitLabelAndRoundReferenceValue(
-      data,
-      maxValue,
-      unitRange,
-    );
-
-    expect(result.unitLabel).toBe('kB');
-    // 1680 / 1000 = 1.68, with buffer: 1.848 → rounds to 1 (magnitude 1, remainder 0.848)
-    expect(result.roundReferenceValue).toBe(1);
-    expect(result.rechartsData).toEqual([
-      {
-        category: 'category1',
-        success: 1.68,
-      },
-    ]);
-  });
-  it('should compute the unit label and round reference value correctly when threshold is 0', () => {
-    const data = [
-      {
-        category: 'category1',
-        success: 680,
-      },
-    ];
-    const maxValue = 680;
-    const unitRange: UnitRange = [
-      {
-        threshold: 0,
-        label: 'B',
-      },
-      {
-        threshold: 1000,
-        label: 'kB',
-      },
-    ];
-    const result = computeUnitLabelAndRoundReferenceValue(
-      data,
-      maxValue,
-      unitRange,
-    );
-
-    expect(result.unitLabel).toBe('B');
-    // 680 with buffer: 748 → rounds to 680 (value >= 10, remainder 0, rounds down)
-    expect(result.roundReferenceValue).toBe(680);
-    expect(result.rechartsData).toEqual([
-      { category: 'category1', success: 680 },
-    ]);
-  });
-});
-
 describe('sortStackedBars', () => {
   const bars = [
     { dataKey: 'bar1', fill: 'blue' },

package/src/lib/components/{barchartv2/utils.ts → charts/barchart/Barchart.utils.ts}

@@ -1,58 +1,9 @@
-import { BarchartProps, BarchartBars } from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart';
 import { TooltipContentProps } from 'recharts';
-import { chartColors, ChartColors } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-
-export const getRoundReferenceValue = (value: number): number => {
-  if (value <= 0) return 1; // Default for zero or negative values
-  
-  // Buffer the value by 10% to avoid being too close to the edge of the chart
-  const bufferedValue = value * 1.1;
-
-  if (value >= 10) {
-    const remainder = value % 10;
-    const incremented = value + (10 - remainder);
-
-    // If the remainder is less than 5, round down to the nearest 10
-    if (remainder < 5) {
-      return value - remainder;
-    }
-
-    // If incrementing would exceed the buffered max, also round down
-    if (incremented > bufferedValue) {
-      return value - remainder;
-    }
-
-    // Otherwise, round up to the next 10
-    return incremented;
-  }
-
-  const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
-
-  const remainder = bufferedValue % magnitude;
-
-  return remainder === 0 ? bufferedValue : bufferedValue - remainder;
-};
-
-export const getTicks = (topValue: number, isSymmetrical: boolean) => {
-  const possibleTickNumbers = [4, 3];
-  const numberOfTicks =
-    possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 2 ticks if no match
-  const tickInterval = topValue / (numberOfTicks - 1);
-  const ticks = Array.from(
-    { length: numberOfTicks },
-    (_, index) => index * tickInterval,
-  );
-  if (isSymmetrical) {
-    // Create negative ticks in order without 0
-    const negativeTicks = Array.from(
-      { length: numberOfTicks - 1 },
-      (_, index) => -(numberOfTicks - 1 - index) * tickInterval,
-    );
-    ticks.unshift(...negativeTicks);
-  }
-  return ticks;
-};
+import { chartColors, ChartColors } from '../../../style/theme';
+import { useChartLegend } from '../legend/ChartLegendWrapper';
+import { normalizeChartDataWithUnits } from '../common/chartUtils';
+import { UnitRange } from '../types';
 
 export const getMaxBarValue = (
   data: { [key: string]: string | number }[],
@@ -225,14 +176,19 @@ export const applySortingToData = <T extends BarchartBars>(
   defaultSort: BarchartProps<T>['defaultSort'],
 ) => {
   const points = data.map((item) => {
-    const point: any = { category: item.category };
+    const point: Record<string, string | number> = { category: item.category };
     barDataKeys.forEach((dataKey) => {
       point[dataKey] = Number(item[dataKey]) || 0;
     });
     return point;
   });
 
-  points.sort(defaultSort);
+  points.sort(
+    defaultSort as (
+      a: Record<string, string | number>,
+      b: Record<string, string | number>,
+    ) => number,
+  );
 
   return points.map((point) => {
     const dataItem: { [key: string]: string | number } = {
@@ -319,88 +275,6 @@ export const formatPrometheusDataToRechartsDataAndBars = <
   };
 };
 
-export type UnitRange = {
-  threshold: number;
-  label: string;
-}[];
-
-export const computeUnitLabelAndRoundReferenceValue = (
-  data: any,
-  maxValue: number,
-  unitRange: UnitRange | undefined,
-) => {
-  if (!unitRange) {
-    const roundReferenceValue = getRoundReferenceValue(maxValue);
-    return { unitLabel: undefined, roundReferenceValue, rechartsData: data, topDomain: maxValue * 1.1 };
-  }
-
-  const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
-  const topValue = maxValue / valueBase;
-  const roundReferenceValue = getRoundReferenceValue(topValue);
-  const rechartsData = data.map((dataPoint) => {
-    const normalizedDataPoint = { ...dataPoint };
-    Object.entries(dataPoint).forEach(([key, value]) => {
-      if (key !== 'category' && typeof value === 'number') {
-        normalizedDataPoint[key] = value / valueBase;
-      }
-    });
-    return normalizedDataPoint;
-  });
-  return { unitLabel, roundReferenceValue, rechartsData, topDomain: topValue * 1.1 };
-};
-
-/**
- * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
- * @param {any} unitRange
- * @param {any} maxValue the maximum value among the data set
- * @returns {any}
- */
-export function getUnitLabel(
-  unitRange: {
-    threshold: number;
-    label: string;
-  }[],
-  maxValue: number,
-): {
-  valueBase: number;
-  unitLabel: string;
-} {
-  // first sort the unitRange
-  unitRange.sort(
-    (
-      unitA: {
-        threshold: number;
-        label: string;
-      },
-      unitB: {
-        threshold: number;
-        label: string;
-      },
-    ) => {
-      return unitA.threshold - unitB.threshold;
-    },
-  );
-  let index = unitRange.findIndex((range) => range.threshold > maxValue);
-
-  // last unit
-  if (index === -1) {
-    index = unitRange.length;
-  }
-
-  if (index === 0) {
-    return {
-      valueBase: unitRange[index].threshold,
-      unitLabel: unitRange[index].label,
-    };
-  }
-
-  return {
-    // if the threshold is 0, we use 1 as the value base to avoid division by 0
-    valueBase: unitRange[index - 1].threshold || 1,
-    unitLabel: unitRange[index - 1].label,
-  };
-}
-
 // Sort stacked bars by their average values in descending order or by legend order
 // This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
 export const sortStackedBars = (
@@ -526,15 +400,15 @@ export const useChartData = <T extends BarchartBars>(
 
   const maxValue = getMaxBarValue(filteredData, stacked);
 
-  const { unitLabel, roundReferenceValue, rechartsData, topDomain } =
-    computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
+  const { unitLabel, topValue, rechartsData, topDomain } =
+    normalizeChartDataWithUnits(filteredData, maxValue, unitRange, 'category');
 
   return {
     rechartsBars: filteredRechartsBars,
-    unitLabel,
-    topDomain,
-    roundReferenceValue,
+    unitLabel: unitLabel,
+    roundReferenceValue: topValue,
     rechartsData,
+    topDomain,
   };
 };
 

package/src/lib/components/{barchartv2 → charts/barchart}/BarchartTooltip.tsx

@@ -1,19 +1,15 @@
 import { TooltipContentProps } from 'recharts';
-import { LegendShape } from '../chartlegend/ChartLegend';
+import { LegendShape } from '../legend/ChartLegend';
 import {
   ChartTooltipPortal,
   ChartTooltipHeader,
   ChartTooltipItem,
   ChartTooltipItemsContainer,
   TooltipHeader,
-} from '../charttooltip/ChartTooltip';
-import {
-  BarchartBars,
-  BarchartTooltipFn,
-  CategoryType,
-  TimeType,
-} from './Barchart.component';
-import { getCurrentPoint } from './utils';
+} from '../common/ChartTooltip';
+import { BarchartBars, BarchartTooltipFn } from './Barchart';
+import { CategoryType, TimeType } from '../types';
+import { getCurrentPoint } from './Barchart.utils';
 
 export const BarchartTooltip = <T extends BarchartBars>({
   type,