chore(charts) - update CodeSandbox examples

patternfly · Jan 22, 2025 · f06e14c · f06e14c
1 parent e2d1b95
commit f06e14c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -27,7 +27,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, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '300px', width: '750px' }}>
   <Chart
@@ -69,7 +69,7 @@ This demonstrates how to display labels.
 
 ```js
 import React from 'react';
-import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '300px', width: '600px' }}>
   <Chart

diff --git a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md
@@ -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, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -233,7 +233,7 @@ This is a gold bullet chart with primary measure greater than max range.
 
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts';
+import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '200px', width: '600px' }}>
   <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, ChartThemeColor } from '@patternfly/react-charts';
 
 <div style={{ height: '500px', width: '500px' }}>
   <ChartBullet

diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md
@@ -144,7 +144,7 @@ This demonstrates how to apply theme colors for unordered charts like area, line
 
 ```js
 import React from 'react';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 <div style={{ height: '200px', width: '800px' }}>
   <Chart

diff --git a/packages/react-charts/src/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/components/Skeletons/examples/skeletons.md
@@ -38,7 +38,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 export const ChartAreaSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -120,7 +120,7 @@ export const ChartAreaSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartBar, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 export const ChartBarSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -178,7 +178,7 @@ export const ChartBarSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -237,7 +237,7 @@ export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartBullet, ChartLegend } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartBulletSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -292,7 +292,7 @@ export const ChartBulletSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartDonut } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartDonutSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -332,7 +332,7 @@ export const ChartDonutSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartDonutUtilization } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -382,7 +382,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -427,7 +427,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 export const ChartLineSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -518,7 +518,7 @@ export const ChartLineSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartAxis, ChartPie } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartPie, ChartThemeColor } from '@patternfly/react-charts';
 
 export const ChartPieSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -567,7 +567,7 @@ export const ChartPieSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 export const ChartScatterSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -625,7 +625,7 @@ export const ChartScatterSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 export const ChartStackSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -682,7 +682,7 @@ export const ChartStackSkeleton: React.FunctionComponent = () => {
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
-import { Chart, ChartVoronoiContainer, ChartLegend, ChartAxis, ChartThreshold, ChartGroup, ChartArea } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts';
 import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
 
 export const ChartThresholdSkeleton: React.FunctionComponent = () => {