@operato/chart 7.0.37 → 7.0.40

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

@@ -1,11 +1,9 @@
 import '@operato/i18n/ox-i18n.js'
 
 import { html, PropertyValues } from 'lit'
-import { property, query } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
+import { property } from 'lit/decorators.js'
 
 import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
-import { MdIcon } from '@material/web/icon/icon.js'
 
 import { InputChartStyles } from './input-chart-styles'
 import { Configurer } from './configurer'
@@ -17,14 +15,6 @@ export class InputChartAbstract extends OxFormField {
   @property({ type: Object }) value: OperatoChart.ChartConfig | null = null
   @property({ type: String, attribute: 'chart-type' }) chartType: OperatoChart.ChartType
 
-  @query('#annotations-tabs') annotationsTabs!: HTMLElement
-  @query('#annotations-tab-nav-left-button') annotationsTabNavLeftButton!: MdIcon
-  @query('#annotations-tab-nav-right-button') annotationsTabNavRightButton!: MdIcon
-
-  @query('#series-tabs') seriesTabs!: HTMLElement
-  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon
-  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon
-
   private _configurer?: Configurer
 
   get configurer() {
@@ -88,114 +78,6 @@ export class InputChartAbstract extends OxFormField {
     this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    this.seriesTabContainer?.addEventListener('scroll', e => {
-      this._onTabScroll(e, 'series')
-    })
-
-    this.annotationsTabContainer?.addEventListener('scroll', e => {
-      this._onTabScroll(e, 'annotations')
-    })
-  }
-
-  get seriesTabContainer(): HTMLElement | null | undefined {
-    return this.seriesTabs
-  }
-
-  get annotationsTabContainer(): HTMLElement | null | undefined {
-    return this.annotationsTabs
-  }
-
-  displayValueTemplate() {
-    const configurer = this.configurer
-
-    return html`
-      <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
-      <input
-        id="value-format"
-        type="text"
-        value-key="series.valueFormat"
-        .value=${configurer.series.valueFormat || ''}
-        list="format-list"
-      />
-      <datalist id="format-list">
-        <option value="#,###."></option>
-        <option value="#,###.#"></option>
-        <option value="#,###.0"></option>
-        <option value="#,##0.#"></option>
-        <option value="#,##0.0"></option>
-        <option value="#,##0.0%"></option>
-      </datalist>
-
-      <label for="value-prefix"> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
-      <input
-        id="value-prefix"
-        type="text"
-        value-key="series.valuePrefix"
-        .value=${configurer.series.valuePrefix || ''}
-      />
-
-      <label for="value-suffix"> <ox-i18n msgid="label.value-suffix">Value Suffix</ox-i18n> </label>
-      <input
-        id="value-suffix"
-        type="text"
-        value-key="series.valueSuffix"
-        .value=${configurer.series.valueSuffix || ''}
-      />
-
-      <input
-        id="display-value"
-        type="checkbox"
-        value-key="series.displayValue"
-        ?checked=${!!configurer.series.displayValue}
-      />
-      <label for="display-value"> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
-
-      ${configurer.series.displayValue
-        ? html`
-            <label for="font-color"> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
-            <ox-input-color
-              id="font-color"
-              value-key="series.defaultFontColor"
-              .value=${configurer.series.defaultFontColor || '#000'}
-            ></ox-input-color>
-            <label for="font-size"> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
-            <input
-              id="font-size"
-              type="number"
-              value-key="series.defaultFontSize"
-              value=${configurer.series.defaultFontSize || 10}
-            />
-            <label for="data-label-anchor"> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
-            <select
-              id="data-label-anchor"
-              value-key="series.dataLabelAnchor"
-              .value=${configurer.series.dataLabelAnchor || 'center'}
-            >
-              <option value=""></option>
-              <option value="start">Start</option>
-              <option value="center">Center</option>
-              <option value="end">End</option>
-            </select>
-            <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
-            <input
-              id="data-label-offset"
-              type="number"
-              value-key="series.dataLabelOffset"
-              value=${configurer.series.dataLabelOffset || 0}
-            />
-            <label for="data-label-rotation"> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
-            <input
-              id="data-label-rotation"
-              type="number"
-              value-key="series.dataLabelRotation"
-              value=${configurer.series.dataLabelRotation || 0}
-            />
-          `
-        : html``}
-    `
-  }
-
   subTemplate() {
     return html``
   }
@@ -302,96 +184,6 @@ export class InputChartAbstract extends OxFormField {
     this.requestUpdate()
   }
 
-  onTapAddSeriesTab(e: Event) {
-    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
-    })
-
-    configurer.config.data.datasets.push(seriesModel)
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    configurer.setCurrentSeriesIndex(lastSeriesIndex)
-
-    this.value = { ...this.configurer.value }
-  }
-
-  onTapRemoveCurrentSeriesTab(index: number) {
-    const configurer = this.configurer
-
-    if (!configurer.config.data.datasets) {
-      return
-    }
-
-    this.configurer.data.datasets.splice(index, 1)
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    configurer.setCurrentSeriesIndex(Math.max(0, configurer.currentSeriesIndex - 1))
-
-    this.requestUpdate()
-  }
-
-  onTapAddAnnotation(e: Event) {
-    const configurer = this.configurer
-
-    const lastAnnotationIndex = configurer.annotations.length
-    configurer.annotations.push({ type: 'line', x1: 0, y1: 0 })
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    configurer.setCurrentAnnotationIndex(lastAnnotationIndex)
-
-    this.value = { ...this.configurer.value }
-  }
-
-  onTapRemoveCurrentAnnotation(index: number) {
-    const configurer = this.configurer
-
-    if (!configurer.annotations) {
-      return
-    }
-
-    configurer.annotations.splice(index, 1)
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    configurer.setCurrentAnnotationIndex(Math.max(0, configurer.currentAnnotationIndex - 1))
-
-    this.requestUpdate()
-  }
-
-  _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
-  }
-
   _getElementValue(element: HTMLElement) {
     switch (element.tagName) {
       case 'INPUT':
@@ -407,450 +199,4 @@ export class InputChartAbstract extends OxFormField {
         return (element as any).value
     }
   }
-
-  annotationsTabTemplate() {
-    const configurer = this.configurer
-    const currentAnnotation = configurer.annotations[configurer.currentAnnotationIndex] || {}
-
-    return keyed(
-      configurer.currentAnnotationIndex,
-      html`
-        <div id="annotations-properties-container" fullwidth>
-          <div id="annotations-tab-header">
-            <md-icon
-              id="annotations-tab-nav-left-button"
-              @tap=${(e: Event) => {
-                this._onTabScrollNavLeft(e, 'annotations')
-              }}
-              disabled
-              >chevron_left</md-icon
-            >
-            <div
-              id="annotations-tabs"
-              @change=${(e: Event) => {
-                configurer.setCurrentAnnotationIndex((e.target as any).activeTabIndex)
-              }}
-              active-tab-index=${configurer.currentAnnotationIndex}
-              fit-container
-            >
-              ${configurer.annotations!.map(
-                (annotation: any, index: number) => html`
-                  <div
-                    data-annotation=${index + 1}
-                    data-tab-index=${index}
-                    tab
-                    ?selected=${index == configurer.currentAnnotationIndex}
-                    @click=${(e: Event) => {
-                      const target = e.target as HTMLDivElement
-                      this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')))
-                      this.value = { ...this.configurer.value }
-                    }}
-                  >
-                    ${index + 1}
-                    ${!configurer.annotations ||
-                    (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
-                      ? html`
-                          <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon>
-                        `
-                      : html``}
-                  </div>
-                `
-              )}
-            </div>
-            <md-icon
-              id="annotations-tab-nav-right-button"
-              @click=${(e: Event) => {
-                this._onTabScrollNavRight(e, 'annotations')
-              }}
-              disabled
-              >chevron_right</md-icon
-            >
-          </div>
-          <div id="add-annotation-button-container">
-            <md-icon id="add-annotation-button" @tap=${(e: Event) => this.onTapAddAnnotation(e)}>add</md-icon>
-          </div>
-
-          <div class="tab-content">
-            <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
-            <select
-              id="annotation-type"
-              class="select-content"
-              value-key="annotation.type"
-              .value=${currentAnnotation.type || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="line">Line</option>
-              <option value="text">Text</option>
-              <option value="box">Box</option>
-              <option value="horizontalLine">Horizontal Line</option>
-              <option value="verticalLine">Vertical Line</option>
-            </select>
-
-            <label for="annotation-x1">X1</label>
-            <input
-              id="annotation-x1"
-              type="number"
-              value-key="annotation.x1"
-              .value=${String(currentAnnotation.x1 || 0)}
-            />
-
-            <label for="annotation-y1">Y1</label>
-            <input
-              id="annotation-y1"
-              type="number"
-              value-key="annotation.y1"
-              .value=${String(currentAnnotation.y1 || 0)}
-            />
-
-            <label for="annotation-x2">X2</label>
-            <input
-              id="annotation-x2"
-              type="number"
-              value-key="annotation.x2"
-              .value=${String(currentAnnotation.x2 || 0)}
-            />
-
-            <label for="annotation-y2">Y2</label>
-            <input
-              id="annotation-y2"
-              type="number"
-              value-key="annotation.y2"
-              .value=${String(currentAnnotation.y2 || 0)}
-            />
-
-            <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
-            <ox-input-color
-              id="annotation-stroke"
-              value-key="annotation.stroke"
-              .value=${currentAnnotation.stroke}
-            ></ox-input-color>
-
-            <label for="annotation-stroke-thickness">
-              <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
-            </label>
-            <input
-              id="annotation-stroke-thickness"
-              type="number"
-              value-key="annotation.strokeThickness"
-              .value=${String(currentAnnotation.strokeThickness || 1)}
-            />
-
-            <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
-            <ox-input-color
-              id="annotation-fill"
-              value-key="annotation.fill"
-              .value=${currentAnnotation.fill}
-            ></ox-input-color>
-
-            <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
-            <input
-              id="annotation-text"
-              type="text"
-              value-key="annotation.text"
-              .value=${currentAnnotation.text || ''}
-            />
-
-            <label for="annotation-horizontal-anchor">
-              <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
-            </label>
-            <select
-              id="annotation-horizontal-anchor"
-              class="select-content"
-              value-key="annotation.horizontalAnchorPoint"
-              .value=${currentAnnotation.horizontalAnchorPoint || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="Left">Left</option>
-              <option value="Center">Center</option>
-              <option value="Right">Right</option>
-            </select>
-
-            <label for="annotation-vertical-anchor">
-              <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
-            </label>
-            <select
-              id="annotation-vertical-anchor"
-              class="select-content"
-              value-key="annotation.verticalAnchorPoint"
-              .value=${currentAnnotation.verticalAnchorPoint || ''}
-            >
-              <option value="">&nbsp;</option>
-              <option value="Top">Top</option>
-              <option value="Center">Center</option>
-              <option value="Bottom">Bottom</option>
-            </select>
-
-            <label for="annotation-x-coordinate-mode">X Coordinate Mode</label>
-            <select
-              id="annotation-x-coordinate-mode"
-              class="select-content"
-              value-key="annotation.xCoordinateMode"
-              .value=${currentAnnotation.xCoordinateMode || 'DataValue'}
-            >
-              <option value="">&nbsp;</option>
-              <option value="DataValue">DataValue</option>
-              <option value="Pixel">Pixel</option>
-              <option value="Relative">Relative</option>
-            </select>
-
-            <label for="annotation-y-coordinate-mode">Y Coordinate Mode</label>
-            <select
-              id="annotation-y-coordinate-mode"
-              class="select-content"
-              value-key="annotation.yCoordinateMode"
-              .value=${currentAnnotation.yCoordinateMode || 'DataValue'}
-            >
-              <option value="">&nbsp;</option>
-              <option value="DataValue">DataValue</option>
-              <option value="Pixel">Pixel</option>
-              <option value="Relative">Relative</option>
-            </select>
-          </div>
-        </div>
-      `
-    )
-  }
-
-  multiSeriesTabTemplate() {
-    const configurer = this.configurer
-
-    return keyed(
-      configurer.currentSeriesIndex,
-      html`
-        <div id="series-properties-container" fullwidth>
-          <div id="series-tab-header">
-            <md-icon
-              id="series-tab-nav-left-button"
-              @tap=${(e: Event) => {
-                this._onTabScrollNavLeft(e, 'series')
-              }}
-              disabled
-              >chevron_left</md-icon
-            >
-            <div
-              id="series-tabs"
-              @change=${(e: Event) => {
-                // configurer.currentSeriesIndex = (e.target as any).activeTabIndex
-                configurer.setCurrentSeriesIndex((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.onTapRemoveCurrentSeriesTab(index)}> close </md-icon> `
-                      : html``}
-                  </div>
-                `
-              )}
-            </div>
-            <md-icon
-              id="series-tab-nav-right-button"
-              @click=${(e: Event) => {
-                this._onTabScrollNavRight(e, 'series')
-              }}
-              disabled
-              >chevron_right</md-icon
-            >
-          </div>
-          <div id="add-series-button-container">
-            <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddSeriesTab(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, type: 'series' | 'annotations') {
-    let tabContainer: HTMLElement | null | undefined
-    let tabNavLeftButton: MdIcon
-    let tabNavRightButton: MdIcon
-
-    if (type === 'series') {
-      tabContainer = this.seriesTabContainer
-      tabNavLeftButton = this.seriesTabNavLeftButton
-      tabNavRightButton = this.seriesTabNavRightButton
-    } else {
-      tabContainer = this.annotationsTabContainer
-      tabNavLeftButton = this.annotationsTabNavLeftButton
-      tabNavRightButton = this.annotationsTabNavRightButton
-    }
-
-    if (!tabContainer) {
-      return
-    }
-
-    if (tabContainer.clientWidth == tabContainer.scrollWidth) {
-      tabNavLeftButton.setAttribute('disabled', '')
-      tabNavRightButton.setAttribute('disabled', '')
-    }
-    // left-end
-    else if (tabContainer.scrollLeft == 0) {
-      tabNavLeftButton.setAttribute('disabled', '')
-      tabNavRightButton.removeAttribute('disabled')
-    }
-    // right-end
-    else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
-      tabNavLeftButton.removeAttribute('disabled')
-      tabNavRightButton.setAttribute('disabled', '')
-    } else {
-      tabNavLeftButton.removeAttribute('disabled')
-      tabNavRightButton.removeAttribute('disabled')
-    }
-  }
-
-  _onTabScrollNavLeft(e: Event, type: 'series' | 'annotations') {
-    let tabContainer: HTMLElement | null | undefined
-
-    if (type === 'series') {
-      tabContainer = this.seriesTabContainer
-    } else {
-      tabContainer = this.annotationsTabContainer
-    }
-
-    if (!tabContainer) {
-      return
-    }
-
-    tabContainer.style.scrollBehavior = 'smooth'
-    tabContainer.scrollLeft -= tabContainer.clientWidth
-    tabContainer.style.scrollBehavior = 'auto'
-  }
-
-  _onTabScrollNavRight(e: Event, type: 'series' | 'annotations') {
-    let tabContainer: HTMLElement | null | undefined
-
-    if (type === 'series') {
-      tabContainer = this.seriesTabContainer
-    } else {
-      tabContainer = this.annotationsTabContainer
-    }
-
-    if (!tabContainer) {
-      return
-    }
-
-    tabContainer.style.scrollBehavior = 'smooth'
-    tabContainer.scrollLeft += tabContainer.clientWidth
-    tabContainer.style.scrollBehavior = 'auto'
-  }
 }