chore(skeletons): convert to typescript

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsAreaChart.tsx

@@ -0,0 +1,85 @@
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartGroup,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { Switch } from '@patternfly/react-core';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsAreaChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];
+  const data1: PetData[] = [
+    { name: 'Cats', x: '2015', y: 3 },
+    { name: 'Cats', x: '2016', y: 4 },
+    { name: 'Cats', x: '2017', y: 8 },
+    { name: 'Cats', x: '2018', y: 6 }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Dogs', x: '2015', y: 2 },
+    { name: 'Dogs', x: '2016', y: 3 },
+    { name: 'Dogs', x: '2017', y: 4 },
+    { name: 'Dogs', x: '2018', y: 5 },
+    { name: 'Dogs', x: '2019', y: 6 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: '2015', y: 1 },
+    { name: 'Birds', x: '2016', y: 2 },
+    { name: 'Birds', x: '2017', y: 3 },
+    { name: 'Birds', x: '2018', y: 2 },
+    { name: 'Birds', x: '2019', y: 4 }
+  ];
+
+  return (
+    <>
+      <Switch id="area-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '200px', width: '800px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Area chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={200}
+          maxDomain={{ y: 9 }}
+          name="chart1"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={800}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartGroup>
+            <ChartArea data={data1} interpolation="monotoneX" />
+            <ChartArea data={data2} interpolation="monotoneX" />
+            <ChartArea data={data3} interpolation="monotoneX" />
+          </ChartGroup>
+        </Chart>
+      </div>
+    </>
+  );
+};

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBarChart.tsx

@@ -0,0 +1,92 @@
+import { Switch } from '@patternfly/react-core';
+import {
+  Chart,
+  ChartBar,
+  ChartAxis,
+  ChartGroup,
+  ChartThemeColor,
+  ChartVoronoiContainer
+} from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsBarChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];
+  const data1: PetData[] = [
+    { name: 'Cats', x: '2015', y: 1 },
+    { name: 'Cats', x: '2016', y: 2 },
+    { name: 'Cats', x: '2017', y: 5 },
+    { name: 'Cats', x: '2018', y: 3 }
+  ];
+
+  const data2: PetData[] = [
+    { name: 'Dogs', x: '2015', y: 2 },
+    { name: 'Dogs', x: '2016', y: 1 },
+    { name: 'Dogs', x: '2017', y: 7 },
+    { name: 'Dogs', x: '2018', y: 4 }
+  ];
+
+  const data3: PetData[] = [
+    { name: 'Birds', x: '2015', y: 4 },
+    { name: 'Birds', x: '2016', y: 4 },
+    { name: 'Birds', x: '2017', y: 9 },
+    { name: 'Birds', x: '2018', y: 7 }
+  ];
+
+  const data4: PetData[] = [
+    { name: 'Mice', x: '2015', y: 3 },
+    { name: 'Mice', x: '2016', y: 3 },
+    { name: 'Mice', x: '2017', y: 8 },
+    { name: 'Mice', x: '2018', y: 5 }
+  ];
+
+  return (
+    <>
+      <Switch id="bar-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '250px', width: '600px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Bar chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          domain={{ y: [0, 9] }}
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={250}
+          name="chart2"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={600}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartGroup offset={11}>
+            <ChartBar data={data1} />
+            <ChartBar data={data2} />
+            <ChartBar data={data3} />
+            <ChartBar data={data4} />
+          </ChartGroup>
+        </Chart>
+      </div>
+    </>
+  );
+};

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBoxPlotChart.tsx

@@ -0,0 +1,56 @@
+import { Switch } from '@patternfly/react-core';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number[];
+}
+
+export const SkeletonsBoxPlotChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: PetData[] = [{ name: 'Cats' }];
+  const data: PetData[] = [
+    { name: 'Cats', x: '2015', y: [1, 2, 3, 5] },
+    { name: 'Cats', x: '2016', y: [3, 2, 8, 10] },
+    { name: 'Cats', x: '2017', y: [2, 8, 6, 5] },
+    { name: 'Cats', x: '2018', y: [1, 3, 2, 9] }
+  ];
+
+  return (
+    <>
+      <Switch id="boxplot-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '300px', width: '750px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Bar chart example"
+          domain={{ y: [0, 12] }}
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={300}
+          name="chart3"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={750}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid />
+          <ChartBoxPlot data={data} />
+        </Chart>
+      </div>
+    </>
+  );
+};

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsBulletChart.tsx

