@operato/scene-chartjs 7.0.1 → 7.0.2

package/src/editors/property-editor-chartjs-hbar.ts

@@ -1,157 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/elevated-button.js'
-import '@material/web/tabs/tabs.js'
-
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'
-
-@customElement('property-editor-chartjs-hbar')
-export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMultiSeriesAbstract {
-  static styles = [...PropertyEditorChartJSMultiSeriesAbstract.styles]
-
-  editorTemplate() {
-    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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
-
-      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
-
-      <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
-      <input
-        type="number"
-        min="0"
-        max="1"
-        step="0.1"
-        value-key="yAxes0.barSpacing"
-        .value=${this.yAxes0.barSpacing || NaN}
-      />
-      <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
-      <input
-        type="number"
-        min="0"
-        max="1"
-        step="0.1"
-        value-key="yAxes0.categorySpacing"
-        .value=${this.yAxes0.categorySpacing || NaN}
-      />
-
-      <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
-      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
-      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
-
-      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input type="text" value-key="xAxes0.title" .value=${this.xAxes0.axisTitle || ''} />
-
-      <input type="checkbox" value-key="xAxes0.ticks.autoMin" .checked=${this.xAxes0.ticks.autoMin} />
-      <label> <ox-i18n msgid="label.axis-min-auto">Axis Min Auto</ox-i18n> </label>
-
-      <input type="checkbox" value-key="xAxes0.ticks.autoMax" .checked=${this.xAxes0.ticks.autoMax} />
-      <label> <ox-i18n msgid="label.axis-max-auto">Axis Max Auto</ox-i18n> </label>
-
-      ${!this.xAxes0.ticks.autoMin
-        ? html`
-            <label> <ox-i18n msgid="label.axis-min">Axis Min</ox-i18n> </label>
-            <input type="number" value-key="xAxes0.ticks.min" .value=${this.xAxes0.ticks.min} />
-          `
-        : html``}
-      ${!this.xAxes0.ticks.autoMax
-        ? html`
-            <label> <ox-i18n msgid="label.axis-max">Axis Max</ox-i18n> </label>
-            <input type="number" value-key="xAxes0.ticks.max" .value=${this.xAxes0.ticks.max} />
-          `
-        : html``}
-
-      <label> <ox-i18n msgid="label.axis-step-size">Axis Step Size</ox-i18n> </label>
-      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
-
-      <input type="checkbox" .checked=${this.value.options.yGridLine} />
-      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
-      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-    `
-  }
-
-  multiSeriesTabTemplate() {
-    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) => {
-              this.currentSeriesIndex = (e.target as any).activeTabIndex
-            }}
-            active-tab-index=${this.currentSeriesIndex}
-            fit-container
-          >
-            ${this.datasets.map(
-              (dataset: any, index: number) => html`
-                <div
-                  data-series=${index + 1}
-                  data-tab-index=${index}
-                  tab
-                  ?selected=${index == this.currentSeriesIndex}
-                  @click=${(e: Event) => {
-                    const target = e.target as HTMLDivElement
-                    this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'))
-                  }}
-                >
-                  ${index + 1}
-                  ${!this.datasets || (this.datasets.length != 1 && this.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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-          <input type="text" value-key="dataKey" .value=${this.dataKey} />
-          <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
-          <input type="text" value-key="series.label" .value=${this.series.label} />
-          <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
-          <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
-          <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
-          <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
-
-          ${this.displayValueTemplate()}
-        </div>
-      </div>
-    `
-  }
-}

package/src/editors/property-editor-chartjs-mixed.ts

@@ -1,199 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { Properties } from '@hatiolab/things-scene'
-
-import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'
-
-@customElement('property-editor-chartjs-mixed')
-export default class PropertyEditorChartJSMixed extends PropertyEditorChartJSMultiSeriesAbstract {
-  static styles = PropertyEditorChartJSMultiSeriesAbstract.styles
-
-  constructor() {
-    super()
-
-    this.value = {
-      options: {
-        legend: {},
-        scales: {
-          xAxes: [
-            {
-              ticks: {}
-            }
-          ],
-          yAxes: [
-            {
-              ticks: {}
-            }
-          ]
-        }
-      },
-      data: {
-        datasets: []
-      }
-    }
-  }
-
-  get xAxes0() {
-    return this.scales.xAxes[0]
-  }
-
-  set xAxes0(xAxes0) {
-    this.scales.xAxes[0] = xAxes0
-  }
-
-  get yAxes0() {
-    return this.scales.yAxes[0]
-  }
-
-  set yAxes0(yAxes0) {
-    this.scales.yAxes[0] = yAxes0
-  }
-
-  get yAxes1() {
-    return this.scales.yAxes[1]
-  }
-
-  set yAxes1(yAxes1) {
-    this.scales.yAxes[1] = yAxes1
-  }
-
-  get multiAxis() {
-    return this.value.options.multiAxis
-  }
-
-  set multiAxis(multiAxis) {
-    this.value.options.multiAxis = multiAxis
-  }
-
-  editorTemplate(props: Properties) {
-    return html`
-      <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
-      <label> <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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
-
-      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
-
-      ${this._hasBarSeries(this.value)
-        ? html`
-            <label><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
-            <input
-              type="number"
-              min="0"
-              max="1"
-              step="0.1"
-              value-key="xAxes0.barSpacing"
-              .value=${this.xAxes0.barSpacing || NaN}
-            />
-            <label><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
-            <input
-              type="number"
-              min="0"
-              max="1"
-              step="0.1"
-              value-key="xAxes0.categorySpacing"
-              .value=${this.xAxes0.categorySpacing || NaN}
-            />
-          `
-        : html``}
-
-      <input type="checkbox" value-key="value.options.xGridLine" .checked=${props.value.options.xGridLine} />
-      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
-      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
-
-      <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
-
-      <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
-      <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-      <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
-      <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-      ${!this.yAxes0.ticks.autoMin
-        ? html`
-            <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-            <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
-          `
-        : html``}
-      ${!this.yAxes0.ticks.autoMax
-        ? html`
-            <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-            <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
-          `
-        : html``}
-
-      <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
-      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
-
-      <input type="checkbox" value-key="value.options.yGridLine" .checked=${props.value.options.yGridLine} />
-      <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
-      <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-
-      ${props.value.options.multiAxis
-        ? html`
-            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
-
-            <label> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-            <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
-
-            <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
-            <label> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-            <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
-            <label> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
-
-            ${!this.yAxes1.ticks.autoMin
-              ? html`
-                  <label> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
-                  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
-                `
-              : html``}
-            ${!this.yAxes1.ticks.autoMax
-              ? html`
-                  <label> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
-                  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
-                `
-              : html``}
-
-            <label> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
-            <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
-
-            <input
-              type="checkbox"
-              value-key="value.options.y2ndGridLine"
-              .checked=${props.value.options.y2ndGridLine}
-            />
-            <label> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-            <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
-            <label> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
-          `
-        : html``}
-    `
-  }
-
-  _hasBarSeries(chart: any) {
-    var hasBarSeries = false
-    hasBarSeries = chart.data.datasets.some((s: any) => s.type == 'bar')
-
-    return hasBarSeries
-  }
-}