@operato/scene-chartjs 9.0.0-beta.1 → 9.0.0-beta.15
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.d.ts +2 -2
- package/dist/chartjs.js +10 -6
- package/dist/chartjs.js.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/ox-chart.js +2 -2
- package/dist/ox-chart.js.map +1 -1
- package/dist/templates/index.js +8 -8
- package/dist/templates/index.js.map +1 -1
- package/package.json +7 -4
- package/things-scene.config.js +2 -2
package/dist/chartjs.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import './ox-chart';
|
|
1
|
+
import './ox-chart.js';
|
|
2
2
|
import { ComponentNature, HTMLOverlayElement, Properties } from '@hatiolab/things-scene';
|
|
3
|
-
import { OxChart } from './ox-chart';
|
|
3
|
+
import { OxChart } from './ox-chart.js';
|
|
4
4
|
export default class ChartJS extends HTMLOverlayElement {
|
|
5
5
|
private _isChartChanged;
|
|
6
6
|
private _isDataChanged;
|
package/dist/chartjs.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import './ox-chart.js';
|
|
3
|
+
import cloneDeep from 'lodash-es/cloneDeep.js';
|
|
4
|
+
import { error, HTMLOverlayElement, sceneComponent } from '@hatiolab/things-scene';
|
|
4
5
|
const NATURE = {
|
|
5
6
|
mutable: false,
|
|
6
7
|
resizable: true,
|
|
@@ -15,7 +16,7 @@ const NATURE = {
|
|
|
15
16
|
'value-property': 'data',
|
|
16
17
|
help: 'scene/component/chartjs'
|
|
17
18
|
};
|
|
18
|
-
|
|
19
|
+
let ChartJS = class ChartJS extends HTMLOverlayElement {
|
|
19
20
|
constructor() {
|
|
20
21
|
super(...arguments);
|
|
21
22
|
this._isChartChanged = false;
|
|
@@ -108,6 +109,9 @@ export default class ChartJS extends HTMLOverlayElement {
|
|
|
108
109
|
onchangeData(data) {
|
|
109
110
|
this._isDataChanged = true;
|
|
110
111
|
}
|
|
111
|
-
}
|
|
112
|
-
|
|
112
|
+
};
|
|
113
|
+
ChartJS = __decorate([
|
|
114
|
+
sceneComponent('chartjs')
|
|
115
|
+
], ChartJS);
|
|
116
|
+
export default ChartJS;
|
|
113
117
|
//# sourceMappingURL=chartjs.js.map
|
package/dist/chartjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chartjs.js","sourceRoot":"","sources":["../src/chartjs.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
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 {\n Component,\n ComponentNature,\n error,\n HTMLOverlayElement,\n Properties,\n sceneComponent\n} 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"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import 'core-js/stable';
|
|
2
|
-
import 'regenerator-runtime/runtime';
|
|
3
|
-
import './chartjs';
|
|
4
|
-
declare const _default: "./chartjs";
|
|
1
|
+
import 'core-js/stable/index.js';
|
|
2
|
+
import 'regenerator-runtime/runtime.js';
|
|
3
|
+
import './chartjs.js';
|
|
4
|
+
declare const _default: "./chartjs.js";
|
|
5
5
|
export default _default;
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import 'core-js/stable';
|
|
2
|
-
import 'regenerator-runtime/runtime';
|
|
3
|
-
import './chartjs';
|
|
4
|
-
export default './chartjs';
|
|
1
|
+
import 'core-js/stable/index.js';
|
|
2
|
+
import 'regenerator-runtime/runtime.js';
|
|
3
|
+
import './chartjs.js';
|
|
4
|
+
export default './chartjs.js';
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,gCAAgC,CAAA;AACvC,OAAO,cAAc,CAAA;AAErB,eAAe,cAAc,CAAA","sourcesContent":["import 'core-js/stable/index.js'\nimport 'regenerator-runtime/runtime.js'\nimport './chartjs.js'\n\nexport default './chartjs.js'\n"]}
|
package/dist/ox-chart.js
CHANGED
|
@@ -5,8 +5,8 @@ import { LitElement, html } from 'lit';
|
|
|
5
5
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
6
6
|
import { Chart } from 'chart.js';
|
|
7
7
|
import { format as formatText } from '@operato/utils/format.js';
|
|
8
|
-
import DataBinderPlugin from './plugins/chartjs-plugin-data-binder';
|
|
9
|
-
import { convertConfigure } from './config-converter';
|
|
8
|
+
import DataBinderPlugin from './plugins/chartjs-plugin-data-binder.js';
|
|
9
|
+
import { convertConfigure } from './config-converter.js';
|
|
10
10
|
Chart.plugins.register(DataBinderPlugin);
|
|
11
11
|
let OxChart = class OxChart extends LitElement {
|
|
12
12
|
firstUpdated() {
|
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,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,gBAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"ox-chart.js","sourceRoot":"","sources":["../src/ox-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import '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 { format as formatText } from '@operato/utils/format.js'\nimport DataBinderPlugin from './plugins/chartjs-plugin-data-binder.js'\nimport { convertConfigure } from './config-converter.js'\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 _chart?: SceneChart | null\n\n @query('canvas') _canvas!: HTMLCanvasElement\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')) {\n this._chart!.data.rawData = this.data\n this._chart!.update()\n }\n }\n\n initChart() {\n const { data, options, type } = this.options\n this.options.options.tooltip = this.options.options.tooltip ?? true\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\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 // 기존 boolean type 을 string으로 바꾸면서 T, F, auto 추가 (실제 타입은 true, false, 'auto')\n //@ts-ignore\n const displayValue = context.dataset.displayValue || false\n return displayValue === 'T' ? true : displayValue === 'F' ? false : displayValue\n },\n anchor: function (context) {\n //@ts-ignore\n return context.dataset.dataLabelAnchor || 'center'\n },\n offset: function (context) {\n //@ts-ignore\n return context.dataset.dataLabelOffset || 0\n },\n //@ts-ignore\n align: function (context) {\n //@ts-ignore\n return context.dataset.dataLabelAnchor || 'center'\n },\n //@ts-ignore\n rotation: function (context) {\n //@ts-ignore\n return context.dataset.dataLabelRotation || 0\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 //@ts-ignore\n family: context.chart.options?.defaultFontFamily\n }\n },\n clamp: true,\n formatter: function (value, context) {\n //@ts-ignore\n var format = context.dataset.valueFormat || ''\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 = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n return prefix + stringValue + suffix\n }\n }\n }\n}\n"]}
|
package/dist/templates/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import barChart from './bar-chart';
|
|
2
|
-
import doughnutChart from './doughnut-chart';
|
|
3
|
-
import horizontalBarChart from './horizontal-bar-chart';
|
|
4
|
-
import lineChart from './line-chart';
|
|
5
|
-
import mixedChart from './mixed-chart';
|
|
6
|
-
import pieChart from './pie-chart';
|
|
7
|
-
import polarAreaChart from './polar-area-chart';
|
|
8
|
-
import radarChart from './radar-chart';
|
|
1
|
+
import barChart from './bar-chart.js';
|
|
2
|
+
import doughnutChart from './doughnut-chart.js';
|
|
3
|
+
import horizontalBarChart from './horizontal-bar-chart.js';
|
|
4
|
+
import lineChart from './line-chart.js';
|
|
5
|
+
import mixedChart from './mixed-chart.js';
|
|
6
|
+
import pieChart from './pie-chart.js';
|
|
7
|
+
import polarAreaChart from './polar-area-chart.js';
|
|
8
|
+
import radarChart from './radar-chart.js';
|
|
9
9
|
export default [
|
|
10
10
|
barChart,
|
|
11
11
|
horizontalBarChart,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,aAAa,MAAM,qBAAqB,CAAA;AAC/C,OAAO,kBAAkB,MAAM,2BAA2B,CAAA;AAC1D,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,UAAU,MAAM,kBAAkB,CAAA;AACzC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,eAAe;IACb,QAAQ;IACR,kBAAkB;IAClB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,aAAa;IACb,cAAc;IACd,UAAU;CACX,CAAA","sourcesContent":["import barChart from './bar-chart.js'\nimport doughnutChart from './doughnut-chart.js'\nimport horizontalBarChart from './horizontal-bar-chart.js'\nimport lineChart from './line-chart.js'\nimport mixedChart from './mixed-chart.js'\nimport pieChart from './pie-chart.js'\nimport polarAreaChart from './polar-area-chart.js'\nimport radarChart from './radar-chart.js'\n\nexport default [\n barChart,\n horizontalBarChart,\n lineChart,\n mixedChart,\n pieChart,\n doughnutChart,\n polarAreaChart,\n radarChart\n]\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/scene-chartjs",
|
|
3
3
|
"description": "Things Scene ChartJS Component",
|
|
4
|
-
"version": "9.0.0-beta.
|
|
4
|
+
"version": "9.0.0-beta.15",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"author": "heartyoh",
|
|
6
7
|
"main": "dist/index.js",
|
|
7
8
|
"module": "dist/index.js",
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
"chartjs-plugin-style": "^0.5.0",
|
|
42
43
|
"core-js": "^3.26.0",
|
|
43
44
|
"lit": "^3.1.2",
|
|
45
|
+
"lodash-es": "^4.17.21",
|
|
44
46
|
"regenerator-runtime": "^0.13.3",
|
|
45
47
|
"ses": "^1.5.0"
|
|
46
48
|
},
|
|
@@ -49,12 +51,13 @@
|
|
|
49
51
|
"@things-factory/builder": "^9.0.0-beta",
|
|
50
52
|
"@things-factory/operato-board": "^9.0.0-beta",
|
|
51
53
|
"@types/chart.js": "2.9.34",
|
|
54
|
+
"@types/lodash-es": "^4.17.5",
|
|
52
55
|
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
|
53
56
|
"@typescript-eslint/parser": "^4.33.0",
|
|
54
57
|
"@web/dev-server": "^0.1.28",
|
|
55
58
|
"concurrently": "^8.0.1",
|
|
56
|
-
"eslint": "^
|
|
57
|
-
"eslint-config-prettier": "^
|
|
59
|
+
"eslint": "^9.18.0",
|
|
60
|
+
"eslint-config-prettier": "^10.0.1",
|
|
58
61
|
"husky": "^8.0.3",
|
|
59
62
|
"lint-staged": "^13.2.2",
|
|
60
63
|
"prettier": "^2.4.1",
|
|
@@ -73,5 +76,5 @@
|
|
|
73
76
|
"prettier --write"
|
|
74
77
|
]
|
|
75
78
|
},
|
|
76
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "3a94a8a9ee8cb8de82ad331cb08b9e48d6625d31"
|
|
77
80
|
}
|
package/things-scene.config.js
CHANGED