@operato/chart 8.0.0-beta.0 → 8.0.0-beta.2

package/src/chartjs/ox-chart-js.ts

@@ -1,207 +0,0 @@
-import ChartDataLabels from 'chartjs-plugin-datalabels'
-
-import { LitElement, html, css } from 'lit'
-import { property, query, state, customElement } from 'lit/decorators.js'
-import { Chart, ChartConfiguration } from 'chart.js/auto'
-import { format as formatText } from '@operato/utils/format.js'
-import { convertConfigure } from './config-converter'
-
-Chart.register(ChartDataLabels)
-
-@customElement('ox-chart-js')
-export class OxChartJs extends LitElement {
-  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
-  @property({ type: Array }) data: { [key: string]: any }[] = []
-  @property({ type: Number }) width!: number
-  @property({ type: Number }) height!: number
-
-  private chart: Chart | null = null
-  private chartjsConfig: ChartConfiguration | null = null
-
-  @query('canvas') canvas!: HTMLCanvasElement
-
-  static styles = css`
-    :host {
-      display: block;
-
-      background-color: var(--ox-chart-background-color, var(--md-sys-color-surface));
-      color: var(--ox-chart-color, var(--md-sys-color-on-surface));
-    }
-
-    canvas {
-      width: 100%;
-      height: 100%;
-    }
-  `
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    if (this.chart) {
-      this.chart.destroy()
-    }
-  }
-
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    var needUpdateData = false
-
-    if (changedProperties.has('width') || changedProperties.has('height')) {
-      this.updateChartSize()
-    }
-
-    if (changedProperties.has('config') && this.config) {
-      this.chartjsConfig = convertConfigure(this.config, {}) as any
-
-      this.attachPluginOptions(this.chartjsConfig!.options as any)
-
-      this.chart && this.chart.destroy()
-      this.chart = new Chart(this.canvas, this.chartjsConfig!)
-
-      needUpdateData = true
-    }
-
-    if (changedProperties.has('data')) {
-      needUpdateData = true
-    }
-
-    if (needUpdateData) {
-      this.updateData()
-    }
-  }
-
-  updateData() {
-    if (!this.chart) {
-      return
-    }
-
-    var data = this.data
-
-    if (this.data[0]?.hasOwnProperty('__field1')) {
-      /* DEPRECATED 이 케이스는 앞으로 지원하지 않는 것이 좋다. 하위 호환성 때문에 제공함. 사용빈도 낮음. */
-      data = toObjectArrayValue(this.data) as { [key: string]: any }[]
-    }
-
-    const labelDataKey = this.config!.data.labelDataKey || ''
-
-    labelDataKey && (this.chart!.config.data!.labels = data.map((data: any) => data[labelDataKey]))
-
-    const datasets = this.chart!.config.data.datasets
-    for (let key in datasets) {
-      const dataset = datasets[Number(key)]
-      const dataKey = (dataset as any).dataKey
-      dataKey && (dataset.data = data.map(d => d[dataKey]) as any)
-    }
-
-    this.chart.update()
-  }
-
-  updateChartSize() {
-    const width = Math.floor(this.width)
-    const height = Math.floor(this.height)
-
-    this.canvas.style.width = `${width}px`
-    this.canvas.style.height = `${height}px`
-
-    const _ = () => {
-      if (this.canvas.offsetWidth == 0 || this.canvas.offsetHeight == 0) {
-        requestAnimationFrame(_)
-      } else {
-        /*
-        주의 : chart.resize() 내에서 pixel ratio를 감안해서, canvas 의 width, height를 설정하기때문에,
-        별도 처리가 필요하지 않다.
-        */
-        this.chart!.resize()
-      }
-    }
-
-    requestAnimationFrame(_)
-  }
-
-  render() {
-    return html`<canvas></canvas>`
-  }
-
-  attachPluginOptions(options: OperatoChart.ChartOptions) {
-    if (!options.plugins) {
-      options.plugins = {}
-    }
-
-    this.attachDatalabelPluginOptions(options.plugins)
-  }
-
-  attachDatalabelPluginOptions(pluginOptions: any) {
-    pluginOptions.datalabels = {
-      ...pluginOptions.datalabels,
-      display: function (context: any) {
-        return !!context.dataset.displayValue
-      },
-      anchor: function (context: any) {
-        return context.dataset.dataLabelAnchor || 'center'
-      },
-      offset: function (context: any) {
-        return context.dataset.dataLabelOffset || 0
-      },
-      align: function (context: any) {
-        return context.dataset.dataLabelAnchor || 'center'
-      },
-      rotation: function (context: any) {
-        return context.dataset.dataLabelRotation || 0
-      },
-      color: function (context: any) {
-        return context.dataset?.defaultFontColor || '#000'
-      },
-      font: function (context: any) {
-        return {
-          size: context.dataset?.defaultFontSize,
-          family: context.chart.options?.defaultFontFamily
-        }
-      },
-      clamp: true,
-      formatter: function (value: string, context: any) {
-        var prefix = context.dataset.valuePrefix || ''
-        var suffix = context.dataset.valueSuffix || ''
-        var format = context.dataset.valueFormat || ''
-
-        if (value === undefined) {
-          return value
-        }
-
-        var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()
-        return prefix + stringValue + suffix
-      }
-    }
-  }
-}
-
-function toObjectArrayValue(array: any[]): any[] | null {
-  if (!array || array.length === 0) {
-    return null
-  }
-
-  let indexKeyMap: any = {}
-  let value = []
-
-  for (let key in array[0]) {
-    indexKeyMap[key] = array[0][key]
-  }
-
-  for (var i = 1; i < array.length; i++) {
-    let object: any = {}
-    let thisObject = array[i]
-
-    for (let key in indexKeyMap) {
-      let k = indexKeyMap[key]
-      let v = thisObject[key]
-      object[k] = v
-    }
-
-    value.push(object)
-  }
-
-  return value
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ox-chart-js': OxChartJs
-  }
-}

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'
-  }
-]