@operato/scene-chartjs 0.0.5

package/dist/editors/property-editor-chartjs-mixed.js

@@ -0,0 +1,193 @@
+import { __decorate } from "tslib";
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-pages/iron-pages';
+import '@polymer/paper-button/paper-button';
+import '@polymer/paper-icon-button/paper-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
+let PropertyEditorChartJSMixed = class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
+    constructor() {
+        super();
+        this.value = {
+            options: {
+                legend: {},
+                scales: {
+                    xAxes: [
+                        {
+                            ticks: {}
+                        }
+                    ],
+                    yAxes: [
+                        {
+                            ticks: {}
+                        }
+                    ]
+                }
+            },
+            data: {
+                datasets: []
+            }
+        };
+    }
+    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.value.options.multiAxis;
+    }
+    set multiAxis(multiAxis) {
+        this.value.options.multiAxis = multiAxis;
+    }
+    editorTemplate(props) {
+        return html `
+      <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
+      <label> <i18n-msg msgid="label.multi-axis">Multi Axis</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
+
+      ${this._hasBarSeries(this.value)
+            ? html `
+            <label><i18n-msg msgid="label.bar-spacing">Bar Spacing</i18n-msg></label>
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.barSpacing"
+              .value=${this.xAxes0.barSpacing || NaN}
+            />
+            <label><i18n-msg msgid="label.tick-spacing">Tick Spacing</i18n-msg></label>
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.categorySpacing"
+              .value=${this.xAxes0.categorySpacing || NaN}
+            />
+          `
+            : html ``}
+
+      <input type="checkbox" value-key="value.options.xGridLine" .checked=${props.value.options.xGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
+      <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
+      <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+      ${!this.yAxes0.ticks.autoMin
+            ? html `
+            <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
+          `
+            : html ``}
+      ${!this.yAxes0.ticks.autoMax
+            ? html `
+            <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
+          `
+            : html ``}
+
+      <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
+
+      <input type="checkbox" value-key="value.options.yGridLine" .checked=${props.value.options.yGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      ${props.value.options.multiAxis
+            ? html `
+            <legend><i18n-msg msgid="label.y-2nd-axes">Y 2nd Axes</i18n-msg></legend>
+
+            <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+            <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
+            <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
+            <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+            ${!this.yAxes1.ticks.autoMin
+                ? html `
+                  <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
+                `
+                : html ``}
+            ${!this.yAxes1.ticks.autoMax
+                ? html `
+                  <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
+                `
+                : html ``}
+
+            <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+            <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
+
+            <input
+              type="checkbox"
+              value-key="value.options.y2ndGridLine"
+              .checked=${props.value.options.y2ndGridLine}
+            />
+            <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
+            <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+          `
+            : html ``}
+    `;
+    }
+    _hasBarSeries(chart) {
+        var hasBarSeries = false;
+        hasBarSeries = chart.data.datasets.some((s) => s.type == 'bar');
+        return hasBarSeries;
+    }
+};
+PropertyEditorChartJSMixed.styles = PropertyEditorChartJSMultiSeriesAbstract.styles;
+PropertyEditorChartJSMixed = __decorate([
+    customElement('property-editor-chartjs-mixed')
+], PropertyEditorChartJSMixed);
+export default PropertyEditorChartJSMixed;
+//# sourceMappingURL=property-editor-chartjs-mixed.js.map

