[DI-29167] - Integration changes for graph data zoom in for CloudPulse metrics (#13317)

* [DI-29167] - Changes for integrating zoom in feature in cloudpulse widget and line graph

* [DI-29167] - Changeset

* [DI-29167] - Typecheck fix

* [DI-29167] - Zoom key modification

* [DI-29167] - Zoom key modification

* [DI-29167] - fallback syntax change

Author: venkymano-akamai

packages/manager/.changeset/pr-13317-upcoming-features-1769409620410.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Changes for providing ability to zoom in inside the `CloudPulse Metrics Graphs` ([#13317](https://github.com/linode/manager/pull/13317))

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -8,6 +8,7 @@ import {
   Area,
   CartesianGrid,
   Legend,
+  ReferenceArea,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -26,6 +27,7 @@ import {
 } from './utils';
 
 import type { TooltipProps } from 'recharts';
+import type { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart';
 import type { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
 
 export interface DataSet {
@@ -47,6 +49,32 @@ export interface AreaProps {
   dataKey: string;
 }
 
+interface ZoomCallbacks {
+  /**
+   * Callback fired on mouse down event on the chart
+   */
+  onMouseDown?: CategoricalChartFunc;
+  /**
+   * Callback fired on mouse move event on the chart
+   */
+  onMouseMove?: CategoricalChartFunc;
+  /**
+   * Callback fired on mouse up event on the chart
+   */
+  onMouseUp?: CategoricalChartFunc;
+}
+
+interface ReferenceAreaProps {
+  /**
+   * Ending x-axis value of the reference area
+   */
+  referenceEnd: number;
+  /**
+   * Starting x-axis value of the reference area
+   */
+  referenceStart: number;
+}
+
 interface XAxisProps {
   /**
    * format for the x-axis timestamp
@@ -118,6 +146,11 @@ export interface AreaChartProps {
    */
   margin?: { bottom: number; left: number; right: number; top: number };
 
+  /**
+   * reference area to be highlighted on the chart
+   */
+  referenceArea?: null | ReferenceAreaProps;
+
   /**
    * control the visibility of dots for each data points
    */
@@ -171,6 +204,11 @@ export interface AreaChartProps {
    * y-axis properties
    */
   yAxisProps?: YAxisProps;
+
+  /**
+   * zoom callbacks (onMouseDown, onMouseMove, onMouseUp)
+   */
+  zoomCallbacks?: ZoomCallbacks;
 }
 
 export const AreaChart = (props: AreaChartProps) => {
@@ -195,9 +233,13 @@ export const AreaChart = (props: AreaChartProps) => {
     xAxisTickCount,
     yAxisProps,
     tooltipCustomValueFormatter,
+    zoomCallbacks,
+    referenceArea,
   } = props;
 
   const theme = useTheme();
+  const { onMouseDown, onMouseMove, onMouseUp } = zoomCallbacks ?? {};
+  const { referenceStart, referenceEnd } = referenceArea ?? {};
 
   const [activeSeries, setActiveSeries] = React.useState<Array<string>>([]);
   const handleLegendClick = (dataKey: string) => {
@@ -280,7 +322,14 @@ export const AreaChart = (props: AreaChartProps) => {
         height={height}
         width={width}
       >
-        <_AreaChart aria-label={ariaLabel} data={data} margin={margin}>
+        <_AreaChart
+          aria-label={ariaLabel}
+          data={data}
+          margin={margin}
+          onMouseDown={onMouseDown}
+          onMouseMove={onMouseMove}
+          onMouseUp={onMouseUp}
+        >
           <CartesianGrid
             stroke={theme.color.grey7}
             strokeDasharray="3 3"
@@ -341,6 +390,13 @@ export const AreaChart = (props: AreaChartProps) => {
               wrapperStyle={legendStyles}
             />
           )}
+          {referenceStart !== undefined && referenceEnd !== undefined && (
+            <ReferenceArea
+              strokeOpacity={0.3}
+              x1={referenceStart}
+              x2={referenceEnd}
+            />
+          )}
           {areas.map(({ color, dataKey }) => (
             <Area
               connectNulls={connectNulls}

packages/manager/src/featureFlags.ts

@@ -99,6 +99,11 @@ interface AclpFlag {
    */
   enabled: boolean;
 
+  /**
+   * This property indicates whether to enable zoom in charts or not
+   */
+  enableZoomInCharts?: boolean;
+
   /**
    * This property indicates for which unit, we need to humanize the values e.g., count, iops etc.,
    */

packages/manager/src/features/CloudPulse/Utils/utils.ts

@@ -694,5 +694,5 @@ export const humanizeLargeData = (value: number) => {
   if (value >= 1000) {
     return +(value / 1000).toFixed(1) + 'K';
   }
-  return `${roundTo(value, 1)}`;
+  return `${roundTo(value, 2)}`;
 };

packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx

@@ -172,6 +172,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
   const [groupBy, setGroupBy] = React.useState<string[] | undefined>(
     props.widget.group_by
   );
+  const [isZoomed, setIsZoomed] = React.useState(false);
   const theme = useTheme();
 
   const {
@@ -401,6 +402,10 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     },
     [savePref, updatePreferences, widget.label]
   );
+
+  const handleZoomStateChange = React.useCallback((zoomed: boolean) => {
+    setIsZoomed(zoomed);
+  }, []);
   const {
     data: metricsList,
     error,
@@ -428,6 +433,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
       label: widget.label,
       timeStamp,
       url: flags.aclpReadEndpoint!,
+      shouldRefresh: !isZoomed,
     }
   );
   let data: DataSet[] = [];
@@ -462,6 +468,19 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
   const hours = end.diff(start, 'hours').hours;
   const tickFormat = hours <= 24 ? 'hh:mm a' : 'LLL dd';
 
+  const zoomResetKey = React.useMemo(() => {
+    const { preset, start, end, timeZone } = props.duration;
+
+    if (preset) {
+      return `preset:${preset}`;
+    }
+    if (!start || !end || !timeZone) {
+      return 'custom:missing-params';
+    }
+
+    return `custom:${start},${end},${timeZone}`;
+  }, [props.duration]);
+
   React.useEffect(() => {
     if (
       filteredSelections.length !== (dimensionFilters?.length ?? 0) &&
@@ -585,12 +604,16 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               metricsApiCallError === jweTokenExpiryError ||
               isJweTokenFetching
             } // keep loading until we are trying to fetch the refresh token
+            onZoomChange={handleZoomStateChange}
             showDot
             showLegend={data.length !== 0}
             timezone={timezone}
             unit={`${currentUnit}${unit.endsWith('ps') ? '/s' : ''}`}
             variant={variant}
             xAxis={{ tickFormat, tickGap: 60 }}
+            zoomResetKey={
+              zoomResetKey // key to reset zoom when duration changes
+            }
           />
         </Paper>
       </Stack>

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.test.tsx

@@ -33,12 +33,14 @@ class ResizeObserver {
   unobserve() {}
 }
 
+const zoomResetKey = 'test-zoom';
+
 describe('CloudPulseLineGraph', () => {
   window.ResizeObserver = ResizeObserver;
 
   it('should render AreaChart when data is provided', () => {
     const { container, getByRole } = renderWithTheme(
-      <CloudPulseLineGraph {...mockData} />
+      <CloudPulseLineGraph {...mockData} zoomResetKey={zoomResetKey} />
     );
     const table = getByRole('table');
 
@@ -53,7 +55,11 @@ describe('CloudPulseLineGraph', () => {
 
   it('should show error state', () => {
     const { getByText } = renderWithTheme(
-      <CloudPulseLineGraph {...mockData} error="Test error" />
+      <CloudPulseLineGraph
+        {...mockData}
+        error="Test error"
+        zoomResetKey={zoomResetKey}
+      />
     );
 
     expect(getByText('Test error')).toBeInTheDocument();
@@ -66,7 +72,7 @@ describe('CloudPulseLineGraph', () => {
     };
 
     const { getByText } = renderWithTheme(
-      <CloudPulseLineGraph {...emptyData} />
+      <CloudPulseLineGraph {...emptyData} zoomResetKey={zoomResetKey} />
     );
 
     expect(getByText('No data to display')).toBeInTheDocument();