@operato/scene-chartjs 7.0.1 → 7.0.2

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

@@ -1,167 +0,0 @@
-import { css } from 'lit';
-export const PropertyEditorChartJSStyles = css `
-  :host {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-  }
-
-  :host > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  :host > label {
-    box-sizing: border-box;
-    grid-column: span 3;
-  }
-
-  :host > legend {
-    box-sizing: border-box;
-    grid-column: 1 / -1;
-    color: var(--md-sys-color-on-secondary-container, #e46c2e);
-    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
-    text-transform: capitalize;
-  }
-
-  #series-properties-container {
-    display: grid;
-    grid-template-columns: 1fr 25px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  #series-properties-container > [tab-content] {
-    grid-column: span 2;
-  }
-
-  #tab-header {
-    display: grid;
-    grid-template-columns: 25px 1fr 25px;
-    grid-gap: 5px;
-    overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-bottom: 0;
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    padding-top: 3px;
-    align-items: center;
-  }
-
-  #tab-header > div {
-    height: 25px;
-  }
-
-  #tab-header md-icon[disabled] {
-    opacity: 0.1;
-  }
-
-  #tabs {
-    display: flex;
-    overflow: hidden;
-  }
-
-  #tab-header #tabs [tab] md-icon {
-    margin-left: 5px;
-    padding: 2px;
-    color: var(--md-sys-color-on-surface);
-
-    --md-icon-size: 12px;
-  }
-
-  #add-series-button-container {
-    height: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    padding-top: 3px;
-    display: flex;
-    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
-  }
-
-  #add-series-button {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  .tab-content {
-    grid-column: 1 / -1;
-
-    background-color: rgba(255, 255, 255, 0.5);
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-width: 0 1px 1px 1px;
-    padding: 5px;
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-  }
-
-  .tab-content > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  label,
-  .tab-content > label {
-    grid-column: span 3;
-    text-align: right;
-    color: var(--md-sys-color-on-secondary-container);
-    font-size: 0.8em;
-    line-height: 2;
-    text-transform: capitalize;
-  }
-
-  input,
-  select {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: var(--spacing-small);
-  }
-
-  input[type='checkbox'],
-  .tab-content > input[type='checkbox'] {
-    grid-column: span 4;
-    justify-self: end;
-    align-self: center;
-  }
-
-  input[type='checkbox'] + label,
-  .tab-content > input[type='checkbox'] + label {
-    grid-column: span 6;
-
-    text-align: left;
-  }
-
-  [fullwidth] {
-    grid-column: 1 / -1;
-    margin: 0;
-    border: 0;
-  }
-
-  div[tab] {
-    display: flex;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-width: 1px 1px 0 1px;
-    padding: 0 5px;
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    min-width: 45px;
-  }
-
-  div[tab][disabled] {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  div[tab]:last-child {
-    border-width: 0;
-  }
-
-  div[tab][selected] {
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-`;
-//# sourceMappingURL=property-editor-chartjs-styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"property-editor-chartjs-styles.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoK7C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const PropertyEditorChartJSStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: 5px;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}

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

@@ -1,10 +0,0 @@
-import '@operato/i18n/ox-i18n.js';
-import './property-editor-chartjs-hbar';
-import './property-editor-chartjs-mixed';
-import './property-editor-chartjs-pie';
-import './property-editor-chartjs-radar';
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
-export default class ChartJSEditor extends OxPropertyEditor {
-    static styles: import("lit").CSSResult[];
-    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
-}

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

