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/colors.haml ADDED
@@ -0,0 +1,28 @@
1
+ ---
2
+ tags: charts
3
+ title: Colors JS
4
+ ---
5
+
6
+ .card
7
+ .card-body
8
+ %pre.code.break-spaces
9
+ :plain
10
+ export const colorCritical = '#FF3131';
11
+ export const colorHigh = '#d8ce0d';
12
+ export const colorLow = '#9fa2a8';
13
+ export const colorVisual = '#f48d21';
14
+ export const colorContent = '#326dd1';
15
+ export const colorUX = '#263340';
16
+ export const colorSuccess = '#8cbd24';
17
+ export const colorDanger = '#FF3131';
18
+ export const colorNeutralBright = '#bfc1c5';
19
+ export const colorNeutralDark = '#343A40';
20
+ export const colorInfo = '#326dd1';
21
+ export const colorBlueLight = '#21bef4';
22
+ export const colorBorderBright = '#e6e6e6';
23
+ export const colorBorderDark = '#262626';
24
+ export const colorLabelBright = '#5f656d';
25
+ export const colorLabelDark = '#bfc1c5';
26
+ export const colorValueBright = '#1d1d1d';
27
+ export const colorValueDark = '#ffffff';
28
+ export const colorTealLight = '#6ddeba';
package/src/pages/charts/donut.haml CHANGED
@@ -21,7 +21,7 @@ title: Donut chart
21
21
  %pre.code.break-spaces
22
22
  :plain
23
23
  import { createChartDonut } from './modules/echarts_donut';
24
- createChartDonut (target, targetData, valueText, labelText, showLegend);
24
+ createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor)
25
25
  .listitem-subheadline echarts_donuts.js
26
26
  .listitem-card
27
27
  %pre.code.break-spaces
@@ -29,12 +29,26 @@ title: Donut chart
29
29
  import * as echarts from 'echarts';
30
30
  import { echartsLegend, legendHeight } from './echarts_legend';
31
31
  var legendOptions;
