@samitouri / QOS-React-2
Code Commits Issues Pulls Sessions CI/CD
main
main
js 126 lines 3.13 KB
Raw
1 import React, {PureComponent} from 'react';
2 import {
3 VictoryArea,
4 VictoryAxis,
5 VictoryChart,
6 VictoryBar,
7 VictoryTheme,
8 VictoryScatter,
9 VictoryStack,
10 } from 'victory';
11
12 const colors = ['#fff489', '#fa57c1', '#b166cc', '#7572ff', '#69a6f9'];
13
14 export default class Charts extends PureComponent {
15 render() {
16 const streamData = this.props.data;
17 return (
18 <div>
19 <div style={{display: 'flex'}}>
20 <VictoryChart
21 theme={VictoryTheme.material}
22 width={400}
23 height={400}
24 style={{
25 parent: {
26 backgroundColor: '#222',
27 },
28 }}>
29 <VictoryAxis
30 style={{
31 axis: {stroke: 'white'},
32 tickLabels: {fill: 'white'},
33 }}
34 />
35 <VictoryAxis
36 style={{
37 axis: {stroke: 'white'},
38 tickLabels: {fill: 'white'},
39 }}
40 dependentAxis
41 />
42 <VictoryScatter
43 data={streamData[0]}
44 size={6}
45 style={{
46 data: {
47 fill: d => colors[d.x % 5],
48 },
49 }}
50 />
51 </VictoryChart>
52
53 <VictoryChart
54 theme={VictoryTheme.material}
55 width={400}
56 height={400}
57 style={{
58 parent: {
59 backgroundColor: '#222',
60 },
61 }}
62 domainPadding={[20, 20]}>
63 <VictoryAxis
64 style={{
65 axis: {stroke: 'white'},
66 tickLabels: {fill: 'white'},
67 }}
68 />
69 <VictoryAxis
70 style={{
71 axis: {stroke: 'white'},
72 tickLabels: {fill: 'white'},
73 }}
74 dependentAxis
75 />
76 <VictoryBar
77 data={streamData[0]}
78 style={{
79 data: {
80 fill: d => colors[d.x % 5],
81 stroke: 'none',
82 padding: 5,
83 },
84 }}
85 />
86 </VictoryChart>
87 </div>
88 <div
89 style={{
90 display: 'flex',
91 position: 'relative',
92 top: '-50px',
93 }}>
94 <VictoryChart
95 theme={VictoryTheme.material}
96 width={800}
97 height={350}
98 style={{
99 parent: {
100 backgroundColor: '#222',
101 },
102 }}>
103 <VictoryAxis
104 style={{
105 axis: {stroke: 'white'},
106 tickLabels: {fill: 'white'},
107 }}
108 />
109 <VictoryAxis
110 style={{
111 axis: {stroke: 'white'},
112 tickLabels: {fill: 'white'},
113 }}
114 dependentAxis
115 />
116 <VictoryStack>
117 {streamData.map((data, i) => (
118 <VictoryArea key={i} data={data} colorScale={colors} />
119 ))}
120 </VictoryStack>
121 </VictoryChart>
122 </div>
123 </div>
124 );
125 }
126 }