chore(skeletons): convert to typescript part two

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

@@ -0,0 +1,51 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface Data {
+  x: string;
+  y: number;
+}
+
+export const SkeletonsDonutUtilizationThreshold: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const data1: Data[] = [
+    { x: 'Warning at 60%', y: 60 },
+    { x: 'Danger at 90%', y: 90 }
+  ];
+  const data2: Data = { x: 'Storage capacity', y: 45 };
+
+  return (
+    <>
+      <Switch
+        id="donut-utilization-threshold-skeleton-switch"
+        label="Enable skeleton"
+        isChecked={isChecked}
+        onChange={handleChange}
+      />
+      <div style={{ height: '230px', width: '230px' }}>
+        <ChartDonutThreshold
+          ariaDesc="Storage capacity"
+          ariaTitle="Donut utilization chart with static threshold example"
+          constrainToVisibleArea
+          data={data1}
+          labels={({ datum }) => (datum.x ? datum.x : null)}
+          name="chart7"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+        >
+          <ChartDonutUtilization
+            data={data2}
+            labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+            subTitle="of 100 GBps"
+            title="45%"
+          />
+        </ChartDonutThreshold>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,105 @@
+import { Switch } from '@patternfly/react-core';
+import {
+  Chart,
+  ChartVoronoiContainer,
+  ChartGroup,
+  ChartAxis,
+  ChartLine,
+  ChartThemeColor
+} from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  symbol?: { type: string };
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsLineChart: 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', symbol: { type: 'dash' } },
+    { 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: 3 },
+    { name: 'Birds', x: '2016', y: 4 },
+    { name: 'Birds', x: '2017', y: 9 },
+    { name: 'Birds', x: '2018', y: 5 }
+  ];
+
+  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: 7 }
+  ];
+
+  return (
+    <>
+      <Switch id="line-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '250px', width: '600px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Line chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={250}
+          maxDomain={{ y: 10 }}
+          minDomain={{ y: 0 }}
+          name="chart8"
+          padding={{
+            bottom: 50,
+            left: 50,
+            right: 200, // Adjusted to accommodate legend
+            top: 50
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={600}
+        >
+          <ChartAxis tickValues={[2, 3, 4]} />
+          <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />
+          <ChartGroup>
+            <ChartLine data={data1} />
+            <ChartLine
+              data={data2}
+              style={{
+                data: {
+                  strokeDasharray: '3,3'
+                }
+              }}
+            />
+            <ChartLine data={data3} />
+            <ChartLine data={data4} />
+          </ChartGroup>
+        </Chart>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { Switch } from '@patternfly/react-core';
+import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsPieChart: 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 }
+  ];
+  const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];
+
+  return (
+    <>
+      <Switch id="pie-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '230px', width: '350px' }}>
+        <ChartPie
+          ariaDesc="Average number of pets"
+          ariaTitle="Pie chart example"
+          constrainToVisibleArea
+          data={data}
+          height={230}
+          labels={({ datum }) => `${datum.x}: ${datum.y}`}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          name="chart9"
+          padding={{
+            bottom: 20,
+            left: 20,
+            right: 140, // Adjusted to accommodate legend
+            top: 20
+          }}
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={350}
+        />
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { Switch } from '@patternfly/react-core';
+import {
+  Chart,
+  ChartVoronoiContainer,
+  ChartGroup,
+  ChartAxis,
+  ChartScatter,
+  ChartThemeColor
+} from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsScatterChart: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(true);
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const data: PetData[] = [
+    { name: 'Cats', x: '2015', y: 1 },
+    { name: 'Cats', x: '2016', y: 2 },
+    { name: 'Cats', x: '2017', y: 5 },
+    { name: 'Cats', x: '2018', y: 4 }
+  ];
+
+  return (
+    <>
+      <Switch id="scatter-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '275px', width: '450px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Scatter chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          height={275}
+          maxDomain={{ y: 8 }}
+          minDomain={{ y: 0 }}
+          name="chart10"
+          themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue}
+          width={450}
+        >
+          <ChartAxis />
+          <ChartAxis dependentAxis showGrid tickValues={[2, 4, 6]} />
+          <ChartGroup>
+            <ChartScatter data={data} />
+          </ChartGroup>
+        </Chart>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,91 @@
+import { Switch } from '@patternfly/react-core';
+import {
+  Chart,
+  ChartVoronoiContainer,
+  ChartAxis,
+  ChartStack,
+  ChartBar,
+  ChartThemeColor
+} from '@patternfly/react-charts/victory';
+import { useState } from 'react';
+
+interface PetData {
+  name?: string;
+  x?: string;
+  y?: number;
+}
+
+export const SkeletonsStackChart: 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="stack-skeleton-switch" label="Enable skeleton" isChecked={isChecked} onChange={handleChange} />
+      <div style={{ height: '250px', width: '600px' }}>
+        <Chart
+          ariaDesc="Average number of pets"
+          ariaTitle="Stack chart example"
+          containerComponent={
+            <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+          }
+          domainPadding={{ x: [30, 25] }}
+          legendData={legendData}
+          legendOrientation="vertical"
+          legendPosition="right"
+          height={250}
+          name="chart11"
+          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 />
+          <ChartStack>
+            <ChartBar data={data1} />
+            <ChartBar data={data2} />
+            <ChartBar data={data3} />
+            <ChartBar data={data4} />
+          </ChartStack>
+        </Chart>
+      </div>
+    </>
+  );
+};