@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/charts/colors-for-charts/-Victory.js

@@ -1,192 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import {
-  Chart,
-  ChartArea,
-  ChartAxis,
-  ChartBar,
-  ChartDonut,
-  ChartGroup,
-  ChartLegend,
-  ChartLine,
-  ChartStack,
-  ChartThemeColor,
-  ChartThreshold,
-  ChartTooltip,
-  ChartVoronoiContainer,
-  getCustomTheme
-} 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';
-import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';
-import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
-import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';
-const pageData = {
-  "id": "Colors for charts",
-  "section": "components",
-  "subsection": "charts",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "-Victory",
-  "tabName": null,
-  "slug": "/components/charts/colors-for-charts/-Victory",
-  "sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md",
-  "relPath": "packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md",
-  "examples": [
-    "Green",
-    "Multi-color (ordered)",
-    "Multi color (unordered)",
-    "Custom color scale",
-    "Custom stroke color",
-    "Custom theme"
-  ]
-};
-pageData.liveContext = {
-  Chart,
-  ChartArea,
-  ChartAxis,
-  ChartBar,
-  ChartDonut,
-  ChartGroup,
-  ChartLegend,
-  ChartLine,
-  ChartStack,
-  ChartThemeColor,
-  ChartThreshold,
-  ChartTooltip,
-  ChartVoronoiContainer,
-  getCustomTheme,
-  chart_color_blue_300,
-  chart_color_green_300,
-  chart_color_teal_300,
-  chart_color_yellow_300,
-  chart_color_purple_300
-};
-pageData.examples = {
-  'Green': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartGroup,\n  ChartLine,\n  ChartThemeColor,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  name?: string;\n  symbol?: { type: string };\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeGreen: React.FunctionComponent = () => {\n  const legendData: PetData[] = [\n    { name: 'Cats' },\n    { name: 'Dogs', symbol: { type: 'dash' } },\n    { name: 'Birds' },\n    { name: 'Mice' }\n  ];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 1 },\n    { name: 'Dogs', x: '2017', y: 7 },\n    { name: 'Dogs', x: '2018', y: 4 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 3 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 5 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 7 }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Line chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendPosition=\"bottom\"\n        height={275}\n        maxDomain={{ y: 10 }}\n        minDomain={{ y: 0 }}\n        name=\"chart1\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.green}\n        width={450}\n      >\n        <ChartAxis tickValues={[2, 3, 4]} />\n        <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />\n        <ChartGroup>\n          <ChartLine data={data1} />\n          <ChartLine\n            data={data2}\n            style={{\n              data: {\n                strokeDasharray: '3,3'\n              }\n            }}\n          />\n          <ChartLine data={data3} />\n          <ChartLine data={data4} />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Green","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates how to apply basic theme colors.`}
-      </p>
-    </Example>,
-  'Multi-color (ordered)': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  x?: string;\n  y?: number;\n  name?: string;\n}\n\nexport const ChartThemeMultiColorOrdered: React.FunctionComponent = () => {\n  const data: PetData[] = [\n    { x: 'Cats', y: 35 },\n    { x: 'Dogs', y: 55 },\n    { x: 'Birds', y: 10 }\n  ];\n\n  const legendData: PetData[] = [{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }];\n\n  return (\n    <div style={{ height: '230px', width: '350px' }}>\n      <ChartDonut\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Donut chart example\"\n        constrainToVisibleArea\n        data={data}\n        labels={({ datum }) => `${datum.x}: ${datum.y}%`}\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        name=\"chart2\"\n        padding={{\n          bottom: 20,\n          left: 20,\n          right: 140, // Adjusted to accommodate legend\n          top: 20\n        }}\n        subTitle=\"Pets\"\n        title=\"100\"\n        themeColor={ChartThemeColor.multiOrdered}\n        width={350}\n      />\n    </div>\n  );\n};\n","title":"Multi-color (ordered)","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates how to apply theme colors for ordered charts like bar, donut, pie, and stack.`}
-      </p>
-    </Example>,
-  'Multi color (unordered)': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartArea,\n  ChartAxis,\n  ChartGroup,\n  ChartThemeColor,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\n\ninterface PetData {\n  x?: string;\n  y?: number;\n  name?: string;\n}\n\nexport const ChartThemeMultiColorUnordered: React.FunctionComponent = () => {\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 3 },\n    { name: 'Cats', x: '2016', y: 4 },\n    { name: 'Cats', x: '2017', y: 8 },\n    { name: 'Cats', x: '2018', y: 6 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 3 },\n    { name: 'Dogs', x: '2017', y: 4 },\n    { name: 'Dogs', x: '2018', y: 5 },\n    { name: 'Dogs', x: '2019', y: 6 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 1 },\n    { name: 'Birds', x: '2016', y: 2 },\n    { name: 'Birds', x: '2017', y: 3 },\n    { name: 'Birds', x: '2018', y: 2 },\n    { name: 'Birds', x: '2019', y: 4 }\n  ];\n\n  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }];\n\n  return (\n    <div style={{ height: '200px', width: '800px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Area chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        height={200}\n        maxDomain={{ y: 9 }}\n        name=\"chart3\"\n        padding={{\n          bottom: 50,\n          left: 50,\n          right: 200, // Adjusted to accommodate legend\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiUnordered}\n        width={800}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartGroup>\n          <ChartArea data={data1} interpolation=\"monotoneX\" />\n          <ChartArea data={data2} interpolation=\"monotoneX\" />\n          <ChartArea data={data3} interpolation=\"monotoneX\" />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Multi color (unordered)","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates how to apply theme colors for unordered charts like area, line, and sparkline.`}
-      </p>
-    </Example>,
-  'Custom color scale': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartBar,\n  ChartLegend,\n  ChartStack,\n  ChartThemeColor,\n  ChartTooltip\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';\nimport chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_color_purple_300';\n\ninterface PetData {\n  name?: string;\n  symbol?: { fill: string };\n  x?: string;\n  y?: number;\n  label?: string;\n}\n\nexport const ChartThemeCustomColorScale: React.FunctionComponent = () => {\n  const data1: PetData[] = [\n    {\n      name: 'Cats',\n      symbol: { fill: chart_color_blue_300.var }\n    },\n    {\n      name: 'Dogs',\n      symbol: { fill: chart_color_yellow_300.var }\n    },\n    {\n      name: 'Birds',\n      symbol: { fill: chart_color_green_300.var }\n    },\n    {\n      name: 'Mice',\n      symbol: { fill: chart_color_purple_300.var }\n    }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1, label: 'Cats: 1' },\n    { name: 'Cats', x: '2016', y: 2, label: 'Cats: 2' },\n    { name: 'Cats', x: '2017', y: 5, label: 'Cats: 5' },\n    { name: 'Cats', x: '2018', y: 3, label: 'Cats: 3' }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2, label: 'Dogs: 2' },\n    { name: 'Dogs', x: '2016', y: 1, label: 'Dogs: 1' },\n    { name: 'Dogs', x: '2017', y: 7, label: 'Dogs: 7' },\n    { name: 'Dogs', x: '2018', y: 4, label: 'Dogs: 4' }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Birds', x: '2015', y: 4, label: 'Birds: 4' },\n    { name: 'Birds', x: '2016', y: 4, label: 'Birds: 4' },\n    { name: 'Birds', x: '2017', y: 9, label: 'Birds: 9' },\n    { name: 'Birds', x: '2018', y: 7, label: 'Birds: 7' }\n  ];\n\n  const data5: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3, label: 'Mice: 3' },\n    { name: 'Mice', x: '2016', y: 3, label: 'Mice: 3' },\n    { name: 'Mice', x: '2017', y: 8, label: 'Mice: 8' },\n    { name: 'Mice', x: '2018', y: 5, label: 'Mice: 5' }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Stack chart example\"\n        domainPadding={{ x: [30, 25] }}\n        legendComponent={<ChartLegend data={data1} />}\n        legendPosition=\"bottom-left\"\n        height={275}\n        name=\"chart4\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiOrdered}\n        width={450}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartStack\n          horizontal\n          colorScale={[\n            chart_color_blue_300.var,\n            chart_color_yellow_300.var,\n            chart_color_green_300.var,\n            chart_color_purple_300.var\n          ]}\n        >\n          <ChartBar data={data2} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data3} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data4} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n          <ChartBar data={data5} labelComponent={<ChartTooltip constrainToVisibleArea />} />\n        </ChartStack>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom color scale","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates an alternate way of applying a custom color scale and fill colors to individual charts.`}
-      </p>
-    </Example>,
-  'Custom stroke color': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartAxis,\n  ChartGroup,\n  ChartLine,\n  ChartThemeColor,\n  ChartThreshold,\n  ChartVoronoiContainer\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\n\ninterface PetData {\n  name?: string;\n  symbol?: { fill: string; type: string };\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeCustomStrokeColor: React.FunctionComponent = () => {\n  const legendData: PetData[] = [\n    { name: 'Cats' },\n    { name: 'Birds' },\n    { name: 'Mice' },\n    { name: 'Cats Threshold', symbol: { fill: chart_color_blue_300.var, type: 'threshold' } }\n  ];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Birds', x: '2015', y: 3 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 5 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 7 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Cats Threshold', x: '2015', y: 5 },\n    { name: 'Cats Threshold', x: '2016', y: 5 },\n    { name: 'Cats Threshold', x: '2016', y: 6 },\n    { name: 'Cats Threshold', x: '2017', y: 6 },\n    { name: 'Cats Threshold', x: '2018', y: 6 }\n  ];\n\n  return (\n    <div style={{ height: '275px', width: '450px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Line chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        legendData={legendData}\n        legendPosition=\"bottom\"\n        height={275}\n        maxDomain={{ y: 10 }}\n        minDomain={{ y: 0 }}\n        name=\"chart5\"\n        padding={{\n          bottom: 75, // Adjusted to accommodate legend\n          left: 50,\n          right: 50,\n          top: 50\n        }}\n        themeColor={ChartThemeColor.multiUnordered}\n        width={450}\n      >\n        <ChartAxis tickValues={[2, 3, 4]} />\n        <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} />\n        <ChartGroup>\n          <ChartLine data={data1} />\n          <ChartLine data={data2} />\n          <ChartLine data={data3} />\n          <ChartThreshold\n            data={data4}\n            style={{\n              data: {\n                stroke: chart_color_blue_300.var\n              }\n            }}\n          />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom stroke color","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates an alternate way of applying custom stroke and fill colors to a threshold chart.`}
-      </p>
-    </Example>,
-  'Custom theme': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  Chart,\n  ChartBar,\n  ChartAxis,\n  ChartGroup,\n  ChartThemeColor,\n  ChartVoronoiContainer,\n  getCustomTheme\n} from '@patternfly/react-charts/victory';\nimport chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';\nimport chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300';\nimport chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300';\nimport chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';\n\ninterface PetData {\n  name?: string;\n  x?: string;\n  y?: number;\n}\n\nexport const ChartThemeCustomTheme: React.FunctionComponent = () => {\n  const colorScale = [\n    chart_color_blue_300.var,\n    chart_color_green_300.var,\n    chart_color_teal_300.var,\n    chart_color_yellow_300.var\n  ];\n\n  const layoutProps = {\n    padding: {\n      bottom: 50,\n      left: 50,\n      right: 200, // Adjusted to accommodate legend\n      top: 50\n    }\n  };\n\n  // Victory theme properties only\n  const themeProps = {\n    bar: {\n      colorScale,\n      ...layoutProps\n    },\n    chart: {\n      colorScale,\n      ...layoutProps\n    },\n    group: {\n      colorScale,\n      ...layoutProps\n    },\n    legend: {\n      colorScale\n    }\n  };\n\n  // Applies theme color and variant to base theme\n  const myCustomTheme = getCustomTheme(ChartThemeColor.default, themeProps);\n\n  const legendData: PetData[] = [{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }];\n\n  const data1: PetData[] = [\n    { name: 'Cats', x: '2015', y: 1 },\n    { name: 'Cats', x: '2016', y: 2 },\n    { name: 'Cats', x: '2017', y: 5 },\n    { name: 'Cats', x: '2018', y: 3 }\n  ];\n\n  const data2: PetData[] = [\n    { name: 'Dogs', x: '2015', y: 2 },\n    { name: 'Dogs', x: '2016', y: 1 },\n    { name: 'Dogs', x: '2017', y: 7 },\n    { name: 'Dogs', x: '2018', y: 4 }\n  ];\n\n  const data3: PetData[] = [\n    { name: 'Birds', x: '2015', y: 4 },\n    { name: 'Birds', x: '2016', y: 4 },\n    { name: 'Birds', x: '2017', y: 9 },\n    { name: 'Birds', x: '2018', y: 7 }\n  ];\n\n  const data4: PetData[] = [\n    { name: 'Mice', x: '2015', y: 3 },\n    { name: 'Mice', x: '2016', y: 3 },\n    { name: 'Mice', x: '2017', y: 8 },\n    { name: 'Mice', x: '2018', y: 5 }\n  ];\n\n  return (\n    <div style={{ height: '250px', width: '600px' }}>\n      <Chart\n        ariaDesc=\"Average number of pets\"\n        ariaTitle=\"Bar chart example\"\n        containerComponent={\n          <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />\n        }\n        domain={{ y: [0, 9] }}\n        domainPadding={{ x: [30, 25] }}\n        legendData={legendData}\n        legendOrientation=\"vertical\"\n        legendPosition=\"right\"\n        height={250}\n        name=\"chart6\"\n        theme={myCustomTheme}\n        width={600}\n      >\n        <ChartAxis />\n        <ChartAxis dependentAxis showGrid />\n        <ChartGroup offset={11}>\n          <ChartBar data={data1} />\n          <ChartBar data={data2} />\n          <ChartBar data={data3} />\n          <ChartBar data={data4} />\n        </ChartGroup>\n      </Chart>\n    </div>\n  );\n};\n","title":"Custom theme","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`This demonstrates custom theme properties, which may be applied across multiple charts.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"introduction","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Introduction`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Note: PatternFly React charts live in its own package at `}
-      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-charts","className":""}}>
-        {`@patternfly/react-charts`}
-      </PatternflyThemeLink>
-      {`!`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The examples below are based on the `}
-      <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/victory-chart/","className":""}}>
-        {`Victory`}
-      </PatternflyThemeLink>
-      {` chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.`}
-    </p>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Green"])}
-    {React.createElement(pageData.examples["Multi-color (ordered)"])}
-    {React.createElement(pageData.examples["Multi color (unordered)"])}
-    {React.createElement(pageData.examples["Custom color scale"])}
-    {React.createElement(pageData.examples["Custom stroke color"])}
-    {React.createElement(pageData.examples["Custom theme"])}
-    <AutoLinkHeader {...{"id":"documentation","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Documentation`}
-    </AutoLinkHeader>
-    <AutoLinkHeader {...{"id":"tips","headingLevel":"h3","className":"ws-title ws-h3"}}>
-      {`Tips`}
-    </AutoLinkHeader>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`See Victory's `}
-        <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/faq","className":""}}>
-          {`FAQ`}
-        </PatternflyThemeLink>
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`The `}
-        <code {...{"className":"ws-code "}}>
-          {`theme`}
-        </code>
-        {` and `}
-        <code {...{"className":"ws-code "}}>
-          {`themeColor`}
-        </code>
-        {` props should be applied at the most top level component`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`Use `}
-        <code {...{"className":"ws-code "}}>
-          {`ChartGroup`}
-        </code>
-        {` to apply theme color scales and other properties to multiple components`}
-      </li>
-    </ul>
-    <AutoLinkHeader {...{"id":"note","headingLevel":"h3","className":"ws-title ws-h3"}}>
-      {`Note`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`For theme props, see `}
-        <PatternflyThemeLink {...{"to":"https://formidable.com/open-source/victory/docs/victory-theme","className":""}}>
-          {`VictoryTheme`}
-        </PatternflyThemeLink>
-      </li>
-    </ul>
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsChartsColorsForCharts-VictoryDocs';
-Component.pageData = pageData;
-
-export default Component;