@operato/scene-chartjs 8.0.0-beta.1 → 8.0.0

package/src/ox-chart.ts

@@ -1,170 +0,0 @@
-import 'chartjs-plugin-datalabels'
-import 'chartjs-plugin-style'
-
-import { LitElement, PropertyValues, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { Chart } from 'chart.js'
-import { format as formatText } from '@operato/utils/format.js'
-import DataBinderPlugin from './plugins/chartjs-plugin-data-binder'
-import { convertConfigure } from './config-converter'
-
-Chart.plugins.register(DataBinderPlugin)
-
-@customElement('ox-chart')
-export class OxChart extends LitElement {
-  @property({ type: Number }) width!: number
-  @property({ type: Number }) height!: number
-  @property({ type: Object }) options!: SceneChart.ChartConfig
-  @property({ type: Object }) data!: SceneChart.ChartData
-
-  private _chart?: SceneChart | null
-
-  @query('canvas') _canvas!: HTMLCanvasElement
-
-  firstUpdated() {
-    this.initChart()
-  }
-
-  render() {
-    return html` <canvas></canvas> `
-  }
-
-  dispose() {
-    this._chart?.destroy()
-    this._chart = null
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('width') || changes.has('height')) {
-      this.updateChartSize()
-    }
-
-    if (changes.has('options')) {
-      this.updateChartConfig()
-    }
-
-    if (changes.has('data')) {
-      this._chart!.data.rawData = this.data
-      this._chart!.update()
-    }
-  }
-
-  initChart() {
-    const { data, options, type } = this.options
-    this.options.options.tooltip = this.options.options.tooltip ?? true
-    options!.maintainAspectRatio = false
-
-    this.attachPluginOptions(options)
-    convertConfigure(this.options as SceneChart.ChartConfig)
-
-    this._chart = new Chart(this._canvas, {
-      type,
-      data,
-      options
-    }) as SceneChart
-
-    this.updateChartSize()
-  }
-
-  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(_)
-  }
-
-  updateChartConfig() {
-    if (!this._chart) return
-
-    const { data, options, type } = this.options
-    options!.maintainAspectRatio = false
-
-    this.attachPluginOptions(options)
-    convertConfigure(this.options as SceneChart.ChartConfig)
-
-    this._chart.type = type
-    this._chart.data = data
-    this._chart.options = options
-    this._chart.data.rawData = this.data
-    this._chart.update()
-  }
-
-  attachPluginOptions(options: SceneChart.ChartOptions) {
-    if (!options.plugins) {
-      options.plugins = {}
-    }
-
-    this.attachDatalabelPluginOptions(options.plugins)
-  }
-
-  attachDatalabelPluginOptions(pluginOptions: SceneChart.ChartPluginsOptions) {
-    pluginOptions.datalabels = {
-      ...pluginOptions.datalabels,
-      display: function (context) {
-        // 기존 boolean type 을 string으로 바꾸면서 T, F, auto 추가 (실제 타입은 true, false, 'auto')
-        //@ts-ignore
-        const displayValue = context.dataset.displayValue || false
-        return displayValue === 'T' ? true : displayValue === 'F' ? false : displayValue
-      },
-      anchor: function (context) {
-        //@ts-ignore
-        return context.dataset.dataLabelAnchor || 'center'
-      },
-      offset: function (context) {
-        //@ts-ignore
-        return context.dataset.dataLabelOffset || 0
-      },
-      //@ts-ignore
-      align: function (context) {
-        //@ts-ignore
-        return context.dataset.dataLabelAnchor || 'center'
-      },
-      //@ts-ignore
-      rotation: function (context) {
-        //@ts-ignore
-        return context.dataset.dataLabelRotation || 0
-      },
-      color: function (context) {
-        //@ts-ignore
-        return context.dataset?.defaultFontColor || '#000'
-      },
-      font: function (context) {
-        return {
-          //@ts-ignore
-          size: context.dataset?.defaultFontSize,
-          //@ts-ignore
-          family: context.chart.options?.defaultFontFamily
-        }
-      },
-      clamp: true,
-      formatter: function (value, context) {
-        //@ts-ignore
-        var format = context.dataset.valueFormat || ''
-        //@ts-ignore
-        var prefix = context.dataset.valuePrefix || ''
-        //@ts-ignore
-        var suffix = context.dataset.valueSuffix || ''
-        if (value == undefined) return value
-
-        var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()
-        return prefix + stringValue + suffix
-      }
-    }
-  }
-}

