@knime/kds-echarts 6.0.0

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 (24) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/LICENSE +710 -0
  3. package/README.md +174 -0
  4. package/dist/index.css +4 -0
  5. package/dist/index.js +80 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/src/KdsECharts.vue.d.ts +11 -0
  8. package/dist/src/KdsECharts.vue.d.ts.map +1 -0
  9. package/dist/src/index.d.ts +6 -0
  10. package/dist/src/index.d.ts.map +1 -0
  11. package/dist/src/theme/generated.d.ts +16 -0
  12. package/dist/src/theme/generated.d.ts.map +1 -0
  13. package/dist/src/theme/index.d.ts +8 -0
  14. package/dist/src/theme/index.d.ts.map +1 -0
  15. package/dist/src/theme/types.d.ts +34 -0
  16. package/dist/src/theme/types.d.ts.map +1 -0
  17. package/dist/src/types.d.ts +35 -0
  18. package/dist/src/types.d.ts.map +1 -0
  19. package/dist/src/useKdsEChartsColors.d.ts +10 -0
  20. package/dist/src/useKdsEChartsColors.d.ts.map +1 -0
  21. package/dist/theme-CrV5MB97.js +354 -0
  22. package/dist/theme-CrV5MB97.js.map +1 -0
  23. package/dist/theme.js +2 -0
  24. package/package.json +74 -0
