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

[improvement] Widget components #1475 - chart widget (#1495)

Browse source 
* new implementation/image

* Revert "new implementation/image"

This reverts commit 637bd83108.

* new implementation/chart widget

* Remove the usage of currentState from chart component

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>
This commit is contained in:
Arpit 2021-12-13 21:43:51 +05:30 committed by GitHub
parent f1457a1905
commit 63cc923aae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,58 +1,34 @@
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
// Use plotly basic bundle // Use plotly basic bundle
import Plotly from 'plotly.js-basic-dist-min'; import Plotly from 'plotly.js-basic-dist-min';
import createPlotlyComponent from 'react-plotly.js/factory'; import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly); const Plot = createPlotlyComponent(Plotly);
export const Chart = function Chart({ id, width, height, component, onComponentClick, currentState, darkMode }) { export const Chart = function Chart({ width, height, darkMode, properties, styles }) {
const [loadingState, setLoadingState] = useState(false); const [loadingState, setLoadingState] = useState(false);
const widgetVisibility = component.definition.styles?.visibility?.value ?? true; const { visibility, disabledState } = styles;
const disabledState = component.definition.styles?.disabledState?.value ?? false; const { title, markerColor, showGridLines, type, data } = properties;
let parsedWidgetVisibility = widgetVisibility;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
try {
parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
} catch (err) {
console.log(err);
}
useEffect(() => { useEffect(() => {
const loadingStateProperty = component.definition.properties.loadingState; const loadingStateProperty = properties.loadingState;
if (loadingStateProperty && currentState) { if (loadingStateProperty != undefined) {
const newState = resolveReferences(loadingStateProperty.value, currentState, false); setLoadingState(loadingStateProperty);
setLoadingState(newState);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps }, [properties.loadingState]);
}, [currentState]);
const computedStyles = { const computedStyles = {
width: width - 4, width: width - 4,
height, height,
display: parsedWidgetVisibility ? '' : 'none', display: visibility ? '' : 'none',
background: darkMode ? '#1f2936' : 'white', background: darkMode ? '#1f2936' : 'white',
}; };
// darkMode ? '#1f2936' : 'white' const dataString = data ?? [];
const dataProperty = component.definition.properties.data;
const dataString = dataProperty ? dataProperty.value : [];
const titleProperty = component.definition.properties.title; const chartType = type;
const title = titleProperty.value;
const typeProperty = component.definition.properties.type;
const chartType = typeProperty.value;
const markerColorProperty = component.definition.properties.markerColor;
const markerColor = markerColorProperty ? markerColorProperty.value : 'red';
const gridLinesProperty = component.definition.properties.showGridLines;
const showGridLines = gridLinesProperty ? gridLinesProperty.value : true;
const fontColor = darkMode ? '#c3c3c3' : null; const fontColor = darkMode ? '#c3c3c3' : null;
const layout = { const layout = {
@ -84,8 +60,6 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
}, },
}; };
const data = resolveReferences(dataString, currentState, []);
const computeChartData = (data, dataString) => { const computeChartData = (data, dataString) => {
let rawData = data; let rawData = data;
if (typeof rawData === 'string') { if (typeof rawData === 'string') {
@ -128,14 +102,7 @@ export const Chart = function Chart({ id, width, height, component, onComponentC
const memoizedChartData = useMemo(() => computeChartData(data, dataString), [data, dataString]); const memoizedChartData = useMemo(() => computeChartData(data, dataString), [data, dataString]);
return ( return (
<div <div data-disabled={disabledState} style={computedStyles}>
data-disabled={parsedDisabledState}
style={computedStyles}
onClick={(event) => {
event.stopPropagation();
onComponentClick(id, component, event);
}}
>
{loadingState === true ? ( {loadingState === true ? (
<div style={{ width }} className="p-2"> <div style={{ width }} className="p-2">
<center> <center>