@operato/chart 2.0.0-beta.25

package/src/editors/ox-input-chart-hbar.ts

@@ -0,0 +1,226 @@
+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'
+
+@customElement('ox-input-chart-hbar')
+export class OxInputChartHBar extends InputChartMultiSeriesAbstract {
+  static styles = [...InputChartMultiSeriesAbstract.styles]
+
+  getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed' {
+    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: Event) => {
+              this._onTabScrollNavLeft(e)
+            }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="tabs"
+            @change=${(e: Event) => {
+              configurer.currentSeriesIndex = (e.target as any).activeTabIndex
+            }}
+            active-tab-index=${configurer.currentSeriesIndex}
+            fit-container
+          >
+            ${configurer.datasets.map(
+              (dataset: any, index: number) => html`
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == configurer.currentSeriesIndex}
+                  @click=${(e: Event) => {
+                    const target = e.target as HTMLDivElement
+                    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: Event) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
+                    : html``}
+                </div>
+              `
+            )}
+          </div>
+          <md-icon
+            id="tab-nav-right-button"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight(e)
+            }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div id="add-series-button-container">
+          <md-icon id="add-series-button" @tap=${(e: Event) => 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(): OperatoChart.Dataset[] {
+    return [this.getDefaultDataset('horizontalBar')]
+  }
+}

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

@@ -0,0 +1,240 @@
+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'
+
+@customElement('ox-input-chart-mixed')
+export class OxInputChartMixed extends InputChartMultiSeriesAbstract {
+  static styles = InputChartMultiSeriesAbstract.styles
+
+  getChartType(): 'bar' | 'line' | 'pie' | 'radar' | 'mixed' {
+    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: any) {
+    var hasBarSeries = false
+    hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')
+
+    return hasBarSeries
+  }
+}

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

@@ -0,0 +1,75 @@
+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 { ifDefined } from 'lit/directives/if-defined.js'
+
+import { InputChartAbstract } from './input-chart-abstract'
+
+@customElement('ox-input-chart-pie')
+export default class OxInputChartPie extends InputChartAbstract {
+  static styles = InputChartAbstract.styles
+
+  getChartType(): 'bar' | 'line' | 'pie' | 'radar' {
+    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: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed',
+    datasets?: OperatoChart.Dataset[]
+  ): OperatoChart.ChartConfig {
+    return {
+      type: 'pie',
+      data: {
+        labels: [],
+        datasets: this.getDefaultDatasets(),
+        labelDataKey: 'label'
+      },
+      options: {
+        theme: 'dark',
+        legend: {
+          display: true,
+          position: 'top'
+        }
+      }
+    }
+  }
+
+  getDefaultDatasets(): OperatoChart.Dataset[] {
+    return [this.getDefaultDataset('pie')]
+  }
+
+  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {
+    return {
+      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+      borderWidth: 0,
+      dataKey: 'value'
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+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'
+
+@customElement('ox-input-chart-radar')
+export default class OxInputChartRadar extends InputChartMultiSeriesAbstract {
+  static styles = InputChartMultiSeriesAbstract.styles
+
+  getChartType(): 'bar' | 'line' | 'pie' | 'radar' {
+    return 'radar'
+  }
+
+  subTemplate() {
+    const configurer = this.configurer
+
+    return html`
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <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=${ifDefined(configurer.labelDataKey)} />
+    `
+  }
+
+  getDefaultDatasets(): OperatoChart.Dataset[] {
+    return [
+      {
+        label: 'Radar Series 1',
+        data: [10, 20, 30],
+        backgroundColor: 'rgba(255, 99, 132, 0.2)',
+        borderColor: 'rgba(255, 99, 132, 1)',
+        borderWidth: 1,
+        pointStyle: 'circle',
+        pointRadius: 3
+      },
+      {
+        label: 'Radar Series 2',
+        data: [15, 25, 35],
+        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+        borderColor: 'rgba(54, 162, 235, 1)',
+        borderWidth: 1,
+        pointStyle: 'circle',
+        pointRadius: 3
+      }
+    ]
+  }
+}

package/src/editors/ox-property-editor-chart.ts

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

package/src/globat.d.ts

@@ -0,0 +1 @@
+declare const SciChart: any