Skip to content

Commit 57508ec

Browse files
dlabrecqdlabrecq
authored
fix(charts) - update Victory and CodeSandbox examples (#11458)
1 parent 97dd901 commit 57508ec

File tree

8 files changed

+204
-178
lines changed

8 files changed

+204
-178
lines changed

‎packages/react-charts/package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@
3333
"hoist-non-react-statics": "^3.3.2",
3434
"lodash": "^4.17.21",
3535
"tslib": "^2.7.0",
36-
"victory-area": "^37.3.4",
37-
"victory-axis": "^37.3.4",
38-
"victory-bar": "^37.3.4",
39-
"victory-box-plot": "^37.3.4",
40-
"victory-chart": "^37.3.4",
41-
"victory-core": "^37.3.4",
42-
"victory-create-container": "^37.3.4",
43-
"victory-cursor-container": "^37.3.4",
44-
"victory-group": "^37.3.4",
45-
"victory-legend": "^37.3.4",
46-
"victory-line": "^37.3.4",
47-
"victory-pie": "^37.3.4",
48-
"victory-scatter": "^37.3.4",
49-
"victory-stack": "^37.3.4",
50-
"victory-tooltip": "^37.3.4",
51-
"victory-voronoi-container": "^37.3.4",
52-
"victory-zoom-container": "^37.3.4"
36+
"victory-area": "^37.3.6",
37+
"victory-axis": "^37.3.6",
38+
"victory-bar": "^37.3.6",
39+
"victory-box-plot": "^37.3.6",
40+
"victory-chart": "^37.3.6",
41+
"victory-core": "^37.3.6",
42+
"victory-create-container": "^37.3.6",
43+
"victory-cursor-container": "^37.3.6",
44+
"victory-group": "^37.3.6",
45+
"victory-legend": "^37.3.6",
46+
"victory-line": "^37.3.6",
47+
"victory-pie": "^37.3.6",
48+
"victory-scatter": "^37.3.6",
49+
"victory-stack": "^37.3.6",
50+
"victory-tooltip": "^37.3.6",
51+
"victory-voronoi-container": "^37.3.6",
52+
"victory-zoom-container": "^37.3.6"
5353
},
5454
"peerDependencies": {
5555
"react": "^17 || ^18",

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

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

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

7070
```js
7171
import React from 'react';
72-
import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
72+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts';
7373

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

‎packages/react-charts/src/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';
196+
import { ChartAxis, ChartBullet, ChartThemeColor } from '@patternfly/react-charts';
197197

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

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

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

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

‎packages/react-charts/src/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';
147+
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
148148

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

‎packages/react-charts/src/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';
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';
617+
import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';
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';
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/components/Skeletons/examples/skeletons.md‎

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

4343
export const ChartAreaSkeleton: React.FunctionComponent = () => {
4444
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -120,7 +120,7 @@ export const ChartAreaSkeleton: React.FunctionComponent = () => {
120120
```js
121121
import React from 'react';
122122
import { Switch } from '@patternfly/react-core';
123-
import { Chart, ChartBar, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
123+
import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
124124

125125
export const ChartBarSkeleton: React.FunctionComponent = () => {
126126
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -178,7 +178,7 @@ export const ChartBarSkeleton: React.FunctionComponent = () => {
178178
```js
179179
import React from 'react';
180180
import { Switch } from '@patternfly/react-core';
181-
import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts';
181+
import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts';
182182

183183
export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
184184
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -237,7 +237,7 @@ export const ChartBoxPlotSkeleton: React.FunctionComponent = () => {
237237
```js
238238
import React from 'react';
239239
import { Switch } from '@patternfly/react-core';
240-
import { Chart, ChartAxis, ChartBullet, ChartLegend } from '@patternfly/react-charts';
240+
import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts';
241241

242242
export const ChartBulletSkeleton: React.FunctionComponent = () => {
243243
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -292,7 +292,7 @@ export const ChartBulletSkeleton: React.FunctionComponent = () => {
292292
```js
293293
import React from 'react';
294294
import { Switch } from '@patternfly/react-core';
295-
import { Chart, ChartAxis, ChartDonut } from '@patternfly/react-charts';
295+
import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
296296

297297
export const ChartDonutSkeleton: React.FunctionComponent = () => {
298298
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -332,7 +332,7 @@ export const ChartDonutSkeleton: React.FunctionComponent = () => {
332332
```js
333333
import React from 'react';
334334
import { Switch } from '@patternfly/react-core';
335-
import { Chart, ChartAxis, ChartDonutUtilization } from '@patternfly/react-charts';
335+
import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
336336

337337
export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
338338
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -382,7 +382,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
382382
```js
383383
import React from 'react';
384384
import { Switch } from '@patternfly/react-core';
385-
import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
385+
import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts';
386386

387387
export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
388388
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -427,7 +427,7 @@ export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => {
427427
```js
428428
import React from 'react';
429429
import { Switch } from '@patternfly/react-core';
430-
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine } from '@patternfly/react-charts';
430+
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
431431

432432
export const ChartLineSkeleton: React.FunctionComponent = () => {
433433
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -518,7 +518,7 @@ export const ChartLineSkeleton: React.FunctionComponent = () => {
518518
```js
519519
import React from 'react';
520520
import { Switch } from '@patternfly/react-core';
521-
import { Chart, ChartAxis, ChartPie } from '@patternfly/react-charts';
521+
import { Chart, ChartAxis, ChartPie, ChartThemeColor } from '@patternfly/react-charts';
522522

523523
export const ChartPieSkeleton: React.FunctionComponent = () => {
524524
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -567,7 +567,7 @@ export const ChartPieSkeleton: React.FunctionComponent = () => {
567567
```js
568568
import React from 'react';
569569
import { Switch } from '@patternfly/react-core';
570-
import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter } from '@patternfly/react-charts';
570+
import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
571571

572572
export const ChartScatterSkeleton: React.FunctionComponent = () => {
573573
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -625,7 +625,7 @@ export const ChartScatterSkeleton: React.FunctionComponent = () => {
625625
```js
626626
import React from 'react';
627627
import { Switch } from '@patternfly/react-core';
628-
import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar } from '@patternfly/react-charts';
628+
import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
629629

630630
export const ChartStackSkeleton: React.FunctionComponent = () => {
631631
const [isChecked, setIsChecked] = React.useState<boolean>(true);
@@ -682,7 +682,7 @@ export const ChartStackSkeleton: React.FunctionComponent = () => {
682682
```js
683683
import React from 'react';
684684
import { Switch } from '@patternfly/react-core';
685-
import { Chart, ChartVoronoiContainer, ChartLegend, ChartAxis, ChartThreshold, ChartGroup, ChartArea } from '@patternfly/react-charts';
685+
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts';
686686
import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
687687

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

‎packages/react-charts/src/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';
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';
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)