React component for plotly charts #2633
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import createPlotlyComponent from 'react-plotly.js/factory'; | ||
| import Plotly from 'plotly.js'; | ||
| import bar from 'plotly.js/lib/bar'; | ||
| import pie from 'plotly.js/lib/pie'; | ||
| import histogram from 'plotly.js/lib/histogram'; | ||
| import box from 'plotly.js/lib/box'; | ||
| import { each, isArray, isObject } from 'lodash'; | ||
| import { normalizeValue, updateData, prepareData, prepareLayout } from '@/visualizations/chart/plotly/utils'; | ||
|
|
||
|
|
||
| Plotly.register([bar, pie, histogram, box]); | ||
| Plotly.setPlotConfig({ | ||
| modeBarButtonsToRemove: ['sendDataToCloud'], | ||
| }); | ||
|
|
||
| const Plot = createPlotlyComponent(Plotly); | ||
|
|
||
|
|
||
| const timeSeriesToPlotlySeries = (ss) => { | ||
| const x = []; | ||
| const ys = {}; | ||
| each(ss, (series) => { | ||
| ys[series.name] = []; | ||
| each(series.data, (point) => { | ||
| x.push(normalizeValue(point.x)); | ||
| ys[series.name].push(normalizeValue(point.y)); | ||
| }); | ||
| }); | ||
| return [x, ys]; | ||
| }; | ||
|
|
||
| export default class PlotlyChart extends React.Component { | ||
| static propTypes = { | ||
| // XXX make this required after porting next layer up | ||
| options: PropTypes.object, | ||
| // eslint-disable-next-line react/no-unused-prop-types | ||
| series: PropTypes.array.isRequired, | ||
| customCode: PropTypes.string, | ||
|
|
||
| } | ||
|
|
||
| static defaultProps = { options: null, customCode: null }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| data: null, | ||
| layout: null, | ||
| revision: 0, | ||
| x: null, | ||
| ys: null, | ||
| }; | ||
| this.refreshCustom = this.refreshCustom.bind(this); | ||
|
There was a problem hiding this comment. There's a neat way around this that I recently discovered myself. You can omit this line if you define refreshCustom = (figure, plotlyElement) => {
// ...
}See this blog post section for more info. As with everything, there are pros and cons with this approach, but if you find that you have a lot of |
||
| } | ||
|
|
||
| static getDerivedStateFromProps(nextProps, prevState) { | ||
| if (!nextProps.options) return null; | ||
| if (nextProps.options.globalSeriesType === 'custom') { | ||
| const [x, ys] = timeSeriesToPlotlySeries(nextProps.series); | ||
| return { x, ys, revision: prevState.revision + 1 }; | ||
| } | ||
| const data = prepareData(nextProps.series, nextProps.options); | ||
| updateData(data, nextProps.options); | ||
| return { | ||
| data, | ||
| layout: prepareLayout(null, nextProps.series, nextProps.options, data), | ||
| revision: prevState.revision + 1, | ||
| }; | ||
| } | ||
|
|
||
| refreshCustom = (figure, plotlyElement) => { | ||
| Plotly.newPlot(plotlyElement); | ||
| try { | ||
| // eslint-disable-next-line no-new-func | ||
| const codeCall = new Function('x, ys, element, Plotly', this.props.options.customCode); | ||
| codeCall(this.state.x, this.state.ys, plotlyElement, Plotly); | ||
| } catch (err) { | ||
| if (this.props.options.enableConsoleLogs) { | ||
| // eslint-disable-next-line no-console | ||
| console.log(`Error while executing custom graph: ${err}`); | ||
|
There was a problem hiding this comment. Nice use of template strings! 😃 |
||
| } | ||
| } | ||
| } | ||
|
|
||
| restyle = (updates) => { | ||
| if (isArray(updates) && isObject(updates[0]) && updates[0].visible) { | ||
| updateData(this.state.data, this.props.options); | ||
| this.setState({ revision: this.state.revision + 1 }); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| if (!this.props.options) return null; | ||
| return ( | ||
| <Plot | ||
| className="plotly-chart-container" | ||
| revision={this.state.revision} | ||
| style={{ width: '100%', height: '100%' }} | ||
| useResizeHandler | ||
|
There was a problem hiding this comment. Oh wow, I didn't even know you could do this. Nice find! |
||
| config={{ | ||
| showLink: false, | ||
| displayLogo: false, | ||
| modeBarButtonsToRemove: ['sendDataToCloud'], | ||
| }} | ||
| data={this.state.data} | ||
| layout={this.state.layout} | ||
| onRestyle={this.restyle} | ||
| onUpdate={this.props.options.globalSeriesType === 'custom' ? this.refreshCustom : null} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FWIW the parens are optional when there is only one variable. This could be rewritten as:
There are also many places below where this comment applies, like line 24 and line 26. But it's obviously just style, and it's up to you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Curious. eslint has caught this many times for me, not sure how I missed this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-- Ah. the
arrow-parenseslint rule expects parens for braceful arrow functions and no parens for braceless ones.