feat(charts): import charts from @patternfly/react-charts/victory (#1…

…1091)

packages/react-charts/.gitignore

@@ -0,0 +1,4 @@
+/deprecated
+/echarts
+/next
+/victory

packages/react-charts/README.md

@@ -27,7 +27,7 @@ import '@patternfly/react-core/dist/styles/base.css';
 #### Example Component Usage
 
 ```js
-import { Area } from '@patternfly/react-charts';
+import { Area } from '@patternfly/react-charts/victory';
 
 export default <Area />;
 

packages/react-charts/package.json

@@ -5,6 +5,13 @@
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "victory": [
+        "dist/esm/victory/index.d.ts"
+      ]
+    }
+  },
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -33,7 +40,11 @@
     "@patternfly/react-tokens": "workspace:^",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4.17.21",
-    "tslib": "^2.7.0",
+    "tslib": "^2.7.0"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18",
     "victory-area": "^37.1.1",
     "victory-axis": "^37.1.1",
     "victory-bar": "^37.1.1",
@@ -52,13 +63,10 @@
     "victory-voronoi-container": "^37.1.1",
     "victory-zoom-container": "^37.1.1"
   },
-  "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
-  },
   "scripts": {
-    "clean": "rimraf dist",
-    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json"
+    "clean": "rimraf dist echarts victory",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.9",

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

@@ -12,7 +12,7 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 
 ## Introduction
@@ -24,7 +24,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ### Basic with right aligned legend
 ```js
 import React from 'react';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
 
 <div style={{ height: '200px', width: '800px' }}>
@@ -89,7 +89,7 @@ This demonstrates how to combine cursor and voronoi containers to display toolti
 
 ```js
 import React from 'react';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts';
+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
 
 class BottomAlignedLegend extends React.Component {
@@ -173,7 +173,7 @@ class BottomAlignedLegend extends React.Component {
 ### Multi-color (unordered) bottom-left aligned legend and responsive container
 ```js
 import React from 'react';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
 

packages/react-charts/src/components/ChartBar/examples/ChartBar.md → packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md

@@ -5,7 +5,7 @@ propComponents: ['Chart', 'ChartAxis', 'ChartBar', 'ChartGroup', 'ChartLabel', '
 hideDarkMode: true
 ---
 
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import { VictoryZoomContainer } from 'victory-zoom-container';
 import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
 import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
@@ -23,7 +23,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '250px', width: '600px' }}>
   <Chart
@@ -93,7 +93,7 @@ This demonstrates an alternate way of applying tooltips using data labels.
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
 
 class EmbeddedLegend extends React.Component {
   render() {
@@ -171,7 +171,7 @@ This demonstrates zoom for both the x and y axis.
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts/victory';
 import { VictoryZoomContainer } from 'victory-zoom-container';
 
 <div style={{ height: '400px', width: '450px' }}>
@@ -237,7 +237,7 @@ import { VictoryZoomContainer } from 'victory-zoom-container';
 
 ```js
 import React from 'react';
-import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '250px', width: '600px' }}>
   <Chart
@@ -287,7 +287,7 @@ import {
   ChartLabel,
   ChartTooltip,
   ChartVoronoiContainer
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100';
 import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100';
 import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100';

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

@@ -12,7 +12,7 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory';
 import { VictoryZoomContainer } from 'victory-zoom-container';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 
@@ -26,7 +26,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ### Basic with right aligned legend
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '300px', width: '750px' }}>
   <Chart
@@ -68,7 +68,7 @@ This demonstrates how to display labels.
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '300px', width: '600px' }}>
   <Chart
@@ -115,7 +115,7 @@ This demonstrates how to embed a legend within a tooltip. Combining cursor and v
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts';
+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';
 
 class EmbeddedLegend extends React.Component {
@@ -217,7 +217,7 @@ This demonstrates how to embed HTML within a tooltip. Combining cursor and voron
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory';
 
 class EmbeddedHtml extends React.Component {
   constructor(props) {

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

@@ -9,7 +9,7 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts';
+import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 
 ## Introduction
@@ -21,7 +21,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ### Basic
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '150px', width: '600px' }}>
   <ChartBullet
@@ -43,7 +43,7 @@ import { ChartBullet } from '@patternfly/react-charts';
 ### Segmented primary measure
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -79,7 +79,7 @@ This demonstrates a responsive legend which wraps when items are wider than its
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 import { getResizeObserver } from '@patternfly/react-core';
 
 class BulletChart extends React.Component {
@@ -157,7 +157,7 @@ class BulletChart extends React.Component {
 ### Primary measure dot
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -193,7 +193,7 @@ This is a green bullet chart with error measure and custom axis ticks with 3 leg
 
 ```js
 import React from 'react';
-import { ChartAxis, ChartBullet } from '@patternfly/react-charts';
+import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -233,7 +233,7 @@ This is a yellow bullet chart with primary measure greater than max range.
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -271,7 +271,7 @@ This bullet chart with negative primary measure is for measures considered to be
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -308,7 +308,7 @@ This reversed bullet chart with right aligned legend is for measures considered
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '700px' }}>
   <ChartBullet
@@ -348,7 +348,7 @@ This bullet chart with negative and positive primary measures has 4 legend items
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -383,7 +383,7 @@ import { ChartBullet } from '@patternfly/react-charts';
 ### Vertical with segmented primary measure
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '500px', width: '500px' }}>
   <ChartBullet
@@ -417,7 +417,7 @@ import { ChartBullet } from '@patternfly/react-charts';
 ### Vertical primary measure outside max range
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '500px', width: '500px' }}>
   <ChartBullet
@@ -453,7 +453,7 @@ import { ChartBullet } from '@patternfly/react-charts';
 ### Custom labels
 ```js
 import React from 'react';
-import { ChartAxis, ChartBullet } from '@patternfly/react-charts';
+import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '150px', width: '600px' }}>
   <ChartBullet
@@ -494,7 +494,7 @@ import { ChartAxis, ChartBullet } from '@patternfly/react-charts';
 ### Custom size
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -527,7 +527,7 @@ import { ChartBullet } from '@patternfly/react-charts';
 ### Horizontal group
 ```js
 import React from 'react';
-import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
+import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '500px', width: '600px' }}>
   <ChartContainer 
@@ -625,7 +625,7 @@ import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
 ### Vertical group
 ```js
 import React from 'react';
-import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
+import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '600px', width: '500px' }}>
   <ChartContainer 
@@ -727,7 +727,7 @@ import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
 ### Horizontal group with title
 ```js
 import React from 'react';
-import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
+import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '600px', width: '600px' }}>
   <ChartContainer 
@@ -827,7 +827,7 @@ import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
 ### Vertical group with title
 ```js
 import React from 'react';
-import { ChartBullet, ChartContainer } from '@patternfly/react-charts';
+import { ChartBullet, ChartContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '600px', width: '500px' }}>
   <ChartContainer 

packages/react-charts/src/components/ChartContainer/ChartContainer.tsx → packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx

@@ -18,7 +18,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    */
   children?: React.ReactElement | React.ReactElement[];
   /**
-   * The className prop specifies a className that will be applied to the outer-most div rendered by ChartContainer
+   * The className prop specifies a className that will be applied to the outermost div rendered by ChartContainer
    */
   className?: string;
   /**

packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx → packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx

@@ -33,7 +33,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    */
   children?: React.ReactElement | React.ReactElement[];
   /**
-   * The className prop specifies a className that will be applied to the outer-most div rendered by the container
+   * The className prop specifies a className that will be applied to the outermost div rendered by the container
    */
   className?: string;
   /**