@operato/scene-chartjs 0.0.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-multi-series-abstract.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/iron-icon/iron-icon'\nimport '@polymer/iron-pages/iron-pages'\nimport '@polymer/paper-button/paper-button'\nimport '@polymer/paper-icon-button/paper-icon-button'\nimport '@polymer/paper-tabs/paper-tabs'\n\nimport { css, html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { PaperIconButtonElement } from '@polymer/paper-icon-button/paper-icon-button'\n\nimport PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'\n\nexport default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {\n  static styles = [\n    ...PropertyEditorChartJSAbstract.styles,\n    css`\n      paper-tabs {\n        background-color: rgb(204, 204, 204);\n      }\n      input[type='text'],\n      input[type='number'] {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  constructor() {\n    super()\n\n    this.value = {\n      options: {\n        legend: {},\n        scales: {\n          xAxes: [\n            {\n              ticks: {}\n            }\n          ],\n          yAxes: [\n            {\n              ticks: {}\n            }\n          ]\n        }\n      },\n      data: {\n        datasets: []\n      }\n    }\n  }\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: PaperIconButtonElement\n  @query('#tab-nav-right-button') tabNavRightButton!: PaperIconButtonElement\n\n  get color() {\n    var oldVersionColor = this.series.backgroundColor\n    if (this.series.type == 'line') oldVersionColor = this.series.borderColor\n    if (this.series.type == 'radar') oldVersionColor = this.series.borderColor\n    return this.series.color || oldVersionColor\n  }\n\n  set color(color) {\n    this.series.color = color\n    delete this.series.backgroundColor\n    delete this.series.borderColor\n  }\n\n  get xAxes0() {\n    return this.scales.xAxes[0]\n  }\n\n  set xAxes0(xAxes0) {\n    this.scales.xAxes[0] = xAxes0\n  }\n\n  get yAxes0() {\n    return this.scales.yAxes[0]\n  }\n\n  set yAxes0(yAxes0) {\n    this.scales.yAxes[0] = yAxes0\n  }\n\n  get yAxes1() {\n    return this.scales.yAxes[1]\n  }\n\n  set yAxes1(yAxes1) {\n    this.scales.yAxes[1] = yAxes1\n  }\n\n  get multiAxis() {\n    return this.value.options.multiAxis\n  }\n\n  set multiAxis(multiAxis) {\n    this.value.options.multiAxis = multiAxis\n  }\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs.shadowRoot?.querySelector('#tabsContainer')\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  editorTemplate(props: any) {\n    return html`\n      <input type=\"checkbox\" value-key=\"multiAxis\" .checked=${this.multiAxis} />\n      <label> <i18n-msg msgid=\"label.multi-axis\">Multi Axis</i18n-msg> </label>\n\n      <legend><i18n-msg msgid=\"label.series\">Series</i18n-msg></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><i18n-msg msgid=\"label.x-axes\">X Axes</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.data-key\">Data Key</i18n-msg> </label>\n      <input type=\"text\" value-key=\"labelDataKey\" .value=${this.labelDataKey} />\n\n      <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n      <input type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${this.xAxes0.axisTitle || ''} />\n\n      <label> <i18n-msg msgid=\"label.thickness\">Thickness</i18n-msg> </label>\n      <input type=\"number\" value-key=\"xAxes0.barPercentage\" .value=${this.xAxes0.barPercentage} />\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.y-axes\">Y Axes</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n      <input type=\"text\" value-key=\"yAxes0.axisTitle\" .value=${this.yAxes0.axisTitle || ''} />\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMin\" .checked=${this.yAxes0.ticks.autoMin} />\n      <label> <i18n-msg msgid=\"label.axis-min-auto\">Min Auto</i18n-msg> </label>\n\n      <input type=\"checkbox\" value-key=\"yAxes0.ticks.autoMax\" .checked=${this.yAxes0.ticks.autoMax} />\n      <label> <i18n-msg msgid=\"label.axis-max-auto\">Max Auto</i18n-msg> </label>\n\n      ${!this.yAxes0.ticks.autoMin\n        ? html`\n            <label> <i18n-msg msgid=\"label.axis-min\">Min</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes0.ticks.min\" .value=${this.yAxes0.ticks.min} />\n          `\n        : html``}\n      ${!this.yAxes0.ticks.autoMax\n        ? html`\n            <label> <i18n-msg msgid=\"label.axis-max\">Max</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes0.ticks.max\" .value=${this.yAxes0.ticks.max} />\n          `\n        : html``}\n\n      <label> <i18n-msg msgid=\"label.axis-step-size\">StepSize</i18n-msg> </label>\n      <input type=\"number\" value-key=\"yAxes0.ticks.stepSize\" .value=${this.yAxes0.ticks.stepSize} />\n\n      <input type=\"checkbox\" value-key=\"value.options.yGridLine\" .checked=${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      ${this.value.options.multiAxis\n        ? html`\n            <legend><i18n-msg msgid=\"label.y-2nd-axes\">Y 2nd Axes</i18n-msg></legend>\n\n            <label> <i18n-msg msgid=\"label.title\">Title</i18n-msg> </label>\n            <input type=\"text\" value-key=\"yAxes1.axisTitle\" .value=${this.yAxes1.axisTitle || ''} />\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMin\" .checked=${this.yAxes1.ticks.autoMin} />\n            <label> <i18n-msg msgid=\"label.axis-min-auto\">Min Auto</i18n-msg> </label>\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.autoMax\" .checked=${this.yAxes1.ticks.autoMax} />\n            <label> <i18n-msg msgid=\"label.axis-max-auto\">Max Auto</i18n-msg> </label>\n\n            ${!this.yAxes1.ticks.autoMin\n              ? html`\n                  <label> <i18n-msg msgid=\"label.axis-min\">Min</i18n-msg> </label>\n                  <input type=\"number\" value-key=\"yAxes1.ticks.min\" .value=${this.yAxes1.ticks.min} />\n                `\n              : html``}\n            ${!this.yAxes1.ticks.autoMax\n              ? html`\n                  <label> <i18n-msg msgid=\"label.axis-max\">Max</i18n-msg> </label>\n                  <input type=\"number\" value-key=\"yAxes1.ticks.max\" .value=${this.yAxes1.ticks.max} />\n                `\n              : html``}\n\n            <label> <i18n-msg msgid=\"label.axis-step-size\">StepSize</i18n-msg> </label>\n            <input type=\"number\" value-key=\"yAxes1.ticks.stepSize\" .value=${this.yAxes1.ticks.stepSize} />\n\n            <input type=\"checkbox\" value-key=\"value.options.y2ndGridLine\" .checked=${this.value.options.y2ndGridLine} />\n            <label> <i18n-msg msgid=\"label.grid-line\">Grid Line</i18n-msg> </label>\n\n            <input type=\"checkbox\" value-key=\"yAxes1.ticks.display\" .checked=${this.yAxes1.ticks.display} />\n            <label> <i18n-msg msgid=\"label.display-tick\">Display Tick</i18n-msg> </label>\n          `\n        : html``}\n    `\n  }\n\n  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\n                ${this.value.type == 'bar'\n                  ? html`\n                      <label> <i18n-msg msgid=\"label.type\">type</i18n-msg> </label>\n                      <select class=\"select-content\" value-key=\"series.type\" .value=${this.series.type}>\n                        <option value=\"bar\" selected>bar</option>\n                        <option value=\"line\">line</option>\n                      </select>\n                    `\n                  : html``}\n\n                <label> <i18n-msg msgid=\"label.label\">label</i18n-msg> </label>\n                <input type=\"text\" value-key=\"series.label\" .value=${this.series.label} />\n\n                ${this.series.type == 'line'\n                  ? html`\n                      <label> <i18n-msg msgid=\"label.line-tension\">line tension</i18n-msg> </label>\n                      <select class=\"select-content\" value-key=\"series.lineTension\" .value=${this.series.lineTension}>\n                        <option value=\"0.4\">smooth</option>\n                        <option value=\"0\">angled</option>\n                      </select>\n                    `\n                  : html``}\n                ${this.series.type == 'line'\n                  ? html`\n                      <label> <i18n-msg msgid=\"label.border-width\">border width</i18n-msg> </label>\n                      <input type=\"number\" value-key=\"series.borderWidth\" .value=${this.series.borderWidth} />\n                    `\n                  : html``}\n\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\n                ${this.series.type == 'line'\n                  ? html`\n                      <label> <i18n-msg msgid=\"label.point-shape\">point shape</i18n-msg> </label>\n                      <select class=\"select-content\" value-key=\"series.pointStyle\" .value=${this.series.pointStyle}>\n                        <option value=\"circle\">⚬</option>\n                        <option value=\"triangle\">▵</option>\n                        <option value=\"rect\">□</option>\n                        <option value=\"rectRot\">◇</option>\n                        <option value=\"cross\">+</option>\n                        <option value=\"crossRot\">⨉</option>\n                        <option value=\"star\">✱</option>\n                        <option value=\"line\">―</option>\n                        <option value=\"dash\">┄</option>\n                      </select>\n\n                      <label> <i18n-msg msgid=\"label.point-size\">point size</i18n-msg> </label>\n                      <input type=\"number\" value-key=\"series.pointRadius\" .value=${this.series.pointRadius} />\n                    `\n                  : html``} <label> <i18n-msg msgid=\"label.stack-group\">Stack group</i18n-msg> </label>\n                <input type=\"text\" value-key=\"series.stack\" .value=${this.series.stack || ''} /> ${this.series.type ==\n                'line'\n                  ? html`\n                      <input type=\"checkbox\" value-key=\"series.fill\" .checked=${this.series.fill} />\n                      <label> <i18n-msg msgid=\"label.fill\">fill</i18n-msg> </label>\n                    `\n                  : html``}\n                ${this.multiAxis\n                  ? html`\n                      <label> <i18n-msg msgid=\"label.target-axis\">target axis</i18n-msg> </label>\n                      <select class=\"select-content\" value-key=\"series.yAxisID\" .value=${this.series.yAxisID}>\n                        <option value=\"left\">left</option>\n                        <option value=\"right\">right</option>\n                      </select>\n                    `\n                  : html``}\n                ${this.displayValueTemplate()}\n              </div>\n            `\n          )}\n        </iron-pages>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.disabled = true\n      this.tabNavRightButton.disabled = true\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.disabled = true\n      this.tabNavRightButton.disabled = false\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.disabled = false\n      this.tabNavRightButton.disabled = true\n    } else {\n      this.tabNavLeftButton.disabled = false\n      this.tabNavRightButton.disabled = false\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
+export default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    get valuePrefix(): any;
+    set valuePrefix(valuePrefix: any);
+    get valueSuffix(): any;
+    set valueSuffix(valueSuffix: any);
+    get color(): any;
+    set color(color: any);
+    get displayValue(): any;
+    set displayValue(displayValue: any);
+    editorTemplate(props: any): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract';
+let PropertyEditorChartJSPie = class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
+    constructor() {
+        super();
+        this.value = {
+            options: {
+                legend: {}
+            },
+            data: {
+                datasets: []
+            }
+        };
+        this.currentSeriesIndex = 0;
+    }
+    get valuePrefix() {
+        return this.series.valuePrefix;
+    }
+    set valuePrefix(valuePrefix) {
+        this.series.valuePrefix = valuePrefix;
+    }
+    get valueSuffix() {
+        return this.series.valueSuffix;
+    }
+    set valueSuffix(valueSuffix) {
+        this.series.valueSuffix = valueSuffix;
+    }
+    get color() {
+        return this.series.color || this.series.backgroundColor;
+    }
+    set color(color) {
+        this.series.color = color;
+        delete this.series.backgroundColor;
+    }
+    get displayValue() {
+        return this.series.displayValue;
+    }
+    set displayValue(displayValue) {
+        this.series.displayValue = displayValue;
+    }
+    editorTemplate(props) {
+        return html `
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="dataKey" .value=${this.series.dataKey} />
+
+      <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
+      <things-editor-multiple-color value-key="color" .values=${this.color}></things-editor-multiple-color>
+
+      ${this.displayValueTemplate()}
+
+      <legend><i18n-msg msgid="label.axes">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} />
+    `;
+    }
+};
+PropertyEditorChartJSPie.styles = PropertyEditorChartJSAbstract.styles;
+PropertyEditorChartJSPie = __decorate([
+    customElement('property-editor-chartjs-pie')
+], PropertyEditorChartJSPie);
+export default PropertyEditorChartJSPie;
+//# sourceMappingURL=property-editor-chartjs-pie.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-pie.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-pie.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,6BAA6B,MAAM,oCAAoC,CAAA;AAG9E,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,6BAA6B;IAGjF;QACE,KAAK,EAAE,CAAA;QAEP,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,EAAE;aACb;SACF,CAAA;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAA;IAChC,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;IACvC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAA;IAChC,CAAC;IAED,IAAI,WAAW,CAAC,WAAW;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;IACvC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,CAAA;IACzD,CAAC;IAED,IAAI,KAAK,CAAC,KAAK;QACb,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;QACzB,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAA;IACpC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAA;IACjC,CAAC;IAED,IAAI,YAAY,CAAC,YAAY;QAC3B,IAAI,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY,CAAA;IACzC,CAAC;IAED,cAAc,CAAC,KAAU;QACvB,OAAO,IAAI,CAAA;;;;sDAIuC,IAAI,CAAC,MAAM,CAAC,OAAO;;;gEAGT,IAAI,CAAC,KAAK;;QAElE,IAAI,CAAC,oBAAoB,EAAE;;;;;2DAKwB,IAAI,CAAC,YAAY;KACvE,CAAA;IACH,CAAC;CACF,CAAA;AApEQ,+BAAM,GAAG,6BAA6B,CAAC,MAAM,CAAA;AADjC,wBAAwB;IAD5C,aAAa,CAAC,6BAA6B,CAAC;GACxB,wBAAwB,CAqE5C;eArEoB,wBAAwB","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'\n\n@customElement('property-editor-chartjs-pie')\nexport default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {\n  static styles = PropertyEditorChartJSAbstract.styles\n\n  constructor() {\n    super()\n\n    this.value = {\n      options: {\n        legend: {}\n      },\n      data: {\n        datasets: []\n      }\n    }\n\n    this.currentSeriesIndex = 0\n  }\n\n  get valuePrefix() {\n    return this.series.valuePrefix\n  }\n\n  set valuePrefix(valuePrefix) {\n    this.series.valuePrefix = valuePrefix\n  }\n\n  get valueSuffix() {\n    return this.series.valueSuffix\n  }\n\n  set valueSuffix(valueSuffix) {\n    this.series.valueSuffix = valueSuffix\n  }\n\n  get color() {\n    return this.series.color || this.series.backgroundColor\n  }\n\n  set color(color) {\n    this.series.color = color\n    delete this.series.backgroundColor\n  }\n\n  get displayValue() {\n    return this.series.displayValue\n  }\n\n  set displayValue(displayValue) {\n    this.series.displayValue = displayValue\n  }\n\n  editorTemplate(props: any) {\n    return html`\n      <legend><i18n-msg msgid=\"label.series\">Series</i18n-msg></legend>\n\n      <label> <i18n-msg msgid=\"label.data-key\">Data Key</i18n-msg> </label>\n      <input type=\"text\" value-key=\"dataKey\" .value=${this.series.dataKey} />\n\n      <label> <i18n-msg msgid=\"label.color\">color</i18n-msg> </label>\n      <things-editor-multiple-color value-key=\"color\" .values=${this.color}></things-editor-multiple-color>\n\n      ${this.displayValueTemplate()}\n\n      <legend><i18n-msg msgid=\"label.axes\">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  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+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 PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    editorTemplate(props: any): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,42 @@
+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 PropertyEditorChartJSRadar = class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
+    constructor() {
+        super();
+        this.value = {
+            options: {
+                legend: {}
+            },
+            data: {
+                datasets: []
+            }
+        };
+    }
+    editorTemplate(props) {
+        return html `
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><i18n-msg msgid="label.axes">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} />
+    `;
+    }
+};
+PropertyEditorChartJSRadar.styles = PropertyEditorChartJSMultiSeriesAbstract.styles;
+PropertyEditorChartJSRadar = __decorate([
+    customElement('property-editor-chartjs-radar')
+], PropertyEditorChartJSRadar);
+export default PropertyEditorChartJSRadar;
+//# sourceMappingURL=property-editor-chartjs-radar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs-radar.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-radar.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,8BAA8B,CAAA;AACrC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,8CAA8C,CAAA;AACrD,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,wCAAwC,MAAM,iDAAiD,CAAA;AAGtG,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,wCAAwC;IAG9F;QACE,KAAK,EAAE,CAAA;QAEP,IAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;aACX;YACD,IAAI,EAAE;gBACJ,QAAQ,EAAE,EAAE;aACb;SACF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,KAAU;QACvB,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,sBAAsB,EAAE;;;;;2DAKO,IAAI,CAAC,YAAY;KACvE,CAAA;IACH,CAAC;CACF,CAAA;AA3BQ,iCAAM,GAAG,wCAAwC,CAAC,MAAM,CAAA;AAD5C,0BAA0B;IAD9C,aAAa,CAAC,+BAA+B,CAAC;GAC1B,0BAA0B,CA4B9C;eA5BoB,0BAA0B","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-radar')\nexport default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {\n  static styles = PropertyEditorChartJSMultiSeriesAbstract.styles\n\n  constructor() {\n    super()\n\n    this.value = {\n      options: {\n        legend: {}\n      },\n      data: {\n        datasets: []\n      }\n    }\n  }\n\n  editorTemplate(props: any) {\n    return html`\n      <legend><i18n-msg msgid=\"label.series\">Series</i18n-msg></legend>\n\n      <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n      <legend><i18n-msg msgid=\"label.axes\">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  }\n}\n"]}

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

