@operato/scene-chartjs 7.0.1 → 7.0.2

package/src/editors/property-editor-chartjs-multi-series-abstract.ts

@@ -1,382 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html } from 'lit'
-import { query } from 'lit/decorators.js'
-
-import { Properties } from '@hatiolab/things-scene'
-import { MdIcon } from '@material/web/icon/icon.js'
-
-import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
-
-export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
-  static styles = [
-    ...PropertyEditorChartJSAbstract.styles,
-    css`
-      md-tabs {
-        background-color: rgb(204, 204, 204);
-      }
-      input[type='text'],
-      input[type='number'] {
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-  ]
-
-  constructor() {
-    super()
-
-    this.value = {
-      options: {
-        legend: {},
-        scales: {
-          xAxes: [
-            {
-              ticks: {}
-            }
-          ],
-          yAxes: [
-            {
-              ticks: {}
-            }
-          ]
-        }
-      },
-      data: {
-        datasets: []
-      }
-    }
-  }
-
-  @query('#tabs') tabs!: HTMLElement
-  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon
-  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon
-
-  get color() {
-    var oldVersionColor = this.series.backgroundColor
-    if (this.series.type == 'line') oldVersionColor = this.series.borderColor
-    if (this.series.type == 'radar') oldVersionColor = this.series.borderColor
-    return this.series.color || oldVersionColor
-  }
-
-  set color(color) {
-    this.series.color = color
-    delete this.series.backgroundColor
-    delete this.series.borderColor
-  }
-
-  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
-  }
-
-  get tabContainer(): HTMLElement | null | undefined {
-    return this.tabs
-  }
-
-  firstUpdated() {
-    super.firstUpdated()
-
-    this.tabContainer?.addEventListener('scroll', e => {
-      this._onTabScroll(e)
-    })
-  }
-
-  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>
-
-      ${this.multiSeriesTabTemplate()}
-
-      <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 || ''} />
-
-      <label> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
-      <input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
-
-      <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.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=${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>
-
-      ${this.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=${this.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``}
-    `
-  }
-
-  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} />
-
-          ${this.value.type == 'bar'
-            ? html`
-                <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
-                <select class="select-content" value-key="series.type" .value=${this.series.type}>
-                  <option value="bar" selected>bar</option>
-                  <option value="line">line</option>
-                </select>
-              `
-            : html``}
-
-          <label> <ox-i18n msgid="label.label">label</ox-i18n> </label>
-          <input type="text" value-key="series.label" .value=${this.series.label} />
-
-          ${this.series.type == 'line'
-            ? html`
-                <label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
-                <select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
-                  <option value="0.4">smooth</option>
-                  <option value="0">angled</option>
-                </select>
-              `
-            : html``}
-          ${this.series.type == 'line'
-            ? html`
-                <label> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
-                <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
-              `
-            : html``}
-
-          <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
-          <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
-
-          ${this.series.type == 'line'
-            ? html`
-                <label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
-                <select class="select-content" value-key="series.pointStyle" .value=${this.series.pointStyle}>
-                  <option value="circle">⚬</option>
-                  <option value="triangle">▵</option>
-                  <option value="rect">□</option>
-                  <option value="rectRot">◇</option>
-                  <option value="cross">+</option>
-                  <option value="crossRot">⨉</option>
-                  <option value="star">✱</option>
-                  <option value="line">―</option>
-                  <option value="dash">┄</option>
-                </select>
-
-                <label> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
-                <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
-              `
-            : html``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
-          <input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type == 'line'
-            ? html`
-                <input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
-                <label> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
-              `
-            : html``}
-          ${this.multiAxis
-            ? html`
-                <label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
-                <select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
-                  <option value="left">left</option>
-                  <option value="right">right</option>
-                </select>
-              `
-            : html``}
-          ${this.displayValueTemplate()}
-        </div>
-      </div>
-    `
-  }
-
-  _onTabScroll(e: Event) {
-    if (!this.tabContainer) {
-      return
-    }
-
-    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
-      this.tabNavLeftButton.setAttribute('disabled', '')
-      this.tabNavRightButton.setAttribute('disabled', '')
-    }
-    // left-end
-    else if (this.tabContainer.scrollLeft == 0) {
-      this.tabNavLeftButton.setAttribute('disabled', '')
-      this.tabNavRightButton.removeAttribute('disabled')
-    }
-    // right-end
-    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
-      this.tabNavLeftButton.removeAttribute('disabled')
-      this.tabNavRightButton.setAttribute('disabled', '')
-    } else {
-      this.tabNavLeftButton.removeAttribute('disabled')
-      this.tabNavRightButton.removeAttribute('disabled')
-    }
-  }
-
-  _onTabScrollNavLeft(e: Event) {
-    if (!this.tabContainer) {
-      return
-    }
-
-    this.tabContainer.style.scrollBehavior = 'smooth'
-    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth
-    this.tabContainer.style.scrollBehavior = 'auto'
-  }
-
-  _onTabScrollNavRight(e: Event) {
-    if (!this.tabContainer) {
-      return
-    }
-
-    this.tabContainer.style.scrollBehavior = 'smooth'
-    this.tabContainer.scrollLeft += this.tabContainer.clientWidth
-    this.tabContainer.style.scrollBehavior = 'auto'
-  }
-}

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

@@ -1,86 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { Properties } from '@hatiolab/things-scene'
-import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-@customElement('property-editor-chartjs-pie')
-export default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
-  static styles = PropertyEditorChartJSAbstract.styles
-
-  constructor() {
-    super()
-
-    this.value = {
-      options: {
-        legend: {}
-      },
-      data: {
-        datasets: []
-      }
-    }
-
-    this.currentSeriesIndex = 0
-  }
-
-  get valueFormat() {
-    return this.series.valueFormat
-  }
-
-  set valueFormat(valueFormat) {
-    this.series.valueFormat = valueFormat
-  }
-
-  get valuePrefix() {
-    return this.series.valuePrefix
-  }
-
-  set valuePrefix(valuePrefix) {
-    this.series.valuePrefix = valuePrefix
-  }
-
-  get valueSuffix() {
-    return this.series.valueSuffix
-  }
-
-  set valueSuffix(valueSuffix) {
-    this.series.valueSuffix = valueSuffix
-  }
-
-  get color() {
-    return this.series.color || this.series.backgroundColor
-  }
-
-  set color(color) {
-    this.series.color = color
-    delete this.series.backgroundColor
-  }
-
-  get displayValue() {
-    return this.series.displayValue
-  }
-
-  set displayValue(displayValue) {
-    this.series.displayValue = displayValue
-  }
-
-  editorTemplate(props: Properties) {
-    return html`
-      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-
-      <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input type="text" value-key="dataKey" .value=${this.series.dataKey} />
-
-      <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
-      <ox-input-multiple-colors value-key="color" .value=${this.color}></ox-input-multiple-colors>
-
-      ${this.displayValueTemplate()}
-
-      <legend><ox-i18n msgid="label.axes">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} />
-    `
-  }
-}

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

@@ -1,39 +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-radar')
-export default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
-  static styles = PropertyEditorChartJSMultiSeriesAbstract.styles
-
-  constructor() {
-    super()
-
-    this.value = {
-      options: {
-        legend: {}
-      },
-      data: {
-        datasets: []
-      }
-    }
-  }
-
-  editorTemplate(props: Properties) {
-    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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
-    `
-  }
-}

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

