@devgateway/dvz-wp-commons 1.1.0 → 1.3.0

package/build/ChartColors.js

@@ -1,401 +1,452 @@
-import React, { useEffect } from "react";
-import { PanelBody, PanelRow, SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import Papa from 'papaparse';
-import { useRef, useState } from "@wordpress/element";
-import { getTranslation } from "./APIutils";
+import { PanelBody, PanelRow, SelectControl } from "@wordpress/components";
 import { PanelColorSettings } from "@wordpress/block-editor";
-const OVERALL = 'Overall';
-const system = [{ value: "system", label: 'System Colors' }, { value: "manual", label: 'Manual Colors' }];
-export const categorical = [{ value: "nivo", label: 'nivo' }, {
-        value: "category10", label: 'category10'
-    }, { value: "accent", label: 'Accent' }, { value: "dark2", label: 'dark2' }, {
-        value: "paired", label: 'paired'
-    }, { value: "pastel1", label: 'pastel1' }, { value: "pastel2", label: 'pastel2' }, {
-        value: "set1", label: 'set1'
-    }, { value: "set2", label: 'set2' }, { value: "set3", label: 'set3' }];
-export const sequential = [{ value: "blues", label: 'blues' }, { value: "greens", label: 'greens' }, {
-        value: "greys", label: 'greys'
-    }, { value: "oranges", label: 'oranges' }, { value: "purples", label: 'purples' }, {
-        value: "reds", label: 'reds'
-    }, { value: "blue_green", label: 'blue_green' }, { value: "blue_purple", label: 'blue_purple' }, {
-        value: "green_blue", label: 'green_blue'
-    }, { value: "orange_red", label: 'orange_red' }, {
-        value: "purple_blue_green", label: 'purple_blue_green'
-    }, { value: "purple_blue", label: 'purple_blue' }, { value: "purple_red", label: 'purple_red' }, {
-        value: "red_purple", label: 'red_purple'
-    }, { value: "yellow_green_blue", label: 'yellow_green_blue' }, {
-        value: "yellow_green", label: 'yellow_green'
-    }, { value: "yellow_orange_brown", label: 'yellow_orange_brown' }, {
-        value: "yellow_orange_red", label: 'yellow_orange_brown'
-    }];
-export const diverging = [{ value: "brown_blueGreen", label: 'brown_blueGreen' },
-    { value: "purpleRed_green", label: 'purpleRed_green' },
-    { value: "pink_yellowGreen", label: 'pink_yellowGreen' },
-    { value: "purple_orange", label: 'purple_orange' },
-    { value: "red_blue", label: 'red_blue' },
-    { value: "red_grey", label: 'red_grey' },
-    { value: "red_yellow_blue", label: 'red_yellow_blue' },
-    { value: "red_yellow_green", label: 'red_yellow_green' },
-    { value: "spectral", label: 'spectral' }
+import { __ } from "@wordpress/i18n";
+import { useEffect } from "react";
+import Papa from "papaparse";
+import { useRef, useState } from "@wordpress/element";
+import { getTranslation } from "./APIutils.js";
+const OVERALL = "Overall";
+const system = [{ value: "system", label: "System Colors" }, { value: "manual", label: "Manual Colors" }];
+export const categorical = [{ value: "nivo", label: "nivo" }, {
+  value: "category10",
+  label: "category10"
+}, { value: "accent", label: "Accent" }, { value: "dark2", label: "dark2" }, {
+  value: "paired",
+  label: "paired"
+}, { value: "pastel1", label: "pastel1" }, { value: "pastel2", label: "pastel2" }, {
+  value: "set1",
+  label: "set1"
+}, { value: "set2", label: "set2" }, { value: "set3", label: "set3" }];
+export const sequential = [{ value: "blues", label: "blues" }, { value: "greens", label: "greens" }, {
+  value: "greys",
+  label: "greys"
+}, { value: "oranges", label: "oranges" }, { value: "purples", label: "purples" }, {
+  value: "reds",
+  label: "reds"
+}, { value: "blue_green", label: "blue_green" }, { value: "blue_purple", label: "blue_purple" }, {
+  value: "green_blue",
+  label: "green_blue"
+}, { value: "orange_red", label: "orange_red" }, {
+  value: "purple_blue_green",
+  label: "purple_blue_green"
+}, { value: "purple_blue", label: "purple_blue" }, { value: "purple_red", label: "purple_red" }, {
+  value: "red_purple",
+  label: "red_purple"
+}, { value: "yellow_green_blue", label: "yellow_green_blue" }, {
+  value: "yellow_green",
+  label: "yellow_green"
+}, { value: "yellow_orange_brown", label: "yellow_orange_brown" }, {
+  value: "yellow_orange_red",
+  label: "yellow_orange_brown"
+}];
+export const diverging = [
+  { value: "brown_blueGreen", label: "brown_blueGreen" },
+  { value: "purpleRed_green", label: "purpleRed_green" },
+  { value: "pink_yellowGreen", label: "pink_yellowGreen" },
+  { value: "purple_orange", label: "purple_orange" },
+  { value: "red_blue", label: "red_blue" },
+  { value: "red_grey", label: "red_grey" },
+  { value: "red_yellow_blue", label: "red_yellow_blue" },
+  { value: "red_yellow_green", label: "red_yellow_green" },
+  { value: "spectral", label: "spectral" }
 ];
-const plainColor = { value: "plain_color", label: 'Use Plain color' };
+const plainColor = { value: "plain_color", label: "Use Plain color" };
 export const ChartColors = (props) => {
-    const { allDimensions, allFilters, allMeasures, allCategories, allApps, setAttributes, attributes } = props;
-    const { swap, measures, manualColors, scheme, colorBy, dimension1, dimension2, barColor, type, app, csv, includeOverall } = attributes;
-    let l1Label = null;
-    let d2Label = null;
-    let d3Label = null;
-    const selectedMeasures = measures[app] ? Object.keys(measures[app]).map(k => measures[app][k]).filter(m => m.selected) : [];
-    let colorOptions = [];
-    if (app !== "csv") {
-        l1Label = dimension1 != 'none' && allDimensions ? '1st Dimension - ' + allDimensions.filter(d => d.value == dimension1)[0].label : null;
-        //if one dimensions is selected o
-        if (dimension2 == 'none' && selectedMeasures.length > 0) {
-            d2Label = __("Measure Labels");
-            d3Label = __("Measure Values");
-        }
-        else if (dimension2 != 'none') {
-            //if two dimensions are selected show dimensions 1, dimensions 2 and values
-            d2Label = allDimensions ? '2nd Dimension - ' + allDimensions.filter(d => d.value == dimension2)[0].label : null;
-            d3Label = __("Measure Values");
-        }
+  const {
+    allDimensions,
+    allFilters,
+    allMeasures,
+    allCategories,
+    allApps,
+    setAttributes,
+    attributes: {
+      swap,
+      measures,
+      manualColors,
+      scheme,
+      colorBy,
+      dimension1,
+      dimension2,
+      barColor,
+      type,
+      app,
+      csv,
+      includeOverall
     }
-    else {
-        //CSV Color Options
-        const data = Papa.parse(csv, { header: true, dynamicTyping: true });
-        l1Label = data.meta.fields && data.meta.fields.length > 0 ? '1st Column Values ' : null;
-        d2Label = __("Measure Columns Labels");
-        d3Label = __("Measure Columns Values");
+  } = props;
+  let l1Label;
+  let d2Label;
+  let d3Label;
+  const selectedMeasures = measures[app] ? Object.keys(measures[app]).map((k) => measures[app][k]).filter((m) => m.selected) : [];
+  let colorOptions = [];
+  if (app !== "csv") {
+    l1Label = dimension1 != "none" && allDimensions ? "1st Dimension - " + allDimensions.filter((d) => d.value == dimension1)[0].label : null;
+    if (dimension2 == "none" && selectedMeasures.length > 0) {
+      d2Label = __("Measure Labels");
+      d3Label = __("Measure Values");
+    } else if (dimension2 != "none") {
+      d2Label = allDimensions ? "2nd Dimension - " + allDimensions.filter((d) => d.value == dimension2)[0].label : null;
+      d3Label = __("Measure Values");
     }
-    if (type == 'bar') {
-        if (swap && dimension2 == "none" && selectedMeasures.length > 0) {
-            colorOptions = [];
-            if (l1Label) {
-                colorOptions.push({ label: l1Label, value: 'id' });
-                if (d2Label) {
-                    colorOptions.push({ label: d2Label, value: 'index' });
-                }
-            }
-            else {
-                if (d2Label) {
-                    colorOptions.push({ label: d2Label, value: 'id' });
-                }
-                colorOptions.push({ label: "Measure Values", value: 'values' });
-            }
-        }
-        else {
-            colorOptions = [];
-            if (l1Label && l1Label !== 'none') {
-                colorOptions.push({ label: l1Label, value: 'index' });
-            }
-            if (d2Label && d2Label !== 'none') {
-                colorOptions.push({ label: d2Label, value: (l1Label && l1Label !== 'none') ? 'id' : 'index' });
-            }
-            if (d3Label && d3Label !== 'none') {
-                colorOptions.push({ label: d3Label, value: 'values' });
-            }
-        }
+  } else {
+    const data = Papa.parse(csv, { header: true, dynamicTyping: true });
+    l1Label = data.meta.fields.length > 0 ? "1st Column Values " : null;
+    d2Label = __("Measure Columns Labels");
+    d3Label = __("Measure Columns Values");
+  }
+  if (type == "bar" || type == "line") {
+    if (swap && dimension2 == "none" && selectedMeasures.length > 0) {
+      colorOptions = [];
+      if (l1Label) {
+        colorOptions.push({ label: l1Label, value: "id" });
+        colorOptions.push({ label: d2Label, value: "index" });
+      } else {
+        colorOptions.push({ label: d2Label, value: "id" });
+        colorOptions.push({ label: "Measure Values", value: "values" });
+      }
+    } else {
+      colorOptions = [];
+      if (l1Label && l1Label !== "none") {
+        colorOptions.push({ label: l1Label, value: "index" });
+      }
+      if (d2Label && d2Label !== "none") {
+        colorOptions.push({ label: d2Label, value: l1Label && l1Label !== "none" ? "id" : "index" });
+      }
+      if (d3Label && d3Label !== "none") {
+        colorOptions.push({ label: d3Label, value: "values" });
+      }
     }
-    if (type == 'pie') {
-        if (dimension1 != 'none' && dimension2 == 'none' && colorBy != 'index') {
-            setAttributes({ ...attributes, colorBy: 'index' });
-            return null;
-        }
-        if (dimension1 != 'none' && dimension2 != 'none' && colorBy != 'id') {
-            setAttributes({ ...attributes, colorBy: 'id' });
-            return null;
-        }
+  }
+  if (type == "pie") {
+    if (dimension1 != "none" && dimension2 == "none" && colorBy != "index") {
+      setAttributes({ colorBy: "index" });
+      return null;
     }
-    let options = [];
-    if (colorBy === 'index' || colorBy === 'id') {
-        if (type == "bar") {
-            options = [...system, plainColor, ...categorical, ...sequential];
-        }
-        else if (type == "line") {
-            options = [...system, plainColor, ...categorical];
-        }
-        else {
-            options = [...system, ...categorical, ...sequential];
+    if (dimension1 != "none" && dimension2 != "none" && colorBy != "id") {
+      setAttributes({ colorBy: "id" });
+      return null;
+    }
+  }
+  let options = [];
+  if (colorBy === "index" || colorBy === "id") {
+    if (type == "bar") {
+      options = [...system, plainColor, ...categorical, ...sequential];
+    } else if (type == "line") {
+      options = [...system, plainColor, ...categorical];
+    } else {
+      options = [...system, ...categorical, ...sequential];
+    }
+  }
+  if (colorBy === "values") {
+    options = [...sequential];
+  }
+  const [useColors, setUseColors] = useState("dimension");
+  useEffect(() => {
+    let nextUseColors = useColors;
+    if (app != "csv") {
+      if (dimension2 == "none" && colorBy === "index" && swap || dimension1 == "none" && dimension2 == "none") {
+        nextUseColors = "measure";
+      } else if (dimension2 == "none" && colorBy === "id" && !swap) {
+        nextUseColors = "measure";
+      } else {
+        nextUseColors = "dimension";
+      }
+      if (prevStatus.current) {
+        if (nextUseColors == "dimension") {
+          if (prevStatus.current["scheme"] != scheme && scheme === "manual") {
+            initColors(colorBy === "index" ? dimension1 : dimension2);
+          }
+          if (prevStatus.current["colorBy"] != colorBy) {
+            initColors(colorBy === "index" ? dimension1 : dimension2);
+          }
+          if (prevStatus.current["dimension1"] != dimension1 || prevStatus.current["dimension2"] != dimension2) {
+            initColors(colorBy === "index" ? dimension1 : dimension2);
+          }
+        } else {
+          initMeasuresColors();
         }
+      }
+      setUseColors(nextUseColors);
+    } else {
+      if (!manualColors["csv"]) {
+        setAttributes({ manualColors: { "csv": {} } });
+      }
     }
-    if (colorBy === 'values') {
-        options = [...sequential];
+    prevStatus.current = { scheme, colorBy, dimension1, dimension2, useColors, app };
+  }, [scheme, dimension1, dimension2, colorBy, swap, app, type]);
+  const prevStatus = useRef();
+  const updateColor = (value, color, colorByMode = null) => {
+    const newColors = Object.assign({}, manualColors);
+    if (colorByMode) {
+      if (!newColors[app][colorByMode]) {
+        newColors[app][colorByMode] = {};
+      }
+      newColors[app][colorByMode][value] = color;
+    } else {
+      newColors[app][value] = color;
     }
-    const [useColors, setUseColors] = useState("dimension");
-    useEffect(() => {
-        let nextUseColors = useColors;
-        if (app != "csv") {
-            // All conditions for coloring by measures
-            if ((dimension2 == "none" && colorBy === "index" && swap) ||
-                (type == 'line') ||
-                (dimension1 == "none" && dimension2 == "none")) { //Multi measure colored by first dimension but  swapped (Colored by Measure) or dimensionless bar charts
-                nextUseColors = "measure";
-            }
-            else if (dimension2 == "none" && colorBy === "id" && !swap) { //Multi Measure chart colored by  (Measure)
-                nextUseColors = "measure";
-            }
-            else {
-                //colored by a dimensions
-                nextUseColors = "dimension";
-            }
-            if (prevStatus.current) {
-                if (nextUseColors == "dimension") {
-                    if (prevStatus.current["scheme"] != scheme && scheme === "manual") {
-                        initColors(colorBy === "index" ? dimension1 : dimension2);
-                    }
-                    if (prevStatus.current["colorBy"] != colorBy) {
-                        initColors(colorBy === "index" ? dimension1 : dimension2);
+    setAttributes({ manualColors: newColors });
+  };
+  const initColors = (dimension) => {
+    const ds = allDimensions.filter((d) => d.value == dimension);
+    const newColors = Object.assign({}, manualColors);
+    if (!newColors[app]) {
+      newColors[app] = {};
+    }
+    if (ds.length > 0) {
+      const { type: type2 } = ds[0];
+      const cat = allCategories.filter((a) => a.type === type2);
+      if (cat.length > 0) {
+        cat[0].items.forEach((item) => {
+          if (!newColors[app][item.code]) {
+            newColors[app][item.code] = item.categoryStyle ? item.categoryStyle.color : "#eeeeee";
+          }
+        });
+      }
+      setAttributes({ manualColors: newColors });
+    }
+  };
+  const initMeasuresColors = () => {
+    const newColors = Object.assign({}, manualColors);
+    if (!newColors[app]) {
+      newColors[app] = {};
+    }
+    if (!allMeasures) {
+    }
+    if (allMeasures) {
+      allMeasures.forEach((p) => {
+        if (!newColors[app][p.value]) {
+          newColors[app][p.value] = p.styles ? p.styles.color : "#eeeeee";
+        }
+      });
+    }
+    setAttributes({ manualColors: newColors });
+  };
+  const combinedCatColors = (dimension12, dimension22) => {
+    if (manualColors[app]) {
+      const ds1 = allDimensions.filter((d) => d.value == dimension12);
+      const ds2 = allDimensions.filter((d) => d.value == dimension22);
+      if (ds1.length > 0 && ds2.length > 0) {
+        const { type: type2 } = ds1[0];
+        const { type: type22 } = ds2[0];
+        const cat = allCategories.filter((a) => a.type === type2);
+        const cat2 = allCategories.filter((a) => a.type === type22);
+        const list = [];
+        cat[0].items.sort((a, b) => a.position - b.position).forEach((c1) => {
+          cat2[0].items.sort((a, b) => a.position - b.position).forEach((c2) => {
+            list.push(/* @__PURE__ */ React.createElement(
+              PanelColorSettings,
+              {
+                colorSettings: [{
+                  value: manualColors[app][c1.value + " - " + c2.value],
+                  onChange: (color) => {
+                    if (color) {
+                      updateColor(c1.value + " - " + c2.value, color);
+                    } else {
+                      updateColor(c1.value + " - " + c2.value, "#eeeeee");
                     }
-                    if (prevStatus.current["dimension1"] != dimension1 || prevStatus.current["dimension2"] != dimension2) {
-                        initColors(colorBy === "index" ? dimension1 : dimension2);
+                  },
+                  label: c1.value + " - " + c2.value
+                }]
+              }
+            ));
+          });
+        });
+        return list;
+      }
+    }
+    return null;
+  };
+  const catColors = (dimension) => {
+    if (manualColors[app]) {
+      const ds = allDimensions.filter((d) => d.value == dimension);
+      if (ds.length > 0) {
+        const { type: type2 } = ds[0];
+        const cat = allCategories.filter((a) => a.type === type2);
+        if (cat && cat.length > 0) {
+          const list = cat[0].items.filter((c) => c.code !== null && c.code !== void 0 && c.code !== "").sort((a, b) => b.position - a.position).map((item) => {
+            return /* @__PURE__ */ React.createElement(
+              PanelColorSettings,
+              {
+                colorSettings: [{
+                  value: manualColors[app][item.code],
+                  onChange: (color) => {
+                    if (color) {
+                      updateColor(item.code, color);
+                    } else {
+                      updateColor(item.code, item.categoryStyle ? item.categoryStyle.color : "#eeeeee");
                     }
-                }
-                else {
-                    initMeasuresColors();
-                }
-            }
-            setUseColors(nextUseColors);
-        }
-        else {
-            if (!manualColors["csv"]) {
-                setAttributes({ ...attributes, manualColors: { "csv": {} }, colorBy: colorBy || "" });
+                  },
+                  label: getTranslation(item)
+                }]
+              }
+            );
+          });
+          const dimensions = [dimension1, dimension2].filter((f) => f != "" && f != "none");
+          let selectedMeasures2 = [];
+          allMeasures.forEach((m) => {
+            if (measures[app] && measures[app][m.value] && measures[app][m.value].selected) {
+              selectedMeasures2.push(m.value);
             }
-        }
-        prevStatus.current = { scheme, colorBy: colorBy || "", dimension1, dimension2, useColors, app };
-    }, [scheme, dimension1, dimension2, colorBy, swap, app, type]);
-    const prevStatus = useRef(undefined);
-    const updateColor = (value, color) => {
-        const newColors = Object.assign({}, manualColors);
-        newColors[app][value] = color;
-        setAttributes({ ...attributes, manualColors: newColors, colorBy: colorBy || "" });
-    };
-    const initColors = (dimension) => {
-        const ds = allDimensions?.filter(d => d.value == dimension);
-        const newColors = Object.assign({}, manualColors);
-        if (!newColors[app]) {
-            newColors[app] = {};
-        }
-        if (ds && ds.length > 0) {
-            const { type } = ds[0];
-            const cat = allCategories?.filter(a => a.type === type);
-            if (cat && cat.length > 0) {
-                cat[0].items.forEach(item => {
-                    if (!newColors[app][item.code]) {
-                        newColors[app][item.code] = item.categoryStyle ? item.categoryStyle.color : "#eeeeee";
+          });
+          if (includeOverall) {
+            list.push(/* @__PURE__ */ React.createElement(
+              PanelColorSettings,
+              {
+                colorSettings: [{
+                  value: manualColors[app][OVERALL],
+                  onChange: (color) => {
+                    if (color) {
+                      updateColor(OVERALL, color);
+                    } else {
+                      updateColor(OVERALL, "#eeeeee");
                     }
-                });
-            }
-            setAttributes({ ...attributes, manualColors: newColors });
-        }
-    };
-    const initMeasuresColors = () => {
-        const newColors = Object.assign({}, manualColors);
-        if (!newColors[app]) {
-            newColors[app] = {};
-        }
-        if (!allMeasures) {
+                  },
+                  label: __("Overall")
+                }]
+              }
+            ));
+          }
+          return list;
+        } else {
+          return null;
         }
-        if (allMeasures) {
-            allMeasures.forEach(p => {
-                if (!newColors[app][p.value]) {
-                    newColors[app][p.value] = p.styles ? p.styles.color : "#eeeeee";
-                }
-            });
-        }
-        setAttributes({ ...attributes, manualColors: newColors });
-    };
-    const combinedCatColors = (dimension1, dimension2) => {
-        if (manualColors[app]) {
-            const ds1 = allDimensions?.filter(d => d.value == dimension1);
-            const ds2 = allDimensions?.filter(d => d.value == dimension2);
-            if (ds1 && ds1.length > 0 && ds2 && ds2.length > 0) {
-                const { type } = ds1[0];
-                const { type: type2 } = ds2[0];
-                const cat = allCategories?.filter(a => a.type === type);
-                const cat2 = allCategories?.filter(a => a.type === type2);
-                const list = [];
-                cat?.[0].items.sort((a, b) => (a.position ?? 0) - (b.position ?? 0)).forEach(c1 => {
-                    cat2?.[0].items.sort((a, b) => (a.position ?? 0) - (b.position ?? 0)).forEach(c2 => {
-                        list.push(React.createElement(PanelColorSettings, { colorSettings: [{
-                                    value: manualColors[app][c1.value + ' - ' + c2.value],
-                                    onChange: (color) => {
-                                        if (color) {
-                                            updateColor(c1.value + ' - ' + c2.value, color);
-                                        }
-                                        else {
-                                            updateColor(c1.value + ' - ' + c2.value, "#eeeeee");
-                                        }
-                                    },
-                                    label: c1.value + ' - ' + c2.value
-                                }] }));
-                    });
-                });
-                return list;
+      }
+    }
+    return null;
+  };
+  const measureColors = () => {
+    if (manualColors[app] && allMeasures && measures[app]) {
+      const selectedMeasures2 = allMeasures.filter((m) => Object.keys(measures[app]).indexOf(m.value) > -1 && measures[app][m.value].selected);
+      if (selectedMeasures2.length > 0) {
+        const list = selectedMeasures2.sort((a, b) => b.position - a.position).map((item) => {
+          return /* @__PURE__ */ React.createElement(
+            PanelColorSettings,
+            {
+              colorSettings: [{
+                value: manualColors[app][item.value],
+                onChange: (color) => {
+                  if (color) {
+                    updateColor(item.value, color);
+                  } else {
+                    updateColor(item.value, item.styles ? item.styles.color : "#555555");
+                  }
+                },
+                label: __(item.label)
+              }]
             }
-        }
-        return null;
-    };
-    const catColors = (dimension) => {
-        if (manualColors[app]) {
-            const ds = allDimensions?.filter(d => d.value == dimension);
-            if (ds && ds.length > 0) {
-                const { type } = ds[0];
-                const cat = allCategories?.filter(a => a.type === type);
-                if (cat && cat.length > 0) {
-                    const list = cat[0].items.sort((a, b) => (b.position ?? 0) - (a.position ?? 0)).map(item => {
-                        return React.createElement(PanelColorSettings, { colorSettings: [{
-                                    value: manualColors[app][item.code],
-                                    onChange: (color) => {
-                                        if (color) {
-                                            updateColor(item.code, color);
-                                        }
-                                        else {
-                                            updateColor(item.code, item.categoryStyle ? item.categoryStyle.color : "#eeeeee");
-                                        }
-                                    }, label: getTranslation(item)
-                                }] });
-                    });
-                    const dimensions = [dimension1, dimension2].filter(f => f != '' && f != "none");
-                    let selectedMeasures = [];
-                    allMeasures?.forEach(m => {
-                        if (measures[app] && measures[app][m.value] && measures[app][m.value].selected) {
-                            selectedMeasures.push(m.value);
-                        }
-                    });
-                    if (includeOverall) {
-                        list.push(React.createElement(PanelColorSettings, { colorSettings: [{
-                                    value: manualColors[app][OVERALL],
-                                    onChange: (color) => {
-                                        if (color) {
-                                            updateColor(OVERALL, color);
-                                        }
-                                        else {
-                                            updateColor(OVERALL, "#eeeeee");
-                                        }
-                                    }, label: __("Overall")
-                                }] }));
-                    }
-                    return list;
-                }
-                else {
-                    return null;
-                }
+          );
+        });
+        if (includeOverall && selectedMeasures2.length == 1) {
+          list.push(/* @__PURE__ */ React.createElement(
+            PanelColorSettings,
+            {
+              colorSettings: [{
+                value: manualColors[app][OVERALL],
+                onChange: (color) => {
+                  if (color) {
+                    updateColor(OVERALL, color);
+                  } else {
+                    updateColor(OVERALL, "#eeeeee");
+                  }
+                },
+                label: __("Overall")
+              }]
             }
+          ));
         }
-        return null;
-    };
-    const measureColors = () => {
-        if (manualColors[app] && allMeasures && measures[app]) {
-            const selectedMeasures = allMeasures.filter(m => Object.keys(measures[app]).indexOf(m.value) > -1 && measures[app][m.value].selected);
-            if (selectedMeasures.length > 0) {
-                const list = selectedMeasures.sort((a, b) => b.position - a.position)
-                    .map(item => {
-                    return React.createElement(PanelColorSettings, { colorSettings: [{
-                                value: manualColors[app][item.value], onChange: (color) => {
-                                    if (color) {
-                                        updateColor(item.value, color);
-                                    }
-                                    else {
-                                        updateColor(item.value, item.styles ? item.styles.color : "#555555");
-                                    }
-                                }, label: __(item.label)
-                            }] });
-                });
-                if (includeOverall && selectedMeasures.length == 1) {
-                    list.push(React.createElement(PanelColorSettings, { colorSettings: [{
-                                value: manualColors[app][OVERALL], onChange: (color) => {
-                                    if (color) {
-                                        updateColor(OVERALL, color);
-                                    }
-                                    else {
-                                        updateColor(OVERALL, "#eeeeee");
-                                    }
-                                }, label: __("Overall")
-                            }] }));
+        return list;
+      }
+    }
+    return null;
+  };
+  const csvColors = () => {
+    const data = Papa.parse(csv, { header: true, dynamicTyping: true });
+    const values = [];
+    if (colorBy === "index" && type != "line" || type == "pie") {
+      const field = data.meta.fields[0];
+      values.push(...data.data.map((d) => d[field]));
+    }
+    if (colorBy === "id" || type == "line") {
+      values.push(...data.meta.fields.slice(1));
+    }
+    if (colorBy === "values") {
+      values.push(0, 100);
+    }
+    if (manualColors[app] && values) {
+      return values.map((v) => {
+        const colorByColors = manualColors[app][colorBy] || {};
+        return /* @__PURE__ */ React.createElement(
+          PanelColorSettings,
+          {
+            colorSettings: [{
+              value: colorByColors[v],
+              onChange: (color) => {
+                if (color) {
+                  updateColor(v, color, colorBy);
                 }
-                return list;
-            }
-        }
-        return null;
-    };
-    const csvColors = (colorBy) => {
-        const data = Papa.parse(csv, { header: true, dynamicTyping: true });
-        const values = [];
-        if (colorBy === "index" && type != 'line') {
-            const field = data.meta?.fields?.[0];
-            if (field) {
-                values.push(...data.data.map((d) => d[field]));
-            }
-        }
-        if (colorBy === "id" || type == 'line') {
-            const fields = data.meta?.fields?.slice(1);
-            if (fields) {
-                // Convert string fields to numbers before pushing to values array
-                const numericFields = fields.map(field => Number(field));
-                values.push(...numericFields);
-            }
-        }
-        if (colorBy === "values") {
-            values.push(0, 100);
-        }
-        if (manualColors[app] && values) {
-            return values.map(v => {
-                return React.createElement(PanelColorSettings, { colorSettings: [{
-                            value: manualColors[app][v],
-                            onChange: (color) => {
-                                if (color) {
-                                    updateColor(v.toString(), color);
-                                }
-                            }, label: __(v.toString())
-                        }] });
-            });
-        }
-        return null;
-    };
-    const elements = [];
-    if (type == 'bar') {
-        elements.push(React.createElement(PanelRow, null,
-            React.createElement(SelectControl, { multiple: false, label: __('Color By'), value: colorBy, onChange: (colorBy) => {
-                    setAttributes({ ...attributes, colorBy });
-                    if (colorBy === 'index' || colorBy === 'id') {
-                        setAttributes({ ...attributes, colorBy });
-                    }
-                    if (colorBy === 'values') {
-                        setAttributes({ ...attributes, scheme: "blues", colorBy });
-                    }
-                }, options: colorOptions })));
+              },
+              label: __(v)
+            }]
+          }
+        );
+      });
     }
-    return [
-        ...elements,
-        React.createElement(PanelRow, null,
-            React.createElement(SelectControl, { multiple: false, label: __('Color Scheme'), value: scheme, onChange: (value) => {
-                    setAttributes({ ...attributes, scheme: value });
-                }, options: options })),
-        (scheme == "plain_color") && React.createElement(PanelRow, null,
-            React.createElement(PanelColorSettings, { title: __('Color settings'), colorSettings: [{
-                        value: decodeURIComponent(barColor), onChange: (color) => {
-                            if (color) {
-                                setAttributes({ ...attributes, barColor: encodeURIComponent(color) });
-                            }
-                            else {
-                                setAttributes({ ...attributes, barColor: null });
-                            }
-                        }, label: __('Plain color')
-                    }] })),
-        (scheme == "manual") && React.createElement(PanelRow, null,
-            app != "csv" && useColors == "dimension" && colorBy == "index" &&
-                React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, catColors(dimension1)),
-            app != "csv" && useColors == "dimension" && (colorBy == "id" && dimension2 != "none") &&
-                React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") },
-                    type == 'bar' && catColors(dimension2),
-                    type == 'line' && catColors(dimension2),
-                    type == 'pie' && combinedCatColors(dimension1, dimension2)),
-            app != "csv" && useColors == "dimension" && swap && colorBy == "id" && dimension1 != "none" && dimension2 == "none" &&
-                React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, catColors(dimension1)),
-            app != 'csv' && useColors === "measure" &&
-                React.createElement(PanelBody, { initialOpen: false, title: __("Set Color By Measure") }, measureColors()),
-            app == "csv" && React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, csvColors(colorBy)))
-    ];
+    return null;
+  };
+  const elements = [];
+  if (type == "bar" || type == "line") {
+    elements.push(/* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(
+      SelectControl,
+      {
+        label: __("Color By"),
+        value: [colorBy],
+        onChange: (colorBy2) => {
+          setAttributes({ colorBy: colorBy2 });
+          if (colorBy2 === "index" || colorBy2 === "id") {
+            setAttributes({ colorBy: colorBy2 });
+          }
+          if (colorBy2 === "values") {
+            setAttributes({ scheme: "blues", colorBy: colorBy2 });
+          }
+        },
+        options: colorOptions
+      }
+    )));
+  }
+  if (type == "pie") {
+    setAttributes({ colorBy: "index" });
+  }
+  return [
+    ...elements,
+    /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(
+      SelectControl,
+      {
+        label: __("Color Scheme"),
+        value: [scheme],
+        onChange: (value) => {
+          setAttributes({ scheme: value });
+        },
+        options
+      }
+    )),
+    scheme == "plain_color" && /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(
+      PanelColorSettings,
+      {
+        title: __("Color settings"),
+        colorSettings: [{
+          value: decodeURIComponent(barColor),
+          onChange: (color) => {
+            if (color) {
+              setAttributes({ barColor: encodeURIComponent(color) });
+            } else {
+              setAttributes({ barColor: null });
+            }
+          },
+          label: __("Plain color")
+        }]
+      }
+    )),
+    scheme == "manual" && /* @__PURE__ */ React.createElement(PanelRow, null, app != "csv" && useColors == "dimension" && colorBy == "index" && /* @__PURE__ */ React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, catColors(dimension1)), app != "csv" && useColors == "dimension" && (colorBy == "id" && dimension2 != "none") && /* @__PURE__ */ React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, type == "bar" && catColors(dimension2), type == "line" && catColors(dimension2), type == "pie" && combinedCatColors(dimension1, dimension2)), app != "csv" && useColors == "dimension" && swap && colorBy == "id" && dimension1 != "none" && dimension2 == "none" && /* @__PURE__ */ React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, catColors(dimension1)), app != "csv" && useColors === "measure" && /* @__PURE__ */ React.createElement(PanelBody, { initialOpen: false, title: __("Set Color By Measure") }, measureColors()), app == "csv" && /* @__PURE__ */ React.createElement(PanelBody, { initialOpen: false, title: __("Set Colors") }, csvColors(colorBy)))
+  ];
 };
-export default ChartColors;