@@ -1,79 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/i18n/ox-i18n.js';
-import './property-editor-chartjs-hbar';
-import './property-editor-chartjs-mixed';
-import './property-editor-chartjs-pie';
-import './property-editor-chartjs-radar';
-import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { OxPropertyEditor } from '@operato/property-editor';
-let ChartJSEditor = class ChartJSEditor extends OxPropertyEditor {
-    editorTemplate(value, spec) {
-        return html `
-      ${value
-            ? html `
-            <div id="chart-type">
-              <label> <ox-i18n msgid="label.chart-type">Chart Type</ox-i18n> </label>
-              <input type="text" .value=${value.type} readonly />
-            </div>
-          `
-            : html ``}
-      ${!value
-            ? html ``
-            : value.type == 'line'
-                ? html ` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `
-                : value.type == 'horizontalBar'
-                    ? html ` <property-editor-chartjs-hbar .value=${value} fullwidth></property-editor-chartjs-hbar> `
-                    : value.type == 'bar'
-                        ? html ` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `
-                        : value.type == 'pie'
-                            ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
-                            : value.type == 'doughnut'
-                                ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
-                                : value.type == 'polarArea'
-                                    ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
-                                    : value.type == 'radar'
-                                        ? html ` <property-editor-chartjs-radar .value=${value} fullwidth></property-editor-chartjs-radar> `
-                                        : html ``}
-    `;
-    }
-};
-ChartJSEditor.styles = [
-    css `
-      :host {
-        display: block;
-        padding: 5px;
-
-        --md-elevated-button-container-height: 20px;
-      }
-
-      #chart-type {
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-      }
-
-      #chart-type > label {
-        box-sizing: border-box;
-        grid-column: span 3;
-
-        text-align: right;
-
-        color: var(--md-sys-color-on-secondary-container);
-        font-size: 0.8em;
-        line-height: 2;
-        text-transform: capitalize;
-      }
-
-      #chart-type > input {
-        box-sizing: border-box;
-        grid-column: span 7;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-];
-ChartJSEditor = __decorate([
-    customElement('property-editor-chartjs')
-], ChartJSEditor);
-export default ChartJSEditor;
-//# sourceMappingURL=property-editor-chartjs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"property-editor-chartjs.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,gCAAgC,CAAA;AACvC,OAAO,iCAAiC,CAAA;AACxC,OAAO,+BAA+B,CAAA;AACtC,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAgB;IAoCzD,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;;0CAG4B,KAAK,CAAC,IAAI;;WAEzC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,KAAK;YACN,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM;gBACtB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;gBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBAC/B,CAAC,CAAC,IAAI,CAAA,yCAAyC,KAAK,6CAA6C;oBACjG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBACrB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;wBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BACrB,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;4BAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCAC1B,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;gCAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCAC3B,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;oCAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCACvB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;wCACnG,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;;AA/DM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAjCY,CAiCZ;AAlCkB,aAAa;IADjC,aAAa,CAAC,yBAAyB,CAAC;GACpB,aAAa,CAiEjC;eAjEoB,aAAa","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './property-editor-chartjs-hbar'\nimport './property-editor-chartjs-mixed'\nimport './property-editor-chartjs-pie'\nimport './property-editor-chartjs-radar'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-chartjs')\nexport default class ChartJSEditor extends OxPropertyEditor {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 5px;\n\n        --md-elevated-button-container-height: 20px;\n      }\n\n      #chart-type {\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n      }\n\n      #chart-type > label {\n        box-sizing: border-box;\n        grid-column: span 3;\n\n        text-align: right;\n\n        color: var(--md-sys-color-on-secondary-container);\n        font-size: 0.8em;\n        line-height: 2;\n        text-transform: capitalize;\n      }\n\n      #chart-type > input {\n        box-sizing: border-box;\n        grid-column: span 7;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html`\n      ${value\n        ? html`\n            <div id=\"chart-type\">\n              <label> <ox-i18n msgid=\"label.chart-type\">Chart Type</ox-i18n> </label>\n              <input type=\"text\" .value=${value.type} readonly />\n            </div>\n          `\n        : html``}\n      ${!value\n        ? html``\n        : value.type == 'line'\n        ? html` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `\n        : value.type == 'horizontalBar'\n        ? html` <property-editor-chartjs-hbar .value=${value} fullwidth></property-editor-chartjs-hbar> `\n        : value.type == 'bar'\n        ? html` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `\n        : value.type == 'pie'\n        ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n        : value.type == 'doughnut'\n        ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n        : value.type == 'polarArea'\n        ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n        : value.type == 'radar'\n        ? html` <property-editor-chartjs-radar .value=${value} fullwidth></property-editor-chartjs-radar> `\n        : html``}\n    `\n  }\n}\n"]}

package/src/editors/property-editor-chartjs-abstract.ts

@@ -1,324 +0,0 @@
-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 { Properties } from '@hatiolab/things-scene'
-
-import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'
-
-export default class PropertyEditorChartJSAbstract extends LitElement {
-  static styles = [PropertyEditorChartJSStyles]
-
-  @property({ type: Object }) value: any = {}
-  @property({ type: Number }) currentSeriesIndex: number = 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.position">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>
-          `
-        : html``}
-    `
-  }
-
-  editorTemplate(props: Properties) {
-    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: Event) {
-    var element = e.target as HTMLInputElement
-    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: Event) {
-    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: Event) {
-    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
-  }: {
-    chartType: any
-    datasetsLength: number
-    lastSeriesColor: TinyColor
-  }) {
-    var addSeriesOption: any = {
-      label: `series ${datasetsLength + 1}`,
-      data: [],
-      borderWidth: 1,
-      dataKey: '',
-      yAxisID: 'left',
-      color: randomColor({
-        hue: lastSeriesColor as any
-      }).toRgbString()
-    }
-
-    addSeriesOption.type = addSeriesOption.chartType = chartType
-    return addSeriesOption
-  }
-
-  _getElementValue(element: HTMLElement) {
-    switch (element.tagName) {
-      case 'INPUT':
-        switch ((element as HTMLInputElement).type) {
-          case 'checkbox':
-            return (element as HTMLInputElement).checked
-          case 'number':
-            return Number((element as HTMLInputElement).value) || 0
-          case 'text':
-            return String((element as HTMLInputElement).value)
-        }
-
-      default:
-        return (element as any).value
-    }
-  }
-}