Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - v5 Charts - update CodeSandbox examples #11458

Merged
merged 1 commit into from
Jan 24, 2025
Merged

Bug - v5 Charts - update CodeSandbox examples #11458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions packages/react-charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,23 @@
"hoist-non-react-statics": "^3.3.2",
"lodash": "^4.17.21",
"tslib": "^2.7.0",
"victory-area": "^37.3.4",
"victory-axis": "^37.3.4",
"victory-bar": "^37.3.4",
"victory-box-plot": "^37.3.4",
"victory-chart": "^37.3.4",
"victory-core": "^37.3.4",
"victory-create-container": "^37.3.4",
"victory-cursor-container": "^37.3.4",
"victory-group": "^37.3.4",
"victory-legend": "^37.3.4",
"victory-line": "^37.3.4",
"victory-pie": "^37.3.4",
"victory-scatter": "^37.3.4",
"victory-stack": "^37.3.4",
"victory-tooltip": "^37.3.4",
"victory-voronoi-container": "^37.3.4",
"victory-zoom-container": "^37.3.4"
"victory-area": "^37.3.6",
"victory-axis": "^37.3.6",
"victory-bar": "^37.3.6",
"victory-box-plot": "^37.3.6",
"victory-chart": "^37.3.6",
"victory-core": "^37.3.6",
"victory-create-container": "^37.3.6",
"victory-cursor-container": "^37.3.6",
"victory-group": "^37.3.6",
"victory-legend": "^37.3.6",
"victory-line": "^37.3.6",
"victory-pie": "^37.3.6",
"victory-scatter": "^37.3.6",
"victory-stack": "^37.3.6",
"victory-tooltip": "^37.3.6",
"victory-voronoi-container": "^37.3.6",
"victory-zoom-container": "^37.3.6"
},
"peerDependencies": {
"react": "^17 || ^18",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 14 additions & 1 deletion packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ import {
createContainer,
getCustomTheme
} from '@patternfly/react-charts';

<!-- 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)!
Expand Down Expand Up @@ -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';
import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts';

<div style={{ height: '150px', width: '150px' }}>
<ChartDonut
Expand Down Expand Up @@ -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';

// 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
Expand Down
24 changes: 12 additions & 12 deletions packages/react-charts/src/components/Skeletons/examples/skeletons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 = () => {
Expand Down
13 changes: 13 additions & 0 deletions packages/react-charts/src/components/Sparkline/examples/sparkline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ hideDarkMode: true
---

import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';

<!-- 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)!
Expand Down Expand Up @@ -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';

// 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
Expand Down
Loading
Loading