chore(chart bullet): convert to typescript (#11756)

* chore(chart bullet): convert to typescript

* converted 3 examples

* converted 3 examples

* renamed files and functions

Author: Mash707

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

@@ -20,356 +20,65 @@ The examples below are based on the [Victory](https://formidable.com/open-source
 
 ## Examples
 ### Basic
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
-
-<div style={{ height: '150px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{ name: 'Warning', y: 88 }]}
-    constrainToVisibleArea
-    height={150}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    maxDomain={{y: 100}}
-    name="chart1"
-    primarySegmentedMeasureData={[{ name: 'Measure', y: 60 }]}
-    qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
-    width={600}
-  />
-</div>
+```ts file = "ChartBulletBasic.tsx"
 ```
 
 ### Segmented primary measure
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletSegmentedMeasure.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: 88}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    maxDomain={{y: 100}}
-    name="chart2"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 50,
-      top: 50
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Responsive container with bottom aligned legend
 
 This demonstrates a responsive legend which wraps when items are wider than its container.
 
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
-import { getResizeObserver } from '@patternfly/react-core';
+```ts file = "ChartBulletResponsiveLegend.tsx"
 
-class BulletChart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.containerRef = createRef();
-    this.observer = () => {};
-    this.state = {
-      extraHeight: 0,
-      width: 0
-    };
-    this.handleResize = () => {
-      if (this.containerRef.current && this.containerRef.current.clientWidth) {
-        this.setState({ width: this.containerRef.current.clientWidth });
-      }
-    };
-    this.handleLegendAllowWrap = (extraHeight) => {
-      if (extraHeight !== this.state.extraHeight) {
-        this.setState({ extraHeight });
-      }
-    }
-    this.getHeight = (baseHeight) => {
-      const { extraHeight } = this.state;
-      return baseHeight + extraHeight;
-    };
-  }
-
-  componentDidMount() {
-    this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
-    this.handleResize();
-  }
-
-  componentWillUnmount() {
-    this.observer();
-  }
-
-  render() {
-    const { width } = this.state;
-    const height = this.getHeight(200);
-    return (
-      <div ref={this.containerRef} style={{ height: height + "px" }}>
-        <ChartBullet
-          ariaDesc="Storage capacity"
-          ariaTitle="Bullet chart example"
-          comparativeWarningMeasureData={[{name: 'Warning', y: 88}]}
-          comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-          constrainToVisibleArea
-          height={height}
-          labels={({ datum }) => `${datum.name}: ${datum.y}`}
-          legendAllowWrap={this.handleLegendAllowWrap}
-          legendPosition="bottom-left"
-          maxDomain={{y: 100}}
-          name="chart3"
-          padding={{
-            bottom: 50,
-            left: 50,
-            right: 50,
-            top: 100 // Adjusted to accommodate labels
-          }}
-          primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}
-          primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-          qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
-          qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-          subTitle="Measure details"
-          title="Text label"
-          titlePosition="top-left"
-          width={width}
-        />
-      </div>
-    );
-  }
-}
 ```
 
 ### Primary measure dot
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletPrimaryDot.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: 88}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    maxDomain={{y: 100}}
-    name="chart4"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 50,
-      top: 50
-    }}
-    primaryDotMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]}
-    primaryDotMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Error measure and custom axis ticks
 
 This is a green bullet chart with error measure and custom axis ticks with 3 legend items per row.
 
