@operato/chart 7.0.15 → 7.0.17

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 (17) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/src/chartjs/ox-chart-js.d.ts +0 -1
  3. package/dist/src/chartjs/ox-chart-js.js +12 -1
  4. package/dist/src/chartjs/ox-chart-js.js.map +1 -1
  5. package/dist/src/editors/input-chart-abstract.d.ts +2 -2
  6. package/dist/src/editors/input-chart-abstract.js +282 -259
  7. package/dist/src/editors/input-chart-abstract.js.map +1 -1
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +2 -2
  10. package/src/chartjs/ox-chart-js.ts +14 -1
  11. package/src/editors/input-chart-abstract.ts +343 -313
  12. package/src/types.d.ts +3 -0
  13. package/translations/en.json +3 -0
  14. package/translations/ja.json +3 -0
  15. package/translations/ko.json +3 -0
  16. package/translations/ms.json +3 -0
  17. package/translations/zh.json +3 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [7.0.17](https://github.com/hatiolab/operato/compare/v7.0.16...v7.0.17) (2024-07-14)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * apply keyed directive for chart modeling input ([21caa4d](https://github.com/hatiolab/operato/commit/21caa4d1886b084cc89ac7bbe398555c3044d338))
12
+
13
+
14
+
15
+ ### [7.0.16](https://github.com/hatiolab/operato/compare/v7.0.15...v7.0.16) (2024-07-14)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * support data-label-offset and data-label-rotation for chart modelin… ([01f6fce](https://github.com/hatiolab/operato/commit/01f6fce060724598730e5c585570185e403c5426))
21
+
22
+
23
+
6
24
  ### [7.0.15](https://github.com/hatiolab/operato/compare/v7.0.14...v7.0.15) (2024-07-13)
7
25
 
8
26
 
package/dist/src/chartjs/ox-chart-js.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import 'chartjs-plugin-datalabels';
2
1
  import { LitElement } from 'lit';
3
2
  export declare class OxChartJs extends LitElement {
4
3
  config: OperatoChart.ChartConfig | null;
package/dist/src/chartjs/ox-chart-js.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { __decorate } from "tslib";
2
- import 'chartjs-plugin-datalabels';
2
+ import ChartDataLabels from 'chartjs-plugin-datalabels';
3
3
  import { LitElement, html, css } from 'lit';
4
4
  import { property, query, customElement } from 'lit/decorators.js';
5
5
  import { Chart } from 'chart.js/auto';
6
6
  import { format as formatText } from '@operato/utils/format.js';
7
7
  import { convertConfigure } from './config-converter';
8
+ Chart.register(ChartDataLabels);
8
9
  let OxChartJs = class OxChartJs extends LitElement {
9
10
  constructor() {
10
11
  super(...arguments);
@@ -39,6 +40,7 @@ let OxChartJs = class OxChartJs extends LitElement {
39
40
  }
40
41
  if (changedProperties.has('config') && this.config) {
41
42
  this.chartjsConfig = convertConfigure(this.config, {});
43
+ this.attachPluginOptions(this.chartjsConfig.options);
42
44
  this.chart && this.chart.destroy();
43
45
  this.chart = new Chart(this.canvas, this.chartjsConfig);
44
46
  needUpdateData = true;
@@ -106,6 +108,15 @@ let OxChartJs = class OxChartJs extends LitElement {
106
108
  anchor: function (context) {
107
109
  return context.dataset.dataLabelAnchor || 'center';
108
110
  },
111
+ offset: function (context) {
112
+ return context.dataset.dataLabelOffset || 0;
113
+ },
114
+ align: function (context) {
115
+ return context.dataset.dataLabelAnchor || 'center';
116
+ },
117
+ rotation: function (context) {
118
+ return context.dataset.dataLabelRotation || 0;
119
+ },
109
120
  color: function (context) {
110
121
  return context.dataset?.defaultFontColor || '#000';
111
122
  },
package/dist/src/chartjs/ox-chart-js.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-chart-js.js","sourceRoot":"","sources":["../../../src/chartjs/ox-chart-js.ts"],"names":[],"mappings":"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","sourcesContent":["import 'chartjs-plugin-datalabels'\n\nimport { LitElement, html, css } from 'lit'\nimport { property, query, state, customElement } from 'lit/decorators.js'\nimport { Chart, ChartConfiguration } from 'chart.js/auto'\nimport { format as formatText } from '@operato/utils/format.js'\nimport { convertConfigure } from './config-converter'\n\n@customElement('ox-chart-js')\nexport class OxChartJs extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n @property({ type: Array }) data: { [key: string]: any }[] = []\n @property({ type: Number }) width!: number\n @property({ type: Number }) height!: number\n\n private chart: Chart | null = null\n private chartjsConfig: ChartConfiguration | null = null\n\n @query('canvas') canvas!: HTMLCanvasElement\n\n static styles = css`\n :host {\n display: block;\n\n background-color: var(--ox-chart-background-color, var(--md-sys-color-surface));\n color: var(--ox-chart-color, var(--md-sys-color-on-surface));\n }\n\n canvas {\n width: 100%;\n height: 100%;\n }\n `\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n if (this.chart) {\n this.chart.destroy()\n }\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n var needUpdateData = false\n\n if (changedProperties.has('width') || changedProperties.has('height')) {\n this.updateChartSize()\n }\n\n if (changedProperties.has('config') && this.config) {\n this.chartjsConfig = convertConfigure(this.config, {}) as any\n\n this.chart && this.chart.destroy()\n this.chart = new Chart(this.canvas, this.chartjsConfig!)\n\n needUpdateData = true\n }\n\n if (changedProperties.has('data')) {\n needUpdateData = true\n }\n\n if (needUpdateData) {\n this.updateData()\n }\n }\n\n updateData() {\n if (!this.chart) {\n return\n }\n\n var data = this.data\n\n if (this.data[0]?.hasOwnProperty('__field1')) {\n /* DEPRECATED 이 케이스는 앞으로 지원하지 않는 것이 좋다. 하위 호환성 때문에 제공함. 사용빈도 낮음. */\n data = toObjectArrayValue(this.data) as { [key: string]: any }[]\n }\n\n const labelDataKey = this.config!.data.labelDataKey || ''\n\n labelDataKey && (this.chart!.config.data!.labels = data.map((data: any) => data[labelDataKey]))\n\n const datasets = this.chart!.config.data.datasets\n for (let key in datasets) {\n const dataset = datasets[Number(key)]\n const dataKey = (dataset as any).dataKey\n dataKey && (dataset.data = data.map(d => d[dataKey]) as any)\n }\n\n this.chart.update()\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 render() {\n return html`<canvas></canvas>`\n }\n\n attachPluginOptions(options: OperatoChart.ChartOptions) {\n if (!options.plugins) {\n options.plugins = {}\n }\n\n this.attachDatalabelPluginOptions(options.plugins)\n }\n\n attachDatalabelPluginOptions(pluginOptions: any) {\n pluginOptions.datalabels = {\n ...pluginOptions.datalabels,\n display: function (context: any) {\n return !!context.dataset.displayValue\n },\n anchor: function (context: any) {\n return context.dataset.dataLabelAnchor || 'center'\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: string, context: any) {\n var prefix = context.dataset.valuePrefix || ''\n var suffix = context.dataset.valueSuffix || ''\n var format = context.dataset.valueFormat || ''\n\n if (value === undefined) {\n return value\n }\n\n var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n return prefix + stringValue + suffix\n }\n }\n }\n}\n\nfunction toObjectArrayValue(array: any[]): any[] | null {\n if (!array || array.length === 0) {\n return null\n }\n\n let indexKeyMap: any = {}\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: any = {}\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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-chart-js': OxChartJs\n }\n}\n"]}
1
+ {"version":3,"file":"ox-chart-js.js","sourceRoot":"","sources":["../../../src/chartjs/ox-chart-js.ts"],"names":[],"mappings":"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","sourcesContent":["import ChartDataLabels from 'chartjs-plugin-datalabels'\n\nimport { LitElement, html, css } from 'lit'\nimport { property, query, state, customElement } from 'lit/decorators.js'\nimport { Chart, ChartConfiguration } from 'chart.js/auto'\nimport { format as formatText } from '@operato/utils/format.js'\nimport { convertConfigure } from './config-converter'\n\nChart.register(ChartDataLabels)\n\n@customElement('ox-chart-js')\nexport class OxChartJs extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n @property({ type: Array }) data: { [key: string]: any }[] = []\n @property({ type: Number }) width!: number\n @property({ type: Number }) height!: number\n\n private chart: Chart | null = null\n private chartjsConfig: ChartConfiguration | null = null\n\n @query('canvas') canvas!: HTMLCanvasElement\n\n static styles = css`\n :host {\n display: block;\n\n background-color: var(--ox-chart-background-color, var(--md-sys-color-surface));\n color: var(--ox-chart-color, var(--md-sys-color-on-surface));\n }\n\n canvas {\n width: 100%;\n height: 100%;\n }\n `\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n if (this.chart) {\n this.chart.destroy()\n }\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n var needUpdateData = false\n\n if (changedProperties.has('width') || changedProperties.has('height')) {\n this.updateChartSize()\n }\n\n if (changedProperties.has('config') && this.config) {\n this.chartjsConfig = convertConfigure(this.config, {}) as any\n\n this.attachPluginOptions(this.chartjsConfig!.options as any)\n\n this.chart && this.chart.destroy()\n this.chart = new Chart(this.canvas, this.chartjsConfig!)\n\n needUpdateData = true\n }\n\n if (changedProperties.has('data')) {\n needUpdateData = true\n }\n\n if (needUpdateData) {\n this.updateData()\n }\n }\n\n updateData() {\n if (!this.chart) {\n return\n }\n\n var data = this.data\n\n if (this.data[0]?.hasOwnProperty('__field1')) {\n /* DEPRECATED 이 케이스는 앞으로 지원하지 않는 것이 좋다. 하위 호환성 때문에 제공함. 사용빈도 낮음. */\n data = toObjectArrayValue(this.data) as { [key: string]: any }[]\n }\n\n const labelDataKey = this.config!.data.labelDataKey || ''\n\n labelDataKey && (this.chart!.config.data!.labels = data.map((data: any) => data[labelDataKey]))\n\n const datasets = this.chart!.config.data.datasets\n for (let key in datasets) {\n const dataset = datasets[Number(key)]\n const dataKey = (dataset as any).dataKey\n dataKey && (dataset.data = data.map(d => d[dataKey]) as any)\n }\n\n this.chart.update()\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 render() {\n return html`<canvas></canvas>`\n }\n\n attachPluginOptions(options: OperatoChart.ChartOptions) {\n if (!options.plugins) {\n options.plugins = {}\n }\n\n this.attachDatalabelPluginOptions(options.plugins)\n }\n\n attachDatalabelPluginOptions(pluginOptions: any) {\n pluginOptions.datalabels = {\n ...pluginOptions.datalabels,\n display: function (context: any) {\n return !!context.dataset.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: string, context: any) {\n var prefix = context.dataset.valuePrefix || ''\n var suffix = context.dataset.valueSuffix || ''\n var format = context.dataset.valueFormat || ''\n\n if (value === undefined) {\n return value\n }\n\n var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString()\n return prefix + stringValue + suffix\n }\n }\n }\n}\n\nfunction toObjectArrayValue(array: any[]): any[] | null {\n if (!array || array.length === 0) {\n return null\n }\n\n let indexKeyMap: any = {}\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: any = {}\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\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-chart-js': OxChartJs\n }\n}\n"]}
package/dist/src/editors/input-chart-abstract.d.ts CHANGED
@@ -38,8 +38,8 @@ export declare class InputChartAbstract extends OxFormField {
38
38
  lastSeriesColor: TinyColor;
39
39
  }): any;
40
40
  _getElementValue(element: HTMLElement): any;
41
- annotationsTabTemplate(): import("lit-html").TemplateResult<1>;
42
- multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
41
+ annotationsTabTemplate(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
42
+ multiSeriesTabTemplate(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
43
43
  _onTabScroll(e: Event, type: 'series' | 'annotations'): void;
44
44
  _onTabScrollNavLeft(e: Event, type: 'series' | 'annotations'): void;
45
45
  _onTabScrollNavRight(e: Event, type: 'series' | 'annotations'): void;