@operato/chart 2.0.0-beta.25

package/dist/src/editors/configurer.js

@@ -0,0 +1,198 @@
+export class Configurer {
+    constructor(value, initializer) {
+        this.currentSeriesIndex = 0;
+        this.initializer = initializer;
+        this.value = value || initializer.call(this);
+    }
+    setCurrentSeriesIndex(currentSeriesIndex) {
+        this.currentSeriesIndex = currentSeriesIndex;
+        this.series = this.datasets[this.currentSeriesIndex];
+    }
+    get series() {
+        console.log('series', this.datasets[this.currentSeriesIndex]);
+        return this.datasets[this.currentSeriesIndex];
+    }
+    set series(series) {
+        if (!this.data) {
+            this.config.data = { datasets: [series] };
+        }
+        else {
+            this.datasets[this.currentSeriesIndex] = series;
+        }
+    }
+    get config() {
+        if (!this.value) {
+            this.value = this.initializer.call(this);
+        }
+        return this.value;
+    }
+    get data() {
+        return this.config.data;
+    }
+    set data(data) {
+        this.config.data = data;
+    }
+    get datasets() {
+        if (!this.data.datasets) {
+            this.data.datasets = [];
+        }
+        return this.data.datasets;
+    }
+    set datasets(datasets) {
+        this.datasets = datasets;
+    }
+    set dataKey(key) {
+        if (this.series) {
+            this.series.dataKey = key;
+        }
+    }
+    get dataKey() {
+        return this.series.dataKey;
+    }
+    get legend() {
+        !this.config.options && (this.config.options = {});
+        return this.config.options.legend;
+    }
+    set legend(legend) {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        this.config.options.legend = legend;
+    }
+    get theme() {
+        return this.config.options && this.config.options.theme;
+    }
+    set theme(theme) {
+        !this.config.options && (this.config.options = {});
+        this.config.options.theme = theme;
+    }
+    get tooltip() {
+        return !this.config.options || this.config.options.tooltip !== false;
+    }
+    set tooltip(tooltip) {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        this.config.options.tooltip = tooltip;
+    }
+    get animation() {
+        return !this.config.options || this.config.options.animation !== false;
+    }
+    set animation(animation) {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        this.config.options.animation = animation;
+    }
+    get scales() {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        return this.config.options.scales;
+    }
+    set scales(scales) {
+        !this.config.options && (this.config.options = {});
+        this.config.options.scales = scales;
+    }
+    get display() {
+        return this.legend && this.legend.display;
+    }
+    set display(display) {
+        if (!this.legend) {
+            this.legend = {};
+        }
+        this.legend.display = display;
+    }
+    get position() {
+        if (!this.legend) {
+            this.legend = {};
+        }
+        return this.legend.position;
+    }
+    set position(position) {
+        if (!this.legend) {
+            this.legend = {};
+        }
+        this.legend.position = position;
+    }
+    get stacked() {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        return this.config.options.stacked;
+    }
+    set stacked(stacked) {
+        if (!this.config.options) {
+            this.config.options = {};
+        }
+        this.config.options.stacked = stacked;
+    }
+    get labelDataKey() {
+        return this.data && this.data.labelDataKey;
+    }
+    set labelDataKey(labelDataKey) {
+        this.data.labelDataKey = labelDataKey;
+    }
+    set options(options) {
+        this.config.options = options;
+    }
+    get options() {
+        return this.config.options;
+    }
+    get color() {
+        var oldVersionColor = this.series.backgroundColor;
+        if (this.series.type == 'line')
+            oldVersionColor = this.series.borderColor;
+        if (this.series.type == 'radar')
+            oldVersionColor = this.series.borderColor;
+        return this.series.color || oldVersionColor;
+    }
+    set color(color) {
+        this.series.color = color; // Array.isArray(color) ? color[0] : color
+        delete this.series.backgroundColor;
+        delete this.series.borderColor;
+    }
+    get xAxes0() {
+        return this.scales.xAxes[0];
+    }
+    set xAxes0(xAxes0) {
+        this.scales.xAxes[0] = xAxes0;
+    }
+    get yAxes0() {
+        return this.scales.yAxes[0];
+    }
+    set yAxes0(yAxes0) {
+        this.scales.yAxes[0] = yAxes0;
+    }
+    get yAxes1() {
+        return this.scales.yAxes[1];
+    }
+    set yAxes1(yAxes1) {
+        this.scales.yAxes[1] = yAxes1;
+    }
+    get multiAxis() {
+        return this.config.options.multiAxis;
+    }
+    set multiAxis(multiAxis) {
+        this.config.options.multiAxis = multiAxis;
+    }
+    get valuePrefix() {
+        return this.series.valuePrefix;
+    }
+    set valuePrefix(valuePrefix) {
+        this.series.valuePrefix = valuePrefix;
+    }
+    get valueSuffix() {
+        return this.series.valueSuffix;
+    }
+    set valueSuffix(valueSuffix) {
+        this.series.valueSuffix = valueSuffix;
+    }
+    get displayValue() {
+        return this.series.displayValue;
+    }
+    set displayValue(displayValue) {
+        this.series.displayValue = displayValue;
+    }
+}
+//# sourceMappingURL=configurer.js.map

