chart tree shake

package-lock.json

@@ -2441,11 +2441,28 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.3.tgz",
       "integrity": "sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
+      "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2454,6 +2471,12 @@
         "@types/node": "*"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -5032,6 +5055,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
+      "dev": true
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",

package.json

@@ -49,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^17.0.3",
     "openapi-typescript": "^3.2.0",
     "openapi-typescript-codegen": "^0.9.3"
   }

src/components/charts/ChartTime.js

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef} from 'react';
 
-//import { Chart, TimeScale, Legend, LineController, LineElement, PointElement, LinearScale } from 'chart.js'
+import { Chart, TimeScale, LinearScale, Legend, LineController, PointElement, LineElement } from 'chart.js'
-import Chart from 'chart.js/auto';
+//import Chart from 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
-//Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
 
 const options = {
   //showLine :true,
-  indexAxis:'y',
+  //indexAxis:'y',
   //maintainAspectRatio: false,
   //responsive:false,
   scales: {
@@ -58,7 +58,12 @@ const data= {
   ]
 }
 
-export function ChartSaubDataOnline(props){
+// export type LineConfig = {
+//   login?: string | null;
+//   password?: string | null;
+// }
+
+export function ChartTime(/*props*/){
   const chartRef = useRef(null)
   
   useEffect(()=>{
@@ -67,7 +72,7 @@ export function ChartSaubDataOnline(props){
       data,
       options})
     //chart.canvas.parentNode.style.height = '128px';
-    return _ => chart.destroy()
+    return () => chart.destroy()
   },[])
 
   return(<canvas ref={chartRef} />)

src/pages/Well.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect} from 'react';
-import {ChartSaubDataOnline} from '../components/charts/ChartSaubDataOnline'
+import {ChartTime} from '../components/charts/ChartTime'
 
 import {useParams} from 'react-router-dom'
 import {Subscribe} from '../services/signalr'
@@ -26,6 +26,6 @@ export default function Well(props){
 
   return(<div>
     Well id: {id}; points count: {saubData.length}
-    <ChartSaubDataOnline/>
+    <ChartTime/>
     </div>)
 }