fix(charts) - update CodeSandbox examples (#11457)

patternfly · Jan 24, 2025 · a7d279f · a7d279f
1 parent 0327b6c
commit a7d279f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 20 deletions.
diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md
@@ -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/victory';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } 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/victory';
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '300px', width: '600px' }}>
   <Chart

diff --git a/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/victory/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/victory';
+import { ChartAxis, ChartBullet, ChartThemeColor } 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/victory';
+import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '600px' }}>
   <ChartBullet
@@ -417,7 +417,7 @@ import { ChartBullet } from '@patternfly/react-charts/victory';
 ### Vertical primary measure outside max range
 ```js
 import React from 'react';
-import { ChartBullet } from '@patternfly/react-charts/victory';
+import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '500px', width: '500px' }}>
   <ChartBullet

diff --git a/packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/victory/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/victory';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '200px', width: '800px' }}>
   <Chart

diff --git a/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md
@@ -32,7 +32,10 @@ import {
   createContainer,
   getCustomTheme
 } from '@patternfly/react-charts/victory';
+
+<!-- Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
 import './chart-tooltip.css';
+-->
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -611,7 +614,7 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip }
 This demonstrates how to adjust the tooltip position and label radius
 ```js
 import React from 'react';
-import { ChartDonut, ChartTooltip } from '@patternfly/react-charts/victory';
+import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
 
 <div style={{ height: '150px', width: '150px' }}>
   <ChartDonut
@@ -807,6 +810,16 @@ This demonstrates an alternate way of applying tooltips using CSS overflow inste
 import React from 'react';
 import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
+// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
+const sheet = (() => {
+  var style = document.createElement("style");
+  document.head.appendChild(style);
+  return style.sheet;
+})();
+
+sheet.insertRule(".ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
+sheet.insertRule(".ws-react-charts-tooltip-overflow svg { overflow: visible; }", sheet.cssRules.length);
+
 <div className="ws-react-charts-tooltip-overflow">
   <div style={{ height: '100px', width: '400px' }}>
     <ChartGroup

diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md
@@ -37,7 +37,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
 ### Area chart
 ```js
 import React from 'react';
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import { Switch } from '@patternfly/react-core';
 
 export const ChartAreaSkeleton: React.FunctionComponent = () => {
@@ -119,7 +119,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/victory';
+import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 export const ChartBarSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -175,8 +175,8 @@ export const ChartBarSkeleton: React.FunctionComponent = () => {
 ### Box plot chart
 ```js
 import React from 'react';
-import { Switch } from '@patternfly/react-charts/victory'
-import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
+import { Switch } from '@patternfly/react-core'
+import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -234,7 +234,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/victory';
+import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartBulletSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -288,7 +288,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/victory';
+import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartDonutSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -327,7 +327,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/victory';
+import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -376,7 +376,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/victory';
+import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -420,7 +420,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/victory';
+import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartLineSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -510,7 +510,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/victory';
+import { Chart, ChartAxis, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartPieSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -558,7 +558,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/victory';
+import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartScatterSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -615,7 +615,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/victory';
+import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar, ChartThemeColor } from '@patternfly/react-charts/victory';
 
 export const ChartStackSkeleton: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -671,7 +671,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/victory';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
 
 export const ChartThresholdSkeleton: React.FunctionComponent = () => {

diff --git a/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md
@@ -12,7 +12,10 @@ hideDarkMode: true
 ---
 
 import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+
+<!-- Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
 import './sparkline.css';
+-->
 
 ## Introduction
 Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)!
@@ -61,6 +64,16 @@ This demonstrates an alternate way of applying tooltips using CSS overflow
 import React from 'react';
 import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
+// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
+const sheet = (() => {
+  var style = document.createElement("style");
+  document.head.appendChild(style);
+  return style.sheet;
+})();
+
+sheet.insertRule(".ws-react-charts-sparkline-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
+sheet.insertRule(".ws-react-charts-sparkline-overflow svg { overflow: visible; }", sheet.cssRules.length);
+
 <div className="ws-react-charts-sparkline-overflow">
   <div style={{ height: '100px', width: '400px' }}>
     <ChartGroup