package/dist/src/editors/configurer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configurer.js","sourceRoot":"","sources":["../../../src/editors/configurer.ts"],"names":[],"mappings":"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","sourcesContent":["export class Configurer {\n  public value: OperatoChart.ChartConfig\n  public currentSeriesIndex: number = 0\n  public initializer: () => OperatoChart.ChartConfig\n\n  constructor(value: OperatoChart.ChartConfig | null, initializer: () => OperatoChart.ChartConfig) {\n    this.initializer = initializer\n    this.value = value || initializer.call(this)\n  }\n\n  setCurrentSeriesIndex(currentSeriesIndex: number) {\n    this.currentSeriesIndex = currentSeriesIndex\n    this.series = this.datasets[this.currentSeriesIndex]!\n  }\n\n  get series() {\n    console.log('series', this.datasets[this.currentSeriesIndex]!)\n    return this.datasets[this.currentSeriesIndex]!\n  }\n\n  set series(series) {\n    if (!this.data) {\n      this.config.data = { datasets: [series] }\n    } else {\n      this.datasets[this.currentSeriesIndex] = series\n    }\n  }\n\n  get config() {\n    if (!this.value) {\n      this.value = this.initializer.call(this)\n    }\n    return this.value\n  }\n\n  get data() {\n    return this.config.data\n  }\n\n  set data(data) {\n    this.config.data = data\n  }\n\n  get datasets() {\n    if (!this.data.datasets) {\n      this.data.datasets = []\n    }\n    return this.data.datasets\n  }\n\n  set datasets(datasets) {\n    this.datasets = datasets\n  }\n\n  set dataKey(key) {\n    if (this.series) {\n      this.series!.dataKey = key\n    }\n  }\n\n  get dataKey() {\n    return this.series.dataKey\n  }\n\n  get legend() {\n    !this.config.options && (this.config.options = {})\n    return this.config.options.legend\n  }\n\n  set legend(legend) {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    this.config.options.legend = legend\n  }\n\n  get theme() {\n    return this.config.options && this.config.options.theme\n  }\n\n  set theme(theme) {\n    !this.config.options && (this.config.options = {})\n    this.config.options.theme = theme\n  }\n\n  get tooltip() {\n    return !this.config.options || this.config.options.tooltip !== false\n  }\n\n  set tooltip(tooltip) {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    this.config.options.tooltip = tooltip\n  }\n\n  get animation() {\n    return !this.config.options || this.config.options.animation !== false\n  }\n\n  set animation(animation) {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    this.config.options.animation = animation\n  }\n\n  get scales() {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    return this.config.options.scales\n  }\n\n  set scales(scales) {\n    !this.config.options && (this.config.options = {})\n    this.config.options.scales = scales\n  }\n\n  get display() {\n    return this.legend && this.legend.display\n  }\n\n  set display(display) {\n    if (!this.legend) {\n      this.legend = {}\n    }\n    this.legend.display = display\n  }\n\n  get position() {\n    if (!this.legend) {\n      this.legend = {}\n    }\n    return this.legend.position\n  }\n\n  set position(position) {\n    if (!this.legend) {\n      this.legend = {}\n    }\n    this.legend.position = position\n  }\n\n  get stacked() {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    return this.config.options.stacked\n  }\n\n  set stacked(stacked) {\n    if (!this.config.options) {\n      this.config.options = {}\n    }\n    this.config.options.stacked = stacked\n  }\n\n  get labelDataKey() {\n    return this.data && this.data.labelDataKey\n  }\n\n  set labelDataKey(labelDataKey) {\n    this.data.labelDataKey = labelDataKey\n  }\n\n  set options(options) {\n    this.config.options = options\n  }\n\n  get options() {\n    return this.config.options\n  }\n\n  get color() {\n    var oldVersionColor = this.series.backgroundColor\n    if (this.series.type == 'line') oldVersionColor = this.series.borderColor\n    if (this.series.type == 'radar') oldVersionColor = this.series.borderColor\n    return this.series.color || oldVersionColor\n  }\n\n  set color(color) {\n    this.series.color = color // Array.isArray(color) ? color[0] : color\n    delete this.series.backgroundColor\n    delete this.series.borderColor\n  }\n\n  get xAxes0() {\n    return this.scales!.xAxes![0]\n  }\n\n  set xAxes0(xAxes0) {\n    this.scales!.xAxes![0] = xAxes0\n  }\n\n  get yAxes0() {\n    return this.scales!.yAxes![0]\n  }\n\n  set yAxes0(yAxes0) {\n    this.scales!.yAxes![0] = yAxes0\n  }\n\n  get yAxes1() {\n    return this.scales!.yAxes![1]\n  }\n\n  set yAxes1(yAxes1) {\n    this.scales!.yAxes![1] = yAxes1\n  }\n\n  get multiAxis() {\n    return this.config.options!.multiAxis\n  }\n\n  set multiAxis(multiAxis) {\n    this.config.options!.multiAxis = multiAxis\n  }\n\n  get valuePrefix() {\n    return this.series.valuePrefix\n  }\n\n  set valuePrefix(valuePrefix) {\n    this.series.valuePrefix = valuePrefix\n  }\n\n  get valueSuffix() {\n    return this.series.valueSuffix\n  }\n\n  set valueSuffix(valueSuffix) {\n    this.series.valueSuffix = valueSuffix\n  }\n\n  get displayValue() {\n    return this.series.displayValue\n  }\n\n  set displayValue(displayValue) {\n    this.series.displayValue = displayValue\n  }\n}\n"]}

package/dist/src/editors/index.d.ts

@@ -0,0 +1,6 @@
+import './ox-property-editor-chart';
+declare const _default: {
+    type: string;
+    element: string;
+}[];
+export default _default;

package/dist/src/editors/index.js

@@ -0,0 +1,8 @@
+import './ox-property-editor-chart';
+export default [
+    {
+        type: 'chart',
+        element: 'property-editor-chart'
+    }
+];
+//# sourceMappingURL=index.js.map

package/dist/src/editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/editors/index.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,eAAe;IACb;QACE,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAA","sourcesContent":["import './ox-property-editor-chart'\n\nexport default [\n  {\n    type: 'chart',\n    element: 'property-editor-chart'\n  }\n]\n"]}

package/dist/src/editors/input-chart-abstract.d.ts

@@ -0,0 +1,27 @@
+import '@operato/i18n/ox-i18n.js';
+import { TinyColor } from '@ctrl/tinycolor';
+import { Configurer } from './configurer';
+import { OxFormField } from '@operato/input';
+export declare class InputChartAbstract extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    value: OperatoChart.ChartConfig | null;
+    configurer: Configurer;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    displayValueTemplate(): import("lit-html").TemplateResult<1>;
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed';
+    getDefaultDatasets(): OperatoChart.Dataset[];
+    getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset;
+    getDefaultChartConfig(type: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed', datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
+    getDefaultAxisOptions(): OperatoChart.AxisOptions;
+    onValuesChanged(e: Event): void;
+    onTapAddTab(e: Event): void;
+    onTapRemoveCurrentTab(e: Event): void;
+    _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }: {
+        chartType: string;
+        datasetsLength: number;
+        lastSeriesColor: TinyColor;
+    }): any;
+    _getElementValue(element: HTMLElement): any;
+}

