Skip to content

Commit a7d279f

Browse files
dlabrecqdlabrecq
authored
fix(charts) - update CodeSandbox examples (#11457)
1 parent 0327b6c commit a7d279f

File tree

6 files changed

+46
-20
lines changed

6 files changed

+46
-20
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
2626
### Basic with right aligned legend
2727
```js
2828
import React from 'react';
29-
import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
29+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
3030

3131
<div style={{ height: '300px', width: '750px' }}>
3232
<Chart
@@ -68,7 +68,7 @@ This demonstrates how to display labels.
6868

6969
```js
7070
import React from 'react';
71-
import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
71+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
7272

7373
<div style={{ height: '300px', width: '600px' }}>
7474
<Chart

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ This is a green bullet chart with error measure and custom axis ticks with 3 leg
193193

194194
```js
195195
import React from 'react';
196-
import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
196+
import { ChartAxis, ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
197197

198198
<div style={{ height: '200px', width: '600px' }}>
199199
<ChartBullet
@@ -233,7 +233,7 @@ This is a yellow bullet chart with primary measure greater than max range.
233233

234234
```js
235235
import React from 'react';
236-
import { ChartBullet } from '@patternfly/react-charts/victory';
236+
import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
237237

238238
<div style={{ height: '200px', width: '600px' }}>
239239
<ChartBullet
@@ -417,7 +417,7 @@ import { ChartBullet } from '@patternfly/react-charts/victory';
417417
### Vertical primary measure outside max range
418418
```js
419419
import React from 'react';
420-
import { ChartBullet } from '@patternfly/react-charts/victory';
420+
import { ChartBullet, ChartThemeColor } from '@patternfly/react-charts/victory';
421421

422422
<div style={{ height: '500px', width: '500px' }}>
423423
<ChartBullet

‎packages/react-charts/src/victory/components/ChartTheme/examples/ChartTheme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ This demonstrates how to apply theme colors for unordered charts like area, line
144144

145145
```js
146146
import React from 'react';
147-
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
147+
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
148148

149149
<div style={{ height: '200px', width: '800px' }}>
150150
<Chart

‎packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ import {
3232
createContainer,
3333
getCustomTheme
3434
} from '@patternfly/react-charts/victory';
35+
36+
<!-- Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
3537
import './chart-tooltip.css';
38+
-->
3639

3740
## Introduction
3841
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 }
611614
This demonstrates how to adjust the tooltip position and label radius
612615
```js
613616
import React from 'react';
614-
import { ChartDonut, ChartTooltip } from '@patternfly/react-charts/victory';
617+
import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
615618

616619
<div style={{ height: '150px', width: '150px' }}>
617620
<ChartDonut
@@ -807,6 +810,16 @@ This demonstrates an alternate way of applying tooltips using CSS overflow inste
807810
import React from 'react';
808811
import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
809812

813+
// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
814+
const sheet = (() => {
815+
var style = document.createElement("style");
816+
document.head.appendChild(style);
817+
return style.sheet;
818+
})();
819+
820+
sheet.insertRule(".ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
821+
sheet.insertRule(".ws-react-charts-tooltip-overflow svg { overflow: visible; }", sheet.cssRules.length);
822+
810823
<div className="ws-react-charts-tooltip-overflow">
811824
<div style={{ height: '100px', width: '400px' }}>
812825
<ChartGroup

‎packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s
3737
### Area chart
3838
```js
3939
import React from 'react';
40-
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
40+
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
4141
import { Switch } from '@patternfly/react-core';
4242

