@operato/chart 2.0.0-beta.25

package/dist/src/editors/ox-input-chart-hbar.js

@@ -0,0 +1,220 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-color.js';
+import '@operato/i18n/ox-i18n.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+let OxInputChartHBar = class OxInputChartHBar extends InputChartMultiSeriesAbstract {
+    static { this.styles = [...InputChartMultiSeriesAbstract.styles]; }
+    getChartType() {
+        return 'horizontalBar';
+    }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label for="label-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="label-data-key" type="text" value-key="labelDataKey" value=${ifDefined(configurer.labelDataKey)} />
+
+      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="y-axes0-axis-title"
+        type="text"
+        value-key="yAxes0.axisTitle"
+        value=${ifDefined(configurer.yAxes0.axisTitle)}
+      />
+
+      <label for="y-axes0-bar-spacing"><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
+      <input
+        id="y-axes0-bar-spacing"
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        value-key="yAxes0.barSpacing"
+        value=${ifDefined(configurer.yAxes0.barSpacing)}
+      />
+      <label for="y-axes0-category-spacing"><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
+      <input
+        id="y-axes0-category-spacing"
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        value-key="yAxes0.categorySpacing"
+        value=${ifDefined(configurer.yAxes0.categorySpacing)}
+      />
+
+      <input
+        id="x-grid-line"
+        type="checkbox"
+        value-key="value.options.xGridLine"
+        ?checked=${configurer.config.options?.xGridLine}
+      />
+      <label for="x-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="x-axes0-ticks-display"
+        type="checkbox"
+        value-key="xAxes0.ticks.display"
+        ?checked=${configurer.xAxes0.ticks?.display}
+      />
+      <label for="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
+
+      <label for="x-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="x-axes0-axis-title"
+        type="text"
+        value-key="xAxes0.axisTitle"
+        .value=${configurer.xAxes0.axisTitle || ''}
+      />
+
+      <input
+        id="x-axes0-axis-min-auto"
+        type="checkbox"
+        value-key="xAxes0.ticks.autoMin"
+        ?checked=${configurer.xAxes0.ticks?.autoMin}
+      />
+      <label for="x-axes0-axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
+
+      <input
+        id="x-axes0-ticks-auto-max"
+        type="checkbox"
+        value-key="xAxes0.ticks.autoMax"
+        ?checked=${configurer.xAxes0.ticks?.autoMax}
+      />
+      <label for="x-axes0-ticks-auto-max"> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
+
+      ${!configurer.xAxes0.ticks?.autoMin
+            ? html `
+            <label for="x-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
+            <input
+              id="x-axes0-ticks-min"
+              type="number"
+              value-key="xAxes0.ticks.min"
+              value=${ifDefined(configurer.xAxes0.ticks?.min)}
+            />
+          `
+            : html ``}
+      ${!configurer.xAxes0.ticks?.autoMax
+            ? html `
+            <label for="x-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
+            <input
+              id="x-axes0-ticks-max"
+              type="number"
+              value-key="xAxes0.ticks.max"
+              value=${ifDefined(configurer.xAxes0.ticks?.max)}
+            />
+          `
+            : html ``}
+
+      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
+      <input
+        id="y-axes0-ticks-step-size"
+        type="number"
+        value-key="yAxes0.ticks.stepSize"
+        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}
+      />
+
+      <input
+        id="y-grid-line"
+        type="checkbox"
+        value-key="value.options.yGridLine"
+        ?checked=${configurer.config.options?.yGridLine}
+      />
+      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-display"
+        type="checkbox"
+        value-key="yAxes0.ticks.display"
+        ?checked=${configurer.yAxes0.ticks?.display}
+      />
+      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+    `;
+    }
+    multiSeriesTabTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <md-icon
+            id="tab-nav-left-button"
+            @tap=${(e) => {
+            this._onTabScrollNavLeft(e);
+        }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="tabs"
+            @change=${(e) => {
+            configurer.currentSeriesIndex = e.target.activeTabIndex;
+        }}
+            active-tab-index=${configurer.currentSeriesIndex}
+            fit-container
+          >
+            ${configurer.datasets.map((dataset, index) => html `
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == configurer.currentSeriesIndex}
+                  @click=${(e) => {
+            const target = e.target;
+            this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')));
+            this.value = { ...this.configurer.value };
+        }}
+                >
+                  ${index + 1}
+                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
+            ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
+            : html ``}
+                </div>
+              `)}
+          </div>
+          <md-icon
+            id="tab-nav-right-button"
+            @click=${(e) => {
+            this._onTabScrollNavRight(e);
+        }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div id="add-series-button-container">
+          <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
+        </div>
+
+        <div class="tab-content">
+          <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+          <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
+          <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
+          <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
+          <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
+          <ox-input-color id="series-color" value-key="color" .value=${configurer.color || '#000'}></ox-input-color>
+          <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
+          <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
+
+          ${this.displayValueTemplate()}
+        </div>
+      </div>
+    `;
+    }
+    getDefaultDatasets() {
+        return [this.getDefaultDataset('horizontalBar')];
+    }
+};
+OxInputChartHBar = __decorate([
+    customElement('ox-input-chart-hbar')
+], OxInputChartHBar);
+export { OxInputChartHBar };
+//# sourceMappingURL=ox-input-chart-hbar.js.map