package/dist/editors/property-editor-chartjs-mixed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-mixed.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-mixed.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@polymer/iron-icon/iron-icon'\nimport '@polymer/iron-pages/iron-pages'\nimport '@polymer/paper-button/paper-button'\nimport '@polymer/paper-icon-button/paper-icon-button'\nimport '@polymer/paper-tabs/paper-tabs'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'\n\n@customElement('property-editor-chartjs-mixed')\nexport default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {\n  static styles = PropertyEditorChartJSMultiSeriesAbstract.styles\n\n  constructor() {\n    super()\n\n    this.value = {\n      options: {\n        legend: {},\n        scales: {\n          xAxes: [\n            {\n              ticks: {}\n            }\n          ],\n          yAxes: [\n            {\n              ticks: {}\n            }\n          ]\n        }\n      },\n      data: {\n        datasets: []\n      }\n    }\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.value.options.multiAxis\n  }\n\n  set multiAxis(multiAxis) {\n    this.value.options.multiAxis = multiAxis\n  }\n\n  editorTemplate(props: any) {\n    return html`\n      <input type=\"checkbox\" value-key=\"multiAxis\" .checked=${this.multiAxis} />\n      <label> <i18n-msg msgid=\"label.multi-axis\">Multi Axis</i18n-msg> </label>\n\n      <legend><i18n-msg msgid=\"label.series\">Series</i18n-msg></legend>\n\n      <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n      <legend><i18n-msg msgid=\"label.x-axes\">X Axes</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.data-key\">Data Key</i18n-msg> </label>\n      <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n\n      <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n      <input type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${this.xAxes0.axisTitle || ''} />\n\n      ${this._hasBarSeries(this.value)\n        ? html`\n            <label><i18n-msg msgid=\"label.bar-spacing\">Bar Spacing</i18n-msg></label>\n            <input\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.barSpacing\"\n              .value=${this.xAxes0.barSpacing || NaN}\n            />\n            <label><i18n-msg msgid=\"label.tick-spacing\">Tick Spacing</i18n-msg></label>\n            <input\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.categorySpacing\"\n              .value=${this.xAxes0.categorySpacing || NaN}\n            />\n          `\n        : html``}\n\n      <input type=\"checkbox\" value-key=\"value.options.xGridLine\" .checked=${props.value.options.xGridLine} />\n      <label> <i18n-msg msgid=\"label.grid-line\">Grid Line</i18n-msg> </label>\n\n      <input type=\"checkbox\" value-key=\"xAxes0.ticks.display\" .checked=${this.xAxes0.ticks.display} />\n      <label> <i18n-msg msgid=\"label.display-tick\">Display Tick</i18n-msg> </label>\n\n      <legend><i18n-msg msgid=\"label.y-axes\">Y Axes</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n      <input type=\"text\" value-key=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMin\" .checked=${this.yAxes0.ticks.autoMin} />\n      <label> <i18n-msg msgid=\"label.axis-min-auto\">Min Auto</i18n-msg> </label>\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMax\" .checked=${this.yAxes0.ticks.autoMax} />\n      <label> <i18n-msg msgid=\"label.axis-max-auto\">Max Auto</i18n-msg> </label>\n\n      ${!this.yAxes0.ticks.autoMin\n        ? html`\n            <label> <i18n-msg msgid=\"label.axis-min\">Min</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes0.ticks.min\" .value=${this.yAxes0.ticks.min} />\n          `\n        : html``}\n      ${!this.yAxes0.ticks.autoMax\n        ? html`\n            <label> <i18n-msg msgid=\"label.axis-max\">Max</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes0.ticks.max\" .value=${this.yAxes0.ticks.max} />\n          `\n        : html``}\n\n      <label> <i18n-msg msgid=\"label.axis-step-size\">StepSize</i18n-msg> </label>\n      <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n      <input type=\"checkbox\" value-key=\"value.options.yGridLine\" .checked=${props.value.options.yGridLine} />\n      <label> <i18n-msg msgid=\"label.grid-line\">Grid Line</i18n-msg> </label>\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.display\" .checked=${this.yAxes0.ticks.display} />\n      <label> <i18n-msg msgid=\"label.display-tick\">Display Tick</i18n-msg> </label>\n\n      ${props.value.options.multiAxis\n        ? html`\n            <legend><i18n-msg msgid=\"label.y-2nd-axes\">Y 2nd Axes</i18n-msg></legend>\n\n            <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n            <input type=\"text\" value-key=\"yAxes1.axisTitle\" .value=${this.yAxes1.axisTitle || ''} />\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMin\" .checked=${this.yAxes1.ticks.autoMin} />\n            <label> <i18n-msg msgid=\"label.axis-min-auto\">Min Auto</i18n-msg> </label>\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMax\" .checked=${this.yAxes1.ticks.autoMax} />\n            <label> <i18n-msg msgid=\"label.axis-max-auto\">Max Auto</i18n-msg> </label>\n\n            ${!this.yAxes1.ticks.autoMin\n              ? html`\n                  <label> <i18n-msg msgid=\"label.axis-min\">Min</i18n-msg> </label>\n                  <input type=\"number\" value-key=\"yAxes1.ticks.min\" .value=${this.yAxes1.ticks.min} />\n                `\n              : html``}\n            ${!this.yAxes1.ticks.autoMax\n              ? html`\n                  <label> <i18n-msg msgid=\"label.axis-max\">Max</i18n-msg> </label>\n                  <input type=\"number\" value-key=\"yAxes1.ticks.max\" .value=${this.yAxes1.ticks.max} />\n                `\n              : html``}\n\n            <label> <i18n-msg msgid=\"label.axis-step-size\">StepSize</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes1.ticks.stepSize\" .value=${this.yAxes1.ticks.stepSize} />\n\n            <input\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              .checked=${props.value.options.y2ndGridLine}\n            />\n            <label> <i18n-msg msgid=\"label.grid-line\">Grid Line</i18n-msg> </label>\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.display\" .checked=${this.yAxes1.ticks.display} />\n            <label> <i18n-msg msgid=\"label.display-tick\">Display Tick</i18n-msg> </label>\n          `\n        : html``}\n    `\n  }\n\n  _hasBarSeries(chart: any) {\n    var hasBarSeries = false\n    hasBarSeries = chart.data.datasets.some((s: any) => s.type == 'bar')\n\n    return hasBarSeries\n  }\n}\n"]}

