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

Feature: Dynamic variable support for chart data

Browse source
This commit is contained in:
navaneeth 2021-05-21 10:17:30 +05:30
parent 7e95b24f28
commit 92c0946633
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ export const Chart = function Chart({
console.log('currentState', currentState);
const [loadingState, setLoadingState] = useState(false);
const [chartData, setChartData] = useState([]);
useEffect(() => {
const loadingStateProperty = component.definition.properties.loadingState;
@ -27,11 +28,6 @@ export const Chart = function Chart({
const dataProperty = component.definition.properties.data;
const dataString = dataProperty ? dataProperty.value : [];
let data = [];
try {
data = JSON.parse(dataString);
} catch (err) { console.log(err); }
const titleProperty = component.definition.properties.title;
const title = titleProperty.value;
@ -44,13 +40,6 @@ export const Chart = function Chart({
const gridLinesProperty = component.definition.properties.showGridLines;
const showGridLines = gridLinesProperty ? gridLinesProperty.value : true;
const chartData = [{
type: chartType || 'line',
x: data.map((item) => item["x"]),
y: data.map((item) => item["y"]),
marker: { color: markerColor }
}];
const layout = {
width,
height,
@ -65,6 +54,26 @@ export const Chart = function Chart({
}
}
useEffect(() => {
let data = resolveReferences(dataString, currentState, []);
if(typeof data === 'string') {
try {
data = JSON.parse(dataString);
} catch (err) { data = []; }
}
const newData = [{
type: chartType || 'line',
x: data.map((item) => item["x"]),
y: data.map((item) => item["y"]),
marker: { color: markerColor }
}];
setChartData(newData);
}, [dataString]);
return (
<div
style={computedStyles}