package/src/plugins/chart-series-highlight.ts

@@ -1,41 +0,0 @@
-import 'ses'
-
-function seriesHighlight(chartInstance: SceneChart, seriesData: SceneChart.DataSeries) {
-  chartInstance.data.datasets?.forEach(dataset => {
-    let highlight = dataset.highlight
-    if (!highlight) {
-      return
-    }
-
-    let highlightColor = highlight.color
-    let highlightCondition = highlight.condition
-    const c = new Compartment()
-
-    seriesData.forEach((sdata, sIndex) => {
-      sdata.forEach((data: SceneChart.Data, i: number) => {
-        if (!c.evaluate(highlightCondition)) {
-          return
-        }
-
-        let meta = chartInstance.getDatasetMeta(sIndex)
-        meta.data[i]._model.backgroundColor = highlightColor
-        //@ts-ignore
-        meta.data[i]._model.hoverBackgroundColor = highlightColor
-
-        // dataset.backgroundColor = highlightColor
-      })
-    })
-  })
-}
-
-export default {
-  id: 'chart-series-highlight',
-  beforeDraw: function (chartInstance: SceneChart) {
-    if (!chartInstance.data.rawData) {
-      return
-    }
-
-    let seriesData = chartInstance.data.rawData.seriesData
-    seriesHighlight(chartInstance, seriesData)
-  }
-}

package/src/plugins/chartjs-plugin-data-binder.ts

