@devgateway/dvz-wp-commons 1.1.0 → 1.2.0

package/build/ChartColors.js

@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
 import { PanelBody, PanelRow, SelectControl } from '@wordpress/components';
+import { PanelColorSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { useEffect } from "react";
 import Papa from 'papaparse';
 import { useRef, useState } from "@wordpress/element";
 import { getTranslation } from "./APIutils";
-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' }, {
@@ -41,11 +41,10 @@ export const diverging = [{ value: "brown_blueGreen", label: 'brown_blueGreen' }
 ];
 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 { 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") {
@@ -64,23 +63,19 @@ export const ChartColors = (props) => {
     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;
+        l1Label = data.meta.fields.length > 0 ? '1st Column Values ' : null;
         d2Label = __("Measure Columns Labels");
         d3Label = __("Measure Columns Values");
     }
-    if (type == 'bar') {
+    if (type == 'bar' || type == 'line') {
         if (swap && dimension2 == "none" && selectedMeasures.length > 0) {
             colorOptions = [];
             if (l1Label) {
                 colorOptions.push({ label: l1Label, value: 'id' });
-                if (d2Label) {
-                    colorOptions.push({ label: d2Label, value: 'index' });
-                }
+                colorOptions.push({ label: d2Label, value: 'index' });
             }
             else {
-                if (d2Label) {
-                    colorOptions.push({ label: d2Label, value: 'id' });
-                }
+                colorOptions.push({ label: d2Label, value: 'id' });
                 colorOptions.push({ label: "Measure Values", value: 'values' });
             }
         }
@@ -99,11 +94,11 @@ export const ChartColors = (props) => {
     }
     if (type == 'pie') {
         if (dimension1 != 'none' && dimension2 == 'none' && colorBy != 'index') {
-            setAttributes({ ...attributes, colorBy: 'index' });
+            setAttributes({ colorBy: 'index' });
             return null;
         }
         if (dimension1 != 'none' && dimension2 != 'none' && colorBy != 'id') {
-            setAttributes({ ...attributes, colorBy: 'id' });
+            setAttributes({ colorBy: 'id' });
             return null;
         }
     }
@@ -128,7 +123,6 @@ export const ChartColors = (props) => {
         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";
             }
@@ -159,34 +153,34 @@ export const ChartColors = (props) => {
         }
         else {
             if (!manualColors["csv"]) {
-                setAttributes({ ...attributes, manualColors: { "csv": {} }, colorBy: colorBy || "" });
+                setAttributes({ manualColors: { "csv": {} } });
             }
         }
-        prevStatus.current = { scheme, colorBy: colorBy || "", dimension1, dimension2, useColors, app };
+        prevStatus.current = { scheme, colorBy, dimension1, dimension2, useColors, app };
     }, [scheme, dimension1, dimension2, colorBy, swap, app, type]);
-    const prevStatus = useRef(undefined);
+    const prevStatus = useRef();
     const updateColor = (value, color) => {
         const newColors = Object.assign({}, manualColors);
         newColors[app][value] = color;
-        setAttributes({ ...attributes, manualColors: newColors, colorBy: colorBy || "" });
+        setAttributes({ manualColors: newColors });
     };
     const initColors = (dimension) => {
-        const ds = allDimensions?.filter(d => d.value == dimension);
+        const ds = allDimensions.filter(d => d.value == dimension);
         const newColors = Object.assign({}, manualColors);
         if (!newColors[app]) {
             newColors[app] = {};
         }
-        if (ds && ds.length > 0) {
+        if (ds.length > 0) {
             const { type } = ds[0];
-            const cat = allCategories?.filter(a => a.type === type);
-            if (cat && cat.length > 0) {
+            const cat = allCategories.filter(a => a.type === type);
+            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({ ...attributes, manualColors: newColors });
+            setAttributes({ manualColors: newColors });
         }
     };
     const initMeasuresColors = () => {
@@ -203,20 +197,20 @@ export const ChartColors = (props) => {
                 }
             });
         }
-        setAttributes({ ...attributes, manualColors: newColors });
+        setAttributes({ 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 ds1 = allDimensions.filter(d => d.value == dimension1);
+            const ds2 = allDimensions.filter(d => d.value == dimension2);
+            if (ds1.length > 0 && 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 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 => {
+                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(React.createElement(PanelColorSettings, { colorSettings: [{
                                     value: manualColors[app][c1.value + ' - ' + c2.value],
                                     onChange: (color) => {
@@ -238,12 +232,12 @@ export const ChartColors = (props) => {
     };
     const catColors = (dimension) => {
         if (manualColors[app]) {
-            const ds = allDimensions?.filter(d => d.value == dimension);
-            if (ds && ds.length > 0) {
+            const ds = allDimensions.filter(d => d.value == dimension);
+            if (ds.length > 0) {
                 const { type } = ds[0];
-                const cat = allCategories?.filter(a => a.type === type);
+                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 => {
+                    const list = cat[0].items.filter(c => c.code !== null && c.code !== undefined && c.code !== "").sort((a, b) => b.position - a.position).map(item => {
                         return React.createElement(PanelColorSettings, { colorSettings: [{
                                     value: manualColors[app][item.code],
                                     onChange: (color) => {
@@ -258,7 +252,7 @@ export const ChartColors = (props) => {
                     });
                     const dimensions = [dimension1, dimension2].filter(f => f != '' && f != "none");
                     let selectedMeasures = [];
-                    allMeasures?.forEach(m => {
+                    allMeasures.forEach(m => {
                         if (measures[app] && measures[app][m.value] && measures[app][m.value].selected) {
                             selectedMeasures.push(m.value);
                         }
@@ -319,22 +313,15 @@ export const ChartColors = (props) => {
         }
         return null;
     };
-    const csvColors = (colorBy) => {
+    const csvColors = () => {
         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]));
-            }
+            const field = data.meta.fields[0];
+            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);
-            }
+            values.push(...data.meta.fields.slice(1));
         }
         if (colorBy === "values") {
             values.push(0, 100);
@@ -345,41 +332,41 @@ export const ChartColors = (props) => {
                             value: manualColors[app][v],
                             onChange: (color) => {
                                 if (color) {
-                                    updateColor(v.toString(), color);
+                                    updateColor(v, color);
                                 }
-                            }, label: __(v.toString())
+                            }, label: __(v)
                         }] });
             });
         }
         return null;
     };
     const elements = [];
-    if (type == 'bar') {
+    if (type == 'bar' || type == 'line') {
         elements.push(React.createElement(PanelRow, null,
-            React.createElement(SelectControl, { multiple: false, label: __('Color By'), value: colorBy, onChange: (colorBy) => {
-                    setAttributes({ ...attributes, colorBy });
+            React.createElement(SelectControl, { label: __('Color By'), value: [colorBy], onChange: (colorBy) => {
+                    setAttributes({ colorBy });
                     if (colorBy === 'index' || colorBy === 'id') {
-                        setAttributes({ ...attributes, colorBy });
+                        setAttributes({ colorBy });
                     }
                     if (colorBy === 'values') {
-                        setAttributes({ ...attributes, scheme: "blues", colorBy });
+                        setAttributes({ scheme: "blues", colorBy });
                     }
                 }, options: colorOptions })));
     }
     return [
         ...elements,
         React.createElement(PanelRow, null,
-            React.createElement(SelectControl, { multiple: false, label: __('Color Scheme'), value: scheme, onChange: (value) => {
-                    setAttributes({ ...attributes, scheme: value });
+            React.createElement(SelectControl, { label: __('Color Scheme'), value: [scheme], onChange: (value) => {
+                    setAttributes({ 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) });
+                                setAttributes({ barColor: encodeURIComponent(color) });
                             }
                             else {
-                                setAttributes({ ...attributes, barColor: null });
+                                setAttributes({ barColor: null });
                             }
                         }, label: __('Plain color')
                     }] })),

package/build/ChartLegends.d.ts

@@ -1,33 +1,2 @@
-import React from 'react';
-export type LegendPosition = 'left' | 'top' | 'right' | 'bottom';
-export type LegendProps = {
-    legendPosition?: LegendPosition;
-    setAttributes: (attributes: {
-        showLegends: boolean;
-        legendPosition: LegendPosition;
-        marginLeft: number;
-        marginRight: number;
-        marginBottom: number;
-        marginTop: number;
-        legendLabel: string;
-        useLabelBackground: boolean;
-        useCheckBoxBackground: boolean;
-        legendLabelColor: string | null;
-        reverseLegend: boolean;
-    }) => void;
-    attributes: {
-        showLegends: boolean;
-        legendPosition: LegendPosition;
-        marginLeft: number;
-        marginRight: number;
-        marginBottom: number;
-        marginTop: number;
-        legendLabel: string;
-        useLabelBackground: boolean;
-        useCheckBoxBackground: boolean;
-        legendLabelColor: string;
-        reverseLegend: boolean;
-    };
-};
-export declare const ChartLegends: (props: LegendProps) => React.JSX.Element[];
+export function ChartLegends(props: any): import("react").JSX.Element[];
 export default ChartLegends;

package/build/ChartLegends.js

@@ -1,65 +1,50 @@
-import React from 'react';
 import { Button, ButtonGroup, PanelBody, PanelRow, RangeControl, TextControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { PanelColorSettings } from '@wordpress/block-editor';
 export const ChartLegends = (props) => {
-    const { setAttributes, legendPosition, attributes } = props;
-    const { showLegends, marginLeft, marginRight, marginBottom, marginTop, legendLabel, useLabelBackground, useCheckBoxBackground, legendLabelColor, reverseLegend } = attributes;
+    const { setAttributes, attributes: { showLegends, legendPosition, marginLeft, marginRight, marginBottom, marginTop, legendLabel, useLabelBackground, useCheckBoxBackground, legendLabelColor, reverseLegend, showLegendsInColumns, numberOfLegendColumns } } = props;
     return [
         React.createElement(PanelBody, { initialOpen: false, title: __("Margins") },
             React.createElement(PanelRow, null,
-                React.createElement(RangeControl, { label: __('Margin Bottom (Space between chart area and bottom border)'), value: marginBottom, onChange: (marginBottom) => {
-                        if (marginBottom) {
-                            setAttributes({ ...attributes, marginBottom });
-                        }
-                    }, min: 0, max: 500 })),
+                React.createElement(RangeControl, { label: __('Margin Bottom (Space between chart area and bottom border)'), value: marginBottom, onChange: (marginBottom) => setAttributes({ marginBottom }), min: 0, max: 500 })),
             React.createElement(PanelRow, null,
-                React.createElement(RangeControl, { label: __('Margin Left (Space between chart area and left border)'), value: marginLeft, initialPosition: 0, onChange: (marginLeft) => {
-                        if (marginLeft) {
-                            setAttributes({ ...attributes, marginLeft });
-                        }
-                    }, step: 1, min: 0, max: 500 })),
+                React.createElement(RangeControl, { label: __('Margin Left (Space between chart area and left border)'), value: marginLeft, initialPosition: 0, onChange: (marginLeft) => setAttributes({ marginLeft }), step: 1, min: 0, max: 500 })),
             React.createElement(PanelRow, null,
-                React.createElement(RangeControl, { label: __('Margin Right'), value: marginRight, onChange: (marginRight) => {
-                        if (marginRight) {
-                            setAttributes({ ...attributes, marginRight });
-                        }
-                    }, min: 0, max: 500 })),
+                React.createElement(RangeControl, { label: __('Margin Right'), value: marginRight, onChange: (marginRight) => setAttributes({ marginRight }), min: 0, max: 500 })),
             React.createElement(PanelRow, null,
-                React.createElement(RangeControl, { label: __('Margin Top'), value: marginTop, onChange: (marginTop) => {
-                        if (marginTop) {
-                            setAttributes({ ...attributes, marginTop });
-                        }
-                    }, min: 0, max: 500 }))),
+                React.createElement(RangeControl, { label: __('Margin Top'), value: marginTop, onChange: (marginTop) => setAttributes({ marginTop }), min: 0, max: 500 }))),
         React.createElement(PanelBody, { initialOpen: false, title: __("Legends") },
             React.createElement(PanelRow, null,
-                React.createElement(ToggleControl, { label: __("Show Legends"), checked: showLegends, onChange: () => setAttributes({ ...attributes, showLegends: !showLegends }) })),
+                React.createElement(ToggleControl, { label: __("Show Legends"), checked: showLegends, onChange: () => setAttributes({ showLegends: !showLegends }) })),
+            showLegends && React.createElement(PanelRow, null,
+                React.createElement(ToggleControl, { label: __("Show Legends in Columns"), checked: showLegendsInColumns, onChange: () => setAttributes({ showLegendsInColumns: !showLegendsInColumns }) })),
+            showLegends && showLegendsInColumns && React.createElement(PanelRow, null,
+                React.createElement(TextControl, { label: __('Number of Legend Columns'), value: numberOfLegendColumns, onChange: (numberOfLegendColumns) => setAttributes({ numberOfLegendColumns }), type: "number", min: 1, max: 10 })),
             showLegends &&
                 React.createElement(PanelRow, null,
-                    React.createElement(ToggleControl, { label: __("Reverse legend order"), checked: reverseLegend, onChange: () => setAttributes({ ...attributes, reverseLegend: !reverseLegend }) })),
+                    React.createElement(ToggleControl, { label: __("Reverse legend order"), checked: reverseLegend, onChange: () => setAttributes({ reverseLegend: !reverseLegend }) })),
             showLegends && React.createElement(PanelRow, null,
-                React.createElement(ToggleControl, { label: __("Use Label Background"), checked: useLabelBackground, onChange: () => setAttributes({ ...attributes, useLabelBackground: !useLabelBackground }) })),
+                React.createElement(ToggleControl, { label: __("Use Label Background"), checked: useLabelBackground, onChange: e => setAttributes({ useLabelBackground: !useLabelBackground }) })),
             showLegends && React.createElement(PanelRow, null,
-                React.createElement(ToggleControl, { label: __("Use Checkbox Background"), checked: useCheckBoxBackground, onChange: () => setAttributes({ ...attributes, useCheckBoxBackground: !useCheckBoxBackground }) })),
+                React.createElement(ToggleControl, { label: __("Use Checkbox Background"), checked: useCheckBoxBackground, onChange: e => setAttributes({ useCheckBoxBackground: !useCheckBoxBackground }) })),
             showLegends && React.createElement(PanelRow, null,
                 React.createElement(ButtonGroup, null,
-                    React.createElement(Button, { variant: legendPosition == 'left' ? 'primary' : 'secondary', onClick: () => setAttributes({ ...attributes, legendPosition: "left" }) }, __("Left")),
-                    React.createElement(Button, { variant: legendPosition == 'top' ? 'primary' : 'secondary', onClick: () => setAttributes({ ...attributes, legendPosition: "top" }) }, __("Top")),
-                    React.createElement(Button, { variant: legendPosition == 'right' ? 'primary' : 'secondary', onClick: () => setAttributes({ ...attributes, legendPosition: "right" }) }, __("Right")),
-                    React.createElement(Button, { variant: legendPosition == 'bottom' ? 'primary' : 'secondary', onClick: () => setAttributes({ ...attributes, legendPosition: "bottom" }) }, __("Bottom")))),
+                    React.createElement(Button, { isPrimary: legendPosition == 'left', isSecondary: legendPosition != 'left', onClick: e => setAttributes({ legendPosition: "left" }) }, __("Left")),
+                    React.createElement(Button, { isPrimary: legendPosition == 'top', isSecondary: legendPosition != 'top', onClick: e => setAttributes({ legendPosition: "top" }) }, __("Top")),
+                    React.createElement(Button, { isPrimary: legendPosition == 'right', isSecondary: legendPosition != 'right', onClick: e => setAttributes({ legendPosition: "right" }) }, __("Right")),
+                    React.createElement(Button, { isPrimary: legendPosition == 'bottom', isSecondary: legendPosition != 'bottom', onClick: e => setAttributes({ legendPosition: "bottom" }) }, __("Bottom")))),
             showLegends && React.createElement(PanelRow, null,
-                React.createElement(TextControl, { label: __('Legends Title'), value: legendLabel, onChange: (legendLabel) => setAttributes({ ...attributes, legendLabel }) })),
+                React.createElement(TextControl, { label: __('Legends Title'), value: legendLabel, onChange: (legendLabel) => setAttributes({ legendLabel }) })),
             showLegends && React.createElement(PanelRow, null,
                 React.createElement(PanelColorSettings, { title: __('Legends text color'), colorSettings: [
                         {
-                            // Ensure legendLabelColor is encoded before decoding to avoid runtime errors.
-                            value: decodeURIComponent(legendLabelColor ? encodeURIComponent(decodeURIComponent(legendLabelColor)) : "#000000"),
+                            value: decodeURIComponent(legendLabelColor ? legendLabelColor : "#000000"),
                             onChange: (color) => {
                                 if (color) {
-                                    setAttributes({ ...attributes, legendLabelColor: encodeURIComponent(color) });
+                                    setAttributes({ legendLabelColor: encodeURIComponent(color) });
                                 }
                                 else {
-                                    setAttributes({ ...attributes, legendLabelColor: null });
+                                    setAttributes({ legendLabelColor: null });
                                 }
                             },
                             label: __("")

package/build/ChartMeasures.d.ts

@@ -1,23 +1,2 @@
-import React from 'react';
-import { Measure } from './types.js';
-export type ChartMeasuresProps = {
-    onMeasuresChange: (measure: string) => void;
-    onFormatChange: (format: string, field: string) => void;
-    onUseCustomAxisFormatChange: (value: boolean) => void;
-    onSetSingleMeasure: (measure: string) => void;
-    onCustomLabelToggleChange: (measure: string) => void;
-    onCustomLabelChange: (measure: string, value: string) => void;
-    allMeasures: any[];
-    setAttributes: (attributes: any) => void;
-    title: string;
-    attributes: {
-        panelStatus: any;
-        measures: Measure[];
-        dimension1: string | null;
-        dimension2: string | null;
-        type: string;
-        app: string;
-    };
-};
-export declare const ChartMeasures: (props: ChartMeasuresProps) => React.JSX.Element;
+export function ChartMeasures(props: any): import("react").JSX.Element;
 export default ChartMeasures;

package/build/ChartMeasures.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl, PanelBody, PanelRow, SelectControl, ToggleControl, TextControl } from '@wordpress/components';
 import Format from './Format';
-import { togglePanel } from "./Util.js";
-import { getTranslation } from "./APIutils.js";
+import { togglePanel } from "./Util";
+import { getTranslation } from "./APIutils";
 const defaultFormat = {
     "style": "percent",
     "minimumFractionDigits": 1,
@@ -88,7 +87,7 @@ export const ChartMeasures = (props) => {
 
         */
             ((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 => getTranslation(f.group) === g).length} ) ` }, allMeasures.filter(f => getTranslation(f.group) === 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 })))));
             }),

package/build/Constants.d.ts

@@ -1,15 +1,18 @@
-export declare const DEFAULT_FORMAT_SETTINGS: {
-    format: {
-        style: string;
-        minimumFractionDigits: number;
-        maximumFractionDigits: number;
-    };
-    customFormat: {
-        style: string;
-        minimumFractionDigits: number;
-        maximumFractionDigits: number;
-    };
-    useCustomAxisFormat: boolean;
-};
-export declare const BLOCKS_CATEGORY = "wp-react-lib-blocks";
-export declare const BLOCKS_NS = "viz";
+export namespace DEFAULT_FORMAT_SETTINGS {
+    namespace format {
+        let style: string;
+        let minimumFractionDigits: number;
+        let maximumFractionDigits: number;
+    }
+    namespace customFormat {
+        let style_1: string;
+        export { style_1 as style };
+        let minimumFractionDigits_1: number;
+        export { minimumFractionDigits_1 as minimumFractionDigits };
+        let maximumFractionDigits_1: number;
+        export { maximumFractionDigits_1 as maximumFractionDigits };
+    }
+    let useCustomAxisFormat: boolean;
+}
+export const BLOCKS_CATEGORY: "wp-react-lib-blocks";
+export const BLOCKS_NS: "viz";

package/build/DataFilters.d.ts

@@ -1,13 +1,2 @@
-import React from 'react';
-import { Filter } from './types';
-export type DataFiltersProps = {
-    allCategories: any[];
-    allFilters: any[];
-    onChange?: () => void;
-    attributes?: {
-        filters: Filter[];
-    };
-    setAttributes: (attributes: any) => void;
-};
-export declare const DataFilters: (props: DataFiltersProps) => React.JSX.Element;
+export function DataFilters(props: any): import("react").JSX.Element;
 export default DataFilters;

package/build/DataFilters.js

@@ -1,18 +1,15 @@
-import React from 'react';
 import { Button, PanelBody, PanelRow, SelectControl, ToggleControl } from "@wordpress/components";
 import { __ } from '@wordpress/i18n';
 export const DataFilters = (props) => {
     const updateFilterParam = (param, idx) => {
-        const { attributes, setAttributes, allFilters } = props;
-        const filters = attributes?.filters || [];
+        const { attributes: { filters }, setAttributes, allFilters } = props;
         const newFilters = filters.slice();
         const selected = allFilters.filter(f => f.param === param)[0];
         newFilters[idx] = { ...selected, value: [] };
         setAttributes({ filters: newFilters });
     };
     const updateFilterValue = (value, idx) => {
-        const { attributes, setAttributes, onChange } = props;
-        const filters = attributes?.filters || [];
+        const { attributes: { filters }, setAttributes, onChange } = props;
         const selected = filters[idx];
         let values = selected.value;
         if (values.indexOf(value) > -1) {
@@ -24,11 +21,10 @@ export const DataFilters = (props) => {
         const newFilters = filters.slice();
         newFilters[idx].value = values;
         setAttributes({ filters: newFilters });
-        onChange && onChange();
+        onChange();
     };
     const addFilter = () => {
-        const { attributes, setAttributes, allFilters } = props;
-        const filters = attributes?.filters || [];
+        const { attributes: { filters }, setAttributes, allFilters } = props;
         let index = filters.length > allFilters.length ? allFilters.length : filters.length;
         const newFilter = (allFilters && allFilters.length > 0) ? {
             ...allFilters[index],
@@ -39,8 +35,7 @@ export const DataFilters = (props) => {
         setAttributes({ filters: newFilters });
     };
     const removeFilter = (f) => {
-        const { attributes, setAttributes } = props;
-        const filters = attributes?.filters || [];
+        const { attributes: { filters }, setAttributes } = props;
         let newFilters = filters.slice(0, -1);
         setAttributes({ filters: newFilters });
     };
@@ -69,7 +64,7 @@ export const DataFilters = (props) => {
     const CategoricalFilter = ({ value, index, items, onUpdateFilterValue }) => {
         if (items) {
             const sortedItems = items.sort(function (a, b) {
-                if (a.position !== undefined && b.position !== undefined) {
+                if (a.position !== undefined && b.position !== undefined && a.position !== b.position) {
                     return a.position - b.position;
                 }
                 let aValue = a.value ? a.value.toLowerCase() : "";
@@ -77,16 +72,17 @@ export const DataFilters = (props) => {
                 return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
             });
             return sortedItems.map(v => React.createElement(PanelRow, null,
-                React.createElement(ToggleControl, { label: v.value, checked: value.indexOf(v.id) > -1, onChange: e => { onUpdateFilterValue(v.id, index); } })));
+                React.createElement(ToggleControl, { label: v.value, checked: value.indexOf(v.id) > -1, onChange: e => {
+                        onUpdateFilterValue(v.id, index);
+                    } })));
         }
         else {
             return null;
         }
     };
-    const { allFilters, attributes } = props;
-    const filters = attributes?.filters || [];
+    const { allFilters, attributes: { filters, } } = props;
     return React.createElement(PanelBody, { initialOpen: false, title: __("Filters") },
-        filters.length > 0 && filters.map((f, index) => {
+        filters.map((f, index) => {
             return (React.createElement(PanelBody, { initialOpen: true, title: __(`Filter - ${f.label}`) },
                 React.createElement(FilterSelector, { param: f.param, index: index, options: allFilters, onUpdateFilterParam: updateFilterParam }),
                 React.createElement(CategoricalFilter, { value: f.value, index: index, items: items(f.type), onUpdateFilterValue: updateFilterValue })));

package/build/Format.d.ts

@@ -1,12 +1,10 @@
-import React from 'react';
-export type FormatProps = {
+export function Format({ format, title, onFormatChange, onUseCustomAxisFormatChange, customFormat, hiddenCustomAxisFormat, useCustomAxisFormat }: {
     format: any;
-    title?: string;
-    onFormatChange: (format: any, field: string) => void;
-    onUseCustomAxisFormatChange?: (value: boolean) => void;
-    customFormat?: any;
-    hiddenCustomAxisFormat?: boolean;
-    useCustomAxisFormat?: boolean;
-};
-export declare const Format: ({ format, title, onFormatChange, onUseCustomAxisFormatChange, customFormat, hiddenCustomAxisFormat, useCustomAxisFormat }: FormatProps) => React.JSX.Element[];
+    title: any;
+    onFormatChange: any;
+    onUseCustomAxisFormatChange: any;
+    customFormat: any;
+    hiddenCustomAxisFormat: any;
+    useCustomAxisFormat: any;
+}): import("react").JSX.Element[];
 export default Format;

package/build/Format.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PanelRow, SelectControl, TextControl, ToggleControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 const styles = [
@@ -354,7 +353,7 @@ export const Format = ({ format, title, onFormatChange, onUseCustomAxisFormatCha
     return [
         React.createElement(PanelBody, { initialOpen: true, title: __("Default Format") },
             React.createElement(PanelRow, null,
-                React.createElement(SelectControl, { multiple: true, label: __('Style', "dg"), value: [format.style], onChange: (value) => {
+                React.createElement(SelectControl, { label: __('Style', "dg"), value: [format.style], onChange: (value) => {
                         onChangeFormat(value, DEFAULT_FORMAT);
                     }, options: styles })),
             React.createElement(React.Fragment, null, format.style === "currency" && React.createElement(PanelRow, null,
@@ -362,14 +361,14 @@ export const Format = ({ format, title, onFormatChange, onUseCustomAxisFormatCha
                         onCurrencyChange(value, DEFAULT_FORMAT);
                     }, value: format.currency, options: currencies }))),
             React.createElement(PanelRow, null,
-                React.createElement(TextControl, { type: "number", label: __("Decimal Points", "dg"), onChange: (value) => {
+                React.createElement(TextControl, { type: "Number", label: __("Decimal Points", "dg"), onChange: (value) => {
                         onDecimalChange(value, DEFAULT_FORMAT);
                     }, value: format.minimumFractionDigits }))),
         React.createElement(React.Fragment, null, !hiddenCustomAxisFormat && React.createElement(PanelRow, null,
-            React.createElement(ToggleControl, { label: __("Use Custom Axis Format", "dg"), checked: useCustomAxisFormat, onChange: (value) => onUseCustomAxisFormatChange?.(value) }))),
+            React.createElement(ToggleControl, { label: __("Use Custom Axis Format", "dg"), checked: useCustomAxisFormat, onChange: (value) => onUseCustomAxisFormatChange(value) }))),
         React.createElement(React.Fragment, null, useCustomAxisFormat && React.createElement(PanelBody, { initialOpen: true, title: __("Custom Axis Format") },
             React.createElement(PanelRow, null,
-                React.createElement(SelectControl, { multiple: true, label: __('Style', "dg"), value: [customFormat.style], onChange: (value) => {
+                React.createElement(SelectControl, { label: __('Style', "dg"), value: [customFormat.style], onChange: (value) => {
                         onChangeFormat(value, CUSTOM_FORMAT);
                     }, options: styles })),
             React.createElement(React.Fragment, null, customFormat.style === "currency" && React.createElement(PanelRow, null,
@@ -377,7 +376,7 @@ export const Format = ({ format, title, onFormatChange, onUseCustomAxisFormatCha
                         onCurrencyChange(value, CUSTOM_FORMAT);
                     }, value: customFormat.currency, options: currencies }))),
             React.createElement(PanelRow, null,
-                React.createElement(TextControl, { type: "number", label: __("Decimal Points", "dg"), onChange: (value) => {
+                React.createElement(TextControl, { type: "Number", label: __("Decimal Points", "dg"), onChange: (value) => {
                         onDecimalChange(value, CUSTOM_FORMAT);
                     }, value: customFormat.minimumFractionDigits }))))
     ];