@operato/chart 7.0.11 → 7.0.13

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

@@ -1,419 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import '@operato/i18n/ox-i18n.js';
-import { html } from 'lit';
-import { query } from 'lit/decorators.js';
-import { InputChartAbstract } from './input-chart-abstract';
-export class InputChartMultiSeriesAbstract extends InputChartAbstract {
-    static { this.styles = [...InputChartAbstract.styles]; }
-    get tabContainer() {
-        return this.tabs;
-    }
-    firstUpdated() {
-        this.tabContainer?.addEventListener('scroll', e => {
-            this._onTabScroll(e);
-        });
-    }
-    subTemplate() {
-        const configurer = this.configurer;
-        return html `
-      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
-      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
-
-      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-
-      ${this.multiSeriesTabTemplate()}
-
-      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
-
-      <label for="label-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input id="label-data-key" type="text" value-key="labelDataKey" .value=${configurer.labelDataKey || ''} />
-
-      <label for="axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input id="axis-title" type="text" value-key="xAxes0.axisTitle" .value=${configurer.xAxes0.axisTitle || ''} />
-
-      <label for="x-axes0-thickness"> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
-      <input
-        id="x-axes0-thickness"
-        type="number"
-        value-key="xAxes0.barPercentage"
-        .value=${String(configurer.xAxes0.barPercentage || 0)}
-      />
-
-      <input
-        for="grid-line"
-        type="checkbox"
-        value-key="value.options.xGridLine"
-        ?checked=${configurer.config.options?.xGridLine}
-      />
-      <label id="grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input
-        for="x-axes0-ticks-display"
-        type="checkbox"
-        value-key="xAxes0.ticks.display"
-        ?checked=${configurer.xAxes0.ticks?.display}
-      />
-      <label id="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
-
-      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input
-        id="y-axes0-axis-title"
-        type="text"
-        value-key="yAxes0.axisTitle"
-        .value=${configurer.yAxes0.axisTitle || ''}
-      />
-
-      <input
-        id="y-axes0-ticks-automin"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMin"
-        ?checked=${configurer.yAxes0.ticks?.autoMin}
-      />
-      <label for="y-axes0-ticks-automin"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-      <input
-        id="y-axes0-ticks-automax"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMax"
-        ?checked=${configurer.yAxes0.ticks?.autoMax}
-      />
-      <label for="y-axes0-ticks-automax"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-      ${!configurer.yAxes0.ticks?.autoMin
-            ? html `
-            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-            <input
-              id="y-axes0-ticks-min"
-              type="number"
-              value-key="yAxes0.ticks.min"
-              .value=${String(configurer.yAxes0.ticks?.min)}
-            />
-          `
-            : html ``}
-      ${!configurer.yAxes0.ticks?.autoMax
-            ? html `
-            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-            <input
-              id="y-axes0-ticks-max"
-              type="number"
-              value-key="yAxes0.ticks.max"
-              .value=${String(configurer.yAxes0.ticks?.max)}
-            />
-          `
-            : html ``}
-
-      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
-      <input
-        id="y-axes0-ticks-step-size"
-        type="number"
-        value-key="yAxes0.ticks.stepSize"
-        .value=${String(configurer.yAxes0.ticks?.stepSize)}
-      />
-
-      <input
-        id="y-grid-line"
-        type="checkbox"
-        value-key="value.options.yGridLine"
-        ?checked=${configurer.config.options?.yGridLine}
-      />
-      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input
-        id="y-axes0-ticks-display"
-        type="checkbox"
-        value-key="yAxes0.ticks.display"
-        ?checked=${configurer.yAxes0.ticks?.display}
-      />
-      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      ${configurer.config.options?.multiAxis
-            ? html `
-            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
-
-            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-            <input
-              id="y-axes1.axis-title"
-              type="text"
-              value-key="yAxes1.axisTitle"
-              .value=${configurer.yAxes1.axisTitle || ''}
-            />
-
-            <input
-              id="axis-min-auto"
-              type="checkbox"
-              value-key="yAxes1.ticks.autoMin"
-              ?checked=${configurer.yAxes1.ticks?.autoMin}
-            />
-            <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-            <input
-              id="axis-max-auto"
-              type="checkbox"
-              value-key="yAxes1.ticks.autoMax"
-              ?checked=${configurer.yAxes1.ticks?.autoMax}
-            />
-            <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-            ${!configurer.yAxes1.ticks?.autoMin
-                ? html `
-                  <label for="y-axes1.ticks.min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-                  <input
-                    id="y-axes1.ticks.min"
-                    type="number"
-                    value-key="yAxes1.ticks.min"
-                    .value=${String(configurer.yAxes1.ticks?.min)}
-                  />
-                `
-                : html ``}
-            ${!configurer.yAxes1.ticks?.autoMax
-                ? html `
-                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-                  <input
-                    id="y-axes1-ticks-max"
-                    type="number"
-                    value-key="yAxes1.ticks.max"
-                    .value=${String(configurer.yAxes1.ticks?.max)}
-                  />
-                `
-                : html ``}
-
-            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
-            <input
-              id="y-axes1-ticks-step-size"
-              type="number"
-              value-key="yAxes1.ticks.stepSize"
-              .value=${String(configurer.yAxes1.ticks?.stepSize)}
-            />
-
-            <input
-              id="y2nd-grid-line"
-              type="checkbox"
-              value-key="value.options.y2ndGridLine"
-              ?checked=${configurer.config.options.y2ndGridLine}
-            />
-            <label for="y2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-            <input
-              id="y-axes1.ticks.display"
-              type="checkbox"
-              value-key="yAxes1.ticks.display"
-              ?checked=${configurer.yAxes1.ticks?.display}
-            />
-            <label for="y-axes1.ticks.display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-          `
-            : html ``}
-    `;
-    }
-    multiSeriesTabTemplate() {
-        const configurer = this.configurer;
-        return html `
-      <div id="series-properties-container" fullwidth>
-        <div id="tab-header">
-          <md-icon
-            id="tab-nav-left-button"
-            @tap=${(e) => {
-            this._onTabScrollNavLeft(e);
-        }}
-            disabled
-            >chevron_left</md-icon
-          >
-          <div
-            id="tabs"
-            @change=${(e) => {
-            configurer.currentSeriesIndex = 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.onTapRemoveCurrentTab(index)}> close </md-icon> `
-            : html ``}
-                </div>
-              `)}
-          </div>
-          <md-icon
-            id="tab-nav-right-button"
-            @click=${(e) => {
-            this._onTabScrollNavRight(e);
-        }}
-            disabled
-            >chevron_right</md-icon
-          >
-        </div>
-        <div id="add-series-button-container">
-          <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(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) {
-        if (!this.tabContainer) {
-            return;
-        }
-        if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
-            this.tabNavLeftButton.setAttribute('disabled', '');
-            this.tabNavRightButton.setAttribute('disabled', '');
-        }
-        // left-end
-        else if (this.tabContainer.scrollLeft == 0) {
-            this.tabNavLeftButton.setAttribute('disabled', '');
-            this.tabNavRightButton.removeAttribute('disabled');
-        }
-        // right-end
-        else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
-            this.tabNavLeftButton.removeAttribute('disabled');
-            this.tabNavRightButton.setAttribute('disabled', '');
-        }
-        else {
-            this.tabNavLeftButton.removeAttribute('disabled');
-            this.tabNavRightButton.removeAttribute('disabled');
-        }
-    }
-    _onTabScrollNavLeft(e) {
-        if (!this.tabContainer) {
-            return;
-        }
-        this.tabContainer.style.scrollBehavior = 'smooth';
-        this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
-        this.tabContainer.style.scrollBehavior = 'auto';
-    }
-    _onTabScrollNavRight(e) {
-        if (!this.tabContainer) {
-            return;
-        }
-        this.tabContainer.style.scrollBehavior = 'smooth';
-        this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
-        this.tabContainer.style.scrollBehavior = 'auto';
-    }
-}
-__decorate([
-    query('#tabs')
-], InputChartMultiSeriesAbstract.prototype, "tabs", void 0);
-__decorate([
-    query('#tab-nav-left-button')
-], InputChartMultiSeriesAbstract.prototype, "tabNavLeftButton", void 0);
-__decorate([
-    query('#tab-nav-right-button')
-], InputChartMultiSeriesAbstract.prototype, "tabNavRightButton", void 0);
-//# sourceMappingURL=input-chart-multi-series-abstract.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${String(configurer.xAxes0.barPercentage || 0)}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${String(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${String(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${String(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${String(configurer.yAxes1.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${String(configurer.yAxes1.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${String(configurer.yAxes1.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\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          ${this.chartType == 'line' || this.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``} <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          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\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          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}