@@ -0,0 +1 @@
+export declare const PropertyEditorChartJSStyles: import("lit").CSSResult;

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

@@ -0,0 +1,165 @@
+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(--secondary-text-color, #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 > iron-pages {
+    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: #ccc;
+    box-sizing: border-box;
+    padding-top: 3px;
+    align-items: center;
+  }
+
+  #tab-header > paper-tabs {
+    height: 25px;
+  }
+
+  #tab-header > paper-icon-button {
+    padding: 0px;
+    width: 25px;
+    height: 25px;
+  }
+
+  #tab-header paper-tabs paper-icon-button {
+    display: flex;
+    margin-left: 5px;
+    width: 15px;
+    height: 15px;
+    padding: 2px;
+    color: #585858;
+  }
+
+  #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(--primary-text-color);
+  }
+
+  .tab-content {
+    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(--primary-text-color);
+    font-size: 0.8em;
+    line-height: 2;
+    text-transform: capitalize;
+  }
+
+  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;
+  }
+
+  select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    background: url(/images/bg-input-select.png) 100% 50% no-repeat #fff;
+  }
+  input[type='text'] {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  paper-tab {
+    background-color: rgba(0, 0, 0, 0.2);
+    background-color: #ccc;
+    border-width: 1px 1px 0 1px;
+    padding: 0 5px;
+    color: #fff;
+    font-size: 13px;
+    box-sizing: border-box;
+    min-width: 45px;
+  }
+
+  paper-tab[disabled] {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  paper-tab:last-child {
+    border-width: 0;
+  }
+
+  paper-tabs paper-tab.iron-selected {
+    background-color: #f6f8f9;
+    border-radius: 5px 5px 0 0;
+    color: #585858;
+  }
+`;
+//# sourceMappingURL=property-editor-chartjs-styles.js.map

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkK7C,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(--secondary-text-color, #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 > iron-pages {\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: #ccc;\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > paper-tabs {\n    height: 25px;\n  }\n\n  #tab-header > paper-icon-button {\n    padding: 0px;\n    width: 25px;\n    height: 25px;\n  }\n\n  #tab-header paper-tabs paper-icon-button {\n    display: flex;\n    margin-left: 5px;\n    width: 15px;\n    height: 15px;\n    padding: 2px;\n    color: #585858;\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(--primary-text-color);\n  }\n\n  .tab-content {\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(--primary-text-color);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\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  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    background: url(/images/bg-input-select.png) 100% 50% no-repeat #fff;\n  }\n  input[type='text'] {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n  }\n\n  paper-tab {\n    background-color: rgba(0, 0, 0, 0.2);\n    background-color: #ccc;\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: #fff;\n    font-size: 13px;\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  paper-tab[disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  paper-tab:last-child {\n    border-width: 0;\n  }\n\n  paper-tabs paper-tab.iron-selected {\n    background-color: #f6f8f9;\n    border-radius: 5px 5px 0 0;\n    color: #585858;\n  }\n`\n"]}

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

@@ -0,0 +1,14 @@
+import '@polymer/iron-icon';
+import '@polymer/iron-icons';
+import '@polymer/paper-icon-button';
+import '@polymer/paper-tabs';
+import './property-editor-chartjs-hbar';
+import './property-editor-chartjs-mixed';
+import './property-editor-chartjs-pie';
+import './property-editor-chartjs-radar';
+import { OxPropertyEditor } from '@operato/property-editor';
+export default class ChartJSEditor extends OxPropertyEditor {
+    static get is(): string;
+    static get styles(): import("lit").CSSResult[];
+    editorTemplate(props: any): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,83 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@polymer/iron-icon';
+import '@polymer/iron-icons';
+import '@polymer/paper-icon-button';
+import '@polymer/paper-tabs';
+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 { OxPropertyEditor } from '@operato/property-editor';
+export default class ChartJSEditor extends OxPropertyEditor {
+    static get is() {
+        return 'property-editor-chartjs';
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          display: block;
+          padding: 5px;
+        }
+
+        #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(--primary-text-color);
+          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);
+        }
+      `
+        ];
+    }
+    editorTemplate(props) {
+        return html `
+      ${props.value
+            ? html `
+            <div id="chart-type">
+              <label> <i18n-msg msgid="label.chart-type">Chart Type</i18n-msg> </label>
+              <input type="text" .value=${props.value.type} readonly />
+            </div>
+          `
+            : html ``}
+      ${!props.value
+            ? html ``
+            : props.value.type == 'line'
+                ? html ` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `
+                : props.value.type == 'horizontalBar'
+                    ? html ` <property-editor-chartjs-hbar .value=${props.value} fullwidth></property-editor-chartjs-hbar> `
+                    : props.value.type == 'bar'
+                        ? html ` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `
+                        : props.value.type == 'pie'
+                            ? html ` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+                            : props.value.type == 'doughnut'
+                                ? html ` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+                                : props.value.type == 'polarArea'
+                                    ? html ` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+                                    : props.value.type == 'radar'
+                                        ? html ` <property-editor-chartjs-radar .value=${props.value} fullwidth></property-editor-chartjs-radar> `
+                                        : html ``}
+    `;
+    }
+}
+customElements.define(ChartJSEditor.is, ChartJSEditor);
+//# sourceMappingURL=property-editor-chartjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-chartjs.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAC5B,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;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,gBAAgB;IACzD,MAAM,KAAK,EAAE;QACX,OAAO,yBAAyB,CAAA;IAClC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BF;SACF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,KAAU;QACvB,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,KAAK;YACX,CAAC,CAAC,IAAI,CAAA;;;0CAG4B,KAAK,CAAC,KAAK,CAAC,IAAI;;WAE/C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,KAAK,CAAC,KAAK;YACZ,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM;gBAC5B,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,CAAC,KAAK,8CAA8C;gBACzG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBACrC,CAAC,CAAC,IAAI,CAAA,yCAAyC,KAAK,CAAC,KAAK,6CAA6C;oBACvG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBAC3B,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,CAAC,KAAK,8CAA8C;wBACzG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BAC3B,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,CAAC,KAAK,4CAA4C;4BACrG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCAChC,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,CAAC,KAAK,4CAA4C;gCACrG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCACjC,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,CAAC,KAAK,4CAA4C;oCACrG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCAC7B,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,CAAC,KAAK,8CAA8C;wCACzG,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,EAAE,aAAa,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@polymer/iron-icon'\nimport '@polymer/iron-icons'\nimport '@polymer/paper-icon-button'\nimport '@polymer/paper-tabs'\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'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport default class ChartJSEditor extends OxPropertyEditor {\n  static get is() {\n    return 'property-editor-chartjs'\n  }\n\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: block;\n          padding: 5px;\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(--primary-text-color);\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\n  editorTemplate(props: any) {\n    return html`\n      ${props.value\n        ? html`\n            <div id=\"chart-type\">\n              <label> <i18n-msg msgid=\"label.chart-type\">Chart Type</i18n-msg> </label>\n              <input type=\"text\" .value=${props.value.type} readonly />\n            </div>\n          `\n        : html``}\n      ${!props.value\n        ? html``\n        : props.value.type == 'line'\n        ? html` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `\n        : props.value.type == 'horizontalBar'\n        ? html` <property-editor-chartjs-hbar .value=${props.value} fullwidth></property-editor-chartjs-hbar> `\n        : props.value.type == 'bar'\n        ? html` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `\n        : props.value.type == 'pie'\n        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `\n        : props.value.type == 'doughnut'\n        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `\n        : props.value.type == 'polarArea'\n        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `\n        : props.value.type == 'radar'\n        ? html` <property-editor-chartjs-radar .value=${props.value} fullwidth></property-editor-chartjs-radar> `\n        : html``}\n    `\n  }\n}\n\ncustomElements.define(ChartJSEditor.is, ChartJSEditor)\n"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import './chartjs';
+declare const _default: "./chartjs";
+export default _default;

package/dist/index.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import './chartjs';
+export default './chartjs';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,gBAAgB,CAAA;AACvB,OAAO,6BAA6B,CAAA;AACpC,OAAO,WAAW,CAAA;AAClB,eAAe,WAAW,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport 'core-js/stable'\nimport 'regenerator-runtime/runtime'\nimport './chartjs'\nexport default './chartjs'\n"]}

package/dist/ox-chart.d.ts

@@ -0,0 +1,20 @@
+import 'chartjs-plugin-datalabels';
+import 'chartjs-plugin-style';
+import { LitElement, PropertyValues } from 'lit';
+export declare class OxChart extends LitElement {
+    width: number;
+    height: number;
+    options: SceneChart.ChartConfig;
+    data: SceneChart.ChartData;
+    private _initialized?;
+    private _chart?;
+    _canvas: HTMLCanvasElement;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    initChart(): void;
+    updateChartSize(): void;
+    updateChartConfig(): void;
+    attachPluginOptions(options: SceneChart.ChartOptions): void;
+    attachDatalabelPluginOptions(pluginOptions: SceneChart.ChartPluginsOptions): void;
+}