@operato/chart 7.0.36 → 7.0.39

package/dist/src/editors/templates/series.js

@@ -0,0 +1,277 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
+import './display-value';
+let MultipleSeriesTemplate = class MultipleSeriesTemplate extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {
+            this.requestUpdate();
+        }
+    }
+    render() {
+        return keyed(this.configurer.currentSeriesIndex, html `
+        <div id="series-properties-container" fullwidth>
+          <div id="series-tab-header" @wheel=${this._onWheelScroll}>
+            <md-icon id="series-tab-nav-left-button" @click=${this._scrollLeft}>chevron_left</md-icon>
+            <div id="series-tabs" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>
+              ${this._renderTabs()}
+            </div>
+            <md-icon id="series-tab-nav-right-button" @click=${this._scrollRight}>chevron_right</md-icon>
+          </div>
+          <div id="add-series-button-container">
+            <md-icon id="add-series-button" @click=${this._addSeries}>add</md-icon>
+          </div>
+          ${this._renderSeriesForm()}
+        </div>
+      `);
+    }
+    _renderTabs() {
+        return this.configurer.datasets.map((dataset, index) => html `
+        <div
+          data-series=${index + 1}
+          data-tab-index=${index}
+          tab
+          ?selected=${index === this.configurer.currentSeriesIndex}
+          @click=${() => this._selectTab(index)}
+        >
+          ${index + 1}
+          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index
+            ? html `<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`
+            : html ``}
+        </div>
+      `);
+    }
+    _renderSeriesForm() {
+        const configurer = this.configurer;
+        const chartType = this.chartType;
+        return html `
+      <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 || ''} />
+
+        ${chartType === 'line' || 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="series-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
+              <label for="series-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
+            `
+            : html ``}
+        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'
+            ? 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 ``}
+
+        <label></label>
+        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
+      </div>
+    `;
+    }
+    _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;
+    }
+    _selectTab(index) {
+        this.configurer.setCurrentSeriesIndex(index);
+        this.requestUpdate();
+    }
+    _removeSeries(index) {
+        this.configurer.removeSeries(index);
+        this.requestUpdate();
+    }
+    _addSeries() {
+        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
+        });
+        this.configurer.addSeries(seriesModel);
+        this.requestUpdate();
+    }
+    _onWheelScroll(event) {
+        const tabContainer = this.seriesTabs;
+        if (tabContainer) {
+            event.preventDefault();
+            tabContainer.scrollLeft += event.deltaY;
+            this._onTabScroll();
+        }
+    }
+    _scrollLeft() {
+        this._scrollTabContainer(-1);
+    }
+    _scrollRight() {
+        this._scrollTabContainer(1);
+    }
+    _scrollTabContainer(direction) {
+        const tabContainer = this.renderRoot.querySelector('#series-tabs');
+        if (tabContainer) {
+            tabContainer.style.scrollBehavior = 'smooth';
+            tabContainer.scrollLeft += direction * tabContainer.clientWidth;
+        }
+        setTimeout(() => {
+            tabContainer.style.scrollBehavior = 'auto';
+            this._onTabScroll();
+        }, 300);
+    }
+    _onTabScroll() {
+        let tabContainer;
+        let tabNavLeftButton;
+        let tabNavRightButton;
+        tabContainer = this.seriesTabs;
+        tabNavLeftButton = this.seriesTabNavLeftButton;
+        tabNavRightButton = this.seriesTabNavRightButton;
+        if (!tabContainer) {
+            return;
+        }
+        if (tabContainer.clientWidth == tabContainer.scrollWidth) {
+            tabNavLeftButton.setAttribute('disabled', '');
+            tabNavRightButton.setAttribute('disabled', '');
+        }
+        else if (tabContainer.scrollLeft <= 0) {
+            tabNavLeftButton.setAttribute('disabled', '');
+            tabNavRightButton.removeAttribute('disabled');
+        }
+        else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
+            tabNavLeftButton.removeAttribute('disabled');
+            tabNavRightButton.setAttribute('disabled', '');
+        }
+        else {
+            tabNavLeftButton.removeAttribute('disabled');
+            tabNavRightButton.removeAttribute('disabled');
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], MultipleSeriesTemplate.prototype, "configurer", void 0);
+__decorate([
+    property({ type: String })
+], MultipleSeriesTemplate.prototype, "chartType", void 0);
+__decorate([
+    query('#series-tabs')
+], MultipleSeriesTemplate.prototype, "seriesTabs", void 0);
+__decorate([
+    query('#series-tab-nav-left-button')
+], MultipleSeriesTemplate.prototype, "seriesTabNavLeftButton", void 0);
+__decorate([
+    query('#series-tab-nav-right-button')
+], MultipleSeriesTemplate.prototype, "seriesTabNavRightButton", void 0);
+MultipleSeriesTemplate = __decorate([
+    customElement('ox-chart-series')
+], MultipleSeriesTemplate);
+export { MultipleSeriesTemplate };
+//# sourceMappingURL=series.js.map

package/dist/src/editors/templates/series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.js","sourceRoot":"","sources":["../../../../src/editors/templates/series.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { MdIcon } from '@material/web/icon/icon.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { Configurer } from '../configurer'\nimport './display-value'\n\n@customElement('ox-chart-series')\nexport class MultipleSeriesTemplate extends LitElement {\n  createRenderRoot() {\n    return this\n  }\n\n  @property({ type: Object }) configurer!: Configurer\n  @property({ type: String }) chartType?: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea'\n\n  @query('#series-tabs') seriesTabs!: HTMLElement\n  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon\n  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return keyed(\n      this.configurer.currentSeriesIndex,\n      html`\n        <div id=\"series-properties-container\" fullwidth>\n          <div id=\"series-tab-header\" @wheel=${this._onWheelScroll}>\n            <md-icon id=\"series-tab-nav-left-button\" @click=${this._scrollLeft}>chevron_left</md-icon>\n            <div id=\"series-tabs\" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>\n              ${this._renderTabs()}\n            </div>\n            <md-icon id=\"series-tab-nav-right-button\" @click=${this._scrollRight}>chevron_right</md-icon>\n          </div>\n          <div id=\"add-series-button-container\">\n            <md-icon id=\"add-series-button\" @click=${this._addSeries}>add</md-icon>\n          </div>\n          ${this._renderSeriesForm()}\n        </div>\n      `\n    )\n  }\n\n  private _renderTabs() {\n    return this.configurer.datasets.map(\n      (dataset: OperatoChart.Dataset, index: number) => html`\n        <div\n          data-series=${index + 1}\n          data-tab-index=${index}\n          tab\n          ?selected=${index === this.configurer.currentSeriesIndex}\n          @click=${() => this._selectTab(index)}\n        >\n          ${index + 1}\n          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index\n            ? html`<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`\n            : html``}\n        </div>\n      `\n    )\n  }\n\n  private _renderSeriesForm() {\n    const configurer = this.configurer\n    const chartType = this.chartType\n\n    return html`\n      <div class=\"tab-content\">\n        <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n        <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n        ${chartType === 'line' || chartType === 'bar'\n          ? html`\n              <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">Type</ox-i18n> </label>\n              <select\n                id=\"series-type\"\n                class=\"select-content\"\n                value-key=\"series.type\"\n                .value=${configurer.series.type || ''}\n              >\n                <option value=\"bar\" selected>Bar</option>\n                <option value=\"line\">Line</option>\n              </select>\n            `\n          : html``}\n\n        <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n        <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">Line Tension</ox-i18n> </label>\n              <select\n                id=\"series-line-tension\"\n                class=\"select-content\"\n                value-key=\"series.lineTension\"\n                .value=${String(configurer.series.lineTension || 0)}\n              >\n                <option value=\"0.4\">Smooth</option>\n                <option value=\"0\">Angled</option>\n              </select>\n            `\n          : html``}\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">Border Width</ox-i18n> </label>\n              <input\n                id=\"series-border-width\"\n                type=\"number\"\n                value-key=\"series.borderWidth\"\n                .value=${String(configurer.series.borderWidth || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n        <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">Point Shape</ox-i18n> </label>\n              <select\n                id=\"series-point-style\"\n                class=\"select-content\"\n                value-key=\"series.pointStyle\"\n                .value=${configurer.series.pointStyle || ''}\n              >\n                <option value=\"\">&nbsp;</option>\n                <option value=\"circle\">⚬</option>\n                <option value=\"triangle\">▵</option>\n                <option value=\"rect\">□</option>\n                <option value=\"rectRot\">◇</option>\n                <option value=\"cross\">+</option>\n                <option value=\"crossRot\">⨉</option>\n                <option value=\"star\">✱</option>\n                <option value=\"line\">―</option>\n                <option value=\"dash\">┄</option>\n              </select>\n\n              <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">Point Size</ox-i18n> </label>\n              <input\n                id=\"series-point-radius\"\n                type=\"number\"\n                value-key=\"series.pointRadius\"\n                .value=${String(configurer.series.pointRadius || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n        <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <input id=\"series-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n              <label for=\"series-fill\"> <ox-i18n msgid=\"label.fill\">Fill</ox-i18n> </label>\n            `\n          : html``}\n        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'\n          ? html`\n              <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">Target Axis</ox-i18n> </label>\n              <select\n                id=\"series-y-axis-id\"\n                class=\"select-content\"\n                value-key=\"series.yAxisID\"\n                .value=${configurer.series.yAxisID || ''}\n              >\n                <option value=\"left\">Left</option>\n                <option value=\"right\">Right</option>\n              </select>\n            `\n          : html``}\n\n        <label></label>\n        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>\n      </div>\n    `\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  private _selectTab(index: number) {\n    this.configurer.setCurrentSeriesIndex(index)\n    this.requestUpdate()\n  }\n\n  private _removeSeries(index: number) {\n    this.configurer.removeSeries(index)\n    this.requestUpdate()\n  }\n\n  private _addSeries() {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) {\n      return\n    }\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    this.configurer.addSeries(seriesModel)\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.seriesTabs\n    if (tabContainer) {\n      event.preventDefault()\n\n      tabContainer.scrollLeft += event.deltaY\n\n      this._onTabScroll()\n    }\n  }\n\n  private _scrollLeft() {\n    this._scrollTabContainer(-1)\n  }\n\n  private _scrollRight() {\n    this._scrollTabContainer(1)\n  }\n\n  private _scrollTabContainer(direction: number) {\n    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#series-tabs')\n    if (tabContainer) {\n      tabContainer.style.scrollBehavior = 'smooth'\n      tabContainer.scrollLeft += direction * tabContainer.clientWidth\n    }\n\n    setTimeout(() => {\n      tabContainer!.style.scrollBehavior = 'auto'\n      this._onTabScroll()\n    }, 300)\n  }\n\n  private _onTabScroll() {\n    let tabContainer: HTMLElement | null | undefined\n    let tabNavLeftButton: MdIcon\n    let tabNavRightButton: MdIcon\n\n    tabContainer = this.seriesTabs\n    tabNavLeftButton = this.seriesTabNavLeftButton\n    tabNavRightButton = this.seriesTabNavRightButton\n\n    if (!tabContainer) {\n      return\n    }\n\n    if (tabContainer.clientWidth == tabContainer.scrollWidth) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else if (tabContainer.scrollLeft <= 0) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.removeAttribute('disabled')\n    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n}\n"]}