| 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 => { | |
| 03eabd | 36 | var floatValue = parseFloat(e.value); |
| MC | 37 | if(floatValue > maxYAxis) { |
| 38 | maxYAxis = floatValue | |
| a0dac2 | 39 | } |
| MC | 40 | |
| 41 | const date = new Date(e.date) | |
| 42 | const dateString = `${date.getDate()}/${date.getMonth() + 1}` | |
| 43 | conv.unshift({ | |
| 44 | name: this.props.target, | |
| 45 | x: dateString, | |
| 03eabd | 46 | y: floatValue |
| a0dac2 | 47 | }) |
| MC | 48 | }); |
| 49 | ||
| 50 | const series = [ | |
| 51 | { | |
| 52 | datapoints: conv, | |
| 53 | legendItem: { name: 'Conversion' } | |
| 54 | } | |
| 55 | ]; | |
| 56 | ||
| 57 | return ( | |
| 58 | <div ref={this.containerRef}> | |
| 59 | <div style={{ height: '275px' }}> | |
| 60 | <Chart | |
| ece0cb | 61 | ariaDesc="Exchange rate for given currency" |
| MC | 62 | ariaTitle="Exchange Rate Graph" |
| a0dac2 | 63 | containerComponent={ |
| MC | 64 | <ChartVoronoiContainer |
| 65 | labels={({ datum }) => datum.childName.includes('line-') ? `${datum.name}: ${datum.y}` : null} | |
| 66 | constrainToVisibleArea | |
| 67 | /> | |
| 68 | } | |
| 69 | legendData={series.map(s => s.legendItem)} | |
| 70 | legendPosition="bottom-left" | |
| 71 | height={275} | |
| 03eabd | 72 | maxDomain={{ y: maxYAxis + 0.2 }} |
| a0dac2 | 73 | minDomain={{ y: 0 }} |
| MC | 74 | padding={{ |
| 75 | bottom: 75, // Adjusted to accommodate legend | |
| 76 | left: 50, | |
| 77 | right: 50, | |
| 78 | top: 50 | |
| 79 | }} | |
| 03eabd | 80 | themeColor={ChartThemeColor.blue} |
| a0dac2 | 81 | width={width} |
| MC | 82 | > |
| 83 | <ChartAxis tickValues={[2, 3, 4]} /> | |
| 84 | <ChartAxis dependentAxis showGrid tickValues={[2, 5, 8]} /> | |
| 85 | <ChartGroup> | |
| 86 | {series.map((s, idx) => { | |
| 87 | return ( | |
| 88 | <ChartScatter | |
| 89 | data={s.datapoints} | |
| 90 | key={'scatter-' + idx} | |
| 91 | name={'scatter-' + idx} | |
| 92 | /> | |
| 93 | ); | |
| 94 | })} | |
| 95 | </ChartGroup> | |
| 96 | <ChartGroup> | |
| 97 | {series.map((s, idx) => { | |
| 98 | return ( | |
| 99 | <ChartLine | |
| 100 | key={'line-' + idx} | |
| 101 | name={'line-' + idx} | |
| 102 | data={s.datapoints} | |
| 103 | /> | |
| 104 | ); | |
| 105 | })} | |
| 106 | </ChartGroup> | |
| 107 | </Chart> | |
| 108 | </div> | |
| 109 | </div> | |
| 110 | ); | |
| 111 | } | |
| 1e067d | 112 | } |