@@ -0,0 +1,63 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface Data {
+  name?: string;
+  y?: number;
+}
+
+export const SkeletonsBulletChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  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' }, { name: 'Measure' }];
+  const qualitativeRangeData: Data[] = [
+    { name: 'Range', y: 50 },
+    { name: 'Range', y: 75 }
+  ];
+  const qualitativeRangeLegendData: Data[] = [{ name: 'Range' }, { name: 'Range' }];
+
+  return (
+    <>
+      <Switch id="bullet-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '200px', width: '600px' }}>
+        <ChartBullet
+          ariaDesc="Storage capacity"
+          ariaTitle="Bullet chart example"
+          comparativeWarningMeasureData={comparativeWarningMeasureData}
+          comparativeWarningMeasureLegendData={comparativeWarningMeasureLegendData}
+          constrainToVisibleArea
+          height={200}
+          labels={({ datum }) => `${datum.name}: ${datum.y}`}
+          legendComponent={<ChartLegend gutter={isChecked ? 50 : undefined} />}
+          maxDomain={{ y: 100 }}
+          name="chart4"
+          padding={{
+            bottom: 50,
+            left: 150, // Adjusted to accommodate labels
+            right: 50,
+            top: 50
+          }}
+          primarySegmentedMeasureData={primarySegmentedMeasureData}
+          primarySegmentedMeasureLegendData={primarySegmentedMeasureLegendData}
+          qualitativeRangeData={qualitativeRangeData}
+          qualitativeRangeLegendData={qualitativeRangeLegendData}
+          subTitle="Details"
+          title="Text label"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={600}
+        />
+      </div>
+    </>
+  );
+};

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutChart.tsx

@@ -0,0 +1,42 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsDonutChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const data: PetData[] = [
+    { x: 'Cats', y: 35 },
+    { x: 'Dogs', y: 55 },
+    { x: 'Birds', y: 10 }
+  ];
+
+  return (
+    <>
+      <Switch id="donut-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '230px', width: '230px' }}>
+        <ChartDonut
+          ariaDesc="Average number of pets"
+          ariaTitle="Donut chart example"
+          constrainToVisibleArea
+          data={data}
+          labels={({ datum }) => `${datum.x}: ${datum.y}%`}
+          name="chart5"
+          subTitle="Pets"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          title="100"
+        />
+      </div>
+    </>
+  );
+};

packages/react-charts/src/victory/components/Skeletons/examples/SkeletonsDonutUtilizationChart.tsx

@@ -0,0 +1,54 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface Data {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsDonutUtilizationChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const legendData: Data[] = [{ name: `Storage capacity: 75%` }, { name: 'Unused' }];
+  const data: Data = { x: 'GBps capacity', y: 35 };
+
+  return (
+    <>
+      <Switch
+        id="donut-utilization-skeleton-switch"
+        label="Enable skeleton"
+        isChecked={isChecked}
+        onChange={handleChange}
+      />
+      <div style={{ height: '230px', width: '435px' }}>
+        <ChartDonutUtilization
+          ariaDesc="Storage capacity"
+          ariaTitle="Donut utilization chart example"
+          constrainToVisibleArea
+          data={data}
+          labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+          legendData={legendData}
+          legendOrientation="vertical"
+          name="chart6"
+          padding={{
+            bottom: 20,
+            left: 20,
+            right: 225, // Adjusted to accommodate legend
+            top: 20
+          }}
+          subTitle="of 100 GBps"
+          title="35%"
+          thresholds={[{ value: 60 }, { value: 90 }]}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={435}
+        />
+      </div>
+    </>
+  );
+};