-```js
-import { ChartAxis, ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletErrorCustomTicks.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    axisComponent={<ChartAxis tickValues={[0, 75, 150]} />}
-    comparativeErrorMeasureData={[{name: 'Error', y: 120}]}
-    comparativeErrorMeasureLegendData={[{ name: 'Error' }]}
-    comparativeWarningMeasureData={[{name: 'Warning', y: 80}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    legendItemsPerRow={3}
-    name="chart5"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 50,
-      top: 50
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 75 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 65 }, { name: 'Range', y: 100 }, { name: 'Range', y: 150 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    themeColor={ChartThemeColor.green}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Primary measure outside range
 
 This is a yellow bullet chart with primary measure greater than max range.
 
-```js
-import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletOutsideRange.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: 80}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    height={200}
-    maxDomain={{y: 125}}
-    minDomain={{y: 50}}
-    name="chart6"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 75,
-      top: 50
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: 75 }, { name: 'Measure', y: 135 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 85 }, { name: 'Range', y: 125 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    themeColor={ChartThemeColor.yellow}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Negative primary measure
 
 This bullet chart with negative primary measure is for measures considered to be bad when they are low.
 
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletNegativeMeasure.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: 60}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    maxDomain={{y: 75}}
-    minDomain={{y: -25}}
-    name="chart7"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 50,
-      top: 65
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: -15 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 25, y0: -25 }, { name: 'Range', y: 50 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Reversed with right aligned legend
 
 This reversed bullet chart with right aligned legend is for measures considered to be good when they are low.
 
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletReversed.tsx"
 
-<div style={{ height: '200px', width: '700px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: -88}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    invert
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    legendPosition="right"
-    legendOrientation="vertical"
-    maxDomain={{y: 0}}
-    minDomain={{y: -100}}
-    name="chart8"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 150, // Adjusted to accommodate legend
-      top: 80
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: -60 }, { name: 'Measure', y: -25 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }]}
-    qualitativeRangeData={[{ name: 'Range', y: -50 }, { name: 'Range', y: -75 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    subTitle="Measure details"
-    title="Text label"
-    width={700}
-  />
-</div>
 ```
 
 ### Negative and positive primary measures
 
 This bullet chart with negative and positive primary measures has 4 legend items per row.
 
-```js
-import { ChartBullet } from '@patternfly/react-charts/victory';
+```ts file = "ChartBulletNegativePositiveMeasure.tsx"
 
-<div style={{ height: '200px', width: '600px' }}>
-  <ChartBullet
-    ariaDesc="Storage capacity"
-    ariaTitle="Bullet chart example"
-    comparativeWarningMeasureData={[{name: 'Warning', y: 60}]}
-    comparativeWarningMeasureLegendData={[{ name: 'Warning' }]}
-    constrainToVisibleArea
-    height={200}
-    labels={({ datum }) => `${datum.name}: ${datum.y}`}
-    legendItemsPerRow={4}
-    maxDomain={{y: 75}}
-    minDomain={{y: -25}}
-    name="chart9"
-    padding={{
-      bottom: 50,
-      left: 150, // Adjusted to accommodate labels
-      right: 50,
-      top: 65
-    }}
-    primarySegmentedMeasureData={[{ name: 'Measure', y: -10 }, { name: 'Measure', y: -20 }, { name: 'Measure', y: 10 }, { name: 'Measure', y: 40 }]}
-    primarySegmentedMeasureLegendData={[{ name: 'Measure 1' }, { name: 'Measure 2' }, { name: 'Measure 3' }, { name: 'Measure 4' }]}
-    qualitativeRangeData={[{ name: 'Range', y: 25, y0: -25 }, { name: 'Range', y: 50 }]}
-    qualitativeRangeLegendData={[{ name: 'Range 1' }, { name: 'Range 2' }]}
-    subTitle="Measure details"
-    title="Text label"
-    width={600}
-  />
-</div>
 ```
 
 ### Vertical with segmented primary measure

packages/react-charts/src/victory/components/ChartBullet/examples/ChartBulletBasic.tsx

@@ -0,0 +1,33 @@
+import { ChartBullet } from '@patternfly/react-charts/victory';
+
+interface ChartData {
+  name: string;
+  y: number;
+}
+
+export const ChartBulletBasic: React.FunctionComponent = () => {
+  const comparativeWarningMeasureData: ChartData[] = [{ name: 'Warning', y: 88 }];
+  const primarySegmentedMeasureData: ChartData[] = [{ name: 'Measure', y: 60 }];
+  const qualitativeRangeData: ChartData[] = [
+    { name: 'Range', y: 50 },
+    { name: 'Range', y: 75 }
+  ];
+
+  return (
+    <div style={{ height: '150px', width: '600px' }}>
+      <ChartBullet
+        ariaDesc="Storage capacity"
+        ariaTitle="Bullet chart example"
+        comparativeWarningMeasureData={comparativeWarningMeasureData}
+        constrainToVisibleArea
+        height={150}
+        labels={({ datum }) => `${datum.name}: ${datum.y}`}
+        maxDomain={{ y: 100 }}
+        name="chart1"
+        primarySegmentedMeasureData={primarySegmentedMeasureData}
+        qualitativeRangeData={qualitativeRangeData}
+        width={600}
+      />
+    </div>
+  );
+};