package/dist/src/editors/ox-input-chart-hbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-hbar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartMultiSeriesAbstract {\n  static styles = [...InputChartMultiSeriesAbstract.styles]\n\n  getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed' {\n    return 'horizontalBar'\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        value=${ifDefined(configurer.yAxes0.axisTitle)}\n      />\n\n      <label for=\"y-axes0-bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-bar-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.barSpacing\"\n        value=${ifDefined(configurer.yAxes0.barSpacing)}\n      />\n      <label for=\"y-axes0-category-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n      <input\n        id=\"y-axes0-category-spacing\"\n        type=\"number\"\n        min=\"0\"\n        max=\"1\"\n        step=\"0.1\"\n        value-key=\"yAxes0.categorySpacing\"\n        value=${ifDefined(configurer.yAxes0.categorySpacing)}\n      />\n\n      <input\n        id=\"x-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"x-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"xAxes0.axisTitle\"\n        .value=${configurer.xAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"x-axes0-axis-min-auto\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMin\"\n        ?checked=${configurer.xAxes0.ticks?.autoMin}\n      />\n      <label for=\"x-axes0-axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-auto-max\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.autoMax\"\n        ?checked=${configurer.xAxes0.ticks?.autoMax}\n      />\n      <label for=\"x-axes0-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n      ${!configurer.xAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"x-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.min\"\n              value=${ifDefined(configurer.xAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.xAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"x-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n            <input\n              id=\"x-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"xAxes0.ticks.max\"\n              value=${ifDefined(configurer.xAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color || '#000'}></ox-input-color>\n          <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack Group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('horizontalBar')]\n  }\n}\n"]}

package/dist/src/editors/ox-input-chart-mixed.d.ts

@@ -0,0 +1,8 @@
+import '@operato/i18n/ox-i18n.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+export declare class OxInputChartMixed extends InputChartMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    getChartType(): 'bar' | 'line' | 'pie' | 'radar' | 'mixed';
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    _hasBarSeries(config: any): boolean;
+}

package/dist/src/editors/ox-input-chart-mixed.js