32
- export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
32
+ export function createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor) {
33
33
  var chartHeight = 190;
34
34
  var chartPlusLegendHeight;
35
35
  if (showLegend) {
36
36
  chartPlusLegendHeight = chartHeight + legendHeight,
37
- legendOptions = echartsLegend
37
+ legendOptions = {
38
+ type: echartsLegend.type,
39
+ orient: echartsLegend.orient,
40
+ padding: echartsLegend.padding,
41
+ icon: echartsLegend.icon,
42
+ itemGap: echartsLegend.itemGap,
43
+ itemHeight: echartsLegend.itemHeight,
44
+ itemWidth: echartsLegend.itemWidth,
45
+ height: echartsLegend.height,
46
+ left: echartsLegend.left,
47
+ bottom: echartsLegend.bottom,
48
+ textStyle:{
49
+ color:labelColor
50
+ },
51
+ }
38
52
  } else {
39
53
  chartPlusLegendHeight = chartHeight,
40
54
  legendOptions = null
@@ -62,14 +76,16 @@ title: Donut chart
62
76
  textStyle: {
63
77
  fontSize: 60,
64
78
  lineHeight: 60,
65
- fontWeight: "lighter"
79
+ fontWeight: "lighter",
80
+ color: valueColor
66
81
  },
67
82
  subtextStyle: {
68
83
  overflow: "break",
69
84
  width: 100,
70
85
  top: 50,
71
86
  fontSize: 11,
72
- lineHeight: 12
87
+ lineHeight: 12,
88
+ color: labelColor
73
89
  }
74
90
  },
75
91
  tooltips: {
@@ -123,15 +139,15 @@ title: Donut chart
123
139
  left: 'center',
124
140
  bottom: 'bottom'
125
141
  };
126
- .row
127
- .col-lg-6.col-xl-4
142
+ .grid.gap-spacing{class:"lg:grid-cols-2"}
143
+ .col
128
144
  .card.p-md.mb-xs
129
- .echarts-container#echarts-donut-1
145
+ .echarts-container#echarts-donut-2
130
146
  %details.listitem.mb-md
131
147
  %summary.listitem-header
132
148
  .listitem-title
133
149
  %span.icon.icon-format-code.mr-xs
134
- Initialize donut chart without legend
150
+ Initialize donut chart with legend
135
151
  .listitem-metrics
136
152
  .listitem-actions
137
153
  .btn.collapse-btn
@@ -144,7 +160,7 @@ title: Donut chart
144
160
  %pre.code.break-spaces
145
161
  :plain
146
162
  import { createChartDonut } from './modules/echarts_donut';
147
- createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
163
+ createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
148
164
  .listitem-subheadline data.js
149
165
  .listitem-card
150
166
  %pre.code.break-spaces
@@ -173,9 +189,9 @@ title: Donut chart
173
189
  export const colorNeutral = '#e6e6e6';
174
190
  export const colorInfo = '#326dd1';
175
191
  export const colorBlueLight = '#21bef4';
176
- .col-lg-6.col-xl-4
177
- .card.p-md.mb-xs
178
- .echarts-container#echarts-donut-2
192
+ .col
193
+ .card.p-md.mb-xs.bg-gray-800
194
+ .echarts-container#echarts-donut-2-dark
179
195
  %details.listitem.mb-md
180
196
  %summary.listitem-header
181
197
  .listitem-title
@@ -193,7 +209,56 @@ title: Donut chart
193
209
  %pre.code.break-spaces
194
210
  :plain
195
211
  import { createChartDonut } from './modules/echarts_donut';
196
- createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true);
212
+ createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
213
+ .listitem-subheadline data.js
214
+ .listitem-card
215
+ %pre.code.break-spaces
216
+ :plain
217
+ import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
218
+ export let dataBugs = [
219
+ { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
220
+ { value: 37, name: 'High', itemStyle: {color: colorHigh}},
221
+ { value: 19, name: 'Low', itemStyle: {color: colorLow}},
222
+ { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
223
+ { value: 53, name: 'Content', itemStyle: {color: colorContent}},
224
+ { value: 53, name: 'UX', itemStyle: {color: colorUX}},
225
+ ];
226
+ .listitem-subheadline colors.js
227
+ .listitem-card
228
+ %pre.code.break-spaces
229
+ :plain
230
+ export const colorCritical = '#FF3131';
231
+ export const colorHigh = '#d8ce0d';
232
+ export const colorLow = '#9fa2a8';
233
+ export const colorVisual = '#f48d21';
234
+ export const colorContent = '#326dd1';
235
+ export const colorUX = '#263340';
236
+ export const colorSuccess = '#8cbd24';
237
+ export const colorDanger = '#FF3131';
238
+ export const colorNeutral = '#e6e6e6';
239
+ export const colorInfo = '#326dd1';
240
+ export const colorBlueLight = '#21bef4';
241
+ .col
242
+ .card.p-md.mb-xs
243
+ .echarts-container#echarts-donut-1
244
+ %details.listitem.mb-md
245
+ %summary.listitem-header
246
+ .listitem-title
247
+ %span.icon.icon-format-code.mr-xs
248
+ Initialize donut chart without legend
249
+ .listitem-metrics
250
+ .listitem-actions
251
+ .btn.collapse-btn
252
+ .listitem-content
253
+ .listitem-subheadline HTML
254
+ .listitem-card
255
+ %code .echarts-container#element-id
256
+ .listitem-subheadline app.js
257
+ .listitem-card
258
+ %pre.code.break-spaces
259
+ :plain
260
+ import { createChartDonut } from './modules/echarts_donut';
261
+ createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false, colorLabelBright, colorValueBright);
197
262
  .listitem-subheadline data.js
198
263
  .listitem-card
199
264
  %pre.code.break-spaces
@@ -222,7 +287,7 @@ title: Donut chart
222
287
  export const colorNeutral = '#e6e6e6';
223
288
  export const colorInfo = '#326dd1';
224
289
  export const colorBlueLight = '#21bef4';
225
- .col-lg-6.col-xl-4
290
+ .col
226
291
  .card.p-md.mb-xs
227
292
  .echarts-container#echarts-donut-testcases
228
293
  %details.listitem.mb-md
@@ -242,7 +307,7 @@ title: Donut chart
242
307
  %pre.code.break-spaces
243
308
  :plain
244
309
  import { createChartDonut } from './modules/echarts_donut';
245
- createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
310
+ createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false, colorLabelBright, colorValueBright);
246
311
  .listitem-subheadline data.js
247
312
  .listitem-card
248
313
  %pre.code.break-spaces
package/src/pages/charts/gauge.haml CHANGED
@@ -95,7 +95,7 @@ title: Gauge
95
95
  }
96
96
  window.addEventListener('resize', myChartGauge.resize);
97
97
  }
98
- .row
98
+ .grid.gap-spacing{class:"lg:grid-cols-3"}
99
99
  .col-lg-6.col-xl-4
100
100
  .card.p-md.mb-xs
101
101
  .echarts-container#echarts-gauge-1
@@ -135,6 +135,45 @@ title: Gauge
135
135
  %pre.code.break-spaces
136
136
  :plain
137
137
  export const colorSuccess = '#8cbd24';
