diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..447aa58 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "endOfLine": "lf", + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "bracketSpacing": true, + "printWidth": 120, + "tabWidth": 4, + "arrowParens": "always" +} diff --git a/common/package.json b/common/package.json index ccd9249..82101df 100644 --- a/common/package.json +++ b/common/package.json @@ -1,6 +1,6 @@ { "name": "uplot-wrappers-common", - "version": "1.1.2", + "version": "1.1.3", "description": "Common code for React and Vue.js wrappers of uPlot", "author": "Sergey Kalinichev ", "license": "MIT", diff --git a/package.json b/package.json index cec0d93..48dc510 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "uplot-wrappers", - "version": "1.1.2", + "version": "1.1.3", "description": "React and Vue.js wrappers for uPlot", "author": "Sergey Kalinichev ", "license": "MIT", diff --git a/react/package.json b/react/package.json index c65e972..276f5d9 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "uplot-react", - "version": "1.1.2", + "version": "1.1.3", "description": "React wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework", "author": "Sergey Kalinichev ", "license": "MIT", @@ -38,6 +38,6 @@ "react": ">=16.8.6", "react-dom": ">=16.8.6", "uplot": "^1.6.7", - "uplot-wrappers-common": "1.1.2" + "uplot-wrappers-common": "1.1.3" } } diff --git a/react/uplot-react.tsx b/react/uplot-react.tsx index 0c000e8..fdeb3a8 100644 --- a/react/uplot-react.tsx +++ b/react/uplot-react.tsx @@ -1,17 +1,24 @@ -import React, {useEffect, useRef} from 'react'; +import React, { useEffect, useRef } from 'react'; import uPlot from 'uplot'; -import {optionsUpdateState, dataMatch} from 'uplot-wrappers-common'; +import { optionsUpdateState, dataMatch } from 'uplot-wrappers-common'; -export default function UplotReact({options, data, target, onDelete = () => {}, onCreate = () => {}, resetScales = true}: { - options: uPlot.Options, - data: uPlot.AlignedData, +export default function UplotReact({ + options, + data, + target, + onDelete = () => {}, + onCreate = () => {}, + resetScales = true, +}: { + options: uPlot.Options; + data: uPlot.AlignedData; // eslint-disable-next-line - target?: HTMLElement | ((self: uPlot, init: Function) => void), - onDelete?: (chart: uPlot) => void - onCreate?: (chart: uPlot) => void - resetScales?: boolean + target?: HTMLElement | ((self: uPlot, init: Function) => void); + onDelete?: (chart: uPlot) => void; + onCreate?: (chart: uPlot) => void; + resetScales?: boolean; }): JSX.Element | null { const chartRef = useRef(null); const targetRef = useRef(null); @@ -24,7 +31,7 @@ export default function UplotReact({options, data, target, onDelete = () => {}, } } function create() { - const newChart = new uPlot(options, data, target || targetRef.current as HTMLDivElement) + const newChart = new uPlot(options, data, target || (targetRef.current as HTMLDivElement)); chartRef.current = newChart; onCreate(newChart); } @@ -33,35 +40,34 @@ export default function UplotReact({options, data, target, onDelete = () => {}, create(); return () => { destroy(chartRef.current); - } + }; }, []); // componentDidUpdate - const prevProps = useRef({options, data, target}).current; + const prevProps = useRef({ options, data, target }).current; useEffect(() => { - const chart = chartRef.current; if (prevProps.options !== options) { const optionsState = optionsUpdateState(prevProps.options, options); - if (!chart || optionsState === 'create') { - destroy(chart); + if (!chartRef.current || optionsState === 'create') { + destroy(chartRef.current); create(); } else if (optionsState === 'update') { - chart.setSize({width: options.width, height: options.height}); + chartRef.current.setSize({ width: options.width, height: options.height }); } } if (prevProps.data !== data) { - if (!chart) { + if (!chartRef.current) { create(); } else if (!dataMatch(prevProps.data, data)) { if (resetScales) { - chart.setData(data, true); + chartRef.current.setData(data, true); } else { - chart.setData(data, false); - chart.redraw(); + chartRef.current.setData(data, false); + chartRef.current.redraw(); } } } if (prevProps.target !== target) { - destroy(chart); + destroy(chartRef.current); create(); } diff --git a/vue/package.json b/vue/package.json index e1b0e3d..5926ac0 100644 --- a/vue/package.json +++ b/vue/package.json @@ -1,6 +1,6 @@ { "name": "uplot-vue", - "version": "1.1.2", + "version": "1.1.3", "description": "Vue.js wrapper for uPlot that allows you to work with charts declaratively inside your favorite framework", "author": "Sergey Kalinichev ", "license": "MIT", @@ -33,7 +33,7 @@ }, "devDependencies": { "uplot": "^1.6.7", - "uplot-wrappers-common": "1.1.2", + "uplot-wrappers-common": "1.1.3", "vue": "^2.6.12", "vue3": "npm:vue@^3.0.11" }