@operato/chart 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,241 +0,0 @@
-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 { InputChartAbstract } from './input-chart-abstract'
-import './templates/series'
-
-@customElement('ox-input-chart-mixed')
-export class OxInputChartMixed extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  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>
-      <ox-chart-series
-        .configurer=${configurer}
-        .chartType=${this.chartType}
-        value-key="datasets"
-        fullwidth
-      ></ox-chart-series>
-
-      <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

@@ -1,69 +0,0 @@
-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'
-import './templates/display-value'
-
-@customElement('ox-input-chart-pie')
-export default class OxInputChartPie extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  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>
-
-      <label></label>
-      <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
-
-      <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: OperatoChart.ChartType, 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: OperatoChart.SeriesType): OperatoChart.Dataset {
-    return {
-      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-      borderWidth: 0,
-      dataKey: 'value'
-    }
-  }
-}

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

@@ -1,56 +0,0 @@
-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 { InputChartAbstract } from './input-chart-abstract'
-
-import './templates/series'
-
-@customElement('ox-input-chart-radar')
-export default class OxInputChartRadar extends InputChartAbstract {
-  static styles = InputChartAbstract.styles
-
-  subTemplate() {
-    const configurer = this.configurer
-
-    return html`
-      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-      <ox-chart-series
-        .configurer=${configurer}
-        .chartType=${this.chartType}
-        value-key="datasets"
-        fullwidth
-      ></ox-chart-series>
-
-      <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-input-chart-timeseries.ts

@@ -1,279 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { html, css } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { InputChartAbstract } from './input-chart-abstract'
-
-import './templates/annotations'
-import './templates/series'
-
-@customElement('ox-input-chart-timeseries')
-export class OxInputChartTimeseries extends InputChartAbstract {
-  static styles = [
-    ...InputChartAbstract.styles,
-    css`
-      legend[collapsable] {
-        box-sizing: border-box;
-        width: 100%;
-      }
-
-      legend[collapsable] md-icon {
-        float: right;
-        font-size: medium;
-        margin: 0;
-      }
-
-      [collapsed] {
-        display: none;
-      }
-    `
-  ]
-
-  @state() annotationExpanded = false
-
-  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>
-      <ox-chart-series
-        .configurer=${configurer}
-        .chartType=${this.chartType}
-        value-key="datasets"
-        fullwidth
-      ></ox-chart-series>
-
-      <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``}
-
-      <legend collapsable>
-        <ox-i18n msgid="label.chart-annotation">Annotations</ox-i18n>
-        <md-icon
-          @tap=${() => {
-            this.annotationExpanded = !this.annotationExpanded
-          }}
-          >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon
-        >
-      </legend>
-      <ox-chart-annotations
-        .configurer=${configurer}
-        ?collapsed=${!this.annotationExpanded}
-        value-key="annotations"
-        fullwidth
-      ></ox-chart-annotations>
-    `
-  }
-
-  _hasBarSeries(config: any) {
-    var hasBarSeries = false
-    hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')
-
-    return hasBarSeries
-  }
-}