handle multi trace with one data (#2424)

Co-authored-by: Fred Lefévère-Laoide <[email protected]>
Avaiga · Jan 23, 2025 · ebefe2e · ebefe2e
1 parent 4a6315f
commit ebefe2e
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx
@@ -294,7 +294,7 @@ const getData = (
     data: Record<string, TraceValueType>,
     additionalDatas: Array<Record<string, TraceValueType>>,
     idx: number
-) => (idx === 0 ? data : (idx <= additionalDatas.length ? additionalDatas[idx - 1]: undefined));
+) => (idx === 0 ? data : idx <= additionalDatas.length ? additionalDatas[idx - 1] : undefined);
 
 const Chart = (props: ChartProp) => {
     const {
@@ -506,23 +506,24 @@ const Chart = (props: ChartProp) => {
             return lastDataPl.current || [];
         }
         let changed = false;
+        let baseDataPl = (lastDataPl.current.length && lastDataPl.current[0]) || {};
         const newDataPl = config.traces.map((trace, idx) => {
-            const currentData = idx < lastDataPl.current.length ? lastDataPl.current[idx] : {};
+            const currentData = (idx < lastDataPl.current.length && lastDataPl.current[idx]) || baseDataPl;
             const dataKey = idx < dataKeys.length ? dataKeys[idx] : dataKeys[0];
-            const lData = idx < dataList.length ? dataList[idx] : dataList[0];
+            const lData = (idx < dataList.length && dataList[idx]) || dataList[0];
             if (!lData || isDataRefresh(lData) || !Object.keys(lData).length) {
                 return currentData;
             }
             const dtKey = getDataKey(
                 idx < config.columns?.length ? config.columns[idx] : undefined,
                 config.decimators
             )[1];
-            if (!dataKey.startsWith(dtKey) || !dtKey.length) {
+            if (!dataKey.startsWith(dtKey)) {
                 return currentData;
             }
             changed = true;
             const datum = lData[dataKey];
-            const columns = config.columns[idx];
+            const columns = config.columns[idx] || config.columns[0];
             const ret = {
                 ...getArrayValue(config.options, idx, {}),
                 type: config.types[idx],
@@ -598,6 +599,9 @@ const Chart = (props: ChartProp) => {
             if (selectedMarker) {
                 ret.selected = { marker: selectedMarker };
             }
+            if (idx == 0) {
+                baseDataPl = ret;
+            }
             return ret as Data;
         });
         if (changed) {