converted example - teal with bottom aligned legend and axis label

Author: Mash707

packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md

@@ -31,86 +31,8 @@ The examples below are based on the [Victory](https://formidable.com/open-source
 
 This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor.
 
-```js
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts/victory';
-// import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
+```ts file = "ChartAreaTealBottomAlignedLegend.tsx"
 
-class BottomAlignedLegend extends React.Component {
-  render() {
-    // Note: Container order is important
-    const CursorVoronoiContainer = createContainer("voronoi", "cursor");
-    const legendData = [{ childName: 'cats', name: 'Cats' }, { childName: 'dogs', name: 'Dogs' }, { childName: 'birds', name: 'Birds' }];
-
-    return (
-      <div style={{ height: '250px', width: '650px' }}>
-        <Chart
-          ariaDesc="Average number of pets"
-          ariaTitle="Area chart example"
-          containerComponent={
-            <CursorVoronoiContainer
-              cursorDimension="x"
-              labels={({ datum }) => `${datum.y}`}
-              labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x}/>}
-              mouseFollowTooltips
-              voronoiDimension="x"
-              voronoiPadding={50}
-            />
-          }
-          legendData={legendData}
-          legendPosition="bottom"
-          height={250}
-          name="chart2"
-          padding={{
-            bottom: 100, // Adjusted to accommodate legend
-            left: 50,
-            right: 50,
-            top: 50,
-          }}
-          maxDomain={{y: 9}}
-          themeColor={ChartThemeColor.teal}
-          width={650}
-        >
-          <ChartAxis label="Years" fixAxisLabelHeight />
-          <ChartAxis dependentAxis showGrid/>
-          <ChartGroup>
-            <ChartArea
-              data={[
-                { x: '2015', y: 3 },
-                { x: '2016', y: 4 },
-                { x: '2017', y: 8 },
-                { x: '2018', y: 6 }
-              ]}
-              interpolation="monotoneX"
-              name="cats"
-            />
-            <ChartArea
-              data={[
-                { x: '2015', y: 2 },
-                { x: '2016', y: 3 },
-                { x: '2017', y: 4 },
-                { x: '2018', y: 5 },
-                { x: '2019', y: 6 }
-              ]}
-              interpolation="monotoneX"
-              name="dogs"
-            />
-            <ChartArea
-              data={[
-                { x: '2015', y: 1 },
-                { x: '2016', y: 2 },
-                { x: '2017', y: 3 },
-                { x: '2018', y: 2 },
-                { x: '2019', y: 4 }
-              ]}
-              interpolation="monotoneX"
-              name="birds"
-            />
-          </ChartGroup>
-        </Chart>
-      </div>
-    );
-  }
-}
 ```
 
 ### Multi-color (unordered) bottom-left aligned legend and responsive container

packages/react-charts/src/victory/components/ChartArea/examples/ChartAreaRightAlignedLegend.tsx

@@ -31,6 +31,8 @@ export const ChartAreaRightAlignedLegend: React.FunctionComponent = () => {
     { name: 'Birds', x: '2019', y: 4 }
   ];
 
+  const legendData = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];
+
   return (
     <div style={{ height: '200px', width: '800px' }}>
       <Chart
@@ -39,7 +41,7 @@ export const ChartAreaRightAlignedLegend: React.FunctionComponent = () => {
         containerComponent={
           <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
         }
-        legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+        legendData={legendData}
         legendOrientation="vertical"
         legendPosition="right"
         height={200}

packages/react-charts/src/victory/components/ChartArea/examples/ChartAreaTealBottomAlignedLegend.tsx

@@ -0,0 +1,88 @@
+import {
+  Chart,
+  ChartArea,
+  ChartAxis,
+  ChartGroup,
+  ChartThemeColor,
+  ChartLegendTooltip,
+  createContainer
+} from '@patternfly/react-charts/victory';
+// import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
+
+interface PetData {
+  x: string;
+  y: number;
+}
+
+export const BottomAlignedLegend: React.FunctionComponent = () => {
+  // Note: Container order is important
+  const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
+  const legendData = [
+    { childName: 'cats', name: 'Cats' },
+    { childName: 'dogs', name: 'Dogs' },
+    { childName: 'birds', name: 'Birds' }
+  ];
+
+  const catsData: PetData[] = [
+    { x: '2015', y: 3 },
+    { x: '2016', y: 4 },
+    { x: '2017', y: 8 },
+    { x: '2018', y: 6 }
+  ];
+
+  const dogsData: PetData[] = [
+    { x: '2015', y: 2 },
+    { x: '2016', y: 3 },
+    { x: '2017', y: 4 },
+    { x: '2018', y: 5 },
+    { x: '2019', y: 6 }
+  ];
+
+  const birdsData: PetData[] = [
+    { x: '2015', y: 1 },
+    { x: '2016', y: 2 },
+    { x: '2017', y: 3 },
+    { x: '2018', y: 2 },
+    { x: '2019', y: 4 }
+  ];
+
+  return (
+    <div style={{ height: '250px', width: '650px' }}>
+      <Chart
+        ariaDesc="Average number of pets"
+        ariaTitle="Area chart example"
+        containerComponent={
+          <CursorVoronoiContainer
+            cursorDimension="x"
+            labels={({ datum }) => `${datum.y}`}
+            labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x} />}
+            mouseFollowTooltips
+            voronoiDimension="x"
+            voronoiPadding={50}
+          />
+        }
+        legendData={legendData}
+        legendPosition="bottom"
+        height={250}
+        name="chart2"
+        padding={{
+          bottom: 100, // Adjusted to accommodate legend
+          left: 50,
+          right: 50,
+          top: 50
+        }}
+        maxDomain={{ y: 9 }}
+        themeColor={ChartThemeColor.teal}
+        width={650}
+      >
+        <ChartAxis label="Years" fixAxisLabelHeight />
+        <ChartAxis dependentAxis showGrid />
+        <ChartGroup>
+          <ChartArea data={catsData} interpolation="monotoneX" name="cats" />
+          <ChartArea data={dogsData} interpolation="monotoneX" name="dogs" />
+          <ChartArea data={birdsData} interpolation="monotoneX" name="birds" />
+        </ChartGroup>
+      </Chart>
+    </div>
+  );
+};