@operato/scene-chartjs 0.0.5

package/dist/ox-chart.js

@@ -0,0 +1,137 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import 'chartjs-plugin-datalabels';
+import 'chartjs-plugin-style';
+import { LitElement, 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);
+let OxChart = class OxChart extends LitElement {
+    firstUpdated() {
+        this.initChart();
+    }
+    render() {
+        return html ` <canvas></canvas> `;
+    }
+    updated(changes) {
+        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);
+        this._chart = new Chart(this._canvas, {
+            type,
+            data,
+            options
+        });
+        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);
+        this._chart.type = type;
+        this._chart.data = data;
+        this._chart.options = options;
+        this._chart.data.rawData = this.data;
+        this._chart.update();
+    }
+    attachPluginOptions(options) {
+        if (!options.plugins) {
+            options.plugins = {};
+        }
+        this.attachDatalabelPluginOptions(options.plugins);
+    }
+    attachDatalabelPluginOptions(pluginOptions) {
+        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;
+            }
+        };
+    }
+};
+__decorate([
+    property({ type: Number })
+], OxChart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], OxChart.prototype, "height", void 0);
+__decorate([
+    property({ type: Object })
+], OxChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Object })
+], OxChart.prototype, "data", void 0);
+__decorate([
+    query('canvas')
+], OxChart.prototype, "_canvas", void 0);
+OxChart = __decorate([
+    customElement('ox-chart')
+], OxChart);
+export { OxChart };
+//# sourceMappingURL=ox-chart.js.map

