@devgateway/dvz-wp-commons 1.0.0

package/build/ChartColors.js

@@ -0,0 +1,401 @@
+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 { 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' }
+];
+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");
+        }
+    }
+    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");
+    }
+    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' });
+            }
+        }
+    }
+    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;
+        }
+    }
+    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") {
+            // 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);
+                    }
+                    if (prevStatus.current["dimension1"] != dimension1 || prevStatus.current["dimension2"] != dimension2) {
+                        initColors(colorBy === "index" ? dimension1 : dimension2);
+                    }
+                }
+                else {
+                    initMeasuresColors();
+                }
+            }
+            setUseColors(nextUseColors);
+        }
+        else {
+            if (!manualColors["csv"]) {
+                setAttributes({ ...attributes, manualColors: { "csv": {} }, colorBy: colorBy || "" });
+            }
+        }
+        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";
+                    }
+                });
+            }
+            setAttributes({ ...attributes, 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({ ...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 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;
+                }
+            }
+        }
+        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 = (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 })));
+    }
+    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)))
+    ];
+};
+export default ChartColors;

package/build/ChartLegends.d.ts

@@ -0,0 +1,33 @@
+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 default ChartLegends;

package/build/ChartLegends.js

@@ -0,0 +1,71 @@
+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;
+    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(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(PanelRow, null,
+                React.createElement(RangeControl, { label: __('Margin Right'), value: marginRight, onChange: (marginRight) => {
+                        if (marginRight) {
+                            setAttributes({ ...attributes, 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(PanelBody, { initialOpen: false, title: __("Legends") },
+            React.createElement(PanelRow, null,
+                React.createElement(ToggleControl, { label: __("Show Legends"), checked: showLegends, onChange: () => setAttributes({ ...attributes, showLegends: !showLegends }) })),
+            showLegends &&
+                React.createElement(PanelRow, null,
+                    React.createElement(ToggleControl, { label: __("Reverse legend order"), checked: reverseLegend, onChange: () => setAttributes({ ...attributes, reverseLegend: !reverseLegend }) })),
+            showLegends && React.createElement(PanelRow, null,
+                React.createElement(ToggleControl, { label: __("Use Label Background"), checked: useLabelBackground, onChange: () => setAttributes({ ...attributes, useLabelBackground: !useLabelBackground }) })),
+            showLegends && React.createElement(PanelRow, null,
+                React.createElement(ToggleControl, { label: __("Use Checkbox Background"), checked: useCheckBoxBackground, onChange: () => setAttributes({ ...attributes, 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")))),
+            showLegends && React.createElement(PanelRow, null,
+                React.createElement(TextControl, { label: __('Legends Title'), value: legendLabel, onChange: (legendLabel) => setAttributes({ ...attributes, 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"),
+                            onChange: (color) => {
+                                if (color) {
+                                    setAttributes({ ...attributes, legendLabelColor: encodeURIComponent(color) });
+                                }
+                                else {
+                                    setAttributes({ ...attributes, legendLabelColor: null });
+                                }
+                            },
+                            label: __("")
+                        }
+                    ] }),
+                " ")),
+    ];
+};
+export default ChartLegends;

package/build/ChartMeasures.d.ts

@@ -0,0 +1,23 @@
+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 default ChartMeasures;

package/build/ChartMeasures.js

@@ -0,0 +1,117 @@
+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";
+const defaultFormat = {
+    "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;
+        }
+        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
+
+             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 (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 => getTranslation(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) }))));
+                })));
+            })));
+};
+export default ChartMeasures;

package/build/Constants.d.ts

@@ -0,0 +1,15 @@
+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";