@@ -0,0 +1,237 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+let OxInputChartMixed = class OxInputChartMixed extends InputChartMultiSeriesAbstract {
+    static { this.styles = InputChartMultiSeriesAbstract.styles; }
+    getChartType() {
+        return 'mixed';
+    }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
+      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
+
+      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="series-data-key" type="text" value-key="labelDataKey" value=${ifDefined(configurer.labelDataKey)} />
+
+      <label for="x-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="x-axes0-axis-title"
+        type="text"
+        value-key="xAxes0.axisTitle"
+        value=${ifDefined(configurer.xAxes0.axisTitle)}
+      />
+
+      ${this._hasBarSeries(configurer.value)
+            ? html `
+            <label for="bar-spacing"><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
+            <input
+              id="bar-spacing"
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.barSpacing"
+              value=${ifDefined(configurer.xAxes0.barSpacing)}
+            />
+            <label for="tick-spacing"><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
+            <input
+              id="tick-spacing"
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.categorySpacing"
+              value=${ifDefined(configurer.xAxes0.categorySpacing)}
+            />
+          `
+            : html ``}
+
+      <input
+        id="x-grid-line"
+        type="checkbox"
+        value-key="value.options.xGridLine"
+        ?checked=${configurer.config.options?.xGridLine}
+      />
+      <label for="x-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="x-axes0-ticks-display"
+        type="checkbox"
+        value-key="xAxes0.ticks.display"
+        ?checked=${configurer.xAxes0.ticks?.display}
+      />
+      <label for="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="y-axes0-axis-title"
+        type="text"
+        value-key="yAxes0.axisTitle"
+        value=${configurer.yAxes0.axisTitle || ''}
+      />
+
+      <input
+        id="axis-min-auto"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMin"
+        ?checked=${configurer.yAxes0.ticks?.autoMin}
+      />
+      <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+      <input
+        id="axis-max-auto"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMax"
+        ?checked=${configurer.yAxes0.ticks?.autoMax}
+      />
+      <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+      ${!configurer.yAxes0.ticks?.autoMin
+            ? html `
+            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-min"
+              type="number"
+              value-key="yAxes0.ticks.min"
+              value=${ifDefined(configurer.yAxes0.ticks?.min)}
+            />
+          `
+            : html ``}
+      ${!configurer.yAxes0.ticks?.autoMax
+            ? html `
+            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-max"
+              type="number"
+              value-key="yAxes0.ticks.max"
+              value=${ifDefined(configurer.yAxes0.ticks?.max)}
+            />
+          `
+            : html ``}
+
+      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+      <input
+        id="y-axes0-ticks-step-size"
+        type="number"
+        value-key="yAxes0.ticks.stepSize"
+        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}
+      />
+
+      <input
+        id="y-grid-line"
+        type="checkbox"
+        value-key="value.options.yGridLine"
+        ?checked=${configurer.config.options?.yGridLine}
+      />
+      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-display"
+        type="checkbox"
+        value-key="yAxes0.ticks.display"
+        ?checked=${configurer.yAxes0.ticks?.display}
+      />
+      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      ${configurer.config.options?.multiAxis
+            ? html `
+            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
+
+            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+            <input
+              id="y-axes1.axis-title"
+              type="text"
+              value-key="yAxes1.axisTitle"
+              value=${ifDefined(configurer.yAxes1?.axisTitle)}
+            />
+
+            <input
+              id="y-axes1-ticks-auto-min"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMin"
+              ?checked=${configurer.yAxes1?.ticks?.autoMin}
+            />
+            <label for="y-axes1-ticks-auto-min"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+            <input
+              id="y-axes1-ticks-auto-max"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMax"
+              ?checked=${configurer.yAxes1?.ticks?.autoMax}
+            />
+            <label for="y-axes1-ticks-auto-max"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+            ${!configurer.yAxes1?.ticks?.autoMin
+                ? html `
+                  <label for="y-axes1-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-min"
+                    type="number"
+                    value-key="yAxes1.ticks.min"
+                    value=${ifDefined(configurer.yAxes1?.ticks?.min)}
+                  />
+                `
+                : html ``}
+            ${!configurer.yAxes1?.ticks?.autoMax
+                ? html `
+                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-max"
+                    type="number"
+                    value-key="yAxes1.ticks.max"
+                    value=${ifDefined(configurer.yAxes1?.ticks?.max)}
+                  />
+                `
+                : html ``}
+
+            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+            <input
+              id="y-axes1-ticks-step-size"
+              type="number"
+              value-key="yAxes1.ticks.stepSize"
+              value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}
+            />
+
+            <input
+              id="y-2nd-grid-line"
+              type="checkbox"
+              value-key="value.options.y2ndGridLine"
+              ?checked=${configurer.config.options?.y2ndGridLine}
+            />
+            <label for="y-2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+            <input
+              id="y-axes1-ticks-display"
+              type="checkbox"
+              value-key="yAxes1.ticks.display"
+              ?checked=${configurer.yAxes1?.ticks?.display}
+            />
+            <label for="y-axes1-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+          `
+            : html ``}
+    `;
+    }
+    _hasBarSeries(config) {
+        var hasBarSeries = false;
+        hasBarSeries = config.data.datasets?.some((s) => s.type == 'bar');
+        return hasBarSeries;
+    }
+};
+OxInputChartMixed = __decorate([
+    customElement('ox-input-chart-mixed')
+], OxInputChartMixed);
+export { OxInputChartMixed };
+//# sourceMappingURL=ox-input-chart-mixed.js.map

package/dist/src/editors/ox-input-chart-mixed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-mixed.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-mixed.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-mixed')\nexport class OxInputChartMixed extends InputChartMultiSeriesAbstract {\n  static styles = InputChartMultiSeriesAbstract.styles\n\n  getChartType(): 'bar' | 'line' | 'pie' | 'radar' | 'mixed' {\n    return 'mixed'\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n      <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"x-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"xAxes0.axisTitle\"\n        value=${ifDefined(configurer.xAxes0.axisTitle)}\n      />\n\n      ${this._hasBarSeries(configurer.value)\n        ? html`\n            <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n            <input\n              id=\"bar-spacing\"\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.barSpacing\"\n              value=${ifDefined(configurer.xAxes0.barSpacing)}\n            />\n            <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n            <input\n              id=\"tick-spacing\"\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.categorySpacing\"\n              value=${ifDefined(configurer.xAxes0.categorySpacing)}\n            />\n          `\n        : html``}\n\n      <input\n        id=\"x-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"axis-min-auto\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"axis-max-auto\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              value=${ifDefined(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              value=${ifDefined(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              value=${ifDefined(configurer.yAxes1?.axisTitle)}\n            />\n\n            <input\n              id=\"y-axes1-ticks-auto-min\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1?.ticks?.autoMin}\n            />\n            <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1-ticks-auto-max\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1?.ticks?.autoMax}\n            />\n            <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1?.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1?.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y-2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options?.y2ndGridLine}\n            />\n            <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1-ticks-display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1?.ticks?.display}\n            />\n            <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  _hasBarSeries(config: any) {\n    var hasBarSeries = false\n    hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n    return hasBarSeries\n  }\n}\n"]}

