@nyaruka/temba-components 0.124.1 → 0.124.3
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.
- package/CHANGELOG.md +13 -0
- package/demo/chart/example.html +346 -26
- package/demo/data/server/opened-tickets.json +15 -3
- package/dist/temba-components.js +241 -244
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/chart/TembaChart.js +305 -37
- package/out-tsc/src/chart/TembaChart.js.map +1 -1
- package/out-tsc/src/store/Store.js +1 -0
- package/out-tsc/src/store/Store.js.map +1 -1
- package/out-tsc/src/utils/index.js +37 -0
- package/out-tsc/src/utils/index.js.map +1 -1
- package/package.json +1 -1
- package/src/chart/TembaChart.ts +316 -43
- package/src/store/Store.ts +1 -0
- package/src/utils/index.ts +40 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v0.124.3](https://github.com/nyaruka/temba-components/compare/v0.124.2...v0.124.3)
|
|
8
|
+
|
|
9
|
+
- Add some palette and styling options for charts [`#559`](https://github.com/nyaruka/temba-components/pull/559)
|
|
10
|
+
- Move darkeColor to utils [`cefd890`](https://github.com/nyaruka/temba-components/commit/cefd89012c0f66b0d107a05047db73293a6b3a41)
|
|
11
|
+
|
|
12
|
+
#### [v0.124.2](https://github.com/nyaruka/temba-components/compare/v0.124.1...v0.124.2)
|
|
13
|
+
|
|
14
|
+
> 11 June 2025
|
|
15
|
+
|
|
16
|
+
- Add showAll attribute for temba-chart [`#558`](https://github.com/nyaruka/temba-components/pull/558)
|
|
17
|
+
|
|
7
18
|
#### [v0.124.1](https://github.com/nyaruka/temba-components/compare/v0.124.0...v0.124.1)
|
|
8
19
|
|
|
20
|
+
> 11 June 2025
|
|
21
|
+
|
|
9
22
|
- Fix display issue with Select using tags - preserve selected item text in multi-select mode [`#557`](https://github.com/nyaruka/temba-components/pull/557)
|
|
10
23
|
- Break out component demos into separate pages and remove storybook [`#551`](https://github.com/nyaruka/temba-components/pull/551)
|
|
11
24
|
- Final validation completed - Select tags display issue resolved [`e8fbccd`](https://github.com/nyaruka/temba-components/commit/e8fbccd28f317d6a3658fb105db8beb7915a6891)
|
package/demo/chart/example.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
3
|
+
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<title>Chart Examples</title>
|
|
6
6
|
<link
|
|
@@ -12,45 +12,365 @@
|
|
|
12
12
|
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
13
|
rel="stylesheet"
|
|
14
14
|
/>
|
|
15
|
-
<link
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
<link href="../styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
<style>
|
|
17
|
+
.palette {
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
margin-bottom: 12px;
|
|
21
|
+
}
|
|
22
|
+
.palette-label {
|
|
23
|
+
width: 200px;
|
|
24
|
+
text-align: right;
|
|
25
|
+
margin-right: 12px;
|
|
26
|
+
font-weight: bold;
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
color: #333;
|
|
29
|
+
}
|
|
30
|
+
.color-box {
|
|
31
|
+
width: 32px;
|
|
32
|
+
height: 32px;
|
|
33
|
+
margin-right: 0px;
|
|
34
|
+
border-radius: 0px;
|
|
35
|
+
border: 0px solid #ccc;
|
|
36
|
+
}
|
|
37
|
+
.palette-row {
|
|
38
|
+
display: flex;
|
|
39
|
+
border-radius: 4px;
|
|
40
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
</head>
|
|
45
|
+
<body>
|
|
22
46
|
<temba-store></temba-store>
|
|
23
47
|
<h1>Chart Examples</h1>
|
|
24
48
|
<p><a href="../index.html">← Back to main demo</a></p>
|
|
25
|
-
|
|
49
|
+
|
|
26
50
|
<div class="example">
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
51
|
+
<h3>Summation Chart</h3>
|
|
52
|
+
<p>A basic chart, summing all datasets</p>
|
|
53
|
+
<temba-chart url="../data/server/opened-tickets.json"></temba-chart>
|
|
30
54
|
</div>
|
|
31
55
|
|
|
32
56
|
<div class="example">
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
57
|
+
<h3>Summation with Splits</h3>
|
|
58
|
+
<p>Normal summation, but with optional splits in the config options</p>
|
|
59
|
+
<temba-chart
|
|
60
|
+
url="../data/server/opened-tickets.json"
|
|
61
|
+
dataname="Tickets"
|
|
62
|
+
config
|
|
63
|
+
legend
|
|
64
|
+
></temba-chart>
|
|
36
65
|
</div>
|
|
37
66
|
|
|
38
67
|
<div class="example">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
68
|
+
<h3>Summation with Configured Splits</h3>
|
|
69
|
+
<p>Normal summation, but with configured splits</p>
|
|
70
|
+
<temba-chart
|
|
71
|
+
url="../data/server/opened-tickets.json"
|
|
72
|
+
dataname="Tickets"
|
|
73
|
+
splits="Tracking,Orders"
|
|
74
|
+
hideother
|
|
75
|
+
legend
|
|
76
|
+
></temba-chart>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="example">
|
|
79
|
+
<h3>Show all</h3>
|
|
80
|
+
<p>Shows all datasets without config</p>
|
|
81
|
+
<temba-chart
|
|
82
|
+
url="../data/server/opened-tickets.json"
|
|
83
|
+
dataname="Tickets"
|
|
84
|
+
showall
|
|
85
|
+
legend
|
|
86
|
+
></temba-chart>
|
|
42
87
|
</div>
|
|
43
88
|
|
|
44
89
|
<div class="example">
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
90
|
+
<h3>Duration Formatted Chart</h3>
|
|
91
|
+
<p>
|
|
92
|
+
This chart expects series data in seconds and displays them as durations
|
|
93
|
+
on the y axis and in tooltips.
|
|
94
|
+
</p>
|
|
95
|
+
<temba-chart
|
|
96
|
+
single
|
|
97
|
+
dataname="Average Response"
|
|
98
|
+
formatDuration
|
|
99
|
+
header="Response Time"
|
|
100
|
+
url="../data/server/response-time.json"
|
|
101
|
+
></temba-chart>
|
|
102
|
+
<p>Here is the same duration chart, but as a line chart</p>
|
|
103
|
+
<temba-chart
|
|
104
|
+
style="margin: 2em"
|
|
105
|
+
chartType="line"
|
|
106
|
+
single
|
|
107
|
+
dataName="Average Response"
|
|
108
|
+
formatDuration
|
|
109
|
+
url="../data/server/response-time.json"
|
|
110
|
+
></temba-chart>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="example">
|
|
113
|
+
<h3>Chart Palette</h3>
|
|
114
|
+
<p>Charts can be configured with the following palette choices.</p>
|
|
115
|
+
<div class="palette">
|
|
116
|
+
<div class="palette-label">qualitative-set1</div>
|
|
117
|
+
<div class="palette-row">
|
|
118
|
+
<div class="color-box" style="background: #5ea3db"></div>
|
|
119
|
+
<div class="color-box" style="background: #c186e3"></div>
|
|
120
|
+
<div class="color-box" style="background: #66c2a5"></div>
|
|
121
|
+
<div class="color-box" style="background: #fc8d62"></div>
|
|
122
|
+
<div class="color-box" style="background: #a6d854"></div>
|
|
123
|
+
<div class="color-box" style="background: #ffd92f"></div>
|
|
124
|
+
<div class="color-box" style="background: #e5c494"></div>
|
|
125
|
+
<div class="color-box" style="background: #b3b3b3"></div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="palette">
|
|
129
|
+
<div class="palette-label">qualitative-set2</div>
|
|
130
|
+
<div class="palette-row">
|
|
131
|
+
<div class="color-box" style="background: #377eb8"></div>
|
|
132
|
+
<div class="color-box" style="background: #984ea3"></div>
|
|
133
|
+
<div class="color-box" style="background: #4daf4a"></div>
|
|
134
|
+
<div class="color-box" style="background: #ff7f00"></div>
|
|
135
|
+
<div class="color-box" style="background: #e41a1c"></div>
|
|
136
|
+
<div class="color-box" style="background: #a65628"></div>
|
|
137
|
+
<div class="color-box" style="background: #f781bf"></div>
|
|
138
|
+
<div class="color-box" style="background: #ffff33"></div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="palette">
|
|
142
|
+
<div class="palette-label">qualitative-set3</div>
|
|
143
|
+
<div class="palette-row">
|
|
144
|
+
<div class="color-box" style="background: #1b9e77"></div>
|
|
145
|
+
<div class="color-box" style="background: #d95f02"></div>
|
|
146
|
+
<div class="color-box" style="background: #7570b3"></div>
|
|
147
|
+
<div class="color-box" style="background: #e7298a"></div>
|
|
148
|
+
<div class="color-box" style="background: #66a61e"></div>
|
|
149
|
+
<div class="color-box" style="background: #e6ab02"></div>
|
|
150
|
+
<div class="color-box" style="background: #a6761d"></div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="palette">
|
|
154
|
+
<div class="palette-label">qualitative-paired</div>
|
|
155
|
+
<div class="palette-row">
|
|
156
|
+
<div class="color-box" style="background: #1f78b4"></div>
|
|
157
|
+
<div class="color-box" style="background: #a6cee3"></div>
|
|
158
|
+
<div class="color-box" style="background: #6a3d9a"></div>
|
|
159
|
+
<div class="color-box" style="background: #cab2d6"></div>
|
|
160
|
+
<div class="color-box" style="background: #33a02c"></div>
|
|
161
|
+
<div class="color-box" style="background: #b2df8a"></div>
|
|
162
|
+
<div class="color-box" style="background: #e31a1c"></div>
|
|
163
|
+
<div class="color-box" style="background: #fb9a99"></div>
|
|
164
|
+
<div class="color-box" style="background: #ff7f00"></div>
|
|
165
|
+
<div class="color-box" style="background: #fdbf6f"></div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="palette">
|
|
169
|
+
<div class="palette-label">qualitative-accent</div>
|
|
170
|
+
<div class="palette-row">
|
|
171
|
+
<div class="color-box" style="background: #7fc97f"></div>
|
|
172
|
+
<div class="color-box" style="background: #beaed4"></div>
|
|
173
|
+
<div class="color-box" style="background: #fdc086"></div>
|
|
174
|
+
<div class="color-box" style="background: #ffff99"></div>
|
|
175
|
+
<div class="color-box" style="background: #386cb0"></div>
|
|
176
|
+
<div class="color-box" style="background: #f0027f"></div>
|
|
177
|
+
<div class="color-box" style="background: #bf5b17"></div>
|
|
178
|
+
<div class="color-box" style="background: #666666"></div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="palette">
|
|
182
|
+
<div class="palette-label">qualitative-pastel1</div>
|
|
183
|
+
<div class="palette-row">
|
|
184
|
+
<div class="color-box" style="background: #fbb4ae"></div>
|
|
185
|
+
<div class="color-box" style="background: #b3cde3"></div>
|
|
186
|
+
<div class="color-box" style="background: #ccebc5"></div>
|
|
187
|
+
<div class="color-box" style="background: #decbe4"></div>
|
|
188
|
+
<div class="color-box" style="background: #fed9a6"></div>
|
|
189
|
+
<div class="color-box" style="background: #ffffcc"></div>
|
|
190
|
+
<div class="color-box" style="background: #e5d8bd"></div>
|
|
191
|
+
<div class="color-box" style="background: #fddaec"></div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="palette">
|
|
195
|
+
<div class="palette-label">qualitative-pastel2</div>
|
|
196
|
+
<div class="palette-row">
|
|
197
|
+
<div class="color-box" style="background: #b3e2cd"></div>
|
|
198
|
+
<div class="color-box" style="background: #fdcdac"></div>
|
|
199
|
+
<div class="color-box" style="background: #cbd5e8"></div>
|
|
200
|
+
<div class="color-box" style="background: #f4cae4"></div>
|
|
201
|
+
<div class="color-box" style="background: #e6f5c9"></div>
|
|
202
|
+
<div class="color-box" style="background: #fff2ae"></div>
|
|
203
|
+
<div class="color-box" style="background: #f1e2cc"></div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="palette">
|
|
207
|
+
<div class="palette-label">diverging-prgn</div>
|
|
208
|
+
<div class="palette-row">
|
|
209
|
+
<div class="color-box" style="background: #40004b"></div>
|
|
210
|
+
<div class="color-box" style="background: #762a83"></div>
|
|
211
|
+
<div class="color-box" style="background: #9970ab"></div>
|
|
212
|
+
<div class="color-box" style="background: #c2a5cf"></div>
|
|
213
|
+
<div class="color-box" style="background: #e7d4e8"></div>
|
|
214
|
+
<div class="color-box" style="background: #f7f7f7"></div>
|
|
215
|
+
<div class="color-box" style="background: #d9f0d3"></div>
|
|
216
|
+
<div class="color-box" style="background: #a6dba0"></div>
|
|
217
|
+
<div class="color-box" style="background: #5aae61"></div>
|
|
218
|
+
<div class="color-box" style="background: #1b7837"></div>
|
|
219
|
+
<div class="color-box" style="background: #00441b"></div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="palette">
|
|
223
|
+
<div class="palette-label">diverging-spectral</div>
|
|
224
|
+
<div class="palette-row">
|
|
225
|
+
<div class="color-box" style="background: #9e0142"></div>
|
|
226
|
+
<div class="color-box" style="background: #d53e4f"></div>
|
|
227
|
+
<div class="color-box" style="background: #f46d43"></div>
|
|
228
|
+
<div class="color-box" style="background: #fdae61"></div>
|
|
229
|
+
<div class="color-box" style="background: #fee08b"></div>
|
|
230
|
+
<div class="color-box" style="background: #ffffbf"></div>
|
|
231
|
+
<div class="color-box" style="background: #e6f598"></div>
|
|
232
|
+
<div class="color-box" style="background: #abdda4"></div>
|
|
233
|
+
<div class="color-box" style="background: #66c2a5"></div>
|
|
234
|
+
<div class="color-box" style="background: #3288bd"></div>
|
|
235
|
+
<div class="color-box" style="background: #5e4fa2"></div>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="palette">
|
|
239
|
+
<div class="palette-label">diverging-piyg</div>
|
|
240
|
+
<div class="palette-row">
|
|
241
|
+
<div class="color-box" style="background: #8e0152"></div>
|
|
242
|
+
<div class="color-box" style="background: #c51b7d"></div>
|
|
243
|
+
<div class="color-box" style="background: #de77ae"></div>
|
|
244
|
+
<div class="color-box" style="background: #f1b6da"></div>
|
|
245
|
+
<div class="color-box" style="background: #fde0ef"></div>
|
|
246
|
+
<div class="color-box" style="background: #f7f7f7"></div>
|
|
247
|
+
<div class="color-box" style="background: #e6f5d0"></div>
|
|
248
|
+
<div class="color-box" style="background: #b8e186"></div>
|
|
249
|
+
<div class="color-box" style="background: #7fbc41"></div>
|
|
250
|
+
<div class="color-box" style="background: #4d9221"></div>
|
|
251
|
+
<div class="color-box" style="background: #276419"></div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="palette">
|
|
255
|
+
<div class="palette-label">diverging-rdylgn</div>
|
|
256
|
+
<div class="palette-row">
|
|
257
|
+
<div class="color-box" style="background: #a50026"></div>
|
|
258
|
+
<div class="color-box" style="background: #d73027"></div>
|
|
259
|
+
<div class="color-box" style="background: #f46d43"></div>
|
|
260
|
+
<div class="color-box" style="background: #fdae61"></div>
|
|
261
|
+
<div class="color-box" style="background: #fee08b"></div>
|
|
262
|
+
<div class="color-box" style="background: #ffffbf"></div>
|
|
263
|
+
<div class="color-box" style="background: #d9ef8b"></div>
|
|
264
|
+
<div class="color-box" style="background: #a6d96a"></div>
|
|
265
|
+
<div class="color-box" style="background: #66bd63"></div>
|
|
266
|
+
<div class="color-box" style="background: #1a9850"></div>
|
|
267
|
+
<div class="color-box" style="background: #006837"></div>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="palette">
|
|
271
|
+
<div class="palette-label">diverging-brbg</div>
|
|
272
|
+
<div class="palette-row">
|
|
273
|
+
<div class="color-box" style="background: #543005"></div>
|
|
274
|
+
<div class="color-box" style="background: #8c510a"></div>
|
|
275
|
+
<div class="color-box" style="background: #bf812d"></div>
|
|
276
|
+
<div class="color-box" style="background: #dfc27d"></div>
|
|
277
|
+
<div class="color-box" style="background: #f6e8c3"></div>
|
|
278
|
+
<div class="color-box" style="background: #f5f5f5"></div>
|
|
279
|
+
<div class="color-box" style="background: #c7eae5"></div>
|
|
280
|
+
<div class="color-box" style="background: #80cdc1"></div>
|
|
281
|
+
<div class="color-box" style="background: #35978f"></div>
|
|
282
|
+
<div class="color-box" style="background: #01665e"></div>
|
|
283
|
+
<div class="color-box" style="background: #003c30"></div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="palette">
|
|
287
|
+
<div class="palette-label">sequential-blues</div>
|
|
288
|
+
<div class="palette-row">
|
|
289
|
+
<div class="color-box" style="background: #f7fbff"></div>
|
|
290
|
+
<div class="color-box" style="background: #deebf7"></div>
|
|
291
|
+
<div class="color-box" style="background: #c6dbef"></div>
|
|
292
|
+
<div class="color-box" style="background: #9ecae1"></div>
|
|
293
|
+
<div class="color-box" style="background: #6baed6"></div>
|
|
294
|
+
<div class="color-box" style="background: #4292c6"></div>
|
|
295
|
+
<div class="color-box" style="background: #2171b5"></div>
|
|
296
|
+
<div class="color-box" style="background: #08519c"></div>
|
|
297
|
+
<div class="color-box" style="background: #08306b"></div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="palette">
|
|
301
|
+
<div class="palette-label">sequential-greens</div>
|
|
302
|
+
<div class="palette-row">
|
|
303
|
+
<div class="color-box" style="background: #f7fcf5"></div>
|
|
304
|
+
<div class="color-box" style="background: #e5f5e0"></div>
|
|
305
|
+
<div class="color-box" style="background: #c7e9c0"></div>
|
|
306
|
+
<div class="color-box" style="background: #a1d99b"></div>
|
|
307
|
+
<div class="color-box" style="background: #74c476"></div>
|
|
308
|
+
<div class="color-box" style="background: #41ab5d"></div>
|
|
309
|
+
<div class="color-box" style="background: #238b45"></div>
|
|
310
|
+
<div class="color-box" style="background: #006d2c"></div>
|
|
311
|
+
<div class="color-box" style="background: #00441b"></div>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="palette">
|
|
315
|
+
<div class="palette-label">sequential-oranges</div>
|
|
316
|
+
<div class="palette-row">
|
|
317
|
+
<div class="color-box" style="background: #fff5eb"></div>
|
|
318
|
+
<div class="color-box" style="background: #fee6ce"></div>
|
|
319
|
+
<div class="color-box" style="background: #fdd0a2"></div>
|
|
320
|
+
<div class="color-box" style="background: #fdae6b"></div>
|
|
321
|
+
<div class="color-box" style="background: #fd8d3c"></div>
|
|
322
|
+
<div class="color-box" style="background: #f16913"></div>
|
|
323
|
+
<div class="color-box" style="background: #d94801"></div>
|
|
324
|
+
<div class="color-box" style="background: #a63603"></div>
|
|
325
|
+
<div class="color-box" style="background: #7f2704"></div>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="palette">
|
|
329
|
+
<div class="palette-label">sequential-purples</div>
|
|
330
|
+
<div class="palette-row">
|
|
331
|
+
<div class="color-box" style="background: #fcfbfd"></div>
|
|
332
|
+
<div class="color-box" style="background: #efedf5"></div>
|
|
333
|
+
<div class="color-box" style="background: #dadaeb"></div>
|
|
334
|
+
<div class="color-box" style="background: #bcbddc"></div>
|
|
335
|
+
<div class="color-box" style="background: #9e9ac8"></div>
|
|
336
|
+
<div class="color-box" style="background: #807dba"></div>
|
|
337
|
+
<div class="color-box" style="background: #6a51a3"></div>
|
|
338
|
+
<div class="color-box" style="background: #54278f"></div>
|
|
339
|
+
<div class="color-box" style="background: #3f007d"></div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="palette">
|
|
343
|
+
<div class="palette-label">sequential-reds</div>
|
|
344
|
+
<div class="palette-row">
|
|
345
|
+
<div class="color-box" style="background: #fff5f0"></div>
|
|
346
|
+
<div class="color-box" style="background: #fee0d2"></div>
|
|
347
|
+
<div class="color-box" style="background: #fcbba1"></div>
|
|
348
|
+
<div class="color-box" style="background: #fc9272"></div>
|
|
349
|
+
<div class="color-box" style="background: #fb6a4a"></div>
|
|
350
|
+
<div class="color-box" style="background: #ef3b2c"></div>
|
|
351
|
+
<div class="color-box" style="background: #cb181d"></div>
|
|
352
|
+
<div class="color-box" style="background: #a50f15"></div>
|
|
353
|
+
<div class="color-box" style="background: #67000d"></div>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="palette">
|
|
357
|
+
<div class="palette-label">sequential-ylgnbu</div>
|
|
358
|
+
<div class="palette-row">
|
|
359
|
+
<div class="color-box" style="background: #ffffd9"></div>
|
|
360
|
+
<div class="color-box" style="background: #edf8b1"></div>
|
|
361
|
+
<div class="color-box" style="background: #c7e9b4"></div>
|
|
362
|
+
<div class="color-box" style="background: #7fcdbb"></div>
|
|
363
|
+
<div class="color-box" style="background: #41b6c4"></div>
|
|
364
|
+
<div class="color-box" style="background: #1d91c0"></div>
|
|
365
|
+
<div class="color-box" style="background: #225ea8"></div>
|
|
366
|
+
<div class="color-box" style="background: #253494"></div>
|
|
367
|
+
<div class="color-box" style="background: #081d58"></div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
51
371
|
|
|
52
372
|
<script type="module">
|
|
53
373
|
import '../../out-tsc/temba-modules.js';
|
|
54
374
|
</script>
|
|
55
|
-
</body>
|
|
56
|
-
</html>
|
|
375
|
+
</body>
|
|
376
|
+
</html>
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
"datasets": [
|
|
18
18
|
{
|
|
19
19
|
"label": "General",
|
|
20
|
-
"data": [
|
|
20
|
+
"data": [31, 141, 60, 20, 49, 92, 109, 140, 214, 60, 70]
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"label": "VIPs",
|
|
24
|
-
"data": [
|
|
24
|
+
"data": [9, 97, 95, 55, 32, 61, 78, 115, 20, 91, 83]
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"label": "Orders",
|
|
@@ -29,11 +29,23 @@
|
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"label": "Survey",
|
|
32
|
-
"data": [
|
|
32
|
+
"data": [57, 31, 42, 63, 32, 11, 52, 35, 14, 160, 15]
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"label": "Tracking",
|
|
36
36
|
"data": [10, 26, 28, 43, 16, 10, 36, 24, 18, 26, 9]
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"label": "Birds",
|
|
40
|
+
"data": [31, 141, 60, 20, 49, 92, 109, 140, 214, 60, 70]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"label": "Dogs",
|
|
44
|
+
"data": [9, 97, 95, 55, 32, 61, 78, 115, 20, 91, 83]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"label": "Cats",
|
|
48
|
+
"data": [51, 84, 71, 78, 44, 45, 106, 114, 138, 125, 83]
|
|
37
49
|
}
|
|
38
50
|
]
|
|
39
51
|
}
|