@operato/chart 2.0.0-beta.25

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

@@ -0,0 +1,315 @@
+import '@operato/i18n/ox-i18n.js'
+
+import { html, PropertyValueMap } from 'lit'
+import { property } from 'lit/decorators.js'
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
+
+import { InputChartStyles } from './input-chart-styles'
+import { Configurer } from './configurer'
+import { OxFormField } from '@operato/input'
+
+export class InputChartAbstract extends OxFormField {
+  static styles = [InputChartStyles]
+
+  @property({ type: Object }) value: OperatoChart.ChartConfig | null = null
+
+  configurer: Configurer = new Configurer(this.value || null, () => {
+    return this.getDefaultChartConfig(this.getChartType(), this.getDefaultDatasets())
+  })
+
+  render() {
+    const configurer = this.configurer
+
+    return html`
+      <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
+
+      <label for="theme"> <ox-i18n msgid="label.theme">Theme</ox-i18n> </label>
+      <select id="theme" value-key="theme" class="select-content" .value=${configurer.theme || ''}>
+        <option value="dark">dark</option>
+        <option value="light">light</option>
+      </select>
+
+      <input id="tooltip" type="checkbox" value-key="tooltip" ?checked=${configurer.tooltip} />
+      <label for="tooltip"> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
+
+      <input id="animation" type="checkbox" value-key="animation" ?checked=${configurer.animation} />
+      <label for="animation"> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
+
+      <input id="display" type="checkbox" value-key="display" ?checked=${configurer.display} />
+      <label for="display"> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
+
+      <input id="stacked" type="checkbox" value-key="stacked" ?checked=${configurer.stacked} />
+      <label for="stacked"> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
+
+      ${configurer.display
+        ? html`
+            <label for="position"> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
+            <select id="position" value-key="position" class="select-content" .value=${configurer.position || ''}>
+              <option value="top">top</option>
+              <option value="right">right</option>
+              <option value="bottom">bottom</option>
+              <option value="left">left</option>
+            </select>
+          `
+        : html``}
+      ${this.subTemplate()}
+    `
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
+  }
+
+  displayValueTemplate() {
+    const configurer = this.configurer
+
+    return html`
+      <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.position">Position</ox-i18n> </label>
+            <select
+              id="data-label-anchor"
+              value-key="series.dataLabelAnchor"
+              value=${configurer.series.dataLabelAnchor || 'center'}
+            >
+              <option value="start">Start</option>
+              <option value="center" selected>Center</option>
+              <option value="end">End</option>
+            </select>
+          `
+        : html``}
+    `
+  }
+
+  subTemplate() {
+    return html``
+  }
+
+  getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed' {
+    return 'bar'
+  }
+
+  getDefaultDatasets(): OperatoChart.Dataset[] {
+    return [this.getDefaultDataset('bar')]
+  }
+
+  getDefaultDataset(seriesType: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie'): OperatoChart.Dataset {
+    return {
+      label: 'Series 1',
+      data: [],
+      borderWidth: 1,
+      dataKey: '',
+      yAxisID: 'left',
+      color: '#000',
+      backgroundColor: '#FFFFFF',
+      type: seriesType,
+      stack: '',
+      fill: false,
+      lineTension: 0.4,
+      pointStyle: 'circle',
+      pointRadius: 3,
+      valuePrefix: '',
+      valueSuffix: '',
+      displayValue: false
+    }
+  }
+
+  getDefaultChartConfig(
+    type: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed',
+    datasets?: OperatoChart.Dataset[]
+  ): OperatoChart.ChartConfig {
+    return {
+      data: {
+        datasets: datasets || [],
+        labelDataKey: ''
+      },
+      options: {
+        theme: 'light',
+        tooltip: true,
+        animation: true,
+        legend: {
+          display: true,
+          position: 'top'
+        },
+        scales: {
+          xAxes: [this.getDefaultAxisOptions()],
+          yAxes: [this.getDefaultAxisOptions()]
+        },
+        stacked: false,
+        xGridLine: true,
+        yGridLine: true,
+        y2ndGridLine: false,
+        multiAxis: false
+      },
+      type
+    }
+  }
+
+  getDefaultAxisOptions(): OperatoChart.AxisOptions {
+    return {
+      axisTitle: '',
+      barSpacing: 0,
+      categorySpacing: 0,
+      barPercentage: 0.9,
+      ticks: {
+        display: true,
+        autoMin: true,
+        autoMax: true,
+        min: undefined,
+        max: undefined,
+        stepSize: undefined
+      }
+    }
+  }
+
+  onValuesChanged(e: Event) {
+    e.stopPropagation()
+
+    const element = e.target as HTMLInputElement
+    let key = element.getAttribute('value-key')
+    let value = element.value
+
+    if (!key) {
+      return
+    }
+
+    value = this._getElementValue(element)
+
+    const attrs = key.split('.')
+    let attr = attrs.shift() || ''
+    let variable: any = this.configurer
+
+    while (attrs.length > 0) {
+      variable = variable[attr]
+      attr = attrs.shift() || ''
+    }
+
+    variable[attr] = value
+
+    this.value = { ...this.configurer.value }
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    this.requestUpdate()
+  }
+
+  onTapAddTab(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.currentSeriesIndex = lastSeriesIndex
+
+    this.value = { ...this.configurer.value }
+  }
+
+  onTapRemoveCurrentTab(e: Event) {
+    const configurer = this.configurer
+
+    if (!configurer.config.data.datasets) return
+
+    let currIndex = configurer.currentSeriesIndex
+    this.configurer.data.datasets.splice(currIndex, 1)
+
+    currIndex--
+
+    if (currIndex < 0) currIndex = 0
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    configurer.currentSeriesIndex = currIndex
+
+    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':
+        switch ((element as HTMLInputElement).type) {
+          case 'checkbox':
+            return (element as HTMLInputElement).checked
+          case 'number':
+            return Number((element as HTMLInputElement).value) || 0
+          case 'text':
+            return String((element as HTMLInputElement).value)
+        }
+      default:
+        return (element as any).value
+    }
+  }
+}