@operato/chart 2.0.0-beta.25

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 (114) hide show
  1. package/.editorconfig +29 -0
  2. package/.storybook/main.js +3 -0
  3. package/.storybook/preview.js +29 -0
  4. package/.storybook/server.mjs +8 -0
  5. package/CHANGELOG.md +17 -0
  6. package/README.md +0 -0
  7. package/assets/images/icon-editor-gradient-direction.png +0 -0
  8. package/assets/images/icon-properties-label.png +0 -0
  9. package/assets/images/icon-properties-line-type.png +0 -0
  10. package/assets/images/icon-properties-table.png +0 -0
  11. package/assets/images/no-image.png +0 -0
  12. package/demo/index.html +33 -0
  13. package/dist/src/chartjs/config-converter.d.ts +29 -0
  14. package/dist/src/chartjs/config-converter.js +218 -0
  15. package/dist/src/chartjs/config-converter.js.map +1 -0
  16. package/dist/src/chartjs/ox-chart-js.d.ts +17 -0
  17. package/dist/src/chartjs/ox-chart-js.js +46 -0
  18. package/dist/src/chartjs/ox-chart-js.js.map +1 -0
  19. package/dist/src/editors/configurer.d.ts +52 -0
  20. package/dist/src/editors/configurer.js +198 -0
  21. package/dist/src/editors/configurer.js.map +1 -0
  22. package/dist/src/editors/index.d.ts +6 -0
  23. package/dist/src/editors/index.js +8 -0
  24. package/dist/src/editors/index.js.map +1 -0
  25. package/dist/src/editors/input-chart-abstract.d.ts +27 -0
  26. package/dist/src/editors/input-chart-abstract.js +273 -0
  27. package/dist/src/editors/input-chart-abstract.js.map +1 -0
  28. package/dist/src/editors/input-chart-multi-series-abstract.d.ts +17 -0
  29. package/dist/src/editors/input-chart-multi-series-abstract.js +418 -0
  30. package/dist/src/editors/input-chart-multi-series-abstract.js.map +1 -0
  31. package/dist/src/editors/input-chart-styles.d.ts +1 -0
  32. package/dist/src/editors/input-chart-styles.js +167 -0
  33. package/dist/src/editors/input-chart-styles.js.map +1 -0
  34. package/dist/src/editors/ox-input-chart-hbar.d.ts +11 -0
  35. package/dist/src/editors/ox-input-chart-hbar.js +220 -0
  36. package/dist/src/editors/ox-input-chart-hbar.js.map +1 -0
  37. package/dist/src/editors/ox-input-chart-mixed.d.ts +8 -0
  38. package/dist/src/editors/ox-input-chart-mixed.js +237 -0
  39. package/dist/src/editors/ox-input-chart-mixed.js.map +1 -0
  40. package/dist/src/editors/ox-input-chart-pie.d.ts +11 -0
  41. package/dist/src/editors/ox-input-chart-pie.js +67 -0
  42. package/dist/src/editors/ox-input-chart-pie.js.map +1 -0
  43. package/dist/src/editors/ox-input-chart-radar.d.ts +8 -0
  44. package/dist/src/editors/ox-input-chart-radar.js +52 -0
  45. package/dist/src/editors/ox-input-chart-radar.js.map +1 -0
  46. package/dist/src/editors/ox-property-editor-chart.d.ts +10 -0
  47. package/dist/src/editors/ox-property-editor-chart.js +79 -0
  48. package/dist/src/editors/ox-property-editor-chart.js.map +1 -0
  49. package/dist/src/index.d.ts +0 -0
  50. package/dist/src/index.js +2 -0
  51. package/dist/src/index.js.map +1 -0
  52. package/dist/src/scichart/ox-scichart.d.ts +35 -0
  53. package/dist/src/scichart/ox-scichart.js +122 -0
  54. package/dist/src/scichart/ox-scichart.js.map +1 -0
  55. package/dist/src/scichart/scichart-builder.d.ts +8 -0
  56. package/dist/src/scichart/scichart-builder.js +46 -0
  57. package/dist/src/scichart/scichart-builder.js.map +1 -0
  58. package/dist/stories/common.d.ts +2 -0
  59. package/dist/stories/common.js +44 -0
  60. package/dist/stories/common.js.map +1 -0
  61. package/dist/stories/ox-input-chart-hbar.stories.d.ts +25 -0
  62. package/dist/stories/ox-input-chart-hbar.stories.js +171 -0
  63. package/dist/stories/ox-input-chart-hbar.stories.js.map +1 -0
  64. package/dist/stories/ox-input-chart-mixed.stories.d.ts +25 -0
  65. package/dist/stories/ox-input-chart-mixed.stories.js +180 -0
  66. package/dist/stories/ox-input-chart-mixed.stories.js.map +1 -0
  67. package/dist/stories/ox-input-chart-pie.stories.d.ts +27 -0
  68. package/dist/stories/ox-input-chart-pie.stories.js +111 -0
  69. package/dist/stories/ox-input-chart-pie.stories.js.map +1 -0
  70. package/dist/stories/ox-input-chart-radar.stories.d.ts +27 -0
  71. package/dist/stories/ox-input-chart-radar.stories.js +122 -0
  72. package/dist/stories/ox-input-chart-radar.stories.js.map +1 -0
  73. package/dist/tsconfig.tsbuildinfo +1 -0
  74. package/package.json +104 -0
  75. package/src/chartjs/config-converter.ts +307 -0
  76. package/src/chartjs/ox-chart-js.ts +46 -0
  77. package/src/editors/configurer.ts +243 -0
  78. package/src/editors/index.ts +8 -0
  79. package/src/editors/input-chart-abstract.ts +315 -0
  80. package/src/editors/input-chart-multi-series-abstract.ts +429 -0
  81. package/src/editors/input-chart-styles.ts +167 -0
  82. package/src/editors/ox-input-chart-hbar.ts +226 -0
  83. package/src/editors/ox-input-chart-mixed.ts +240 -0
  84. package/src/editors/ox-input-chart-pie.ts +75 -0
  85. package/src/editors/ox-input-chart-radar.ts +54 -0
  86. package/src/editors/ox-property-editor-chart.ts +79 -0
  87. package/src/globat.d.ts +1 -0
  88. package/src/index.ts +0 -0
  89. package/src/scichart/ox-scichart.ts +143 -0
  90. package/src/scichart/scichart-builder.ts +87 -0
  91. package/src/types.d.ts +74 -0
  92. package/stories/common.ts +47 -0
  93. package/stories/ox-input-chart-hbar.stories.ts +185 -0
  94. package/stories/ox-input-chart-mixed.stories.ts +194 -0
  95. package/stories/ox-input-chart-pie.stories.ts +126 -0
  96. package/stories/ox-input-chart-radar.stories.ts +137 -0
  97. package/themes/dark-hc.css +151 -0
  98. package/themes/dark-mc.css +151 -0
  99. package/themes/dark.css +151 -0
  100. package/themes/grist-theme.css +177 -0
  101. package/themes/light-hc.css +151 -0
  102. package/themes/light-mc.css +151 -0
  103. package/themes/light.css +151 -0
  104. package/themes/md-typescale-styles.css +100 -0
  105. package/themes/spacing.css +43 -0
  106. package/themes/state-color.css +6 -0
  107. package/translations/en.json +44 -0
  108. package/translations/ja.json +44 -0
  109. package/translations/ko.json +44 -0
  110. package/translations/ms.json +8 -0
  111. package/translations/zh.json +44 -0
  112. package/tsconfig.json +24 -0
  113. package/web-dev-server.config.mjs +27 -0
  114. package/web-test-runner.config.mjs +41 -0
