@operato/chart 7.1.31 → 7.1.33

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
-  }
-}

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

@@ -1,72 +0,0 @@
-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 './ox-input-chart-timeseries'
-
-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) {
-    switch (value.type) {
-      case 'line':
-      case 'bar':
-        return html` <ox-input-chart-mixed .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-mixed> `
-      case 'horizontalBar':
-        return html` <ox-input-chart-hbar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-hbar> `
-      case 'pie':
-      case 'doughnut':
-      case 'polarArea':
-        return html` <ox-input-chart-pie .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-pie> `
-      case 'radar':
-        return html` <ox-input-chart-radar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-radar> `
-      case 'timeseries':
-        return html`
-          <ox-input-chart-timeseries .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-timeseries>
-        `
-    }
-
-    return html``
-  }
-}