@operato/scene-chartjs 0.0.5

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

@@ -0,0 +1,250 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+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';
+export default class PropertyEditorChartJSAbstract extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.currentSeriesIndex = 0;
+    }
+    render() {
+        return html `
+      <legend><i18n-msg msgid="label.chart">Chart</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.theme">theme</i18n-msg> </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="display" .checked=${this.display} />
+      <label> <i18n-msg msgid="label.legend">Legend</i18n-msg> </label>
+
+      ${this.display
+            ? html `
+            <label> <i18n-msg msgid="label.position">Position</i18n-msg> </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> <i18n-msg msgid="label.value-prefix">Value Prefix</i18n-msg> </label>
+      <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
+
+      <label> <i18n-msg msgid="label.value-suffix">Value suffix</i18n-msg> </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> <i18n-msg msgid="label.value-display">Value Display</i18n-msg> </label>
+
+      ${this.series.displayValue
+            ? html `
+            <label> <i18n-msg msgid="label.font-color">Font Color</i18n-msg> </label>
+            <things-editor-color
+              value-key="series.defaultFontColor"
+              .value=${this.series.defaultFontColor || '#000'}
+            ></things-editor-color>
+            <label> <i18n-msg msgid="label.font-size">Font Size</i18n-msg> </label>
+            <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
+            <label> <i18n-msg msgid="label.position">Position</i18n-msg> </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) {
+        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 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];
+__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":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\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><i18n-msg msgid=\"label.chart\">Chart</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.theme\">theme</i18n-msg> </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=\"display\" .checked=${this.display} />\n      <label> <i18n-msg msgid=\"label.legend\">Legend</i18n-msg> </label>\n\n      ${this.display\n        ? html`\n            <label> <i18n-msg msgid=\"label.position\">Position</i18n-msg> </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> <i18n-msg msgid=\"label.value-prefix\">Value Prefix</i18n-msg> </label>\n      <input type=\"text\" value-key=\"series.valuePrefix\" .value=${this.series.valuePrefix || ''} />\n\n      <label> <i18n-msg msgid=\"label.value-suffix\">Value suffix</i18n-msg> </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> <i18n-msg msgid=\"label.value-display\">Value Display</i18n-msg> </label>\n\n      ${this.series.displayValue\n        ? html`\n            <label> <i18n-msg msgid=\"label.font-color\">Font Color</i18n-msg> </label>\n            <things-editor-color\n              value-key=\"series.defaultFontColor\"\n              .value=${this.series.defaultFontColor || '#000'}\n            ></things-editor-color>\n            <label> <i18n-msg msgid=\"label.font-size\">Font Size</i18n-msg> </label>\n            <input type=\"number\" value-key=\"series.defaultFontSize\" .value=${this.series.defaultFontSize || 10} />\n            <label> <i18n-msg msgid=\"label.position\">Position</i18n-msg> </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          `\n        : html``}\n    `\n  }\n\n  editorTemplate(props: any) {\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 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,9 @@
+import '@polymer/iron-icon/iron-icon';
+import '@polymer/paper-button/paper-button';
+import '@polymer/paper-icon-button/paper-icon-button';
+import '@polymer/paper-tabs/paper-tabs';
+import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
+export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
+    editorTemplate(): import("lit-html").TemplateResult<1>;
+    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,160 @@
+import { __decorate } from "tslib";
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@polymer/iron-icon/iron-icon';
+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 PropertyEditorChartJSHBar = class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
+    editorTemplate() {
+        return html `
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><i18n-msg msgid="label.y-axes">Y 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="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
+
+      <label><i18n-msg msgid="label.bar-spacing">Bar Spacing</i18n-msg></label>
+      <input
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        value-key="yAxes0.barSpacing"
+        .value=${this.yAxes0.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="yAxes0.categorySpacing"
+        .value=${this.yAxes0.categorySpacing || NaN}
+      />
+
+      <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.x-axes">X Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </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> <i18n-msg msgid="label.axis-min-auto">Axis Min Auto</i18n-msg> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
+      <label> <i18n-msg msgid="label.axis-max-auto">Axis Max Auto</i18n-msg> </label>
+
+      ${!this.xAxes0.ticks.autoMin
+            ? html `
+            <label> <i18n-msg msgid="label.axis-min">Axis Min</i18n-msg> </label>
+            <input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
+          `
+            : html ``}
+      ${!this.xAxes0.ticks.autoMax
+            ? html `
+            <label> <i18n-msg msgid="label.axis-max">Axis Max</i18n-msg> </label>
+            <input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
+          `
+            : html ``}
+
+      <label> <i18n-msg msgid="label.axis-step-size">Axis Step Size</i18n-msg> </label>
+      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
+
+      <input type="checkbox" .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>
+    `;
+    }
+    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} />
+                <label> <i18n-msg msgid="label.label">Label</i18n-msg> </label>
+                <input type="text" value-key="series.label" .value=${this.series.label} />
+                <label> <i18n-msg msgid="label.color">Color</i18n-msg> </label>
+                <things-editor-color value-key="color" .value=${this.color}></things-editor-color>
+                <label> <i18n-msg msgid="label.stack-group">Stack Group</i18n-msg> </label>
+                <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
+
+                ${this.displayValueTemplate()}
+              </div>
+            `)}
+        </iron-pages>
+      </div>
+    `;
+    }
+};
+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":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@polymer/iron-icon/iron-icon'\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-hbar')\nexport default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {\n  editorTemplate() {\n    return html`\n      <legend><i18n-msg msgid=\"label.series\">Series</i18n-msg></legend>\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><i18n-msg msgid=\"label.y-axes\">Y 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=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\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=\"yAxes0.barSpacing\"\n        .value=${this.yAxes0.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=\"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> <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.x-axes\">X Axes</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </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> <i18n-msg msgid=\"label.axis-min-auto\">Axis Min Auto</i18n-msg> </label>\n\n      <input type=\"checkbox\" value-key=\"xAxes0.ticks.autoMax\" .checked=${this.xAxes0.ticks.autoMax} />\n      <label> <i18n-msg msgid=\"label.axis-max-auto\">Axis Max Auto</i18n-msg> </label>\n\n      ${!this.xAxes0.ticks.autoMin\n        ? html`\n            <label> <i18n-msg msgid=\"label.axis-min\">Axis Min</i18n-msg> </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> <i18n-msg msgid=\"label.axis-max\">Axis Max</i18n-msg> </label>\n            <input type=\"number\" value-key=\"xAxes0.ticks.max\" .value=${this.xAxes0.ticks.max} />\n          `\n        : html``}\n\n      <label> <i18n-msg msgid=\"label.axis-step-size\">Axis Step Size</i18n-msg> </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> <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  }\n\n  multiSeriesTabTemplate() {\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <paper-icon-button\n            id=\"tab-nav-left-button\"\n            icon=\"chevron-left\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n          ></paper-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                        <paper-icon-button icon=\"close\" @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\">\n                        </paper-icon-button>\n                      `\n                    : html``}\n                </paper-tab>\n              `\n            )}\n          </paper-tabs>\n          <paper-icon-button\n            id=\"tab-nav-right-button\"\n            icon=\"chevron-right\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n          ></paper-icon-button>\n        </div>\n        <div id=\"add-series-button-container\">\n          <paper-icon-button\n            id=\"add-series-button\"\n            icon=\"add\"\n            @tap=${(e: Event) => this.onTapAddTab(e)}\n          ></paper-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> <i18n-msg msgid=\"label.data-key\">Data Key</i18n-msg> </label>\n                <input type=\"text\" value-key=\"dataKey\" .value=${this.dataKey} />\n                <label> <i18n-msg msgid=\"label.label\">Label</i18n-msg> </label>\n                <input type=\"text\" value-key=\"series.label\" .value=${this.series.label} />\n                <label> <i18n-msg msgid=\"label.color\">Color</i18n-msg> </label>\n                <things-editor-color value-key=\"color\" .value=${this.color}></things-editor-color>\n                <label> <i18n-msg msgid=\"label.stack-group\">Stack Group</i18n-msg> </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"]}

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

@@ -0,0 +1,20 @@
+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 PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract';
+export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    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);
+    editorTemplate(props: any): import("lit-html").TemplateResult<1>;
+    _hasBarSeries(chart: any): boolean;
+}