@operato/scene-chartjs 8.0.0-alpha.1 → 8.0.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.4](https://github.com/things-scene/operato-scene/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-19)
+
+
+### :bug: Bug Fix
+
+* chart error on player ([b1e912e](https://github.com/things-scene/operato-scene/commit/b1e912ea6456cdc54a3e813f0206a2031c4a5152))
+
+
+
+## [8.0.0-alpha.2](https://github.com/things-scene/operato-scene/compare/v8.0.0-alpha.1...v8.0.0-alpha.2) (2024-09-11)
+
+
+### :bug: Bug Fix
+
+* chartjs resource leak ([82c0858](https://github.com/things-scene/operato-scene/commit/82c085896eada0505f86243ebe89bb2c2d3b4c17))
+
+
+
 ## [8.0.0-alpha.1](https://github.com/things-scene/operato-scene/compare/v8.0.0-alpha.0...v8.0.0-alpha.1) (2024-09-09)
 
 

package/dist/chartjs.d.ts

@@ -7,6 +7,7 @@ export default class ChartJS extends HTMLOverlayElement {
     get nature(): ComponentNature;
     get hasTextProperty(): boolean;
     get tagName(): string;
+    dispose(): void;
     isShadowable(): boolean;
     createElement(): void;
     setElementProperties(element: OxChart): void;

package/dist/chartjs.js

@@ -30,6 +30,11 @@ export default class ChartJS extends HTMLOverlayElement {
     get tagName() {
         return 'ox-chart';
     }
+    dispose() {
+        var _a;
+        super.dispose();
+        (_a = this.element) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
     isShadowable() {
         return false;
     }

package/dist/chartjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-chart'\n\nimport cloneDeep from 'lodash/cloneDeep'\n\nimport { Component, ComponentNature, error, HTMLOverlayElement, Properties } from '@hatiolab/things-scene'\n\nimport { OxChart } from './ox-chart'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'chartjs',\n      label: '',\n      name: 'chart'\n    }\n  ],\n  'value-property': 'data',\n  help: 'scene/component/chartjs'\n}\n\nexport default class ChartJS extends HTMLOverlayElement {\n  private _isChartChanged = false\n  private _isDataChanged = false\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'ox-chart'\n  }\n\n  isShadowable() {\n    return false\n  }\n\n  createElement() {\n    super.createElement()\n\n    var { width, height } = this.bounds\n    var element = this.element as OxChart\n    var data = this.data\n\n    element.width = width\n    element.height = height\n\n    this._setChartConfig(element)\n    element.data = data\n  }\n\n  /* component.property => element.property */\n  setElementProperties(element: OxChart) {\n    this.setState('lineWidth', 0) // border 표현이 자연스럽게 바뀌면 지울것.\n\n    var { chart: chartConfig } = this.state\n    var { width, height } = this.bounds\n    var data = this.data\n\n    try {\n      element.width = width\n      element.height = height\n\n      if (chartConfig && this._isChartChanged) {\n        this._setChartConfig(element)\n        this._isChartChanged = false\n      }\n\n      if (this._isDataChanged) {\n        element.data = data\n        this._isDataChanged = false\n      }\n    } catch (e) {\n      error(e)\n    }\n  }\n\n  _setChartConfig(element: OxChart) {\n    var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state\n    var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {}\n\n    const fontOption = {\n      defaultFontSize: fontSize,\n      defaultFontFamily: fontFamily,\n      defaultFontColor: fontColor\n    }\n\n    const shadowOption = {\n      shadowOffsetX: left,\n      shadowOffsetY: top,\n      shadowBlur: blurSize,\n      shadowColor: color\n    }\n\n    var cloneChartConf = cloneDeep(chartConfig)\n\n    cloneChartConf.options = {\n      ...cloneChartConf.options,\n      ...fontOption,\n      tooltips: false\n    }\n\n    cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset: any) => {\n      return {\n        ...dataset,\n        ...shadowOption\n      }\n    })\n\n    element.options = cloneChartConf\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this._isChartChanged = false\n\n    if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)\n      this._isChartChanged = true\n\n    super.onchange(after, before)\n  }\n\n  onchangeData(data: any) {\n    this._isDataChanged = true\n  }\n}\n\nComponent.register('chartjs', ChartJS)\n"]}
+{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAEnB,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAExC,OAAO,EAAE,SAAS,EAAmB,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAA;AAI1G,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,OAAO;SACd;KACF;IACD,gBAAgB,EAAE,MAAM;IACxB,IAAI,EAAE,yBAAyB;CAChC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,kBAAkB;IAAvD;;QACU,oBAAe,GAAG,KAAK,CAAA;QACvB,mBAAc,GAAG,KAAK,CAAA;IA8GhC,CAAC;IA5GC,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO;QACT,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,OAAO;;QACL,KAAK,CAAC,OAAO,EAAE,CACd;QAAA,MAAC,IAAI,CAAC,OAAmB,0CAAE,OAAO,EAAE,CAAA;IACvC,CAAC;IAED,YAAY;QACV,OAAO,KAAK,CAAA;IACd,CAAC;IAED,aAAa;QACX,KAAK,CAAC,aAAa,EAAE,CAAA;QAErB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACnC,IAAI,OAAO,GAAG,IAAI,CAAC,OAAkB,CAAA;QACrC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QAEvB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;QAC7B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,4CAA4C;IAC5C,oBAAoB,CAAC,OAAgB;QACnC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAA,CAAC,4BAA4B;QAE1D,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACvC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACnC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEpB,IAAI,CAAC;YACH,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;YACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;YAEvB,IAAI,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;gBAC7B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;YAC9B,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;gBACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;YAC7B,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,CAAC,CAAC,CAAC,CAAA;QACV,CAAC;IACH,CAAC;IAED,eAAe,CAAC,OAAgB;QAC9B,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACrF,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;QAE7E,MAAM,UAAU,GAAG;YACjB,eAAe,EAAE,QAAQ;YACzB,iBAAiB,EAAE,UAAU;YAC7B,gBAAgB,EAAE,SAAS;SAC5B,CAAA;QAED,MAAM,YAAY,GAAG;YACnB,aAAa,EAAE,IAAI;YACnB,aAAa,EAAE,GAAG;YAClB,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,KAAK;SACnB,CAAA;QAED,IAAI,cAAc,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;QAE3C,cAAc,CAAC,OAAO,GAAG;YACvB,GAAG,cAAc,CAAC,OAAO;YACzB,GAAG,UAAU;YACb,QAAQ,EAAE,KAAK;SAChB,CAAA;QAED,cAAc,CAAC,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE;YAC/E,OAAO;gBACL,GAAG,OAAO;gBACV,GAAG,YAAY;aAChB,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,OAAO,GAAG,cAAc,CAAA;IAClC,CAAC;IAED,QAAQ,CAAC,KAAiB,EAAE,MAAkB;QAC5C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;QAE5B,IAAI,OAAO,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,YAAY,IAAI,KAAK,IAAI,WAAW,IAAI,KAAK,IAAI,QAAQ,IAAI,KAAK;YAC/G,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;QAE7B,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC/B,CAAC;IAED,YAAY,CAAC,IAAS;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;IAC5B,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA","sourcesContent":["import './ox-chart'\n\nimport cloneDeep from 'lodash/cloneDeep'\n\nimport { Component, ComponentNature, error, HTMLOverlayElement, Properties } from '@hatiolab/things-scene'\n\nimport { OxChart } from './ox-chart'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'chartjs',\n      label: '',\n      name: 'chart'\n    }\n  ],\n  'value-property': 'data',\n  help: 'scene/component/chartjs'\n}\n\nexport default class ChartJS extends HTMLOverlayElement {\n  private _isChartChanged = false\n  private _isDataChanged = false\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'ox-chart'\n  }\n\n  dispose(): void {\n    super.dispose()\n    ;(this.element as OxChart)?.dispose()\n  }\n\n  isShadowable() {\n    return false\n  }\n\n  createElement() {\n    super.createElement()\n\n    var { width, height } = this.bounds\n    var element = this.element as OxChart\n    var data = this.data\n\n    element.width = width\n    element.height = height\n\n    this._setChartConfig(element)\n    element.data = data\n  }\n\n  /* component.property => element.property */\n  setElementProperties(element: OxChart) {\n    this.setState('lineWidth', 0) // border 표현이 자연스럽게 바뀌면 지울것.\n\n    var { chart: chartConfig } = this.state\n    var { width, height } = this.bounds\n    var data = this.data\n\n    try {\n      element.width = width\n      element.height = height\n\n      if (chartConfig && this._isChartChanged) {\n        this._setChartConfig(element)\n        this._isChartChanged = false\n      }\n\n      if (this._isDataChanged) {\n        element.data = data\n        this._isDataChanged = false\n      }\n    } catch (e) {\n      error(e)\n    }\n  }\n\n  _setChartConfig(element: OxChart) {\n    var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state\n    var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {}\n\n    const fontOption = {\n      defaultFontSize: fontSize,\n      defaultFontFamily: fontFamily,\n      defaultFontColor: fontColor\n    }\n\n    const shadowOption = {\n      shadowOffsetX: left,\n      shadowOffsetY: top,\n      shadowBlur: blurSize,\n      shadowColor: color\n    }\n\n    var cloneChartConf = cloneDeep(chartConfig)\n\n    cloneChartConf.options = {\n      ...cloneChartConf.options,\n      ...fontOption,\n      tooltips: false\n    }\n\n    cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset: any) => {\n      return {\n        ...dataset,\n        ...shadowOption\n      }\n    })\n\n    element.options = cloneChartConf\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this._isChartChanged = false\n\n    if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)\n      this._isChartChanged = true\n\n    super.onchange(after, before)\n  }\n\n  onchangeData(data: any) {\n    this._isDataChanged = true\n  }\n}\n\nComponent.register('chartjs', ChartJS)\n"]}

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

@@ -0,0 +1,50 @@
+import '@operato/i18n/ox-i18n.js';
+import { LitElement } from 'lit';
+import { TinyColor } from '@ctrl/tinycolor';
+import { Properties } from '@hatiolab/things-scene';
+export default class PropertyEditorChartJSAbstract extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    currentSeriesIndex: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    displayValueTemplate(): import("lit-html").TemplateResult<1>;
+    editorTemplate(props: Properties): import("lit-html").TemplateResult<1>;
+    get data(): any;
+    set data(data: any);
+    get datasets(): any;
+    set datasets(datasets: any);
+    get series(): any;
+    set series(series: any);
+    set dataKey(key: any);
+    get dataKey(): any;
+    get legend(): any;
+    set legend(legend: any);
+    get theme(): any;
+    set theme(theme: any);
+    get tooltip(): boolean;
+    set tooltip(tooltip: boolean);
+    get animation(): boolean;
+    set animation(animation: boolean);
+    get scales(): any;
+    set scales(scales: any);
+    get display(): any;
+    set display(display: any);
+    get position(): any;
+    set position(position: any);
+    get stacked(): any;
+    set stacked(stacked: any);
+    get labelDataKey(): any;
+    set labelDataKey(labelDataKey: any);
+    set options(options: any);
+    get options(): any;
+    onValuesChanged(e: Event): void;
+    onTapAddTab(e: Event): void;
+    onTapRemoveCurrentTab(e: Event): void;
+    _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }: {
+        chartType: any;
+        datasetsLength: number;
+        lastSeriesColor: TinyColor;
+    }): any;
+    _getElementValue(element: HTMLElement): any;
+}

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

@@ -0,0 +1,285 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
+import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles';
+class PropertyEditorChartJSAbstract extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.currentSeriesIndex = 0;
+    }
+    render() {
+        return html `
+      <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
+
+      <label> <ox-i18n msgid="label.theme">theme</ox-i18n> </label>
+      <select value-key="theme" class="select-content" .value=${this.theme}>
+        <option value="dark">dark</option>
+        <option value="light">light</option>
+      </select>
+
+      <input type="checkbox" value-key="tooltip" .checked=${this.tooltip} />
+      <label> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
+
+      <input type="checkbox" value-key="animation" .checked=${this.animation} />
+      <label> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
+
+      <input type="checkbox" value-key="display" .checked=${this.display} />
+      <label> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
+
+      <input type="checkbox" value-key="stacked" .checked=${this.stacked} />
+      <label> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
+
+      ${this.display
+            ? html `
+            <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
+            <select value-key="position" class="select-content" .value=${this.position}>
+              <option value="top">top</option>
+              <option value="right">right</option>
+              <option value="bottom">bottom</option>
+              <option value="left">left</option>
+            </select>
+          `
+            : html ``}
+      ${this.editorTemplate(this)}
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this));
+    }
+    displayValueTemplate() {
+        return html `
+      <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
+      <input type="text" value-key="series.valueFormat" .value=${this.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> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
+      <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
+
+      <label> <ox-i18n msgid="label.value-suffix">Value suffix</ox-i18n> </label>
+      <input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
+
+      <input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
+      <label> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
+
+      ${this.series.displayValue
+            ? html `
+            <label> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
+            <ox-input-color
+              value-key="series.defaultFontColor"
+              .value=${this.series.defaultFontColor || '#000'}
+            ></ox-input-color>
+            <label> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
+            <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
+            <label> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
+            <select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
+              <option value="start">Start</option>
+              <option value="center" selected>Center</option>
+              <option value="end">End</option>
+            </select>
+            <label> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
+            <input type="number" value-key="series.dataLabelOffset" .value=${this.series.dataLabelOffset || 0} />
+            <label> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
+            <input type="number" value-key="series.dataLabelRotation" .value=${this.series.dataLabelRotation || 0} />
+          `
+            : html ``}
+    `;
+    }
+    editorTemplate(props) {
+        return html ``;
+    }
+    get data() {
+        return this.value.data;
+    }
+    set data(data) {
+        this.value.data = data;
+    }
+    get datasets() {
+        if (!this.data.datasets)
+            this.data.datasets = [];
+        return this.data.datasets;
+    }
+    set datasets(datasets) {
+        this.datasets = datasets;
+    }
+    get series() {
+        if (!this.datasets[this.currentSeriesIndex])
+            this.datasets[this.currentSeriesIndex] = {};
+        return this.datasets[this.currentSeriesIndex];
+    }
+    set series(series) {
+        !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series);
+    }
+    set dataKey(key) {
+        this.series.dataKey = key;
+    }
+    get dataKey() {
+        return this.series.dataKey;
+    }
+    get legend() {
+        !this.value.options && (this.value.options = {});
+        return this.value.options.legend;
+    }
+    set legend(legend) {
+        this.value.options.legend = legend;
+    }
+    get theme() {
+        return this.value.options && this.value.options.theme;
+    }
+    set theme(theme) {
+        !this.value.options && (this.value.options = {});
+        this.value.options.theme = theme;
+    }
+    get tooltip() {
+        return !this.value.options || this.value.options.tooltip !== false; /* default true */
+    }
+    set tooltip(tooltip) {
+        this.value.options.tooltip = tooltip;
+    }
+    get animation() {
+        return !this.value.options || this.value.options.animation !== false; /* default true */
+    }
+    set animation(animation) {
+        this.value.options.animation = animation;
+    }
+    get scales() {
+        return this.value.options.scales;
+    }
+    set scales(scales) {
+        !this.value.options && (this.value.options = {});
+        this.value.options.scales = scales;
+    }
+    get display() {
+        return this.legend && this.legend.display;
+    }
+    set display(display) {
+        this.legend.display = display;
+    }
+    get position() {
+        return this.legend.position;
+    }
+    set position(position) {
+        this.legend.position = position;
+    }
+    get stacked() {
+        return this.value.options.stacked;
+    }
+    set stacked(stacked) {
+        this.value.options.stacked = stacked;
+    }
+    get labelDataKey() {
+        return this.data && this.data.labelDataKey;
+    }
+    set labelDataKey(labelDataKey) {
+        this.data.labelDataKey = labelDataKey;
+    }
+    set options(options) {
+        this.value.options = options;
+    }
+    get options() {
+        return this.value.options;
+    }
+    onValuesChanged(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        var value = element.value;
+        if (!key) {
+            return;
+        }
+        value = this._getElementValue(element);
+        var attrs = key.split('.');
+        var attr = attrs.shift() || '';
+        var variable = this;
+        while (attrs.length > 0) {
+            //@ts-ignore
+            variable = variable[attr];
+            attr = attrs.shift() || '';
+        }
+        //@ts-ignore
+        variable[attr] = value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        this.requestUpdate();
+    }
+    onTapAddTab(e) {
+        if (!this.value.data.datasets)
+            return;
+        var lastSeriesIndex = this.value.data.datasets.length;
+        var chartType = this.series.type || this.value.type;
+        var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor);
+        var seriesModel = this._getSeriesModel({
+            chartType,
+            datasetsLength: lastSeriesIndex,
+            lastSeriesColor
+        });
+        this.value.data.datasets.push(seriesModel);
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        this.currentSeriesIndex = lastSeriesIndex;
+    }
+    onTapRemoveCurrentTab(e) {
+        if (!this.value.data.datasets)
+            return;
+        var currIndex = this.currentSeriesIndex;
+        this.value.data.datasets.splice(currIndex, 1);
+        currIndex--;
+        if (currIndex < 0)
+            currIndex = 0;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        this.currentSeriesIndex = currIndex;
+        this.requestUpdate();
+    }
+    _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }) {
+        var addSeriesOption = {
+            label: `series ${datasetsLength + 1}`,
+            data: [],
+            borderWidth: 1,
+            dataKey: '',
+            yAxisID: 'left',
+            color: randomColor({
+                hue: lastSeriesColor
+            }).toRgbString()
+        };
+        addSeriesOption.type = addSeriesOption.chartType = chartType;
+        return addSeriesOption;
+    }
+    _getElementValue(element) {
+        switch (element.tagName) {
+            case 'INPUT':
+                switch (element.type) {
+                    case 'checkbox':
+                        return element.checked;
+                    case 'number':
+                        return Number(element.value) || 0;
+                    case 'text':
+                        return String(element.value);
+                }
+            case 'PAPER-BUTTON':
+                return element.active;
+            case 'PAPER-LISTBOX':
+                return element.selected;
+            case 'THINGS-EDITOR-MULTIPLE-COLOR':
+                return element.values;
+            case 'THINGS-EDITOR-ANGLE-INPUT':
+                return Number(element.radian) || 0;
+            default:
+                return element.value;
+        }
+    }
+}
+PropertyEditorChartJSAbstract.styles = [PropertyEditorChartJSStyles];
+export default PropertyEditorChartJSAbstract;
+__decorate([
+    property({ type: Object })
+], PropertyEditorChartJSAbstract.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], PropertyEditorChartJSAbstract.prototype, "currentSeriesIndex", void 0);
+//# sourceMappingURL=property-editor-chartjs-abstract.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-abstract.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'\n\nexport default class PropertyEditorChartJSAbstract extends LitElement {\n  static styles = [PropertyEditorChartJSStyles]\n\n  @property({ type: Object }) value: any = {}\n  @property({ type: Number }) currentSeriesIndex: number = 0\n\n  render() {\n    return html`\n      <legend><ox-i18n msgid=\"label.chart\">Chart</ox-i18n></legend>\n\n      <label> <ox-i18n msgid=\"label.theme\">theme</ox-i18n> </label>\n      <select value-key=\"theme\" class=\"select-content\" .value=${this.theme}>\n        <option value=\"dark\">dark</option>\n        <option value=\"light\">light</option>\n      </select>\n\n      <input type=\"checkbox\" value-key=\"tooltip\" .checked=${this.tooltip} />\n      <label> <ox-i18n msgid=\"label.tooltip\">Tooltip</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"animation\" .checked=${this.animation} />\n      <label> <ox-i18n msgid=\"label.animation\">Animation</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"display\" .checked=${this.display} />\n      <label> <ox-i18n msgid=\"label.legend\">Legend</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"stacked\" .checked=${this.stacked} />\n      <label> <ox-i18n msgid=\"label.stacked\">Stacked</ox-i18n> </label>\n\n      ${this.display\n        ? html`\n            <label> <ox-i18n msgid=\"label.position\">Position</ox-i18n> </label>\n            <select value-key=\"position\" class=\"select-content\" .value=${this.position}>\n              <option value=\"top\">top</option>\n              <option value=\"right\">right</option>\n              <option value=\"bottom\">bottom</option>\n              <option value=\"left\">left</option>\n            </select>\n          `\n        : html``}\n      ${this.editorTemplate(this)}\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))\n  }\n\n  displayValueTemplate() {\n    return html`\n      <label for=\"value-format\"> <ox-i18n msgid=\"label.value-format\">Value Format</ox-i18n> </label>\n      <input type=\"text\" value-key=\"series.valueFormat\" .value=${this.series.valueFormat || ''} list=\"format-list\" />\n      <datalist id=\"format-list\">\n        <option value=\"#,###.\"></option>\n        <option value=\"#,###.#\"></option>\n        <option value=\"#,###.0\"></option>\n        <option value=\"#,##0.#\"></option>\n        <option value=\"#,##0.0\"></option>\n        <option value=\"#,##0.0%\"></option>\n      </datalist>\n\n      <label> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n      <input type=\"text\" value-key=\"series.valuePrefix\" .value=${this.series.valuePrefix || ''} />\n\n      <label> <ox-i18n msgid=\"label.value-suffix\">Value suffix</ox-i18n> </label>\n      <input type=\"text\" value-key=\"series.valueSuffix\" .value=${this.series.valueSuffix || ''} />\n\n      <input type=\"checkbox\" value-key=\"series.displayValue\" .checked=${this.series.displayValue || false} />\n      <label> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n      ${this.series.displayValue\n        ? html`\n            <label> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n            <ox-input-color\n              value-key=\"series.defaultFontColor\"\n              .value=${this.series.defaultFontColor || '#000'}\n            ></ox-input-color>\n            <label> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n            <input type=\"number\" value-key=\"series.defaultFontSize\" .value=${this.series.defaultFontSize || 10} />\n            <label> <ox-i18n msgid=\"label.data-label-anchor\">Position</ox-i18n> </label>\n            <select value-key=\"series.dataLabelAnchor\" .value=${this.series.dataLabelAnchor || 'center'}>\n              <option value=\"start\">Start</option>\n              <option value=\"center\" selected>Center</option>\n              <option value=\"end\">End</option>\n            </select>\n            <label> <ox-i18n msgid=\"label.data-label-offset\">Offset</ox-i18n> </label>\n            <input type=\"number\" value-key=\"series.dataLabelOffset\" .value=${this.series.dataLabelOffset || 0} />\n            <label> <ox-i18n msgid=\"label.data-label-rotation\">Rotation</ox-i18n> </label>\n            <input type=\"number\" value-key=\"series.dataLabelRotation\" .value=${this.series.dataLabelRotation || 0} />\n          `\n        : html``}\n    `\n  }\n\n  editorTemplate(props: Properties) {\n    return html``\n  }\n\n  get data() {\n    return this.value.data\n  }\n\n  set data(data) {\n    this.value.data = data\n  }\n\n  get datasets() {\n    if (!this.data.datasets) this.data.datasets = []\n\n    return this.data.datasets\n  }\n\n  set datasets(datasets) {\n    this.datasets = datasets\n  }\n\n  get series() {\n    if (!this.datasets[this.currentSeriesIndex]) this.datasets[this.currentSeriesIndex] = {}\n    return this.datasets[this.currentSeriesIndex]\n  }\n\n  set series(series) {\n    !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series)\n  }\n\n  set dataKey(key) {\n    this.series.dataKey = key\n  }\n\n  get dataKey() {\n    return this.series.dataKey\n  }\n\n  get legend() {\n    !this.value.options && (this.value.options = {})\n    return this.value.options.legend\n  }\n\n  set legend(legend) {\n    this.value.options.legend = legend\n  }\n\n  get theme() {\n    return this.value.options && this.value.options.theme\n  }\n\n  set theme(theme) {\n    !this.value.options && (this.value.options = {})\n    this.value.options.theme = theme\n  }\n\n  get tooltip() {\n    return !this.value.options || this.value.options.tooltip !== false /* default true */\n  }\n\n  set tooltip(tooltip) {\n    this.value.options.tooltip = tooltip\n  }\n\n  get animation() {\n    return !this.value.options || this.value.options.animation !== false /* default true */\n  }\n\n  set animation(animation) {\n    this.value.options.animation = animation\n  }\n\n  get scales() {\n    return this.value.options.scales\n  }\n\n  set scales(scales) {\n    !this.value.options && (this.value.options = {})\n    this.value.options.scales = scales\n  }\n\n  get display() {\n    return this.legend && this.legend.display\n  }\n\n  set display(display) {\n    this.legend.display = display\n  }\n\n  get position() {\n    return this.legend.position\n  }\n\n  set position(position) {\n    this.legend.position = position\n  }\n\n  get stacked() {\n    return this.value.options.stacked\n  }\n\n  set stacked(stacked) {\n    this.value.options.stacked = stacked\n  }\n\n  get labelDataKey() {\n    return this.data && this.data.labelDataKey\n  }\n\n  set labelDataKey(labelDataKey) {\n    this.data.labelDataKey = labelDataKey\n  }\n\n  set options(options) {\n    this.value.options = options\n  }\n\n  get options() {\n    return this.value.options\n  }\n\n  onValuesChanged(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n    var value = element.value\n\n    if (!key) {\n      return\n    }\n\n    value = this._getElementValue(element)\n\n    var attrs = key.split('.')\n    var attr = attrs.shift() || ''\n    var variable = this\n\n    while (attrs.length > 0) {\n      //@ts-ignore\n      variable = variable[attr]\n      attr = attrs.shift() || ''\n    }\n\n    //@ts-ignore\n    variable[attr] = value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.requestUpdate()\n  }\n\n  onTapAddTab(e: Event) {\n    if (!this.value.data.datasets) return\n\n    var lastSeriesIndex = this.value.data.datasets.length\n    var chartType = this.series.type || this.value.type\n    var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor)\n\n    var seriesModel = this._getSeriesModel({\n      chartType,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    this.value.data.datasets.push(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.currentSeriesIndex = lastSeriesIndex\n  }\n\n  onTapRemoveCurrentTab(e: Event) {\n    if (!this.value.data.datasets) return\n\n    var currIndex = this.currentSeriesIndex\n    this.value.data.datasets.splice(currIndex, 1)\n\n    currIndex--\n\n    if (currIndex < 0) currIndex = 0\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    this.currentSeriesIndex = currIndex\n\n    this.requestUpdate()\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: any\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    var addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor as any\n      }).toRgbString()\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  _getElementValue(element: HTMLElement) {\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as HTMLInputElement).type) {\n          case 'checkbox':\n            return (element as HTMLInputElement).checked\n          case 'number':\n            return Number((element as HTMLInputElement).value) || 0\n          case 'text':\n            return String((element as HTMLInputElement).value)\n        }\n\n      case 'PAPER-BUTTON':\n        return (element as any).active\n\n      case 'PAPER-LISTBOX':\n        return (element as any).selected\n\n      case 'THINGS-EDITOR-MULTIPLE-COLOR':\n        return (element as any).values\n\n      case 'THINGS-EDITOR-ANGLE-INPUT':\n        return Number((element as any).radian) || 0\n\n      default:\n        return (element as any).value\n    }\n  }\n}\n"]}

package/dist/editors/property-editor-chartjs-hbar.d.ts

@@ -0,0 +1,10 @@
+import '@material/mwc-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import '@polymer/iron-pages/iron-pages';
+import '@operato/i18n/ox-i18n.js';
+import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
+export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    editorTemplate(): import("lit-html").TemplateResult<1>;
+    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,158 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import '@polymer/iron-pages/iron-pages';
+import '@operato/i18n/ox-i18n.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
+let PropertyEditorChartJSHBar = class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
+    editorTemplate() {
+        return html `
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+
+      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
+
+      <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
+      <input
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        value-key="yAxes0.barSpacing"
+        .value=${this.yAxes0.barSpacing || NaN}
+      />
+      <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
+      <input
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        value-key="yAxes0.categorySpacing"
+        .value=${this.yAxes0.categorySpacing || NaN}
+      />
+
+      <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
+      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
+      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
+
+      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input type="text" value-key="xAxes0.title" .value=${this.xAxes0.axisTitle || ''} />
+
+      <input type="checkbox" value-key="xAxes0.ticks.autoMin" .checked=${this.xAxes0.ticks.autoMin} />
+      <label> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
+      <label> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
+
+      ${!this.xAxes0.ticks.autoMin
+            ? html `
+            <label> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
+            <input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
+          `
+            : html ``}
+      ${!this.xAxes0.ticks.autoMax
+            ? html `
+            <label> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
+            <input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
+          `
+            : html ``}
+
+      <label> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
+      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
+
+      <input type="checkbox" .checked=${this.value.options.yGridLine} />
+      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
+      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+    `;
+    }
+    multiSeriesTabTemplate() {
+        return html `
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <mwc-icon-button
+            id="tab-nav-left-button"
+            icon="chevron_left"
+            @click=${(e) => {
+            this._onTabScrollNavLeft(e);
+        }}
+            disabled
+          ></mwc-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 `
+                        <mwc-icon-button icon="close" @tap="${(e) => this.onTapRemoveCurrentTab(e)}">
+                        </mwc-icon-button>
+                      `
+            : html ``}
+                </paper-tab>
+              `)}
+          </paper-tabs>
+          <mwc-icon-button
+            id="tab-nav-right-button"
+            icon="chevron_right"
+            @click=${(e) => {
+            this._onTabScrollNavRight(e);
+        }}
+            disabled
+          ></mwc-icon-button>
+        </div>
+        <div id="add-series-button-container">
+          <mwc-icon-button
+            id="add-series-button"
+            icon="add"
+            @tap=${(e) => this.onTapAddTab(e)}
+          ></mwc-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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+                <input type="text" value-key="dataKey" .value=${this.dataKey} />
+                <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
+                <input type="text" value-key="series.label" .value=${this.series.label} />
+                <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
+                <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
+                <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
+                <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
+
+                ${this.displayValueTemplate()}
+              </div>
+            `)}
+        </iron-pages>
+      </div>
+    `;
+    }
+};
+PropertyEditorChartJSHBar.styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles];
+PropertyEditorChartJSHBar = __decorate([
+    customElement('property-editor-chartjs-hbar')
+], PropertyEditorChartJSHBar);
+export default PropertyEditorChartJSHBar;
+//# sourceMappingURL=property-editor-chartjs-hbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-hbar.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@polymer/paper-tabs/paper-tabs'\nimport '@polymer/iron-pages/iron-pages'\n\nimport '@operato/i18n/ox-i18n.js'\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-hbar')\nexport default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {\n  static styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles]\n\n  editorTemplate() {\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n\n      <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input type=\"text\" value-key=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n      <label><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n      <input\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.barSpacing\"\n        .value=${this.yAxes0.barSpacing || NaN}\n      />\n      <label><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n      <input\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.categorySpacing\"\n        .value=${this.yAxes0.categorySpacing || NaN}\n      />\n\n      <input type=\"checkbox\" value-key=\"value.options.xGridLine\" .checked=${this.value.options.xGridLine} />\n      <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"xAxes0.ticks.display\" .checked=${this.xAxes0.ticks.display} />\n      <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input type=\"text\" value-key=\"xAxes0.title\" .value=${this.xAxes0.axisTitle || ''} />\n\n      <input type=\"checkbox\" value-key=\"xAxes0.ticks.autoMin\" .checked=${this.xAxes0.ticks.autoMin} />\n      <label> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"xAxes0.ticks.autoMax\" .checked=${this.xAxes0.ticks.autoMax} />\n      <label> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n      ${!this.xAxes0.ticks.autoMin\n        ? html`\n            <label> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n            <input type=\"number\" value-key=\"xAxes0.ticks.min\" .value=${this.xAxes0.ticks.min} />\n          `\n        : html``}\n      ${!this.xAxes0.ticks.autoMax\n        ? html`\n            <label> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n            <input type=\"number\" value-key=\"xAxes0.ticks.max\" .value=${this.xAxes0.ticks.max} />\n          `\n        : html``}\n\n      <label> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n      <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n      <input type=\"checkbox\" .checked=${this.value.options.yGridLine} />\n      <label> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.display\" .checked=${this.yAxes0.ticks.display} />\n      <label> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <mwc-icon-button\n            id=\"tab-nav-left-button\"\n            icon=\"chevron_left\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n          ></mwc-icon-button>\n          <paper-tabs\n            id=\"tabs\"\n            @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}\n            .selected=${this.currentSeriesIndex}\n            no-bar\n            noink\n            scrollable\n            hide-scroll-buttons\n            fit-container\n          >\n            ${this.datasets.map(\n              (dataset: any, index: number) => html`\n                <paper-tab data-series=\"${index + 1}\" noink\n                  >${index + 1}\n                  ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)\n                    ? html`\n                        <mwc-icon-button icon=\"close\" @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\">\n                        </mwc-icon-button>\n                      `\n                    : html``}\n                </paper-tab>\n              `\n            )}\n          </paper-tabs>\n          <mwc-icon-button\n            id=\"tab-nav-right-button\"\n            icon=\"chevron_right\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n          ></mwc-icon-button>\n        </div>\n        <div id=\"add-series-button-container\">\n          <mwc-icon-button\n            id=\"add-series-button\"\n            icon=\"add\"\n            @tap=${(e: Event) => this.onTapAddTab(e)}\n          ></mwc-icon-button>\n        </div>\n\n        <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected=\"series-index\">\n          ${this.datasets.map(\n            (dataset: any, index: number) => html`\n              <div class=\"tab-content\" series-index=\"${index}\">\n                <label> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n                <input type=\"text\" value-key=\"dataKey\" .value=${this.dataKey} />\n                <label> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n                <input type=\"text\" value-key=\"series.label\" .value=${this.series.label} />\n                <label> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n                <ox-input-color value-key=\"color\" .value=${this.color}></ox-input-color>\n                <label> <ox-i18n msgid=\"label.stack-group\">Stack Group</ox-i18n> </label>\n                <input type=\"text\" value-key=\"series.stack\" .value=${this.series.stack || ''} />\n\n                ${this.displayValueTemplate()}\n              </div>\n            `\n          )}\n        </iron-pages>\n      </div>\n    `\n  }\n}\n"]}