@devgateway/dvz-wp-commons 1.2.0 → 1.3.0

package/build/ChartMeasures.js

@@ -1,116 +1,204 @@
-import { __ } from '@wordpress/i18n';
-import { CheckboxControl, PanelBody, PanelRow, SelectControl, ToggleControl, TextControl } from '@wordpress/components';
-import Format from './Format';
-import { togglePanel } from "./Util";
-import { getTranslation } from "./APIutils";
+import { __ } from "@wordpress/i18n";
+import { CheckboxControl, PanelBody, PanelRow, SelectControl, ToggleControl, TextControl } from "@wordpress/components";
+import Format from "./Format.js";
+import { togglePanel } from "./Util.js";
+import { getTranslation } from "./APIutils.js";
 const defaultFormat = {
-    "style": "percent",
-    "minimumFractionDigits": 1,
-    "maximumFractionDigits": 1,
-    "currency": "USD"
+  "style": "percent",
+  "minimumFractionDigits": 1,
+  "maximumFractionDigits": 1,
+  "currency": "USD"
 };
 export const ChartMeasures = (props) => {
-    const { onMeasuresChange, onFormatChange, onUseCustomAxisFormatChange, onSetSingleMeasure, onCustomLabelToggleChange, onCustomLabelChange, allMeasures, setAttributes, title, attributes: { panelStatus, measures, dimension1, dimension2, type, app } } = props;
-    const MToggle = ({ measure }) => {
-        const userMeasure = measures[app] ? measures[app][measure.value] : {};
-        return (React.createElement(ToggleControl, { label: getTranslation(measure), checked: userMeasure ? userMeasure.selected : false, onChange: (value) => onMeasuresChange(measure.value) }));
-    };
-    const MCheckbox = ({ measure }) => {
-        const userMeasure = measures[app] ? measures[app][measure.value] : {};
-        return React.createElement(CheckboxControl, { label: getTranslation(measure), checked: userMeasure ? userMeasure.selected : false, onChange: (value) => onSetSingleMeasure(measure.value) });
-    };
-    const MeasureOptions = ({ measure, single }) => {
-        return React.createElement(PanelRow, null,
-            single && React.createElement(MCheckbox, { measure: measure }),
-            !single && React.createElement(MToggle, { measure: measure }));
-    };
-    const countSelected = (g) => {
-        if (measures[app]) {
-            const mG = allMeasures.filter(f => getTranslation(f.group) === g);
-            let count = 0;
-            Object.keys(measures[app]).filter(l => mG.map(m => m.value).indexOf(l) > -1).forEach(k => {
-                if (measures[app][k].selected) {
-                    count++;
-                }
-            });
-            return count;
+  const {
+    onMeasuresChange,
+    onFormatChange,
+    onUseCustomAxisFormatChange,
+    onSetSingleMeasure,
+    onCustomLabelToggleChange,
+    onCustomLabelChange,
+    allMeasures,
+    setAttributes,
+    title,
+    attributes: {
+      panelStatus,
+      measures,
+      dimension1,
+      dimension2,
+      type,
+      app
+    }
+  } = props;
+  const MToggle = ({ measure }) => {
+    const userMeasure = measures[app] ? measures[app][measure.value] : {};
+    return /* @__PURE__ */ React.createElement(
+      ToggleControl,
+      {
+        label: getTranslation(measure),
+        checked: userMeasure ? userMeasure.selected : false,
+        onChange: (value) => onMeasuresChange(measure.value)
+      }
+    );
+  };
+  const MCheckbox = ({ measure }) => {
+    const userMeasure = measures[app] ? measures[app][measure.value] : {};
+    return /* @__PURE__ */ React.createElement(
+      CheckboxControl,
+      {
+        label: getTranslation(measure),
+        checked: userMeasure ? userMeasure.selected : false,
+        onChange: (value) => onSetSingleMeasure(measure.value)
+      }
+    );
+  };
+  const MeasureOptions = ({ measure, single }) => {
+    return /* @__PURE__ */ React.createElement(PanelRow, null, single && /* @__PURE__ */ React.createElement(MCheckbox, { measure }), !single && /* @__PURE__ */ React.createElement(MToggle, { measure }));
+  };
+  const countSelected = (g) => {
+    if (measures[app]) {
+      const mG = allMeasures.filter((f) => getTranslation(f.group) === g);
+      let count = 0;
+      Object.keys(measures[app]).filter((l) => mG.map((m) => m.value).indexOf(l) > -1).forEach((k) => {
+        if (measures[app][k].selected) {
+          count++;
         }
-        return 0;
-    };
-    const countTotal = (g) => {
-        if (g) {
-            return allMeasures.filter(f => getTranslation(f.group) === g).length;
-        }
-        return 0;
-    };
-    const getSelectedMeasures = () => {
-        if (measures[app] && allMeasures) {
-            return Object.keys(measures[app]).filter(k => measures[app][k].selected).map(k => {
-                return allMeasures.filter(m => m.value === k)[0];
-            }).filter(m => m);
-        }
-        return [];
-    };
-    const selectedMeasures = getSelectedMeasures();
-    return React.createElement(React.Fragment, null,
-        React.createElement(PanelBody, { title: title ? title : __("Measures"), initialOpen: panelStatus["MEASURES"], onToggle: e => togglePanel("MEASURES", panelStatus, setAttributes) },
-            /*
-             Multiple measures conditions
-
-             Bar:
-             no dimensions selected
-             one dimension is selected
-             -  not available when second dimension gets selected
-
+      });
+      return count;
+    }
+    return 0;
+  };
+  const countTotal = (g) => {
+    if (g) {
+      return allMeasures.filter((f) => getTranslation(f.group) === g).length;
+    }
+    return 0;
+  };
+  const getSelectedMeasures = () => {
+    if (measures[app] && allMeasures) {
+      return Object.keys(measures[app]).filter((k) => measures[app][k].selected).map((k) => {
+        return allMeasures.filter((m) => m.value === k)[0];
+      }).filter((m) => m);
+    }
+    return [];
+  };
+  const selectedMeasures = getSelectedMeasures();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    PanelBody,
+    {
+      title: title ? title : __("Measures"),
+      initialOpen: panelStatus["MEASURES"],
+      onToggle: (e) => togglePanel("MEASURES", panelStatus, setAttributes)
+    },
+    /*
+                 Multiple measures conditions
+    
+                 Bar:
+                 no dimensions selected
+                 one dimension is selected
+                 -  not available when second dimension gets selected
+    
+                 Line:
+                   - Always multi measure as measures represents line series, one dimension should always be selected
+    
+                 Pie:
+                      no dimensions selected
+                       -  not available when any dimension is selected
+                 */
+    (type == "line" || type == "bar" && dimension2 == "none" || type == "pie" && dimension1 == "none" && dimension2 == "none") && allMeasures && [...new Set(allMeasures.map((p) => getTranslation(p.group)))].map(
+      (g) => {
+        return /* @__PURE__ */ React.createElement(
+          PanelBody,
+          {
+            initialOpen: panelStatus[g],
+            onToggle: (e) => togglePanel(g, panelStatus, setAttributes),
+            title: `${g} (${countSelected(g)} / ${countTotal(g)} ) `
+          },
+          allMeasures.filter((f) => getTranslation(f.group) === g).map((m) => /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(MeasureOptions, { single: false, measure: m })))
+        );
+      }
+    ),
+    /*Single measure conditions
+    
+            Bar:
+                   2 dimensions selected
              Line:
-               - Always multi measure as measures represents line series, one dimension should always be selected
-
+                    never
              Pie:
-                  no dimensions selected
-                   -  not available when any dimension is selected
-             */
-            ((type == 'line') ||
-                (type == 'bar' && dimension2 == 'none') ||
-                (type == 'pie' && dimension1 == 'none' && dimension2 == 'none')) && allMeasures && [...new Set(allMeasures.map(p => getTranslation(p.group)))].map(g => {
-                return (React.createElement(PanelBody, { initialOpen: panelStatus[g], onToggle: e => togglePanel(g, panelStatus, setAttributes), title: `${g} (${countSelected(g)} / ${countTotal(g)} ) ` }, allMeasures.filter(f => getTranslation(f.group) === g)
-                    .map(m => React.createElement(PanelRow, null,
-                    React.createElement(MeasureOptions, { single: false, measure: m })))));
-            }),
-            /*Single measure conditions
-
-        Bar:
-               2 dimensions selected
-         Line:
-                never
-         Pie:
-              any dimensions selected
-
-        */
-            ((type == 'bar' && dimension2 != 'none') || (type == 'pie' && (dimension1 != 'none' || dimension2 != 'none'))) && allMeasures && [...new Set(allMeasures.map(p => getTranslation(p.group)))].map(g => {
-                return (React.createElement(PanelBody, { initialOpen: panelStatus[g], onToggle: e => togglePanel(g, panelStatus, setAttributes), title: `${g} (${countSelected(g)} / ${allMeasures.filter(f => f.group === g).length} ) ` }, allMeasures.filter(f => getTranslation(f.group) === g)
-                    .map(m => React.createElement(PanelRow, null,
-                    React.createElement(MeasureOptions, { single: true, measure: m })))));
-            }),
-            (type == 'overlay') && allMeasures && React.createElement(SelectControl, { label: "Measure", value: selectedMeasures && selectedMeasures[0] ? selectedMeasures[0].value : null, options: [{ value: '', label: 'Select Measure' }, ...allMeasures], onChange: (measure) => onSetSingleMeasure(measure), __nextHasNoMarginBottom: true }),
-            (type != 'overlay') && React.createElement(PanelBody, { title: __("Format"), initialOpen: panelStatus["FORMAT"], onToggle: e => togglePanel("FORMAT", panelStatus, setAttributes) },
-                React.createElement(Format, { format: measures[app] && measures[app].format ? measures[app].format : defaultFormat, customFormat: measures[app] && measures[app].customFormat ? measures[app].customFormat : defaultFormat, useCustomAxisFormat: measures[app] ? measures[app].useCustomAxisFormat : false, onFormatChange: (format, field) => {
-                        onFormatChange(format, field);
-                    }, onUseCustomAxisFormatChange: value => {
-                        onUseCustomAxisFormatChange(value);
-                    } }))),
-        (type != 'overlay') && selectedMeasures && selectedMeasures.length > 0 &&
-            React.createElement(PanelBody, { title: __("Measure Label Customization"), initialOpen: panelStatus["MEASURES_LABEL_CUSTOMIZATION"], onToggle: e => togglePanel("MEASURES_LABEL_CUSTOMIZATION", panelStatus, setAttributes) }, selectedMeasures && [...new Set(selectedMeasures.map(p => getTranslation(p.group)))].map(g => {
-                return (React.createElement(PanelBody, { initialOpen: panelStatus[g + "_LABEL_CUSTOMIZATION"], onToggle: e => togglePanel(g + "_LABEL_CUSTOMIZATION", panelStatus, setAttributes), title: `${g}` }, selectedMeasures.filter(f => getTranslation(f.group) === g)
-                    .map(m => {
-                    const userMeasure = measures[app] ? measures[app][m.value] : {};
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement(PanelRow, null,
-                            React.createElement(ToggleControl, { label: getTranslation(m), checked: userMeasure ? userMeasure.hasCustomLabel : false, onChange: (value) => onCustomLabelToggleChange(m.value) }),
-                            " "),
-                        userMeasure.hasCustomLabel &&
-                            React.createElement(PanelRow, null,
-                                React.createElement(TextControl, { label: __("Custom Label"), value: userMeasure ? userMeasure.customLabel : "", onChange: (value) => onCustomLabelChange(m.value, value) }))));
-                })));
-            })));
+                  any dimensions selected
+    
+            */
+    (type == "bar" && dimension2 != "none" || type == "pie" && (dimension1 != "none" || dimension2 != "none")) && allMeasures && [...new Set(allMeasures.map((p) => getTranslation(p.group)))].map((g) => {
+      return /* @__PURE__ */ React.createElement(
+        PanelBody,
+        {
+          initialOpen: panelStatus[g],
+          onToggle: (e) => togglePanel(g, panelStatus, setAttributes),
+          title: `${g} (${countSelected(g)} / ${allMeasures.filter((f) => f.group === g).length} ) `
+        },
+        allMeasures.filter((f) => getTranslation(f.group) === g).map((m) => /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(MeasureOptions, { single: true, measure: m })))
+      );
+    }),
+    type == "overlay" && allMeasures && /* @__PURE__ */ React.createElement(
+      SelectControl,
+      {
+        label: "Measure",
+        value: selectedMeasures && selectedMeasures[0] ? selectedMeasures[0].value : null,
+        options: [{ value: "", label: "Select Measure" }, ...allMeasures],
+        onChange: (measure) => onSetSingleMeasure(measure),
+        __nextHasNoMarginBottom: true
+      }
+    ),
+    type != "overlay" && /* @__PURE__ */ React.createElement(
+      PanelBody,
+      {
+        title: __("Format"),
+        initialOpen: panelStatus["FORMAT"],
+        onToggle: (e) => togglePanel("FORMAT", panelStatus, setAttributes)
+      },
+      /* @__PURE__ */ React.createElement(
+        Format,
+        {
+          format: measures[app] && measures[app].format ? measures[app].format : defaultFormat,
+          customFormat: measures[app] && measures[app].customFormat ? measures[app].customFormat : defaultFormat,
+          useCustomAxisFormat: measures[app] ? measures[app].useCustomAxisFormat : false,
+          onFormatChange: (format, field) => {
+            onFormatChange(format, field);
+          },
+          onUseCustomAxisFormatChange: (value) => {
+            onUseCustomAxisFormatChange(value);
+          }
+        }
+      )
+    )
+  ), type != "overlay" && selectedMeasures && selectedMeasures.length > 0 && /* @__PURE__ */ React.createElement(
+    PanelBody,
+    {
+      title: __("Measure Label Customization"),
+      initialOpen: panelStatus["MEASURES_LABEL_CUSTOMIZATION"],
+      onToggle: (e) => togglePanel("MEASURES_LABEL_CUSTOMIZATION", panelStatus, setAttributes)
+    },
+    selectedMeasures && [...new Set(selectedMeasures.map((p) => getTranslation(p.group)))].map(
+      (g) => {
+        return /* @__PURE__ */ React.createElement(
+          PanelBody,
+          {
+            initialOpen: panelStatus[g + "_LABEL_CUSTOMIZATION"],
+            onToggle: (e) => togglePanel(g + "_LABEL_CUSTOMIZATION", panelStatus, setAttributes),
+            title: `${g}`
+          },
+          selectedMeasures.filter((f) => getTranslation(f.group) === g).map((m) => {
+            const userMeasure = measures[app] ? measures[app][m.value] : {};
+            return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(
+              ToggleControl,
+              {
+                label: getTranslation(m),
+                checked: userMeasure ? userMeasure.hasCustomLabel : false,
+                onChange: (value) => onCustomLabelToggleChange(m.value)
+              }
+            ), " "), userMeasure.hasCustomLabel && /* @__PURE__ */ React.createElement(PanelRow, null, /* @__PURE__ */ React.createElement(TextControl, { label: __("Custom Label"), value: userMeasure ? userMeasure.customLabel : "", onChange: (value) => onCustomLabelChange(m.value, value) })));
+          })
+        );
+      }
+    )
+  ));
 };