4343
export const ChartAreaSkeleton: React.FunctionComponent = () => {
@@ -119,7 +119,7 @@ export const ChartAreaSkeleton: React.FunctionComponent = () => {
119119
```js
120120
import React from 'react';
121121
import { Switch } from '@patternfly/react-core';
122-
import { Chart, ChartBar, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
122+
import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
123123

124124
export const ChartBarSkeleton: React.FunctionComponent = () => {
125125
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -175,8 +175,8 @@ export const ChartBarSkeleton: React.FunctionComponent = () => {
175175
### Box plot chart
176176
```js
177177
import React from 'react';
178-
import { Switch } from '@patternfly/react-charts/victory'
179-
import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
178+
import { Switch } from '@patternfly/react-core'
179+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts/victory';
180180

181181
export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
182182
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -234,7 +234,7 @@ export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
234234
```js
235235
import React from 'react';
236236
import { Switch } from '@patternfly/react-core';
237-
import { Chart, ChartAxis, ChartBullet, ChartLegend } from '@patternfly/react-charts/victory';
237+
import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts/victory';
238238

239239
export const ChartBulletSkeleton: React.FunctionComponent = () => {
240240
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -288,7 +288,7 @@ export const ChartBulletSkeleton: React.FunctionComponent = () => {
288288
```js
289289
import React from 'react';
290290
import { Switch } from '@patternfly/react-core';
291-
import { Chart, ChartAxis, ChartDonut } from '@patternfly/react-charts/victory';
291+
import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
292292

293293
export const ChartDonutSkeleton: React.FunctionComponent = () => {
294294
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -327,7 +327,7 @@ export const ChartDonutSkeleton: React.FunctionComponent = () => {
327327
```js
328328
import React from 'react';
329329
import { Switch } from '@patternfly/react-core';
330-
import { Chart, ChartAxis, ChartDonutUtilization } from '@patternfly/react-charts/victory';
330+
import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
331331

332332
export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
333333
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -376,7 +376,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
376376
```js
377377
import React from 'react';
378378
import { Switch } from '@patternfly/react-core';
379-
import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
379+
import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
380380

381381
export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
382382
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -420,7 +420,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
420420
```js
421421
import React from 'react';
422422
import { Switch } from '@patternfly/react-core';
423-
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine } from '@patternfly/react-charts/victory';
423+
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine, ChartThemeColor } from '@patternfly/react-charts/victory';
424424

425425
export const ChartLineSkeleton: React.FunctionComponent = () => {
426426
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -510,7 +510,7 @@ export const ChartLineSkeleton: React.FunctionComponent = () => {
510510
```js
511511
import React from 'react';
512512
import { Switch } from '@patternfly/react-core';
513-
import { Chart, ChartAxis, ChartPie } from '@patternfly/react-charts/victory';
513+
import { Chart, ChartAxis, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory';
514514

515515
export const ChartPieSkeleton: React.FunctionComponent = () => {
516516
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -558,7 +558,7 @@ export const ChartPieSkeleton: React.FunctionComponent = () => {
558558
```js
559559
import React from 'react';
560560
import { Switch } from '@patternfly/react-core';
561-
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter } from '@patternfly/react-charts/victory';
561+
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter, ChartThemeColor } from '@patternfly/react-charts/victory';
562562

563563
export const ChartScatterSkeleton: React.FunctionComponent = () => {
564564
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -615,7 +615,7 @@ export const ChartScatterSkeleton: React.FunctionComponent = () => {
615615
```js
616616
import React from 'react';
617617
import { Switch } from '@patternfly/react-core';
618-
import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar } from '@patternfly/react-charts/victory';
618+
import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar, ChartThemeColor } from '@patternfly/react-charts/victory';
619619

620620
export const ChartStackSkeleton: React.FunctionComponent = () => {
621621
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -671,7 +671,7 @@ export const ChartStackSkeleton: React.FunctionComponent = () => {
671671
```js
672672
import React from 'react';
673673
import { Switch } from '@patternfly/react-core';
674-
import { Chart, ChartVoronoiContainer, ChartLegend, ChartAxis, ChartThreshold, ChartGroup, ChartArea } from '@patternfly/react-charts/victory';
674+
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
675675
import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
676676

677677
export const ChartThresholdSkeleton: React.FunctionComponent = () => {

‎packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ hideDarkMode: true
1212
---
1313

1414
import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
15+
16+
<!-- Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
1517
import './sparkline.css';
18+
-->
1619

1720
## Introduction
1821
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
6164
import React from 'react';
6265
import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
6366

67+
// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455
68+
const sheet = (() => {
69+
var style = document.createElement("style");
70+
document.head.appendChild(style);
71+
return style.sheet;
72+
})();
73+
74+
sheet.insertRule(".ws-react-charts-sparkline-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
75+
sheet.insertRule(".ws-react-charts-sparkline-overflow svg { overflow: visible; }", sheet.cssRules.length);
76+
6477
<div className="ws-react-charts-sparkline-overflow">
6578
<div style={{ height: '100px', width: '400px' }}>
6679
<ChartGroup

0 commit comments

Comments
 (0)