@operato/chart 7.0.37 → 7.0.40

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

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
 import '@operato/i18n/ox-i18n.js';
 import { html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
+import { property } from 'lit/decorators.js';
 import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
 import { InputChartStyles } from './input-chart-styles';
 import { Configurer } from './configurer';
@@ -68,108 +67,6 @@ export class InputChartAbstract extends OxFormField {
         super.connectedCallback();
         this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this));
     }
-    firstUpdated(_changedProperties) {
-        this.seriesTabContainer?.addEventListener('scroll', e => {
-            this._onTabScroll(e, 'series');
-        });
-        this.annotationsTabContainer?.addEventListener('scroll', e => {
-            this._onTabScroll(e, 'annotations');
-        });
-    }
-    get seriesTabContainer() {
-        return this.seriesTabs;
-    }
-    get annotationsTabContainer() {
-        return this.annotationsTabs;
-    }
-    displayValueTemplate() {
-        const configurer = this.configurer;
-        return html `
-      <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
-      <input
-        id="value-format"
-        type="text"
-        value-key="series.valueFormat"
-        .value=${configurer.series.valueFormat || ''}
-        list="format-list"
-      />
-      <datalist id="format-list">
-        <option value="#,###."></option>
-        <option value="#,###.#"></option>
-        <option value="#,###.0"></option>
-        <option value="#,##0.#"></option>
-        <option value="#,##0.0"></option>
-        <option value="#,##0.0%"></option>
-      </datalist>
-
-      <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.data-label-anchor">Position</ox-i18n> </label>
-            <select
-              id="data-label-anchor"
-              value-key="series.dataLabelAnchor"
-              .value=${configurer.series.dataLabelAnchor || 'center'}
-            >
-              <option value=""></option>
-              <option value="start">Start</option>
-              <option value="center">Center</option>
-              <option value="end">End</option>
-            </select>
-            <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
-            <input
-              id="data-label-offset"
-              type="number"
-              value-key="series.dataLabelOffset"
-              value=${configurer.series.dataLabelOffset || 0}
-            />
-            <label for="data-label-rotation"> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
-            <input
-              id="data-label-rotation"
-              type="number"
-              value-key="series.dataLabelRotation"
-              value=${configurer.series.dataLabelRotation || 0}
-            />
-          `
-            : html ``}
-    `;
-    }
     subTemplate() {
         return html ``;
     }
@@ -262,67 +159,6 @@ export class InputChartAbstract extends OxFormField {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         this.requestUpdate();
     }
-    onTapAddSeriesTab(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.setCurrentSeriesIndex(lastSeriesIndex);
-        this.value = { ...this.configurer.value };
-    }
-    onTapRemoveCurrentSeriesTab(index) {
-        const configurer = this.configurer;
-        if (!configurer.config.data.datasets) {
-            return;
-        }
-        this.configurer.data.datasets.splice(index, 1);
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        configurer.setCurrentSeriesIndex(Math.max(0, configurer.currentSeriesIndex - 1));
-        this.requestUpdate();
-    }
-    onTapAddAnnotation(e) {
-        const configurer = this.configurer;
-        const lastAnnotationIndex = configurer.annotations.length;
-        configurer.annotations.push({ type: 'line', x1: 0, y1: 0 });
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        configurer.setCurrentAnnotationIndex(lastAnnotationIndex);
-        this.value = { ...this.configurer.value };
-    }
-    onTapRemoveCurrentAnnotation(index) {
-        const configurer = this.configurer;
-        if (!configurer.annotations) {
-            return;
-        }
-        configurer.annotations.splice(index, 1);
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        configurer.setCurrentAnnotationIndex(Math.max(0, configurer.currentAnnotationIndex - 1));
-        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':
@@ -338,430 +174,6 @@ export class InputChartAbstract extends OxFormField {
                 return element.value;
         }
     }
-    annotationsTabTemplate() {
-        const configurer = this.configurer;
-        const currentAnnotation = configurer.annotations[configurer.currentAnnotationIndex] || {};
-        return keyed(configurer.currentAnnotationIndex, html `
-        <div id="annotations-properties-container" fullwidth>
-          <div id="annotations-tab-header">
-            <md-icon
-              id="annotations-tab-nav-left-button"
-              @tap=${(e) => {
-            this._onTabScrollNavLeft(e, 'annotations');
-        }}
-              disabled
-              >chevron_left</md-icon
-            >
-            <div
-              id="annotations-tabs"
-              @change=${(e) => {
-            configurer.setCurrentAnnotationIndex(e.target.activeTabIndex);
-        }}
-              active-tab-index=${configurer.currentAnnotationIndex}
-              fit-container
-            >
-              ${configurer.annotations.map((annotation, index) => html `
-                  <div
-                    data-annotation=${index + 1}
-                    data-tab-index=${index}
-                    tab
-                    ?selected=${index == configurer.currentAnnotationIndex}
-                    @click=${(e) => {
-            const target = e.target;
-            this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')));
-            this.value = { ...this.configurer.value };
-        }}
-                  >
-                    ${index + 1}
-                    ${!configurer.annotations ||
-            (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
-            ? html `
-                          <md-icon @tap=${(e) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon>
-                        `
-            : html ``}
-                  </div>
-                `)}
-            </div>
-            <md-icon
-              id="annotations-tab-nav-right-button"
-              @click=${(e) => {
-            this._onTabScrollNavRight(e, 'annotations');
-        }}
-              disabled
-              >chevron_right</md-icon
-            >
-          </div>
-          <div id="add-annotation-button-container">
-            <md-icon id="add-annotation-button" @tap=${(e) => this.onTapAddAnnotation(e)}>add</md-icon>
-          </div>
-
-          <div class="tab-content">
-            <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
-            <select
-              id="annotation-type"
-              class="select-content"
-              value-key="annotation.type"
-              .value=${currentAnnotation.type || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="line">Line</option>
-              <option value="text">Text</option>
-              <option value="box">Box</option>
-              <option value="horizontalLine">Horizontal Line</option>
-              <option value="verticalLine">Vertical Line</option>
-            </select>
-
-            <label for="annotation-x1">X1</label>
-            <input
-              id="annotation-x1"
-              type="number"
-              value-key="annotation.x1"
-              .value=${String(currentAnnotation.x1 || 0)}
-            />
-
-            <label for="annotation-y1">Y1</label>
-            <input
-              id="annotation-y1"
-              type="number"
-              value-key="annotation.y1"
-              .value=${String(currentAnnotation.y1 || 0)}
-            />
-
-            <label for="annotation-x2">X2</label>
-            <input
-              id="annotation-x2"
-              type="number"
-              value-key="annotation.x2"
-              .value=${String(currentAnnotation.x2 || 0)}
-            />
-
-            <label for="annotation-y2">Y2</label>
-            <input
-              id="annotation-y2"
-              type="number"
-              value-key="annotation.y2"
-              .value=${String(currentAnnotation.y2 || 0)}
-            />
-
-            <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
-            <ox-input-color
-              id="annotation-stroke"
-              value-key="annotation.stroke"
-              .value=${currentAnnotation.stroke}
-            ></ox-input-color>
-
-            <label for="annotation-stroke-thickness">
-              <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
-            </label>
-            <input
-              id="annotation-stroke-thickness"
-              type="number"
-              value-key="annotation.strokeThickness"
-              .value=${String(currentAnnotation.strokeThickness || 1)}
-            />
-
-            <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
-            <ox-input-color
-              id="annotation-fill"
-              value-key="annotation.fill"
-              .value=${currentAnnotation.fill}
-            ></ox-input-color>
-
-            <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
-            <input
-              id="annotation-text"
-              type="text"
-              value-key="annotation.text"
-              .value=${currentAnnotation.text || ''}
-            />
-
-            <label for="annotation-horizontal-anchor">
-              <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
-            </label>
-            <select
-              id="annotation-horizontal-anchor"
-              class="select-content"
-              value-key="annotation.horizontalAnchorPoint"
-              .value=${currentAnnotation.horizontalAnchorPoint || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="Left">Left</option>
-              <option value="Center">Center</option>
-              <option value="Right">Right</option>
-            </select>
-
-            <label for="annotation-vertical-anchor">
-              <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
-            </label>
-            <select
-              id="annotation-vertical-anchor"
-              class="select-content"
-              value-key="annotation.verticalAnchorPoint"
-              .value=${currentAnnotation.verticalAnchorPoint || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="Top">Top</option>
-              <option value="Center">Center</option>
-              <option value="Bottom">Bottom</option>
-            </select>
-
-            <label for="annotation-x-coordinate-mode">X Coordinate Mode</label>
-            <select
-              id="annotation-x-coordinate-mode"
-              class="select-content"
-              value-key="annotation.xCoordinateMode"
-              .value=${currentAnnotation.xCoordinateMode || 'DataValue'}
-            >
-              <option value="">&nbsp;</option>
-              <option value="DataValue">DataValue</option>
-              <option value="Pixel">Pixel</option>
-              <option value="Relative">Relative</option>
-            </select>
-
-            <label for="annotation-y-coordinate-mode">Y Coordinate Mode</label>
-            <select
-              id="annotation-y-coordinate-mode"
-              class="select-content"
-              value-key="annotation.yCoordinateMode"
-              .value=${currentAnnotation.yCoordinateMode || 'DataValue'}
-            >
-              <option value="">&nbsp;</option>
-              <option value="DataValue">DataValue</option>
-              <option value="Pixel">Pixel</option>
-              <option value="Relative">Relative</option>
-            </select>
-          </div>
-        </div>
-      `);
-    }
-    multiSeriesTabTemplate() {
-        const configurer = this.configurer;
-        return keyed(configurer.currentSeriesIndex, html `
-        <div id="series-properties-container" fullwidth>
-          <div id="series-tab-header">
-            <md-icon
-              id="series-tab-nav-left-button"
-              @tap=${(e) => {
-            this._onTabScrollNavLeft(e, 'series');
-        }}
-              disabled
-              >chevron_left</md-icon
-            >
-            <div
-              id="series-tabs"
-              @change=${(e) => {
-            // configurer.currentSeriesIndex = (e.target as any).activeTabIndex
-            configurer.setCurrentSeriesIndex(e.target.activeTabIndex);
-        }}
-              active-tab-index=${configurer.currentSeriesIndex}
-              fit-container
-            >
-              ${configurer.datasets.map((dataset, index) => html `
-                  <div
-                    data-series=${index + 1}
-                    data-tab-index=${index}
-                    tab
-                    ?selected=${index == configurer.currentSeriesIndex}
-                    @click=${(e) => {
-            const target = e.target;
-            this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')));
-            this.value = { ...this.configurer.value };
-        }}
-                  >
-                    ${index + 1}
-                    ${!configurer.datasets ||
-            (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
-            ? html ` <md-icon @tap=${(e) => this.onTapRemoveCurrentSeriesTab(index)}> close </md-icon> `
-            : html ``}
-                  </div>
-                `)}
-            </div>
-            <md-icon
-              id="series-tab-nav-right-button"
-              @click=${(e) => {
-            this._onTabScrollNavRight(e, 'series');
-        }}
-              disabled
-              >chevron_right</md-icon
-            >
-          </div>
-          <div id="add-series-button-container">
-            <md-icon id="add-series-button" @tap=${(e) => this.onTapAddSeriesTab(e)}>add</md-icon>
-          </div>
-
-          <div class="tab-content">
-            <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-            <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
-
-            ${this.chartType == 'line' || this.chartType == 'bar'
-            ? html `
-                  <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
-                  <select
-                    id="series-type"
-                    class="select-content"
-                    value-key="series.type"
-                    .value=${configurer.series.type || ''}
-                  >
-                    <option value="bar" selected>Bar</option>
-                    <option value="line">Line</option>
-                  </select>
-                `
-            : html ``}
-
-            <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
-            <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
-
-            ${configurer.series.type == 'line'
-            ? html `
-                  <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
-                  <select
-                    id="series-line-tension"
-                    class="select-content"
-                    value-key="series.lineTension"
-                    .value=${String(configurer.series.lineTension || 0)}
-                  >
-                    <option value="0.4">Smooth</option>
-                    <option value="0">Angled</option>
-                  </select>
-                `
-            : html ``}
-            ${configurer.series.type == 'line'
-            ? html `
-                  <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
-                  <input
-                    id="series-border-width"
-                    type="number"
-                    value-key="series.borderWidth"
-                    .value=${String(configurer.series.borderWidth || 0)}
-                  />
-                `
-            : html ``}
-
-            <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
-            <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
-
-            ${configurer.series.type == 'line'
-            ? html `
-                  <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
-                  <select
-                    id="series-point-style"
-                    class="select-content"
-                    value-key="series.pointStyle"
-                    .value=${configurer.series.pointStyle || ''}
-                  >
-                    <option value="">&nbsp;</option>
-                    <option value="circle">⚬</option>
-                    <option value="triangle">▵</option>
-                    <option value="rect">□</option>
-                    <option value="rectRot">◇</option>
-                    <option value="cross">+</option>
-                    <option value="crossRot">⨉</option>
-                    <option value="star">✱</option>
-                    <option value="line">―</option>
-                    <option value="dash">┄</option>
-                  </select>
-
-                  <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
-                  <input
-                    id="series-point-radius"
-                    type="number"
-                    value-key="series.pointRadius"
-                    .value=${String(configurer.series.pointRadius || 0)}
-                  />
-                `
-            : html ``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
-            <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
-            ${configurer.series.type == 'line'
-            ? html `
-                  <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
-                  <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
-                `
-            : html ``}
-            ${configurer.multiAxis
-            ? html `
-                  <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
-                  <select
-                    id="series-y-axis-id"
-                    class="select-content"
-                    value-key="series.yAxisID"
-                    .value=${configurer.series.yAxisID || ''}
-                  >
-                    <option value="left">Left</option>
-                    <option value="right">Right</option>
-                  </select>
-                `
-            : html ``}
-            ${this.displayValueTemplate()}
-          </div>
-        </div>
-      `);
-    }
-    _onTabScroll(e, type) {
-        let tabContainer;
-        let tabNavLeftButton;
-        let tabNavRightButton;
-        if (type === 'series') {
-            tabContainer = this.seriesTabContainer;
-            tabNavLeftButton = this.seriesTabNavLeftButton;
-            tabNavRightButton = this.seriesTabNavRightButton;
-        }
-        else {
-            tabContainer = this.annotationsTabContainer;
-            tabNavLeftButton = this.annotationsTabNavLeftButton;
-            tabNavRightButton = this.annotationsTabNavRightButton;
-        }
-        if (!tabContainer) {
-            return;
-        }
-        if (tabContainer.clientWidth == tabContainer.scrollWidth) {
-            tabNavLeftButton.setAttribute('disabled', '');
-            tabNavRightButton.setAttribute('disabled', '');
-        }
-        // left-end
-        else if (tabContainer.scrollLeft == 0) {
-            tabNavLeftButton.setAttribute('disabled', '');
-            tabNavRightButton.removeAttribute('disabled');
-        }
-        // right-end
-        else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
-            tabNavLeftButton.removeAttribute('disabled');
-            tabNavRightButton.setAttribute('disabled', '');
-        }
-        else {
-            tabNavLeftButton.removeAttribute('disabled');
-            tabNavRightButton.removeAttribute('disabled');
-        }
-    }
-    _onTabScrollNavLeft(e, type) {
-        let tabContainer;
-        if (type === 'series') {
-            tabContainer = this.seriesTabContainer;
-        }
-        else {
-            tabContainer = this.annotationsTabContainer;
-        }
-        if (!tabContainer) {
-            return;
-        }
-        tabContainer.style.scrollBehavior = 'smooth';
-        tabContainer.scrollLeft -= tabContainer.clientWidth;
-        tabContainer.style.scrollBehavior = 'auto';
-    }
-    _onTabScrollNavRight(e, type) {
-        let tabContainer;
-        if (type === 'series') {
-            tabContainer = this.seriesTabContainer;
-        }
-        else {
-            tabContainer = this.annotationsTabContainer;
-        }
-        if (!tabContainer) {
-            return;
-        }
-        tabContainer.style.scrollBehavior = 'smooth';
-        tabContainer.scrollLeft += tabContainer.clientWidth;
-        tabContainer.style.scrollBehavior = 'auto';
-    }
 }
 __decorate([
     property({ type: Object })
@@ -769,22 +181,4 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'chart-type' })
 ], InputChartAbstract.prototype, "chartType", void 0);
-__decorate([
-    query('#annotations-tabs')
-], InputChartAbstract.prototype, "annotationsTabs", void 0);
-__decorate([
-    query('#annotations-tab-nav-left-button')
-], InputChartAbstract.prototype, "annotationsTabNavLeftButton", void 0);
-__decorate([
-    query('#annotations-tab-nav-right-button')
-], InputChartAbstract.prototype, "annotationsTabNavRightButton", void 0);
-__decorate([
-    query('#series-tabs')
-], InputChartAbstract.prototype, "seriesTabs", void 0);
-__decorate([
-    query('#series-tab-nav-left-button')
-], InputChartAbstract.prototype, "seriesTabNavLeftButton", void 0);
-__decorate([
-    query('#series-tab-nav-right-button')
-], InputChartAbstract.prototype, "seriesTabNavRightButton", void 0);
 //# sourceMappingURL=input-chart-abstract.js.map