Add colors to marker properties that can hold a column name (#644)

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/package.json

@@ -11,7 +11,7 @@
     "@mui/x-tree-view": "^6.17.0",
     "apache-arrow": "^10.0.1",
     "axios": "^1.2.0",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.0",
@@ -96,7 +96,7 @@
     "css-loader": "^6.5.0",
     "css-mediaquery": "^0.1.2",
     "dotenv-webpack": "^8.0.0",
-    "dts-bundle-generator": "^8.0.0",
+    "dts-bundle-generator": "^9.2.1",
     "eslint": "^8.3.0",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",

frontend/taipy-gui/src/components/Taipy/Chart.tsx

@@ -156,9 +156,9 @@ const getDecimatorsPayload = (
 
 const selectedPropRe = /selected(\d+)/;
 
-const MARKER_TO_COL = ["color", "size", "symbol", "opacity"];
+const MARKER_TO_COL = ["color", "size", "symbol", "opacity", "colors"];
 
-const isOnClick = (types: string[]) => (types?.length ? types.every(t => t === "pie") : false);
+const isOnClick = (types: string[]) => (types?.length ? types.every((t) => t === "pie") : false);
 
 interface WithpointNumbers {
     pointNumbers: number[];
@@ -166,10 +166,11 @@ interface WithpointNumbers {
 const getPlotIndex = (pt: PlotDatum) =>
     pt.pointIndex === undefined
         ? pt.pointNumber === undefined
-        ? (pt as unknown as WithpointNumbers).pointNumbers?.length
-            ? (pt as unknown as WithpointNumbers).pointNumbers[0]
-            : 0
-        : pt.pointNumber : pt.pointIndex;
+            ? (pt as unknown as WithpointNumbers).pointNumbers?.length
+                ? (pt as unknown as WithpointNumbers).pointNumbers[0]
+                : 0
+            : pt.pointNumber
+        : pt.pointIndex;
 
 const defaultConfig = {
     columns: {} as Record<string, ColumnDesc>,
@@ -362,7 +363,7 @@ const Chart = (props: ChartProp) => {
                   ret.marker = getArrayValue(config.markers, idx, ret.marker || {});
                   MARKER_TO_COL.forEach((prop) => {
                       const val = (ret.marker as Record<string, unknown>)[prop];
-                      if (val !== undefined && typeof val === "string") {
+                      if (typeof val === "string") {
                           const arr = getValueFromCol(datum, val as string);
                           if (arr.length) {
                               (ret.marker as Record<string, unknown>)[prop] = arr;

taipy/gui/utils/chart_config_builder.py

@@ -80,7 +80,7 @@ __CHART_AXIS: t.Dict[str, t.Tuple[_Chart_iprops, ...]] = {
     "waterfall": (_Chart_iprops.x, _Chart_iprops.y, _Chart_iprops.measure),
 }
 __CHART_DEFAULT_AXIS: t.Tuple[_Chart_iprops, ...] = (_Chart_iprops.x, _Chart_iprops.y, _Chart_iprops.z)
-__CHART_MARKER_TO_COLS: t.Tuple[str, ...] = ("color", "size", "symbol", "opacity")
+__CHART_MARKER_TO_COLS: t.Tuple[str, ...] = ("color", "size", "symbol", "opacity", "colors")
 __CHART_NO_INDEX: t.Tuple[str, ...] = ("pie", "histogram", "heatmap", "funnelarea")
 _CHART_NAMES: t.Tuple[str, ...] = tuple(e.name[1:] if e.name[0] == "_" else e.name for e in _Chart_iprops)