@operato/chart 7.0.37 → 7.0.39

package/src/editors/templates/series.ts

@@ -0,0 +1,304 @@
+import '@material/web/icon/icon.js'
+
+import { LitElement, html, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+import { MdIcon } from '@material/web/icon/icon.js'
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
+
+import { Configurer } from '../configurer'
+import './display-value'
+
+@customElement('ox-chart-series')
+export class MultipleSeriesTemplate extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  @property({ type: Object }) configurer!: Configurer
+  @property({ type: String }) chartType?: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea'
+
+  @query('#series-tabs') seriesTabs!: HTMLElement
+  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon
+  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {
+      this.requestUpdate()
+    }
+  }
+
+  render() {
+    return keyed(
+      this.configurer.currentSeriesIndex,
+      html`
+        <div id="series-properties-container" fullwidth>
+          <div id="series-tab-header" @wheel=${this._onWheelScroll}>
+            <md-icon id="series-tab-nav-left-button" @click=${this._scrollLeft}>chevron_left</md-icon>
+            <div id="series-tabs" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>
+              ${this._renderTabs()}
+            </div>
+            <md-icon id="series-tab-nav-right-button" @click=${this._scrollRight}>chevron_right</md-icon>
+          </div>
+          <div id="add-series-button-container">
+            <md-icon id="add-series-button" @click=${this._addSeries}>add</md-icon>
+          </div>
+          ${this._renderSeriesForm()}
+        </div>
+      `
+    )
+  }
+
+  private _renderTabs() {
+    return this.configurer.datasets.map(
+      (dataset: OperatoChart.Dataset, index: number) => html`
+        <div
+          data-series=${index + 1}
+          data-tab-index=${index}
+          tab
+          ?selected=${index === this.configurer.currentSeriesIndex}
+          @click=${() => this._selectTab(index)}
+        >
+          ${index + 1}
+          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index
+            ? html`<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`
+            : html``}
+        </div>
+      `
+    )
+  }
+
+  private _renderSeriesForm() {
+    const configurer = this.configurer
+    const chartType = this.chartType
+
+    return html`
+      <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 || ''} />
+
+        ${chartType === 'line' || 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="series-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
+              <label for="series-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
+            `
+          : html``}
+        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'
+          ? 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``}
+
+        <label></label>
+        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
+      </div>
+    `
+  }
+
+  _getSeriesModel({
+    chartType,
+    datasetsLength,
+    lastSeriesColor
+  }: {
+    chartType: string
+    datasetsLength: number
+    lastSeriesColor: TinyColor
+  }) {
+    const addSeriesOption: any = {
+      label: `series ${datasetsLength + 1}`,
+      data: [],
+      borderWidth: 1,
+      dataKey: '',
+      yAxisID: 'left',
+      color: randomColor({
+        hue: lastSeriesColor.toHsv().h
+      }).toRgbString(),
+      stack: ''
+    }
+
+    addSeriesOption.type = addSeriesOption.chartType = chartType
+    return addSeriesOption
+  }
+
+  private _selectTab(index: number) {
+    this.configurer.setCurrentSeriesIndex(index)
+    this.requestUpdate()
+  }
+
+  private _removeSeries(index: number) {
+    this.configurer.removeSeries(index)
+    this.requestUpdate()
+  }
+
+  private _addSeries() {
+    const configurer = this.configurer
+
+    if (!configurer.config.data.datasets) {
+      return
+    }
+
+    const lastSeriesIndex = configurer.config.data.datasets.length
+    const chartType = configurer.series.type || configurer.config.type
+    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor
+    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)
+
+    const seriesModel = this._getSeriesModel({
+      chartType: chartType!,
+      datasetsLength: lastSeriesIndex,
+      lastSeriesColor
+    })
+
+    this.configurer.addSeries(seriesModel)
+    this.requestUpdate()
+  }
+
+  private _onWheelScroll(event: WheelEvent) {
+    const tabContainer = this.seriesTabs
+    if (tabContainer) {
+      event.preventDefault()
+
+      tabContainer.scrollLeft += event.deltaY
+
+      this._onTabScroll()
+    }
+  }
+
+  private _scrollLeft() {
+    this._scrollTabContainer(-1)
+  }
+
+  private _scrollRight() {
+    this._scrollTabContainer(1)
+  }
+
+  private _scrollTabContainer(direction: number) {
+    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#series-tabs')
+    if (tabContainer) {
+      tabContainer.style.scrollBehavior = 'smooth'
+      tabContainer.scrollLeft += direction * tabContainer.clientWidth
+    }
+
+    setTimeout(() => {
+      tabContainer!.style.scrollBehavior = 'auto'
+      this._onTabScroll()
+    }, 300)
+  }
+
+  private _onTabScroll() {
+    let tabContainer: HTMLElement | null | undefined
+    let tabNavLeftButton: MdIcon
+    let tabNavRightButton: MdIcon
+
+    tabContainer = this.seriesTabs
+    tabNavLeftButton = this.seriesTabNavLeftButton
+    tabNavRightButton = this.seriesTabNavRightButton
+
+    if (!tabContainer) {
+      return
+    }
+
+    if (tabContainer.clientWidth == tabContainer.scrollWidth) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.setAttribute('disabled', '')
+    } else if (tabContainer.scrollLeft <= 0) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.removeAttribute('disabled')
+    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.setAttribute('disabled', '')
+    } else {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.removeAttribute('disabled')
+    }
+  }
+}