-export default ChartMeasures;

package/build/Constants.cjs

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_FORMAT_SETTINGS = exports.BLOCKS_NS = exports.BLOCKS_CATEGORY = void 0;
+const DEFAULT_FORMAT_SETTINGS = exports.DEFAULT_FORMAT_SETTINGS = {
+  format: {
+    style: "percent",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  },
+  customFormat: {
+    style: "percent",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  },
+  useCustomAxisFormat: false
+};
+const BLOCKS_CATEGORY = exports.BLOCKS_CATEGORY = 'wp-react-lib-blocks';
+const BLOCKS_NS = exports.BLOCKS_NS = 'viz';

package/build/Constants.js

@@ -11,5 +11,7 @@ export const DEFAULT_FORMAT_SETTINGS = {
     },
     useCustomAxisFormat: false
 };
+
+
 export const BLOCKS_CATEGORY = 'wp-react-lib-blocks';
-export const BLOCKS_NS = 'viz';
+export const BLOCKS_NS = 'viz';

package/build/DataFilters.cjs

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.DataFilters = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+const DataFilters = props => {
+  const updateFilterParam = (param, idx) => {
+    const {
+      attributes: {
+        filters: filters2
+      },
+      setAttributes,
+      allFilters: allFilters2
+    } = props;
+    const newFilters = filters2.slice();
+    const selected = allFilters2.filter(f => f.param === param)[0];
+    newFilters[idx] = {
+      ...selected,
+      value: []
+    };
+    setAttributes({
+      filters: newFilters
+    });
+  };
+  const updateFilterValue = (value, idx) => {
+    const {
+      attributes: {
+        filters: filters2
+      },
+      setAttributes,
+      onChange
+    } = props;
+    const selected = filters2[idx];
+    let values = selected.value;
+    if (values.indexOf(value) > -1) {
+      values = values.filter(v => v != value);
+    } else {
+      values.push(value);
+    }
+    const newFilters = filters2.slice();
+    newFilters[idx].value = values;
+    setAttributes({
+      filters: newFilters
+    });
+    onChange();
+  };
+  const addFilter = () => {
+    const {
+      attributes: {
+        filters: filters2
+      },
+      setAttributes,
+      allFilters: allFilters2
+    } = props;
+    let index = filters2.length > allFilters2.length ? allFilters2.length : filters2.length;
+    const newFilter = allFilters2 && allFilters2.length > 0 ? {
+      ...allFilters2[index],
+      "value": []
+    } : null;
+    let newFilters = filters2.slice();
+    newFilters.push(newFilter);
+    setAttributes({
+      filters: newFilters
+    });
+  };
+  const removeFilter = f => {
+    const {
+      attributes: {
+        filters: filters2
+      },
+      setAttributes
+    } = props;
+    let newFilters = filters2.slice(0, -1);
+    setAttributes({
+      filters: newFilters
+    });
+  };
+  const items = type => {
+    const values = props.allCategories ? props.allCategories.filter(c => c.type === type) : [];
+    const cat = values.length > 0 ? values[0] : null;
+    let items2 = null;
+    if (type === "Boolean") {
+      items2 = [{
+        "value": "Yes",
+        id: true
+      }, {
+        "value": "No",
+        id: false
+      }];
+    } else if (cat) {
+      items2 = cat.items;
+    }
+    return items2;
+  };
+  const FilterSelector = ({
+    param,
+    index,
+    options,
+    onUpdateFilterParam
+  }) => {
+    const sortedOptions = options.sort(function (a, b) {
+      var aLabel = a.label ? a.label.toLowerCase() : "";
+      var bLabel = b.label ? b.label.toLowerCase() : "";
+      return aLabel < bLabel ? -1 : aLabel > bLabel ? 1 : 0;
+    });
+    return /* @__PURE__ */React.createElement(_components.SelectControl, {
+      onChange: value => {
+        onUpdateFilterParam(value, index);
+      },
+      value: param,
+      options: sortedOptions
+    });
+  };
+  const CategoricalFilter = ({
+    value,
+    index,
+    items: items2,
+    onUpdateFilterValue
+  }) => {
+    if (items2) {
+      const sortedItems = items2.sort(function (a, b) {
+        if (a.position !== void 0 && b.position !== void 0 && a.position !== b.position) {
+          return a.position - b.position;
+        }
+        let aValue = a.value ? a.value.toLowerCase() : "";
+        let bValue = b.value ? b.value.toLowerCase() : "";
+        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+      });
+      return sortedItems.map(v => /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.ToggleControl, {
+        label: v.value,
+        checked: value.indexOf(v.id) > -1,
+        onChange: e => {
+          onUpdateFilterValue(v.id, index);
+        }
+      })));
+    } else {
+      return null;
+    }
+  };
+  const {
+    allFilters,
+    attributes: {
+      filters
+    }
+  } = props;
+  return /* @__PURE__ */React.createElement(_components.PanelBody, {
+    initialOpen: false,
+    title: (0, _i18n.__)("Filters")
+  }, filters.map((f, index) => {
+    return /* @__PURE__ */React.createElement(_components.PanelBody, {
+      initialOpen: true,
+      title: (0, _i18n.__)(`Filter - ${f.label}`)
+    }, /* @__PURE__ */React.createElement(FilterSelector, {
+      param: f.param,
+      index,
+      options: allFilters,
+      onUpdateFilterParam: updateFilterParam
+    }), /* @__PURE__ */React.createElement(CategoricalFilter, {
+      value: f.value,
+      index,
+      items: items(f.type),
+      onUpdateFilterValue: updateFilterValue
+    }));
+  }), /* @__PURE__ */React.createElement(_components.PanelRow, null, /* @__PURE__ */React.createElement(_components.Button, {
+    variant: "link",
+    onClick: addFilter
+  }, (0, _i18n.__)("Add Filter")), /* @__PURE__ */React.createElement(_components.Button, {
+    variant: "link",
+    onClick: removeFilter
+  }, (0, _i18n.__)("Remove"))));
+};
+exports.DataFilters = DataFilters;
+module.exports = DataFilters;