@devgateway/dvz-wp-commons 1.2.0 → 1.3.0

package/build/ChartColors.cjs

@@ -0,0 +1,593 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sequential = exports.diverging = exports.categorical = exports.ChartColors = void 0;
+var _components = require("@wordpress/components");
+var _blockEditor = require("@wordpress/block-editor");
+var _i18n = require("@wordpress/i18n");
+var _react = require("react");
+var _papaparse = _interopRequireDefault(require("papaparse"));
+var _element = require("@wordpress/element");
+var _APIutils = require("./APIutils.cjs");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const OVERALL = "Overall";
+const system = [{
+  value: "system",
+  label: "System Colors"
+}, {
+  value: "manual",
+  label: "Manual Colors"
+}];
+const categorical = exports.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"
+}];
+const sequential = exports.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"
+}];
+const diverging = exports.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 ChartColors = props => {
+  const {
+    allDimensions,
+    allFilters,
+    allMeasures,
+    allCategories,
+    allApps,
+    setAttributes,
+    attributes: {
+      swap,
+      measures,
+      manualColors,
+      scheme,
+      colorBy,
+      dimension1,
+      dimension2,
+      barColor,
+      type,
+      app,
+      csv,
+      includeOverall
+    }
+  } = 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 = (0, _i18n.__)("Measure Labels");
+      d3Label = (0, _i18n.__)("Measure Values");
+    } else if (dimension2 != "none") {
+      d2Label = allDimensions ? "2nd Dimension - " + allDimensions.filter(d => d.value == dimension2)[0].label : null;
+      d3Label = (0, _i18n.__)("Measure Values");
+    }
+  } else {
+    const data = _papaparse.default.parse(csv, {
+      header: true,
+      dynamicTyping: true
+    });
+    l1Label = data.meta.fields.length > 0 ? "1st Column Values " : null;
+    d2Label = (0, _i18n.__)("Measure Columns Labels");
+    d3Label = (0, _i18n.__)("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({
+        colorBy: "index"
+      });
+      return null;
+    }
+    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] = (0, _element.useState)("dimension");
+  (0, _react.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": {}
+          }
+        });
+      }
+    }
+    prevStatus.current = {
+      scheme,
+      colorBy,
+      dimension1,
+      dimension2,
+      useColors,
+      app
+    };
+  }, [scheme, dimension1, dimension2, colorBy, swap, app, type]);
+  const prevStatus = (0, _element.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;
+    }
+    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(_blockEditor.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 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(_blockEditor.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: (0, _APIutils.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);
+            }
+          });
+          if (includeOverall) {
+            list.push(/* @__PURE__ */React.createElement(_blockEditor.PanelColorSettings, {
+              colorSettings: [{
+                value: manualColors[app][OVERALL],
+                onChange: color => {
+                  if (color) {
+                    updateColor(OVERALL, color);
+                  } else {
+                    updateColor(OVERALL, "#eeeeee");
+                  }
+                },
+                label: (0, _i18n.__)("Overall")
+              }]
+            }));
+          }
+          return list;
+        } else {
+          return null;
+        }
+      }
+    }
+    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(_blockEditor.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: (0, _i18n.__)(item.label)
+            }]
+          });
+        });
+        if (includeOverall && selectedMeasures2.length == 1) {
+          list.push(/* @__PURE__ */React.createElement(_blockEditor.PanelColorSettings, {
+            colorSettings: [{
+              value: manualColors[app][OVERALL],
+              onChange: color => {
+                if (color) {
+                  updateColor(OVERALL, color);
+                } else {
+                  updateColor(OVERALL, "#eeeeee");
+                }
+              },
+              label: (0, _i18n.__)("Overall")
+            }]
+          }));
+        }
+        return list;
+      }
+    }
+    return null;
+  };
+  const csvColors = () => {
+    const data = _papaparse.default.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(_blockEditor.PanelColorSettings, {
+          colorSettings: [{
+            value: colorByColors[v],
+            onChange: color => {
+              if (color) {
+                updateColor(v, color, colorBy);
+              }
+            },
+            label: (0, _i18n.__)(v)
+          }]
+        });
+      });
+    }
+    return null;
+  };
+  const elements = [];
+  if (type == "bar" || type == "line") {
+    elements.push(/* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.SelectControl, {
+      label: (0, _i18n.__)("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(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.SelectControl, {
+    label: (0, _i18n.__)("Color Scheme"),
+    value: [scheme],
+    onChange: value => {
+      setAttributes({
+        scheme: value
+      });
+    },
+    options
+  })), scheme == "plain_color" && /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_blockEditor.PanelColorSettings, {
+    title: (0, _i18n.__)("Color settings"),
+    colorSettings: [{
+      value: decodeURIComponent(barColor),
+      onChange: color => {
+        if (color) {
+          setAttributes({
+            barColor: encodeURIComponent(color)
+          });
+        } else {
+          setAttributes({
+            barColor: null
+          });
+        }
+      },
+      label: (0, _i18n.__)("Plain color")
+    }]
+  })), scheme == "manual" && /* @__PURE__ */React.createElement(_components.PanelRow, null, app != "csv" && useColors == "dimension" && colorBy == "index" && /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("Set Colors")
+  }, catColors(dimension1)), app != "csv" && useColors == "dimension" && colorBy == "id" && dimension2 != "none" && /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("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(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("Set Colors")
+  }, catColors(dimension1)), app != "csv" && useColors === "measure" && /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("Set Color By Measure")
+  }, measureColors()), app == "csv" && /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("Set Colors")
+  }, csvColors(colorBy)))];
+};
+exports.ChartColors = ChartColors;

package/build/ChartColors.d.ts

@@ -11,4 +11,3 @@ export const diverging: {
     label: string;
 }[];
 export function ChartColors(props: any): (false | import("react").JSX.Element)[] | null;
-export default ChartColors;