ARTESCA-14587: Adjust the chart base on the valueBase

Author: ChengYanJin

src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -18,10 +18,16 @@ import {
   fontWeight,
   lineTimeSeriesColorRange,
 } from '../../style/theme';
-import { ChartTitleText } from '../text/Text.component';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Loader } from '../loader/Loader.component';
 import { spacing } from '../../spacing';
 import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { Icon } from '../icon/Icon.component';
+import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import {
+  DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
+  FormattedDateTime,
+} from '../date/FormattedDateTime';
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -168,16 +174,10 @@ const CustomTooltip = ({
   return (
     <TooltipContainer>
       <TooltipTime>
-        {new Date(label)
-          .toLocaleString('en-GB', {
-            day: 'numeric',
-            month: 'short',
-            hour: '2-digit',
-            minute: '2-digit',
-            second: '2-digit',
-            hour12: false,
-          })
-          .replace(',', '')}
+        <FormattedDateTime
+          format="day-month-abbreviated-hour-minute-second"
+          value={new Date(label)}
+        />
       </TooltipTime>
       {sortedPayload.map((entry, index) => (
         <TooltipValue key={index}>
@@ -187,9 +187,7 @@ const CustomTooltip = ({
             <TooltipInstanceValue>
               {isNaN(Number(entry.value))
                 ? '-'
-                : typeof entry.value === 'number'
-                  ? `${Math.round(entry.value * 100) / 100}${unitLabel}`
-                  : `${Number(entry.value).toFixed(2)}${unitLabel}`}
+                : `${Number(entry.value).toFixed(2)}${unitLabel}`}
             </TooltipInstanceValue>
           </TooltipContent>
         </TooltipValue>
@@ -262,7 +260,8 @@ export function LineTimeSerieChart({
           }));
 
     // 2. Convert directly to Recharts format
-    const rechartsData: Record<
+    // Initialize an object to hold data points by timestamp
+    const dataPointsByTime: Record<
       number,
       { timestamp: number } & Record<string, string | number | null>
     > = {};
@@ -278,17 +277,17 @@ export function LineTimeSerieChart({
         const timestamp =
           typeof point[0] === 'number' ? point[0] * 1000 : Number(point[0]);
         const value = point[1];
-
-        if (!rechartsData[timestamp]) {
-          rechartsData[timestamp] = { timestamp };
+        // Initialize this timestamp if it doesn't exist
+        if (!dataPointsByTime[timestamp]) {
+          dataPointsByTime[timestamp] = { timestamp };
         }
-
-        rechartsData[timestamp][label] = value;
+        // Add this metric's value to the data point, and convert the value to a number if it's a string
+        dataPointsByTime[timestamp][label] =
+          typeof value === 'string' ? Number(value) : value;
       });
     });
-
     // Convert object to array for Recharts
-    return Object.values(rechartsData).sort(
+    return Object.values(dataPointsByTime).sort(
       (
         a: { timestamp: number } & Record<string, string | number | null>,
         b: { timestamp: number } & Record<string, string | number | null>,
@@ -320,9 +319,14 @@ export function LineTimeSerieChart({
     return exactEvenTicks;
   }, [chartData]);
 
-  const { topValue, unitLabel } = useMemo(() => {
-    if (yAxisType === 'percentage') return { topValue: 100, unitLabel: '%' };
-    if (!unitRange || !chartData.length) return { topValue: 0, unitLabel: '' };
+  // 3. Transform the data base on the valuebase
+  const { topValue, unitLabel, rechartsData } = useMemo(() => {
+    if (yAxisType === 'percentage')
+      return {
+        topValue: 100,
+        unitLabel: '%',
+        rechartsData: chartData,
+      };
 
     const values = chartData.flatMap((dataPoint) =>
       Object.entries(dataPoint)
@@ -338,12 +342,23 @@ export function LineTimeSerieChart({
     const top = Math.abs(Math.max(...values));
     const bottom = Math.abs(Math.min(...values));
     const maxValue = Math.max(top, bottom);
-    const roundedMax = Math.ceil(maxValue / 10) * 10;
 
-    return {
-      topValue: roundedMax,
-      unitLabel: getUnitLabel(unitRange, maxValue).unitLabel,
-    };
+    const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+
+    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+
+    // Convert the data points in the same memo
+    const rechartsData = chartData.map((dataPoint) => {
+      const normalizedDataPoint = { ...dataPoint };
+      Object.entries(dataPoint).forEach(([key, value]) => {
+        if (key !== 'timestamp' && typeof value === 'number') {
+          normalizedDataPoint[key] = value / valueBase;
+        }
+      });
+      return normalizedDataPoint;
+    });
+
+    return { topValue, unitLabel, rechartsData };
   }, [chartData, yAxisType, unitRange]);
 
   // Group series by resource and create color mapping
@@ -383,14 +398,7 @@ export function LineTimeSerieChart({
   const formatTime = useMemo(
     () => (timestamp: number) => {
       const date = new Date(timestamp);
-      return date
-        .toLocaleDateString('en-GB', {
-          day: 'numeric',
-          month: 'short',
-          hour: '2-digit',
-          minute: '2-digit',
-        })
-        .replace(',', '');
+      return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
     },
     [],
   );
@@ -401,11 +409,19 @@ export function LineTimeSerieChart({
         <ChartTitleText>
           {title} {unitLabel && `(${unitLabel})`}
         </ChartTitleText>
+        {helpText && (
+          <TooltipComponent
+            placement={'right'}
+            overlay={<SmallerText>{helpText}</SmallerText>}
+          >
+            <Icon name="Info" color={theme.buttonSecondary} />
+          </TooltipComponent>
+        )}
         {isLoading && <Loader />}
       </ChartHeader>
       <ResponsiveContainer width="100%" height={height}>
         <LineChart
-          data={chartData}
+          data={rechartsData}
           ref={chartRef}
           margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           aria-label={`Time series chart for ${title}`}

stories/linetimeseriechart.stories.tsx

@@ -32,7 +32,6 @@ const meta: Meta<typeof LineTimeSerieChart> = {
     startingTimeStamp: { control: 'number' },
     unitRange: { control: 'object' },
     isLoading: { control: 'boolean' },
-    isLegendHidden: { control: 'boolean' },
     yAxisType: {
       control: 'select',
       options: ['default', 'percentage', 'symmetrical'],
@@ -44,7 +43,6 @@ const meta: Meta<typeof LineTimeSerieChart> = {
 export default meta;
 type Story = StoryObj<typeof ChartWithProviders>;
 
-// The Prometheus dataset converted for use with LineTemporalChartV2
 const prometheusData = [
   [1740405600, '47.554166666666674'],
   [1740406320, '53.00833333333337'],
@@ -293,6 +291,68 @@ const prometheusData4 = [
   [1740492000, '185.90'],
 ];
 
+const prometheusData5 = [
+  [1740405600, '12850.45'],
+  [1740406320, '21780.92'],
+  [1740407760, '8320.15'],
+  [1740408480, '16420.78'],
+  [1740409200, '21950.34'],
+  [1740409920, '9280.67'],
+  [1740410640, '18605.89'],
+  [1740411360, '12450.23'],
+  [1740412080, '21308.56'],
+  [1740412800, '18808.90'],
+  [1740413520, '15305.67'],
+  [1740414240, '24550.45'],
+  [1740415680, '10205.89'],
+  [1740416400, '19208.90'],
+  [1740417120, '24802.34'],
+  [1740417840, '13402.56'],
+  [1740418560, '21450.78'],
+  [1740419280, '18220.34'],
+  [1740420000, '26608.90'],
+  [1740420720, '19380.45'],
+  [1740421440, '23350.67'],
+  [1740422160, '19920.45'],
+  [1740422880, '15480.23'],
+  [1740423600, '28580.90'],
+  [1740467520, '17280.45'],
+  [1740468240, '24750.67'],
+  [1740468960, '18420.34'],
+  [1740469680, '23480.90'],
+  [1740470400, '19850.67'],
+  [1740471120, '27320.45'],
+  [1740471840, '19720.34'],
+  [1740472560, '24405.67'],
+  [1740473280, '18502.89'],
+  [1740474000, '27908.45'],
+  [1740474720, '16205.67'],
+  [1740475440, '23602.34'],
+  [1740476160, '19305.89'],
+  [1740476880, '24450.67'],
+  [1740477600, '18858.90'],
+  [1740478320, '26492.34'],
+  [1740479040, '19588.90'],
+  [1740479760, '28288.45'],
+  [1740480480, '19765.67'],
+  [1740481200, '23398.90'],
+  [1740481920, '19492.34'],
+  [1740482640, '25929.45'],
+  [1740483360, '18329.67'],
+  [1740484080, '24659.89'],
+  [1740484800, '19459.23'],
+  [1740485520, '27559.67'],
+  [1740486240, '18259.89'],
+  [1740486960, '25689.90'],
+  [1740487680, '19959.34'],
+  [1740488400, '28359.67'],
+  [1740489120, '19489.90'],
+  [1740489840, '26429.34'],
+  [1740490560, '19729.45'],
+  [1740491280, '28289.67'],
+  [1740492000, '19859.90'],
+];
+
 export const PercentageChartExample: Story = {
   args: {
     series: [
@@ -307,16 +367,16 @@ export const PercentageChartExample: Story = {
     title: 'CPU Usage',
     height: 200,
     startingTimeStamp: prometheusData[0][0],
-    unitRange: [{ value: 1, unitLabel: '%' }],
     isLoading: false,
     isLegendHidden: false,
+    helpText: 'This is the help text',
     yAxisType: 'percentage',
     yAxisTitle: '',
   },
 };
 const UNIT_RANGE_BS = [
   {
-    threshold: 0,
+    threshold: 1,
     label: 'B/s',
   },
   {
@@ -382,3 +442,21 @@ export const SymmetricalAxisExample: Story = {
     yAxisTitle: 'in(+)/out(-)',
   },
 };
+export const AutoUnitChartExample: Story = {
+  args: {
+    series: [
+      {
+        data: prometheusData5,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+        getLegendLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Disk Throughput',
+    startingTimeStamp: prometheusData5[0][0],
+    height: 200,
+    unitRange: UNIT_RANGE_BS,
+    yAxisType: 'default',
+  },
+};