Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bugfix/chart widget freeze issue (#976)

Browse source 
* fixes chart widget

* refactored

* removing comments
This commit is contained in:
Arpit 2021-10-27 13:27:57 +05:30 committed by GitHub
parent 7931e9b8f7
commit 6b79a3096d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/Editor/Components/Chart.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
// Use plotly basic bundle
@ -8,7 +8,6 @@ const Plot = createPlotlyComponent(Plotly);
export const Chart = function Chart({ id, width, height, component, onComponentClick, currentState, darkMode }) {
const [loadingState, setLoadingState] = useState(false);
const [chartData, setChartData] = useState([]);
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
@ -87,8 +86,8 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
const data = resolveReferences(dataString, currentState, []);
useEffect(() => {
let rawData = data || [];
const computeChartData = (data, dataString) => {
let rawData = data;
if (typeof rawData === 'string') {
try {
rawData = JSON.parse(dataString);
@ -122,9 +121,11 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
];
}
setChartData(newData);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, chartType]);
return newData;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const memoizedChartData = useMemo(() => computeChartData(data, dataString), [data, dataString]);
return (
<div
@ -143,7 +144,7 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
</div>
) : (
<Plot
data={chartData}
data={memoizedChartData}
layout={layout}
config={{
displayModeBar: false,