testio-tailwind 3.3.0 → 3.4.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 (23) hide show
  1. package/package.json +1 -1
  2. package/src/assets/scripts/app.js +23 -17
  3. package/src/assets/scripts/modules/colors.js +10 -2
  4. package/src/assets/scripts/modules/echarts_area.js +10 -6
  5. package/src/assets/scripts/modules/echarts_donut.js +20 -4
  6. package/src/assets/scripts/modules/echarts_exampledata.js +2 -2
  7. package/src/assets/scripts/modules/echarts_gauge.js +5 -5
  8. package/src/assets/scripts/modules/echarts_horizontal.js +18 -3
  9. package/src/assets/scripts/modules/echarts_line.js +84 -0
  10. package/src/assets/scripts/modules/echarts_vertical.js +5 -3
  11. package/src/assets/stylesheets/components/customer/customer_productcards.css +2 -2
  12. package/src/assets/stylesheets/components/list_item.css +4 -0
  13. package/src/assets/stylesheets/tailwind_config.css +2 -2
  14. package/src/pages/charts/area.haml +21 -17
  15. package/src/pages/charts/bar_horizontal.haml +369 -220
  16. package/src/pages/charts/bar_vertical.haml +373 -367
  17. package/src/pages/charts/colors.haml +28 -0
  18. package/src/pages/charts/donut.haml +81 -16
  19. package/src/pages/charts/gauge.haml +40 -1
  20. package/src/pages/charts/legend.haml +22 -0
  21. package/src/pages/charts/line.haml +205 -0
  22. package/src/pages/colors.pug +2 -2
  23. package/src/static/app.bundled.js +19 -8
package/src/pages/charts/bar_horizontal.haml CHANGED
@@ -20,7 +20,7 @@ title: Bar chart horizontal
20
20
  %pre.code.break-spaces
21
21
  :plain
22
22
  import { createChartHorizontal } from './modules/echarts_horizontal';
23
- createChartHorizontal("element-id", data, series, showLegend);
23
+ createChartHorizontal (target, targetData, targetSeries, showLegend, labelColor, valueColor)
24
24
  .listitem-subheadline echarts_horizontal.js
25
25
  .listitem-card
26
26
  %pre.code.break-spaces
@@ -28,12 +28,26 @@ title: Bar chart horizontal
28
28
  import * as echarts from 'echarts';
29
29
  import { echartsLegend, legendHeight } from './echarts_legend';
30
30
  var legendOptions;
31
- export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
31
+ export function createChartHorizontal (target, targetData, targetSeries, showLegend, labelColor, valueColor) {
32
32
  var chartHeight = targetData.length * 20;
33
33
  var chartPlusLegendHeight;
34
34
  if (showLegend) {
35
35
  chartPlusLegendHeight = chartHeight + legendHeight,
36
- legendOptions = echartsLegend
36
+ legendOptions = {
37
+ type: echartsLegend.type,
38
+ orient: echartsLegend.orient,
39
+ padding: echartsLegend.padding,
40
+ icon: echartsLegend.icon,
41
+ itemGap: echartsLegend.itemGap,
42
+ itemHeight: echartsLegend.itemHeight,
43
+ itemWidth: echartsLegend.itemWidth,
44
+ height: echartsLegend.height,
45
+ left: echartsLegend.left,
46
+ bottom: echartsLegend.bottom,
47
+ textStyle:{
48
+ color:labelColor
49
+ },
50
+ }
37
51
  } else {
38
52
  chartPlusLegendHeight = chartHeight + 0,
39
53
  legendOptions = null
@@ -91,7 +105,8 @@ title: Bar chart horizontal
91
105
  overflow: "truncate",
92
106
  ellipsis: '…',
93
107
  hideOverlap: false,
94
- interval: 0
108
+ interval: 0,
109
+ color: labelColor,
95
110
  }
96
111
  },
97
112
  series: targetSeries
@@ -118,219 +133,353 @@ title: Bar chart horizontal
118
133
  left: 'center',