@@ -1,134 +0,0 @@
-function convertObject(
-  dataArray: string | SceneChart.DataSeries | Object,
-  chartInstance: SceneChart
-): null | Object | SceneChart.DataSeries {
-  if (!dataArray) {
-    return null
-  }
-
-  if (typeof dataArray == 'string') {
-    try {
-      dataArray = JSON.parse(dataArray)
-    } catch (e) {
-      console.warn('invalid chart data format', e)
-      return null
-    }
-  }
-
-  if (!(dataArray instanceof Array)) {
-    // is not Array
-    if (dataArray instanceof Object) {
-      return dataArray
-    }
-    return null
-  }
-
-  if (dataArray.length === 0) {
-    return null
-  }
-
-  // modeling중 변수 기본값에 대한 처리
-  if (dataArray[0].hasOwnProperty('__field1')) {
-    dataArray = toObjectArrayValue(dataArray) as SceneChart.DataSeries
-  }
-
-  let label = chartInstance.data.labelDataKey
-  let seriesKeys = []
-
-  for (let i in chartInstance.data.datasets) {
-    seriesKeys.push(chartInstance.data.datasets[Number(i)].dataKey)
-  }
-
-  let seriesData: SceneChart.DataSeries = []
-  let labelData: SceneChart.DataSeries = []
-
-  let convertedObject = {
-    seriesData,
-    labelData
-  }
-
-  for (let i = 0; i < (dataArray as Array<any>).length; i++) {
-    let currData: SceneChart.Data = (dataArray as SceneChart.DataSeries)[Number(i)]
-    labelData.push(currData[label!])
-
-    for (let i in seriesKeys) {
-      if (!seriesKeys[i]) continue
-
-      if (!seriesData[i]) seriesData[i] = []
-
-      // 값이 NaN 경우엔 차트를 그리지 않음
-      if (isNaN(currData[seriesKeys[i]])) {
-        currData[seriesKeys[i]] = NaN
-      }
-
-      seriesData[i].push(currData[seriesKeys[i]])
-    }
-  }
-
-  return convertedObject
-}
-
-function toObjectArrayValue(array: SceneChart.DataSeries): SceneChart.DataSeries | null {
-  if (!array || array.length === 0) {
-    return null
-  }
-
-  let indexKeyMap: SceneChart.Data = {}
-  let value = []
-
-  for (let key in array[0]) {
-    indexKeyMap[key] = array[0][key]
-  }
-
-  for (var i = 1; i < array.length; i++) {
-    let object: SceneChart.Data = {}
-    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
-}
-
-function updateSeriesDatas(chartInstance: SceneChart) {
-  if (!chartInstance.data.rawData) {
-    return
-  }
-
-  let seriesData = chartInstance.data.rawData.seriesData
-
-  if (!seriesData || seriesData.length === 0) seriesData = [null]
-
-  for (let key in chartInstance.data.datasets) {
-    chartInstance.data.datasets[Number(key)].data = seriesData[key] || []
-  }
-}
-
-function updateLabelDatas(chartInstance: SceneChart) {
-  let labelData = chartInstance.data.rawData.labelData
-  chartInstance.config.data!.labels = labelData || []
-}
-
-export default {
-  id: 'data-binder',
-  beforeUpdate: function (chartInstance: SceneChart) {
-    if (!chartInstance.data) return
-
-    if (!chartInstance.data.rawData) chartInstance.data.rawData = []
-
-    chartInstance.data.rawData = convertObject(chartInstance.data.rawData, chartInstance) || {
-      seriesData: [],
-      labelData: []
-    }
-
-    let seriesData = chartInstance.data.rawData.seriesData
-    updateLabelDatas(chartInstance)
-    updateSeriesDatas(chartInstance)
-  }
-}

package/src/scene-chart.d.ts

@@ -1,102 +0,0 @@
-declare class SceneChart extends Chart {
-  type: Chart.ChartType | string
-  data: SceneChart.ChartData
-}
-
-declare namespace SceneChart {
-  type Theme = 'light' | 'dark'
-  type Data = { [key: string]: any }
-  type DataSeries = Array<Data>
-
-  interface TickOptions extends Chart.TickOptions {
-    autoMax?: boolean
-    autoMin?: boolean
-  }
-
-  interface ChartScales {
-    type?: Chart.ScaleType | string
-    display?: boolean
-    position?: Chart.PositionType | string
-    gridLines?: GridLineOptions
-    scaleLabel?: Chart.ScaleTitleOptions
-    ticks?: TickOptions
-    xAxes?: ChartXAxe[]
-    yAxes?: ChartYAxe[]
-  }
-
-  interface ChartDataSets extends Chart.ChartDataSets {
-    color: string
-    dataKey: string
-    valueFormat: string
-    valuePrefix: string
-    valueSuffix: string
-    displayValue: string
-    dataLabelAnchor: string
-    dataLabelOffset?: number
-    dataLabelRotation?: number
-    defaultFontColor: string
-    defaultFontSize: number
-    highlight: {
-      color: string
-      condition: string
-    }
-  }
-
-  interface ChartData {
-    labels?: Array<string | string[]>
-    datasets?: ChartDataSets[]
-    rawData?: any
-    labelDataKey?: string
-  }
-
-  interface ChartXAxe extends Chart.ChartXAxe {
-    categorySpacing?: number
-    barSpacing?: number
-    ticks?: TickOptions
-    axisTitle?: string
-  }
-  interface ChartYAxe extends ChartXAxe {}
-
-  interface GridLineOptions extends Chart.GridLineOptions {}
-  interface ChartLegendOptions extends Chart.ChartLegendOptions {}
-  interface ChartTooltipOptions extends Chart.ChartTooltipOptions {}
-  interface ChartTooltipItem extends Chart.ChartTooltipItem {}
-  interface RadialLinearScale extends Chart.RadialLinearScale {}
-  interface ChartPluginsOptions extends Chart.ChartPluginsOptions {}
-
-  interface Context {
-    dataset: ChartDataSets
-  }
-
-  interface DataLabelsPluginOptions {
-    display: (context: Context) => true | false | 'auto'
-    anchor: (context: Context) => 'center' | 'start' | 'end' | string
-    color: (context: Context) => string
-    font: (context: Context) => { size: number }
-    clamp: boolean
-    formatter: (value: any, context: Context) => string
-  }
-
-  interface ChartOptions extends Chart.ChartOptions {
-    scales: ChartScales
-    scale: RadialLinearScale
-    legend: ChartLegendOptions
-    tooltip: boolean /* show or hide tooltip */
-    tooltips: ChartTooltipOptions
-    multiAxis: boolean
-    defaultFontSize: number | string
-    defaultFontFamily: string
-    defaultFontColor: string
-    theme: Theme
-    stacked?: boolean
-    xGridLine: boolean
-    fillStyle: string
-    maintainAspectRatio?: boolean
-  }
-
-  interface ChartConfig {
-    type: string
-    data: ChartData
-    options: ChartOptions
-  }
-}

package/src/templates/bar-chart.ts

@@ -1,121 +0,0 @@
-const icon = new URL('../../icons/bar-chart.png', import.meta.url).href
-
-export default {
-  type: 'bar-chart',
-  description: 'ChartJS - barchart',
-  icon: icon,
-  group: 'chartAndGauge',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  model: {
-    type: 'chartjs',
-    top: 200,
-    left: 300,
-    width: 200,
-    height: 200,
-    chart: {
-      type: 'bar',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            label: 'series 1',
-            type: 'bar',
-            data: [],
-            backgroundColor: 'rgb(66, 110, 164)',
-            borderColor: 'rgb(66, 110, 164)',
-            borderWidth: 0,
-            dataKey: 'value',
-            yAxisID: 'left'
-          }
-        ],
-        labelDataKey: 'color'
-      },
-      options: {
-        theme: 'dark',
-        xGridLine: false,
-        yGridLine: true,
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: false
-              },
-              scaleLabel: {
-                labelString: '',
-                display: false
-              },
-              ticks: {
-                display: true
-              }
-            }
-          ],
-          yAxes: [
-            {
-              id: 'left',
-              position: 'left',
-              gridLines: {
-                display: true
-              },
-              scaleLabel: {
-                labelString: '',
-                display: false
-              },
-              ticks: {
-                autoMin: true,
-                autoMax: true,
-                display: true
-              }
-            },
-            {
-              id: 'right',
-              position: 'right',
-              display: false,
-              gridLines: {
-                display: false
-              },
-              scaleLabel: {
-                labelString: '',
-                display: false
-              },
-              ticks: {
-                autoMin: true,
-                autoMax: true,
-                display: true
-              }
-            }
-          ]
-        }
-      }
-    },
-    data: [
-      {
-        color: 'Red',
-        value: 12
-      },
-      {
-        color: 'Blue',
-        value: 19
-      },
-      {
-        color: 'Yellow',
-        value: 3
-      },
-      {
-        color: 'Green',
-        value: 5
-      },
-      {
-        color: 'Purple',
-        value: 2
-      },
-      {
-        color: 'Orange',
-        value: 3
-      }
-    ]
-  }
-}

package/src/templates/doughnut-chart.ts

@@ -1,55 +0,0 @@
-const icon = new URL('../../icons/doughnut-chart.png', import.meta.url).href
-
-export default {
-  type: 'doughnut-chart',
-  description: 'ChartJS - doughnut',
-  icon: icon,
-  group: 'chartAndGauge',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  model: {
-    type: 'chartjs',
-    top: 0,
-    left: 0,
-    width: 200,
-    height: 200,
-    chart: {
-      type: 'doughnut',
-      data: {
-        labels: [],
-        datasets: [
-          {
-            data: [],
-            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-            borderWidth: 0,
-            dataKey: 'value'
-          }
-        ],
-        labelDataKey: 'label'
-      },
-      options: {
-        theme: 'dark',
-        legend: {
-          display: true,
-          position: 'top'
-        },
-        animation: {
-          animateScale: true
-        }
-      }
-    },
-    data: [
-      {
-        label: 'Red',
-        value: 300
-      },
-      {
-        label: 'Blue',
-        value: 50
-      },
-      {
-        label: 'Yellow',
-        value: 100
-      }
-    ]
-  }
-}