Merge branch 'improvement/add-long-term-x-axis-date-format' into q/1.0

Author: bert-e

src/lib/components/date/FormattedDateTime.tsx

@@ -54,6 +54,16 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -65,7 +75,8 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
-    | 'chart-date';
+    | 'chart-date'
+    | 'year-month-day';
 
   value: Date;
 };
@@ -198,6 +209,8 @@ export const FormattedDateTime = ({
       return <>{LONG_DATE_FORMATER.format(value)}</>;
     case 'chart-date':
       return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+    case 'year-month-day':
+      return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }

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

@@ -8,7 +8,7 @@ import {
   YAxis,
   CartesianGrid,
 } from 'recharts';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -23,6 +23,7 @@ import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import {
   DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
   FormattedDateTime,
+  YEAR_MONTH_DAY_FORMATTER,
 } from '../date/FormattedDateTime';
 
 const LineTemporalChartWrapper = styled.div`
@@ -129,6 +130,12 @@ export type LineChartProps = (
     label: string;
   }[];
   isLoading?: boolean;
+  /**
+   * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+   * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+   * This will affect the format of the tooltip as well
+   */
+  timeFormat?: 'date-time' | 'date';
   yAxisTitle?: string;
   helpText?: string;
 };
@@ -138,6 +145,7 @@ const CustomTooltip = ({
   payload,
   label,
   unitLabel,
+  timeFormat,
 }: {
   active?: boolean;
   payload?: Array<{
@@ -148,6 +156,7 @@ const CustomTooltip = ({
   }>;
   label?: string;
   unitLabel?: string;
+  timeFormat?: 'date-time' | 'date';
 }) => {
   if (!active || !payload || !payload.length || !label) return null;
   // We can't use the default itemSorter method because it's a custom tooltip.
@@ -169,7 +178,11 @@ const CustomTooltip = ({
     <TooltipContainer>
       <TooltipTime>
         <FormattedDateTime
-          format="day-month-abbreviated-hour-minute-second"
+          format={
+            timeFormat === 'date-time'
+              ? 'day-month-abbreviated-hour-minute-second'
+              : 'long-date'
+          }
           value={new Date(label)}
         />
       </TooltipTime>
@@ -205,6 +218,7 @@ export function LineTimeSerieChart({
   duration,
   unitRange,
   isLoading = false,
+  timeFormat = 'date-time',
   yAxisType = 'default',
   yAxisTitle,
   helpText,
@@ -393,12 +407,16 @@ export function LineTimeSerieChart({
   }, [series, getColor]);
 
   // Format time for display the tick in the x axis
-  const formatTime = useMemo(
-    () => (timestamp: number) => {
+  const formatXAxisLabel = useCallback(
+    (timestamp: number) => {
       const date = new Date(timestamp);
-      return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+      return timeFormat === 'date-time'
+        ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
+        : timeFormat === 'date'
+          ? YEAR_MONTH_DAY_FORMATTER.format(date)
+          : '';
     },
-    [],
+    [timeFormat],
   );
 
   return (
@@ -438,7 +456,7 @@ export function LineTimeSerieChart({
             type="number"
             domain={['dataMin', 'dataMax']}
             ticks={xAxisTicks}
-            tickFormatter={formatTime}
+            tickFormatter={formatXAxisLabel}
             tickCount={5}
             tick={{
               fill: theme.textSecondary,
@@ -473,7 +491,11 @@ export function LineTimeSerieChart({
             }}
             tickFormatter={(value) => Math.round(value).toString()}
           />
-          <Tooltip content={<CustomTooltip unitLabel={unitLabel} />} />
+          <Tooltip
+            content={
+              <CustomTooltip unitLabel={unitLabel} timeFormat={timeFormat} />
+            }
+          />
           {/* Add horizontal line at y=0 for symmetrical charts */}
           {yAxisType === 'symmetrical' && (
             <ReferenceLine y={0} stroke={theme.border} />

stories/linetimeseriechart.stories.tsx

@@ -64,6 +64,10 @@ const meta: Meta<typeof LineTimeSerieChart> = {
       options: ['default', 'percentage', 'symmetrical'],
     },
     yAxisTitle: { control: 'text' },
+    timeFormat: {
+      control: 'select',
+      options: ['date-time', 'date'],
+    },
   },
 };
 
@@ -405,6 +409,74 @@ const irregularIntervalData = [
   [1740424900, '46.92'], // +1100 seconds (18.3 minutes) - under 2 intervals
 ];
 
+// Data spanning several months - multi-month dataset
+const longTermPrometheusData: [number, string][] = [
+  // January 2025
+  [1735689600, '42.15'], // Jan 1, 2025
+  [1735776000, '38.92'], // Jan 2, 2025
+  [1735862400, '55.33'], // Jan 3, 2025
+  [1735948800, '67.88'], // Jan 4, 2025
+  [1736035200, '44.21'], // Jan 5, 2025
+  [1736121600, '72.15'], // Jan 6, 2025
+  [1736208000, '39.67'], // Jan 7, 2025
+  [1736294400, '58.44'], // Jan 8, 2025
+  [1736380800, '63.92'], // Jan 9, 2025
+  [1736467200, '41.33'], // Jan 10, 2025
+  [1736553600, '76.88'], // Jan 11, 2025
+  [1736640000, '52.15'], // Jan 12, 2025
+  [1736726400, '48.67'], // Jan 13, 2025
+  [1736812800, '69.33'], // Jan 14, 2025
+  [1736899200, '35.88'], // Jan 15, 2025
+  // February 2025
+  [1738368000, '81.15'], // Feb 1, 2025
+  [1738454400, '47.67'], // Feb 2, 2025
+  [1738540800, '54.33'], // Feb 3, 2025
+  [1738627200, '62.88'], // Feb 4, 2025
+  [1738713600, '38.15'], // Feb 5, 2025
+  [1738800000, '73.67'], // Feb 6, 2025
+  [1738886400, '45.33'], // Feb 7, 2025
+  [1738972800, '59.88'], // Feb 8, 2025
+  [1739059200, '51.15'], // Feb 9, 2025
+  [1739145600, '66.67'], // Feb 10, 2025
+  [1739232000, '43.33'], // Feb 11, 2025
+  [1739318400, '78.88'], // Feb 12, 2025
+  [1739404800, '36.15'], // Feb 13, 2025
+  [1739491200, '64.67'], // Feb 14, 2025
+  [1739577600, '49.33'], // Feb 15, 2025
+  // March 2025
+  [1740787200, '71.88'], // Mar 1, 2025
+  [1740873600, '42.15'], // Mar 2, 2025
+  [1740960000, '57.67'], // Mar 3, 2025
+  [1741046400, '68.33'], // Mar 4, 2025
+  [1741132800, '34.88'], // Mar 5, 2025
+  [1741219200, '75.15'], // Mar 6, 2025
+  [1741305600, '48.67'], // Mar 7, 2025
+  [1741392000, '53.33'], // Mar 8, 2025
+  [1741478400, '61.88'], // Mar 9, 2025
+  [1741564800, '37.15'], // Mar 10, 2025
+  [1741651200, '74.67'], // Mar 11, 2025
+  [1741737600, '44.33'], // Mar 12, 2025
+  [1741824000, '58.88'], // Mar 13, 2025
+  [1741910400, '52.15'], // Mar 14, 2025
+  [1741996800, '67.67'], // Mar 15, 2025
+  // April 2025
+  [1743465600, '41.33'], // Apr 1, 2025
+  [1743552000, '76.88'], // Apr 2, 2025
+  [1743638400, '35.15'], // Apr 3, 2025
+  [1743724800, '63.67'], // Apr 4, 2025
+  [1743811200, '50.33'], // Apr 5, 2025
+  [1743897600, '72.88'], // Apr 6, 2025
+  [1743984000, '39.15'], // Apr 7, 2025
+  [1744070400, '56.67'], // Apr 8, 2025
+  [1744156800, '65.33'], // Apr 9, 2025
+  [1744243200, '33.88'], // Apr 10, 2025
+  [1744329600, '77.15'], // Apr 11, 2025
+  [1744416000, '46.67'], // Apr 12, 2025
+  [1744502400, '54.33'], // Apr 13, 2025
+  [1744588800, '60.88'], // Apr 14, 2025
+  [1744675200, '49.22'], // Apr 15, 2025
+];
+
 export const PercentageChartExample: Story = {
   args: {
     series: [
@@ -425,6 +497,7 @@ export const PercentageChartExample: Story = {
     yAxisTitle: '',
     interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+    xAxisFormat: 'date-time',
   },
 };
 const UNIT_RANGE_BS = [
@@ -537,3 +610,27 @@ export const IrregularIntervalsExample: Story = {
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   },
 };
+
+export const DateFormatExample: Story = {
+  args: {
+    series: [
+      {
+        data: longTermPrometheusData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'Long term data',
+    height: 200,
+    startingTimeStamp: longTermPrometheusData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText: 'This is the help text',
+    interval: 60 * 60 * 24, // 1 day
+    duration:
+      longTermPrometheusData[longTermPrometheusData.length - 1][0] -
+      longTermPrometheusData[0][0],
+    timeFormat: 'date',
+  },
+};