first init react chart js library

dist/ReactChartJs.d.ts

@@ -0,0 +1,8 @@
+import { ChartConfiguration } from 'chart.js';
+import { FunctionComponent } from 'react';
+interface ReactChartJSProps {
+    chartConfig?: ChartConfiguration;
+}
+declare const ReactChartJs: FunctionComponent<ReactChartJSProps>;
+export default ReactChartJs;
+//# sourceMappingURL=ReactChartJs.d.ts.map

dist/ReactChartJs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactChartJs.d.ts","sourceRoot":"","sources":["../src/ReactChartJs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAc,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAEpE,UAAU,iBAAiB;IACvB,WAAW,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAMD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAiCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

dist/ReactChartJs.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var chart_js_1 = require("chart.js");
+var react_1 = __importStar(require("react"));
+var ReactChartJs = function (props) {
+    var chartConfig = props.chartConfig;
+    var canvasDomRef = react_1.useRef();
+    var chartInstanceRef = react_1.useRef({});
+    react_1.useEffect(function () {
+        var canvasDom = canvasDomRef.current;
+        var chartInstance = chartInstanceRef.current.chartInstance;
+        if (chartInstance) {
+            chartInstance.destroy();
+        }
+        chartInstanceRef.current.chartInstance = new chart_js_1.Chart(canvasDom, chartConfig);
+        // if (!chartInstance) {
+        // } else {
+        //     chartInstanceRef.current!.chartInstance.update()
+        // }
+    }, [chartConfig]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("canvas", { ref: function (instance) {
+                canvasDomRef.current = instance;
+            }, width: "400", height: "200" })));
+};
+exports.default = ReactChartJs;

dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ReactChartJs } from "./ReactChartJs";
+//# sourceMappingURL=index.d.ts.map

dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactChartJs = void 0;
+var ReactChartJs_1 = require("./ReactChartJs");
+Object.defineProperty(exports, "ReactChartJs", { enumerable: true, get: function () { return __importDefault(ReactChartJs_1).default; } });