138
+ .col-lg-6.col-xl-4
139
+ .card.p-md.mb-xs.bg-gray-800
140
+ .echarts-container#echarts-gauge-1-dark
141
+ %details.listitem.mb-md
142
+ %summary.listitem-header
143
+ .listitem-title
144
+ %span.icon.icon-format-code.mr-xs
145
+ Initialize success gauge
146
+ .listitem-metrics
147
+ .listitem-actions
148
+ .btn.collapse-btn
149
+ .listitem-content
150
+ .listitem-subheadline HTML
151
+ .listitem-card
152
+ %code .echarts-container#element-id
153
+ .listitem-subheadline app.js
154
+ .listitem-card
155
+ %pre.code.break-spaces
156
+ :plain
157
+ import { createChartGauge } from './modules/echarts_gauge';
158
+ createChartGauge("echarts-gauge-1", dataGaugeSuccess);
159
+ .listitem-subheadline data.js
160
+ .listitem-card
161
+ %pre.code.break-spaces
162
+ :plain
163
+ export let dataGaugeSuccess = [
164
+ {
165
+ value: 89,
166
+ name: 'Success',
167
+ itemStyle: {
168
+ color: colorSuccess
169
+ }
170
+ },
171
+ ];
172
+ .listitem-subheadline colors.js
173
+ .listitem-card
174
+ %pre.code.break-spaces
175
+ :plain
176
+ export const colorSuccess = '#8cbd24';
138
177
  .col-lg-6.col-xl-4
139
178
  .card.p-md.mb-xs
140
179
  .echarts-container#echarts-gauge-2
