Skip to content

feat(charts): Added resize observer and examples #6528

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

Merged
dlabrecq merged 1 commit into from
Nov 1, 2021
Merged

feat(charts): Added resize observer and examples #6528

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
11 changes: 6 additions & 5 deletions packages/react-charts/src/components/ChartArea/examples/ChartArea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ propComponents: [
hideDarkMode: true
---

import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts';
import '@patternfly/patternfly/patternfly-charts.css';

## Introduction
Expand Down Expand Up @@ -175,30 +175,31 @@ class BottomAlignedLegend extends React.Component {
### Multi-color (unordered) bottom-left aligned legend and responsive container
```js
import React from 'react';
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts';
// import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property

class MultiColorChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
this.handleResize = () => {
if(this.containerRef.current && this.containerRef.current.clientWidth){
if (this.containerRef.current && this.containerRef.current.clientWidth) {
this.setState({ width: this.containerRef.current.clientWidth });
}
};
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down
11 changes: 6 additions & 5 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 @@ -9,7 +9,7 @@ propComponents: [
hideDarkMode: true
---

import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts';
import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts';

## 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 @@ -80,29 +80,30 @@ This demonstrates a responsive legend which wraps when items are wider than its

```js
import React from 'react';
import { ChartBullet } from '@patternfly/react-charts';
import { ChartBullet, getResizeObserver } from '@patternfly/react-charts';

class BulletChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
this.handleResize = () => {
if(this.containerRef.current && this.containerRef.current.clientWidth){
if (this.containerRef.current && this.containerRef.current.clientWidth) {
this.setState({ width: this.containerRef.current.clientWidth });
}
};
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down
19 changes: 11 additions & 8 deletions packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ import {
ChartVoronoiContainer,
createContainer,
getInteractiveLegendEvents,
getInteractiveLegendItemStyles
getInteractiveLegendItemStyles,
getResizeObserver
} from '@patternfly/react-charts';
import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity';
import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500';
Expand Down Expand Up @@ -105,12 +106,13 @@ This demonstrates a responsive legend which wraps when items are wider than its

```js
import React from 'react';
import { ChartBullet } from '@patternfly/react-charts';
import { ChartBullet, getResizeObserver } from '@patternfly/react-charts';

class BulletChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
Expand All @@ -122,12 +124,12 @@ class BulletChart extends React.Component {
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down Expand Up @@ -261,14 +263,16 @@ import {
ChartVoronoiContainer,
createContainer,
getInteractiveLegendEvents,
getInteractiveLegendItemStyles
getInteractiveLegendItemStyles,
getResizeObserver
} from '@patternfly/react-charts';
// import '@patternfly/patternfly/patternfly-charts.css'; // For mixed blend mode

class InteractiveLegendChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
hiddenSeries: new Set(),
width: 0
Expand Down Expand Up @@ -373,12 +377,12 @@ class InteractiveLegendChart extends React.Component {
};

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

// Tips:
Expand Down Expand Up @@ -470,7 +474,6 @@ import {
class InteractivePieLegendChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.state = {
hiddenSeries: new Set(),
width: 0
Expand Down
11 changes: 6 additions & 5 deletions packages/react-charts/src/components/ChartLine/examples/ChartLine.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ propComponents: [
hideDarkMode: true
---

import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts';
import { VictoryZoomContainer } from 'victory-zoom-container';

## Introduction
Expand Down Expand Up @@ -194,30 +194,31 @@ This demonstrates zoom for the x axis only.

```js
import React from 'react';
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor } from '@patternfly/react-charts';
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, getResizeObserver } from '@patternfly/react-charts';
import { VictoryZoomContainer } from 'victory-zoom-container';

class MultiColorChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
this.handleResize = () => {
if(this.containerRef.current && this.containerRef.current.clientWidth){
if (this.containerRef.current && this.containerRef.current.clientWidth) {
this.setState({ width: this.containerRef.current.clientWidth });
}
};
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down
21 changes: 12 additions & 9 deletions packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import {
ChartLine,
ChartScatter,
ChartThemeColor,
ChartVoronoiContainer
ChartVoronoiContainer,
getResizeObserver
} from '@patternfly/react-charts';

## Introduction
Expand All @@ -35,18 +36,19 @@ This demonstrates how to add interactive data points to an area chart.

```js
import React from 'react';
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
import { Chart, ChartArea, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts';
// import '@patternfly/patternfly/patternfly-charts.css'; // For mixed blend mode

class ScatterAreaChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
this.handleResize = () => {
if(this.containerRef.current && this.containerRef.current.clientWidth){
if (this.containerRef.current && this.containerRef.current.clientWidth) {
this.setState({ width: this.containerRef.current.clientWidth });
}
};
Expand Down Expand Up @@ -84,12 +86,12 @@ class ScatterAreaChart extends React.Component {
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down Expand Up @@ -153,17 +155,18 @@ This demonstrates how to add interactive data points to a line chart.

```js
import React from 'react';
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
import { Chart, ChartAxis, ChartGroup, ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer, getResizeObserver } from '@patternfly/react-charts';

class ScatterLineChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
this.handleResize = () => {
if(this.containerRef.current && this.containerRef.current.clientWidth){
if (this.containerRef.current && this.containerRef.current.clientWidth) {
this.setState({ width: this.containerRef.current.clientWidth });
}
};
Expand Down Expand Up @@ -213,12 +216,12 @@ class ScatterLineChart extends React.Component {
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down
17 changes: 10 additions & 7 deletions packages/react-charts/src/components/ChartStack/examples/ChartStack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ import {
ChartThemeColor,
ChartTooltip,
ChartVoronoiContainer,
createContainer
createContainer,
getResizeObserver
} from '@patternfly/react-charts';

## Introduction
Expand Down Expand Up @@ -176,12 +177,13 @@ import { Chart, ChartBar, ChartAxis, ChartStack, ChartThemeColor, ChartTooltip }
### Monthly data with responsive container
```js
import React from 'react';
import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts';
import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip, getResizeObserver } from '@patternfly/react-charts';

class MonthlyResponsiveStack extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
Expand Down Expand Up @@ -246,12 +248,12 @@ class MonthlyResponsiveStack extends React.Component {
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render(){
Expand Down Expand Up @@ -295,12 +297,13 @@ This demonstrates monthly data with a bottom aligned legend and responsiveness f

```js
import React from 'react';
import { Chart, ChartArea, ChartAxis, ChartStack, ChartLegendTooltip, ChartThemeColor, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
import { Chart, ChartArea, ChartAxis, ChartStack, ChartLegendTooltip, ChartThemeColor, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts';

class MultiColorChart extends React.Component {
constructor(props) {
super(props);
this.containerRef = React.createRef();
this.observer = () => {};
this.state = {
width: 0
};
Expand All @@ -312,12 +315,12 @@ class MultiColorChart extends React.Component {
}

componentDidMount() {
this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
this.handleResize();
window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
this.observer();
}

render() {
Expand Down
Loading