@operato/chart 2.0.0-beta.25 → 2.0.0-beta.27

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

@@ -1,11 +1,17 @@
+import 'chartjs-plugin-datalabels'
+
 import { LitElement, html, css } from 'lit'
-import { property, query, customElement } from 'lit/decorators.js'
+import { property, query, state, customElement } from 'lit/decorators.js'
 import { Chart, ChartConfiguration } from 'chart.js/auto'
+import { convertConfigure } from './config-converter'
 
 @customElement('ox-chart-js')
-class OxChartJs extends LitElement {
-  @property({ type: Object }) config: ChartConfiguration | null = null
+export class OxChartJs extends LitElement {
+  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
+  @property({ type: Array }) data: { [key: string]: any }[] = []
+
   private chart: Chart | null = null
+  private chartjsConfig: ChartConfiguration | null = null
 
   @query('canvas') canvas!: HTMLCanvasElement
 
@@ -20,23 +26,132 @@ class OxChartJs extends LitElement {
     }
   `
 
-  firstUpdated() {
-    if (this.config) {
-      this.chart = new Chart(this.canvas, this.config)
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    if (this.chart) {
+      this.chart.destroy()
     }
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
+    var needUpdateData = false
+
     if (changedProperties.has('config') && this.config) {
+      this.chartjsConfig = convertConfigure(this.config, {}) as any
+
       this.chart && this.chart.destroy()
-      this.chart = new Chart(this.canvas, this.config)
-      console.log('new chart', this.chart)
+      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()
+  }
+
   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'
+      },
+      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 || ''
+
+        if (value === undefined) {
+          return value
+        }
+
+        var stringValue = 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 {

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

@@ -139,7 +139,9 @@ export class InputChartAbstract extends OxFormField {
       borderWidth: 1,
       dataKey: '',
       yAxisID: 'left',
-      color: '#000',
+      color: randomColor({
+        hue: new TinyColor('#fff').clone().toString()
+      }).toRgbString(),
       backgroundColor: '#FFFFFF',
       type: seriesType,
       stack: '',

package/src/types.d.ts

@@ -42,6 +42,8 @@ declare namespace OperatoChart {
     yGridLine?: boolean
     y2ndGridLine?: boolean
     multiAxis?: boolean
+    maintainAspectRatio?: boolean
+    plugins?: { [plugin: string]: any }
   }
 
   export interface LegendOptions {

package/stories/common.ts

@@ -45,3 +45,13 @@ export function getDefaultAxisOptions(): OperatoChart.AxisOptions {
     }
   }
 }
+
+export const data = [
+  { year: 2010, count: 10, average: 120 },
+  { year: 2011, count: 20, average: 110 },
+  { year: 2012, count: 15, average: 80 },
+  { year: 2013, count: 25, average: 130 },
+  { year: 2014, count: 22, average: 120 },
+  { year: 2015, count: 30, average: 60 },
+  { year: 2016, count: 28, average: 90 }
+]

package/stories/ox-input-chart-hbar.stories.ts

@@ -3,9 +3,8 @@ import { html, TemplateResult } from 'lit'
 import '../src/editors/ox-input-chart-hbar.js'
 import '../src/chartjs/ox-chart-js.js'
 import '../src/scichart/ox-scichart.js'
-import { convertConfigure } from '../src/chartjs/config-converter.js'
 
-import { getDefaultChartConfig } from './common.js'
+import { data, getDefaultChartConfig } from './common.js'
 
 export default {
   title: 'ox-input-chart-hbar',
@@ -79,6 +78,9 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
     }
   </style>
 
+  <div style="background-color: black; color: white;">
+    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+  </div>
   <div class="container light">
     <ox-input-chart-hbar
       id="editor"
@@ -88,7 +90,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
         const config = target.value
         const chartjs = document.querySelector('#chartjs') as HTMLElement
         if (chartjs) {
-          ;(chartjs as any).config = convertConfigure(config, {})
+          ;(chartjs as any).config = { ...config }
         }
         const scichart = document.querySelector('#scichart') as HTMLElement
         if (scichart) {
@@ -109,7 +111,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
       }}
     ></ox-input-chart-hbar>
     <div id="charts">
-      <ox-chart-js id="chartjs"></ox-chart-js>
+      <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
       <ox-scichart id="scichart"></ox-scichart>
     </div>
   </div>

package/stories/ox-input-chart-mixed.stories.ts

@@ -3,9 +3,8 @@ import { html, TemplateResult } from 'lit'
 import '../src/editors/ox-input-chart-mixed.js'
 import '../src/chartjs/ox-chart-js.js'
 import '../src/scichart/ox-scichart.js'
-import { convertConfigure } from '../src/chartjs/config-converter.js'
 
-import { getDefaultChartConfig } from './common.js'
+import { data, getDefaultChartConfig } from './common.js'
 
 export default {
   title: 'ox-input-chart-mixed',
@@ -79,6 +78,10 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
     }
   </style>
 
+  <div style="background-color: black; color: white;">
+    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+  </div>
+
   <div class="container light">
     <ox-input-chart-mixed
       id="editor"
@@ -88,7 +91,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
         const config = target.value
         const chartjs = document.querySelector('#chartjs') as HTMLElement
         if (chartjs) {
-          ;(chartjs as any).config = convertConfigure(config, {})
+          ;(chartjs as any).config = { ...config }
         }
         const scichart = document.querySelector('#scichart') as HTMLElement
         if (scichart) {
@@ -109,7 +112,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
       }}
     ></ox-input-chart-mixed>
     <div id="charts">
-      <ox-chart-js id="chartjs"></ox-chart-js>
+      <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
       <ox-scichart id="scichart"></ox-scichart>
     </div>
   </div>

package/stories/ox-input-chart-pie.stories.ts

@@ -2,9 +2,8 @@ import { html, TemplateResult } from 'lit'
 
 import '../src/editors/ox-input-chart-pie.js'
 import '../src/chartjs/ox-chart-js.js'
-import { convertConfigure } from '../src/chartjs/config-converter.js'
 
-import { getDefaultChartConfig } from './common.js'
+import { data, getDefaultChartConfig } from './common.js'
 
 export default {
   title: 'ox-input-chart-pie',
@@ -68,6 +67,10 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
     }
   </style>
 
+  <div style="background-color: black; color: white;">
+    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+  </div>
+
   <div class="container light">
     <ox-input-chart-pie
       id="editor"
@@ -75,9 +78,9 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
       @change=${(e: CustomEvent) => {
         const target = e.currentTarget as any
         const config = target.value
-        const chart = document.querySelector('#chart') as HTMLElement
-        if (chart) {
-          ;(chart as any).config = convertConfigure(config, {})
+        const chartjs = document.querySelector('#chartjs') as HTMLElement
+        if (chartjs) {
+          ;(chartjs as any).config = { ...config }
         }
 
         const container = document.querySelector('.container') as HTMLElement
@@ -93,7 +96,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
         }
       }}
     ></ox-input-chart-pie>
-    <ox-chart-js id="chart"></ox-chart-js>
+    <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
   </div>
 `
 

package/stories/ox-input-chart-radar.stories.ts

@@ -2,9 +2,8 @@ import { html, TemplateResult } from 'lit'
 
 import '../src/editors/ox-input-chart-radar.js'
 import '../src/chartjs/ox-chart-js.js'
-import { convertConfigure } from '../src/chartjs/config-converter.js'
 
-import { getDefaultChartConfig } from './common.js'
+import { data, getDefaultChartConfig } from './common.js'
 
 export default {
   title: 'ox-input-chart-radar',
@@ -68,6 +67,10 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
     }
   </style>
 
+  <div style="background-color: black; color: white;">
+    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+  </div>
+
   <div class="container light">
     <ox-input-chart-radar
       id="editor"
@@ -75,9 +78,9 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
       @change=${(e: CustomEvent) => {
         const target = e.currentTarget as any
         const config = target.value
-        const chart = document.querySelector('#chart') as HTMLElement
-        if (chart) {
-          ;(chart as any).config = convertConfigure(config, {})
+        const chartjs = document.querySelector('#chartjs') as HTMLElement
+        if (chartjs) {
+          ;(chartjs as any).config = { ...config }
         }
 
         const container = document.querySelector('.container') as HTMLElement
@@ -93,7 +96,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
         }
       }}
     ></ox-input-chart-radar>
-    <ox-chart-js id="chart"></ox-chart-js>
+    <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
   </div>
 `
 

package/tsconfig.json

@@ -20,5 +20,5 @@
     "incremental": true,
     "types": ["node", "mocha"]
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "*.d.ts"]
 }