Skip to content

Commit ff8fe8d

Browse files
javanangjavanang
committed
working lineChart
1 parent 7021e6d commit ff8fe8d

File tree

1 file changed

+54
-81
lines changed

1 file changed

+54
-81
lines changed

‎ksqLight/src/components/LineChart.js

Lines changed: 54 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* eslint-disable no-undef */
1+
//-----------Import External Modules-----------
22
import React, { useEffect, useState } from "react";
33
import { Grid, Typography } from "@mui/material";
44
import {
@@ -13,37 +13,39 @@ import 'chartjs-adapter-moment';
1313
import { CardContent } from "@mui/material";
1414

1515

16-
// import config from './chartConfig.js';
1716

17+
//-----------Import Internal Modules-----------
18+
import {getUnixRange, getDuration} from "../utils/utilityFunctions.js";
1819

1920
Chart.register(ChartStreaming);
2021

22+
2123
const client = new ApolloClient({
2224
uri: "http://localhost:5001/graphql",
2325
cache: new InMemoryCache(),
2426
});
2527

26-
// console.log('test: ', Math.round(new Date().getTime() / 1000));
27-
28-
export default function LineChart({ metric, description }) {
28+
export default function LineChart({ metric, description, metricsState }) {
2929
useEffect(() => {
30-
let delayed;
3130
let initialData;
31+
3232
// define chart context
3333
const ctx = document.getElementById(metric).getContext("2d");
3434

35+
// make initial fetch of graph data
36+
const [unixStart, unixEnd] = getUnixRange(metricsState.duration.days, metricsState.duration.hours, metricsState.duration.minutes);
37+
3538
initialData = client.query({
3639
query: gql`
37-
query testQuery {
38-
ksqlDBMetrics(metric: "${metric}", resolution: 2, start: ${Math.round(new Date().getTime() / 1000) - 500}, end: ${Math.round(new Date().getTime() / 1000)}) {
39-
x,
40-
y
41-
}
42-
}
43-
`
44-
})
40+
query fetchMetric {
41+
ksqlDBMetrics(prometheusURL: "${metricsState.prometheusURL}" metric: "${metric}", resolution: ${metricsState.refreshRate}, start: ${unixStart}, end: ${unixEnd}) {
42+
x,
43+
y
44+
}
45+
}
46+
`
47+
})
4548
.then(res => {
46-
// chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
4749
const data = res.data.ksqlDBMetrics.map((queryObj) => {
4850
return {
4951
x: new Date(queryObj.x * 1000),
@@ -65,69 +67,65 @@ export default function LineChart({ metric, description }) {
6567
data: {
6668
datasets: [{
6769
data: initialData,
70+
// data: [{x: new Date(), y: '0'}],
6871
// data: [], // empty at the beginning,
6972
borderColor: 'rgba(58, 123, 213, 1)',
7073
pointRadius: 0,
7174
hitRadius: 30,
7275
hoverRadius: 5,
7376
fill: true,
7477
backgroundColor: gradient,
75-
}]
78+
}]
79+
},
80+
options: {
81+
responsive: true,
82+
elements: {
83+
line: {
84+
tension: .4
85+
}
7686
},
77-
options: {
78-
responsive: true,
79-
animation: {
80-
onComplete: () => {
81-
delayed = true;
87+
scales: {
88+
x: {
89+
type: 'realtime',
90+
ticks: {
91+
// minTicksLimit: 24
92+
autoskip: true,
93+
autoSkipPadding: 30,
94+
maxRotation: 0,
95+
steps: 10
8296
},
83-
// delay: (context) => {
84-
// let delay = 0;
85-
// if (context.type === "data" && context.mode === "default" && !delayed) {
86-
// delay = context.dataIndex * 300 + context.datasetIndex * 100;
87-
// }
88-
// return delay;
89-
// }
90-
delay: 3,
91-
},
92-
elements: {
93-
line: {
94-
tension: .4
95-
}
96-
},
97-
scales: {
98-
x: {
99-
type: 'realtime', // x axis will auto-scroll from right to left
100-
realtime: { // per-axis options
101-
duration: 200000, // data in the past 20000 ms will be displayed
102-
refresh: 2000, // onRefresh callback will be called every 1000 ms
103-
delay: 2000, // delay of 1000 ms, so upcoming values are known before plotting a line
104-
pause: false, // chart is not paused
105-
ttl: undefined, // data will be automatically deleted as it disappears off the chart
106-
frameRate: 30, // data points are drawn 30 times every second
107-
108-
// a callback to update datasets
109-
onRefresh: chart => {
110-
111-
// query your data source and get the array of {x: timestamp, y: value} objects
112-
client.query({
113-
query: gql`
97+
realtime: {
98+
duration: getDuration(metricsState.duration.days, metricsState.duration.hours, metricsState.duration.minutes), // data in the past duration # of ms will be displayed
99+
refresh: metricsState.refreshRate * 1000, // onRefresh callback will be called every refresh # ms
100+
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
101+
pause: false, // chart is not paused
102+
ttl: undefined, // data will be automatically deleted as it disappears off the chart
103+
frameRate: 30, // data points are drawn 30 times every second
104+
105+
// a callback to update datasets
106+
onRefresh: chart => {
107+
const [unixStart, unixEnd] = getUnixRange(metricsState.duration.days, metricsState.duration.hours, metricsState.duration.minutes);
108+
109+
// query your data source and get the array of {x: timestamp, y: value} objects
110+
client.query({
111+
query: gql`
114112
query testQuery {
115-
ksqlDBMetrics(metric: "${metric}", resolution: 2, start: ${Math.round(new Date().getTime() / 1000) - 500}, end: ${Math.round(new Date().getTime() / 1000)}) {
113+
ksqlDBMetrics(prometheusURL: "${metricsState.prometheusURL}" metric: "${metric}", resolution: ${metricsState.refreshRate}, start: ${unixStart}, end: ${unixEnd}) {
116114
x,
117115
y
118116
}
119117
}
120118
`
121119
})
122120
.then(res => {
123-
// chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
124121
const data = res.data.ksqlDBMetrics.map((queryObj) => {
125122
return {
126123
x: new Date(queryObj.x * 1000),
127124
y: queryObj.y
128125
}
129126
});
130127
chart.data.datasets[0].data = data;
128+
// console.log('this is the data: ', data);
131129
})
132130
.catch(error => console.log(error));
133131
}
@@ -160,41 +158,16 @@ export default function LineChart({ metric, description }) {
160158
// instantiate new instance of a chart
161159
const realTimeChart = new Chart(ctx, config);
162160

163-
// populate initial data to avoid having to wait for first refresh
164-
// client.query({
165-
// query: gql`
166-
// query testQuery {
167-
// ksqlDBMetrics(metric: "numActiveQueries", resolution: 1, start: ${Math.round(new Date().getTime() / 1000) - 500}, end: ${Math.round(new Date().getTime() / 1000)}) {
168-
// x,
169-
// y
170-
// }
171-
// }
172-
// `
173-
// })
174-
// .then(res => {
175-
// // chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
176-
// const data = res.data.ksqlDBMetrics.map((queryObj) => {
177-
// return {
178-
// x: new Date(queryObj.x * 1000),
179-
// y: queryObj.y
180-
// }
181-
// });
182-
// console.log('this is a test');
183-
// realTimeChart.data.datasets[0].data = data;
184-
// realTimeChart.update();
185-
// })
186-
// .catch(error => console.log(error));
187-
188161

189162
// chart teardown on unmount
190163
return () => {
191164
realTimeChart.destroy();
192165
}
193-
}, []);
166+
}, [metricsState]);
194167

195168
return (
196169
<Grid item xs={3} md={3} lg={3}>
197-
<CardContent sx={{ bgcolor:"chartColor.background", boxShadow: 1, borderRadius: '16px' }}>
170+
<CardContent sx={{ bgcolor: "white", boxShadow: 1, borderRadius: '16px' }}>
198171
<canvas id={metric} width="100%" height="100%"></canvas>
199172
</CardContent>
200173
</Grid>

0 commit comments

Comments
 (0)