@operato/scene-chartjs 0.0.5

package/src/editors/property-editor-chartjs.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@polymer/iron-icon'
+import '@polymer/iron-icons'
+import '@polymer/paper-icon-button'
+import '@polymer/paper-tabs'
+import './property-editor-chartjs-hbar'
+import './property-editor-chartjs-mixed'
+import './property-editor-chartjs-pie'
+import './property-editor-chartjs-radar'
+
+import { css, html } from 'lit'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+
+export default class ChartJSEditor extends OxPropertyEditor {
+  static get is() {
+    return 'property-editor-chartjs'
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          padding: 5px;
+        }
+
+        #chart-type {
+          display: grid;
+          grid-template-columns: repeat(10, 1fr);
+          grid-gap: 5px;
+        }
+
+        #chart-type > label {
+          box-sizing: border-box;
+          grid-column: span 3;
+
+          text-align: right;
+
+          color: var(--primary-text-color);
+          font-size: 0.8em;
+          line-height: 2;
+          text-transform: capitalize;
+        }
+
+        #chart-type > input {
+          box-sizing: border-box;
+          grid-column: span 7;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+      `
+    ]
+  }
+
+  editorTemplate(props: any) {
+    return html`
+      ${props.value
+        ? html`
+            <div id="chart-type">
+              <label> <i18n-msg msgid="label.chart-type">Chart Type</i18n-msg> </label>
+              <input type="text" .value=${props.value.type} readonly />
+            </div>
+          `
+        : html``}
+      ${!props.value
+        ? html``
+        : props.value.type == 'line'
+        ? html` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `
+        : props.value.type == 'horizontalBar'
+        ? html` <property-editor-chartjs-hbar .value=${props.value} fullwidth></property-editor-chartjs-hbar> `
+        : props.value.type == 'bar'
+        ? html` <property-editor-chartjs-mixed .value=${props.value} fullwidth></property-editor-chartjs-mixed> `
+        : props.value.type == 'pie'
+        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+        : props.value.type == 'doughnut'
+        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+        : props.value.type == 'polarArea'
+        ? html` <property-editor-chartjs-pie .value=${props.value} fullwidth></property-editor-chartjs-pie> `
+        : props.value.type == 'radar'
+        ? html` <property-editor-chartjs-radar .value=${props.value} fullwidth></property-editor-chartjs-radar> `
+        : html``}
+    `
+  }
+}
+
+customElements.define(ChartJSEditor.is, ChartJSEditor)

package/src/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import './chartjs'
+export default './chartjs'

package/src/ox-chart.ts

@@ -0,0 +1,150 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+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 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 _initialized?: boolean
+  private _chart?: SceneChart
+
+  @query('canvas') _canvas!: HTMLCanvasElement
+
+  firstUpdated() {
+    this.initChart()
+  }
+
+  render() {
+    return html` <canvas></canvas> `
+  }
+
+  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
+    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()
+
+    this._initialized = true
+  }
+
+  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) {
+        //@ts-ignore
+        return !!context.dataset.displayValue
+      },
+      anchor: function (context) {
+        //@ts-ignore
+        return context.dataset.dataLabelAnchor || 'center'
+      },
+      color: function (context) {
+        //@ts-ignore
+        return context.dataset.defaultFontColor || '#000'
+      },
+      font: function (context) {
+        return {
+          //@ts-ignore
+          size: context.dataset.defaultFontSize
+        }
+      },
+      clamp: true,
+      formatter: function (value, context) {
+        //@ts-ignore
+        var prefix = context.dataset.valuePrefix || ''
+        //@ts-ignore
+        var suffix = context.dataset.valueSuffix || ''
+        if (value == undefined) return value
+
+        var stringValue = String(value)
+        return prefix + stringValue.toLocaleString() + suffix
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import Chart from 'chart.js'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+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
+
+    seriesData.forEach((sdata, sIndex) => {
+      sdata.forEach((data: SceneChart.Data, i: number) => {
+        if (!eval(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

@@ -0,0 +1,138 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+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 in dataArray) {
+    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 (Number(currData[seriesKeys[i]]) == NaN) {
+        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

@@ -0,0 +1,152 @@
+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
+    valuePrefix: string
+    valueSuffix: string
+    displayValue: string
+    dataLabelAnchor: string
+    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 {}
+  // datalabels?: DataLabelsPluginOptions
+  // [plugin: string]: any
+  // }
+
+  // interface ChartOptions {
+  //   responsive?: boolean
+  //   responsiveAnimationDuration?: number
+  //   aspectRatio?: number
+  //   maintainAspectRatio?: boolean
+  //   events?: string[]
+  //   legendCallback?(chart: Chart): string
+  //   onHover?(this: Chart, event: MouseEvent, activeElements: Array<{}>): any
+  //   onClick?(event?: MouseEvent, activeElements?: Array<{}>): any
+  //   onResize?(this: Chart, newSize: ChartSize): void
+  //   title?: ChartTitleOptions
+  //   legend?: ChartLegendOptions
+  //   tooltips?: ChartTooltipOptions
+  //   hover?: ChartHoverOptions
+  //   animation?: ChartAnimationOptions
+  //   elements?: ChartElementsOptions
+  //   layout?: ChartLayoutOptions
+  //   scale?: RadialLinearScale
+  //   scales?: ChartScales | LinearScale | LogarithmicScale | TimeScale
+  //   showLines?: boolean
+  //   spanGaps?: boolean
+  //   cutoutPercentage?: number
+  //   circumference?: number
+  //   rotation?: number
+  //   devicePixelRatio?: number
+  //   plugins?: 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
+    tooltips: ChartTooltipOptions
+    multiAxis: boolean
+    defaultFontSize: number | string
+    defaultFontFamily: string
+    defaultFontColor: string
+    theme: Theme
+    stacked?: boolean
+    xGridLine: boolean
+    fillStyle: string
+    maintainAspectRatio?: boolean
+    // plugins: ChartPluginsOptions
+
+    // responsive?: boolean
+    // responsiveAnimationDuration?: number
+    // aspectRatio?: number
+    // events?: string[]
+    // legendCallback?(chart: Chart): string
+    // onHover?(this: Chart, event: MouseEvent, activeElements: Array<{}>): any
+    // onClick?(event?: MouseEvent, activeElements?: Array<{}>): any
+    // onResize?(this: Chart, newSize: ChartSize): void
+    // title?: ChartTitleOptions
+    // hover?: ChartHoverOptions
+    // animation?: ChartAnimationOptions
+    // elements?: ChartElementsOptions
+    // layout?: ChartLayoutOptions
+    // // scale?: RadialLinearScale
+    // // scales?: ChartScales | LinearScale | LogarithmicScale | TimeScale
+    // showLines?: boolean
+    // spanGaps?: boolean
+    // cutoutPercentage?: number
+    // circumference?: number
+    // rotation?: number
+    // devicePixelRatio?: number
+  }
+
+  interface ChartConfig {
+    type: string
+    data: ChartData
+    options: ChartOptions
+  }
+}

package/templates/bar-chart.js

@@ -0,0 +1,124 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import icon from '../assets/bar-chart.png'
+
+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
+      }
+    ]
+  }
+}