package/dist/src/editors/ox-input-chart-pie.d.ts

@@ -0,0 +1,11 @@
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-multiple-colors.js';
+import { InputChartAbstract } from './input-chart-abstract';
+export default class OxInputChartPie extends InputChartAbstract {
+    static styles: import("lit").CSSResult[];
+    getChartType(): 'bar' | 'line' | 'pie' | 'radar';
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    getDefaultChartConfig(type: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed', datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
+    getDefaultDatasets(): OperatoChart.Dataset[];
+    getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset;
+}

package/dist/src/editors/ox-input-chart-pie.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-multiple-colors.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { InputChartAbstract } from './input-chart-abstract';
+let OxInputChartPie = class OxInputChartPie extends InputChartAbstract {
+    static { this.styles = InputChartAbstract.styles; }
+    getChartType() {
+        return 'pie';
+    }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="series-data-key" type="text" value-key="dataKey" .value=${configurer.series.dataKey || ''} />
+
+      <label for="series-colors"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
+      <ox-input-multiple-colors
+        id="series-colors"
+        value-key="color"
+        .value=${configurer.color || []}
+      ></ox-input-multiple-colors>
+
+      ${this.displayValueTemplate()}
+
+      <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
+
+      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="series-data-key" type="text" value-key="labelDataKey" .value=${configurer.labelDataKey || ''} />
+    `;
+    }
+    getDefaultChartConfig(type, datasets) {
+        return {
+            type: 'pie',
+            data: {
+                labels: [],
+                datasets: this.getDefaultDatasets(),
+                labelDataKey: 'label'
+            },
+            options: {
+                theme: 'dark',
+                legend: {
+                    display: true,
+                    position: 'top'
+                }
+            }
+        };
+    }
+    getDefaultDatasets() {
+        return [this.getDefaultDataset('pie')];
+    }
+    getDefaultDataset(seriesType) {
+        return {
+            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+            borderWidth: 0,
+            dataKey: 'value'
+        };
+    }
+};
+OxInputChartPie = __decorate([
+    customElement('ox-input-chart-pie')
+], OxInputChartPie);
+export default OxInputChartPie;
+//# sourceMappingURL=ox-input-chart-pie.js.map

package/dist/src/editors/ox-input-chart-pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-pie.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-pie.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG5C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,kBAAkB;aACtD,WAAM,GAAG,kBAAkB,CAAC,MAAM,AAA5B,CAA4B;IAEzC,YAAY;QACV,OAAO,KAAK,CAAA;IACd,CAAC;IAED,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;;2EAI4D,UAAU,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE;;;;;;iBAMzF,UAAU,CAAC,KAAK,IAAI,EAAE;;;QAG/B,IAAI,CAAC,oBAAoB,EAAE;;;;;gFAK6C,UAAU,CAAC,YAAY,IAAI,EAAE;KACxG,CAAA;IACH,CAAC;IAED,qBAAqB,CACnB,IAAkE,EAClE,QAAiC;QAEjC,OAAO;YACL,IAAI,EAAE,KAAK;YACX,IAAI,EAAE;gBACJ,MAAM,EAAE,EAAE;gBACV,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBACnC,YAAY,EAAE,OAAO;aACtB;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE;oBACN,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,KAAK;iBAChB;aACF;SACF,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxC,CAAC;IAED,iBAAiB,CAAC,UAA8D;QAC9E,OAAO;YACL,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;YAClD,WAAW,EAAE,CAAC;YACd,OAAO,EAAE,OAAO;SACjB,CAAA;IACH,CAAC;;AA/DkB,eAAe;IADnC,aAAa,CAAC,oBAAoB,CAAC;GACf,eAAe,CAgEnC;eAhEoB,eAAe","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-multiple-colors.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\n@customElement('ox-input-chart-pie')\nexport default class OxInputChartPie extends InputChartAbstract {\n  static styles = InputChartAbstract.styles\n\n  getChartType(): 'bar' | 'line' | 'pie' | 'radar' {\n    return 'pie'\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"series-data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.series.dataKey || ''} />\n\n      <label for=\"series-colors\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n      <ox-input-multiple-colors\n        id=\"series-colors\"\n        value-key=\"color\"\n        .value=${configurer.color || []}\n      ></ox-input-multiple-colors>\n\n      ${this.displayValueTemplate()}\n\n      <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n      <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n    `\n  }\n\n  getDefaultChartConfig(\n    type: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed',\n    datasets?: OperatoChart.Dataset[]\n  ): OperatoChart.ChartConfig {\n    return {\n      type: 'pie',\n      data: {\n        labels: [],\n        datasets: this.getDefaultDatasets(),\n        labelDataKey: 'label'\n      },\n      options: {\n        theme: 'dark',\n        legend: {\n          display: true,\n          position: 'top'\n        }\n      }\n    }\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [this.getDefaultDataset('pie')]\n  }\n\n  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {\n    return {\n      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],\n      borderWidth: 0,\n      dataKey: 'value'\n    }\n  }\n}\n"]}

package/dist/src/editors/ox-input-chart-radar.d.ts

@@ -0,0 +1,8 @@
+import '@operato/i18n/ox-i18n.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+export default class OxInputChartRadar extends InputChartMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    getChartType(): 'bar' | 'line' | 'pie' | 'radar';
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    getDefaultDatasets(): OperatoChart.Dataset[];
+}