package/.editorconfig ADDED
@@ -0,0 +1,29 @@
1
+ # EditorConfig helps developers define and maintain consistent
2
+ # coding styles between different editors and IDEs
3
+ # editorconfig.org
4
+
5
+ root = true
6
+
7
+
8
+ [*]
9
+
10
+ # Change these settings to your own preference
11
+ indent_style = space
12
+ indent_size = 2
13
+
14
+ # We recommend you to keep these unchanged
15
+ end_of_line = lf
16
+ charset = utf-8
17
+ trim_trailing_whitespace = true
18
+ insert_final_newline = true
19
+
20
+ [*.md]
21
+ trim_trailing_whitespace = false
22
+
23
+ [*.json]
24
+ indent_size = 2
25
+
26
+ [*.{html,js,md}]
27
+ block_comment_start = /**
28
+ block_comment = *
29
+ block_comment_end = */
package/.storybook/main.js ADDED
@@ -0,0 +1,3 @@
1
+ module.exports = {
2
+ stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
3
+ }
package/.storybook/preview.js ADDED
@@ -0,0 +1,29 @@
1
+ import i18n from 'i18next'
2
+
3
+ export const globalTypes = {
4
+ locale: {
5
+ name: 'Locale',
6
+ description: 'Internationalization locale',
7
+ toolbar: {
8
+ icon: 'globe',
9
+ items: [
10
+ { value: 'en', right: '🇺🇸', title: 'English' },
11
+ { value: 'ko', right: '🇰🇷', title: '한국어' },
12
+ { value: 'zh', right: '🇨🇳', title: '中文' },
13
+ { value: 'ja', right: '🇯🇵', title: '日本語' },
14
+ { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
15
+ ],
16
+ showName: true
17
+ }
18
+ }
19
+ }
20
+
21
+ export const decorators = [
22
+ (Story, context) => {
23
+ const { locale } = context.globals
24
+
25
+ i18n.changeLanguage(locale)
26
+
27
+ return Story()
28
+ }
29
+ ]
package/.storybook/server.mjs ADDED
@@ -0,0 +1,8 @@
1
+ import { storybookPlugin } from '@web/dev-server-storybook'
2
+ import baseConfig from '../web-dev-server.config.mjs'
3
+
4
+ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5
+ ...baseConfig,
6
+ open: '/',
7
+ plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
8
+ })
package/CHANGELOG.md ADDED
@@ -0,0 +1,17 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ## [2.0.0-beta.25](https://github.com/hatiolab/operato/compare/v2.0.0-beta.24...v2.0.0-beta.25) (2024-06-17)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * chart common editors ([cc3235b](https://github.com/hatiolab/operato/commit/cc3235bf8f29e283cb90ba97e646384c5420e41b))
12
+
13
+
14
+ ### :rocket: New Features
15
+
16
+ * chart config editor ([9cc8411](https://github.com/hatiolab/operato/commit/9cc8411082cce8cafe4486a7ad0d180a6b3efc6a))
17
+ * ox-input-chart ([612f6dd](https://github.com/hatiolab/operato/commit/612f6dd6944fbd73817cc8267e5fea47b78f2750))
package/README.md ADDED
File without changes
package/assets/images/no-image.png ADDED
Binary file
package/demo/index.html ADDED
@@ -0,0 +1,33 @@
1
+ <!doctype html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
6
+ <style>
7
+ body {
8
+ background: #fafafa;
9
+ }
10
+
11
+ a {
12
+ display: block;
13
+ }
14
+ </style>
15
+ <link href="/themes/app-theme.css" rel="stylesheet" />
16
+ <link href="/themes/input-theme.css" rel="stylesheet" />
17
+ <link
18
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
19
+ rel="stylesheet"
20
+ />
21
+ <link
22
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
23
+ rel="stylesheet"
24
+ />
25
+ <link
26
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
27
+ rel="stylesheet"
28
+ />
29
+ </head>
30
+ <body>
31
+ <a href="./index-select.html">select</a>
32
+ </body>
33
+ </html>
package/dist/src/chartjs/config-converter.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ export declare function convertConfigure(config: OperatoChart.ChartConfig, { fontSize, fontFamily, fontColor }: {
2
+ fontSize?: number;
3
+ fontFamily?: string;
4
+ fontColor?: string;
5
+ }): {
6
+ type: string | undefined;
7
+ options: {
8
+ animation: boolean | undefined;
9
+ stacked: boolean | undefined;
10
+ plugins: {
11
+ legend: any;
12
+ tooltip: any;
13
+ title: {
14
+ display: boolean;
15
+ text: string;
16
+ };
17
+ subtitle: {
18
+ display: boolean;
19
+ text: string;
20
+ };
21
+ };
22
+ scales: any;
23
+ indexAxis: string;
24
+ };
25
+ data: {
26
+ labels: number[];
27
+ datasets: OperatoChart.Dataset[];
28
+ };
29
+ } | undefined;
package/dist/src/chartjs/config-converter.js ADDED
@@ -0,0 +1,218 @@
1
+ import { TinyColor } from '@ctrl/tinycolor';
2
+ const _data = [
3
+ { year: 2010, count: 10 },
4
+ { year: 2011, count: 20 },
5
+ { year: 2012, count: 15 },
6
+ { year: 2013, count: 25 },
7
+ { year: 2014, count: 22 },
8
+ { year: 2015, count: 30 },
9
+ { year: 2016, count: 28 }
10
+ ];
11
+ function getBaseColorFromTheme(theme) {
12
+ return new TinyColor(theme == 'dark' ? '#fff' : '#000');
13
+ }
14
+ export function convertConfigure(config, { fontSize, fontFamily, fontColor }) {
15
+ if (!config) {
16
+ return;
17
+ }
18
+ const { type: chartType, options, data: fromData } = config;
19
+ const { theme, animation, tooltip, stacked, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine, multiAxis } = options || {};
20
+ const { datasets = [] } = fromData || {};
21
+ const { xAxes = [], yAxes = [] } = fromScales || {};
22
+ const toScales = {};
23
+ chartType != 'pie' &&
24
+ xAxes.forEach((xAxis, index) => {
25
+ const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = xAxis;
26
+ const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
27
+ toScales[id] = setupScale({
28
+ axis: 'x',
29
+ id,
30
+ position: 'bottom',
31
+ display: true,
32
+ title: {
33
+ display: !!axisTitle,
34
+ text: axisTitle
35
+ },
36
+ grid: {
37
+ display: xGridLine
38
+ },
39
+ beginAtZero: false,
40
+ ticks
41
+ }, { fontSize, fontFamily, fontColor, theme });
42
+ });
43
+ chartType != 'pie' &&
44
+ yAxes.forEach((yAxis, index) => {
45
+ const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = yAxis;
46
+ const id = yAxes.length > 1 ? `right` : 'left';
47
+ toScales[id] = setupScale({
48
+ axis: 'y',
49
+ id,
50
+ position: id,
51
+ display: true,
52
+ title: {
53
+ display: !!axisTitle,
54
+ text: axisTitle
55
+ },
56
+ grid: {
57
+ display: index == 0 ? yGridLine : y2ndGridLine
58
+ },
59
+ ticks,
60
+ stacked: stacked ? true : false
61
+ }, { fontSize, fontFamily, fontColor, theme });
62
+ });
63
+ // setup series configure
64
+ // for (let i in datasets) {
65
+ // let series = datasets[i]
66
+ // if (stacked && !series.stack) {
67
+ // series.stack = 'A'
68
+ // }
69
+ // /*
70
+ // * TODO from chartjs 2.9, categoryPercentage, barPercentage properties move to dataset.
71
+ // * so need to move related properties - categorySpacing, barSpacing should be moved to series.
72
+ // */
73
+ // if (chartType == 'bar') {
74
+ // let categorySpacing = (xAxes && xAxes[0].categorySpacing) || 0
75
+ // let barSpacing = (xAxes && xAxes[0].barSpacing) || 0
76
+ // series.categoryPercentage = 1 - categorySpacing || 1
77
+ // series.barPercentage = 1 - barSpacing || 0.8
78
+ // } else if (chartType == 'horizontalBar') {
79
+ // let categorySpacing = (yAxes && yAxes[0].categorySpacing) || 0
80
+ // let barSpacing = (yAxes && yAxes[0].barSpacing) || 0
81
+ // series.categoryPercentage = 1 - categorySpacing || 1
82
+ // series.barPercentage = 1 - barSpacing || 0.8
83
+ // }
84
+ // // _setSeriesConfigures(series, chart)
85
+ // if (!multiAxis) {
86
+ // if (series.yAxisID == 'right') series.yAxisID = 'left'
87
+ // }
88
+ // }
89
+ const converted = {
90
+ type: chartType == 'horizontalBar' ? 'bar' : chartType,
91
+ options: {
92
+ animation,
93
+ stacked,
94
+ plugins: {
95
+ legend: setupLegend(legend || {}, { fontSize, fontFamily, fontColor, theme }),
96
+ tooltip: setupTooltip({ enabled: tooltip }, { fontSize, fontFamily }),
97
+ title: {
98
+ /* new option candidate - subtitle */
99
+ display: false,
100
+ text: 'Custom Chart Title'
101
+ },
102
+ subtitle: {
103
+ /* new option candidate - subtitle */
104
+ display: false,
105
+ text: 'Custom Chart Subtitle'
106
+ }
107
+ },
108
+ scales: toScales,
109
+ indexAxis: chartType == 'horizontalBar' ? 'y' : chartType != 'pie' ? 'x' : ''
110
+ },
111
+ data: {
112
+ labels: _data.map(row => row.year),
113
+ datasets: datasets.map(dataset => {
114
+ return setupSeries(chartType, {
115
+ ...dataset,
116
+ stack: chartType == 'pie' || chartType == 'doughnut'
117
+ ? undefined
118
+ : stacked && !dataset.stack
119
+ ? 'A'
120
+ : `${dataset.yAxisID} ${dataset.stack || dataset.dataKey}`,
121
+ type: dataset.type == 'horizontalBar' ? 'bar' : dataset.type,
122
+ data: _data.map(row => row.count)
123
+ });
124
+ })
125
+ }
126
+ };
127
+ console.error('converted', config, converted);
128
+ return converted;
129
+ }
130
+ function setupLegend(legend, { fontSize, fontFamily, fontColor, theme }) {
131
+ legend.labels = legend.labels ? legend.labels : {};
132
+ if (fontSize) {
133
+ legend.labels.fontSize = fontSize;
134
+ }
135
+ if (fontFamily) {
136
+ legend.labels.fontFamily = fontFamily;
137
+ }
138
+ var baseColor = getBaseColorFromTheme(theme);
139
+ legend.labels = legend.labels ? legend.labels : {};
140
+ legend.labels.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString();
141
+ return legend;
142
+ }
143
+ function setupTooltip(tooltip, { fontSize, fontFamily, fontColor, theme }) {
144
+ if (fontSize) {
145
+ tooltip.titleFontSize = tooltip.bodyFontSize = tooltip.footerFontSize = fontSize;
146
+ }
147
+ if (fontFamily) {
148
+ tooltip.titleFontFamily = tooltip.bodyFontFamily = tooltip.footerFontFamily = fontFamily;
149
+ }
150
+ tooltip.mode = 'index';
151
+ tooltip.intersect = false;
152
+ tooltip.callbacks = {
153
+ ...tooltip.callbacks,
154
+ label: function ({ dataset, label }) {
155
+ var prefix = dataset.valuePrefix || '';
156
+ var suffix = dataset.valueSuffix || '';
157
+ return `${prefix + label + suffix}`;
158
+ }
159
+ };
160
+ return tooltip;
161
+ }
162
+ function setupScale(axis, { fontSize, fontFamily, fontColor, theme }) {
163
+ axis.ticks = axis.ticks ? axis.ticks : {};
164
+ if (fontSize) {
165
+ axis.ticks.fontSize = fontSize;
166
+ }
167
+ if (fontFamily) {
168
+ axis.ticks.fontFamily = fontFamily;
169
+ }
170
+ axis.pointLabels = {
171
+ fontSize,
172
+ fontFamily
173
+ };
174
+ /* TODO move min, max, autoMin, autoMax from ticks to axis */
175
+ const { min, max, autoMin, autoMax } = axis.ticks;
176
+ axis.min = min;
177
+ axis.max = max;
178
+ if (autoMin) {
179
+ delete axis.min;
180
+ }
181
+ if (autoMax) {
182
+ delete axis.max;
183
+ }
184
+ var baseColor = getBaseColorFromTheme(theme);
185
+ axis.grid = axis.grid ? axis.grid : {};
186
+ if (axis.grid) {
187
+ axis.grid.tickColor = baseColor.clone().setAlpha(0.5).toString();
188
+ axis.grid.color = baseColor.clone().setAlpha(0.1).toString();
189
+ }
190
+ axis.ticks = axis.ticks ? axis.ticks : {};
191
+ axis.ticks.color = baseColor.clone().setAlpha(0.5).toString();
192
+ axis.ticks.textStrokeColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString();
193
+ return axis;
194
+ }
195
+ function setupSeries(chartType, series) {
196
+ var type = series.type || chartType;
197
+ var color = series.color ? series.color : series.backgroundColor;
198
+ switch (type) {
199
+ case 'bar':
200
+ case 'horizontalBar':
201
+ series.borderColor = series.backgroundColor = color;
202
+ break;
203
+ case 'line':
204
+ case 'radar':
205
+ color = series.color ? series.color : series.borderColor;
206
+ series.pointBackgroundColor = series.pointBorderColor = series.borderColor = series.backgroundColor = color;
207
+ series.pointBorderWidth = series.borderWidth * 0.5;
208
+ series.pointHoverRadius = series.pointRadius;
209
+ if (series.fill == undefined)
210
+ series.fill = false;
211
+ break;
212
+ default:
213
+ series.borderColor = series.backgroundColor = color;
214
+ break;
215
+ }
216
+ return series;
217
+ }
218
+ //# sourceMappingURL=config-converter.js.map
package/dist/src/chartjs/config-converter.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"config-converter.js","sourceRoot":"","sources":["../../../src/chartjs/config-converter.ts"],"names":[],"mappings":"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","sourcesContent":["import { TinyColor } from '@ctrl/tinycolor'\n\nconst _data = [\n { year: 2010, count: 10 },\n { year: 2011, count: 20 },\n { year: 2012, count: 15 },\n { year: 2013, count: 25 },\n { year: 2014, count: 22 },\n { year: 2015, count: 30 },\n { year: 2016, count: 28 }\n]\n\nfunction getBaseColorFromTheme(theme?: 'light' | 'dark') {\n return new TinyColor(theme == 'dark' ? '#fff' : '#000')\n}\n\nexport function convertConfigure(\n config: OperatoChart.ChartConfig,\n { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }\n) {\n if (!config) {\n return\n }\n\n const { type: chartType, options, data: fromData } = config\n const {\n theme,\n animation,\n tooltip,\n stacked,\n legend,\n scales: fromScales,\n xGridLine,\n yGridLine,\n y2ndGridLine,\n multiAxis\n } = options || {}\n const { datasets = [] } = fromData || {}\n\n const { xAxes = [], yAxes = [] } = fromScales || {}\n const toScales = {} as any\n\n chartType != 'pie' &&\n xAxes.forEach((xAxis, index) => {\n const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = xAxis\n const id = xAxes.length > 1 ? `x${index + 1}` : 'x'\n\n toScales[id] = setupScale(\n {\n axis: 'x',\n id,\n position: 'bottom',\n display: true,\n title: {\n display: !!axisTitle,\n text: axisTitle\n },\n grid: {\n display: xGridLine\n },\n beginAtZero: false,\n ticks\n },\n { fontSize, fontFamily, fontColor, theme }\n )\n })\n\n chartType != 'pie' &&\n yAxes.forEach((yAxis, index) => {\n const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = yAxis\n const id = yAxes.length > 1 ? `right` : 'left'\n\n toScales[id] = setupScale(\n {\n axis: 'y',\n id,\n position: id,\n display: true,\n title: {\n display: !!axisTitle,\n text: axisTitle\n },\n grid: {\n display: index == 0 ? yGridLine : y2ndGridLine\n },\n ticks,\n stacked: stacked ? true : false\n },\n { fontSize, fontFamily, fontColor, theme }\n )\n })\n\n // setup series configure\n // for (let i in datasets) {\n // let series = datasets[i]\n\n // if (stacked && !series.stack) {\n // series.stack = 'A'\n // }\n\n // /*\n // * TODO from chartjs 2.9, categoryPercentage, barPercentage properties move to dataset.\n // * so need to move related properties - categorySpacing, barSpacing should be moved to series.\n // */\n // if (chartType == 'bar') {\n // let categorySpacing = (xAxes && xAxes[0].categorySpacing) || 0\n // let barSpacing = (xAxes && xAxes[0].barSpacing) || 0\n\n // series.categoryPercentage = 1 - categorySpacing || 1\n // series.barPercentage = 1 - barSpacing || 0.8\n // } else if (chartType == 'horizontalBar') {\n // let categorySpacing = (yAxes && yAxes[0].categorySpacing) || 0\n // let barSpacing = (yAxes && yAxes[0].barSpacing) || 0\n\n // series.categoryPercentage = 1 - categorySpacing || 1\n // series.barPercentage = 1 - barSpacing || 0.8\n // }\n\n // // _setSeriesConfigures(series, chart)\n\n // if (!multiAxis) {\n // if (series.yAxisID == 'right') series.yAxisID = 'left'\n // }\n // }\n\n const converted = {\n type: chartType == 'horizontalBar' ? 'bar' : chartType,\n options: {\n animation,\n stacked,\n plugins: {\n legend: setupLegend(legend || {}, { fontSize, fontFamily, fontColor, theme }),\n tooltip: setupTooltip({ enabled: tooltip }, { fontSize, fontFamily }),\n title: {\n /* new option candidate - subtitle */\n display: false,\n text: 'Custom Chart Title'\n },\n subtitle: {\n /* new option candidate - subtitle */\n display: false,\n text: 'Custom Chart Subtitle'\n }\n },\n scales: toScales,\n indexAxis: chartType == 'horizontalBar' ? 'y' : chartType != 'pie' ? 'x' : ''\n },\n data: {\n labels: _data.map(row => row.year),\n datasets: datasets.map(dataset => {\n return setupSeries(chartType!, {\n ...dataset,\n stack:\n chartType == 'pie' || chartType == 'doughnut'\n ? undefined\n : stacked && !dataset.stack\n ? 'A'\n : `${dataset.yAxisID} ${dataset.stack || dataset.dataKey}`,\n type: dataset.type == 'horizontalBar' ? 'bar' : dataset.type,\n data: _data.map(row => row.count)\n })\n })\n }\n }\n\n console.error('converted', config, converted)\n return converted\n}\n\nfunction setupLegend(\n legend: any,\n {\n fontSize,\n fontFamily,\n fontColor,\n theme\n }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }\n) {\n legend.labels = legend.labels ? legend.labels : {}\n\n if (fontSize) {\n legend.labels.fontSize = fontSize\n }\n\n if (fontFamily) {\n legend.labels.fontFamily = fontFamily\n }\n\n var baseColor = getBaseColorFromTheme(theme)\n\n legend.labels = legend.labels ? legend.labels : {}\n legend.labels.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()\n\n return legend\n}\n\nfunction setupTooltip(\n tooltip: any,\n {\n fontSize,\n fontFamily,\n fontColor,\n theme\n }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }\n) {\n if (fontSize) {\n tooltip.titleFontSize = tooltip.bodyFontSize = tooltip.footerFontSize = fontSize\n }\n\n if (fontFamily) {\n tooltip.titleFontFamily = tooltip.bodyFontFamily = tooltip.footerFontFamily = fontFamily\n }\n\n tooltip.mode = 'index'\n tooltip.intersect = false\n tooltip.callbacks = {\n ...tooltip.callbacks,\n label: function ({ dataset, label }: { dataset: any; label: any }) {\n var prefix = dataset.valuePrefix || ''\n var suffix = dataset.valueSuffix || ''\n\n return `${prefix + label + suffix}`\n }\n }\n\n return tooltip\n}\n\nfunction setupScale(\n axis: any,\n {\n fontSize,\n fontFamily,\n fontColor,\n theme\n }: { fontSize?: number; fontFamily?: string; fontColor?: string; theme?: 'light' | 'dark' }\n) {\n axis.ticks = axis.ticks ? axis.ticks : {}\n\n if (fontSize) {\n axis.ticks.fontSize = fontSize\n }\n\n if (fontFamily) {\n axis.ticks.fontFamily = fontFamily\n }\n\n axis.pointLabels = {\n fontSize,\n fontFamily\n }\n\n /* TODO move min, max, autoMin, autoMax from ticks to axis */\n const { min, max, autoMin, autoMax } = axis.ticks\n\n axis.min = min\n axis.max = max\n\n if (autoMin) {\n delete axis.min\n }\n if (autoMax) {\n delete axis.max\n }\n\n var baseColor = getBaseColorFromTheme(theme)\n\n axis.grid = axis.grid ? axis.grid : {}\n if (axis.grid) {\n axis.grid.tickColor = baseColor.clone().setAlpha(0.5).toString()\n axis.grid.color = baseColor.clone().setAlpha(0.1).toString()\n }\n\n axis.ticks = axis.ticks ? axis.ticks : {}\n axis.ticks.color = baseColor.clone().setAlpha(0.5).toString()\n axis.ticks.textStrokeColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString()\n\n return axis\n}\n\nfunction setupSeries(chartType: string, series: OperatoChart.Dataset) {\n var type = series.type || chartType\n\n var color = series.color ? series.color : series.backgroundColor\n\n switch (type) {\n case 'bar':\n case 'horizontalBar':\n series.borderColor = series.backgroundColor = color\n break\n\n case 'line':\n case 'radar':\n color = series.color ? series.color : series.borderColor\n series.pointBackgroundColor = series.pointBorderColor = series.borderColor = series.backgroundColor = color\n series.pointBorderWidth = (series.borderWidth as number) * 0.5\n series.pointHoverRadius = series.pointRadius\n if (series.fill == undefined) series.fill = false\n break\n\n default:\n series.borderColor = series.backgroundColor = color\n break\n }\n\n return series\n}\n"]}
package/dist/src/chartjs/ox-chart-js.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { LitElement } from 'lit';
2
+ import { ChartConfiguration } from 'chart.js/auto';
3
+ declare class OxChartJs extends LitElement {
4
+ config: ChartConfiguration | null;
5
+ private chart;
6
+ canvas: HTMLCanvasElement;
7
+ static styles: import("lit").CSSResult;
8
+ firstUpdated(): void;
9
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
10
+ render(): import("lit-html").TemplateResult<1>;
11
+ }
12
+ declare global {
13
+ interface HTMLElementTagNameMap {
14
+ 'ox-chart-js': OxChartJs;
15
+ }
16
+ }
17
+ export {};
package/dist/src/chartjs/ox-chart-js.js ADDED
@@ -0,0 +1,46 @@
1
+ import { __decorate } from "tslib";
2
+ import { LitElement, html, css } from 'lit';
3
+ import { property, query, customElement } from 'lit/decorators.js';
4
+ import { Chart } from 'chart.js/auto';
5
+ let OxChartJs = class OxChartJs extends LitElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.config = null;
9
+ this.chart = null;
10
+ }
11
+ static { this.styles = css `
12
+ :host {
13
+ display: block;
14
+ }
15
+
16
+ canvas {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ `; }
21
+ firstUpdated() {
22
+ if (this.config) {
23
+ this.chart = new Chart(this.canvas, this.config);
24
+ }
25
+ }
26
+ updated(changedProperties) {
27
+ if (changedProperties.has('config') && this.config) {
28
+ this.chart && this.chart.destroy();
29
+ this.chart = new Chart(this.canvas, this.config);
30
+ console.log('new chart', this.chart);
31
+ }
32
+ }
33
+ render() {
34
+ return html `<canvas></canvas>`;
35
+ }
36
+ };
37
+ __decorate([
38
+ property({ type: Object })
39
+ ], OxChartJs.prototype, "config", void 0);
40
+ __decorate([
41
+ query('canvas')
42
+ ], OxChartJs.prototype, "canvas", void 0);
43
+ OxChartJs = __decorate([
44
+ customElement('ox-chart-js')
45
+ ], OxChartJs);
46
+ //# sourceMappingURL=ox-chart-js.js.map
package/dist/src/chartjs/ox-chart-js.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-chart-js.js","sourceRoot":"","sources":["../../../src/chartjs/ox-chart-js.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,KAAK,EAAsB,MAAM,eAAe,CAAA;AAGzD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAC8B,WAAM,GAA8B,IAAI,CAAA;QAC5D,UAAK,GAAiB,IAAI,CAAA;IAgCpC,CAAC;aA5BQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASZ;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,OAAO,CAAC,iBAAyD;QAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACnD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;YAChD,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,mBAAmB,CAAA;IAChC,CAAC;;AAhC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAyC;AAGnD;IAAhB,KAAK,CAAC,QAAQ,CAAC;yCAA2B;AAJvC,SAAS;IADd,aAAa,CAAC,aAAa,CAAC;GACvB,SAAS,CAkCd","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { Chart, ChartConfiguration } from 'chart.js/auto'\n\n@customElement('ox-chart-js')\nclass OxChartJs extends LitElement {\n @property({ type: Object }) config: ChartConfiguration | null = null\n private chart: Chart | null = null\n\n @query('canvas') canvas!: HTMLCanvasElement\n\n static styles = css`\n :host {\n display: block;\n }\n\n canvas {\n width: 100%;\n height: 100%;\n }\n `\n\n firstUpdated() {\n if (this.config) {\n this.chart = new Chart(this.canvas, this.config)\n }\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has('config') && this.config) {\n this.chart && this.chart.destroy()\n this.chart = new Chart(this.canvas, this.config)\n console.log('new chart', this.chart)\n }\n }\n\n render() {\n return html`<canvas></canvas>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-chart-js': OxChartJs\n }\n}\n"]}
package/dist/src/editors/configurer.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ export declare class Configurer {
2
+ value: OperatoChart.ChartConfig;
3
+ currentSeriesIndex: number;
4
+ initializer: () => OperatoChart.ChartConfig;
5
+ constructor(value: OperatoChart.ChartConfig | null, initializer: () => OperatoChart.ChartConfig);
6
+ setCurrentSeriesIndex(currentSeriesIndex: number): void;
7
+ get series(): OperatoChart.Dataset;
8
+ set series(series: OperatoChart.Dataset);
9
+ get config(): OperatoChart.ChartConfig;
10
+ get data(): OperatoChart.ChartData;
11
+ set data(data: OperatoChart.ChartData);
12
+ get datasets(): OperatoChart.Dataset[];
13
+ set datasets(datasets: OperatoChart.Dataset[]);
14
+ set dataKey(key: string | undefined);
15
+ get dataKey(): string | undefined;
16
+ get legend(): OperatoChart.LegendOptions | undefined;
17
+ set legend(legend: OperatoChart.LegendOptions | undefined);
18
+ get theme(): "dark" | "light" | undefined;
19
+ set theme(theme: "dark" | "light" | undefined);
20
+ get tooltip(): boolean;
21
+ set tooltip(tooltip: boolean);
22
+ get animation(): boolean;
23
+ set animation(animation: boolean);
24
+ get scales(): OperatoChart.ScalesOptions | undefined;
25
+ set scales(scales: OperatoChart.ScalesOptions | undefined);
26
+ get display(): boolean | undefined;
27
+ set display(display: boolean | undefined);
28
+ get position(): "top" | "right" | "bottom" | "left" | undefined;
29
+ set position(position: "top" | "right" | "bottom" | "left" | undefined);
30
+ get stacked(): boolean | undefined;
31
+ set stacked(stacked: boolean | undefined);
32
+ get labelDataKey(): string | undefined;
33
+ set labelDataKey(labelDataKey: string | undefined);
34
+ set options(options: OperatoChart.ChartOptions | undefined);
35
+ get options(): OperatoChart.ChartOptions | undefined;
36
+ get color(): string | string[] | undefined;
37
+ set color(color: string | string[] | undefined);
38
+ get xAxes0(): OperatoChart.AxisOptions;
39
+ set xAxes0(xAxes0: OperatoChart.AxisOptions);
40
+ get yAxes0(): OperatoChart.AxisOptions;
41
+ set yAxes0(yAxes0: OperatoChart.AxisOptions);
42
+ get yAxes1(): OperatoChart.AxisOptions;
43
+ set yAxes1(yAxes1: OperatoChart.AxisOptions);
44
+ get multiAxis(): boolean | undefined;
45
+ set multiAxis(multiAxis: boolean | undefined);
46
+ get valuePrefix(): string | undefined;
47
+ set valuePrefix(valuePrefix: string | undefined);
48
+ get valueSuffix(): string | undefined;
49
+ set valueSuffix(valueSuffix: string | undefined);
50
+ get displayValue(): boolean | undefined;
51
+ set displayValue(displayValue: boolean | undefined);
52
+ }