package/dist/src/editors/input-chart-abstract.js

@@ -0,0 +1,273 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
+import { InputChartStyles } from './input-chart-styles';
+import { Configurer } from './configurer';
+import { OxFormField } from '@operato/input';
+export class InputChartAbstract extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = null;
+        this.configurer = new Configurer(this.value || null, () => {
+            return this.getDefaultChartConfig(this.getChartType(), this.getDefaultDatasets());
+        });
+    }
+    static { this.styles = [InputChartStyles]; }
+    render() {
+        const configurer = this.configurer;
+        return html `
+      <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
+
+      <label for="theme"> <ox-i18n msgid="label.theme">Theme</ox-i18n> </label>
+      <select id="theme" value-key="theme" class="select-content" .value=${configurer.theme || ''}>
+        <option value="dark">dark</option>
+        <option value="light">light</option>
+      </select>
+
+      <input id="tooltip" type="checkbox" value-key="tooltip" ?checked=${configurer.tooltip} />
+      <label for="tooltip"> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
+
+      <input id="animation" type="checkbox" value-key="animation" ?checked=${configurer.animation} />
+      <label for="animation"> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
+
+      <input id="display" type="checkbox" value-key="display" ?checked=${configurer.display} />
+      <label for="display"> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
+
+      <input id="stacked" type="checkbox" value-key="stacked" ?checked=${configurer.stacked} />
+      <label for="stacked"> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
+
+      ${configurer.display
+            ? html `
+            <label for="position"> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
+            <select id="position" value-key="position" class="select-content" .value=${configurer.position || ''}>
+              <option value="top">top</option>
+              <option value="right">right</option>
+              <option value="bottom">bottom</option>
+              <option value="left">left</option>
+            </select>
+          `
+            : html ``}
+      ${this.subTemplate()}
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this));
+    }
+    displayValueTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <label for="value-prefix"> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
+      <input
+        id="value-prefix"
+        type="text"
+        value-key="series.valuePrefix"
+        .value=${configurer.series.valuePrefix || ''}
+      />
+
+      <label for="value-suffix"> <ox-i18n msgid="label.value-suffix">Value Suffix</ox-i18n> </label>
+      <input
+        id="value-suffix"
+        type="text"
+        value-key="series.valueSuffix"
+        .value=${configurer.series.valueSuffix || ''}
+      />
+
+      <input
+        id="display-value"
+        type="checkbox"
+        value-key="series.displayValue"
+        ?checked=${!!configurer.series.displayValue}
+      />
+      <label for="display-value"> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
+
+      ${configurer.series.displayValue
+            ? html `
+            <label for="font-color"> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
+            <ox-input-color
+              id="font-color"
+              value-key="series.defaultFontColor"
+              .value=${configurer.series.defaultFontColor || '#000'}
+            ></ox-input-color>
+            <label for="font-size"> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
+            <input
+              id="font-size"
+              type="number"
+              value-key="series.defaultFontSize"
+              value=${configurer.series.defaultFontSize || 10}
+            />
+            <label for="data-label-anchor"> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
+            <select
+              id="data-label-anchor"
+              value-key="series.dataLabelAnchor"
+              value=${configurer.series.dataLabelAnchor || 'center'}
+            >
+              <option value="start">Start</option>
+              <option value="center" selected>Center</option>
+              <option value="end">End</option>
+            </select>
+          `
+            : html ``}
+    `;
+    }
+    subTemplate() {
+        return html ``;
+    }
+    getChartType() {
+        return 'bar';
+    }
+    getDefaultDatasets() {
+        return [this.getDefaultDataset('bar')];
+    }
+    getDefaultDataset(seriesType) {
+        return {
+            label: 'Series 1',
+            data: [],
+            borderWidth: 1,
+            dataKey: '',
+            yAxisID: 'left',
+            color: '#000',
+            backgroundColor: '#FFFFFF',
+            type: seriesType,
+            stack: '',
+            fill: false,
+            lineTension: 0.4,
+            pointStyle: 'circle',
+            pointRadius: 3,
+            valuePrefix: '',
+            valueSuffix: '',
+            displayValue: false
+        };
+    }
+    getDefaultChartConfig(type, datasets) {
+        return {
+            data: {
+                datasets: datasets || [],
+                labelDataKey: ''
+            },
+            options: {
+                theme: 'light',
+                tooltip: true,
+                animation: true,
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                scales: {
+                    xAxes: [this.getDefaultAxisOptions()],
+                    yAxes: [this.getDefaultAxisOptions()]
+                },
+                stacked: false,
+                xGridLine: true,
+                yGridLine: true,
+                y2ndGridLine: false,
+                multiAxis: false
+            },
+            type
+        };
+    }
+    getDefaultAxisOptions() {
+        return {
+            axisTitle: '',
+            barSpacing: 0,
+            categorySpacing: 0,
+            barPercentage: 0.9,
+            ticks: {
+                display: true,
+                autoMin: true,
+                autoMax: true,
+                min: undefined,
+                max: undefined,
+                stepSize: undefined
+            }
+        };
+    }
+    onValuesChanged(e) {
+        e.stopPropagation();
+        const element = e.target;
+        let key = element.getAttribute('value-key');
+        let value = element.value;
+        if (!key) {
+            return;
+        }
+        value = this._getElementValue(element);
+        const attrs = key.split('.');
+        let attr = attrs.shift() || '';
+        let variable = this.configurer;
+        while (attrs.length > 0) {
+            variable = variable[attr];
+            attr = attrs.shift() || '';
+        }
+        variable[attr] = value;
+        this.value = { ...this.configurer.value };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        this.requestUpdate();
+    }
+    onTapAddTab(e) {
+        const configurer = this.configurer;
+        if (!configurer.config.data.datasets)
+            return;
+        const lastSeriesIndex = configurer.config.data.datasets.length;
+        const chartType = configurer.series.type || configurer.config.type;
+        const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor;
+        const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color);
+        const seriesModel = this._getSeriesModel({
+            chartType: chartType,
+            datasetsLength: lastSeriesIndex,
+            lastSeriesColor
+        });
+        configurer.config.data.datasets.push(seriesModel);
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        configurer.currentSeriesIndex = lastSeriesIndex;
+        this.value = { ...this.configurer.value };
+    }
+    onTapRemoveCurrentTab(e) {
+        const configurer = this.configurer;
+        if (!configurer.config.data.datasets)
+            return;
+        let currIndex = configurer.currentSeriesIndex;
+        this.configurer.data.datasets.splice(currIndex, 1);
+        currIndex--;
+        if (currIndex < 0)
+            currIndex = 0;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        configurer.currentSeriesIndex = currIndex;
+        this.requestUpdate();
+    }
+    _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }) {
+        const addSeriesOption = {
+            label: `series ${datasetsLength + 1}`,
+            data: [],
+            borderWidth: 1,
+            dataKey: '',
+            yAxisID: 'left',
+            color: randomColor({
+                hue: lastSeriesColor.toHsv().h
+            }).toRgbString(),
+            stack: ''
+        };
+        addSeriesOption.type = addSeriesOption.chartType = chartType;
+        return addSeriesOption;
+    }
+    _getElementValue(element) {
+        switch (element.tagName) {
+            case 'INPUT':
+                switch (element.type) {
+                    case 'checkbox':
+                        return element.checked;
+                    case 'number':
+                        return Number(element.value) || 0;
+                    case 'text':
+                        return String(element.value);
+                }
+            default:
+                return element.value;
+        }
+    }
+}
+__decorate([
+    property({ type: Object })
+], InputChartAbstract.prototype, "value", void 0);
+//# sourceMappingURL=input-chart-abstract.js.map

