active_analytics 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +27 -6
  3. data/app/assets/images/active_analytics.png +0 -0
  4. data/app/assets/images/active_analytics_screenshot.png +0 -0
  5. data/app/assets/javascripts/active_analytics/application.js +13 -0
  6. data/app/assets/stylesheets/active_analytics/application.css +1 -19
  7. data/app/assets/stylesheets/active_analytics/charts.css +80 -2262
  8. data/app/assets/stylesheets/active_analytics/style.css +161 -0
  9. data/app/controllers/active_analytics/application_controller.rb +12 -0
  10. data/app/controllers/active_analytics/pages_controller.rb +10 -7
  11. data/app/controllers/active_analytics/referrers_controller.rb +6 -4
  12. data/app/controllers/active_analytics/sites_controller.rb +5 -2
  13. data/app/helpers/active_analytics/application_helper.rb +3 -0
  14. data/app/helpers/active_analytics/sites_helper.rb +3 -0
  15. data/app/models/active_analytics/views_per_day.rb +26 -7
  16. data/app/views/active_analytics/pages/_table.html.erb +31 -19
  17. data/app/views/active_analytics/pages/index.html.erb +4 -7
  18. data/app/views/active_analytics/pages/show.html.erb +18 -15
  19. data/app/views/active_analytics/referrers/_table.html.erb +21 -14
  20. data/app/views/active_analytics/referrers/index.html.erb +4 -3
  21. data/app/views/active_analytics/referrers/show.html.erb +14 -9
  22. data/app/views/active_analytics/sites/_histogram.html.erb +15 -19
  23. data/app/views/active_analytics/sites/index.html.erb +12 -7
  24. data/app/views/active_analytics/sites/show.html.erb +12 -12
  25. data/app/views/layouts/active_analytics/_footer.html.erb +45 -3
  26. data/app/views/layouts/active_analytics/_header.html.erb +47 -21
  27. data/app/views/layouts/active_analytics/application.html.erb +15 -14
  28. data/db/migrate/20210303094108_create_active_analytics_views_per_days.rb +1 -1
  29. data/lib/active_analytics.rb +2 -4
  30. data/lib/active_analytics/version.rb +1 -1
  31. metadata +7 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 19ae6afed3bb78540b74da3b73496b6177cebd46642180b50da341dcaa556028
4
- data.tar.gz: afd793312a0c7023218e027c933fbd115ceb82cc57e914a0bc16d990c1dbee57
3
+ metadata.gz: 5054460d87d609cd11f9418dd84963ff89407d20c22beb685b6d2a9eb8b2f922
4
+ data.tar.gz: 3b2b67cb7d9ce4e652bd22ea519fa294f05fe3b105bd3bfbae932e477a3f9fe2
5
5
  SHA512:
6
- metadata.gz: c4394e54e78f78213dc855aedc7abccd5e8909426b637c5f8fdf970c4990eb0835db6f8cf3dc6bc61acbb489c927c003d50efb64dfeb8b590d6674fdd35c8ec2
7
- data.tar.gz: cc5606021a8320530d85055cf200d4e9270531720d40b7b91c26dca4aa2447bdd2f021e389f4fb2b378a2d8d5d87daece6c3dcfd3c667852d4a15197b35deba7
6
+ metadata.gz: 2280cf59a6a021c902451bf8a51b7ad678f57917aad786d16a4eeebfc2931766c49f99081eba4d13e0a74fbeba711b26c9c3c12f9405edc20dee4902908f6077
7
+ data.tar.gz: 915bd565e0218737fc98ce6a97948896be7beb65669a3c8fb5d29d1936f11e8476ad1c24324967ce9fccb7c0db65ebab74c5c31d0d582d7aa0d03dbe7099fb52
data/README.md CHANGED
@@ -1,8 +1,23 @@
1
1
  # ActiveAnalytics
2
2
 
3
- Trafic analytics for the win of privacy. To achieve this goal there is NO cookies, NO JavaScript, NO third parties and NO bullshit.
3
+ <img align="right" width="200px" src="app/assets/images/active_analytics.png" alt="active analytics logo" style="margin: 0 0 72px 48px;" />
4
4
 
5
- ActiveAnalytics is a Rails engine directly mountable in your Rails application.
5
+ Simple traffic analytics for the win of privacy.
6
+
7
+ * NO cookies
8
+ * NO JavaScript
9
+ * NO third parties
10
+ * NO bullshit
11
+
12
+ **ActiveAnalytics** is a Rails engine directly mountable in your Ruby on Rails application. It doesn't reveal anything about specific visitors. It cannot be blocked by adblockers or other privacy-protecting extensions (and doesn't need to).
13
+
14
+ **ActiveAnalytics** lets you know about:
15
+
16
+ * **Sources**: What are the pages and domains that bring some traffic.
17
+ * **Page views**: What are the pages that are the most viewed in your application.
18
+ * **Next/previous page**: What are the entry and exit pages for a given page of your application.
19
+
20
+ <img src="app/assets/images/active_analytics_screenshot.png" alt="active analytics logo" style="max-width: 100%; margin: 24px 0;" />
6
21
 
7
22
  ## Installation
8
23
  Add this line to your application's Gemfile:
@@ -17,12 +32,14 @@ rails active_analytics:install:migrations
17
32
  rails db:migrate
18
33
  ```
19
34
 
20
- Your controllers have to call `ActiveAnalytics.record_request(request)` to record pages views:
35
+ Your controllers have to call `ActiveAnalytics.record_request(request)` to record page views:
21
36
  ```ruby
22
37
  class ApplicationController < ActionController::Base
23
38
  before_action :record_page_view
24
39
 
25
40
  def record_page_view
41
+ # Add a condition to record only your canonical domain
42
+ # and use a gem such as crawler_detect to skip bots.
26
43
  ActiveAnalytics.record_request(request)
27
44
  end
28
45
  end
@@ -30,9 +47,9 @@ end
30
47
 
31
48
  This is a basic `before_action`. In case you don't want to record all page views, simply define a `skip_before_action :record_page_view` in the relevant controller.
32
49
 
33
- Finally just add the route to ActiveAnylytics at the desired endpoint:
50
+ Finally, just add the route to ActiveAnalytics dashboard at the desired endpoint:
34
51
  ```ruby
35
- mount ActiveAnalytics::Engine, at: "analytics"
52
+ mount ActiveAnalytics::Engine, at: "analytics" # http://localhost:3000/analytics
36
53
  ```
37
54
 
38
55
  ## Authentication and permissions
