1+ import React , { useEffect , useState } from "react" ;
2+ import { Grid , Typography } from "@mui/material" ;
3+ import {
4+ ApolloClient ,
5+ InMemoryCache ,
6+ ApolloProvider ,
7+ gql ,
8+ } from "@apollo/client" ;
9+ import Chart from "chart.js/auto" ;
10+ import ChartStreaming from "chartjs-plugin-streaming" ;
11+ import 'chartjs-adapter-moment' ;
12+
13+ // import config from './chartConfig.js';
14+
15+
16+ Chart . register ( ChartStreaming ) ;
17+
18+ const client = new ApolloClient ( {
19+ uri : "http://localhost:5000/graphql" ,
20+ cache : new InMemoryCache ( ) ,
21+ } ) ;
22+
23+ // console.log('test: ', Math.round(new Date().getTime() / 1000));
24+
25+ export default function LineChart ( { metric, description } ) {
26+ useEffect ( ( ) => {
27+ let delayed ;
28+ // define chart context
29+ const ctx = document . getElementById ( metric ) . getContext ( "2d" ) ;
30+
31+ // define gradient for background
32+ const gradient = ctx . createLinearGradient ( 0 , 0 , 0 , 400 ) ;
33+ gradient . addColorStop ( 0 , 'rgba(58, 123, 213, 1)' ) ;
34+ gradient . addColorStop ( 1 , 'rgba(0, 210, 255, 0.3)' )
35+
36+ // define chart configuration
37+ const config = {
38+ type : 'line' ,
39+ data : {
40+ datasets : [ {
41+ data : [ ] , // empty at the beginning,
42+ borderColor : 'rgba(58, 123, 213, 1)' ,
43+ pointRadius : 0 ,
44+ hitRadius : 30 ,
45+ hoverRadius : 5 ,
46+ fill : true ,
47+ backgroundColor : gradient ,
48+ } ]
49+ } ,
50+ options : {
51+ responsive : true ,
52+ animation : {
53+ onComplete : ( ) => {
54+ delayed = true ;
55+ } ,
56+ // delay: (context) => {
57+ // let delay = 0;
58+ // if (context.type === "data" && context.mode === "default" && !delayed) {
59+ // delay = context.dataIndex * 300 + context.datasetIndex * 100;
60+ // }
61+ // return delay;
62+ // }
63+ delay : 3 ,
64+ } ,
65+ elements : {
66+ line : {
67+ tension : .4
68+ }
69+ } ,
70+ scales : {
71+ x : {
72+ type : 'realtime' , // x axis will auto-scroll from right to left
73+ realtime : { // per-axis options
74+ duration : 200000 , // data in the past 20000 ms will be displayed
75+ refresh : 2000 , // onRefresh callback will be called every 1000 ms
76+ delay : 2000 , // delay of 1000 ms, so upcoming values are known before plotting a line
77+ pause : false , // chart is not paused
78+ ttl : undefined , // data will be automatically deleted as it disappears off the chart
79+ frameRate : 30 , // data points are drawn 30 times every second
80+
81+ // a callback to update datasets
82+ onRefresh : chart => {
83+
84+ // query your data source and get the array of {x: timestamp, y: value} objects
85+ client . query ( {
86+ query : gql `
87+ query testQuery {
88+ ksqlDBMetrics(metric: "${ metric } ${ Math . round ( new Date ( ) . getTime ( ) / 1000 ) - 500 } ${ Math . round ( new Date ( ) . getTime ( ) / 1000 ) }
89+ x,
90+ y
91+ }
92+ }
93+ `
94+ } )
95+ . then ( res => {
96+ // chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
97+ const data = res . data . ksqlDBMetrics . map ( ( queryObj ) => {
98+ return {
99+ x : new Date ( queryObj . x * 1000 ) ,
100+ y : queryObj . y
101+ }
102+ } ) ;
103+ chart . data . datasets [ 0 ] . data = data ;
104+ } )
105+ . catch ( error => console . log ( error ) ) ;
106+ }
107+ }
108+ } ,
109+ y : {
110+ beginAtZero : true ,
111+ ticks : {
112+ // display: false,
113+ color : "#999" ,
114+ stepSize : 5
115+ }
116+ }
117+ } ,
118+ plugins : {
119+ legend : {
120+ display : false ,
121+ // position: "top",
122+ } ,
123+ title : {
124+ fontFamily : 'Raleway' ,
125+ color : '#666' ,
126+ display : true ,
127+ text : description ,
128+ } ,
129+ } ,
130+ }
131+ } ;
132+
133+ // instantiate new instance of a chart
134+ const realTimeChart = new Chart ( ctx , config ) ;
135+
136+ // populate initial data to avoid having to wait for first refresh
137+ // client.query({
138+ // query: gql`
139+ // query testQuery {
140+ // ksqlDBMetrics(metric: "numActiveQueries", resolution: 1, start: ${Math.round(new Date().getTime() / 1000) - 500}, end: ${Math.round(new Date().getTime() / 1000)}) {
141+ // x,
142+ // y
143+ // }
144+ // }
145+ // `
146+ // })
147+ // .then(res => {
148+ // // chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
149+ // const data = res.data.ksqlDBMetrics.map((queryObj) => {
150+ // return {
151+ // x: new Date(queryObj.x * 1000),
152+ // y: queryObj.y
153+ // }
154+ // });
155+ // console.log('this is a test');
156+ // realTimeChart.data.datasets[0].data = data;
157+ // realTimeChart.update();
158+ // })
159+ // .catch(error => console.log(error));
160+
161+
162+ // chart teardown on unmount
163+ return ( ) => {
164+ realTimeChart . destroy ( ) ;
165+ }
166+ } , [ ] ) ;
167+
168+ return (
169+ < Grid item xs = { 2 } >
170+ < canvas id = { metric } width = "100%" height = "100%" > </ canvas >
171+ </ Grid >
172+ ) ;
173+ }
0 commit comments