package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts

@@ -0,0 +1,31 @@
+import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-pages/iron-pages';
+import '@polymer/paper-button/paper-button';
+import '@polymer/paper-icon-button/paper-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import { PaperIconButtonElement } from '@polymer/paper-icon-button/paper-icon-button';
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
+export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    tabs: HTMLElement;
+    tabNavLeftButton: PaperIconButtonElement;
+    tabNavRightButton: PaperIconButtonElement;
+    get color(): any;
+    set color(color: any);
+    get xAxes0(): any;
+    set xAxes0(xAxes0: any);
+    get yAxes0(): any;
+    set yAxes0(yAxes0: any);
+    get yAxes1(): any;
+    set yAxes1(yAxes1: any);
+    get multiAxis(): any;
+    set multiAxis(multiAxis: any);
+    get tabContainer(): HTMLElement | null | undefined;
+    firstUpdated(): void;
+    editorTemplate(props: any): import("lit-html").TemplateResult<1>;
+    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
+    _onTabScroll(e: Event): void;
+    _onTabScrollNavLeft(e: Event): void;
+    _onTabScrollNavRight(e: Event): void;
+}

package/dist/editors/property-editor-chartjs-multi-series-abstract.js

@@ -0,0 +1,373 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-pages/iron-pages';
+import '@polymer/paper-button/paper-button';
+import '@polymer/paper-icon-button/paper-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import { css, html } from 'lit';
+import { query } from 'lit/decorators.js';
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
+export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
+    constructor() {
+        super();
+        this.value = {
+            options: {
+                legend: {},
+                scales: {
+                    xAxes: [
+                        {
+                            ticks: {}
+                        }
+                    ],
+                    yAxes: [
+                        {
+                            ticks: {}
+                        }
+                    ]
+                }
+            },
+            data: {
+                datasets: []
+            }
+        };
+    }
+    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;
+        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.value.options.multiAxis;
+    }
+    set multiAxis(multiAxis) {
+        this.value.options.multiAxis = multiAxis;
+    }
+    get tabContainer() {
+        var _a;
+        return (_a = this.tabs.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#tabsContainer');
+    }
+    firstUpdated() {
+        var _a;
+        (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', e => {
+            this._onTabScroll(e);
+        });
+    }
+    editorTemplate(props) {
+        return html `
+      <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
+      <label> <i18n-msg msgid="label.multi-axis">Multi Axis</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
+
+      <label> <i18n-msg msgid="label.thickness">Thickness</i18n-msg> </label>
+      <input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
+
+      <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
+      <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
+      <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+      ${!this.yAxes0.ticks.autoMin
+            ? html `
+            <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
+          `
+            : html ``}
+      ${!this.yAxes0.ticks.autoMax
+            ? html `
+            <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
+          `
+            : html ``}
+
+      <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
+
+      <input type="checkbox" value-key="value.options.yGridLine" .checked=${this.value.options.yGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      ${this.value.options.multiAxis
+            ? html `
+            <legend><i18n-msg msgid="label.y-2nd-axes">Y 2nd Axes</i18n-msg></legend>
+
+            <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+            <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
+            <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
+            <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+            ${!this.yAxes1.ticks.autoMin
+                ? html `
+                  <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
+                `
+                : html ``}
+            ${!this.yAxes1.ticks.autoMax
+                ? html `
+                  <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
+                `
+                : html ``}
+
+            <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+            <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
+
+            <input type="checkbox" value-key="value.options.y2ndGridLine" .checked=${this.value.options.y2ndGridLine} />
+            <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
+            <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+          `
+            : html ``}
+    `;
+    }
+    multiSeriesTabTemplate() {
+        return html `
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <paper-icon-button
+            id="tab-nav-left-button"
+            icon="chevron-left"
+            @click=${(e) => {
+            this._onTabScrollNavLeft(e);
+        }}
+            disabled
+          ></paper-icon-button>
+          <paper-tabs
+            id="tabs"
+            @iron-select=${(e) => (this.currentSeriesIndex = e.target.selected)}
+            .selected=${this.currentSeriesIndex}
+            no-bar
+            noink
+            scrollable
+            hide-scroll-buttons
+            fit-container
+          >
+            ${this.datasets.map((dataset, index) => html `
+                <paper-tab data-series="${index + 1}" noink
+                  >${index + 1}
+                  ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
+            ? html `
+                        <paper-icon-button icon="close" @tap=${(e) => this.onTapRemoveCurrentTab(e)}>
+                        </paper-icon-button>
+                      `
+            : html ``}
+                </paper-tab>
+              `)}
+          </paper-tabs>
+          <paper-icon-button
+            id="tab-nav-right-button"
+            icon="chevron-right"
+            @click=${(e) => {
+            this._onTabScrollNavRight(e);
+        }}
+            disabled
+          ></paper-icon-button>
+        </div>
+        <div id="add-series-button-container">
+          <paper-icon-button
+            id="add-series-button"
+            icon="add"
+            @tap=${(e) => this.onTapAddTab(e)}
+          ></paper-icon-button>
+        </div>
+
+        <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected="series-index">
+          ${this.datasets.map((dataset, index) => html `
+              <div class="tab-content" series-index="${index}">
+                <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+                <input type="text" value-key="dataKey" .value=${this.dataKey} />
+
+                ${this.value.type == 'bar'
+            ? html `
+                      <label> <i18n-msg msgid="label.type">type</i18n-msg> </label>
+                      <select class="select-content" value-key="series.type" .value=${this.series.type}>
+                        <option value="bar" selected>bar</option>
+                        <option value="line">line</option>
+                      </select>
+                    `
+            : html ``}
+
+                <label> <i18n-msg msgid="label.label">label</i18n-msg> </label>
+                <input type="text" value-key="series.label" .value=${this.series.label} />
+
+                ${this.series.type == 'line'
+            ? html `
+                      <label> <i18n-msg msgid="label.line-tension">line tension</i18n-msg> </label>
+                      <select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
+                        <option value="0.4">smooth</option>
+                        <option value="0">angled</option>
+                      </select>
+                    `
+            : html ``}
+                ${this.series.type == 'line'
+            ? html `
+                      <label> <i18n-msg msgid="label.border-width">border width</i18n-msg> </label>
+                      <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
+                    `
+            : html ``}
+
+                <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
+                <things-editor-color value-key="color" .value=${this.color}></things-editor-color>
+
+                ${this.series.type == 'line'
+            ? html `
+                      <label> <i18n-msg msgid="label.point-shape">point shape</i18n-msg> </label>
+                      <select class="select-content" value-key="series.pointStyle" .value=${this.series.pointStyle}>
+                        <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> <i18n-msg msgid="label.point-size">point size</i18n-msg> </label>
+                      <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
+                    `
+            : html ``} <label> <i18n-msg msgid="label.stack-group">Stack group</i18n-msg> </label>
+                <input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type ==
+            'line'
+            ? html `
+                      <input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
+                      <label> <i18n-msg msgid="label.fill">fill</i18n-msg> </label>
+                    `
+            : html ``}
+                ${this.multiAxis
+            ? html `
+                      <label> <i18n-msg msgid="label.target-axis">target axis</i18n-msg> </label>
+                      <select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
+                        <option value="left">left</option>
+                        <option value="right">right</option>
+                      </select>
+                    `
+            : html ``}
+                ${this.displayValueTemplate()}
+              </div>
+            `)}
+        </iron-pages>
+      </div>
+    `;
+    }
+    _onTabScroll(e) {
+        if (!this.tabContainer) {
+            return;
+        }
+        if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.disabled = true;
+            this.tabNavRightButton.disabled = true;
+        }
+        // left-end
+        else if (this.tabContainer.scrollLeft == 0) {
+            this.tabNavLeftButton.disabled = true;
+            this.tabNavRightButton.disabled = false;
+        }
+        // right-end
+        else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.disabled = false;
+            this.tabNavRightButton.disabled = true;
+        }
+        else {
+            this.tabNavLeftButton.disabled = false;
+            this.tabNavRightButton.disabled = false;
+        }
+    }
+    _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';
+    }
+}
+PropertyEditorChartJSMultiSeriesAbstract.styles = [
+    ...PropertyEditorChartJSAbstract.styles,
+    css `
+      paper-tabs {
+        background-color: rgb(204, 204, 204);
+      }
+      input[type='text'],
+      input[type='number'] {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    `
+];
+__decorate([
+    query('#tabs')
+], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabs", void 0);
+__decorate([
+    query('#tab-nav-left-button')
+], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavLeftButton", void 0);
+__decorate([
+    query('#tab-nav-right-button')
+], PropertyEditorChartJSMultiSeriesAbstract.prototype, "tabNavRightButton", void 0);
+//# sourceMappingURL=property-editor-chartjs-multi-series-abstract.js.map