@devgateway/dvz-wp-commons 1.0.5 → 1.2.0

package/build/Blocks.js

@@ -1,39 +1,32 @@
-import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl, PanelBody, PanelRow, SelectControl, TextControl } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { togglePanel } from './Util';
-import { getTranslatedOptions, isSupersetAPI } from './APIutils';
-import { subscribe, select } from '@wordpress/data';
-export const SizeConfig = ({ height, setAttributes, panelStatus, initialOpen = false }) => {
-    return (React.createElement(PanelBody, { initialOpen: panelStatus ? panelStatus["SIZE"] : initialOpen, onToggle: () => togglePanel("SIZE", panelStatus, setAttributes), title: __("Size") },
+import { togglePanel } from "./Util";
+import { getTranslatedOptions } from './APIutils';
+import { isSupersetAPI } from "./APIutils";
+export const SizeConfig = ({ height, setAttributes, panelStatus, initialOpen }) => {
+    return (React.createElement(PanelBody, { initialOpen: panelStatus ? panelStatus["SIZE"] : initialOpen, onToggle: e => togglePanel("SIZE", panelStatus, setAttributes), title: __("Size") },
         React.createElement(PanelRow, null,
             React.createElement(TextControl, { size: 10, label: "Height", value: height, onChange: (height) => setAttributes({ height: height ? parseInt(height) : 0 }) }))));
 };
 export class ComponentWithSettings extends Component {
-    iframe;
-    unsubscribe;
     constructor(props) {
         super(props);
         this.state = {
-            react_ui_url: '',
-            react_api_url: null,
-            apache_superset_url: null,
-            site_language: '',
-            current_language: '',
+            react_ui_url: ''
         };
         window.addEventListener("message", (event) => {
             if (event.data.type === 'componentReady' && event.data.value === true) {
                 if (this.iframe.current) {
                     console.log("-----------Sending message -----------");
-                    this.iframe.current.contentWindow?.postMessage(({ messageType: 'component-attributes', ...this.props.attributes }), "*");
+                    this.iframe.current.contentWindow.postMessage(({ messageType: 'component-attributes', ...this.props.attributes }), "*");
                 }
             }
         }, false);
         this.iframe = React.createRef();
-        this.unsubscribe = subscribe(() => {
-            const newPreviewMode = select("core/editor").getDeviceType();
+        this.unsubscribe = wp.data.subscribe(() => {
+            const newPreviewMode = wp.data.select("core/editor").getDeviceType();
             if (newPreviewMode !== this.state.previewMode) {
                 this.setState({ previewMode: newPreviewMode });
             }
@@ -51,7 +44,7 @@ export class ComponentWithSettings extends Component {
                 react_api_url: data["react_api_url"],
                 apache_superset_url: data["apache_superset_url"],
                 site_language: data["site_language"],
-                current_language: new URLSearchParams(document.location.search).get("edit_lang") || ''
+                current_language: new URLSearchParams(document.location.search).get("edit_lang")
             });
         });
     }
@@ -65,15 +58,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
     constructor(props) {
         super(props);
         this.state = {
-            react_ui_url: '',
-            react_api_url: null,
-            apache_superset_url: null,
-            site_language: '',
-            current_language: '',
-            taxonomyValues: [],
-            types: null,
-            taxonomies: null,
-            loading: true
+            taxonomyValues: [], types: null, taxonomies: null, loading: true
         };
         this.onTypeChanged = this.onTypeChanged.bind(this);
         this.onTaxonomyChanged = this.onTaxonomyChanged.bind(this);
@@ -81,7 +66,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         this.onCategoryChanged = this.onCategoryChanged.bind(this);
     }
     componentDidUpdate(prevProps, prevState, snapshot) {
-        const { attributes: { type, taxonomy }, } = this.props;
+        const { setAttributes, attributes: { type, taxonomy, count }, } = this.props;
         super.componentDidUpdate(prevProps, prevState, snapshot);
         if (prevProps.attributes) {
             if (type != prevProps.attributes.type) {
@@ -95,7 +80,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         super.componentDidMount();
         this.getTypes();
         this.getTaxonomies();
-        const { attributes: { taxonomy }, } = this.props;
+        const { setAttributes, attributes: { type, taxonomy, count }, } = this.props;
         if (taxonomy != 'none') {
             this.getTaxonomyValues();
         }
@@ -123,15 +108,15 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         }
     }
     getTaxonomyValues() {
-        const { attributes: { taxonomy }, } = this.props;
-        apiFetch({
-            path: '/wp/v2/taxonomies/' + taxonomy + '?per_page=100',
+        const { setAttributes, attributes: { type, taxonomy, count }, } = this.props;
+        wp.apiFetch({
+            path: '/wp/v2/' + taxonomy + '?per_page=100',
         }).then(data => {
             this.setState({ taxonomyValues: data });
         });
     }
     getTaxonomies() {
-        apiFetch({
+        wp.apiFetch({
             path: '/wp/v2/taxonomies?per_page=100',
         }).then(data => {
             this.setState({
@@ -140,16 +125,18 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         });
     }
     getTypes() {
-        apiFetch({
+        wp.apiFetch({
             path: '/wp/v2/types?per_page=100',
         }).then(data => {
+            const types = data;
             this.setState({
                 types: data, loading: false
             });
         });
     }
     typeOptions() {
-        const { types } = this.state;
+        const { setAttributes, attributes: { count, type, taxonomy, category }, } = this.props;
+        const { types, taxonomies, taxonomyValues } = this.state;
         const typeOptions = types ? Object.keys(types)
             .filter(k => ['page', 'attachment', 'wp_block']
             .indexOf(k) == -1).map(k => ({
@@ -159,7 +146,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
     }
     taxonomyOptions() {
         const { attributes: { type, }, } = this.props;
-        const { types, taxonomies } = this.state;
+        const { types, taxonomies, taxonomyValues } = this.state;
         let slug;
         if (types) {
             slug = this.typeOptions().filter(t => t.value == type)[0].slug;
@@ -174,9 +161,9 @@ export class BlockEditWithFilters extends ComponentWithSettings {
         }
     }
     categoriesOptions() {
-        const { taxonomyValues } = this.state;
+        const { types, taxonomies, taxonomyValues } = this.state;
         const taxonomyValuesOptions = taxonomyValues && taxonomyValues.map(t => ({ label: t.name, value: t.id }));
-        return taxonomyValuesOptions || [];
+        return taxonomyValuesOptions;
     }
     renderFilters() {
         const { attributes: { type, taxonomy, categories, } } = this.props;
@@ -185,7 +172,7 @@ export class BlockEditWithFilters extends ComponentWithSettings {
                 React.createElement(SelectControl, { label: __("Post Type"), options: this.typeOptions(), value: type, onChange: this.onTypeChanged })),
             React.createElement(PanelRow, null,
                 React.createElement(SelectControl, { label: __("Use a taxonomy filter "), options: this.taxonomyOptions(), value: taxonomy, onChange: this.onTaxonomyChanged })),
-            (taxonomy != 'none' && this.categoriesOptions().length > 0) && this.categoriesOptions().map(o => {
+            taxonomy != 'none' && this.categoriesOptions().map(o => {
                 return React.createElement(PanelRow, null,
                     React.createElement(CheckboxControl, { label: o.label, onChange: (checked) => this.onCategoryChanged(checked, o.value), checked: categories.indexOf(o.value) > -1 }));
             })));
@@ -204,7 +191,7 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
                     'Accept': 'application/json',
                 },
             })
-                .then((response) => response.json())
+                .then(response => response.json())
                 .then(data => {
                 const apps = data.applications ? [...data.applications.application
                         .filter(a => a.instance[0].metadata.type === 'data')
@@ -220,7 +207,7 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
                     react_api_url: settingsData["react_api_url"],
                     apache_superset_url: settingsData["apache_superset_url"],
                     site_language: settingsData["site_language"],
-                    current_language: new URLSearchParams(document.location.search).get("edit_lang") || "",
+                    current_language: new URLSearchParams(document.location.search).get("edit_lang"),
                     apps
                 }, () => {
                     const { app, dvzProxyDatasetId } = this.props.attributes;
@@ -237,8 +224,8 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
             });
         });
     }
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        super.componentDidUpdate(prevProps, prevState, snapshot);
+    componentDidUpdate(prevProps) {
+        super.componentDidUpdate(prevProps);
         const { attributes: { app, dvzProxyDatasetId } } = this.props;
         const { attributes: { dvzProxyDatasetId: prevDvzProxyDatasetId, app: prevAPP } } = prevProps;
         if (app != prevAPP) { //if app changes we shoudl reload metadta
@@ -249,7 +236,7 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
                 }
             }
             else {
-                this.loadMetadata(app, dvzProxyDatasetId);
+                this.loadMetadata(app);
             }
         }
         else { //app wasn't changed
@@ -304,7 +291,7 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
                     dimensions: [{ "label": __("None"), "value": "none" }, ...getTranslatedOptions(data)]
                 });
             })
-                .catch(function () {
+                .catch(function (response) {
                 console.log("Error when loading dimensions");
             });
             fetch(filtersUrl)
@@ -332,7 +319,7 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
                 sessionStorage.setItem(`measures_${app}`, JSON.stringify(getTranslatedOptions(data)));
                 this.setState({ measures: getTranslatedOptions(data) });
             })
-                .catch(function () {
+                .catch(function (response) {
                 console.log("Error when loading measures");
             });
             fetch(categoriesUrl)
@@ -360,8 +347,6 @@ export class BlockEditWithAPIMetadata extends ComponentWithSettings {
             return response.json();
         })
             .then(data => {
-            // TODO: Check if the data is an array
-            // @ts-ignore
             this.setState({
                 [stateKey]: transformData(data)
             });

package/build/CSVSourceConfig.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-export declare const CSVConfig: ({ attributes: { csv, panelStatus, measures, type }, setAttributes }: {
+export function CSVConfig({ attributes: { csv, panelStatus, measures, type }, setAttributes }: {
     attributes: {
         csv: any;
         panelStatus: any;
@@ -7,5 +6,5 @@ export declare const CSVConfig: ({ attributes: { csv, panelStatus, measures, typ
         type: any;
     };
     setAttributes: any;
-}) => React.JSX.Element[];
+}): import("react").JSX.Element[];
 export default CSVConfig;

package/build/CSVSourceConfig.js

@@ -1,20 +1,21 @@
-import React from 'react';
 import { PanelBody, PanelRow, TextareaControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import Format from "./Format";
 import { togglePanel } from "./Util";
 const defaultFormat = {
-    "style": "percent",
-    "minimumFractionDigits": 1,
-    "maximumFractionDigits": 1,
-    "currency": "USD"
+    "style": "percent", "minimumFractionDigits": 1, "maximumFractionDigits": 1, "currency": "USD"
 };
 export const CSVConfig = ({ attributes: { csv, panelStatus, measures, type }, setAttributes }) => {
     const onFormatChange = (format, field) => {
         const app = "csv";
         const uMs = measures ? JSON.parse(JSON.stringify(measures)) : {};
         if (!uMs[app]) {
-            uMs[app] = { allowSelection: false, format: Object.assign({}, defaultFormat), customFormat: Object.assign({}, { ...defaultFormat }), selected: false };
+            uMs[app] = {
+                allowSelection: false,
+                format: Object.assign({}, defaultFormat),
+                customFormat: Object.assign({}, { ...defaultFormat }),
+                selected: false
+            };
         }
         uMs[app][field] = format;
         setAttributes({ measures: uMs });
@@ -30,7 +31,12 @@ export const CSVConfig = ({ attributes: { csv, panelStatus, measures, type }, se
             setAttributes({ measures: uMs });
         }
         else {
-            uMs[app] = { allowSelection: false, format: Object.assign({}, { ...defaultFormat }), customFormat: Object.assign({}, { ...defaultFormat }), selected: false };
+            uMs[app] = {
+                allowSelection: false,
+                format: Object.assign({}, { ...defaultFormat }),
+                customFormat: Object.assign({}, { ...defaultFormat }),
+                selected: false
+            };
             uMs[app].useCustomAxisFormat = value;
             setAttributes({ measures: uMs });
         }
@@ -42,7 +48,6 @@ export const CSVConfig = ({ attributes: { csv, panelStatus, measures, type }, se
                     onFormatChange(newFormat, field);
                 }, onUseCustomAxisFormatChange: value => {
                     onUseCustomAxisFormatChange(value);
-                } }))
-    ]);
+                } }))]);
 };
 export default CSVConfig;

package/build/ChartColors.d.ts

@@ -1,55 +1,14 @@
-import React from "react";
-import { Categories, Dimension, Filter, Measure } from "./types";
-export declare const categorical: {
+export const categorical: {
     value: string;
     label: string;
 }[];
-export declare const sequential: {
+export const sequential: {
     value: string;
     label: string;
 }[];
-export declare const diverging: {
+export const diverging: {
     value: string;
     label: string;
 }[];
-export type ChartColorsProps = {
-    allDimensions?: Dimension[];
-    allFilters?: Filter[];
-    allMeasures?: Measure[];
-    allCategories?: Categories;
-    allApps?: any[];
-    setAttributes: (attributes: {
-        swap: boolean;
-        measures: Record<string, {
-            selected: boolean;
-        }>;
-        manualColors?: Record<string, Record<string, string>>;
-        scheme: string;
-        colorBy: string;
-        dimension1: string;
-        dimension2: string;
-        barColor: string | null;
-        type: string;
-        app: string;
-        csv: string;
-        includeOverall: boolean;
-    }) => void;
-    attributes: {
-        swap: boolean;
-        measures: Record<string, {
-            selected: boolean;
-        }>;
-        manualColors: Record<string, Record<string, string>>;
-        scheme: string;
-        colorBy: string;
-        dimension1: string;
-        dimension2: string;
-        barColor: string;
-        type: string;
-        app: string;
-        csv: string;
-        includeOverall: boolean;
-    };
-};
-export declare const ChartColors: (props: ChartColorsProps) => (string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined)[] | null;
+export function ChartColors(props: any): (false | import("react").JSX.Element)[] | null;
 export default ChartColors;

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;