package/src/pages/charts/legend.haml ADDED
@@ -0,0 +1,22 @@
1
+ ---
2
+ tags: charts
3
+ title: Legend JS
4
+ ---
5
+
6
+ .card
7
+ .card-body
8
+ %pre.code.break-spaces
9
+ :plain
10
+ export const legendHeight = 30;
11
+ export const echartsLegend = {
12
+ type: 'scroll',
13
+ orient: 'horizontal',
14
+ padding: 0,
15
+ icon: 'circle',
16
+ itemGap: 10,
17
+ itemHeight: 5,
18
+ itemWidth: 5,
19
+ height: '20',
20
+ left: 'center',
21
+ bottom: 'bottom'
22
+ };
package/src/pages/charts/line.haml ADDED
@@ -0,0 +1,205 @@
1
+ ---
2
+ tags: charts
3
+ title: Line
4
+ ---
5
+
6
+ %details.listitem.mb-md
7
+ %summary.listitem-header
8
+ .listitem-title
9
+ %span.icon.icon-format-code.mr-xs
10
+ Initialize area chart
11
+ .listitem-metrics
12
+ .listitem-actions
13
+ .btn.collapse-btn
14
+ .listitem-content
15
+ .listitem-subheadline HTML
16
+ .listitem-card
17
+ %code .echarts-container#element-id
18
+ .listitem-subheadline app.js
19
+ .listitem-card
20
+ %pre.code.break-spaces
21
+ :plain
22
+ import { createChartArea } from './modules/echarts_area';
23
+ createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor)
24
+ .listitem-subheadline echarts_area.js
25
+ .listitem-card
26
+ %pre.code.break-spaces
27
+ :plain
28
+ import * as echarts from 'echarts';
29
+ export function createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
30
+ var chartHeight = 190;
31
+ var dom = document.getElementById(target);
32
+ var myChartLine = echarts.init(dom, null, {
33
+ renderer: 'canvas',
34
+ useDirtyRect: false,
35
+ height: chartHeight
36
+ });
37
+ var optionLine;
38
+ var optionLine = {
39
+ grid: {
40
+ show: false,
41
+ zlevel: 0,
42
+ top: 30,
43
+ right: 20,
44
+ left: 20,
45
+ bottom: 30
46
+ },
47
+ xAxis: {
48
+ boundaryGap: false,
49
+ zlevel: 2,
50
+ data: targetDataX,
51
+ axisLine: {
52
+ show: false
53
+ },
54
+ axisLabel: {
55
+ show: true,
56
+ margin: 15,
57
+ color: labelColor,
58
+ },
59
+ axisTick: {
60
+ show: false
61
+ },
62
+ },
63
+ yAxis: {
64
+ show: false,
65
+ min: 0,
66
+ max: targetDataY
67
+ },
68
+ series: [
69
+ {
70
+ data: targetDataY,
71
+ type: 'line',
72
+ lineStyle: {
73
+ width: 1,
74
+ color: chartColor,
75
+ borderColor: borderColor
76
+ },
77
+ zlevel: 1
78
+ },
79
+ {
80
+ data: targetDataY,
81
+ type: 'line',
82
+ lineStyle: {
83
+ width: 1
84
+ },
85
+ symbol: 'circle',
86
+ symbolSize: 10,
87
+ itemStyle: {
88
+ borderWidth: 2,
89
+ color: chartColor,
90
+ borderColor: borderColor
91
+ },
92
+ label: {
93
+ show: true,
94
+ color: valueColor,
95
+ },
96
+ zlevel: 3
97
+ }
98
+ ]
99
+ };
100
+ if (optionLine && typeof optionLine === 'object') {
101
+ myChartLine.setOption(optionLine);
102
+ }
103
+ window.addEventListener('resize', myChartLine.resize);
104
+ }
105
+ .grid.gap-spacing{class:"lg:grid-cols-2"}
106
+ .col
107
+ .card.p-md.mb-xs
108
+ .echarts-container#echarts-line-1
109
+ %details.listitem.mb-md
110
+ %summary.listitem-header
111
+ .listitem-title
112
+ %span.icon.icon-format-code.mr-xs
113
+ Initialize area chart with blue light color
114
+ .listitem-metrics
115
+ .listitem-actions
116
+ .btn.collapse-btn
117
+ .listitem-content
118
+ .listitem-subheadline HTML
119
+ .listitem-card
120
+ %code .echarts-container#element-id
121
+ .listitem-subheadline app.js
122
+ .listitem-card
123
+ %pre.code.break-spaces
124
+ :plain
125
+ import { createChartArea } from './modules/echarts_area';
126
+ createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
127
+ .listitem-subheadline dataAreaMonths.js
128
+ .listitem-card
129
+ %pre.code.break-spaces
130
+ :plain
131
+ export let dataAreaMonths = [
132
+ { value: 'Jun'},
133
+ { value: 'Jul'},
134
+ { value: 'Aug'},
135
+ { value: 'Sep'},
136
+ { value: 'Oct'},
137
+ { value: 'Nov'}
138
+ ];
139
+ .listitem-subheadline dataAreaValues.js
140
+ .listitem-card
141
+ %pre.code.break-spaces
142
+ :plain
143
+ export let dataAreaValues = [
144
+ { value: 79, name: 'Critical'},
145
+ { value: 37, name: 'High'},
146
+ { value: 19, name: 'Low'},
147
+ { value: 99, name: 'Visual'},
148
+ { value: 53, name: 'Content'},
149
+ { value: 66, name: 'UX'}
150
+ ];
151
+ .listitem-subheadline colors.js
152
+ .listitem-card
153
+ %pre.code.break-spaces
154
+ :plain
155
+ export const colorBlueLight = '#21bef4';
156
+ .col
157
+ .card.p-md.mb-xs.bg-gray-800
158
+ .echarts-container#echarts-line-2
159
+ %details.listitem.mb-md
160
+ %summary.listitem-header
161
+ .listitem-title
162
+ %span.icon.icon-format-code.mr-xs
163
+ Initialize darkmode area chart
164
+ .listitem-metrics
165
+ .listitem-actions
166
+ .btn.collapse-btn
167
+ .listitem-content
168
+ .listitem-subheadline HTML
169
+ .listitem-card
170
+ %code .echarts-container#element-id
171
+ .listitem-subheadline app.js
172
+ .listitem-card
173
+ %pre.code.break-spaces
174
+ :plain
175
+ import { createChartArea } from './modules/echarts_area';
176
+ createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
177
+ .listitem-subheadline dataAreaMonths.js
178
+ .listitem-card
179
+ %pre.code.break-spaces
180
+ :plain
181
+ export let dataAreaMonths = [
182
+ { value: 'Jun'},
183
+ { value: 'Jul'},
184
+ { value: 'Aug'},
185
+ { value: 'Sep'},
186
+ { value: 'Oct'},
187
+ { value: 'Nov'}
188
+ ];
189
+ .listitem-subheadline dataAreaValues.js
190
+ .listitem-card
191
+ %pre.code.break-spaces
192
+ :plain
193
+ export let dataAreaValues = [
194
+ { value: 79, name: 'Critical'},
195
+ { value: 37, name: 'High'},
196
+ { value: 19, name: 'Low'},
197
+ { value: 99, name: 'Visual'},
198
+ { value: 53, name: 'Content'},
199
+ { value: 66, name: 'UX'}
200
+ ];
201
+ .listitem-subheadline colors.js
202
+ .listitem-card
203
+ %pre.code.break-spaces
204
+ :plain
205
+ export const colorBlueLight = '#21bef4';
package/src/pages/colors.pug CHANGED
@@ -68,7 +68,7 @@ main.main-content.main-content-padding
68
68
  p #5f656d
69
69
  .color-cell.bg-gray-dark
70
70
  p gray-dark
71
- p #7c8188
71
+ p #888888
72
72
  .color-cell.bg-gray
73
73
  p gray
74
74
  p #9fa2a8
@@ -97,7 +97,7 @@ main.main-content.main-content-padding
97
97
  p #5f656d
98
98
  .color-cell.bg-gray-500
99
99
  p gray-500
100
- p #7c8188
100
+ p #888888
101
101
  .color-cell.bg-gray-400
102
102
  p gray-400
103
103
  p #9fa2a8