@operato/scene-chartjs 10.0.0-beta.1 → 10.0.0-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chartjs.js +10 -4
- package/dist/chartjs.js.map +1 -1
- package/dist/ox-chart.js +0 -4
- package/dist/ox-chart.js.map +1 -1
- package/package.json +2 -2
package/dist/chartjs.js
CHANGED
|
@@ -70,16 +70,22 @@ let ChartJS = class ChartJS extends HTMLOverlayElement {
|
|
|
70
70
|
}
|
|
71
71
|
_setChartConfig(element) {
|
|
72
72
|
const { chart: chartConfig, fontSize = 12, fontFamily, fontColor, shadow } = this.state;
|
|
73
|
-
|
|
73
|
+
// shadow 신규 키 (offsetX/offsetY/blur) 우선, 옛 키 (left/top/blurSize) 는 fallback —
|
|
74
|
+
// drawer (things-scene/effect/shadow.ts) 의 readShadow 와 동일 규칙.
|
|
75
|
+
const s = (shadow || {});
|
|
76
|
+
const offsetX = s.offsetX ?? s.left ?? 0;
|
|
77
|
+
const offsetY = s.offsetY ?? s.top ?? 0;
|
|
78
|
+
const blur = s.blur ?? s.blurSize ?? 0;
|
|
79
|
+
const color = s.color ?? 'transparent';
|
|
74
80
|
const fontOption = {
|
|
75
81
|
defaultFontSize: fontSize,
|
|
76
82
|
defaultFontFamily: fontFamily,
|
|
77
83
|
defaultFontColor: fontColor
|
|
78
84
|
};
|
|
79
85
|
const shadowOption = {
|
|
80
|
-
shadowOffsetX:
|
|
81
|
-
shadowOffsetY:
|
|
82
|
-
shadowBlur:
|
|
86
|
+
shadowOffsetX: offsetX,
|
|
87
|
+
shadowOffsetY: offsetY,
|
|
88
|
+
shadowBlur: blur,
|
|
83
89
|
shadowColor: color
|
|
84
90
|
};
|
|
85
91
|
const cloneChartConf = cloneDeep(chartConfig);
|
package/dist/chartjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAA;AAEtB,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAE9C,OAAO,EAAmB,KAAK,EAAE,kBAAkB,EAAc,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI/G,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,OAAO;SACd;KACF;IACD,gBAAgB,EAAE,MAAM;IACxB,IAAI,EAAE,yBAAyB;CAChC,CAAA;AAGc,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,kBAAkB;IAC7C,eAAe,GAAG,KAAK,CAAA;IACvB,cAAc,GAAG,KAAK,CAAA;IAE9B,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO;QACT,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,OAAO;QACL,CAAC;QAAC,IAAI,CAAC,OAAmB,EAAE,OAAO,EAAE,CAAA;QAErC,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC;IAED,YAAY;QACV,OAAO,KAAK,CAAA;IACd,CAAC;IAED,aAAa;QACX,KAAK,CAAC,aAAa,EAAE,CAAA;QAErB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACrC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAkB,CAAA;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEtB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QAEvB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;QAC7B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;IACrB,CAAC;IAED,4CAA4C;IAC5C,oBAAoB,CAAC,OAAgB;QACnC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAA,CAAC,4BAA4B;QAE1D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACzC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAEtB,IAAI,CAAC;YACH,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;YACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;YAEvB,IAAI,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;gBAC7B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;YAC9B,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;gBACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;YAC7B,CAAC;QACH,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,CAAC,CAAC,CAAC,CAAA;QACV,CAAC;IACH,CAAC;IAED,eAAe,CAAC,OAAgB;QAC9B,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACvF,MAAM,EAAE,IAAI,GAAG,CAAC,
|
|
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 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 // shadow 신규 키 (offsetX/offsetY/blur) 우선, 옛 키 (left/top/blurSize) 는 fallback —\n // drawer (things-scene/effect/shadow.ts) 의 readShadow 와 동일 규칙.\n const s = (shadow || {}) as {\n offsetX?: number\n offsetY?: number\n blur?: number\n left?: number\n top?: number\n blurSize?: number\n color?: string\n }\n const offsetX = s.offsetX ?? s.left ?? 0\n const offsetY = s.offsetY ?? s.top ?? 0\n const blur = s.blur ?? s.blurSize ?? 0\n const color = s.color ?? 'transparent'\n\n const fontOption = {\n defaultFontSize: fontSize,\n defaultFontFamily: fontFamily,\n defaultFontColor: fontColor\n }\n\n const shadowOption = {\n shadowOffsetX: offsetX,\n shadowOffsetY: offsetY,\n shadowBlur: blur,\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/ox-chart.js
CHANGED
|
@@ -44,10 +44,6 @@ const V2CoordPlugin = {
|
|
|
44
44
|
};
|
|
45
45
|
Chart.register(ChartDataLabels, DataBinderPlugin, SeriesHighlightPlugin, V2CoordPlugin);
|
|
46
46
|
let OxChart = class OxChart extends LitElement {
|
|
47
|
-
width;
|
|
48
|
-
height;
|
|
49
|
-
options;
|
|
50
|
-
data;
|
|
51
47
|
_chart;
|
|
52
48
|
static styles = css `
|
|
53
49
|
:host {
|
package/dist/ox-chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-chart.js","sourceRoot":"","sources":["../src/ox-chart.ts"],"names":[],"mappings":";AAAA,OAAO,eAAe,MAAM,2BAA2B,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,gBAAgB,MAAM,yCAAyC,CAAA;AACtE,OAAO,qBAAqB,MAAM,qCAAqC,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD;;;;;;;;;;;;GAYG;AACH,MAAM,aAAa,GAAG;IACpB,EAAE,EAAE,SAAS;IACb,WAAW,CAAC,KAAU,EAAE,IAAS;QAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;QACrC,IAAI,CAAC,WAAW;YAAE,OAAM;QAExB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAA;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAEvC,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAA;QACnC,MAAM,OAAO,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAA;QAC1E,MAAM,OAAO,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAA;QAC1E,IAAI,OAAO,KAAK,SAAS;YAAE,OAAM;QAEjC,MAAM,GAAG,GAAG,KAAK,CAAC,uBAAuB,CAAA;QAEzC,8DAA8D;QAC9D,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,CAAA;QAClF,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAA;QACnF,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACpD,CAAC;CACF,CAAA;AAED,KAAK,CAAC,QAAQ,CAAC,eAAe,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,aAAa,CAAC,CAAA;AAGhF,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IACT,KAAK,CAAS;IACd,MAAM,CAAS;IACf,OAAO,CAAyB;IAChC,IAAI,CAAuB;IAE/C,MAAM,CAAoB;IAIlC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAA;;;;;;;;GAQlB,CAAA;IAED,YAAY;QACV,IAAI,CAAC,SAAS,EAAE,CAAA;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,CAAA;IAClC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,CAAA;QACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;YACpC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,SAAiC;QACpD,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAChD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;QAElD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE;YACpC,IAAI,EAAE,SAAS,CAAC,IAAW;YAC3B,IAAI,EAAE,SAAS,CAAC,IAAW;YAC3B,OAAO,EAAE,SAAS,CAAC,OAAc;SAClC,CAA0B,CAAA;QAE3B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,SAAS;QACP,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAiC,CAAC,CAAA;QAC1E,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAE3C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IAC5C,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;QAChD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;QAElD,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAExB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;IACtB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QAExB,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAiC,CAAC,CAAA;QAC1E,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAE3C,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;QAErB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;QAC1C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;QACpC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;IACtB,CAAC;IAED,mBAAmB,CAAC,OAAgC;QAClD,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO,CAAC,OAAO,GAAG,EAAE,CAAA;QACtB,CAAC;QAED,IAAI,CAAC,4BAA4B,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IACpD,CAAC;IAED,4BAA4B,CAAC,aAA6C;QACxE,aAAa,CAAC,UAAU,GAAG;YACzB,GAAG,aAAa,CAAC,UAAU;YAC3B,OAAO,EAAE,UAAU,OAAY;gBAC7B,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,IAAI,KAAK,CAAA;gBAC1D,OAAO,YAAY,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAA;YAClF,CAAC;YACD,MAAM,EAAE,UAAU,OAAY;gBAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,IAAI,QAAQ,CAAA;YACpD,CAAC;YACD,MAAM,EAAE,UAAU,OAAY;gBAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,IAAI,CAAC,CAAA;YAC7C,CAAC;YACD,KAAK,EAAE,UAAU,OAAY;gBAC3B,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,IAAI,QAAQ,CAAA;YACpD,CAAC;YACD,QAAQ,EAAE,UAAU,OAAY;gBAC9B,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,CAAA;YAC/C,CAAC;YACD,KAAK,EAAE,UAAU,OAAY;gBAC3B,OAAO,OAAO,CAAC,OAAO,EAAE,gBAAgB,IAAI,MAAM,CAAA;YACpD,CAAC;YACD,IAAI,EAAE,UAAU,OAAY;gBAC1B,OAAO;oBACL,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,eAAe;oBACtC,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,iBAAiB;iBACjD,CAAA;YACH,CAAC;YACD,KAAK,EAAE,IAAI;YACX,SAAS,EAAE,UAAU,KAAU,EAAE,OAAY;gBAC3C,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAA;gBAChD,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAA;gBAChD,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAA;gBAChD,IAAI,KAAK,IAAI,SAAS;oBAAE,OAAO,KAAK,CAAA;gBAEpC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAA;gBAC/F,OAAO,MAAM,GAAG,WAAW,GAAG,MAAM,CAAA;YACtC,CAAC;SACF,CAAA;IACH,CAAC;;AAxI2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAA4B;AAI9B;IAAxB,KAAK,CAAC,QAAQ,CAAC;wCAAmC;AARxC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0InB","sourcesContent":["import ChartDataLabels from 'chartjs-plugin-datalabels'\n\nimport { LitElement, PropertyValues, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Chart } from 'chart.js/auto'\nimport { format as formatText } from '@operato/utils/format.js'\nimport DataBinderPlugin from './plugins/chartjs-plugin-data-binder.js'\nimport SeriesHighlightPlugin from './plugins/chart-series-highlight.js'\nimport { convertConfigure } from './config-converter.js'\n\n/**\n * Chart.js v4의 CSS transform 좌표 보정 플러그인.\n *\n * v4는 offsetX / chart.width로 마우스 좌표를 계산하는데,\n * offsetX(unscaled)와 chart.width(때에 따라 scaled/unscaled)의\n * 좌표계가 불일치할 수 있다.\n *\n * v2는 (clientX - rect.left) / rect.width로 계산했으므로\n * 둘 다 getBoundingClientRect 기반(= 항상 같은 좌표계)이어서\n * CSS transform과 무관하게 정확했다.\n *\n * 이 플러그인은 beforeEvent에서 v2 방식으로 좌표를 재계산한다.\n */\nconst V2CoordPlugin = {\n id: 'v2coord',\n beforeEvent(chart: any, args: any) {\n const nativeEvent = args.event.native\n if (!nativeEvent) return\n\n const canvas = chart.canvas\n const rect = canvas.getBoundingClientRect()\n if (!rect.width || !rect.height) return\n\n const touches = nativeEvent.touches\n const clientX = touches?.length ? touches[0].clientX : nativeEvent.clientX\n const clientY = touches?.length ? touches[0].clientY : nativeEvent.clientY\n if (clientX === undefined) return\n\n const dpr = chart.currentDevicePixelRatio\n\n // v2 공식: clientX와 rect.width 모두 visual(scaled) 좌표계 → 비율 항상 정확\n args.event.x = Math.round((clientX - rect.left) / rect.width * canvas.width / dpr)\n args.event.y = Math.round((clientY - rect.top) / rect.height * canvas.height / dpr)\n args.inChartArea = chart.isPointInArea(args.event)\n }\n}\n\nChart.register(ChartDataLabels, DataBinderPlugin, SeriesHighlightPlugin, V2CoordPlugin)\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 _chart?: SceneChart | null\n\n @query('canvas') declare _canvas: HTMLCanvasElement\n\n static styles = css`\n :host {\n display: block;\n }\n canvas {\n width: 100%;\n height: 100%;\n }\n `\n\n firstUpdated() {\n this.initChart()\n }\n\n render() {\n return html` <canvas></canvas> `\n }\n\n dispose() {\n this._chart?.destroy()\n this._chart = null\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') && this._chart) {\n this._chart.data.rawData = this.data\n this._chart.update()\n }\n }\n\n private _createChart(converted: SceneChart.ChartConfig): SceneChart {\n this.style.width = `${Math.floor(this.width)}px`\n this.style.height = `${Math.floor(this.height)}px`\n\n const chart = new Chart(this._canvas, {\n type: converted.type as any,\n data: converted.data as any,\n options: converted.options as any\n }) as unknown as SceneChart\n\n return chart\n }\n\n initChart() {\n const converted = convertConfigure(this.options as SceneChart.ChartConfig)\n this.attachPluginOptions(converted.options)\n\n this._chart = this._createChart(converted)\n }\n\n updateChartSize() {\n this.style.width = `${Math.floor(this.width)}px`\n this.style.height = `${Math.floor(this.height)}px`\n\n if (!this._chart) return\n\n this._chart.resize()\n }\n\n updateChartConfig() {\n if (!this._chart) return\n\n const converted = convertConfigure(this.options as SceneChart.ChartConfig)\n this.attachPluginOptions(converted.options)\n\n this._chart.destroy()\n\n this._chart = this._createChart(converted)\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: any) {\n const displayValue = context.dataset.displayValue || false\n return displayValue === 'T' ? true : displayValue === 'F' ? false : displayValue\n },\n anchor: function (context: any) {\n return context.dataset.dataLabelAnchor || 'center'\n },\n offset: function (context: any) {\n return context.dataset.dataLabelOffset || 0\n },\n align: function (context: any) {\n return context.dataset.dataLabelAnchor || 'center'\n },\n rotation: function (context: any) {\n return context.dataset.dataLabelRotation || 0\n },\n color: function (context: any) {\n return context.dataset?.defaultFontColor || '#000'\n },\n font: function (context: any) {\n return {\n size: context.dataset?.defaultFontSize,\n family: context.chart.options?.defaultFontFamily\n }\n },\n clamp: true,\n formatter: function (value: any, context: any) {\n const format = context.dataset.valueFormat || ''\n const prefix = context.dataset.valuePrefix || ''\n const suffix = context.dataset.valueSuffix || ''\n if (value == undefined) return value\n\n const stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n return prefix + stringValue + suffix\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-chart.js","sourceRoot":"","sources":["../src/ox-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import ChartDataLabels from 'chartjs-plugin-datalabels'\n\nimport { LitElement, PropertyValues, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Chart } from 'chart.js/auto'\nimport { format as formatText } from '@operato/utils/format.js'\nimport DataBinderPlugin from './plugins/chartjs-plugin-data-binder.js'\nimport SeriesHighlightPlugin from './plugins/chart-series-highlight.js'\nimport { convertConfigure } from './config-converter.js'\n\n/**\n * Chart.js v4의 CSS transform 좌표 보정 플러그인.\n *\n * v4는 offsetX / chart.width로 마우스 좌표를 계산하는데,\n * offsetX(unscaled)와 chart.width(때에 따라 scaled/unscaled)의\n * 좌표계가 불일치할 수 있다.\n *\n * v2는 (clientX - rect.left) / rect.width로 계산했으므로\n * 둘 다 getBoundingClientRect 기반(= 항상 같은 좌표계)이어서\n * CSS transform과 무관하게 정확했다.\n *\n * 이 플러그인은 beforeEvent에서 v2 방식으로 좌표를 재계산한다.\n */\nconst V2CoordPlugin = {\n id: 'v2coord',\n beforeEvent(chart: any, args: any) {\n const nativeEvent = args.event.native\n if (!nativeEvent) return\n\n const canvas = chart.canvas\n const rect = canvas.getBoundingClientRect()\n if (!rect.width || !rect.height) return\n\n const touches = nativeEvent.touches\n const clientX = touches?.length ? touches[0].clientX : nativeEvent.clientX\n const clientY = touches?.length ? touches[0].clientY : nativeEvent.clientY\n if (clientX === undefined) return\n\n const dpr = chart.currentDevicePixelRatio\n\n // v2 공식: clientX와 rect.width 모두 visual(scaled) 좌표계 → 비율 항상 정확\n args.event.x = Math.round((clientX - rect.left) / rect.width * canvas.width / dpr)\n args.event.y = Math.round((clientY - rect.top) / rect.height * canvas.height / dpr)\n args.inChartArea = chart.isPointInArea(args.event)\n }\n}\n\nChart.register(ChartDataLabels, DataBinderPlugin, SeriesHighlightPlugin, V2CoordPlugin)\n\n@customElement('ox-chart')\nexport class OxChart extends LitElement {\n @property({ type: Number }) declare width: number\n @property({ type: Number }) declare height: number\n @property({ type: Object }) declare options: SceneChart.ChartConfig\n @property({ type: Object }) declare data: SceneChart.ChartData\n\n private _chart?: SceneChart | null\n\n @query('canvas') declare _canvas: HTMLCanvasElement\n\n static styles = css`\n :host {\n display: block;\n }\n canvas {\n width: 100%;\n height: 100%;\n }\n `\n\n firstUpdated() {\n this.initChart()\n }\n\n render() {\n return html` <canvas></canvas> `\n }\n\n dispose() {\n this._chart?.destroy()\n this._chart = null\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') && this._chart) {\n this._chart.data.rawData = this.data\n this._chart.update()\n }\n }\n\n private _createChart(converted: SceneChart.ChartConfig): SceneChart {\n this.style.width = `${Math.floor(this.width)}px`\n this.style.height = `${Math.floor(this.height)}px`\n\n const chart = new Chart(this._canvas, {\n type: converted.type as any,\n data: converted.data as any,\n options: converted.options as any\n }) as unknown as SceneChart\n\n return chart\n }\n\n initChart() {\n const converted = convertConfigure(this.options as SceneChart.ChartConfig)\n this.attachPluginOptions(converted.options)\n\n this._chart = this._createChart(converted)\n }\n\n updateChartSize() {\n this.style.width = `${Math.floor(this.width)}px`\n this.style.height = `${Math.floor(this.height)}px`\n\n if (!this._chart) return\n\n this._chart.resize()\n }\n\n updateChartConfig() {\n if (!this._chart) return\n\n const converted = convertConfigure(this.options as SceneChart.ChartConfig)\n this.attachPluginOptions(converted.options)\n\n this._chart.destroy()\n\n this._chart = this._createChart(converted)\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: any) {\n const displayValue = context.dataset.displayValue || false\n return displayValue === 'T' ? true : displayValue === 'F' ? false : displayValue\n },\n anchor: function (context: any) {\n return context.dataset.dataLabelAnchor || 'center'\n },\n offset: function (context: any) {\n return context.dataset.dataLabelOffset || 0\n },\n align: function (context: any) {\n return context.dataset.dataLabelAnchor || 'center'\n },\n rotation: function (context: any) {\n return context.dataset.dataLabelRotation || 0\n },\n color: function (context: any) {\n return context.dataset?.defaultFontColor || '#000'\n },\n font: function (context: any) {\n return {\n size: context.dataset?.defaultFontSize,\n family: context.chart.options?.defaultFontFamily\n }\n },\n clamp: true,\n formatter: function (value: any, context: any) {\n const format = context.dataset.valueFormat || ''\n const prefix = context.dataset.valuePrefix || ''\n const suffix = context.dataset.valueSuffix || ''\n if (value == undefined) return value\n\n const stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n return prefix + stringValue + suffix\n }\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/scene-chartjs",
|
|
3
3
|
"description": "Things Scene ChartJS Component",
|
|
4
|
-
"version": "10.0.0-beta.
|
|
4
|
+
"version": "10.0.0-beta.21",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "heartyoh",
|
|
7
7
|
"main": "dist/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"prettier --write"
|
|
71
71
|
]
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "ae57a06dab2b8b19dd926b8485603c2ebf8b7c13"
|
|
74
74
|
}
|