@operato/chart 7.1.31 → 7.1.33

package/src/editors/configurer.ts

@@ -1,336 +0,0 @@
-export class Configurer {
-  public value: OperatoChart.ChartConfig
-  public currentSeriesIndex: number = 0
-  public currentAnnotationIndex: number = -1
-  public initializer: () => OperatoChart.ChartConfig
-
-  constructor(value: OperatoChart.ChartConfig | null, initializer: () => OperatoChart.ChartConfig) {
-    this.initializer = initializer
-    this.value = value || initializer.call(this)
-  }
-
-  updateValue(value?: OperatoChart.ChartConfig) {
-    this.value = value || { ...this.value }
-  }
-
-  setCurrentSeriesIndex(currentSeriesIndex: number) {
-    this.currentSeriesIndex = currentSeriesIndex
-    this.series = this.datasets[this.currentSeriesIndex]!
-  }
-
-  setCurrentAnnotationIndex(currentAnnotationIndex: number) {
-    this.currentAnnotationIndex = currentAnnotationIndex
-    if (currentAnnotationIndex >= 0 && currentAnnotationIndex < this.annotations.length) {
-      this.annotation = this.annotations[currentAnnotationIndex]
-    } else {
-      this.currentAnnotationIndex = -1
-    }
-  }
-
-  get series() {
-    return this.datasets[this.currentSeriesIndex]! || {}
-  }
-
-  set series(series) {
-    if (!this.data) {
-      this.config.data = { datasets: [series] }
-    } else {
-      this.datasets[this.currentSeriesIndex] = series
-    }
-  }
-
-  get annotation() {
-    return this.annotations[this.currentAnnotationIndex]! || {}
-  }
-
-  set annotation(annotation) {
-    if (!this.annotations) {
-      this.annotations = [annotation]
-    } else {
-      this.annotations[this.currentAnnotationIndex] = annotation
-    }
-  }
-
-  get config() {
-    if (!this.value) {
-      this.value = this.initializer.call(this)
-    }
-    return this.value
-  }
-
-  get data() {
-    return this.config.data
-  }
-
-  set data(data) {
-    this.config.data = data
-  }
-
-  get datasets() {
-    if (!this.data.datasets) {
-      this.data.datasets = []
-    }
-    return this.data.datasets
-  }
-
-  set datasets(datasets) {
-    this.data.datasets = datasets
-  }
-
-  set dataKey(key) {
-    if (this.series) {
-      this.series!.dataKey = key
-    }
-  }
-
-  get dataKey() {
-    return this.series.dataKey
-  }
-
-  get legend() {
-    !this.config.options && (this.config.options = {})
-    return this.config.options.legend
-  }
-
-  set legend(legend) {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    this.config.options.legend = legend
-  }
-
-  get theme() {
-    return this.config.options && this.config.options.theme
-  }
-
-  set theme(theme) {
-    !this.config.options && (this.config.options = {})
-    this.config.options.theme = theme
-  }
-
-  get tooltip() {
-    return !this.config.options || this.config.options.tooltip !== false
-  }
-
-  set tooltip(tooltip) {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    this.config.options.tooltip = tooltip
-  }
-
-  get animation() {
-    return !this.config.options || this.config.options.animation !== false
-  }
-
-  set animation(animation) {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    this.config.options.animation = animation
-  }
-
-  get scales() {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    return this.config.options.scales
-  }
-
-  set scales(scales) {
-    !this.config.options && (this.config.options = {})
-    this.config.options.scales = scales
-  }
-
-  get display() {
-    return this.legend && this.legend.display
-  }
-
-  set display(display) {
-    if (!this.legend) {
-      this.legend = {}
-    }
-    this.legend.display = display
-  }
-
-  get position() {
-    if (!this.legend) {
-      this.legend = {}
-    }
-    return this.legend.position
-  }
-
-  set position(position) {
-    if (!this.legend) {
-      this.legend = {}
-    }
-    this.legend.position = position
-  }
-
-  get stacked() {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    return this.config.options.stacked
-  }
-
-  set stacked(stacked) {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    this.config.options.stacked = stacked
-  }
-
-  get labelDataKey() {
-    return this.data && this.data.labelDataKey
-  }
-
-  set labelDataKey(labelDataKey) {
-    this.data.labelDataKey = labelDataKey
-  }
-
-  set options(options) {
-    this.config.options = options
-  }
-
-  get options() {
-    return this.config.options
-  }
-
-  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) {
-    if (!this.scales!.yAxes![1]) {
-      this.scales!.yAxes![1] = {}
-    }
-    this.scales!.yAxes![1] = yAxes1
-  }
-
-  get multiAxis() {
-    return this.config.options!.multiAxis
-  }
-
-  set multiAxis(multiAxis) {
-    if (!multiAxis) {
-      this.scales!.yAxes = [this.yAxes0]
-    } else if (!this.yAxes1) {
-      this.yAxes1 = {
-        ticks: {}
-      }
-    }
-
-    this.config.options!.multiAxis = multiAxis
-  }
-
-  get valuePrefix() {
-    return this.series.valuePrefix
-  }
-
-  set valuePrefix(valuePrefix: string | undefined) {
-    this.series.valuePrefix = valuePrefix
-  }
-
-  get valueSuffix() {
-    return this.series.valueSuffix
-  }
-
-  set valueSuffix(valueSuffix: string | undefined) {
-    this.series.valueSuffix = valueSuffix
-  }
-
-  get valueFormat() {
-    return this.series.valueFormat
-  }
-
-  set valueFormat(valueFormat: string | undefined) {
-    this.series.valueFormat = valueFormat
-  }
-
-  get displayValue() {
-    return this.series.displayValue
-  }
-
-  set displayValue(displayValue) {
-    this.series.displayValue = displayValue
-  }
-
-  get annotations(): OperatoChart.Annotation[] {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    if (!this.config.options.annotations) {
-      this.config.options.annotations = []
-    }
-
-    return this.config.options.annotations!
-  }
-
-  set annotations(annotations) {
-    if (!this.config.options) {
-      this.config.options = {}
-    }
-    if (!this.config.options.annotations) {
-      this.config.options.annotations = []
-    }
-    this.config.options.annotations = annotations
-  }
-
-  get currentAnnotation() {
-    return this.annotations[this.currentAnnotationIndex]
-  }
-
-  addSeries(series: OperatoChart.Dataset = {}) {
-    this.datasets.push(series)
-    this.setCurrentSeriesIndex(this.datasets.length - 1)
-  }
-
-  removeSeries(index: number) {
-    if (index >= 0 && index < this.datasets.length) {
-      this.datasets.splice(index, 1)
-      this.setCurrentSeriesIndex(Math.min(this.currentSeriesIndex, this.datasets.length - 1))
-    }
-  }
-
-  addAnnotation(annotation: OperatoChart.Annotation = { type: 'line', x1: 0, y1: 0 }) {
-    this.annotations.push(annotation)
-    this.setCurrentAnnotationIndex(this.annotations.length - 1)
-  }
-
-  removeAnnotation(index: number) {
-    if (index >= 0 && index < this.annotations.length) {
-      this.annotations.splice(index, 1)
-      this.setCurrentAnnotationIndex(Math.min(this.currentAnnotationIndex, this.annotations.length - 1))
-    }
-  }
-}