package/dist/ox-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-chart.js","sourceRoot":"","sources":["../src/ox-chart.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'chartjs-plugin-datalabels'\nimport 'chartjs-plugin-style'\n\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Chart } from 'chart.js'\nimport DataBinderPlugin from './plugins/chartjs-plugin-data-binder'\nimport { convertConfigure } from './config-converter'\n\nChart.plugins.register(DataBinderPlugin)\n\n@customElement('ox-chart')\nexport class OxChart extends LitElement {\n  @property({ type: Number }) width!: number\n  @property({ type: Number }) height!: number\n  @property({ type: Object }) options!: SceneChart.ChartConfig\n  @property({ type: Object }) data!: SceneChart.ChartData\n\n  private _initialized?: boolean\n  private _chart?: SceneChart\n\n  @query('canvas') _canvas!: HTMLCanvasElement\n\n  firstUpdated() {\n    this.initChart()\n  }\n\n  render() {\n    return html` <canvas></canvas> `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('width') || changes.has('height')) {\n      this.updateChartSize()\n    }\n\n    if (changes.has('options')) {\n      this.updateChartConfig()\n    }\n\n    if (changes.has('data')) {\n      this._chart!.data.rawData = this.data\n      this._chart!.update()\n    }\n  }\n\n  initChart() {\n    const { data, options, type } = this.options\n    options!.maintainAspectRatio = false\n\n    this.attachPluginOptions(options)\n    convertConfigure(this.options as SceneChart.ChartConfig)\n\n    this._chart = new Chart(this._canvas, {\n      type,\n      data,\n      options\n    }) as SceneChart\n\n    this.updateChartSize()\n\n    this._initialized = true\n  }\n\n  updateChartSize() {\n    const width = Math.floor(this.width)\n    const height = Math.floor(this.height)\n\n    this._canvas.style.width = `${width}px`\n    this._canvas.style.height = `${height}px`\n\n    const _ = () => {\n      if (this._canvas.offsetWidth == 0 || this._canvas.offsetHeight == 0) {\n        requestAnimationFrame(_)\n      } else {\n        /*\n        주의 : chart.resize() 내에서 pixel ratio를 감안해서, canvas 의 width, height를 설정하기때문에,\n        별도 처리가 필요하지 않다.\n        */\n        this._chart!.resize()\n      }\n    }\n\n    requestAnimationFrame(_)\n  }\n\n  updateChartConfig() {\n    if (!this._chart) return\n\n    const { data, options, type } = this.options\n    options!.maintainAspectRatio = false\n\n    this.attachPluginOptions(options)\n    convertConfigure(this.options as SceneChart.ChartConfig)\n\n    this._chart.type = type\n    this._chart.data = data\n    this._chart.options = options\n    this._chart.data.rawData = this.data\n    this._chart.update()\n  }\n\n  attachPluginOptions(options: SceneChart.ChartOptions) {\n    if (!options.plugins) {\n      options.plugins = {}\n    }\n\n    this.attachDatalabelPluginOptions(options.plugins)\n  }\n\n  attachDatalabelPluginOptions(pluginOptions: SceneChart.ChartPluginsOptions) {\n    pluginOptions.datalabels = {\n      ...pluginOptions.datalabels,\n      display: function (context) {\n        //@ts-ignore\n        return !!context.dataset.displayValue\n      },\n      anchor: function (context) {\n        //@ts-ignore\n        return context.dataset.dataLabelAnchor || 'center'\n      },\n      color: function (context) {\n        //@ts-ignore\n        return context.dataset.defaultFontColor || '#000'\n      },\n      font: function (context) {\n        return {\n          //@ts-ignore\n          size: context.dataset.defaultFontSize\n        }\n      },\n      clamp: true,\n      formatter: function (value, context) {\n        //@ts-ignore\n        var prefix = context.dataset.valuePrefix || ''\n        //@ts-ignore\n        var suffix = context.dataset.valueSuffix || ''\n        if (value == undefined) return value\n\n        var stringValue = String(value)\n        return prefix + stringValue.toLocaleString() + suffix\n      }\n    }\n  }\n}\n"]}

package/dist/plugins/chart-series-highlight.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    id: string;
+    beforeDraw: (chartInstance: SceneChart) => void;
+};
+export default _default;

package/dist/plugins/chart-series-highlight.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+function seriesHighlight(chartInstance, seriesData) {
+    var _a;
+    (_a = chartInstance.data.datasets) === null || _a === void 0 ? void 0 : _a.forEach(dataset => {
+        let highlight = dataset.highlight;
+        if (!highlight) {
+            return;
+        }
+        let highlightColor = highlight.color;
+        let highlightCondition = highlight.condition;
+        seriesData.forEach((sdata, sIndex) => {
+            sdata.forEach((data, i) => {
+                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) {
+        if (!chartInstance.data.rawData) {
+            return;
+        }
+        let seriesData = chartInstance.data.rawData.seriesData;
+        seriesHighlight(chartInstance, seriesData);
+    }
+};
+//# sourceMappingURL=chart-series-highlight.js.map

package/dist/plugins/chart-series-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-series-highlight.js","sourceRoot":"","sources":["../../src/plugins/chart-series-highlight.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,SAAS,eAAe,CAAC,aAAyB,EAAE,UAAiC;;IACnF,MAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,0CAAE,OAAO,CAAC,OAAO,CAAC,EAAE;QAC7C,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;QACjC,IAAI,CAAC,SAAS,EAAE;YACd,OAAM;SACP;QAED,IAAI,cAAc,GAAG,SAAS,CAAC,KAAK,CAAA;QACpC,IAAI,kBAAkB,GAAG,SAAS,CAAC,SAAS,CAAA;QAE5C,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;YACnC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAqB,EAAE,CAAS,EAAE,EAAE;gBACjD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE;oBAC7B,OAAM;iBACP;gBAED,IAAI,IAAI,GAAG,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;gBAC/C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,GAAG,cAAc,CAAA;gBACpD,YAAY;gBACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,GAAG,cAAc,CAAA;gBAEzD,2CAA2C;YAC7C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,eAAe;IACb,EAAE,EAAE,wBAAwB;IAC5B,UAAU,EAAE,UAAU,aAAyB;QAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE;YAC/B,OAAM;SACP;QAED,IAAI,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAA;QACtD,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;IAC5C,CAAC;CACF,CAAA","sourcesContent":["import Chart from 'chart.js'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nfunction seriesHighlight(chartInstance: SceneChart, seriesData: SceneChart.DataSeries) {\n  chartInstance.data.datasets?.forEach(dataset => {\n    let highlight = dataset.highlight\n    if (!highlight) {\n      return\n    }\n\n    let highlightColor = highlight.color\n    let highlightCondition = highlight.condition\n\n    seriesData.forEach((sdata, sIndex) => {\n      sdata.forEach((data: SceneChart.Data, i: number) => {\n        if (!eval(highlightCondition)) {\n          return\n        }\n\n        let meta = chartInstance.getDatasetMeta(sIndex)\n        meta.data[i]._model.backgroundColor = highlightColor\n        //@ts-ignore\n        meta.data[i]._model.hoverBackgroundColor = highlightColor\n\n        // dataset.backgroundColor = highlightColor\n      })\n    })\n  })\n}\n\nexport default {\n  id: 'chart-series-highlight',\n  beforeDraw: function (chartInstance: SceneChart) {\n    if (!chartInstance.data.rawData) {\n      return\n    }\n\n    let seriesData = chartInstance.data.rawData.seriesData\n    seriesHighlight(chartInstance, seriesData)\n  }\n}\n"]}

package/dist/plugins/chartjs-plugin-data-binder.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    id: string;
+    beforeUpdate: (chartInstance: SceneChart) => void;
+};
+export default _default;

package/dist/plugins/chartjs-plugin-data-binder.js

@@ -0,0 +1,111 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+function convertObject(dataArray, chartInstance) {
+    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);
+    }
+    let label = chartInstance.data.labelDataKey;
+    let seriesKeys = [];
+    for (let i in chartInstance.data.datasets) {
+        seriesKeys.push(chartInstance.data.datasets[Number(i)].dataKey);
+    }
+    let seriesData = [];
+    let labelData = [];
+    let convertedObject = {
+        seriesData,
+        labelData
+    };
+    for (let i in dataArray) {
+        let currData = dataArray[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) {
+    if (!array || array.length === 0) {
+        return null;
+    }
+    let indexKeyMap = {};
+    let value = [];
+    for (let key in array[0]) {
+        indexKeyMap[key] = array[0][key];
+    }
+    for (var i = 1; i < array.length; i++) {
+        let object = {};
+        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) {
+    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) {
+    let labelData = chartInstance.data.rawData.labelData;
+    chartInstance.config.data.labels = labelData || [];
+}
+export default {
+    id: 'data-binder',
+    beforeUpdate: function (chartInstance) {
+        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);
+    }
+};
+//# sourceMappingURL=chartjs-plugin-data-binder.js.map

package/dist/plugins/chartjs-plugin-data-binder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartjs-plugin-data-binder.js","sourceRoot":"","sources":["../../src/plugins/chartjs-plugin-data-binder.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nfunction convertObject(\n  dataArray: string | SceneChart.DataSeries | Object,\n  chartInstance: SceneChart\n): null | Object | SceneChart.DataSeries {\n  if (!dataArray) {\n    return null\n  }\n\n  if (typeof dataArray == 'string') {\n    try {\n      dataArray = JSON.parse(dataArray)\n    } catch (e) {\n      console.warn('invalid chart data format', e)\n      return null\n    }\n  }\n\n  if (!(dataArray instanceof Array)) {\n    // is not Array\n    if (dataArray instanceof Object) {\n      return dataArray\n    }\n    return null\n  }\n\n  if (dataArray.length === 0) {\n    return null\n  }\n\n  // modeling중 변수 기본값에 대한 처리\n  if (dataArray[0].hasOwnProperty('__field1')) {\n    dataArray = toObjectArrayValue(dataArray) as SceneChart.DataSeries\n  }\n\n  let label = chartInstance.data.labelDataKey\n  let seriesKeys = []\n\n  for (let i in chartInstance.data.datasets) {\n    seriesKeys.push(chartInstance.data.datasets[Number(i)].dataKey)\n  }\n\n  let seriesData: SceneChart.DataSeries = []\n  let labelData: SceneChart.DataSeries = []\n\n  let convertedObject = {\n    seriesData,\n    labelData\n  }\n\n  for (let i in dataArray) {\n    let currData: SceneChart.Data = (dataArray as SceneChart.DataSeries)[Number(i)]\n    labelData.push(currData[label!])\n\n    for (let i in seriesKeys) {\n      if (!seriesKeys[i]) continue\n\n      if (!seriesData[i]) seriesData[i] = []\n\n      // 값이 NaN 경우엔 차트를 그리지 않음\n      if (Number(currData[seriesKeys[i]]) == NaN) {\n        currData[seriesKeys[i]] = NaN\n      }\n\n      seriesData[i].push(currData[seriesKeys[i]])\n    }\n  }\n\n  return convertedObject\n}\n\nfunction toObjectArrayValue(array: SceneChart.DataSeries): SceneChart.DataSeries | null {\n  if (!array || array.length === 0) {\n    return null\n  }\n\n  let indexKeyMap: SceneChart.Data = {}\n  let value = []\n\n  for (let key in array[0]) {\n    indexKeyMap[key] = array[0][key]\n  }\n\n  for (var i = 1; i < array.length; i++) {\n    let object: SceneChart.Data = {}\n    let thisObject = array[i]\n\n    for (let key in indexKeyMap) {\n      let k = indexKeyMap[key]\n      let v = thisObject[key]\n      object[k] = v\n    }\n\n    value.push(object)\n  }\n\n  return value\n}\n\nfunction updateSeriesDatas(chartInstance: SceneChart) {\n  if (!chartInstance.data.rawData) {\n    return\n  }\n\n  let seriesData = chartInstance.data.rawData.seriesData\n\n  if (!seriesData || seriesData.length === 0) seriesData = [null]\n\n  for (let key in chartInstance.data.datasets) {\n    chartInstance.data.datasets[Number(key)].data = seriesData[key] || []\n  }\n}\n\nfunction updateLabelDatas(chartInstance: SceneChart) {\n  let labelData = chartInstance.data.rawData.labelData\n  chartInstance.config.data!.labels = labelData || []\n}\n\nexport default {\n  id: 'data-binder',\n  beforeUpdate: function (chartInstance: SceneChart) {\n    if (!chartInstance.data) return\n\n    if (!chartInstance.data.rawData) chartInstance.data.rawData = []\n\n    chartInstance.data.rawData = convertObject(chartInstance.data.rawData, chartInstance) || {\n      seriesData: [],\n      labelData: []\n    }\n\n    let seriesData = chartInstance.data.rawData.seriesData\n    updateLabelDatas(chartInstance)\n    updateSeriesDatas(chartInstance)\n  }\n}\n"]}