chore(chart box plot) - convert to typescript (#11728)

* chore(chart box plot) - convert to typescript

* added example - Labels with bottom aligned legend

* addded examples - embedded legend and embedded html

* disabled camel case rule

* disabled camel case rule

* disable eslint camelcase

* renamed files and functions

* remove eslint camelcase

Author: Mash707

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

@@ -24,310 +24,32 @@ The examples below are based on the [Victory](https://formidable.com/open-source
 
 ## Examples
 ### Basic with right aligned legend
-```js
-import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file = "ChartBoxPlotRightAlignedLegend.tsx"
 
-<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={[{ name: 'Cats' }]}
-    legendOrientation="vertical"
-    legendPosition="right"
-    height={300}
-    name="chart3"
-    padding={{
-      bottom: 50,
-      left: 50,
-      right: 200, // Adjusted to accommodate legend
-      top: 50
-    }}
-    themeColor={ChartThemeColor.blue}
-    width={750}
-  >
-    <ChartAxis />
-    <ChartAxis dependentAxis showGrid />
-    <ChartBoxPlot
-      data={[
-        { 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] }
-      ]}
-    />
-  </Chart>
-</div>
 ```
 
 ### Labels with bottom aligned legend
 
 This demonstrates how to display labels.
 
-```js
-import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
+```ts file= "ChartBoxPlotLabelsLegend.tsx"
 
-<div style={{ height: '300px', width: '600px' }}>
-  <Chart
-    ariaDesc="Average number of pets"
-    ariaTitle="Bar chart example"
-    domain={{y: [0, 12]}}
-    domainPadding={{ x: [30, 25] }}
-    legendData={[{ name: 'Cats' }]}
-    legendPosition="bottom"
-    height={300}
-    name="chart2"
-    padding={{
-      bottom: 75, // Adjusted to accommodate legend
-      left: 50,
-      right: 50,
-      top: 50
-    }}
-    themeColor={ChartThemeColor.yellow}
-    width={600}
-  >
-  <ChartAxis />
-  <ChartAxis dependentAxis showGrid />
-  <ChartBoxPlot 
-    data={[
-      { 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] }
-    ]}
-    labelOrientation={{
-      min: "right",
-      max: "right",
-    }}
-    maxLabels
-    minLabels
-  />
-  </Chart>
-</div>
 ```
 
 ### Embedded legend
 
 This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
 
-```js
-import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts/victory';
-import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+```ts file = "ChartBoxPlotEmbeddedLegend.tsx"
 
-class EmbeddedLegend extends React.Component {
-  render() {
-    // Note: Container order is important
-    const CursorVoronoiContainer = createContainer("voronoi", "cursor");
-    const legendData = [
-      {
-        childName: 'limit',
-        name: 'Limit',
-        symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
-      },
-      { childName: 'cats', name: 'Cats' },
-      // Force extra space below for line wrapping
-      {
-        childName: 'cats',
-        name: '',
-        symbol: { fill: 'none' }
-      },
-      {
-        childName: 'cats',
-        name: '',
-        symbol: { fill: 'none' }
-      },
-    ];
-    const labelFormatter = (datum) => {
-      // With box plot data, datum.y will also be an array
-      if (datum && (datum._min || datum._median || datum._max || datum._q1 || datum._q3)) {
-        return `Min: ${datum._min}, Max: ${datum._max}\nMedian: ${datum._median}\nQ1: ${datum._q1}, Q3: ${datum._q3}`;
-      }
-      const yVal = Array.isArray(datum.y) ? datum.y[0] : datum.y;
-      return yVal !== null ? yVal : 'no data';
-    }
-    return (
-      <div style={{ height: '350px', width: '600px' }}>
-        <Chart
-          ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
-          ariaTitle="Embedded legend example chart title"
-          containerComponent={
-            <CursorVoronoiContainer
-              cursorDimension="x"
-              labels={({ datum }) => labelFormatter(datum)}
-              labelComponent={<ChartLegendTooltip legendData={legendData} title={(datum) => datum.x} />}
-              mouseFollowTooltips
-              voronoiDimension="x"
-              voronoiPadding={50}
-            />
-          }
-          domain={{y: [0, 13]}}
-          domainPadding={{ x: [30, 25] }}
-          legendData={legendData}
-          legendPosition="bottom"
-          height={350}
-          name="chart5"
-          padding={{
-            bottom: 75, // Adjusted to accommodate legend
-            left: 50,
-            right: 50,
-            top: 50
-          }}
-          themeColor={ChartThemeColor.green}
-          width={600}
-        >
-          <ChartAxis />
-          <ChartAxis dependentAxis showGrid />
-          <ChartThreshold
-            data={[
-              { name: 'Limit', x: '2015', y: 12 },
-              { name: 'Limit', x: '2016', y: 12 },
-              { name: 'Limit', x: '2017', y: 12 },
-              { name: 'Limit', x: '2018', y: 12 }
-            ]}
-            name="limit"
-            style={{
-              data: {
-                stroke: chart_color_orange_300.var
-              }
-            }}
-          />
-          <ChartBoxPlot
-            data={[
-              { name: 'Cats', x: '2015', y: [null] },
-              { 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] }
-            ]}
-            name="cats"
-          />
-        </Chart>
-      </div>
-    );
-  }
-}
 ```
 
 ### Embedded HTML
 
 This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
 
-```js
-import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';
-
-class EmbeddedHtml extends React.Component {
-  constructor(props) {
-    super(props);
-    this.baseStyles = {
-      color: '#f0f0f0',
-      fontFamily: '"Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif',
-      fontSize: '14px'
-    };
-    this.leftColumn = {
-      paddingLeft: '10px',
-      width: '50%'
-    }
-    this.rightColumn = {
-      paddingRight: '20px',
-      textAlign: 'right',
-      width: '50%'
-    }
-  }
-
-  render() {
-    // Note: Container order is important
-    const CursorVoronoiContainer = createContainer("voronoi", "cursor");
-    const legendData = [{ name: 'Cats' }];
-
-    // Custom HTML component to create a legend layout
-    const HtmlLegendContent = ({datum, text, title, x, y, ...rest}) => (
-      <g>
-        <foreignObject height="100%" width="100%" x={x - 30} y={y - 62} >
-          <table>
-            <thead>
-              <tr>
-                <th colSpan={2} style={{...this.baseStyles, ...this.leftColumn, fontWeight: 700}}>{title(datum)}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr style={this.baseStyles}>
-                <td style={this.leftColumn}>Max</td>
-                <td style={this.rightColumn}>{datum._max}</td>
-              </tr>
-              <tr style={this.baseStyles}>
-                <td style={this.leftColumn}>Median</td>
-                <td style={this.rightColumn}>{datum._median}</td>
-              </tr>
-              <tr style={this.baseStyles}>
-                <td style={this.leftColumn}>Min</td>
-                <td style={this.rightColumn}>{datum._min}</td>
-              </tr>
-              <tr style={this.baseStyles}>
-                <td style={this.leftColumn}>Q1</td>
-                <td style={this.rightColumn}>{datum._q1}</td>
-              </tr>
-              <tr style={this.baseStyles}>
-                <td style={this.leftColumn}>Q3</td>
-                <td style={this.rightColumn}>{datum._q3}</td>
-              </tr>
-            </tbody>
-          </table>
-        </foreignObject>
-      </g>
-    );
+```ts file = "ChartBoxPlotEmbeddedHtml.tsx"
 
-    return (
-      <div style={{ height: '300px', width: '600px' }}>
-        <Chart
-          ariaDesc="Average number of pets - possibly more information to summarize the data in the chart."
-          ariaTitle="Embedded html example chart title"
-          containerComponent={
-            <CursorVoronoiContainer
-              cursorDimension="x"
-              labels={({ datum }) => `${datum.y}`}
-              labelComponent={
-                <ChartCursorTooltip
-                  flyoutHeight={145}
-                  flyoutWidth={110}
-                  labelComponent={<HtmlLegendContent title={(datum) => datum.x} />}
-                />
-              }
-              mouseFollowTooltips
-              voronoiDimension="x"
-              voronoiPadding={50}
-            />
-          }
-          domain={{y: [0, 12]}}
-          domainPadding={{ x: [30, 25] }}
-          legendData={legendData}
-          legendPosition="bottom"
-          height={300}
-          name="chart4"
-          padding={{
-            bottom: 75, // Adjusted to accommodate legend
-            left: 50,
-            right: 50,
-            top: 50,
-          }}
-          maxDomain={{y: 9}}
-          themeColor={ChartThemeColor.orange}
-          width={600}
-        >
-          <ChartAxis />
-          <ChartAxis dependentAxis showGrid />
-          <ChartBoxPlot 
-            data={[
-              { 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] }
-            ]}
-          />
-        </Chart>
-      </div>
-    );
-  }
-}
 ```
 
 ## Documentation