| commit | author | age | ||
| a0dac2 | 1 | import React from 'react'; |
| MC | 2 | import { Chart, ChartAxis, ChartGroup, ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; |
| 3 | ||
| 4 | export default class ScatterLineChart extends React.Component { | |
| 5 | constructor(props) { | |
| 6 | super(props); | |
| 7 | this.containerRef = React.createRef(); | |
| 8 | this.state = { | |
| 9 | width: 0, | |
| 10 | series: "", | |
| 11 | }; | |
| 12 | this.handleResize = () => { | |
| 13 | if (this.containerRef.current && this.containerRef.current.clientWidth) { | |
| 14 | this.setState({ width: this.containerRef.current.clientWidth }); | |
| 15 | } | |
| 16 | }; | |
| 17 | ||
| 18 | } | |
| 19 | ||
| 20 | componentDidMount() { | |
| 21 | this.handleResize(); | |
| 22 | window.addEventListener('resize', this.handleResize); | |
| 23 | } | |
| 24 | ||
| 25 | componentWillUnmount() { | |
| 26 | window.removeEventListener('resize', this.handleResize); | |
| 27 | } | |
| 28 | ||
| 29 | render() { | |
| 30 | const { width } = this.state; | |
| 31 | ||
| 32 | var conv = [] | |
| 33 | var maxYAxis = 0 | |
| 34 | ||
| 35 | this.props.data.forEach(e => { | |
| 36 | if(e.value > maxYAxis) { | |
| 37 | maxYAxis = e.value | |
| 38 | } | |
| 39 | ||
| 40 | const date = new Date(e.date) | |
| 41 | const dateString = `${date.getDate()}/${date.getMonth() + 1}` | |
| 42 | conv.unshift({ | |
| 43 | name: this.props.target, | |
| 44 | x: dateString, | |
| 45 | y: e.value | |
| 46 | }) | |
| 47 | }); | |
| 48 | ||
| 49 | const series = [ | |
| 50 | { | |
| 51 | datapoints: conv, | |
| 52 | legendItem: { name: 'Conversion' } | |
| 53 | } | |
| 54 | ]; | |
| 55 | ||
| 56 | return ( | |
| 57 | <div ref={this.containerRef}> | |
| 58 | <div style={{ height: '275px' }}> | |
| 59 | <Chart | |
| ece0cb | 60 | ariaDesc="Exchange rate for given currency" |
| MC | 61 | ariaTitle="Exchange Rate Graph" |
| a0dac2 | 62 | containerComponent={ |
| MC | 63 | <ChartVoronoiContainer |
| 64 | labels={({ datum }) => datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null} | |
| 65 | constrainToVisibleArea | |
| 66 | /> | |
| 67 | } | |
| 68 | legendData={series.map(s => s.legendItem)} | |
| 69 | legendPosition="bottom-left" | |
| 70 | height={275} | |
| 71 | maxDomain={{ y: maxYAxis + 1 }} | |
| 72 | minDomain={{ y: 0 }} | |
| 73 | padding={{ | |
| 74 | bottom: 75, // Adjusted to accommodate legend | |
| 75 | left: 50, | |
| 76 | right: 50, | |
| 77 | top: 50 | |
| 78 | }} | |
| 79 | themeColor={ChartThemeColor.orange} | |
| 80 | width={width} | |
| 81 | > | |
| 82 | <ChartAxis tickValues={[2, 3, 4]} /> | |
| 83 | <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} /> | |
| 84 | <ChartGroup> | |
| 85 | {series.map((s, idx) => { | |
| 86 | return ( | |
| 87 | <ChartScatter | |
| 88 | data={s.datapoints} | |
| 89 | key={'scatter-' + idx} | |
| 90 | name={'scatter-' + idx} | |
| 91 | /> | |
| 92 | ); | |
| 93 | })} | |
| 94 | </ChartGroup> | |
| 95 | <ChartGroup> | |
| 96 | {series.map((s, idx) => { | |
| 97 | return ( | |
| 98 | <ChartLine | |
| 99 | key={'line-' + idx} | |
| 100 | name={'line-' + idx} | |
| 101 | data={s.datapoints} | |
| 102 | /> | |
| 103 | ); | |
| 104 | })} | |
| 105 | </ChartGroup> | |
| 106 | </Chart> | |
| 107 | </div> | |
| 108 | </div> | |
| 109 | ); | |
| 110 | } | |
| 111 | } | |
