npm - @operato/scene-chartjs - Versions diffs - 10.0.0-beta.1 → 10.0.0-beta.2 - Mend

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

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.

Files changed (3) hide show

package/dist/ox-chart.js CHANGED Viewed

@@ -44,10 +44,6 @@ const V2CoordPlugin = {
 };
 Chart.register(ChartDataLabels, DataBinderPlugin, SeriesHighlightPlugin, V2CoordPlugin);
 let OxChart = class OxChart extends LitElement {
-    width;
-    height;
-    options;
-    data;
     _chart;
     static styles = css `
     :host {

package/dist/ox-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
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 }) 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 Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@operato/scene-chartjs",
   "description": "Things Scene ChartJS Component",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.2",
   "type": "module",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -70,5 +70,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "bb127dd516b9e962fb2d0a24bc2d8c5e108f06fb"
+  "gitHead": "350ece104754d007967cf8e3f54d0d157465e94a"
 }