package/dist/theme-CrV5MB97.js ADDED
@@ -0,0 +1,354 @@
1
+ //#region src/theme/generated.ts
2
+ /** KDS ECharts theme for light mode. */
3
+ var light = {
4
+ "color": [
5
+ "hsl(173.4, 37.1%, 38.6%)",
6
+ "hsl(211.3, 67.3%, 59.2%)",
7
+ "hsl(359.6, 84.3%, 62.5%)",
8
+ "hsl(0, 0%, 22%)",
9
+ "hsl(28, 39%, 50%)",
10
+ "hsl(208.2, 62.9%, 41.2%)",
11
+ "hsl(71.1, 46.3%, 32.2%)",
12
+ "hsl(308.3, 31.6%, 55.3%)",
13
+ "hsl(193.1, 60.2%, 43.3%)"
14
+ ],
15
+ "backgroundColor": "hsl(0, 0%, 98%)",
16
+ "textStyle": {
17
+ "color": "hsl(0, 0%, 15.7%)",
18
+ "fontFamily": "Roboto, sans-serif",
19
+ "fontSize": 10,
20
+ "fontWeight": 400
21
+ },
22
+ "title": {
23
+ "textStyle": {
24
+ "color": "hsl(0, 0%, 15.7%)",
25
+ "fontFamily": "Roboto, sans-serif",
26
+ "fontSize": 18,
27
+ "fontWeight": 700
28
+ },
29
+ "subtextStyle": {
30
+ "color": "hsl(0, 0%, 43%)",
31
+ "fontFamily": "Roboto, sans-serif",
32
+ "fontSize": 12,
33
+ "fontWeight": 400
34
+ }
35
+ },
36
+ "legend": {
37
+ "textStyle": {
38
+ "color": "hsl(0, 0%, 15.7%)",
39
+ "fontFamily": "Roboto, sans-serif",
40
+ "fontSize": 11,
41
+ "fontWeight": 500
42
+ },
43
+ "pageTextStyle": {
44
+ "color": "hsl(0, 0%, 15.7%)",
45
+ "fontFamily": "Roboto, sans-serif",
46
+ "fontSize": 11,
47
+ "fontWeight": 500
48
+ },
49
+ "inactiveColor": "hsl(0, 0%, 64%)"
50
+ },
51
+ "tooltip": {
52
+ "backgroundColor": "hsl(0, 0%, 12.9%)",
53
+ "textStyle": {
54
+ "color": "hsl(0, 0%, 98%)",
55
+ "fontFamily": "Roboto, sans-serif",
56
+ "fontSize": 12,
57
+ "fontWeight": 400
58
+ }
59
+ },
60
+ "categoryAxis": {
61
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
62
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
63
+ "axisLabel": {
64
+ "color": "hsl(0, 0%, 43%)",
65
+ "fontFamily": "Roboto, sans-serif",
66
+ "fontSize": 11,
67
+ "fontWeight": 500
68
+ },
69
+ "nameTextStyle": {
70
+ "color": "hsl(0, 0%, 43%)",
71
+ "fontFamily": "Roboto, sans-serif",
72
+ "fontSize": 12,
73
+ "fontWeight": 400
74
+ },
75
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.1)" } }
76
+ },
77
+ "valueAxis": {
78
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
79
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
80
+ "axisLabel": {
81
+ "color": "hsl(0, 0%, 43%)",
82
+ "fontFamily": "Roboto, sans-serif",
83
+ "fontSize": 11,
84
+ "fontWeight": 500
85
+ },
86
+ "nameTextStyle": {
87
+ "color": "hsl(0, 0%, 43%)",
88
+ "fontFamily": "Roboto, sans-serif",
89
+ "fontSize": 12,
90
+ "fontWeight": 400
91
+ },
92
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.1)" } }
93
+ },
94
+ "logAxis": {
95
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
96
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
97
+ "axisLabel": {
98
+ "color": "hsl(0, 0%, 43%)",
99
+ "fontFamily": "Roboto, sans-serif",
100
+ "fontSize": 11,
101
+ "fontWeight": 500
102
+ },
103
+ "nameTextStyle": {
104
+ "color": "hsl(0, 0%, 43%)",
105
+ "fontFamily": "Roboto, sans-serif",
106
+ "fontSize": 12,
107
+ "fontWeight": 400
108
+ },
109
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.1)" } }
110
+ },
111
+ "timeAxis": {
112
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
113
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.2)" } },
114
+ "axisLabel": {
115
+ "color": "hsl(0, 0%, 43%)",
116
+ "fontFamily": "Roboto, sans-serif",
117
+ "fontSize": 11,
118
+ "fontWeight": 500
119
+ },
120
+ "nameTextStyle": {
121
+ "color": "hsl(0, 0%, 43%)",
122
+ "fontFamily": "Roboto, sans-serif",
123
+ "fontSize": 12,
124
+ "fontWeight": 400
125
+ },
126
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 10.2%, 0.1)" } }
127
+ },
128
+ "line": { "lineStyle": { "width": 1.5 } },
129
+ "bar": { "itemStyle": {
130
+ "borderColor": "hsl(0, 0%, 98%)",
131
+ "borderWidth": .75
132
+ } },
133
+ "pie": { "itemStyle": {
134
+ "borderColor": "hsl(0, 0%, 98%)",
135
+ "borderWidth": .75
136
+ } },
137
+ "scatter": { "itemStyle": { "borderColor": "hsla(330, 0%, 10.2%, 0.1)" } },
138
+ "boxplot": { "itemStyle": { "borderColor": "hsla(330, 0%, 10.2%, 0.1)" } },
139
+ "graph": { "itemStyle": { "borderColor": "hsla(330, 0%, 10.2%, 0.1)" } }
140
+ };
141
+ /** KDS ECharts theme for dark mode. */
142
+ var dark = {
143
+ "color": [
144
+ "hsl(169.8, 30.6%, 66.1%)",
145
+ "hsl(213.6, 91.6%, 76.7%)",
146
+ "hsl(2.6, 100%, 72.4%)",
147
+ "hsl(0, 0%, 72.5%)",
148
+ "hsl(30, 47%, 68%)",
149
+ "hsl(209.4, 57.3%, 49.6%)",
150
+ "hsl(68.6, 61%, 47.3%)",
151
+ "hsl(316.1, 40.6%, 72.9%)",
152
+ "hsl(191.3, 57.1%, 54.3%)"
153
+ ],
154
+ "backgroundColor": "hsl(0, 0%, 15.7%)",
155
+ "textStyle": {
156
+ "color": "hsl(0, 0%, 94.1%)",
157
+ "fontFamily": "Roboto, sans-serif",
158
+ "fontSize": 10,
159
+ "fontWeight": 400
160
+ },
161
+ "title": {
162
+ "textStyle": {
163
+ "color": "hsl(0, 0%, 94.1%)",
164
+ "fontFamily": "Roboto, sans-serif",
165
+ "fontSize": 18,
166
+ "fontWeight": 700
167
+ },
168
+ "subtextStyle": {
169
+ "color": "hsl(0, 0%, 72.5%)",
170
+ "fontFamily": "Roboto, sans-serif",
171
+ "fontSize": 12,
172
+ "fontWeight": 400
173
+ }
174
+ },
175
+ "legend": {
176
+ "textStyle": {
177
+ "color": "hsl(0, 0%, 94.1%)",
178
+ "fontFamily": "Roboto, sans-serif",
179
+ "fontSize": 11,
180
+ "fontWeight": 500
181
+ },
182
+ "pageTextStyle": {
183
+ "color": "hsl(0, 0%, 94.1%)",
184
+ "fontFamily": "Roboto, sans-serif",
185
+ "fontSize": 11,
186
+ "fontWeight": 500
187
+ },
188
+ "inactiveColor": "hsl(0, 0%, 48.2%)"
189
+ },
190
+ "tooltip": {
191
+ "backgroundColor": "hsl(0, 0%, 22%)",
192
+ "textStyle": {
193
+ "color": "hsl(0, 0%, 94.1%)",
194
+ "fontFamily": "Roboto, sans-serif",
195
+ "fontSize": 12,
196
+ "fontWeight": 400
197
+ }
198
+ },
199
+ "categoryAxis": {
200
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
201
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
202
+ "axisLabel": {
203
+ "color": "hsl(0, 0%, 72.5%)",
204
+ "fontFamily": "Roboto, sans-serif",
205
+ "fontSize": 11,
206
+ "fontWeight": 500
207
+ },
208
+ "nameTextStyle": {
209
+ "color": "hsl(0, 0%, 72.5%)",
210
+ "fontFamily": "Roboto, sans-serif",
211
+ "fontSize": 12,
212
+ "fontWeight": 400
213
+ },
214
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.1)" } }
215
+ },
216
+ "valueAxis": {
217
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
218
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
219
+ "axisLabel": {
220
+ "color": "hsl(0, 0%, 72.5%)",
221
+ "fontFamily": "Roboto, sans-serif",
222
+ "fontSize": 11,
223
+ "fontWeight": 500
224
+ },
225
+ "nameTextStyle": {
226
+ "color": "hsl(0, 0%, 72.5%)",
227
+ "fontFamily": "Roboto, sans-serif",
228
+ "fontSize": 12,
229
+ "fontWeight": 400
230
+ },
231
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.1)" } }
232
+ },
233
+ "logAxis": {
234
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
235
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
236
+ "axisLabel": {
237
+ "color": "hsl(0, 0%, 72.5%)",
238
+ "fontFamily": "Roboto, sans-serif",
239
+ "fontSize": 11,
240
+ "fontWeight": 500
241
+ },
242
+ "nameTextStyle": {
243
+ "color": "hsl(0, 0%, 72.5%)",
244
+ "fontFamily": "Roboto, sans-serif",
245
+ "fontSize": 12,
246
+ "fontWeight": 400
247
+ },
248
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.1)" } }
249
+ },
250
+ "timeAxis": {
251
+ "axisLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
252
+ "axisTick": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.2)" } },
253
+ "axisLabel": {
254
+ "color": "hsl(0, 0%, 72.5%)",
255
+ "fontFamily": "Roboto, sans-serif",
256
+ "fontSize": 11,
257
+ "fontWeight": 500
258
+ },
259
+ "nameTextStyle": {
260
+ "color": "hsl(0, 0%, 72.5%)",
261
+ "fontFamily": "Roboto, sans-serif",
262
+ "fontSize": 12,
263
+ "fontWeight": 400
264
+ },
265
+ "splitLine": { "lineStyle": { "color": "hsla(330, 0%, 99%, 0.1)" } }
266
+ },
267
+ "line": { "lineStyle": { "width": 1.5 } },
268
+ "bar": { "itemStyle": {
269
+ "borderColor": "hsl(0, 0%, 15.7%)",
270
+ "borderWidth": .75
271
+ } },
272
+ "pie": { "itemStyle": {
273
+ "borderColor": "hsl(0, 0%, 15.7%)",
274
+ "borderWidth": .75
275
+ } },
276
+ "scatter": { "itemStyle": { "borderColor": "hsla(330, 0%, 99%, 0.1)" } },
277
+ "boxplot": { "itemStyle": { "borderColor": "hsla(330, 0%, 99%, 0.1)" } },
278
+ "graph": { "itemStyle": { "borderColor": "hsla(330, 0%, 99%, 0.1)" } }
279
+ };
280
+ /** Semantic chart colors resolved per mode, for explicit per-series coloring. */
281
+ var chartColors = {
282
+ "light": {
283
+ "series": [
284
+ "hsl(173.4, 37.1%, 38.6%)",
285
+ "hsl(211.3, 67.3%, 59.2%)",
286
+ "hsl(359.6, 84.3%, 62.5%)",
287
+ "hsl(0, 0%, 22%)",
288
+ "hsl(28, 39%, 50%)",
289
+ "hsl(208.2, 62.9%, 41.2%)",
290
+ "hsl(71.1, 46.3%, 32.2%)",
291
+ "hsl(308.3, 31.6%, 55.3%)",
292
+ "hsl(193.1, 60.2%, 43.3%)"
293
+ ],
294
+ "status": {
295
+ "positive": "hsl(107.4, 42.2%, 44.1%)",
296
+ "negative": "hsl(356.3, 76.8%, 54.3%)",
297
+ "warning": "hsl(19, 63.1%, 38.2%)",
298
+ "error": "hsl(348.8, 90.9%, 34.5%)"
299
+ },
300
+ "onFill": {
301
+ "dark": "hsl(0, 0%, 15.7%)",
302
+ "light": "hsl(0, 0%, 98%)"
303
+ },
304
+ "control": {
305
+ "default": "hsl(0, 0%, 43%)",
306
+ "hover": "hsl(0, 0%, 15.7%)",
307
+ "selected": "hsl(174.4, 47.8%, 30.8%)",
308
+ "disabled": "hsl(0, 0%, 64%)"
309
+ }
310
+ },
311
+ "dark": {
312
+ "series": [
313
+ "hsl(169.8, 30.6%, 66.1%)",
314
+ "hsl(213.6, 91.6%, 76.7%)",
315
+ "hsl(2.6, 100%, 72.4%)",
316
+ "hsl(0, 0%, 72.5%)",
317
+ "hsl(30, 47%, 68%)",
318
+ "hsl(209.4, 57.3%, 49.6%)",
319
+ "hsl(68.6, 61%, 47.3%)",
320
+ "hsl(316.1, 40.6%, 72.9%)",
321
+ "hsl(191.3, 57.1%, 54.3%)"
322
+ ],
323
+ "status": {
324
+ "positive": "hsl(109, 47.2%, 61.4%)",
325
+ "negative": "hsl(0, 100%, 66.1%)",
326
+ "warning": "hsl(31.2, 82.8%, 65.9%)",
327
+ "error": "hsl(3.5, 100%, 79.6%)"
328
+ },
329
+ "onFill": {
330
+ "dark": "hsl(0, 0%, 15.7%)",
331
+ "light": "hsl(0, 0%, 98%)"
332
+ },
333
+ "control": {
334
+ "default": "hsl(0, 0%, 72.5%)",
335
+ "hover": "hsl(0, 0%, 94.1%)",
336
+ "selected": "hsl(176.1, 66.7%, 22.4%)",
337
+ "disabled": "hsl(0, 0%, 48.2%)"
338
+ }
339
+ }
340
+ };
341
+ /**
342
+ * Every font face the themes draw with, as `document.fonts.load()` arguments.
343
+ * Await them before the first paint: canvas keeps whatever glyphs it drew with.
344
+ */
345
+ var fontFaces = [
346
+ "400 10px Roboto",
347
+ "400 12px Roboto",
348
+ "500 11px Roboto",
349
+ "700 18px Roboto"
350
+ ];
351
+ //#endregion
352
+ export { light as i, dark as n, fontFaces as r, chartColors as t };
353
+
354
+ //# sourceMappingURL=theme-CrV5MB97.js.map
package/dist/theme-CrV5MB97.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-CrV5MB97.js","names":[],"sources":["../src/theme/generated.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated\n * from the design token sources in @knime/kds-styles.\n */\n\nimport type { KdsChartColors, KdsEChartsTheme } from \"./types\";\n\n/** KDS ECharts theme for light mode. */\nexport const light: KdsEChartsTheme = {\n \"color\": [\n \"hsl(173.4, 37.1%, 38.6%)\",\n \"hsl(211.3, 67.3%, 59.2%)\",\n \"hsl(359.6, 84.3%, 62.5%)\",\n \"hsl(0, 0%, 22%)\",\n \"hsl(28, 39%, 50%)\",\n \"hsl(208.2, 62.9%, 41.2%)\",\n \"hsl(71.1, 46.3%, 32.2%)\",\n \"hsl(308.3, 31.6%, 55.3%)\",\n \"hsl(193.1, 60.2%, 43.3%)\"\n ],\n \"backgroundColor\": \"hsl(0, 0%, 98%)\",\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 15.7%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 10,\n \"fontWeight\": 400\n },\n \"title\": {\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 15.7%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 18,\n \"fontWeight\": 700\n },\n \"subtextStyle\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n }\n },\n \"legend\": {\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 15.7%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"pageTextStyle\": {\n \"color\": \"hsl(0, 0%, 15.7%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"inactiveColor\": \"hsl(0, 0%, 64%)\"\n },\n \"tooltip\": {\n \"backgroundColor\": \"hsl(0, 0%, 12.9%)\",\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 98%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n }\n },\n \"categoryAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n }\n },\n \"valueAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n }\n },\n \"logAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n }\n },\n \"timeAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 43%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n }\n },\n \"line\": {\n \"lineStyle\": {\n \"width\": 1.5\n }\n },\n \"bar\": {\n \"itemStyle\": {\n \"borderColor\": \"hsl(0, 0%, 98%)\",\n \"borderWidth\": 0.75\n }\n },\n \"pie\": {\n \"itemStyle\": {\n \"borderColor\": \"hsl(0, 0%, 98%)\",\n \"borderWidth\": 0.75\n }\n },\n \"scatter\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n },\n \"boxplot\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n },\n \"graph\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 10.2%, 0.1)\"\n }\n }\n};\n\n/** KDS ECharts theme for dark mode. */\nexport const dark: KdsEChartsTheme = {\n \"color\": [\n \"hsl(169.8, 30.6%, 66.1%)\",\n \"hsl(213.6, 91.6%, 76.7%)\",\n \"hsl(2.6, 100%, 72.4%)\",\n \"hsl(0, 0%, 72.5%)\",\n \"hsl(30, 47%, 68%)\",\n \"hsl(209.4, 57.3%, 49.6%)\",\n \"hsl(68.6, 61%, 47.3%)\",\n \"hsl(316.1, 40.6%, 72.9%)\",\n \"hsl(191.3, 57.1%, 54.3%)\"\n ],\n \"backgroundColor\": \"hsl(0, 0%, 15.7%)\",\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 94.1%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 10,\n \"fontWeight\": 400\n },\n \"title\": {\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 94.1%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 18,\n \"fontWeight\": 700\n },\n \"subtextStyle\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n }\n },\n \"legend\": {\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 94.1%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"pageTextStyle\": {\n \"color\": \"hsl(0, 0%, 94.1%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"inactiveColor\": \"hsl(0, 0%, 48.2%)\"\n },\n \"tooltip\": {\n \"backgroundColor\": \"hsl(0, 0%, 22%)\",\n \"textStyle\": {\n \"color\": \"hsl(0, 0%, 94.1%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n }\n },\n \"categoryAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n }\n },\n \"valueAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n }\n },\n \"logAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n }\n },\n \"timeAxis\": {\n \"axisLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisTick\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.2)\"\n }\n },\n \"axisLabel\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 11,\n \"fontWeight\": 500\n },\n \"nameTextStyle\": {\n \"color\": \"hsl(0, 0%, 72.5%)\",\n \"fontFamily\": \"Roboto, sans-serif\",\n \"fontSize\": 12,\n \"fontWeight\": 400\n },\n \"splitLine\": {\n \"lineStyle\": {\n \"color\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n }\n },\n \"line\": {\n \"lineStyle\": {\n \"width\": 1.5\n }\n },\n \"bar\": {\n \"itemStyle\": {\n \"borderColor\": \"hsl(0, 0%, 15.7%)\",\n \"borderWidth\": 0.75\n }\n },\n \"pie\": {\n \"itemStyle\": {\n \"borderColor\": \"hsl(0, 0%, 15.7%)\",\n \"borderWidth\": 0.75\n }\n },\n \"scatter\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n },\n \"boxplot\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n },\n \"graph\": {\n \"itemStyle\": {\n \"borderColor\": \"hsla(330, 0%, 99%, 0.1)\"\n }\n }\n};\n\n/** Semantic chart colors resolved per mode, for explicit per-series coloring. */\nexport const chartColors: { light: KdsChartColors; dark: KdsChartColors } = {\n \"light\": {\n \"series\": [\n \"hsl(173.4, 37.1%, 38.6%)\",\n \"hsl(211.3, 67.3%, 59.2%)\",\n \"hsl(359.6, 84.3%, 62.5%)\",\n \"hsl(0, 0%, 22%)\",\n \"hsl(28, 39%, 50%)\",\n \"hsl(208.2, 62.9%, 41.2%)\",\n \"hsl(71.1, 46.3%, 32.2%)\",\n \"hsl(308.3, 31.6%, 55.3%)\",\n \"hsl(193.1, 60.2%, 43.3%)\"\n ],\n \"status\": {\n \"positive\": \"hsl(107.4, 42.2%, 44.1%)\",\n \"negative\": \"hsl(356.3, 76.8%, 54.3%)\",\n \"warning\": \"hsl(19, 63.1%, 38.2%)\",\n \"error\": \"hsl(348.8, 90.9%, 34.5%)\"\n },\n \"onFill\": {\n \"dark\": \"hsl(0, 0%, 15.7%)\",\n \"light\": \"hsl(0, 0%, 98%)\"\n },\n \"control\": {\n \"default\": \"hsl(0, 0%, 43%)\",\n \"hover\": \"hsl(0, 0%, 15.7%)\",\n \"selected\": \"hsl(174.4, 47.8%, 30.8%)\",\n \"disabled\": \"hsl(0, 0%, 64%)\"\n }\n },\n \"dark\": {\n \"series\": [\n \"hsl(169.8, 30.6%, 66.1%)\",\n \"hsl(213.6, 91.6%, 76.7%)\",\n \"hsl(2.6, 100%, 72.4%)\",\n \"hsl(0, 0%, 72.5%)\",\n \"hsl(30, 47%, 68%)\",\n \"hsl(209.4, 57.3%, 49.6%)\",\n \"hsl(68.6, 61%, 47.3%)\",\n \"hsl(316.1, 40.6%, 72.9%)\",\n \"hsl(191.3, 57.1%, 54.3%)\"\n ],\n \"status\": {\n \"positive\": \"hsl(109, 47.2%, 61.4%)\",\n \"negative\": \"hsl(0, 100%, 66.1%)\",\n \"warning\": \"hsl(31.2, 82.8%, 65.9%)\",\n \"error\": \"hsl(3.5, 100%, 79.6%)\"\n },\n \"onFill\": {\n \"dark\": \"hsl(0, 0%, 15.7%)\",\n \"light\": \"hsl(0, 0%, 98%)\"\n },\n \"control\": {\n \"default\": \"hsl(0, 0%, 72.5%)\",\n \"hover\": \"hsl(0, 0%, 94.1%)\",\n \"selected\": \"hsl(176.1, 66.7%, 22.4%)\",\n \"disabled\": \"hsl(0, 0%, 48.2%)\"\n }\n }\n};\n\n/**\n * Every font face the themes draw with, as `document.fonts.load()` arguments.\n * Await them before the first paint: canvas keeps whatever glyphs it drew with.\n */\nexport const fontFaces: readonly string[] = [\n \"400 10px Roboto\",\n \"400 12px Roboto\",\n \"500 11px Roboto\",\n \"700 18px Roboto\"\n];\n"],"mappings":";;AAQA,IAAa,QAAyB;CACpC,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,mBAAmB;CACnB,aAAa;EACX,SAAS;EACT,cAAc;EACd,YAAY;EACZ,cAAc;CAChB;CACA,SAAS;EACP,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,gBAAgB;GACd,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;CACF;CACA,UAAU;EACR,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;CACnB;CACA,WAAW;EACT,mBAAmB;EACnB,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;CACF;CACA,gBAAgB;EACd,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,4BACX,EACF;CACF;CACA,aAAa;EACX,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,4BACX,EACF;CACF;CACA,WAAW;EACT,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,4BACX,EACF;CACF;CACA,YAAY;EACV,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,4BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,4BACX,EACF;CACF;CACA,QAAQ,EACN,aAAa,EACX,SAAS,IACX,EACF;CACA,OAAO,EACL,aAAa;EACX,eAAe;EACf,eAAe;CACjB,EACF;CACA,OAAO,EACL,aAAa;EACX,eAAe;EACf,eAAe;CACjB,EACF;CACA,WAAW,EACT,aAAa,EACX,eAAe,4BACjB,EACF;CACA,WAAW,EACT,aAAa,EACX,eAAe,4BACjB,EACF;CACA,SAAS,EACP,aAAa,EACX,eAAe,4BACjB,EACF;AACF;;AAGA,IAAa,OAAwB;CACnC,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,mBAAmB;CACnB,aAAa;EACX,SAAS;EACT,cAAc;EACd,YAAY;EACZ,cAAc;CAChB;CACA,SAAS;EACP,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,gBAAgB;GACd,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;CACF;CACA,UAAU;EACR,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;CACnB;CACA,WAAW;EACT,mBAAmB;EACnB,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;CACF;CACA,gBAAgB;EACd,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,0BACX,EACF;CACF;CACA,aAAa;EACX,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,0BACX,EACF;CACF;CACA,WAAW;EACT,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,0BACX,EACF;CACF;CACA,YAAY;EACV,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,YAAY,EACV,aAAa,EACX,SAAS,0BACX,EACF;EACA,aAAa;GACX,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,SAAS;GACT,cAAc;GACd,YAAY;GACZ,cAAc;EAChB;EACA,aAAa,EACX,aAAa,EACX,SAAS,0BACX,EACF;CACF;CACA,QAAQ,EACN,aAAa,EACX,SAAS,IACX,EACF;CACA,OAAO,EACL,aAAa;EACX,eAAe;EACf,eAAe;CACjB,EACF;CACA,OAAO,EACL,aAAa;EACX,eAAe;EACf,eAAe;CACjB,EACF;CACA,WAAW,EACT,aAAa,EACX,eAAe,0BACjB,EACF;CACA,WAAW,EACT,aAAa,EACX,eAAe,0BACjB,EACF;CACA,SAAS,EACP,aAAa,EACX,eAAe,0BACjB,EACF;AACF;;AAGA,IAAa,cAA+D;CAC1E,SAAS;EACP,UAAU;GACR;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,UAAU;GACR,YAAY;GACZ,YAAY;GACZ,WAAW;GACX,SAAS;EACX;EACA,UAAU;GACR,QAAQ;GACR,SAAS;EACX;EACA,WAAW;GACT,WAAW;GACX,SAAS;GACT,YAAY;GACZ,YAAY;EACd;CACF;CACA,QAAQ;EACN,UAAU;GACR;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,UAAU;GACR,YAAY;GACZ,YAAY;GACZ,WAAW;GACX,SAAS;EACX;EACA,UAAU;GACR,QAAQ;GACR,SAAS;EACX;EACA,WAAW;GACT,WAAW;GACX,SAAS;GACT,YAAY;GACZ,YAAY;EACd;CACF;AACF;;;;;AAMA,IAAa,YAA+B;CAC1C;CACA;CACA;CACA;AACF"}
package/dist/theme.js ADDED
@@ -0,0 +1,2 @@
1
+ import { i as light, n as dark, r as fontFaces, t as chartColors } from "./theme-CrV5MB97.js";
2
+ export { chartColors, dark, fontFaces, light };
package/package.json ADDED
@@ -0,0 +1,74 @@
1
+ {
2
+ "name": "@knime/kds-echarts",
3
+ "version": "6.0.0",
4
+ "description": "Package containing the Apache ECharts integration of the KNIME Design System: the KdsECharts component and the generated KDS ECharts themes",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/knime/knime-designsystem.git",
8
+ "directory": "packages/echarts"
9
+ },
10
+ "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
11
+ "author": "KNIME AG, Zurich, Switzerland",
12
+ "keywords": [
13
+ "knime",
14
+ "design system",
15
+ "documentation",
16
+ "storybook",
17
+ "echarts",
18
+ "charts",
19
+ "visualization"
20
+ ],
21
+ "type": "module",
22
+ "main": "./dist/index.js",
23
+ "module": "./dist/index.js",
24
+ "types": "./dist/src/index.d.ts",
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/src/index.d.ts",
28
+ "import": "./dist/index.js"
29
+ },
30
+ "./theme": {
31
+ "types": "./dist/src/theme/index.d.ts",
32
+ "import": "./dist/theme.js"
33
+ }
34
+ },
35
+ "files": [
36
+ "dist",
37
+ "CHANGELOG.md"
38
+ ],
39
+ "dependencies": {
40
+ "echarts": "^6.1.0",
41
+ "vue-echarts": "^8.0.1",
42
+ "@knime/kds-components": "^6.0.0"
43
+ },
44
+ "devDependencies": {
45
+ "@storybook/vue3-vite": "^10.4.6",
46
+ "@vitejs/plugin-vue": "^6.0.8",
47
+ "@vue/test-utils": "^2.4.11",
48
+ "@vue/tsconfig": "^0.9.1",
49
+ "@vueuse/core": "~14.3.0",
50
+ "consola": "^3.4.2",
51
+ "storybook": "^10.4.6",
52
+ "typescript": "^6.0.3",
53
+ "vite": "^8.1.3",
54
+ "vite-plugin-dts": "^5.0.3",
55
+ "vite-plugin-lib-inject-css": "^2.2.2",
56
+ "vue": "3.5.40",
57
+ "vue-tsc": "^3.3.7",
58
+ "@knime/kds-styles": "^6.0.0"
59
+ },
60
+ "peerDependencies": {
61
+ "vue": "~3.5.0"
62
+ },
63
+ "engines": {
64
+ "node": ">=24"
65
+ },
66
+ "sideEffects": [
67
+ "dist/*.css"
68
+ ],
69
+ "scripts": {
70
+ "build": "pnpm run build:theme && pnpm run type-check && vite build",
71
+ "build:theme": "node scripts/buildEChartsTheme.js",
72
+ "type-check": "vue-tsc --build"
73
+ }
74
+ }