@operato/chart 7.0.12 → 7.0.14

package/src/editors/input-chart-multi-series-abstract.ts

@@ -1,430 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-import { query } from 'lit/decorators.js'
-
-import { MdIcon } from '@material/web/icon/icon.js'
-
-import { InputChartAbstract } from './input-chart-abstract'
-
-export class InputChartMultiSeriesAbstract extends InputChartAbstract {
-  static styles = [...InputChartAbstract.styles]
-
-  @query('#tabs') tabs!: HTMLElement
-  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon
-  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon
-
-  get tabContainer(): HTMLElement | null | undefined {
-    return this.tabs
-  }
-
-  firstUpdated() {
-    this.tabContainer?.addEventListener('scroll', e => {
-      this._onTabScroll(e)
-    })
-  }
-
-  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>
-
-      ${this.multiSeriesTabTemplate()}
-
-      <legend><ox-i18n msgid="label.x-axes">X 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=${configurer.labelDataKey || ''} />
-
-      <label for="axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
-      <input id="axis-title" type="text" value-key="xAxes0.axisTitle" .value=${configurer.xAxes0.axisTitle || ''} />
-
-      <label for="x-axes0-thickness"> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
-      <input
-        id="x-axes0-thickness"
-        type="number"
-        value-key="xAxes0.barPercentage"
-        .value=${String(configurer.xAxes0.barPercentage || 0)}
-      />
-
-      <input
-        for="grid-line"
-        type="checkbox"
-        value-key="value.options.xGridLine"
-        ?checked=${configurer.config.options?.xGridLine}
-      />
-      <label id="grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
-
-      <input
-        for="x-axes0-ticks-display"
-        type="checkbox"
-        value-key="xAxes0.ticks.display"
-        ?checked=${configurer.xAxes0.ticks?.display}
-      />
-      <label id="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="y-axes0-ticks-automin"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMin"
-        ?checked=${configurer.yAxes0.ticks?.autoMin}
-      />
-      <label for="y-axes0-ticks-automin"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
-
-      <input
-        id="y-axes0-ticks-automax"
-        type="checkbox"
-        value-key="yAxes0.ticks.autoMax"
-        ?checked=${configurer.yAxes0.ticks?.autoMax}
-      />
-      <label for="y-axes0-ticks-automax"> <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=${String(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=${String(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=${String(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=${configurer.yAxes1.axisTitle || ''}
-            />
-
-            <input
-              id="axis-min-auto"
-              type="checkbox"
-              value-key="yAxes1.ticks.autoMin"
-              ?checked=${configurer.yAxes1.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="yAxes1.ticks.autoMax"
-              ?checked=${configurer.yAxes1.ticks?.autoMax}
-            />
-            <label for="axis-max-auto"> <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=${String(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=${String(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=${String(configurer.yAxes1.ticks?.stepSize)}
-            />
-
-            <input
-              id="y2nd-grid-line"
-              type="checkbox"
-              value-key="value.options.y2ndGridLine"
-              ?checked=${configurer.config.options.y2ndGridLine}
-            />
-            <label for="y2nd-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``}
-    `
-  }
-
-  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(index)}> 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 || ''} />
-
-          ${this.chartType == 'line' || this.chartType == 'bar'
-            ? html`
-                <label for="series-type"> <ox-i18n msgid="label.series-type">type</ox-i18n> </label>
-                <select
-                  id="series-type"
-                  class="select-content"
-                  value-key="series.type"
-                  .value=${configurer.series.type || ''}
-                >
-                  <option value="bar" selected>bar</option>
-                  <option value="line">line</option>
-                </select>
-              `
-            : html``}
-
-          <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 || ''} />
-
-          ${configurer.series.type == 'line'
-            ? html`
-                <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
-                <select
-                  id="series-line-tension"
-                  class="select-content"
-                  value-key="series.lineTension"
-                  .value=${String(configurer.series.lineTension || 0)}
-                >
-                  <option value="0.4">smooth</option>
-                  <option value="0">angled</option>
-                </select>
-              `
-            : html``}
-          ${configurer.series.type == 'line'
-            ? html`
-                <label for="series-border-width"> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
-                <input
-                  id="series-border-width"
-                  type="number"
-                  value-key="series.borderWidth"
-                  .value=${String(configurer.series.borderWidth || 0)}
-                />
-              `
-            : html``}
-
-          <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}></ox-input-color>
-
-          ${configurer.series.type == 'line'
-            ? html`
-                <label for="series-point-style"> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
-                <select
-                  id="series-point-style"
-                  class="select-content"
-                  value-key="series.pointStyle"
-                  .value=${configurer.series.pointStyle || ''}
-                >
-                  <option value="">&nbsp;</option>
-                  <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 for="series-point-radius"> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
-                <input
-                  id="series-point-radius"
-                  type="number"
-                  value-key="series.pointRadius"
-                  .value=${String(configurer.series.pointRadius || 0)}
-                />
-              `
-            : html``} <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 || ''} />
-          ${configurer.series.type == 'line'
-            ? html`
-                <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
-                <label for="seires-fill"> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
-              `
-            : html``}
-          ${configurer.multiAxis
-            ? html`
-                <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
-                <select
-                  id="series-y-axis-id"
-                  class="select-content"
-                  value-key="series.yAxisID"
-                  .value=${configurer.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'
-  }
-}