@operato/scene-chartjs 9.1.1 → 10.0.0-beta.2

package/dist/chartjs.js

@@ -17,11 +17,8 @@ const NATURE = {
     help: 'scene/component/chartjs'
 };
 let ChartJS = class ChartJS extends HTMLOverlayElement {
-    constructor() {
-        super(...arguments);
-        this._isChartChanged = false;
-        this._isDataChanged = false;
-    }
+    _isChartChanged = false;
+    _isDataChanged = false;
     get nature() {
         return NATURE;
     }
@@ -32,9 +29,8 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
         return 'ox-chart';
     }
     dispose() {
-        var _a;
         ;
-        (_a = this.element) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.element?.dispose();
         super.dispose();
     }
     isShadowable() {
@@ -42,9 +38,9 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
     }
     createElement() {
         super.createElement();
-        var { width, height } = this.bounds;
-        var element = this.element;
-        var data = this.data;
+        const { width, height } = this.bounds;
+        const element = this.element;
+        const data = this.data;
         element.width = width;
         element.height = height;
         this._setChartConfig(element);
@@ -53,9 +49,9 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
     /* component.property => element.property */
     setElementProperties(element) {
         this.setState('lineWidth', 0); // border 표현이 자연스럽게 바뀌면 지울것.
-        var { chart: chartConfig } = this.state;
-        var { width, height } = this.bounds;
-        var data = this.data;
+        const { chart: chartConfig } = this.state;
+        const { width, height } = this.bounds;
+        const data = this.data;
         try {
             element.width = width;
             element.height = height;
@@ -73,8 +69,8 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
         }
     }
     _setChartConfig(element) {
-        var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state;
-        var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {};
+        const { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state;
+        const { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {};
         const fontOption = {
             defaultFontSize: fontSize,
             defaultFontFamily: fontFamily,
@@ -86,11 +82,10 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
             shadowBlur: blurSize,
             shadowColor: color
         };
-        var cloneChartConf = cloneDeep(chartConfig);
+        const cloneChartConf = cloneDeep(chartConfig);
         cloneChartConf.options = {
             ...cloneChartConf.options,
-            ...fontOption,
-            tooltips: false
+            ...fontOption
         };
         cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset) => {
             return {

package/dist/chartjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-chart.js'\n\nimport cloneDeep from 'lodash-es/cloneDeep.js'\n\nimport { ComponentNature, error, HTMLOverlayElement, Properties, sceneComponent } from '@hatiolab/things-scene'\n\nimport { OxChart } from './ox-chart.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'chartjs',\n      label: '',\n      name: 'chart'\n    }\n  ],\n  'value-property': 'data',\n  help: 'scene/component/chartjs'\n}\n\n@sceneComponent('chartjs')\nexport default class ChartJS extends HTMLOverlayElement {\n  private _isChartChanged = false\n  private _isDataChanged = false\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'ox-chart'\n  }\n\n  dispose(): void {\n    ;(this.element as OxChart)?.dispose()\n\n    super.dispose()\n  }\n\n  isShadowable() {\n    return false\n  }\n\n  createElement() {\n    super.createElement()\n\n    var { width, height } = this.bounds\n    var element = this.element as OxChart\n    var data = this.data\n\n    element.width = width\n    element.height = height\n\n    this._setChartConfig(element)\n    element.data = data\n  }\n\n  /* component.property => element.property */\n  setElementProperties(element: OxChart) {\n    this.setState('lineWidth', 0) // border 표현이 자연스럽게 바뀌면 지울것.\n\n    var { chart: chartConfig } = this.state\n    var { width, height } = this.bounds\n    var data = this.data\n\n    try {\n      element.width = width\n      element.height = height\n\n      if (chartConfig && this._isChartChanged) {\n        this._setChartConfig(element)\n        this._isChartChanged = false\n      }\n\n      if (this._isDataChanged) {\n        element.data = data\n        this._isDataChanged = false\n      }\n    } catch (e) {\n      error(e)\n    }\n  }\n\n  _setChartConfig(element: OxChart) {\n    var { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state\n    var { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {}\n\n    const fontOption = {\n      defaultFontSize: fontSize,\n      defaultFontFamily: fontFamily,\n      defaultFontColor: fontColor\n    }\n\n    const shadowOption = {\n      shadowOffsetX: left,\n      shadowOffsetY: top,\n      shadowBlur: blurSize,\n      shadowColor: color\n    }\n\n    var cloneChartConf = cloneDeep(chartConfig)\n\n    cloneChartConf.options = {\n      ...cloneChartConf.options,\n      ...fontOption,\n      tooltips: false\n    }\n\n    cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset: any) => {\n      return {\n        ...dataset,\n        ...shadowOption\n      }\n    })\n\n    element.options = cloneChartConf\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this._isChartChanged = false\n\n    if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)\n      this._isChartChanged = true\n\n    super.onchange(after, before)\n  }\n\n  onchangeData(data: any) {\n    this._isDataChanged = true\n  }\n}\n"]}
+{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-chart.js'\n\nimport cloneDeep from 'lodash-es/cloneDeep.js'\n\nimport { ComponentNature, error, HTMLOverlayElement, Properties, sceneComponent } from '@hatiolab/things-scene'\n\nimport { OxChart } from './ox-chart.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'chartjs',\n      label: '',\n      name: 'chart'\n    }\n  ],\n  'value-property': 'data',\n  help: 'scene/component/chartjs'\n}\n\n@sceneComponent('chartjs')\nexport default class ChartJS extends HTMLOverlayElement {\n  private _isChartChanged = false\n  private _isDataChanged = false\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get tagName() {\n    return 'ox-chart'\n  }\n\n  dispose(): void {\n    ;(this.element as OxChart)?.dispose()\n\n    super.dispose()\n  }\n\n  isShadowable() {\n    return false\n  }\n\n  createElement() {\n    super.createElement()\n\n    const { width, height } = this.bounds\n    const element = this.element as OxChart\n    const data = this.data\n\n    element.width = width\n    element.height = height\n\n    this._setChartConfig(element)\n    element.data = data\n  }\n\n  /* component.property => element.property */\n  setElementProperties(element: OxChart) {\n    this.setState('lineWidth', 0) // border 표현이 자연스럽게 바뀌면 지울것.\n\n    const { chart: chartConfig } = this.state\n    const { width, height } = this.bounds\n    const data = this.data\n\n    try {\n      element.width = width\n      element.height = height\n\n      if (chartConfig && this._isChartChanged) {\n        this._setChartConfig(element)\n        this._isChartChanged = false\n      }\n\n      if (this._isDataChanged) {\n        element.data = data\n        this._isDataChanged = false\n      }\n    } catch (e) {\n      error(e)\n    }\n  }\n\n  _setChartConfig(element: OxChart) {\n    const { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state\n    const { left = 0, top = 0, blurSize = 0, color = 'transparent' } = shadow || {}\n\n    const fontOption = {\n      defaultFontSize: fontSize,\n      defaultFontFamily: fontFamily,\n      defaultFontColor: fontColor\n    }\n\n    const shadowOption = {\n      shadowOffsetX: left,\n      shadowOffsetY: top,\n      shadowBlur: blurSize,\n      shadowColor: color\n    }\n\n    const cloneChartConf = cloneDeep(chartConfig)\n\n    cloneChartConf.options = {\n      ...cloneChartConf.options,\n      ...fontOption\n    }\n\n    cloneChartConf.data.datasets = cloneChartConf.data.datasets.map((dataset: any) => {\n      return {\n        ...dataset,\n        ...shadowOption\n      }\n    })\n\n    element.options = cloneChartConf\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this._isChartChanged = false\n\n    if ('chart' in after || 'fontSize' in after || 'fontFamily' in after || 'fontColor' in after || 'shadow' in after)\n      this._isChartChanged = true\n\n    super.onchange(after, before)\n  }\n\n  onchangeData(data: any) {\n    this._isDataChanged = true\n  }\n}\n"]}

package/dist/config-converter.d.ts

@@ -1 +1,5 @@
-export declare function convertConfigure(chart: SceneChart.ChartConfig): void;
+/**
+ * v2 형식의 scene-chart config를 Chart.js v4 형식으로 변환한다.
+ * 기존 보드 설정(v2 형식)을 입력받아 v4 호환 config를 새 객체로 반환.
+ */
+export declare function convertConfigure(chart: SceneChart.ChartConfig): SceneChart.ChartConfig;