@@ -1,167 +0,0 @@
-import { css } from 'lit'
-
-export const PropertyEditorChartJSStyles = css`
-  :host {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-  }
-
-  :host > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  :host > label {
-    box-sizing: border-box;
-    grid-column: span 3;
-  }
-
-  :host > legend {
-    box-sizing: border-box;
-    grid-column: 1 / -1;
-    color: var(--md-sys-color-on-secondary-container, #e46c2e);
-    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
-    text-transform: capitalize;
-  }
-
-  #series-properties-container {
-    display: grid;
-    grid-template-columns: 1fr 25px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  #series-properties-container > [tab-content] {
-    grid-column: span 2;
-  }
-
-  #tab-header {
-    display: grid;
-    grid-template-columns: 25px 1fr 25px;
-    grid-gap: 5px;
-    overflow: hidden;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-bottom: 0;
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    padding-top: 3px;
-    align-items: center;
-  }
-
-  #tab-header > div {
-    height: 25px;
-  }
-
-  #tab-header md-icon[disabled] {
-    opacity: 0.1;
-  }
-
-  #tabs {
-    display: flex;
-    overflow: hidden;
-  }
-
-  #tab-header #tabs [tab] md-icon {
-    margin-left: 5px;
-    padding: 2px;
-    color: var(--md-sys-color-on-surface);
-
-    --md-icon-size: 12px;
-  }
-
-  #add-series-button-container {
-    height: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    padding-top: 3px;
-    display: flex;
-    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
-  }
-
-  #add-series-button {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: var(--md-sys-color-on-secondary-container);
-  }
-
-  .tab-content {
-    grid-column: 1 / -1;
-
-    background-color: rgba(255, 255, 255, 0.5);
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-width: 0 1px 1px 1px;
-    padding: 5px;
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-  }
-
-  .tab-content > * {
-    box-sizing: border-box;
-    grid-column: span 7;
-  }
-
-  label,
-  .tab-content > label {
-    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;
-  }
-
-  input,
-  select {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: var(--spacing-small);
-  }
-
-  input[type='checkbox'],
-  .tab-content > input[type='checkbox'] {
-    grid-column: span 4;
-    justify-self: end;
-    align-self: center;
-  }
-
-  input[type='checkbox'] + label,
-  .tab-content > input[type='checkbox'] + label {
-    grid-column: span 6;
-
-    text-align: left;
-  }
-
-  [fullwidth] {
-    grid-column: 1 / -1;
-    margin: 0;
-    border: 0;
-  }
-
-  div[tab] {
-    display: flex;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-width: 1px 1px 0 1px;
-    padding: 0 5px;
-    color: var(--md-sys-color-on-surface);
-    box-sizing: border-box;
-    min-width: 45px;
-  }
-
-  div[tab][disabled] {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  div[tab]:last-child {
-    border-width: 0;
-  }
-
-  div[tab][selected] {
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-  }
-`