chore(resize observer): convert to typescript

packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveBullet.tsx

@@ -0,0 +1,84 @@
+import { ChartBullet } from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+import { useEffect, useRef, useState } from 'react';
+
+interface Data {
+  name?: string;
+  y?: number;
+}
+
+export const ResizeObserverResponsiveBullet: React.FunctionComponent = () => {
+  const containerRef = useRef(null);
+  const observer = useRef(() => {});
+  const [extraHeight, setExtraHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+
+  const handleResize = () => {
+    if (containerRef.current && containerRef.current.clientWidth) {
+      setWidth(containerRef.current.clientWidth);
+    }
+  };
+
+  const handleLegendAllowWrap = (newExtraHeight) => {
+    if (newExtraHeight !== extraHeight) {
+      setExtraHeight(newExtraHeight);
+    }
+  };
+
+  const getHeight = (baseHeight) => baseHeight + extraHeight;
+
+  useEffect(() => {
+    observer.current = getResizeObserver(containerRef.current, handleResize);
+    handleResize();
+
+    return () => {
+      observer.current();
+    };
+  }, []);
+
+  const height = getHeight(200);
+  const comparativeWarningMeasureData: Data[] = [{ name: 'Warning', y: 88 }];
+  const comparativeWarningMeasureLegendData: Data[] = [{ name: 'Warning' }];
+  const primarySegmentedMeasureData: Data[] = [
+    { name: 'Measure', y: 25 },
+    { name: 'Measure', y: 60 }
+  ];
+  const primarySegmentedMeasureLegendData: Data[] = [{ name: 'Measure 1' }, { name: 'Measure 2' }];
+  const qualitativeRangeData: Data[] = [
+    { name: 'Range', y: 50 },
+    { name: 'Range', y: 75 }
+  ];
+  const qualitativeRangeLegendData: Data[] = [{ name: 'Range 1' }, { name: 'Range 2' }];
+
+  return (
+    <div ref={containerRef} style={{ height: height + 'px' }}>
+      <ChartBullet
+        ariaDesc="Storage capacity"
+        ariaTitle="Bullet chart example"
+        comparativeWarningMeasureData={comparativeWarningMeasureData}
+        comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
+        constrainToVisibleArea
+        height={height}
+        labels={({ datum }) => `${datum.name}: ${datum.y}`}
+        legendAllowWrap={handleLegendAllowWrap}
+        legendPosition="bottom-left"
+        maxDomain={{ y: 100 }}
+        name="chart1"
+        padding={{
+          bottom: 50,
+          left: 50,
+          right: 50,
+          top: 100 // Adjusted to accommodate labels
+        }}
+        primarySegmentedMeasureData={primarySegmentedMeasureData}
+        primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
+        qualitativeRangeData={qualitativeRangeData}
+        qualitativeRangeLegendData={qualitativeRangeLegendData}
+        subTitle="Measure details"
+        title="Text label"
+        titlePosition="top-left"
+        width={width}
+      />
+    </div>
+  );
+};

packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveStack.tsx

@@ -0,0 +1,111 @@
+import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+import { useEffect, useRef, useState } from 'react';
+
+interface Data {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const ResizeObserverResponsiveStack: React.FunctionComponent = () => {
+  const containerRef = useRef(null);
+  const observer = useRef(() => {});
+  const [width, setWidth] = useState(0);
+
+  const handleResize = () => {
+    if (containerRef.current && containerRef.current.clientWidth) {
+      setWidth(containerRef.current.clientWidth);
+    }
+  };
+
+  const bars: Data[] = [];
+  for (let i = 1; i < 32; i++) {
+    bars.push({ x: `Aug. ${i}`, y: Math.floor(Math.random() * 6) + 1 });
+  }
+
+  const renderSocketBars = () => {
+    const socketBars = bars.map((tick, index) => ({
+      key: index,
+      x: tick.x,
+      y: tick.y,
+      name: 'Sockets',
+      label: `${tick.x} Sockets: ${tick.y}`
+    }));
+    return <ChartBar data={socketBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
+  };
+
+  const renderCoresBars = () => {
+    const coresBars = bars.map((tick, index) => ({
+      key: index,
+      x: tick.x,
+      y: tick.y,
+      name: 'Cores',
+      label: `${tick.x} Cores: ${tick.y}`
+    }));
+    return <ChartBar data={coresBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
+  };
+
+  const renderNodesBars = () => {
+    const nodesBars = bars.map((tick, index) => ({
+      key: index,
+      x: tick.x,
+      y: tick.y,
+      name: 'Nodes',
+      label: `${tick.x} Nodes: ${tick.y}`
+    }));
+    return <ChartBar data={nodesBars} labelComponent={<ChartTooltip constrainToVisibleArea />} />;
+  };
+
+  const getTickValues = (offset = 2) => {
+    const tickValues: string[] = [];
+    for (let i = 1; i < 32; i++) {
+      if (i % offset === 0) {
+        tickValues.push(`Aug. ${i}`);
+      }
+    }
+    return tickValues;
+  };
+
+  useEffect(() => {
+    observer.current = getResizeObserver(containerRef.current, handleResize);
+    handleResize();
+
+    return () => {
+      observer.current();
+    };
+  }, []);
+
+  const legendData: Data[] = [{ name: 'Sockets' }, { name: 'Cores' }, { name: 'Nodes' }];
+
+  return (
+    <div ref={containerRef}>
+      <div style={{ height: '225px' }}>
+        <Chart
+          ariaDesc="Stack Chart with monthly metric data"
+          ariaTitle="Monthly Stack Chart"
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendPosition="bottom"
+          height={225}
+          name="chart3"
+          padding={{
+            bottom: 75, // Adjusted to accommodate legend
+            left: 50,
+            right: 50,
+            top: 50
+          }}
+          width={width}
+        >
+          <ChartAxis tickValues={getTickValues()} fixLabelOverlap />
+          <ChartAxis dependentAxis showGrid />
+          <ChartStack domainPadding={{ x: [10, 2] }}>
+            {renderSocketBars()}
+            {renderCoresBars()}
+            {renderNodesBars()}
+          </ChartStack>
+        </Chart>
+      </div>
+    </div>
+  );
+};

packages/react-charts/src/victory/components/ResizeObserver/examples/ResizeObserverResponsiveThreshold.tsx

@@ -0,0 +1,147 @@
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartLegend,
+  ChartGroup,
+  ChartThreshold,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+import { useEffect, useRef, useState } from 'react';
+
+interface PetData {
+  name?: string;
+  symbol?: { fill: string; type: string };
+  x?: number;
+  y?: number;
+}
+
+export const ResizeObserverResponsiveThreshold: React.FunctionComponent = () => {
+  const containerRef = useRef(null);
+  const observer = useRef(() => {});
+  const [extraHeight, setExtraHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+
+  const handleResize = () => {
+    if (containerRef.current && containerRef.current.clientWidth) {
+      setWidth(containerRef.current.clientWidth);
+    }
+  };
+
+  const handleLegendAllowWrap = (newExtraHeight) => {
+    if (newExtraHeight !== extraHeight) {
+      setExtraHeight(newExtraHeight);
+    }
+  };
+
+  const getHeight = (baseHeight) => baseHeight + extraHeight;
+
+  const getPadding = () => ({
+    bottom: 100 + extraHeight, // Adjusted to accomodate legend
+    left: 50,
+    right: 50,
+    top: 50
+  });
+
+  useEffect(() => {
+    observer.current = getResizeObserver(containerRef.current, handleResize);
+    handleResize();
+
+    return () => {
+      observer.current();
+    };
+  }, []);
+
+  const height = getHeight(250);
+  const data1: PetData[] = [
+    { name: 'Cats' },
+    {
+      name: 'Cats Threshold',
+      symbol: { fill: chart_color_blue_300.var, type: 'threshold' }
+    },
+    { name: 'Birds' },
+    {
+      name: 'Birds Threshold',
+      symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
+    }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Cats', x: 1, y: 3 },
+    { name: 'Cats', x: 2, y: 4 },
+    { name: 'Cats', x: 3, y: 8 },
+    { name: 'Cats', x: 4, y: 6 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: 1, y: 2 },
+    { name: 'Birds', x: 2, y: 3 },
+    { name: 'Birds', x: 3, y: 4 },
+    { name: 'Birds', x: 4, y: 5 },
+    { name: 'Birds', x: 5, y: 6 }
+  ];
+
+  const data4: PetData[] = [
+    { name: 'Cats Threshold', x: 0, y: 4 },
+    { name: 'Cats Threshold', x: 3, y: 4 },
+    { name: 'Cats Threshold', x: 3, y: 6 },
+    { name: 'Cats Threshold', x: 5, y: 6 }
+  ];
+
+  const data5: PetData[] = [
+    { name: 'Birds Threshold', x: 0, y: 2 },
+    { name: 'Birds Threshold', x: 2, y: 2 },
+    { name: 'Birds Threshold', x: 2, y: 3 },
+    { name: 'Birds Threshold', x: 5, y: 3 }
+  ];
+
+  return (
+    <div ref={containerRef}>
+      <div style={{ height: height + 'px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Area chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          legendAllowWrap={handleLegendAllowWrap}
+          legendPosition="bottom-left"
+          legendComponent={<ChartLegend data={data1} />}
+          height={height}
+          name="chart2"
+          padding={getPadding()}
+          maxDomain={{ y: 9 }}
+          themeColor={ChartThemeColor.multiUnordered}
+          width={width}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartGroup>
+            <ChartArea data={data2} interpolation="monotoneX" />
+            <ChartArea data={data3} interpolation="monotoneX" />
+          </ChartGroup>
+          <ChartThreshold
+            data={data4}
+            style={{
+              data: {
+                stroke: chart_color_blue_300.var
+              }
+            }}
+          />
+          <ChartThreshold
+            data={data5}
+            style={{
+              data: {
+                stroke: chart_color_orange_300.var
+              }
+            }}
+          />
+        </Chart>
+      </div>
+    </div>
+  );
+};