package/dist/src/editors/input-chart-abstract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-chart-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, PropertyValueMap } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { InputChartStyles } from './input-chart-styles'\nimport { Configurer } from './configurer'\nimport { OxFormField } from '@operato/input'\n\nexport class InputChartAbstract extends OxFormField {\n  static styles = [InputChartStyles]\n\n  @property({ type: Object }) value: OperatoChart.ChartConfig | null = null\n\n  configurer: Configurer = new Configurer(this.value || null, () => {\n    return this.getDefaultChartConfig(this.getChartType(), this.getDefaultDatasets())\n  })\n\n  render() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.chart\">Chart</ox-i18n></legend>\n\n      <label for=\"theme\"> <ox-i18n msgid=\"label.theme\">Theme</ox-i18n> </label>\n      <select id=\"theme\" value-key=\"theme\" class=\"select-content\" .value=${configurer.theme || ''}>\n        <option value=\"dark\">dark</option>\n        <option value=\"light\">light</option>\n      </select>\n\n      <input id=\"tooltip\" type=\"checkbox\" value-key=\"tooltip\" ?checked=${configurer.tooltip} />\n      <label for=\"tooltip\"> <ox-i18n msgid=\"label.tooltip\">Tooltip</ox-i18n> </label>\n\n      <input id=\"animation\" type=\"checkbox\" value-key=\"animation\" ?checked=${configurer.animation} />\n      <label for=\"animation\"> <ox-i18n msgid=\"label.animation\">Animation</ox-i18n> </label>\n\n      <input id=\"display\" type=\"checkbox\" value-key=\"display\" ?checked=${configurer.display} />\n      <label for=\"display\"> <ox-i18n msgid=\"label.legend\">Legend</ox-i18n> </label>\n\n      <input id=\"stacked\" type=\"checkbox\" value-key=\"stacked\" ?checked=${configurer.stacked} />\n      <label for=\"stacked\"> <ox-i18n msgid=\"label.stacked\">Stacked</ox-i18n> </label>\n\n      ${configurer.display\n        ? html`\n            <label for=\"position\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select id=\"position\" value-key=\"position\" class=\"select-content\" .value=${configurer.position || ''}>\n              <option value=\"top\">top</option>\n              <option value=\"right\">right</option>\n              <option value=\"bottom\">bottom</option>\n              <option value=\"left\">left</option>\n            </select>\n          `\n        : html``}\n      ${this.subTemplate()}\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))\n  }\n\n  displayValueTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <label for=\"value-prefix\"> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n      <input\n        id=\"value-prefix\"\n        type=\"text\"\n        value-key=\"series.valuePrefix\"\n        .value=${configurer.series.valuePrefix || ''}\n      />\n\n      <label for=\"value-suffix\"> <ox-i18n msgid=\"label.value-suffix\">Value Suffix</ox-i18n> </label>\n      <input\n        id=\"value-suffix\"\n        type=\"text\"\n        value-key=\"series.valueSuffix\"\n        .value=${configurer.series.valueSuffix || ''}\n      />\n\n      <input\n        id=\"display-value\"\n        type=\"checkbox\"\n        value-key=\"series.displayValue\"\n        ?checked=${!!configurer.series.displayValue}\n      />\n      <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n      ${configurer.series.displayValue\n        ? html`\n            <label for=\"font-color\"> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n            <ox-input-color\n              id=\"font-color\"\n              value-key=\"series.defaultFontColor\"\n              .value=${configurer.series.defaultFontColor || '#000'}\n            ></ox-input-color>\n            <label for=\"font-size\"> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n            <input\n              id=\"font-size\"\n              type=\"number\"\n              value-key=\"series.defaultFontSize\"\n              value=${configurer.series.defaultFontSize || 10}\n            />\n            <label for=\"data-label-anchor\"> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select\n              id=\"data-label-anchor\"\n              value-key=\"series.dataLabelAnchor\"\n              value=${configurer.series.dataLabelAnchor || 'center'}\n            >\n              <option value=\"start\">Start</option>\n              <option value=\"center\" selected>Center</option>\n              <option value=\"end\">End</option>\n            </select>\n          `\n        : html``}\n    `\n  }\n\n  subTemplate() {\n    return html``\n  }\n\n  getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed' {\n    return 'bar'\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('bar')]\n  }\n\n  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {\n    return {\n      label: 'Series 1',\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: '#000',\n      backgroundColor: '#FFFFFF',\n      type: seriesType,\n      stack: '',\n      fill: false,\n      lineTension: 0.4,\n      pointStyle: 'circle',\n      pointRadius: 3,\n      valuePrefix: '',\n      valueSuffix: '',\n      displayValue: false\n    }\n  }\n\n  getDefaultChartConfig(\n    type: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed',\n    datasets?: OperatoChart.Dataset[]\n  ): OperatoChart.ChartConfig {\n    return {\n      data: {\n        datasets: datasets || [],\n        labelDataKey: ''\n      },\n      options: {\n        theme: 'light',\n        tooltip: true,\n        animation: true,\n        legend: {\n          display: true,\n          position: 'top'\n        },\n        scales: {\n          xAxes: [this.getDefaultAxisOptions()],\n          yAxes: [this.getDefaultAxisOptions()]\n        },\n        stacked: false,\n        xGridLine: true,\n        yGridLine: true,\n        y2ndGridLine: false,\n        multiAxis: false\n      },\n      type\n    }\n  }\n\n  getDefaultAxisOptions(): OperatoChart.AxisOptions {\n    return {\n      axisTitle: '',\n      barSpacing: 0,\n      categorySpacing: 0,\n      barPercentage: 0.9,\n      ticks: {\n        display: true,\n        autoMin: true,\n        autoMax: true,\n        min: undefined,\n        max: undefined,\n        stepSize: undefined\n      }\n    }\n  }\n\n  onValuesChanged(e: Event) {\n    e.stopPropagation()\n\n    const element = e.target as HTMLInputElement\n    let key = element.getAttribute('value-key')\n    let value = element.value\n\n    if (!key) {\n      return\n    }\n\n    value = this._getElementValue(element)\n\n    const attrs = key.split('.')\n    let attr = attrs.shift() || ''\n    let variable: any = this.configurer\n\n    while (attrs.length > 0) {\n      variable = variable[attr]\n      attr = attrs.shift() || ''\n    }\n\n    variable[attr] = value\n\n    this.value = { ...this.configurer.value }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.requestUpdate()\n  }\n\n  onTapAddTab(e: Event) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) return\n\n    const lastSeriesIndex = configurer.config.data.datasets.length\n    const chartType = configurer.series.type || configurer.config.type\n    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor\n    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)\n\n    const seriesModel = this._getSeriesModel({\n      chartType: chartType!,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    configurer.config.data.datasets.push(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = lastSeriesIndex\n\n    this.value = { ...this.configurer.value }\n  }\n\n  onTapRemoveCurrentTab(e: Event) {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) return\n\n    let currIndex = configurer.currentSeriesIndex\n    this.configurer.data.datasets.splice(currIndex, 1)\n\n    currIndex--\n\n    if (currIndex < 0) currIndex = 0\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    configurer.currentSeriesIndex = currIndex\n\n    this.requestUpdate()\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: string\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    const addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor.toHsv().h\n      }).toRgbString(),\n      stack: ''\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  _getElementValue(element: HTMLElement) {\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as HTMLInputElement).type) {\n          case 'checkbox':\n            return (element as HTMLInputElement).checked\n          case 'number':\n            return Number((element as HTMLInputElement).value) || 0\n          case 'text':\n            return String((element as HTMLInputElement).value)\n        }\n      default:\n        return (element as any).value\n    }\n  }\n}\n"]}

package/dist/src/editors/input-chart-multi-series-abstract.d.ts

@@ -0,0 +1,17 @@
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { MdIcon } from '@material/web/icon/icon.js';
+import { InputChartAbstract } from './input-chart-abstract';
+export declare class InputChartMultiSeriesAbstract extends InputChartAbstract {
+    static styles: import("lit").CSSResult[];
+    tabs: HTMLElement;
+    tabNavLeftButton: MdIcon;
+    tabNavRightButton: MdIcon;
+    get tabContainer(): HTMLElement | null | undefined;
+    firstUpdated(): void;
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
+    _onTabScroll(e: Event): void;
+    _onTabScrollNavLeft(e: Event): void;
+    _onTabScrollNavRight(e: Event): void;
+}