119
134
  bottom: 'bottom'
120
135
  };
121
- .card.p-md.mb-xs
122
- .echarts-container#echarts-bar-horizontal-1
123
- %details.listitem.mb-lg
124
- %summary.listitem-header
125
- .listitem-title
126
- %span.icon.icon-format-code.mr-xs
127
- Horizontal chart, 3 Features, some bugs, no legend
128
- .listitem-metrics
129
- .listitem-actions
130
- .btn.collapse-btn
131
- .listitem-content
132
- .listitem-subheadline HTML
133
- .listitem-card
134
- %code .echarts-container#element-id
135
- .listitem-subheadline app.js
136
- .listitem-card
137
- %pre.code.break-spaces
138
- :plain
139
- import { createChartHorizontal } from './modules/echarts_horizontal';
140
- createChartHorizontal("element-id", dataFeaturesFew, echartsSeriesFew, false);
141
- .listitem-subheadline Data
142
- .listitem-card
143
- %pre.code.break-spaces
144
- :plain
145
- export let dataFeaturesFew = [
146
- 'Feature A',
147
- 'Feature B',
148
- 'ABC'
149
- ]
150
- .listitem-subheadline Series, Javascript
151
- .listitem-card
152
- %pre.code.break-spaces
153
- :plain
154
- import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
155
- var barType = 'bar';
156
- var stackType = 'stack';
157
- var barWidth = 0;
158
- var barMaxWidth = 10;
159
- var barGap = 0;
160
- var barCategoryGap = 0;
161
- export let echartsSeriesFew = [
162
- {
163
- name: 'Critical',
164
- itemStyle: {color: colorCritical},
165
- type: barType,
166
- stack: stackType,
167
- barWidth: barWidth,
168
- barMaxWidth: barMaxWidth,
169
- barGap: barGap,
170
- barCategoryGap: barCategoryGap,
171
- emphasis: {
172
- focus: 'series'
173
- },
174
- data: [7, 22, 1]
175
- },
176
- {
177
- name: 'High',
178
- itemStyle: {color: colorHigh},
179
- type: barType,
180
- stack: stackType,
181
- barWidth: barWidth,
182
- barMaxWidth: barMaxWidth,
183
- barGap: barGap,
184
- barCategoryGap: barCategoryGap,
185
- emphasis: {
186
- focus: 'series'
187
- },
188
- data: [23, 21, 13]
189
- },
190
- {
191
- name: 'Low',
192
- itemStyle: {color: colorLow},
193
- type: barType,
194
- stack: stackType,
195
- barWidth: barWidth,
196
- barMaxWidth: barMaxWidth,
197
- barGap: barGap,
198
- barCategoryGap: barCategoryGap,
199
- emphasis: {
200
- focus: 'series'
201
- },
202
- data: [9, 15, 4]
203
- }
204
- ];
205
- %p.mt-md.mb-xs With legend and long feature names
206
- .card.p-md.mb-xs
207
- .echarts-container#echarts-bar-horizontal-2
208
- %details.listitem.mb-lg
209
- %summary.listitem-header
210
- .listitem-title
211
- %span.icon.icon-format-code.mr-xs
212
- Horizontal chart, 8 Features, many bugs, legend
213
- .listitem-metrics
214
- .listitem-actions
215
- .btn.collapse-btn
216
- .listitem-content
217
- .listitem-subheadline HTML
218
- .listitem-card
219
- %code .echarts-container#element-id
220
- .listitem-subheadline app.js
221
- .listitem-card
222
- %pre.code.break-spaces
223
- :plain
224
- import { createChartHorizontal } from './modules/echarts_horizontal';
225
- createChartHorizontal("element-id", dataFeaturesMany, echartsSeriesMany, true);
226
- .listitem-subheadline Data
227
- .listitem-card
228
- %pre.code.break-spaces
229
- :plain
230
- export let dataFeaturesMany = [
231
- 'Feature A',
232
- 'Feature B',
233
- 'Feature with a very long name',
234
- 'Feature with an even longer name',
235
- 'ABC',
236
- 'ZDF',
237
- 'WWW',
238
- 'Just another feature name'
239
- ];
240
- .listitem-subheadline Series, Javascript
241
- .listitem-card
242
- %pre.code.break-spaces
243
- :plain
244
- import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
245
- var barType = 'bar';
246
- var stackType = 'stack';
247
- var barWidth = 0;
248
- var barMaxWidth = 10;
249
- var barGap = 0;
250
- var barCategoryGap = 0;
251
- export let echartsSeriesMany = [
252
- {
253
- name: 'Critical',
254
- itemStyle: {color: colorCritical},
255
- type: barType,
256
- stack: stackType,
257
- barWidth: barWidth,
258
- barMaxWidth: barMaxWidth,
259
- barGap: barGap,
260
- barCategoryGap: barCategoryGap,
261
- emphasis: {
262
- focus: 'series'
263
- },
264
- data: [7, 22, 1, 9, 15, 4, 11, 0]
265
- },
266
- {
267
- name: 'High',
268
- itemStyle: {color: colorHigh},
269
- type: barType,
270
- stack: stackType,
271
- barWidth: barWidth,
272
- barMaxWidth: barMaxWidth,
273
- barGap: barGap,
274
- barCategoryGap: barCategoryGap,
275
- emphasis: {
276
- focus: 'series'
277
- },
278
- data: [23, 21, 13, 0, 1, 9, 15, 4]
279
- },
280
- {
281
- name: 'Low',
282
- itemStyle: {color: colorLow},
283
- type: barType,
284
- stack: stackType,
285
- barWidth: barWidth,
286
- barMaxWidth: barMaxWidth,
287
- barGap: barGap,
288
- barCategoryGap: barCategoryGap,
289
- emphasis: {
290
- focus: 'series'
291
- },
292
- data: [9, 15, 4, 11, 23, 13, 2, 1]
293
- },
294
- {
295
- name: 'Visual',
296
- itemStyle: {color: colorVisual},
297
- type: barType,
298
- stack: stackType,
299
- barWidth: barWidth,
300
- barMaxWidth: barMaxWidth,
301
- barGap: barGap,
302
- barCategoryGap: barCategoryGap,
303
- emphasis: {
304
- focus: 'series'
305
- },
306
- data: [13, 14, 1, 9, 15, 4, 11, 10]
307
- },
308
- {
309
- name: 'Content',
310
- itemStyle: {color: colorContent},
311
- type: barType,
312
- stack: stackType,
313
- barWidth: barWidth,
314
- barMaxWidth: barMaxWidth,
315
- barGap: barGap,
316
- barCategoryGap: barCategoryGap,
317
- emphasis: {
318
- focus: 'series'
319
- },
320
- data: [13, 22, 1, 9, 15, 4, 8, 13]
321
- },
322
- {
323
- name: 'UX',
324
- itemStyle: {color: colorUX},
325
- type: barType,
326
- stack: stackType,
327
- barWidth: barWidth,
328
- barMaxWidth: barMaxWidth,
329
- barGap: barGap,
330
- barCategoryGap: barCategoryGap,
331
- emphasis: {
332
- focus: 'series'
333
- },
334
- data: [13, 0, 1, 9, 15, 4, 2, 3]
335
- }
336
- ];
136
+ .grid.gap-spacing{class:"lg:grid-cols-2"}
137
+ .col
138
+ .card.p-md.mb-xs
139
+ .echarts-container#echarts-bar-horizontal-2
140
+ %details.listitem.mb-lg
141
+ %summary.listitem-header
142
+ .listitem-title
143
+ %span.icon.icon-format-code.mr-xs
144
+ Horizontal chart, 8 Features, many bugs, legend
145
+ .listitem-metrics
146
+ .listitem-actions
147
+ .btn.collapse-btn
148
+ .listitem-content
149
+ .listitem-subheadline HTML
150
+ .listitem-card
151
+ %code .echarts-container#element-id
152
+ .listitem-subheadline app.js
153
+ .listitem-card
154
+ %pre.code.break-spaces
155
+ :plain
156
+ import { createChartHorizontal } from './modules/echarts_horizontal';
157
+ createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true, colorLabelBright, colorValueBright);
158
+ .listitem-subheadline Data
159
+ .listitem-card
160
+ %pre.code.break-spaces
161
+ :plain
162
+ export let dataFeaturesMany = [
163
+ 'Feature A',
164
+ 'Feature B',
165
+ 'Feature with a very long name',
166
+ 'Feature with an even longer name',
167
+ 'ABC',
168
+ 'ZDF',
169
+ 'WWW',
170
+ 'Just another feature name'
171
+ ];
172
+ .listitem-subheadline Series, Javascript
173
+ .listitem-card
174
+ %pre.code.break-spaces
175
+ :plain
176
+ import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
177
+ var barType = 'bar';
178
+ var stackType = 'stack';
179
+ var barWidth = 0;
180
+ var barMaxWidth = 10;
181
+ var barGap = 0;
182
+ var barCategoryGap = 0;
183
+ export let echartsSeriesMany = [
184
+ {
185
+ name: 'Critical',
186
+ itemStyle: {color: colorCritical},
187
+ type: barType,
188
+ stack: stackType,
189
+ barWidth: barWidth,
190
+ barMaxWidth: barMaxWidth,
191
+ barGap: barGap,
192
+ barCategoryGap: barCategoryGap,
193
+ emphasis: {
194
+ focus: 'series'
195
+ },
196
+ data: [7, 22, 1, 9, 15, 4, 11, 0]
197
+ },
198
+ {
199
+ name: 'High',
200
+ itemStyle: {color: colorHigh},
201
+ type: barType,
202
+ stack: stackType,
203
+ barWidth: barWidth,
204
+ barMaxWidth: barMaxWidth,
205
+ barGap: barGap,
206
+ barCategoryGap: barCategoryGap,
207
+ emphasis: {
208
+ focus: 'series'
209
+ },
210
+ data: [23, 21, 13, 0, 1, 9, 15, 4]
211
+ },
212
+ {
213
+ name: 'Low',
214
+ itemStyle: {color: colorLow},
215
+ type: barType,
216
+ stack: stackType,
217
+ barWidth: barWidth,
218
+ barMaxWidth: barMaxWidth,
219
+ barGap: barGap,
220
+ barCategoryGap: barCategoryGap,
221
+ emphasis: {
222
+ focus: 'series'
223
+ },
224
+ data: [9, 15, 4, 11, 23, 13, 2, 1]
225
+ },
226
+ {
227
+ name: 'Visual',
228
+ itemStyle: {color: colorVisual},
229
+ type: barType,
230
+ stack: stackType,
231
+ barWidth: barWidth,
232
+ barMaxWidth: barMaxWidth,
233
+ barGap: barGap,
234
+ barCategoryGap: barCategoryGap,
235
+ emphasis: {
236
+ focus: 'series'
237
+ },
238
+ data: [13, 14, 1, 9, 15, 4, 11, 10]
239
+ },
240
+ {
241
+ name: 'Content',
242
+ itemStyle: {color: colorContent},
243
+ type: barType,
244
+ stack: stackType,
245
+ barWidth: barWidth,
246
+ barMaxWidth: barMaxWidth,
247
+ barGap: barGap,
248
+ barCategoryGap: barCategoryGap,
249
+ emphasis: {
250
+ focus: 'series'
251
+ },
252
+ data: [13, 22, 1, 9, 15, 4, 8, 13]
253
+ },
254
+ {
255
+ name: 'UX',
256
+ itemStyle: {color: colorUX},
257
+ type: barType,
258
+ stack: stackType,
259
+ barWidth: barWidth,
260
+ barMaxWidth: barMaxWidth,
261
+ barGap: barGap,
262
+ barCategoryGap: barCategoryGap,
263
+ emphasis: {
264
+ focus: 'series'
265
+ },
266
+ data: [13, 0, 1, 9, 15, 4, 2, 3]
267
+ }
268
+ ];
269
+ .col
270
+ .card.p-md.mb-xs.bg-gray-800
271
+ .echarts-container#echarts-bar-horizontal-2-dark
272
+ %details.listitem.mb-lg
273
+ %summary.listitem-header
274
+ .listitem-title
275
+ %span.icon.icon-format-code.mr-xs
276
+ Horizontal chart, darkmode
277
+ .listitem-metrics
278
+ .listitem-actions
279
+ .btn.collapse-btn
280
+ .listitem-content
281
+ .listitem-subheadline HTML
282
+ .listitem-card
283
+ %code .echarts-container#element-id
284
+ .listitem-subheadline app.js
285
+ .listitem-card
286
+ %pre.code.break-spaces
287
+ :plain
288
+ import { createChartHorizontal } from './modules/echarts_horizontal';
289
+ createChartHorizontal("echarts-bar-horizontal-2-dark", dataFeaturesMany, echartsSeriesMany, true, colorLabelDark, colorValueDark);
290
+ .listitem-subheadline Data
291
+ .listitem-card
292
+ %pre.code.break-spaces
293
+ :plain
294
+ export let dataFeaturesMany = [
295
+ 'Feature A',
296
+ 'Feature B',
297
+ 'Feature with a very long name',
298
+ 'Feature with an even longer name',
299
+ 'ABC',
300
+ 'ZDF',
301
+ 'WWW',
302
+ 'Just another feature name'
303
+ ];
304
+ .listitem-subheadline Series, Javascript
305
+ .listitem-card
306
+ %pre.code.break-spaces
307
+ :plain
308
+ import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
309
+ var barType = 'bar';
310
+ var stackType = 'stack';
311
+ var barWidth = 0;
312
+ var barMaxWidth = 10;
313
+ var barGap = 0;
314
+ var barCategoryGap = 0;
315
+ export let echartsSeriesMany = [
316
+ {
317
+ name: 'Critical',
318
+ itemStyle: {color: colorCritical},
319
+ type: barType,
320
+ stack: stackType,
321
+ barWidth: barWidth,
322
+ barMaxWidth: barMaxWidth,
323
+ barGap: barGap,
324
+ barCategoryGap: barCategoryGap,
325
+ emphasis: {
326
+ focus: 'series'
327
+ },
328
+ data: [7, 22, 1, 9, 15, 4, 11, 0]
329
+ },
330
+ {
331
+ name: 'High',
332
+ itemStyle: {color: colorHigh},
333
+ type: barType,
334
+ stack: stackType,
335
+ barWidth: barWidth,
336
+ barMaxWidth: barMaxWidth,
337
+ barGap: barGap,
338
+ barCategoryGap: barCategoryGap,
339
+ emphasis: {
340
+ focus: 'series'
341
+ },
342
+ data: [23, 21, 13, 0, 1, 9, 15, 4]
343
+ },
344
+ {
345
+ name: 'Low',
346
+ itemStyle: {color: colorLow},
347
+ type: barType,
348
+ stack: stackType,
349
+ barWidth: barWidth,
350
+ barMaxWidth: barMaxWidth,
351
+ barGap: barGap,
352
+ barCategoryGap: barCategoryGap,
353
+ emphasis: {
354
+ focus: 'series'
355
+ },
356
+ data: [9, 15, 4, 11, 23, 13, 2, 1]
357
+ },
358
+ {
359
+ name: 'Visual',
360
+ itemStyle: {color: colorVisual},
361
+ type: barType,
362
+ stack: stackType,
363
+ barWidth: barWidth,
364
+ barMaxWidth: barMaxWidth,
365
+ barGap: barGap,
366
+ barCategoryGap: barCategoryGap,
367
+ emphasis: {
368
+ focus: 'series'
369
+ },
370
+ data: [13, 14, 1, 9, 15, 4, 11, 10]
371
+ },
372
+ {
373
+ name: 'Content',
374
+ itemStyle: {color: colorContent},
375
+ type: barType,
376
+ stack: stackType,
377
+ barWidth: barWidth,
378
+ barMaxWidth: barMaxWidth,
379
+ barGap: barGap,
380
+ barCategoryGap: barCategoryGap,
381
+ emphasis: {
382
+ focus: 'series'
383
+ },
384
+ data: [13, 22, 1, 9, 15, 4, 8, 13]
385
+ },
386
+ {
387
+ name: 'UX',
388
+ itemStyle: {color: colorUX},
389
+ type: barType,
390
+ stack: stackType,
391
+ barWidth: barWidth,
392
+ barMaxWidth: barMaxWidth,
393
+ barGap: barGap,
394
+ barCategoryGap: barCategoryGap,
395
+ emphasis: {
396
+ focus: 'series'
397
+ },
398
+ data: [13, 0, 1, 9, 15, 4, 2, 3]
399
+ }
400
+ ];
401
+ .col
402
+ .card.p-md.mb-xs
403
+ .echarts-container#echarts-bar-horizontal-1
404
+ %details.listitem.mb-lg
405
+ %summary.listitem-header
406
+ .listitem-title
407
+ %span.icon.icon-format-code.mr-xs
408
+ Horizontal chart, 3 Features, some bugs, no legend
409
+ .listitem-metrics
410
+ .listitem-actions
411
+ .btn.collapse-btn
412
+ .listitem-content
413
+ .listitem-subheadline HTML
414
+ .listitem-card
415
+ %code .echarts-container#element-id
416
+ .listitem-subheadline app.js
417
+ .listitem-card
418
+ %pre.code.break-spaces
419
+ :plain
420
+ import { createChartHorizontal } from './modules/echarts_horizontal';
421
+ createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false, colorLabelBright, colorValueBright);
422
+ .listitem-subheadline Data
423
+ .listitem-card
424
+ %pre.code.break-spaces
425
+ :plain
426
+ export let dataFeaturesFew = [
427
+ 'Feature A',
428
+ 'Feature B',
429
+ 'ABC'
430
+ ]
431
+ .listitem-subheadline Series, Javascript
432
+ .listitem-card
433
+ %pre.code.break-spaces
434
+ :plain
435
+ import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
436
+ var barType = 'bar';
437
+ var stackType = 'stack';
438
+ var barWidth = 0;
439
+ var barMaxWidth = 10;
440
+ var barGap = 0;
441
+ var barCategoryGap = 0;
442
+ export let echartsSeriesFew = [
443
+ {
444
+ name: 'Critical',
445
+ itemStyle: {color: colorCritical},
446
+ type: barType,
447
+ stack: stackType,
448
+ barWidth: barWidth,
449
+ barMaxWidth: barMaxWidth,
450
+ barGap: barGap,
451
+ barCategoryGap: barCategoryGap,
452
+ emphasis: {
453
+ focus: 'series'
454
+ },
455
+ data: [7, 22, 1]
456
+ },
457
+ {
458
+ name: 'High',
459
+ itemStyle: {color: colorHigh},
460
+ type: barType,
461
+ stack: stackType,
462
+ barWidth: barWidth,
463
+ barMaxWidth: barMaxWidth,
464
+ barGap: barGap,
465
+ barCategoryGap: barCategoryGap,
466
+ emphasis: {
467
+ focus: 'series'
468
+ },
469
+ data: [23, 21, 13]
470
+ },
471
+ {
472
+ name: 'Low',
473
+ itemStyle: {color: colorLow},
474
+ type: barType,
475
+ stack: stackType,
476
+ barWidth: barWidth,
477
+ barMaxWidth: barMaxWidth,
478
+ barGap: barGap,
479
+ barCategoryGap: barCategoryGap,
480
+ emphasis: {
481
+ focus: 'series'
482
+ },
483
+ data: [9, 15, 4]
484
+ }
485
+ ];