chore(patterns): convert to typescript part two

packages/react-charts/src/victory/components/Patterns/examples/PatternsAll.tsx

@@ -0,0 +1,101 @@
+import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
+import { getResizeObserver } from '@patternfly/react-core';
+import { useEffect, useRef, useState } from 'react';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsAll: 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(260);
+
+  const data: PetData[] = [
+    { x: 'Cats', y: 6 },
+    { x: 'Dogs', y: 6 },
+    { x: 'Birds', y: 6 },
+    { x: 'Fish', y: 6 },
+    { x: 'Rabbits', y: 6 },
+    { x: 'Squirels', y: 6 },
+    { x: 'Chipmunks', y: 6 },
+    { x: 'Bats', y: 6 },
+    { x: 'Ducks', y: 6 },
+    { x: 'Geese', y: 6 },
+    { x: 'Bobcats', y: 6 },
+    { x: 'Foxes', y: 6 },
+    { x: 'Coyotes', y: 6 },
+    { x: 'Deer', y: 6 },
+    { x: 'Bears', y: 10 }
+  ];
+
+  const legendData: PetData[] = [
+    { name: 'Cats: 6' },
+    { name: 'Dogs: 6' },
+    { name: 'Birds: 6' },
+    { name: 'Fish: 6' },
+    { name: 'Rabbits: 6' },
+    { name: 'Squirels: 6' },
+    { name: 'Chipmunks: 6' },
+    { name: 'Bats: 6' },
+    { name: 'Ducks: 6' },
+    { name: 'Geese: 6' },
+    { name: 'Bobcat: 6' },
+    { name: 'Foxes: 6' },
+    { name: 'Coyotes: 6' },
+    { name: 'Deer: 6' },
+    { name: 'Bears: 6' }
+  ];
+
+  return (
+    <div ref={containerRef} style={{ height: height + 'px' }}>
+      <ChartPie
+        ariaDesc="Average number of pets"
+        ariaTitle="Pie chart example"
+        constrainToVisibleArea
+        data={data}
+        hasPatterns
+        height={height}
+        labels={({ datum }) => `${datum.x}: ${datum.y}`}
+        legendData={legendData}
+        legendAllowWrap={handleLegendAllowWrap}
+        legendPosition="bottom"
+        name="chart12"
+        padding={{
+          bottom: getHeight(50), // This must be adjusted to maintain the aspec ratio
+          left: 20,
+          right: 20,
+          top: 20
+        }}
+        themeColor={ChartThemeColor.multiOrdered}
+        width={width}
+      />
+    </div>
+  );
+};

packages/react-charts/src/victory/components/Patterns/examples/PatternsCustomColorScale.tsx

@@ -0,0 +1,44 @@
+import { ChartPie } from '@patternfly/react-charts/victory';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsCustomColorScale: React.FunctionComponent = () => {
+  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 (
+    <div style={{ height: '230px', width: '350px' }}>
+      <ChartPie
+        ariaDesc="Average number of pets"
+        ariaTitle="Pie chart example"
+        colorScale={[chart_color_blue_300.var, chart_color_yellow_300.var, chart_color_green_300.var]}
+        constrainToVisibleArea
+        data={data}
+        hasPatterns={[true, true, false]}
+        height={230}
+        labels={({ datum }) => `${datum.x}: ${datum.y}`}
+        legendData={legendData}
+        legendOrientation="vertical"
+        legendPosition="right"
+        name="chart10"
+        padding={{
+          bottom: 20,
+          left: 20,
+          right: 140, // Adjusted to accommodate legend
+          top: 20
+        }}
+        width={350}
+      />
+    </div>
+  );
+};

packages/react-charts/src/victory/components/Patterns/examples/PatternsCustomDefs.tsx

@@ -0,0 +1,75 @@
+import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
+import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
+import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsCustomDefs: React.FunctionComponent = () => {
+  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 (
+    <div style={{ height: '230px', width: '350px' }}>
+      <svg aria-hidden height="0" width="0" style={{ display: 'block' }}>
+        <defs>
+          <pattern
+            id="pattern1"
+            patternUnits="userSpaceOnUse"
+            patternContentUnits="userSpaceOnUse"
+            width="10"
+            height="10"
+            x="0"
+            y="0"
+          >
+            <path d="M 0 0 L 5 10 L 10 0" stroke={chart_color_blue_300.value} strokeWidth="2" fill="none"></path>
+          </pattern>
+          <pattern
+            id="pattern2"
+            patternUnits="userSpaceOnUse"
+            patternContentUnits="userSpaceOnUse"
+            width="10"
+            height="10"
+            x="0"
+            y="0"
+          >
+            <path
+              d="M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7"
+              stroke={chart_color_green_300.value}
+              strokeWidth="2"
+              fill="none"
+            ></path>
+          </pattern>
+        </defs>
+      </svg>
+      <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="chart11"
+        padding={{
+          bottom: 20,
+          left: 20,
+          right: 140, // Adjusted to accommodate legend
+          top: 20
+        }}
+        patternScale={['url("#pattern1")', 'url("#pattern2")', null]}
+        themeColor={ChartThemeColor.multiUnordered}
+        width={350}
+      />
+    </div>
+  );
+};

packages/react-charts/src/victory/components/Patterns/examples/PatternsCustomVisibility.tsx

@@ -0,0 +1,50 @@
+import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
+
+interface PetData {
+  x?: string;
+  y?: number;
+  name?: string;
+}
+
+export const PatternsCustomVisibility: React.FunctionComponent = () => {
+  const data: PetData[] = [
+    { x: 'Cats', y: 15 },
+    { x: 'Dogs', y: 15 },
+    { x: 'Birds', y: 15 },
+    { x: 'Fish', y: 25 },
+    { x: 'Rabbits', y: 30 }
+  ];
+  const legendData: PetData[] = [
+    { name: 'Cats: 15' },
+    { name: 'Dogs: 15' },
+    { name: 'Birds: 15' },
+    { name: 'Fish: 25' },
+    { name: 'Rabbits: 30' }
+  ];
+
+  return (
+    <div style={{ height: '230px', width: '350px' }}>
+      <ChartPie
+        ariaDesc="Average number of pets"
+        ariaTitle="Pie chart example"
+        constrainToVisibleArea
+        data={data}
+        hasPatterns={[true, true, false, false, false]}
+        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={ChartThemeColor.multiUnordered}
+        width={350}
+      />
+    </div>
+  );
+};