@@ -50,4 +67,8 @@ end
50
67
  ```
51
68
 
52
69
  ## License
53
- The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
70
+ The gem is available as open-source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
71
+
72
+ Made by [Base Secrète](https://basesecrete.com).
73
+
74
+ Rails developer? Check out [RoRvsWild](https://rorvswild.com), our Ruby on Rails application monitoring tool.
@@ -1,3 +1,16 @@
1
1
  //= require active_analytics/ariato
2
2
 
3
+ ActiveAnalytics = {}
4
+
5
+ ActiveAnalytics.Header = function() {
6
+ }
7
+
8
+ ActiveAnalytics.Header.prototype.toggleDateRangeForm = function() {
9
+ var form = this.node.querySelector("#dateRangeForm")
10
+ if (form.hasAttribute("hidden"))
11
+ form.removeAttribute("hidden")
12
+ else
13
+ form.setAttribute("hidden", "hidden")
14
+ }
15
+
3
16
  Ariato.launchWhenDomIsReady()
@@ -12,22 +12,4 @@
12
12
  *
13
13
  *= require_tree .
14
14
  *= require_self
15
- */
16
-
17
- body {
18
- max-width: var(--screen-s);
19
- margin: auto;
20
- }
21
-
22
- header {
23
- padding-top: var(--space-4x);
24
- }
25
-
26
- main {
27
- padding-top: var(--space-4x);
28
- margin-bottom: var(--space-8x);
29
- }
30
-
31
- section {
32
- margin-bottom: var(--space-4x);
33
- }
15
+ */
@@ -4,37 +4,23 @@
4
4
  * Licensed under MIT
5
5
  */
6
6
  .charts-css {
7
- --color-1: rgba(240, 50, 50, 0.75);
8
- --color-2: rgba(255, 180, 50, 0.75);
9
- --color-3: rgba(255, 220, 90, 0.75);
10
- --color-4: rgba(100, 210, 80, 0.75);
11
- --color-5: rgba(90, 165, 255, 0.75);
12
- --color-6: rgba(170, 90, 240, 0.75);
13
- --color-7: rgba(180, 180, 180, 0.75);
14
- --color-8: rgba(110, 110, 110, 0.75);
15
- --color-9: rgba(170, 150, 110, 0.75);
16
- --color-10: rgba(130, 50, 20, 0.75);
17
- --chart-bg-color: #f5f5f5;
7
+ --chart-bg-color: transparent;
18
8
  --heading-size: 0px;
19
- --primary-axis-color: rgba(0, 0, 0, 1);
9
+ --primary-axis-color: rgba(var(--color-grey-100), 1);
20
10
  --primary-axis-style: solid;
21
11
  --primary-axis-width: 1px;
22
- --secondary-axes-color: rgba(0, 0, 0, .15);
12
+ --secondary-axes-color: rgba(var(--color-grey-50), 1);
23
13
  --secondary-axes-style: solid;
24
14
  --secondary-axes-width: 1px;
25
- --data-axes-color: rgba(0, 0, 0, .15);
15
+ --data-axes-color: rgba(var(--color-grey-200), 1);
26
16
  --data-axes-style: solid;
27
17
  --data-axes-width: 1px;
28
- --legend-border-color: rgb(200, 200, 200);
18
+ --legend-border-color: rgba(var(--color-grey-200), 1);
29
19
  position: relative;
30
20
  display: block;
31
- width: 100%;
32
- height: 100%;
33
- margin: 0 auto;
21
+ margin: 0;
34
22
  padding: 0;
35
23
  border: 0;
36
- -webkit-print-color-adjust: exact;
37
- color-adjust: exact;
38
24
  }
39
25
 
40
26
  /*
@@ -80,130 +66,15 @@ table.charts-css tfoot {
80
66
  display: none;
81
67
  }
82
68
 
83
- /*
84
- * Reset list elements
85
- */
86
- ul.charts-css,
87
- ol.charts-css {
88
- list-style-type: none;
89
- }
90
-
91
- ul.charts-css li,
92
- ol.charts-css li {
93
- margin: 0;
94
- padding: 0;
95
- border: 0;
96
- }
97
-
98
- /*
99
- * Chart heading
100
- */
101
- .charts-css:not(.show-heading) caption {
102
- display: none;
103
- }
104
-
105
- .charts-css.show-heading {
106
- --heading-size: 1.5rem;
107
- }
108
-
109
- .charts-css.show-heading caption {
110
- display: block;
111
- width: 100%;
112
- height: var(--heading-size);
113
- }
114
69
 
115
70
  /*
116
71
  * Chart colors
117
- */
118
- .charts-css.bar tbody tr:nth-of-type(10n + 1) td,
119
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 1),
120
- .charts-css.column tbody tr:nth-of-type(10n + 1) td,
121
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1),
122
- .charts-css.area tbody tr td:nth-of-type(10n + 1)::before,
123
- .charts-css.line tbody tr td:nth-of-type(10n + 1)::before {
124
- background: var(--color, var(--color-1));
125
- }
126
-
127
- .charts-css.bar tbody tr:nth-of-type(10n + 2) td,
128
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 2),
129
- .charts-css.column tbody tr:nth-of-type(10n + 2) td,
130
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2),
131
- .charts-css.area tbody tr td:nth-of-type(10n + 2)::before,
132
- .charts-css.line tbody tr td:nth-of-type(10n + 2)::before {
133
- background: var(--color, var(--color-2));
134
- }
135
-
136
- .charts-css.bar tbody tr:nth-of-type(10n + 3) td,
137
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 3),
138
- .charts-css.column tbody tr:nth-of-type(10n + 3) td,
139
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3),
140
- .charts-css.area tbody tr td:nth-of-type(10n + 3)::before,
141
- .charts-css.line tbody tr td:nth-of-type(10n + 3)::before {
142
- background: var(--color, var(--color-3));
143
- }
144
-
145
- .charts-css.bar tbody tr:nth-of-type(10n + 4) td,
146
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 4),
147
- .charts-css.column tbody tr:nth-of-type(10n + 4) td,
148
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4),
149
- .charts-css.area tbody tr td:nth-of-type(10n + 4)::before,
150
- .charts-css.line tbody tr td:nth-of-type(10n + 4)::before {
151
- background: var(--color, var(--color-4));
152
- }
153
-
154
- .charts-css.bar tbody tr:nth-of-type(10n + 5) td,
155
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 5),
156
- .charts-css.column tbody tr:nth-of-type(10n + 5) td,
157
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5),
158
- .charts-css.area tbody tr td:nth-of-type(10n + 5)::before,
159
- .charts-css.line tbody tr td:nth-of-type(10n + 5)::before {
160
- background: var(--color, var(--color-5));
161
- }
162
-
163
- .charts-css.bar tbody tr:nth-of-type(10n + 6) td,
164
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 6),
165
- .charts-css.column tbody tr:nth-of-type(10n + 6) td,
166
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6),
167
- .charts-css.area tbody tr td:nth-of-type(10n + 6)::before,
168
- .charts-css.line tbody tr td:nth-of-type(10n + 6)::before {
169
- background: var(--color, var(--color-6));
170
- }
171
-
172
- .charts-css.bar tbody tr:nth-of-type(10n + 7) td,
173
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 7),
174
- .charts-css.column tbody tr:nth-of-type(10n + 7) td,
175
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7),
176
- .charts-css.area tbody tr td:nth-of-type(10n + 7)::before,
177
- .charts-css.line tbody tr td:nth-of-type(10n + 7)::before {
178
- background: var(--color, var(--color-7));
179
- }
180
-
181
- .charts-css.bar tbody tr:nth-of-type(10n + 8) td,
182
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 8),
183
- .charts-css.column tbody tr:nth-of-type(10n + 8) td,
184
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8),
185
- .charts-css.area tbody tr td:nth-of-type(10n + 8)::before,
186
- .charts-css.line tbody tr td:nth-of-type(10n + 8)::before {
187
- background: var(--color, var(--color-8));
188
- }
189
-
190
- .charts-css.bar tbody tr:nth-of-type(10n + 9) td,
191
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 9),
192
- .charts-css.column tbody tr:nth-of-type(10n + 9) td,
193
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9),
194
- .charts-css.area tbody tr td:nth-of-type(10n + 9)::before,
195
- .charts-css.line tbody tr td:nth-of-type(10n + 9)::before {
196
- background: var(--color, var(--color-9));
197
- }
72
+ */
198
73
 
199
- .charts-css.bar tbody tr:nth-of-type(10n + 10) td,
200
- .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 10),
201
- .charts-css.column tbody tr:nth-of-type(10n + 10) td,
202
- .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10),
203
- .charts-css.area tbody tr td:nth-of-type(10n + 10)::before,
204
- .charts-css.line tbody tr td:nth-of-type(10n + 10)::before {
205
- background: var(--color, var(--color-10));
206
- }
74
+ .charts-css.column tbody tr td {
75
+ background: rgba(var(--color-grey-100), 1);
76
+ padding: 0;
77
+ }
207
78
 
208
79
  /*
209
80
  * Chart data
@@ -227,70 +98,20 @@ ol.charts-css li {
227
98
  /*
228
99
  * Chart labels
229
100
  */
230
- .charts-css.bar:not(.show-labels) {
231
- --labels-size: 0;
232
- }
233
-
234
- .charts-css.bar:not(.show-labels) tbody tr th {
235
- display: none;
236
- }
237
-
238
- .charts-css.bar.show-labels {
239
- --labels-size: 80px;
240
- }
241
-
242
- .charts-css.bar.show-labels tbody tr th {
243
- display: -webkit-box;
244
- display: -ms-flexbox;
245
- display: flex;
246
- -webkit-box-pack: var(--labels-align, center);
247
- -ms-flex-pack: var(--labels-align, center);
248
- justify-content: var(--labels-align, center);
249
- -webkit-box-align: center;
250
- -ms-flex-align: center;
251
- align-items: center;
252
- -webkit-box-orient: vertical;
253
- -webkit-box-direction: normal;
254
- -ms-flex-direction: column;
255
- flex-direction: column;
256
- }
257
-
258
- .charts-css.bar.show-labels tr.hide-label th,
259
- .charts-css.bar.show-labels th.hide-label {
260
- display: none;
261
- }
262
-
263
- .charts-css.bar.labels-align-start tbody tr th {
264
- -webkit-box-align: var(--labels-align, flex-start);
265
- -ms-flex-align: var(--labels-align, flex-start);
266
- align-items: var(--labels-align, flex-start);
267
- }
268
-
269
- .charts-css.bar.labels-align-end tbody tr th {
270
- -webkit-box-align: var(--labels-align, flex-end);
271
- -ms-flex-align: var(--labels-align, flex-end);
272
- align-items: var(--labels-align, flex-end);
273
- }
274
-
275
- .charts-css.bar.labels-align-center tbody tr th {
276
- -webkit-box-align: var(--labels-align, center);
277
- -ms-flex-align: var(--labels-align, center);
278
- align-items: var(--labels-align, center);
279
- }
280
101
 
281
- .charts-css.column:not(.show-labels), .charts-css.area:not(.show-labels), .charts-css.line:not(.show-labels) {
102
+ .charts-css.column:not(.show-labels) {
282
103
  --labels-size: 0;
283
104
  }
284
105
 
285
- .charts-css.column:not(.show-labels) tbody tr th, .charts-css.area:not(.show-labels) tbody tr th, .charts-css.line:not(.show-labels) tbody tr th {
106
+ .charts-css.column:not(.show-labels) tbody tr th {
286
107
  display: none;
287
108
  }
288
109
 
289
- .charts-css.column.show-labels, .charts-css.area.show-labels, .charts-css.line.show-labels {
110
+ .charts-css.column.show-labels {
290
111
  --labels-size: 1.5rem;
291
112
  }
292
113
 
293
- .charts-css.column.show-labels tbody tr th, .charts-css.area.show-labels tbody tr th, .charts-css.line.show-labels tbody tr th {
114
+ .charts-css.column.show-labels tbody tr th {
294
115
  display: -webkit-box;
295
116
  display: -ms-flexbox;
296
117
  display: flex;
@@ -306,503 +127,169 @@ ol.charts-css li {
306
127
  flex-direction: column;
307
128
  }
308
129
 
309
- .charts-css.column.show-labels tr.hide-label th,
310
- .charts-css.column.show-labels th.hide-label, .charts-css.area.show-labels tr.hide-label th,
311
- .charts-css.area.show-labels th.hide-label, .charts-css.line.show-labels tr.hide-label th,
312
- .charts-css.line.show-labels th.hide-label {
313
- display: none;
314
- }
315
-
316
- .charts-css.column.labels-align-start tbody tr th, .charts-css.area.labels-align-start tbody tr th, .charts-css.line.labels-align-start tbody tr th {
317
- -webkit-box-pack: var(--labels-align, flex-start);
318
- -ms-flex-pack: var(--labels-align, flex-start);
319
- justify-content: var(--labels-align, flex-start);
320
- }
321
-
322
- .charts-css.column.labels-align-end tbody tr th, .charts-css.area.labels-align-end tbody tr th, .charts-css.line.labels-align-end tbody tr th {
323
- -webkit-box-pack: var(--labels-align, flex-end);
324
- -ms-flex-pack: var(--labels-align, flex-end);
325
- justify-content: var(--labels-align, flex-end);
326
- }
327
-
328
- .charts-css.column.labels-align-center tbody tr th, .charts-css.area.labels-align-center tbody tr th, .charts-css.line.labels-align-center tbody tr th {
329
- -webkit-box-pack: var(--labels-align, center);
330
- -ms-flex-pack: var(--labels-align, center);
331
- justify-content: var(--labels-align, center);
130
+ @media (max-width: 600px) {
131
+ .charts-css.column.show-labels {
132
+ --labels-size: 0;
133
+ }
134
+
135
+ .charts-css.column.show-labels tbody tr th {
136
+ display: none;
137
+ }
332
138
  }
333
139
 
334
140
  /*
335
141
  * Chart axes
336
142
  */
337
- .charts-css.column.show-primary-axis:not(.reverse) tbody tr, .charts-css.area.show-primary-axis:not(.reverse) tbody tr, .charts-css.line.show-primary-axis:not(.reverse) tbody tr {
143
+ .charts-css.column.show-primary-axis:not(.reverse) tbody tr {
338
144
  -webkit-border-after: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
339
145
  border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
340
146
  }
341
147
 
342
- .charts-css.column.show-primary-axis.reverse tbody tr, .charts-css.area.show-primary-axis.reverse tbody tr, .charts-css.line.show-primary-axis.reverse tbody tr {
148
+ .charts-css.column.show-primary-axis.reverse tbody tr {
343
149
  -webkit-border-before: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
344
150
  border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
345
151
  }
346
152
 
347
- .charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-1-secondary-axes:not(.reverse) tbody tr {
153
+ .charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr {
348
154
  background-size: 100% 100%;
349
155
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
350
156
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
351
157
  }
352
158
 
353
- .charts-css.column.show-1-secondary-axes.reverse tbody tr, .charts-css.area.show-1-secondary-axes.reverse tbody tr, .charts-css.line.show-1-secondary-axes.reverse tbody tr {
159
+ .charts-css.column.show-1-secondary-axes.reverse tbody tr {
354
160
  background-size: 100% 100%;
355
161
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
356
162
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
357
163
  }
358
164
 
359
- .charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-2-secondary-axes:not(.reverse) tbody tr {
165
+ .charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr {
360
166
  background-size: 100% 50%;
361
167
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
362
168
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
363
169
  }
364
170
 
365
- .charts-css.column.show-2-secondary-axes.reverse tbody tr, .charts-css.area.show-2-secondary-axes.reverse tbody tr, .charts-css.line.show-2-secondary-axes.reverse tbody tr {
171
+ .charts-css.column.show-2-secondary-axes.reverse tbody tr {
366
172
  background-size: 100% 50%;
367
173
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
368
174
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
369
175
  }
370
176
 
371
- .charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-3-secondary-axes:not(.reverse) tbody tr {
177
+ .charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr {
372
178
  background-size: 100% 33.333333%;
373
179
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
374
180
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
375
181
  }
376
182
 
377
- .charts-css.column.show-3-secondary-axes.reverse tbody tr, .charts-css.area.show-3-secondary-axes.reverse tbody tr, .charts-css.line.show-3-secondary-axes.reverse tbody tr {
183
+ .charts-css.column.show-3-secondary-axes.reverse tbody tr {
378
184
  background-size: 100% 33.333333%;
379
185
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
380
186
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
381
187
  }
382
188
 
383
- .charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-4-secondary-axes:not(.reverse) tbody tr {
189
+ .charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr {
384
190
  background-size: 100% 25%;
385
191
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
386
192
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
387
193
  }
388
194
 
389
- .charts-css.column.show-4-secondary-axes.reverse tbody tr, .charts-css.area.show-4-secondary-axes.reverse tbody tr, .charts-css.line.show-4-secondary-axes.reverse tbody tr {
195
+ .charts-css.column.show-4-secondary-axes.reverse tbody tr {
390
196
  background-size: 100% 25%;
391
197
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
392
198
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
393
199
  }
394
200
 
395
- .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-5-secondary-axes:not(.reverse) tbody tr {
201
+ .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr {
396
202
  background-size: 100% 20%;
397
203
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
398
204
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
399
205
  }
400
206
 
401
- .charts-css.column.show-5-secondary-axes.reverse tbody tr, .charts-css.area.show-5-secondary-axes.reverse tbody tr, .charts-css.line.show-5-secondary-axes.reverse tbody tr {
207
+ .charts-css.column.show-5-secondary-axes.reverse tbody tr {
402
208
  background-size: 100% 20%;
403
209
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
404
210
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
405
211
  }
406
212
 
407
- .charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-6-secondary-axes:not(.reverse) tbody tr {
213
+ .charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr {
408
214
  background-size: 100% 16.666667%;
409
215
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
410
216
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
411
217
  }
412
218
 
413
- .charts-css.column.show-6-secondary-axes.reverse tbody tr, .charts-css.area.show-6-secondary-axes.reverse tbody tr, .charts-css.line.show-6-secondary-axes.reverse tbody tr {
219
+ .charts-css.column.show-6-secondary-axes.reverse tbody tr {
414
220
  background-size: 100% 16.666667%;
415
221
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
416
222
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
417
223
  }
418
224
 
419
- .charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-7-secondary-axes:not(.reverse) tbody tr {
225
+ .charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr {
420
226
  background-size: 100% 14.285714%;
421
227
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
422
228
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
423
229
  }
424
230
 
425
- .charts-css.column.show-7-secondary-axes.reverse tbody tr, .charts-css.area.show-7-secondary-axes.reverse tbody tr, .charts-css.line.show-7-secondary-axes.reverse tbody tr {
231
+ .charts-css.column.show-7-secondary-axes.reverse tbody tr {
426
232
  background-size: 100% 14.285714%;
427
233
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
428
234
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
429
235
  }
430
236
 
431
- .charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-8-secondary-axes:not(.reverse) tbody tr {
237
+ .charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr {
432
238
  background-size: 100% 12.5%;
433
239
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
434
240
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
435
241
  }
436
242
 
437
- .charts-css.column.show-8-secondary-axes.reverse tbody tr, .charts-css.area.show-8-secondary-axes.reverse tbody tr, .charts-css.line.show-8-secondary-axes.reverse tbody tr {
243
+ .charts-css.column.show-8-secondary-axes.reverse tbody tr {
438
244
  background-size: 100% 12.5%;
439
245
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
440
246
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
441
247
  }
442
248
 
443
- .charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-9-secondary-axes:not(.reverse) tbody tr {
249
+ .charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr {
444
250
  background-size: 100% 11.111111%;
445
251
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
446
252
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
447
253
  }
448
254
 
449
- .charts-css.column.show-9-secondary-axes.reverse tbody tr, .charts-css.area.show-9-secondary-axes.reverse tbody tr, .charts-css.line.show-9-secondary-axes.reverse tbody tr {
255
+ .charts-css.column.show-9-secondary-axes.reverse tbody tr {
450
256
  background-size: 100% 11.111111%;
451
257
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
452
258
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
453
259
  }
454
260
 
455
- .charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-10-secondary-axes:not(.reverse) tbody tr {
261
+ .charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr {
456
262
  background-size: 100% 10%;
457
263
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
458
264
  background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
459
265
  }
460
266
 
461
- .charts-css.column.show-10-secondary-axes.reverse tbody tr, .charts-css.area.show-10-secondary-axes.reverse tbody tr, .charts-css.line.show-10-secondary-axes.reverse tbody tr {
267
+ .charts-css.column.show-10-secondary-axes.reverse tbody tr {
462
268
  background-size: 100% 10%;
463
269
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
464
270
  background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
465
271
  }
466
272
 
467
- .charts-css.column.show-data-axes tbody tr, .charts-css.area.show-data-axes tbody tr, .charts-css.line.show-data-axes tbody tr {
273
+ .charts-css.column.show-data-axes tbody tr {
468
274
  -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
469
275
  border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
470
276
  }
471
277
 
472
- .charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.area.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.line.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
473
- -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
474
- border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
475
- }
476
-
477
- .charts-css.column.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.area.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.line.show-data-axes.reverse-data tbody tr:last-of-type {
278
+ .charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
478
279
  -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
479
280
  border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
480
281
  }
481
282
 
482
- .charts-css.column.show-dataset-axes tbody tr td, .charts-css.area.show-dataset-axes tbody tr td, .charts-css.line.show-dataset-axes tbody tr td {
283
+ .charts-css.column.show-dataset-axes tbody tr td {
483
284
  -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
484
285
  border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
485
286
  }
486
287
 
487
- .charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.area.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.line.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
488
- -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
489
- border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
490
- }
491
-
492
- .charts-css.column.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.area.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.line.show-dataset-axes.reverse-data tbody tr:last-of-type td {
288
+ .charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
493
289
  -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
494
290
  border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
495
291
  }
496
292
 
497
- .charts-css.bar.show-primary-axis:not(.reverse) tbody tr {
498
- -webkit-border-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
499
- border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
500
- }
501
-
502
- .charts-css.bar.show-primary-axis.reverse tbody tr {
503
- -webkit-border-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
504
- border-inline-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
505
- }
506
-
507
- .charts-css.bar.show-1-secondary-axes:not(.reverse) tbody tr {
508
- background-size: 100% 100%;
509
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
510
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
511
- }
512
-
513
- .charts-css.bar.show-1-secondary-axes.reverse tbody tr {
514
- background-size: 100% 100%;
515
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
516
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
517
- }
518
-
519
- .charts-css.bar.show-2-secondary-axes:not(.reverse) tbody tr {
520
- background-size: 50% 100%;
521
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
522
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
523
- }
524
-
525
- .charts-css.bar.show-2-secondary-axes.reverse tbody tr {
526
- background-size: 50% 100%;
527
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
528
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
529
- }
530
-
531
- .charts-css.bar.show-3-secondary-axes:not(.reverse) tbody tr {
532
- background-size: 33.333333% 100%;
533
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
534
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
535
- }
536
-
537
- .charts-css.bar.show-3-secondary-axes.reverse tbody tr {
538
- background-size: 33.333333% 100%;
539
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
540
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
541
- }
542
-
543
- .charts-css.bar.show-4-secondary-axes:not(.reverse) tbody tr {
544
- background-size: 25% 100%;
545
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
546
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
547
- }
548
-
549
- .charts-css.bar.show-4-secondary-axes.reverse tbody tr {
550
- background-size: 25% 100%;
551
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
552
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
553
- }
554
-
555
- .charts-css.bar.show-5-secondary-axes:not(.reverse) tbody tr {
556
- background-size: 20% 100%;
557
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
558
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
559
- }
560
-
561
- .charts-css.bar.show-5-secondary-axes.reverse tbody tr {
562
- background-size: 20% 100%;
563
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
564
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
565
- }
566
-
567
- .charts-css.bar.show-6-secondary-axes:not(.reverse) tbody tr {
568
- background-size: 16.666667% 100%;
569
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
570
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
571
- }
572
-
573
- .charts-css.bar.show-6-secondary-axes.reverse tbody tr {
574
- background-size: 16.666667% 100%;
575
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
576
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
577
- }
578
-
579
- .charts-css.bar.show-7-secondary-axes:not(.reverse) tbody tr {
580
- background-size: 14.285714% 100%;
581
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
582
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
583
- }
584
-
585
- .charts-css.bar.show-7-secondary-axes.reverse tbody tr {
586
- background-size: 14.285714% 100%;
587
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
588
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
589
- }
590
-
591
- .charts-css.bar.show-8-secondary-axes:not(.reverse) tbody tr {
592
- background-size: 12.5% 100%;
593
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
594
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
595
- }
596
-
597
- .charts-css.bar.show-8-secondary-axes.reverse tbody tr {
598
- background-size: 12.5% 100%;
599
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
600
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
601
- }
602
-
603
- .charts-css.bar.show-9-secondary-axes:not(.reverse) tbody tr {
604
- background-size: 11.111111% 100%;
605
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
606
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
607
- }
608
-
609
- .charts-css.bar.show-9-secondary-axes.reverse tbody tr {
610
- background-size: 11.111111% 100%;
611
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
612
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
613
- }
614
-
615
- .charts-css.bar.show-10-secondary-axes:not(.reverse) tbody tr {
616
- background-size: 10% 100%;
617
- background-image: -webkit-gradient(linear, right top, left top, from(var(--secondary-axes-color)), to(transparent));
618
- background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
619
- }
620
-
621
- .charts-css.bar.show-10-secondary-axes.reverse tbody tr {
622
- background-size: 10% 100%;
623
- background-image: -webkit-gradient(linear, left top, right top, from(var(--secondary-axes-color)), to(transparent));
624
- background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
625
- }
626
-
627
- .charts-css.bar.show-data-axes tbody tr {
628
- -webkit-border-after: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
629
- border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
630
- }
631
-
632
- .charts-css.bar.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
633
- -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
634
- border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
635
- }
636
-
637
- .charts-css.bar.show-data-axes.reverse-data tbody tr:last-of-type {
638
- -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
639
- border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
640
- }
641
-
642
- .charts-css.bar.show-dataset-axes tbody tr td {
643
- -webkit-border-after: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
644
- border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
645
- }
646
-
647
- .charts-css.bar.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
648
- -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
649
- border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
650
- }
651
-
652
- .charts-css.bar.show-dataset-axes.reverse-data tbody tr:last-of-type td {
653
- -webkit-border-before: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
654
- border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
655
- }
656
-
657
- /*
658
- * Chart legend
659
- */
660
- .charts-css.legend {
661
- padding: 1rem;
662
- border: 1px solid var(--legend-border-color);
663
- list-style: none;
664
- font-size: 1rem;
665
- }
666
-
667
- .charts-css.legend li {
668
- line-height: 2;
669
- display: -webkit-box;
670
- display: -ms-flexbox;
671
- display: flex;
672
- -webkit-box-align: center;
673
- -ms-flex-align: center;
674
- align-items: center;
675
- }
676
-
677
- .charts-css.legend li::before {
678
- content: "";
679
- display: inline-block;
680
- vertical-align: middle;
681
- -webkit-margin-end: .5rem;
682
- margin-inline-end: .5rem;
683
- border-width: 2px;
684
- border-style: solid;
685
- }
686
-
687
- .charts-css.legend li:nth-child(1)::before {
688
- background-color: var(--color-1, transparent);
689
- border-color: var(--border-color-1, var(--border-color, #000));
690
- }
691
-
692
- .charts-css.legend li:nth-child(2)::before {
693
- background-color: var(--color-2, transparent);
694
- border-color: var(--border-color-2, var(--border-color, #000));
695
- }
696
-
697
- .charts-css.legend li:nth-child(3)::before {
698
- background-color: var(--color-3, transparent);
699
- border-color: var(--border-color-3, var(--border-color, #000));
700
- }
701
-
702
- .charts-css.legend li:nth-child(4)::before {
703
- background-color: var(--color-4, transparent);
704
- border-color: var(--border-color-4, var(--border-color, #000));
705
- }
706
-
707
- .charts-css.legend li:nth-child(5)::before {
708
- background-color: var(--color-5, transparent);
709
- border-color: var(--border-color-5, var(--border-color, #000));
710
- }
711
-
712
- .charts-css.legend li:nth-child(6)::before {
713
- background-color: var(--color-6, transparent);
714
- border-color: var(--border-color-6, var(--border-color, #000));
715
- }
716
-
717
- .charts-css.legend li:nth-child(7)::before {
718
- background-color: var(--color-7, transparent);
719
- border-color: var(--border-color-7, var(--border-color, #000));
720
- }
721
-
722
- .charts-css.legend li:nth-child(8)::before {
723
- background-color: var(--color-8, transparent);
724
- border-color: var(--border-color-8, var(--border-color, #000));
725
- }
726
-
727
- .charts-css.legend li:nth-child(9)::before {
728
- background-color: var(--color-9, transparent);
729
- border-color: var(--border-color-9, var(--border-color, #000));
730
- }
731
-
732
- .charts-css.legend li:nth-child(10)::before {
733
- background-color: var(--color-10, transparent);
734
- border-color: var(--border-color-10, var(--border-color, #000));
735
- }
736
-
737
- .charts-css:not(.legend-inline) {
738
- display: -webkit-box;
739
- display: -ms-flexbox;
740
- display: flex;
741
- -webkit-box-orient: vertical;
742
- -webkit-box-direction: normal;
743
- -ms-flex-direction: column;
744
- flex-direction: column;
745
- -ms-flex-wrap: nowrap;
746
- flex-wrap: nowrap;
747
- }
748
-
749
- .charts-css.legend-inline {
750
- display: -webkit-box;
751
- display: -ms-flexbox;
752
- display: flex;
753
- -webkit-box-orient: horizontal;
754
- -webkit-box-direction: normal;
755
- -ms-flex-direction: row;
756
- flex-direction: row;
757
- -ms-flex-wrap: wrap;
758
- flex-wrap: wrap;
759
- }
760
-
761
- .charts-css.legend-inline li {
762
- -webkit-margin-end: 1rem;
763
- margin-inline-end: 1rem;
764
- }
765
-
766
- .charts-css.legend-circle li::before {
767
- width: 1rem;
768
- height: 1rem;
769
- border-radius: 50%;
770
- }
771
-
772
- .charts-css.legend-ellipse li::before {
773
- width: 2rem;
774
- height: 1rem;
775
- border-radius: 50%;
776
- }
777
-
778
- .charts-css.legend-square li::before {
779
- width: 1rem;
780
- height: 1rem;
781
- border-radius: 3px;
782
- }
783
-
784
- .charts-css.legend-rhombus li::before {
785
- width: 1rem;
786
- height: 1rem;
787
- border-radius: 3px;
788
- -webkit-transform: rotate(45deg) scale(0.85);
789
- transform: rotate(45deg) scale(0.85);
790
- }
791
-
792
- .charts-css.legend-rectangle li::before {
793
- width: 2rem;
794
- height: 1rem;
795
- border-radius: 3px;
796
- }
797
-
798
- .charts-css.legend-line li::before {
799
- width: 2rem;
800
- height: 3px;
801
- border-radius: 2px;
802
- -webkit-box-sizing: content-box;
803
- box-sizing: content-box;
804
- }
805
-
806
293
  /*
807
294
  * Chart tooltips
808
295
  */
@@ -822,8 +309,8 @@ ol.charts-css li {
822
309
  opacity: 0;
823
310
  -webkit-transition: opacity .3s;
824
311
  transition: opacity .3s;
825
- background-color: #555;
826
- color: #fff;
312
+ background-color: rgba(var(--color-grey-500), 1);
313
+ color: rgba(var(--color-grey-00), 1);
827
314
  text-align: center;
828
315
  font-size: .9rem;
829
316
  }
@@ -836,18 +323,18 @@ ol.charts-css li {
836
323
  margin-left: -5px;
837
324
  border-width: 5px;
838
325
  border-style: solid;
839
- border-color: #555 transparent transparent;
326
+ border-color: rgba(var(--color-grey-500), 1) transparent transparent;
840
327
  }
841
328
 
842
- .charts-css td:hover .tooltip {
329
+ .charts-css tr:hover .tooltip {
843
330
  visibility: visible;
844
331
  opacity: 1;
845
332
  }
846
333
 
847
334
  /*
848
- * Bar Chart
335
+ * Column Chart
849
336
  */
850
- .charts-css.bar tbody {
337
+ .charts-css.column tbody {
851
338
  display: -webkit-box;
852
339
  display: -ms-flexbox;
853
340
  display: flex;
@@ -861,7 +348,7 @@ ol.charts-css li {
861
348
  height: calc(100% - var(--heading-size));
862
349
  }
863
350
 
864
- .charts-css.bar tbody tr {
351
+ .charts-css.column tbody tr {
865
352
  position: relative;
866
353
  -webkit-box-flex: 1;
867
354
  -ms-flex-positive: 1;
@@ -877,65 +364,49 @@ ol.charts-css li {
877
364
  -webkit-box-pack: start;
878
365
  -ms-flex-pack: start;
879
366
  justify-content: flex-start;
367
+ min-width: 0;
880
368
  }
881
369
 
882
- .charts-css.bar tbody tr th {
370
+ .charts-css.column tbody tr th {
883
371
  position: absolute;
884
- top: 0;
885
- bottom: 0;
372
+ right: 0;
373
+ left: 0;
886
374
  }
887
375
 
888
- .charts-css.bar tbody tr td {
376
+ .charts-css.column tbody tr td {
889
377
  display: -webkit-box;
890
378
  display: -ms-flexbox;
891
379
  display: flex;
892
- -webkit-box-align: center;
893
- -ms-flex-align: center;
894
- align-items: center;
895
- width: calc(100% * var(--size, 1));
896
- height: 100%;
380
+ -webkit-box-pack: center;
381
+ -ms-flex-pack: center;
382
+ justify-content: center;
383
+ width: 100%;
384
+ height: calc(100% * var(--size, 1));
897
385
  position: relative;
898
386
  }
899
387
 
900
- .charts-css.bar:not(.reverse) tbody tr {
901
- -webkit-box-align: start;
902
- -ms-flex-align: start;
903
- align-items: flex-start;
904
- -webkit-margin-start: var(--labels-size);
905
- margin-inline-start: var(--labels-size);
906
- }
907
-
908
- .charts-css.bar:not(.reverse) tbody tr th {
909
- left: calc(-1 * var(--labels-size) - var(--primary-axis-width));
910
- width: var(--labels-size);
911
- }
912
-
913
- .charts-css.bar:not(.reverse) tbody tr td {
914
- -webkit-box-pack: end;
915
- -ms-flex-pack: end;
916
- justify-content: flex-end;
917
- }
918
-
919
- .charts-css.bar.reverse tbody tr {
388
+ .charts-css.column:not(.reverse) tbody tr {
920
389
  -webkit-box-align: end;
921
390
  -ms-flex-align: end;
922
391
  align-items: flex-end;
923
- -webkit-margin-end: var(--labels-size);
924
- margin-inline-end: var(--labels-size);
392
+ -webkit-margin-after: var(--labels-size);
393
+ margin-block-end: var(--labels-size);
925
394
  }
926
395
 
927
- .charts-css.bar.reverse tbody tr th {
928
- right: calc(-1 * var(--labels-size) - var(--primary-axis-width));
929
- width: var(--labels-size);
396
+ .charts-css.column:not(.reverse) tbody tr th {
397
+ bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
398
+ height: var(--labels-size);
399
+ color: rgba(var(--color-grey-400), 1);
400
+ font-weight: 400;
930
401
  }
931
402
 
932
- .charts-css.bar.reverse tbody tr td {
933
- -webkit-box-pack: start;
934
- -ms-flex-pack: start;
935
- justify-content: flex-start;
403
+ .charts-css.column:not(.reverse) tbody tr td {
404
+ -webkit-box-align: start;
405
+ -ms-flex-align: start;
406
+ align-items: flex-start;
936
407
  }
937
408
 
938
- .charts-css.bar:not(.stacked) tbody tr td {
409
+ .charts-css.column:not(.stacked) tbody tr td {
939
410
  -webkit-box-flex: 1;
940
411
  -ms-flex-positive: 1;
941
412
  flex-grow: 1;
@@ -945,1662 +416,9 @@ ol.charts-css li {
945
416
  flex-basis: 0;
946
417
  }
947
418
 
948
- .charts-css.bar.stacked tbody tr td {
949
- -webkit-box-flex: unset;
950
- -ms-flex-positive: unset;
951
- flex-grow: unset;
952
- -ms-flex-negative: unset;
953
- flex-shrink: unset;
954
- -ms-flex-preferred-size: unset;
955
- flex-basis: unset;
956
- }
957
-
958
- .charts-css.bar.stacked.reverse-datasets tbody tr {
959
- -webkit-box-pack: end;
960
- -ms-flex-pack: end;
961
- justify-content: flex-end;
962
- }
963
-
964
- .charts-css.bar:not(.reverse-data) tbody {
965
- -webkit-box-orient: vertical;
966
- -webkit-box-direction: normal;
967
- -ms-flex-direction: column;
968
- flex-direction: column;
969
- }
970
-
971
- .charts-css.bar.reverse-data tbody {
972
- -webkit-box-orient: vertical;
973
- -webkit-box-direction: reverse;
974
- -ms-flex-direction: column-reverse;
975
- flex-direction: column-reverse;
976
- }
977
-
978
- .charts-css.bar:not(.reverse-datasets):not(.stacked) tbody tr {
979
- -webkit-box-orient: vertical;
980
- -webkit-box-direction: normal;
981
- -ms-flex-direction: column;
982
- flex-direction: column;
983
- }
984
-
985
- .charts-css.bar:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
986
- -webkit-box-orient: horizontal;
987
- -webkit-box-direction: normal;
988
- -ms-flex-direction: row;
989
- flex-direction: row;
990
- }
991
-
992
- .charts-css.bar:not(.reverse-datasets).stacked.reverse tbody tr {
993
- -webkit-box-orient: horizontal;
994
- -webkit-box-direction: reverse;
995
- -ms-flex-direction: row-reverse;
996
- flex-direction: row-reverse;
997
- }
998
-
999
- .charts-css.bar.reverse-datasets:not(.stacked) tbody tr {
1000
- -webkit-box-orient: vertical;
1001
- -webkit-box-direction: reverse;
1002
- -ms-flex-direction: column-reverse;
1003
- flex-direction: column-reverse;
1004
- }
1005
-
1006
- .charts-css.bar.reverse-datasets.stacked:not(.reverse) tbody tr {
1007
- -webkit-box-orient: horizontal;
1008
- -webkit-box-direction: reverse;
1009
- -ms-flex-direction: row-reverse;
1010
- flex-direction: row-reverse;
1011
- }
1012
-
1013
- .charts-css.bar.reverse-datasets.stacked.reverse tbody tr {
1014
- -webkit-box-orient: horizontal;
1015
- -webkit-box-direction: normal;
1016
- -ms-flex-direction: row;
1017
- flex-direction: row;
1018
- }
1019
-
1020
- .charts-css.bar.data-spacing-1 tbody tr {
1021
- -webkit-padding-before: 1px;
1022
- padding-block-start: 1px;
1023
- -webkit-padding-after: 1px;
1024
- padding-block-end: 1px;
1025
- }
1026
-
1027
- .charts-css.bar.data-spacing-2 tbody tr {
1028
- -webkit-padding-before: 2px;
1029
- padding-block-start: 2px;
1030
- -webkit-padding-after: 2px;
1031
- padding-block-end: 2px;
1032
- }
1033
-
1034
- .charts-css.bar.data-spacing-3 tbody tr {
1035
- -webkit-padding-before: 3px;
1036
- padding-block-start: 3px;
1037
- -webkit-padding-after: 3px;
1038
- padding-block-end: 3px;
1039
- }
1040
-
1041
- .charts-css.bar.data-spacing-4 tbody tr {
1042
- -webkit-padding-before: 4px;
1043
- padding-block-start: 4px;
1044
- -webkit-padding-after: 4px;
1045
- padding-block-end: 4px;
1046
- }
1047
-
1048
- .charts-css.bar.data-spacing-5 tbody tr {
1049
- -webkit-padding-before: 5px;
1050
- padding-block-start: 5px;
1051
- -webkit-padding-after: 5px;
1052
- padding-block-end: 5px;
1053
- }
1054
-
1055
- .charts-css.bar.data-spacing-6 tbody tr {
1056
- -webkit-padding-before: 6px;
1057
- padding-block-start: 6px;
1058
- -webkit-padding-after: 6px;
1059
- padding-block-end: 6px;
1060
- }
1061
-
1062
- .charts-css.bar.data-spacing-7 tbody tr {
1063
- -webkit-padding-before: 7px;
1064
- padding-block-start: 7px;
1065
- -webkit-padding-after: 7px;
1066
- padding-block-end: 7px;
1067
- }
1068
-
1069
- .charts-css.bar.data-spacing-8 tbody tr {
1070
- -webkit-padding-before: 8px;
1071
- padding-block-start: 8px;
1072
- -webkit-padding-after: 8px;
1073
- padding-block-end: 8px;
1074
- }
1075
-
1076
- .charts-css.bar.data-spacing-9 tbody tr {
1077
- -webkit-padding-before: 9px;
1078
- padding-block-start: 9px;
1079
- -webkit-padding-after: 9px;
1080
- padding-block-end: 9px;
1081
- }
1082
-
1083
- .charts-css.bar.data-spacing-10 tbody tr {
1084
- -webkit-padding-before: 10px;
1085
- padding-block-start: 10px;
1086
- -webkit-padding-after: 10px;
1087
- padding-block-end: 10px;
1088
- }
1089
-
1090
- .charts-css.bar.data-spacing-11 tbody tr {
1091
- -webkit-padding-before: 11px;
1092
- padding-block-start: 11px;
1093
- -webkit-padding-after: 11px;
1094
- padding-block-end: 11px;
1095
- }
1096
-
1097
- .charts-css.bar.data-spacing-12 tbody tr {
1098
- -webkit-padding-before: 12px;
1099
- padding-block-start: 12px;
1100
- -webkit-padding-after: 12px;
1101
- padding-block-end: 12px;
1102
- }
1103
-
1104
- .charts-css.bar.data-spacing-13 tbody tr {
1105
- -webkit-padding-before: 13px;
1106
- padding-block-start: 13px;
1107
- -webkit-padding-after: 13px;
1108
- padding-block-end: 13px;
1109
- }
1110
-
1111
- .charts-css.bar.data-spacing-14 tbody tr {
1112
- -webkit-padding-before: 14px;
1113
- padding-block-start: 14px;
1114
- -webkit-padding-after: 14px;
1115
- padding-block-end: 14px;
1116
- }
1117
-
1118
- .charts-css.bar.data-spacing-15 tbody tr {
1119
- -webkit-padding-before: 15px;
1120
- padding-block-start: 15px;
1121
- -webkit-padding-after: 15px;
1122
- padding-block-end: 15px;
1123
- }
1124
-
1125
- .charts-css.bar.data-spacing-16 tbody tr {
1126
- -webkit-padding-before: 16px;
1127
- padding-block-start: 16px;
1128
- -webkit-padding-after: 16px;
1129
- padding-block-end: 16px;
1130
- }
1131
-
1132
- .charts-css.bar.data-spacing-17 tbody tr {
1133
- -webkit-padding-before: 17px;
1134
- padding-block-start: 17px;
1135
- -webkit-padding-after: 17px;
1136
- padding-block-end: 17px;
1137
- }
1138
-
1139
- .charts-css.bar.data-spacing-18 tbody tr {
1140
- -webkit-padding-before: 18px;
1141
- padding-block-start: 18px;
1142
- -webkit-padding-after: 18px;
1143
- padding-block-end: 18px;
1144
- }
1145
-
1146
- .charts-css.bar.data-spacing-19 tbody tr {
1147
- -webkit-padding-before: 19px;
1148
- padding-block-start: 19px;
1149
- -webkit-padding-after: 19px;
1150
- padding-block-end: 19px;
1151
- }
1152
-
1153
- .charts-css.bar.data-spacing-20 tbody tr {
1154
- -webkit-padding-before: 20px;
1155
- padding-block-start: 20px;
1156
- -webkit-padding-after: 20px;
1157
- padding-block-end: 20px;
1158
- }
1159
-
1160
- .charts-css.bar.datasets-spacing-1 tbody tr td {
1161
- -webkit-margin-before: 1px;
1162
- margin-block-start: 1px;
1163
- -webkit-margin-after: 1px;
1164
- margin-block-end: 1px;
1165
- }
1166
-
1167
- .charts-css.bar.datasets-spacing-2 tbody tr td {
1168
- -webkit-margin-before: 2px;
1169
- margin-block-start: 2px;
1170
- -webkit-margin-after: 2px;
1171
- margin-block-end: 2px;
1172
- }
1173
-
1174
- .charts-css.bar.datasets-spacing-3 tbody tr td {
1175
- -webkit-margin-before: 3px;
1176
- margin-block-start: 3px;
1177
- -webkit-margin-after: 3px;
1178
- margin-block-end: 3px;
1179
- }
1180
-
1181
- .charts-css.bar.datasets-spacing-4 tbody tr td {
1182
- -webkit-margin-before: 4px;
1183
- margin-block-start: 4px;
1184
- -webkit-margin-after: 4px;
1185
- margin-block-end: 4px;
1186
- }
1187
-
1188
- .charts-css.bar.datasets-spacing-5 tbody tr td {
1189
- -webkit-margin-before: 5px;
1190
- margin-block-start: 5px;
1191
- -webkit-margin-after: 5px;
1192
- margin-block-end: 5px;
1193
- }
1194
-
1195
- .charts-css.bar.datasets-spacing-6 tbody tr td {
1196
- -webkit-margin-before: 6px;
1197
- margin-block-start: 6px;
1198
- -webkit-margin-after: 6px;
1199
- margin-block-end: 6px;
1200
- }
1201
-
1202
- .charts-css.bar.datasets-spacing-7 tbody tr td {
1203
- -webkit-margin-before: 7px;
1204
- margin-block-start: 7px;
1205
- -webkit-margin-after: 7px;
1206
- margin-block-end: 7px;
1207
- }
1208
-
1209
- .charts-css.bar.datasets-spacing-8 tbody tr td {
1210
- -webkit-margin-before: 8px;
1211
- margin-block-start: 8px;
1212
- -webkit-margin-after: 8px;
1213
- margin-block-end: 8px;
1214
- }
1215
-
1216
- .charts-css.bar.datasets-spacing-9 tbody tr td {
1217
- -webkit-margin-before: 9px;
1218
- margin-block-start: 9px;
1219
- -webkit-margin-after: 9px;
1220
- margin-block-end: 9px;
1221
- }
1222
-
1223
- .charts-css.bar.datasets-spacing-10 tbody tr td {
1224
- -webkit-margin-before: 10px;
1225
- margin-block-start: 10px;
1226
- -webkit-margin-after: 10px;
1227
- margin-block-end: 10px;
1228
- }
1229
-
1230
- .charts-css.bar.datasets-spacing-11 tbody tr td {
1231
- -webkit-margin-before: 11px;
1232
- margin-block-start: 11px;
1233
- -webkit-margin-after: 11px;
1234
- margin-block-end: 11px;
1235
- }
1236
-
1237
- .charts-css.bar.datasets-spacing-12 tbody tr td {
1238
- -webkit-margin-before: 12px;
1239
- margin-block-start: 12px;
1240
- -webkit-margin-after: 12px;
1241
- margin-block-end: 12px;
1242
- }
1243
-
1244
- .charts-css.bar.datasets-spacing-13 tbody tr td {
1245
- -webkit-margin-before: 13px;
1246
- margin-block-start: 13px;
1247
- -webkit-margin-after: 13px;
1248
- margin-block-end: 13px;
1249
- }
1250
-
1251
- .charts-css.bar.datasets-spacing-14 tbody tr td {
1252
- -webkit-margin-before: 14px;
1253
- margin-block-start: 14px;
1254
- -webkit-margin-after: 14px;
1255
- margin-block-end: 14px;
1256
- }
1257
-
1258
- .charts-css.bar.datasets-spacing-15 tbody tr td {
1259
- -webkit-margin-before: 15px;
1260
- margin-block-start: 15px;
1261
- -webkit-margin-after: 15px;
1262
- margin-block-end: 15px;
1263
- }
1264
-
1265
- .charts-css.bar.datasets-spacing-16 tbody tr td {
1266
- -webkit-margin-before: 16px;
1267
- margin-block-start: 16px;
1268
- -webkit-margin-after: 16px;
1269
- margin-block-end: 16px;
1270
- }
1271
-
1272
- .charts-css.bar.datasets-spacing-17 tbody tr td {
1273
- -webkit-margin-before: 17px;
1274
- margin-block-start: 17px;
1275
- -webkit-margin-after: 17px;
1276
- margin-block-end: 17px;
1277
- }
1278
-
1279
- .charts-css.bar.datasets-spacing-18 tbody tr td {
1280
- -webkit-margin-before: 18px;
1281
- margin-block-start: 18px;
1282
- -webkit-margin-after: 18px;
1283
- margin-block-end: 18px;
1284
- }
1285
-
1286
- .charts-css.bar.datasets-spacing-19 tbody tr td {
1287
- -webkit-margin-before: 19px;
1288
- margin-block-start: 19px;
1289
- -webkit-margin-after: 19px;
1290
- margin-block-end: 19px;
1291
- }
1292
-
1293
- .charts-css.bar.datasets-spacing-20 tbody tr td {
1294
- -webkit-margin-before: 20px;
1295
- margin-block-start: 20px;
1296
- -webkit-margin-after: 20px;
1297
- margin-block-end: 20px;
1298
- }
1299
-
1300
- /*
1301
- * Column Chart
1302
- */
1303
- .charts-css.column tbody {
1304
- display: -webkit-box;
1305
- display: -ms-flexbox;
1306
- display: flex;
1307
- -webkit-box-pack: justify;
1308
- -ms-flex-pack: justify;
1309
- justify-content: space-between;
1310
- -webkit-box-align: stretch;
1311
- -ms-flex-align: stretch;
1312
- align-items: stretch;
1313
- width: 100%;
1314
- height: calc(100% - var(--heading-size));
1315
- }
1316
-
1317
- .charts-css.column tbody tr {
1318
- position: relative;
1319
- -webkit-box-flex: 1;
1320
- -ms-flex-positive: 1;
1321
- flex-grow: 1;
1322
- -ms-flex-negative: 1;
1323
- flex-shrink: 1;
1324
- -ms-flex-preferred-size: 0;
1325
- flex-basis: 0;
1326
- overflow-wrap: anywhere;
1327
- display: -webkit-box;
1328
- display: -ms-flexbox;
1329
- display: flex;
1330
- -webkit-box-pack: start;
1331
- -ms-flex-pack: start;
1332
- justify-content: flex-start;
1333
- }
1334
-
1335
- .charts-css.column tbody tr th {
1336
- position: absolute;
1337
- right: 0;
1338
- left: 0;
1339
- }
1340
-
1341
- .charts-css.column tbody tr td {
1342
- display: -webkit-box;
1343
- display: -ms-flexbox;
1344
- display: flex;
1345
- -webkit-box-pack: center;
1346
- -ms-flex-pack: center;
1347
- justify-content: center;
1348
- width: 100%;
1349
- height: calc(100% * var(--size, 1));
1350
- position: relative;
1351
- }
1352
-
1353
- .charts-css.column:not(.reverse) tbody tr {
1354
- -webkit-box-align: end;
1355
- -ms-flex-align: end;
1356
- align-items: flex-end;
1357
- -webkit-margin-after: var(--labels-size);
1358
- margin-block-end: var(--labels-size);
1359
- }
1360
-
1361
- .charts-css.column:not(.reverse) tbody tr th {
1362
- bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1363
- height: var(--labels-size);
1364
- }
1365
-
1366
- .charts-css.column:not(.reverse) tbody tr td {
1367
- -webkit-box-align: start;
1368
- -ms-flex-align: start;
1369
- align-items: flex-start;
1370
- }
1371
-
1372
- .charts-css.column.reverse tbody tr {
1373
- -webkit-box-align: start;
1374
- -ms-flex-align: start;
1375
- align-items: flex-start;
1376
- -webkit-margin-before: var(--labels-size);
1377
- margin-block-start: var(--labels-size);
1378
- }
1379
-
1380
- .charts-css.column.reverse tbody tr th {
1381
- top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1382
- height: var(--labels-size);
1383
- }
1384
-
1385
- .charts-css.column.reverse tbody tr td {
1386
- -webkit-box-align: end;
1387
- -ms-flex-align: end;
1388
- align-items: flex-end;
1389
- }
1390
-
1391
- .charts-css.column:not(.stacked) tbody tr td {
1392
- -webkit-box-flex: 1;
1393
- -ms-flex-positive: 1;
1394
- flex-grow: 1;
1395
- -ms-flex-negative: 1;
1396
- flex-shrink: 1;
1397
- -ms-flex-preferred-size: 0;
1398
- flex-basis: 0;
1399
- }
1400
-
1401
- .charts-css.column.stacked tbody tr td {
1402
- -webkit-box-flex: unset;
1403
- -ms-flex-positive: unset;
1404
- flex-grow: unset;
1405
- -ms-flex-negative: unset;
1406
- flex-shrink: unset;
1407
- -ms-flex-preferred-size: unset;
1408
- flex-basis: unset;
1409
- }
1410
-
1411
- .charts-css.column.stacked.reverse-datasets tbody tr {
1412
- -webkit-box-pack: end;
1413
- -ms-flex-pack: end;
1414
- justify-content: flex-end;
1415
- }
1416
-
1417
419
  .charts-css.column:not(.reverse-data) tbody {
1418
420
  -webkit-box-orient: horizontal;
1419
421
  -webkit-box-direction: normal;
1420
422
  -ms-flex-direction: row;
1421
423
  flex-direction: row;
1422
- }
1423
-
1424
- .charts-css.column.reverse-data tbody {
1425
- -webkit-box-orient: horizontal;
1426
- -webkit-box-direction: reverse;
1427
- -ms-flex-direction: row-reverse;
1428
- flex-direction: row-reverse;
1429
- }
1430
-
1431
- .charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr {
1432
- -webkit-box-orient: horizontal;
1433
- -webkit-box-direction: normal;
1434
- -ms-flex-direction: row;
1435
- flex-direction: row;
1436
- }
1437
-
1438
- .charts-css.column:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
1439
- -webkit-box-orient: vertical;
1440
- -webkit-box-direction: reverse;
1441
- -ms-flex-direction: column-reverse;
1442
- flex-direction: column-reverse;
1443
- }
1444
-
1445
- .charts-css.column:not(.reverse-datasets).stacked.reverse tbody tr {
1446
- -webkit-box-orient: vertical;
1447
- -webkit-box-direction: normal;
1448
- -ms-flex-direction: column;
1449
- flex-direction: column;
1450
- }
1451
-
1452
- .charts-css.column.reverse-datasets:not(.stacked) tbody tr {
1453
- -webkit-box-orient: horizontal;
1454
- -webkit-box-direction: reverse;
1455
- -ms-flex-direction: row-reverse;
1456
- flex-direction: row-reverse;
1457
- }
1458
-
1459
- .charts-css.column.reverse-datasets.stacked:not(.reverse) tbody tr {
1460
- -webkit-box-orient: vertical;
1461
- -webkit-box-direction: normal;
1462
- -ms-flex-direction: column;
1463
- flex-direction: column;
1464
- }
1465
-
1466
- .charts-css.column.reverse-datasets.stacked.reverse tbody tr {
1467
- -webkit-box-orient: vertical;
1468
- -webkit-box-direction: reverse;
1469
- -ms-flex-direction: column-reverse;
1470
- flex-direction: column-reverse;
1471
- }
1472
-
1473
- .charts-css.column.data-spacing-1 tbody tr {
1474
- -webkit-padding-start: 1px;
1475
- padding-inline-start: 1px;
1476
- -webkit-padding-end: 1px;
1477
- padding-inline-end: 1px;
1478
- }
1479
-
1480
- .charts-css.column.data-spacing-2 tbody tr {
1481
- -webkit-padding-start: 2px;
1482
- padding-inline-start: 2px;
1483
- -webkit-padding-end: 2px;
1484
- padding-inline-end: 2px;
1485
- }
1486
-
1487
- .charts-css.column.data-spacing-3 tbody tr {
1488
- -webkit-padding-start: 3px;
1489
- padding-inline-start: 3px;
1490
- -webkit-padding-end: 3px;
1491
- padding-inline-end: 3px;
1492
- }
1493
-
1494
- .charts-css.column.data-spacing-4 tbody tr {
1495
- -webkit-padding-start: 4px;
1496
- padding-inline-start: 4px;
1497
- -webkit-padding-end: 4px;
1498
- padding-inline-end: 4px;
1499
- }
1500
-
1501
- .charts-css.column.data-spacing-5 tbody tr {
1502
- -webkit-padding-start: 5px;
1503
- padding-inline-start: 5px;
1504
- -webkit-padding-end: 5px;
1505
- padding-inline-end: 5px;
1506
- }
1507
-
1508
- .charts-css.column.data-spacing-6 tbody tr {
1509
- -webkit-padding-start: 6px;
1510
- padding-inline-start: 6px;
1511
- -webkit-padding-end: 6px;
1512
- padding-inline-end: 6px;
1513
- }
1514
-
1515
- .charts-css.column.data-spacing-7 tbody tr {
1516
- -webkit-padding-start: 7px;
1517
- padding-inline-start: 7px;
1518
- -webkit-padding-end: 7px;
1519
- padding-inline-end: 7px;
1520
- }
1521
-
1522
- .charts-css.column.data-spacing-8 tbody tr {
1523
- -webkit-padding-start: 8px;
1524
- padding-inline-start: 8px;
1525
- -webkit-padding-end: 8px;
1526
- padding-inline-end: 8px;
1527
- }
1528
-
1529
- .charts-css.column.data-spacing-9 tbody tr {
1530
- -webkit-padding-start: 9px;
1531
- padding-inline-start: 9px;
1532
- -webkit-padding-end: 9px;
1533
- padding-inline-end: 9px;
1534
- }
1535
-
1536
- .charts-css.column.data-spacing-10 tbody tr {
1537
- -webkit-padding-start: 10px;
1538
- padding-inline-start: 10px;
1539
- -webkit-padding-end: 10px;
1540
- padding-inline-end: 10px;
1541
- }
1542
-
1543
- .charts-css.column.data-spacing-11 tbody tr {
1544
- -webkit-padding-start: 11px;
1545
- padding-inline-start: 11px;
1546
- -webkit-padding-end: 11px;
1547
- padding-inline-end: 11px;
1548
- }
1549
-
1550
- .charts-css.column.data-spacing-12 tbody tr {
1551
- -webkit-padding-start: 12px;
1552
- padding-inline-start: 12px;
1553
- -webkit-padding-end: 12px;
1554
- padding-inline-end: 12px;
1555
- }
1556
-
1557
- .charts-css.column.data-spacing-13 tbody tr {
1558
- -webkit-padding-start: 13px;
1559
- padding-inline-start: 13px;
1560
- -webkit-padding-end: 13px;
1561
- padding-inline-end: 13px;
1562
- }
1563
-
1564
- .charts-css.column.data-spacing-14 tbody tr {
1565
- -webkit-padding-start: 14px;
1566
- padding-inline-start: 14px;
1567
- -webkit-padding-end: 14px;
1568
- padding-inline-end: 14px;
1569
- }
1570
-
1571
- .charts-css.column.data-spacing-15 tbody tr {
1572
- -webkit-padding-start: 15px;
1573
- padding-inline-start: 15px;
1574
- -webkit-padding-end: 15px;
1575
- padding-inline-end: 15px;
1576
- }
1577
-
1578
- .charts-css.column.data-spacing-16 tbody tr {
1579
- -webkit-padding-start: 16px;
1580
- padding-inline-start: 16px;
1581
- -webkit-padding-end: 16px;
1582
- padding-inline-end: 16px;
1583
- }
1584
-
1585
- .charts-css.column.data-spacing-17 tbody tr {
1586
- -webkit-padding-start: 17px;
1587
- padding-inline-start: 17px;
1588
- -webkit-padding-end: 17px;
1589
- padding-inline-end: 17px;
1590
- }
1591
-
1592
- .charts-css.column.data-spacing-18 tbody tr {
1593
- -webkit-padding-start: 18px;
1594
- padding-inline-start: 18px;
1595
- -webkit-padding-end: 18px;
1596
- padding-inline-end: 18px;
1597
- }
1598
-
1599
- .charts-css.column.data-spacing-19 tbody tr {
1600
- -webkit-padding-start: 19px;
1601
- padding-inline-start: 19px;
1602
- -webkit-padding-end: 19px;
1603
- padding-inline-end: 19px;
1604
- }
1605
-
1606
- .charts-css.column.data-spacing-20 tbody tr {
1607
- -webkit-padding-start: 20px;
1608
- padding-inline-start: 20px;
1609
- -webkit-padding-end: 20px;
1610
- padding-inline-end: 20px;
1611
- }
1612
-
1613
- .charts-css.column.datasets-spacing-1 tbody tr td {
1614
- -webkit-margin-start: 1px;
1615
- margin-inline-start: 1px;
1616
- -webkit-margin-end: 1px;
1617
- margin-inline-end: 1px;
1618
- }
1619
-
1620
- .charts-css.column.datasets-spacing-2 tbody tr td {
1621
- -webkit-margin-start: 2px;
1622
- margin-inline-start: 2px;
1623
- -webkit-margin-end: 2px;
1624
- margin-inline-end: 2px;
1625
- }
1626
-
1627
- .charts-css.column.datasets-spacing-3 tbody tr td {
1628
- -webkit-margin-start: 3px;
1629
- margin-inline-start: 3px;
1630
- -webkit-margin-end: 3px;
1631
- margin-inline-end: 3px;
1632
- }
1633
-
1634
- .charts-css.column.datasets-spacing-4 tbody tr td {
1635
- -webkit-margin-start: 4px;
1636
- margin-inline-start: 4px;
1637
- -webkit-margin-end: 4px;
1638
- margin-inline-end: 4px;
1639
- }
1640
-
1641
- .charts-css.column.datasets-spacing-5 tbody tr td {
1642
- -webkit-margin-start: 5px;
1643
- margin-inline-start: 5px;
1644
- -webkit-margin-end: 5px;
1645
- margin-inline-end: 5px;
1646
- }
1647
-
1648
- .charts-css.column.datasets-spacing-6 tbody tr td {
1649
- -webkit-margin-start: 6px;
1650
- margin-inline-start: 6px;
1651
- -webkit-margin-end: 6px;
1652
- margin-inline-end: 6px;
1653
- }
1654
-
1655
- .charts-css.column.datasets-spacing-7 tbody tr td {
1656
- -webkit-margin-start: 7px;
1657
- margin-inline-start: 7px;
1658
- -webkit-margin-end: 7px;
1659
- margin-inline-end: 7px;
1660
- }
1661
-
1662
- .charts-css.column.datasets-spacing-8 tbody tr td {
1663
- -webkit-margin-start: 8px;
1664
- margin-inline-start: 8px;
1665
- -webkit-margin-end: 8px;
1666
- margin-inline-end: 8px;
1667
- }
1668
-
1669
- .charts-css.column.datasets-spacing-9 tbody tr td {
1670
- -webkit-margin-start: 9px;
1671
- margin-inline-start: 9px;
1672
- -webkit-margin-end: 9px;
1673
- margin-inline-end: 9px;
1674
- }
1675
-
1676
- .charts-css.column.datasets-spacing-10 tbody tr td {
1677
- -webkit-margin-start: 10px;
1678
- margin-inline-start: 10px;
1679
- -webkit-margin-end: 10px;
1680
- margin-inline-end: 10px;
1681
- }
1682
-
1683
- .charts-css.column.datasets-spacing-11 tbody tr td {
1684
- -webkit-margin-start: 11px;
1685
- margin-inline-start: 11px;
1686
- -webkit-margin-end: 11px;
1687
- margin-inline-end: 11px;
1688
- }
1689
-
1690
- .charts-css.column.datasets-spacing-12 tbody tr td {
1691
- -webkit-margin-start: 12px;
1692
- margin-inline-start: 12px;
1693
- -webkit-margin-end: 12px;
1694
- margin-inline-end: 12px;
1695
- }
1696
-
1697
- .charts-css.column.datasets-spacing-13 tbody tr td {
1698
- -webkit-margin-start: 13px;
1699
- margin-inline-start: 13px;
1700
- -webkit-margin-end: 13px;
1701
- margin-inline-end: 13px;
1702
- }
1703
-
1704
- .charts-css.column.datasets-spacing-14 tbody tr td {
1705
- -webkit-margin-start: 14px;
1706
- margin-inline-start: 14px;
1707
- -webkit-margin-end: 14px;
1708
- margin-inline-end: 14px;
1709
- }
1710
-
1711
- .charts-css.column.datasets-spacing-15 tbody tr td {
1712
- -webkit-margin-start: 15px;
1713
- margin-inline-start: 15px;
1714
- -webkit-margin-end: 15px;
1715
- margin-inline-end: 15px;
1716
- }
1717
-
1718
- .charts-css.column.datasets-spacing-16 tbody tr td {
1719
- -webkit-margin-start: 16px;
1720
- margin-inline-start: 16px;
1721
- -webkit-margin-end: 16px;
1722
- margin-inline-end: 16px;
1723
- }
1724
-
1725
- .charts-css.column.datasets-spacing-17 tbody tr td {
1726
- -webkit-margin-start: 17px;
1727
- margin-inline-start: 17px;
1728
- -webkit-margin-end: 17px;
1729
- margin-inline-end: 17px;
1730
- }
1731
-
1732
- .charts-css.column.datasets-spacing-18 tbody tr td {
1733
- -webkit-margin-start: 18px;
1734
- margin-inline-start: 18px;
1735
- -webkit-margin-end: 18px;
1736
- margin-inline-end: 18px;
1737
- }
1738
-
1739
- .charts-css.column.datasets-spacing-19 tbody tr td {
1740
- -webkit-margin-start: 19px;
1741
- margin-inline-start: 19px;
1742
- -webkit-margin-end: 19px;
1743
- margin-inline-end: 19px;
1744
- }
1745
-
1746
- .charts-css.column.datasets-spacing-20 tbody tr td {
1747
- -webkit-margin-start: 20px;
1748
- margin-inline-start: 20px;
1749
- -webkit-margin-end: 20px;
1750
- margin-inline-end: 20px;
1751
- }
1752
-
1753
- /*
1754
- * Area Chart
1755
- */
1756
- .charts-css.area tbody {
1757
- display: -webkit-box;
1758
- display: -ms-flexbox;
1759
- display: flex;
1760
- -webkit-box-pack: justify;
1761
- -ms-flex-pack: justify;
1762
- justify-content: space-between;
1763
- -webkit-box-align: stretch;
1764
- -ms-flex-align: stretch;
1765
- align-items: stretch;
1766
- width: 100%;
1767
- height: calc(100% - var(--heading-size));
1768
- }
1769
-
1770
- .charts-css.area tbody tr {
1771
- position: relative;
1772
- -webkit-box-flex: 1;
1773
- -ms-flex-positive: 1;
1774
- flex-grow: 1;
1775
- -ms-flex-negative: 1;
1776
- flex-shrink: 1;
1777
- -ms-flex-preferred-size: 0;
1778
- flex-basis: 0;
1779
- overflow-wrap: anywhere;
1780
- display: -webkit-box;
1781
- display: -ms-flexbox;
1782
- display: flex;
1783
- -webkit-box-pack: start;
1784
- -ms-flex-pack: start;
1785
- justify-content: flex-start;
1786
- }
1787
-
1788
- .charts-css.area tbody tr th {
1789
- position: absolute;
1790
- right: 0;
1791
- left: 0;
1792
- }
1793
-
1794
- .charts-css.area tbody tr td {
1795
- display: -webkit-box;
1796
- display: -ms-flexbox;
1797
- display: flex;
1798
- -webkit-box-orient: vertical;
1799
- -webkit-box-direction: normal;
1800
- -ms-flex-flow: column;
1801
- flex-flow: column;
1802
- width: 100%;
1803
- height: 100%;
1804
- position: absolute;
1805
- top: 0;
1806
- right: 0;
1807
- bottom: 0;
1808
- left: 0;
1809
- z-index: 0;
1810
- }
1811
-
1812
- .charts-css.area tbody tr td::before {
1813
- content: "";
1814
- position: absolute;
1815
- top: 0;
1816
- right: 0;
1817
- bottom: 0;
1818
- left: 0;
1819
- z-index: -1;
1820
- }
1821
-
1822
- .charts-css.area tbody tr td::after {
1823
- content: "";
1824
- width: 100%;
1825
- }
1826
-
1827
- .charts-css.area:not(.reverse) tbody tr {
1828
- -webkit-box-align: end;
1829
- -ms-flex-align: end;
1830
- align-items: flex-end;
1831
- -webkit-margin-after: var(--labels-size);
1832
- margin-block-end: var(--labels-size);
1833
- }
1834
-
1835
- .charts-css.area:not(.reverse) tbody tr th {
1836
- bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1837
- height: var(--labels-size);
1838
- }
1839
-
1840
- .charts-css.area:not(.reverse) tbody tr td {
1841
- -webkit-box-align: start;
1842
- -ms-flex-align: start;
1843
- align-items: flex-start;
1844
- }
1845
-
1846
- .charts-css.area.reverse tbody tr {
1847
- -webkit-box-align: start;
1848
- -ms-flex-align: start;
1849
- align-items: flex-start;
1850
- -webkit-margin-before: var(--labels-size);
1851
- margin-block-start: var(--labels-size);
1852
- }
1853
-
1854
- .charts-css.area.reverse tbody tr th {
1855
- top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
1856
- height: var(--labels-size);
1857
- }
1858
-
1859
- .charts-css.area.reverse tbody tr td {
1860
- -webkit-box-align: end;
1861
- -ms-flex-align: end;
1862
- align-items: flex-end;
1863
- }
1864
-
1865
- .charts-css.area:not(.reverse-data) tbody {
1866
- -webkit-box-orient: horizontal;
1867
- -webkit-box-direction: normal;
1868
- -ms-flex-direction: row;
1869
- flex-direction: row;
1870
- }
1871
-
1872
- .charts-css.area.reverse-data tbody {
1873
- -webkit-box-orient: horizontal;
1874
- -webkit-box-direction: reverse;
1875
- -ms-flex-direction: row-reverse;
1876
- flex-direction: row-reverse;
1877
- }
1878
-
1879
- .charts-css.area:not(.reverse-datasets) tbody tr {
1880
- -webkit-box-orient: horizontal;
1881
- -webkit-box-direction: normal;
1882
- -ms-flex-direction: row;
1883
- flex-direction: row;
1884
- }
1885
-
1886
- .charts-css.area.reverse-datasets tbody tr {
1887
- -webkit-box-orient: horizontal;
1888
- -webkit-box-direction: reverse;
1889
- -ms-flex-direction: row-reverse;
1890
- flex-direction: row-reverse;
1891
- }
1892
-
1893
- .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td {
1894
- -webkit-box-pack: end;
1895
- -ms-flex-pack: end;
1896
- justify-content: flex-end;
1897
- -webkit-box-align: end;
1898
- -ms-flex-align: end;
1899
- align-items: flex-end;
1900
- }
1901
-
1902
- .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::before {
1903
- -webkit-clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
1904
- clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% 100%, 0% 100%);
1905
- }
1906
-
1907
- .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td .data {
1908
- -webkit-transform: translateX(50%);
1909
- transform: translateX(50%);
1910
- }
1911
-
1912
- .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::after {
1913
- height: calc(100% * var(--size));
1914
- }
1915
-
1916
- .charts-css.area:not(.reverse).reverse-data tbody tr td {
1917
- -webkit-box-pack: end;
1918
- -ms-flex-pack: end;
1919
- justify-content: flex-end;
1920
- -webkit-box-align: start;
1921
- -ms-flex-align: start;
1922
- align-items: flex-start;
1923
- }
1924
-
1925
- .charts-css.area:not(.reverse).reverse-data tbody tr td::before {
1926
- -webkit-clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
1927
- clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% 100%, 0% 100%);
1928
- }
1929
-
1930
- .charts-css.area:not(.reverse).reverse-data tbody tr td .data {
1931
- -webkit-transform: translateX(-50%);
1932
- transform: translateX(-50%);
1933
- }
1934
-
1935
- .charts-css.area:not(.reverse).reverse-data tbody tr td::after {
1936
- height: calc(100% * var(--size));
1937
- }
1938
-
1939
- .charts-css.area.reverse:not(.reverse-data) tbody tr td {
1940
- -webkit-box-pack: end;
1941
- -ms-flex-pack: end;
1942
- justify-content: flex-end;
1943
- -webkit-box-align: end;
1944
- -ms-flex-align: end;
1945
- align-items: flex-end;
1946
- }
1947
-
1948
- .charts-css.area.reverse:not(.reverse-data) tbody tr td::before {
1949
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
1950
- clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
1951
- }
1952
-
1953
- .charts-css.area.reverse:not(.reverse-data) tbody tr td .data {
1954
- -webkit-transform: translateX(50%);
1955
- transform: translateX(50%);
1956
- }
1957
-
1958
- .charts-css.area.reverse:not(.reverse-data) tbody tr td::after {
1959
- height: calc(100% * (1 -var(--size)));
1960
- }
1961
-
1962
- .charts-css.area.reverse.reverse-data tbody tr td {
1963
- -webkit-box-pack: end;
1964
- -ms-flex-pack: end;
1965
- justify-content: flex-end;
1966
- -webkit-box-align: start;
1967
- -ms-flex-align: start;
1968
- align-items: flex-start;
1969
- }
1970
-
1971
- .charts-css.area.reverse.reverse-data tbody tr td::before {
1972
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
1973
- clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
1974
- }
1975
-
1976
- .charts-css.area.reverse.reverse-data tbody tr td .data {
1977
- -webkit-transform: translateX(-50%);
1978
- transform: translateX(-50%);
1979
- }
1980
-
1981
- .charts-css.area.reverse.reverse-data tbody tr td::after {
1982
- height: calc(100% * (1 - var(--size)));
1983
- }
1984
-
1985
- .charts-css.area.data-spacing-1 tbody tr td::before, .charts-css.area.datasets-spacing-1 tbody tr td::before {
1986
- -webkit-margin-start: 1px;
1987
- margin-inline-start: 1px;
1988
- -webkit-margin-end: 1px;
1989
- margin-inline-end: 1px;
1990
- }
1991
-
1992
- .charts-css.area.data-spacing-2 tbody tr td::before, .charts-css.area.datasets-spacing-2 tbody tr td::before {
1993
- -webkit-margin-start: 2px;
1994
- margin-inline-start: 2px;
1995
- -webkit-margin-end: 2px;
1996
- margin-inline-end: 2px;
1997
- }
1998
-
1999
- .charts-css.area.data-spacing-3 tbody tr td::before, .charts-css.area.datasets-spacing-3 tbody tr td::before {
2000
- -webkit-margin-start: 3px;
2001
- margin-inline-start: 3px;
2002
- -webkit-margin-end: 3px;
2003
- margin-inline-end: 3px;
2004
- }
2005
-
2006
- .charts-css.area.data-spacing-4 tbody tr td::before, .charts-css.area.datasets-spacing-4 tbody tr td::before {
2007
- -webkit-margin-start: 4px;
2008
- margin-inline-start: 4px;
2009
- -webkit-margin-end: 4px;
2010
- margin-inline-end: 4px;
2011
- }
2012
-
2013
- .charts-css.area.data-spacing-5 tbody tr td::before, .charts-css.area.datasets-spacing-5 tbody tr td::before {
2014
- -webkit-margin-start: 5px;
2015
- margin-inline-start: 5px;
2016
- -webkit-margin-end: 5px;
2017
- margin-inline-end: 5px;
2018
- }
2019
-
2020
- .charts-css.area.data-spacing-6 tbody tr td::before, .charts-css.area.datasets-spacing-6 tbody tr td::before {
2021
- -webkit-margin-start: 6px;
2022
- margin-inline-start: 6px;
2023
- -webkit-margin-end: 6px;
2024
- margin-inline-end: 6px;
2025
- }
2026
-
2027
- .charts-css.area.data-spacing-7 tbody tr td::before, .charts-css.area.datasets-spacing-7 tbody tr td::before {
2028
- -webkit-margin-start: 7px;
2029
- margin-inline-start: 7px;
2030
- -webkit-margin-end: 7px;
2031
- margin-inline-end: 7px;
2032
- }
2033
-
2034
- .charts-css.area.data-spacing-8 tbody tr td::before, .charts-css.area.datasets-spacing-8 tbody tr td::before {
2035
- -webkit-margin-start: 8px;
2036
- margin-inline-start: 8px;
2037
- -webkit-margin-end: 8px;
2038
- margin-inline-end: 8px;
2039
- }
2040
-
2041
- .charts-css.area.data-spacing-9 tbody tr td::before, .charts-css.area.datasets-spacing-9 tbody tr td::before {
2042
- -webkit-margin-start: 9px;
2043
- margin-inline-start: 9px;
2044
- -webkit-margin-end: 9px;
2045
- margin-inline-end: 9px;
2046
- }
2047
-
2048
- .charts-css.area.data-spacing-10 tbody tr td::before, .charts-css.area.datasets-spacing-10 tbody tr td::before {
2049
- -webkit-margin-start: 10px;
2050
- margin-inline-start: 10px;
2051
- -webkit-margin-end: 10px;
2052
- margin-inline-end: 10px;
2053
- }
2054
-
2055
- .charts-css.area.data-spacing-11 tbody tr td::before, .charts-css.area.datasets-spacing-11 tbody tr td::before {
2056
- -webkit-margin-start: 11px;
2057
- margin-inline-start: 11px;
2058
- -webkit-margin-end: 11px;
2059
- margin-inline-end: 11px;
2060
- }
2061
-
2062
- .charts-css.area.data-spacing-12 tbody tr td::before, .charts-css.area.datasets-spacing-12 tbody tr td::before {
2063
- -webkit-margin-start: 12px;
2064
- margin-inline-start: 12px;
2065
- -webkit-margin-end: 12px;
2066
- margin-inline-end: 12px;
2067
- }
2068
-
2069
- .charts-css.area.data-spacing-13 tbody tr td::before, .charts-css.area.datasets-spacing-13 tbody tr td::before {
2070
- -webkit-margin-start: 13px;
2071
- margin-inline-start: 13px;
2072
- -webkit-margin-end: 13px;
2073
- margin-inline-end: 13px;
2074
- }
2075
-
2076
- .charts-css.area.data-spacing-14 tbody tr td::before, .charts-css.area.datasets-spacing-14 tbody tr td::before {
2077
- -webkit-margin-start: 14px;
2078
- margin-inline-start: 14px;
2079
- -webkit-margin-end: 14px;
2080
- margin-inline-end: 14px;
2081
- }
2082
-
2083
- .charts-css.area.data-spacing-15 tbody tr td::before, .charts-css.area.datasets-spacing-15 tbody tr td::before {
2084
- -webkit-margin-start: 15px;
2085
- margin-inline-start: 15px;
2086
- -webkit-margin-end: 15px;
2087
- margin-inline-end: 15px;
2088
- }
2089
-
2090
- .charts-css.area.data-spacing-16 tbody tr td::before, .charts-css.area.datasets-spacing-16 tbody tr td::before {
2091
- -webkit-margin-start: 16px;
2092
- margin-inline-start: 16px;
2093
- -webkit-margin-end: 16px;
2094
- margin-inline-end: 16px;
2095
- }
2096
-
2097
- .charts-css.area.data-spacing-17 tbody tr td::before, .charts-css.area.datasets-spacing-17 tbody tr td::before {
2098
- -webkit-margin-start: 17px;
2099
- margin-inline-start: 17px;
2100
- -webkit-margin-end: 17px;
2101
- margin-inline-end: 17px;
2102
- }
2103
-
2104
- .charts-css.area.data-spacing-18 tbody tr td::before, .charts-css.area.datasets-spacing-18 tbody tr td::before {
2105
- -webkit-margin-start: 18px;
2106
- margin-inline-start: 18px;
2107
- -webkit-margin-end: 18px;
2108
- margin-inline-end: 18px;
2109
- }
2110
-
2111
- .charts-css.area.data-spacing-19 tbody tr td::before, .charts-css.area.datasets-spacing-19 tbody tr td::before {
2112
- -webkit-margin-start: 19px;
2113
- margin-inline-start: 19px;
2114
- -webkit-margin-end: 19px;
2115
- margin-inline-end: 19px;
2116
- }
2117
-
2118
- .charts-css.area.data-spacing-20 tbody tr td::before, .charts-css.area.datasets-spacing-20 tbody tr td::before {
2119
- -webkit-margin-start: 20px;
2120
- margin-inline-start: 20px;
2121
- -webkit-margin-end: 20px;
2122
- margin-inline-end: 20px;
2123
- }
2124
-
2125
- /*
2126
- * Line Chart
2127
- */
2128
- .charts-css.line {
2129
- --line-size: 3px;
2130
- }
2131
-
2132
- .charts-css.line tbody {
2133
- display: -webkit-box;
2134
- display: -ms-flexbox;
2135
- display: flex;
2136
- -webkit-box-pack: justify;
2137
- -ms-flex-pack: justify;
2138
- justify-content: space-between;
2139
- -webkit-box-align: stretch;
2140
- -ms-flex-align: stretch;
2141
- align-items: stretch;
2142
- width: 100%;
2143
- height: calc(100% - var(--heading-size));
2144
- }
2145
-
2146
- .charts-css.line tbody tr {
2147
- position: relative;
2148
- -webkit-box-flex: 1;
2149
- -ms-flex-positive: 1;
2150
- flex-grow: 1;
2151
- -ms-flex-negative: 1;
2152
- flex-shrink: 1;
2153
- -ms-flex-preferred-size: 0;
2154
- flex-basis: 0;
2155
- overflow-wrap: anywhere;
2156
- display: -webkit-box;
2157
- display: -ms-flexbox;
2158
- display: flex;
2159
- -webkit-box-pack: start;
2160
- -ms-flex-pack: start;
2161
- justify-content: flex-start;
2162
- }
2163
-
2164
- .charts-css.line tbody tr th {
2165
- position: absolute;
2166
- right: 0;
2167
- left: 0;
2168
- }
2169
-
2170
- .charts-css.line tbody tr td {
2171
- display: -webkit-box;
2172
- display: -ms-flexbox;
2173
- display: flex;
2174
- -webkit-box-orient: vertical;
2175
- -webkit-box-direction: normal;
2176
- -ms-flex-flow: column;
2177
- flex-flow: column;
2178
- width: 100%;
2179
- height: 100%;
2180
- position: absolute;
2181
- top: 0;
2182
- right: 0;
2183
- bottom: 0;
2184
- left: 0;
2185
- z-index: 0;
2186
- }
2187
-
2188
- .charts-css.line tbody tr td::before {
2189
- content: "";
2190
- position: absolute;
2191
- top: 0;
2192
- right: 0;
2193
- bottom: 0;
2194
- left: 0;
2195
- z-index: -1;
2196
- }
2197
-
2198
- .charts-css.line tbody tr td::after {
2199
- content: "";
2200
- width: 100%;
2201
- }
2202
-
2203
- .charts-css.line:not(.reverse) tbody tr {
2204
- -webkit-box-align: end;
2205
- -ms-flex-align: end;
2206
- align-items: flex-end;
2207
- -webkit-margin-after: var(--labels-size);
2208
- margin-block-end: var(--labels-size);
2209
- }
2210
-
2211
- .charts-css.line:not(.reverse) tbody tr th {
2212
- bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
2213
- height: var(--labels-size);
2214
- }
2215
-
2216
- .charts-css.line:not(.reverse) tbody tr td {
2217
- -webkit-box-align: start;
2218
- -ms-flex-align: start;
2219
- align-items: flex-start;
2220
- }
2221
-
2222
- .charts-css.line.reverse tbody tr {
2223
- -webkit-box-align: start;
2224
- -ms-flex-align: start;
2225
- align-items: flex-start;
2226
- -webkit-margin-before: var(--labels-size);
2227
- margin-block-start: var(--labels-size);
2228
- }
2229
-
2230
- .charts-css.line.reverse tbody tr th {
2231
- top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
2232
- height: var(--labels-size);
2233
- }
2234
-
2235
- .charts-css.line.reverse tbody tr td {
2236
- -webkit-box-align: end;
2237
- -ms-flex-align: end;
2238
- align-items: flex-end;
2239
- }
2240
-
2241
- .charts-css.line:not(.reverse-data) tbody {
2242
- -webkit-box-orient: horizontal;
2243
- -webkit-box-direction: normal;
2244
- -ms-flex-direction: row;
2245
- flex-direction: row;
2246
- }
2247
-
2248
- .charts-css.line.reverse-data tbody {
2249
- -webkit-box-orient: horizontal;
2250
- -webkit-box-direction: reverse;
2251
- -ms-flex-direction: row-reverse;
2252
- flex-direction: row-reverse;
2253
- }
2254
-
2255
- .charts-css.line:not(.reverse-datasets) tbody tr {
2256
- -webkit-box-orient: horizontal;
2257
- -webkit-box-direction: normal;
2258
- -ms-flex-direction: row;
2259
- flex-direction: row;
2260
- }
2261
-
2262
- .charts-css.line.reverse-datasets tbody tr {
2263
- -webkit-box-orient: horizontal;
2264
- -webkit-box-direction: reverse;
2265
- -ms-flex-direction: row-reverse;
2266
- flex-direction: row-reverse;
2267
- }
2268
-
2269
- .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td {
2270
- -webkit-box-pack: end;
2271
- -ms-flex-pack: end;
2272
- justify-content: flex-end;
2273
- -webkit-box-align: end;
2274
- -ms-flex-align: end;
2275
- align-items: flex-end;
2276
- }
2277
-
2278
- .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::before {
2279
- -webkit-clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)));
2280
- clip-path: polygon(0% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--size)) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)));
2281
- }
2282
-
2283
- .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data {
2284
- -webkit-transform: translateX(50%);
2285
- transform: translateX(50%);
2286
- }
2287
-
2288
- .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::after {
2289
- height: calc(100% * var(--size));
2290
- }
2291
-
2292
- .charts-css.line:not(.reverse).reverse-data tbody tr td {
2293
- -webkit-box-pack: end;
2294
- -ms-flex-pack: end;
2295
- justify-content: flex-end;
2296
- -webkit-box-align: start;
2297
- -ms-flex-align: start;
2298
- align-items: flex-start;
2299
- }
2300
-
2301
- .charts-css.line:not(.reverse).reverse-data tbody tr td::before {
2302
- -webkit-clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)), 0% calc(100% * (1 - var(--size)) - var(--line-size)));
2303
- clip-path: polygon(0% calc(100% * (1 - var(--size))), 100% calc(100% * (1 - var(--start, var(--size)))), 100% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)), 0% calc(100% * (1 - var(--size)) - var(--line-size)));
2304
- }
2305
-
2306
- .charts-css.line:not(.reverse).reverse-data tbody tr td .data {
2307
- -webkit-transform: translateX(-50%);
2308
- transform: translateX(-50%);
2309
- }
2310
-
2311
- .charts-css.line:not(.reverse).reverse-data tbody tr td::after {
2312
- height: calc(100% * var(--size));
2313
- }
2314
-
2315
- .charts-css.line.reverse:not(.reverse-data) tbody tr td {
2316
- -webkit-box-pack: end;
2317
- -ms-flex-pack: end;
2318
- justify-content: flex-end;
2319
- -webkit-box-align: end;
2320
- -ms-flex-align: end;
2321
- align-items: flex-end;
2322
- }
2323
-
2324
- .charts-css.line.reverse:not(.reverse-data) tbody tr td::before {
2325
- -webkit-clip-path: polygon(0% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
2326
- clip-path: polygon(0% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--size)), 0% calc(100% * var(--start, var(--size))));
2327
- }
2328
-
2329
- .charts-css.line.reverse:not(.reverse-data) tbody tr td .data {
2330
- -webkit-transform: translateX(50%);
2331
- transform: translateX(50%);
2332
- }
2333
-
2334
- .charts-css.line.reverse:not(.reverse-data) tbody tr td::after {
2335
- height: calc(100% * (1 -var(--size)));
2336
- }
2337
-
2338
- .charts-css.line.reverse.reverse-data tbody tr td {
2339
- -webkit-box-pack: end;
2340
- -ms-flex-pack: end;
2341
- justify-content: flex-end;
2342
- -webkit-box-align: start;
2343
- -ms-flex-align: start;
2344
- align-items: flex-start;
2345
- }
2346
-
2347
- .charts-css.line.reverse.reverse-data tbody tr td::before {
2348
- -webkit-clip-path: polygon(0% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
2349
- clip-path: polygon(0% calc(100% * var(--size) - var(--line-size)), 100% calc(100% * var(--start, var(--size)) - var(--line-size)), 100% calc(100% * var(--start, var(--size))), 0% calc(100% * var(--size)));
2350
- }
2351
-
2352
- .charts-css.line.reverse.reverse-data tbody tr td .data {
2353
- -webkit-transform: translateX(-50%);
2354
- transform: translateX(-50%);
2355
- }
2356
-
2357
- .charts-css.line.reverse.reverse-data tbody tr td::after {
2358
- height: calc(100% * (1 - var(--size)));
2359
- }
2360
-
2361
- .charts-css.line.data-spacing-1 tbody tr td::before, .charts-css.line.datasets-spacing-1 tbody tr td::before {
2362
- -webkit-margin-start: 1px;
2363
- margin-inline-start: 1px;
2364
- -webkit-margin-end: 1px;
2365
- margin-inline-end: 1px;
2366
- }
2367
-
2368
- .charts-css.line.data-spacing-2 tbody tr td::before, .charts-css.line.datasets-spacing-2 tbody tr td::before {
2369
- -webkit-margin-start: 2px;
2370
- margin-inline-start: 2px;
2371
- -webkit-margin-end: 2px;
2372
- margin-inline-end: 2px;
2373
- }
2374
-
2375
- .charts-css.line.data-spacing-3 tbody tr td::before, .charts-css.line.datasets-spacing-3 tbody tr td::before {
2376
- -webkit-margin-start: 3px;
2377
- margin-inline-start: 3px;
2378
- -webkit-margin-end: 3px;
2379
- margin-inline-end: 3px;
2380
- }
2381
-
2382
- .charts-css.line.data-spacing-4 tbody tr td::before, .charts-css.line.datasets-spacing-4 tbody tr td::before {
2383
- -webkit-margin-start: 4px;
2384
- margin-inline-start: 4px;
2385
- -webkit-margin-end: 4px;
2386
- margin-inline-end: 4px;
2387
- }
2388
-
2389
- .charts-css.line.data-spacing-5 tbody tr td::before, .charts-css.line.datasets-spacing-5 tbody tr td::before {
2390
- -webkit-margin-start: 5px;
2391
- margin-inline-start: 5px;
2392
- -webkit-margin-end: 5px;
2393
- margin-inline-end: 5px;
2394
- }
2395
-
2396
- .charts-css.line.data-spacing-6 tbody tr td::before, .charts-css.line.datasets-spacing-6 tbody tr td::before {
2397
- -webkit-margin-start: 6px;
2398
- margin-inline-start: 6px;
2399
- -webkit-margin-end: 6px;
2400
- margin-inline-end: 6px;
2401
- }
2402
-
2403
- .charts-css.line.data-spacing-7 tbody tr td::before, .charts-css.line.datasets-spacing-7 tbody tr td::before {
2404
- -webkit-margin-start: 7px;
2405
- margin-inline-start: 7px;
2406
- -webkit-margin-end: 7px;
2407
- margin-inline-end: 7px;
2408
- }
2409
-
2410
- .charts-css.line.data-spacing-8 tbody tr td::before, .charts-css.line.datasets-spacing-8 tbody tr td::before {
2411
- -webkit-margin-start: 8px;
2412
- margin-inline-start: 8px;
2413
- -webkit-margin-end: 8px;
2414
- margin-inline-end: 8px;
2415
- }
2416
-
2417
- .charts-css.line.data-spacing-9 tbody tr td::before, .charts-css.line.datasets-spacing-9 tbody tr td::before {
2418
- -webkit-margin-start: 9px;
2419
- margin-inline-start: 9px;
2420
- -webkit-margin-end: 9px;
2421
- margin-inline-end: 9px;
2422
- }
2423
-
2424
- .charts-css.line.data-spacing-10 tbody tr td::before, .charts-css.line.datasets-spacing-10 tbody tr td::before {
2425
- -webkit-margin-start: 10px;
2426
- margin-inline-start: 10px;
2427
- -webkit-margin-end: 10px;
2428
- margin-inline-end: 10px;
2429
- }
2430
-
2431
- .charts-css.line.data-spacing-11 tbody tr td::before, .charts-css.line.datasets-spacing-11 tbody tr td::before {
2432
- -webkit-margin-start: 11px;
2433
- margin-inline-start: 11px;
2434
- -webkit-margin-end: 11px;
2435
- margin-inline-end: 11px;
2436
- }
2437
-
2438
- .charts-css.line.data-spacing-12 tbody tr td::before, .charts-css.line.datasets-spacing-12 tbody tr td::before {
2439
- -webkit-margin-start: 12px;
2440
- margin-inline-start: 12px;
2441
- -webkit-margin-end: 12px;
2442
- margin-inline-end: 12px;
2443
- }
2444
-
2445
- .charts-css.line.data-spacing-13 tbody tr td::before, .charts-css.line.datasets-spacing-13 tbody tr td::before {
2446
- -webkit-margin-start: 13px;
2447
- margin-inline-start: 13px;
2448
- -webkit-margin-end: 13px;
2449
- margin-inline-end: 13px;
2450
- }
2451
-
2452
- .charts-css.line.data-spacing-14 tbody tr td::before, .charts-css.line.datasets-spacing-14 tbody tr td::before {
2453
- -webkit-margin-start: 14px;
2454
- margin-inline-start: 14px;
2455
- -webkit-margin-end: 14px;
2456
- margin-inline-end: 14px;
2457
- }
2458
-
2459
- .charts-css.line.data-spacing-15 tbody tr td::before, .charts-css.line.datasets-spacing-15 tbody tr td::before {
2460
- -webkit-margin-start: 15px;
2461
- margin-inline-start: 15px;
2462
- -webkit-margin-end: 15px;
2463
- margin-inline-end: 15px;
2464
- }
2465
-
2466
- .charts-css.line.data-spacing-16 tbody tr td::before, .charts-css.line.datasets-spacing-16 tbody tr td::before {
2467
- -webkit-margin-start: 16px;
2468
- margin-inline-start: 16px;
2469
- -webkit-margin-end: 16px;
2470
- margin-inline-end: 16px;
2471
- }
2472
-
2473
- .charts-css.line.data-spacing-17 tbody tr td::before, .charts-css.line.datasets-spacing-17 tbody tr td::before {
2474
- -webkit-margin-start: 17px;
2475
- margin-inline-start: 17px;
2476
- -webkit-margin-end: 17px;
2477
- margin-inline-end: 17px;
2478
- }
2479
-
2480
- .charts-css.line.data-spacing-18 tbody tr td::before, .charts-css.line.datasets-spacing-18 tbody tr td::before {
2481
- -webkit-margin-start: 18px;
2482
- margin-inline-start: 18px;
2483
- -webkit-margin-end: 18px;
2484
- margin-inline-end: 18px;
2485
- }
2486
-
2487
- .charts-css.line.data-spacing-19 tbody tr td::before, .charts-css.line.datasets-spacing-19 tbody tr td::before {
2488
- -webkit-margin-start: 19px;
2489
- margin-inline-start: 19px;
2490
- -webkit-margin-end: 19px;
2491
- margin-inline-end: 19px;
2492
- }
2493
-
2494
- .charts-css.line.data-spacing-20 tbody tr td::before, .charts-css.line.datasets-spacing-20 tbody tr td::before {
2495
- -webkit-margin-start: 20px;
2496
- margin-inline-start: 20px;
2497
- -webkit-margin-end: 20px;
2498
- margin-inline-end: 20px;
2499
- }
2500
-
2501
- /*
2502
- * Radial Chart
2503
- */
2504
- .charts-css.radial tbody {
2505
- display: block;
2506
- width: 100%;
2507
- height: 0;
2508
- -webkit-padding-after: 100%;
2509
- padding-block-end: 100%;
2510
- border-radius: 50%;
2511
- background-color: var(--chart-bg-color);
2512
- }
2513
-
2514
- .charts-css.radial tbody tr {
2515
- display: none;
2516
- }
2517
-
2518
- /*
2519
- * Pie Chart
2520
- */
2521
- .charts-css.pie tbody {
2522
- display: block;
2523
- width: 100%;
2524
- height: 0;
2525
- -webkit-padding-after: 100%;
2526
- padding-block-end: 100%;
2527
- border-radius: 50%;
2528
- background-color: var(--chart-bg-color);
2529
- }
2530
-
2531
- .charts-css.pie tbody tr {
2532
- display: none;
2533
- }
2534
-
2535
- /*
2536
- * Donut Chart
2537
- */
2538
- .charts-css.donut tbody {
2539
- display: block;
2540
- width: 100%;
2541
- height: 0;
2542
- -webkit-padding-after: 100%;
2543
- padding-block-end: 100%;
2544
- border-radius: 50%;
2545
- background-color: var(--chart-bg-color);
2546
- }
2547
-
2548
- .charts-css.donut tbody tr {
2549
- display: none;
2550
- }
2551
-
2552
- .charts-css.donut tbody::after {
2553
- content: "";
2554
- position: absolute;
2555
- top: 50%;
2556
- left: 50%;
2557
- -webkit-transform: translate(-50%, -50%);
2558
- transform: translate(-50%, -50%);
2559
- width: var(--donut-inner-size, 50%);
2560
- height: var(--donut-inner-size, 50%);
2561
- display: -webkit-box;
2562
- display: -ms-flexbox;
2563
- display: flex;
2564
- -webkit-box-pack: center;
2565
- -ms-flex-pack: center;
2566
- justify-content: center;
2567
- -webkit-box-align: center;
2568
- -ms-flex-align: center;
2569
- align-items: center;
2570
- border-radius: 50%;
2571
- background-color: var(--donut-inner-color, #fff);
2572
- }
2573
-
2574
- /*
2575
- * Polar Chart
2576
- */
2577
- .charts-css.polar tbody {
2578
- display: block;
2579
- width: 100%;
2580
- height: 0;
2581
- -webkit-padding-after: 100%;
2582
- padding-block-end: 100%;
2583
- border-radius: 50%;
2584
- background-color: var(--chart-bg-color);
2585
- }
2586
-
2587
- .charts-css.polar tbody tr {
2588
- display: none;
2589
- }
2590
-
2591
- /*
2592
- * Radar Chart
2593
- */
2594
- .charts-css.radar tbody {
2595
- display: block;
2596
- width: 100%;
2597
- height: 0;
2598
- -webkit-padding-after: 100%;
2599
- padding-block-end: 100%;
2600
- border-radius: 50%;
2601
- background-color: var(--chart-bg-color);
2602
- }
2603
-
2604
- .charts-css.radar tbody tr {
2605
- display: none;
2606
- }
424
+ }