package/src/editors/index.ts

@@ -1,8 +0,0 @@
-import './ox-property-editor-chart'
-
-export default [
-  {
-    type: 'chart',
-    element: 'property-editor-chart'
-  }
-]

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

@@ -1,202 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { html, PropertyValues } 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
-  @property({ type: String, attribute: 'chart-type' }) chartType?: OperatoChart.ChartType
-
-  private _configurer?: Configurer
-
-  get configurer(): Configurer {
-    if (!this._configurer) {
-      this._configurer = new Configurer(this.value, () => {
-        return this.value || this.getDefaultChartConfig(this.chartType, this.getDefaultDatasets())
-      })
-    }
-    return this._configurer
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.configurer.updateValue(this.value!)
-    }
-  }
-
-  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 || 'light'}>
-        <option value="auto">auto</option>
-        <option value="dark">dark</option>
-        <option value="light" checked>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))
-  }
-
-  subTemplate() {
-    return html``
-  }
-
-  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: randomColor({
-        hue: new TinyColor('#fff').clone().toString()
-      }).toRgbString(),
-      backgroundColor: '#FFFFFF',
-      type: seriesType,
-      stack: '',
-      fill: false,
-      lineTension: 0.4,
-      pointStyle: 'circle',
-      pointRadius: 3,
-      valuePrefix: '',
-      valueSuffix: '',
-      displayValue: false
-    }
-  }
-
-  getDefaultChartConfig(type?: OperatoChart.ChartType, 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()
-  }
-
-  _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
-    }
-  }
-}