govuk_publishing_components 44.4.0 → 44.4.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: acaaebc230d315ddd2b5247622c5b98dccef59074721ca8f33c338360b55ddc4
4
- data.tar.gz: 4662cc43523ed060f3d57044179501e2623f9ac93574a38fdfb5c1c8f069e928
3
+ metadata.gz: 03e23c3d08539cc78a6885528be7099e0b51ecb14cf07bbdbba63423efa7dab5
4
+ data.tar.gz: 3c73f4b0792536700425c873c987154e63fd4effa58df6942c9906b0f19fdd81
5
5
  SHA512:
6
- metadata.gz: 3b14547627345313b4f75687ab9565fe1bf959d3245b833c2fc959b6b5dc5bbb14d8bce0e15826ea4ecef4475b99384c04251125539ef1e8576102424e7309e7
7
- data.tar.gz: 5a99542a48114c6a2fe965b06ec669e10d2d8b66877190f042f6df02c8135d717f63864c5ff3732d0ba1d5bada1ba34ed4373626f55c2d117effe91889c28c2d
6
+ metadata.gz: 370b141dcced2433adeaefa9a367e1f9d42c3b4df99893849fdbc5e99611bd57cde80aa23f81a6e0833336183239f26da717589c6eb864739bb58eb1beb7b833
7
+ data.tar.gz: 1378a24ec8d2042c698857de2eed671348cb09b42d6a44fcad8bca34433295ff6cf2ad8e6da74468c4d5eedde925f75775a67ff99987eff4f79dabde3662a1d3
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "44.4.0".freeze
2
+ VERSION = "44.4.1".freeze
3
3
  end
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2013-2023 Andrew Kane
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,593 @@
1
+ # Chartkick.js
2
+
3
+ Create beautiful charts with one line of JavaScript
4
+
5
+ [See it in action](https://ankane.github.io/chartkick.js/examples/)
6
+
7
+ Supports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)
8
+
9
+ Also available for [React](https://github.com/ankane/react-chartkick), [Vue.js](https://github.com/ankane/vue-chartkick), [Ruby](https://github.com/ankane/chartkick), [Python](https://github.com/mher/chartkick.py), [Elixir](https://github.com/buren/chartkick-ex), and [Clojure](https://github.com/yfractal/chartkick)
10
+
11
+ [![Build Status](https://github.com/ankane/chartkick.js/workflows/build/badge.svg?branch=master)](https://github.com/ankane/chartkick.js/actions)
12
+
13
+ ## Quick Start
14
+
15
+ Run
16
+
17
+ ```sh
18
+ npm install chartkick chart.js
19
+ ```
20
+
21
+ And add
22
+
23
+ ```javascript
24
+ import Chartkick from "chartkick"
25
+ import "chartkick/chart.js"
26
+ ```
27
+
28
+ This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
29
+
30
+ ## Charts
31
+
32
+ Create a div for the chart
33
+
34
+ ```html
35
+ <div id="chart" style="height: 300px;"></div>
36
+ ```
37
+
38
+ Line chart
39
+
40
+ ```javascript
41
+ new Chartkick.LineChart("chart", {"2021-01-01": 11, "2021-01-02": 6})
42
+ ```
43
+
44
+ Pie chart
45
+
46
+ ```javascript
47
+ new Chartkick.PieChart("chart", [["Blueberry", 44], ["Strawberry", 23]])
48
+ ```
49
+
50
+ Column chart
51
+
52
+ ```javascript
53
+ new Chartkick.ColumnChart("chart", [["Sun", 32], ["Mon", 46], ["Tue", 28]])
54
+ ```
55
+
56
+ Bar chart
57
+
58
+ ```javascript
59
+ new Chartkick.BarChart("chart", [["Work", 32], ["Play", 1492]])
60
+ ```
61
+
62
+ Area chart
63
+
64
+ ```javascript
65
+ new Chartkick.AreaChart("chart", {"2021-01-01": 11, "2021-01-02": 6})
66
+ ```
67
+
68
+ Scatter chart
69
+
70
+ ```javascript
71
+ new Chartkick.ScatterChart("chart", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]])
72
+ ```
73
+
74
+ Geo chart - *Google Charts*
75
+
76
+ ```javascript
77
+ new Chartkick.GeoChart("chart", [["United States", 44], ["Germany", 23], ["Brazil", 22]])
78
+ ```
79
+
80
+ Timeline - *Google Charts*
81
+
82
+ ```javascript
83
+ new Chartkick.Timeline("chart", [["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"]])
84
+ ```
85
+
86
+ Multiple series
87
+
88
+ ```javascript
89
+ data = [
90
+ {name: "Workout", data: {"2021-01-01": 3, "2021-01-02": 4}},
91
+ {name: "Call parents", data: {"2021-01-01": 5, "2021-01-02": 3}}
92
+ ]
93
+ new Chartkick.LineChart("chart", data)
94
+ ```
95
+
96
+ Multiple series stacked and grouped - *Chart.js or Highcharts*
97
+
98
+ ```javascript
99
+ data = [
100
+ {name: "Apple", data: {"Tuesday": 3, "Friday": 4}, stack: "fruit"},
101
+ {name: "Pear", data: {"Tuesday": 1, "Friday": 8}, stack: "fruit"},
102
+ {name: "Carrot", data: {"Tuesday": 3, "Friday": 4}, stack: "vegetable"},
103
+ {name: "Beet", data: {"Tuesday": 1, "Friday": 8}, stack: "vegetable"}
104
+ ]
105
+ new Chartkick.BarChart("chart", data, {stacked: true})
106
+ ```
107
+
108
+ ## Data
109
+
110
+ Data can be an array, object, callback, or URL.
111
+
112
+ #### Array
113
+
114
+ ```javascript
115
+ new Chartkick.LineChart("chart", [["2021-01-01", 2], ["2021-01-02", 3]])
116
+ ```
117
+
118
+ #### Object
119
+
120
+ ```javascript
121
+ new Chartkick.LineChart("chart", {"2021-01-01": 2, "2021-01-02": 3})
122
+ ```
123
+
124
+ #### Callback
125
+
126
+ ```javascript
127
+ function fetchData(success, fail) {
128
+ success({"2021-01-01": 2, "2021-01-02": 3})
129
+ // or fail("Data not available")
130
+ }
131
+
132
+ new Chartkick.LineChart("chart", fetchData)
133
+ ```
134
+
135
+ #### URL
136
+
137
+ Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
138
+
139
+ ```javascript
140
+ new Chartkick.LineChart("chart", "/stocks")
141
+ ```
142
+
143
+ ## Options
144
+
145
+ Min and max for y-axis
146
+
147
+ ```javascript
148
+ new Chartkick.LineChart("chart", data, {min: 1000, max: 5000})
149
+ ```
150
+
151
+ `min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.
152
+
153
+ Min and max for x-axis - *Chart.js*
154
+
155
+ ```javascript
156
+ new Chartkick.LineChart("chart", data, {xmin: "2021-01-01", xmax: "2022-01-01"})
157
+ ```
158
+
159
+ Colors
160
+
161
+ ```javascript
162
+ new Chartkick.LineChart("chart", data, {colors: ["#b00", "#666"]})
163
+ ```
164
+
165
+ Stacked columns or bars
166
+
167
+ ```javascript
168
+ new Chartkick.ColumnChart("chart", data, {stacked: true})
169
+ ```
170
+
171
+ > You can also set `stacked` to `percent` or `relative` for Google Charts and `percent` for Highcharts
172
+
173
+ Discrete axis
174
+
175
+ ```javascript
176
+ new Chartkick.LineChart("chart", data, {discrete: true})
177
+ ```
178
+
179
+ Label (for single series)
180
+
181
+ ```javascript
182
+ new Chartkick.LineChart("chart", data, {label: "Value"})
183
+ ```
184
+
185
+ Axis titles
186
+
187
+ ```javascript
188
+ new Chartkick.LineChart("chart", data, {xtitle: "Time", ytitle: "Population"})
189
+ ```
190
+
191
+ Straight lines between points instead of a curve
192
+
193
+ ```javascript
194
+ new Chartkick.LineChart("chart", data, {curve: false})
195
+ ```
196
+
197
+ Hide points
198
+
199
+ ```javascript
200
+ new Chartkick.LineChart("chart", data, {points: false})
201
+ ```
202
+
203
+ Show or hide legend
204
+
205
+ ```javascript
206
+ new Chartkick.LineChart("chart", data, {legend: true})
207
+ ```
208
+
209
+ Specify legend position
210
+
211
+ ```javascript
212
+ new Chartkick.LineChart("chart", data, {legend: "bottom"})
213
+ ```
214
+
215
+ Donut chart
216
+
217
+ ```javascript
218
+ new Chartkick.PieChart("chart", data, {donut: true})
219
+ ```
220
+
221
+ Prefix, useful for currency - *Chart.js, Highcharts*
222
+
223
+ ```javascript
224
+ new Chartkick.LineChart("chart", data, {prefix: "$"})
225
+ ```
226
+
227
+ Suffix, useful for percentages - *Chart.js, Highcharts*
228
+
229
+ ```javascript
230
+ new Chartkick.LineChart("chart", data, {suffix: "%"})
231
+ ```
232
+
233
+ Set a thousands separator - *Chart.js, Highcharts*
234
+
235
+ ```javascript
236
+ new Chartkick.LineChart("chart", data, {thousands: ","})
237
+ ```
238
+
239
+ Set a decimal separator - *Chart.js, Highcharts*
240
+
241
+ ```javascript
242
+ new Chartkick.LineChart("chart", data, {decimal: ","})
243
+ ```
244
+
245
+ Set significant digits - *Chart.js, Highcharts*
246
+
247
+ ```javascript
248
+ new Chartkick.LineChart("chart", data, {precision: 3})
249
+ ```
250
+
251
+ Set rounding - *Chart.js, Highcharts*
252
+
253
+ ```javascript
254
+ new Chartkick.LineChart("chart", data, {round: 2})
255
+ ```
256
+
257
+ Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
258
+
259
+ ```javascript
260
+ new Chartkick.LineChart("chart", data, {round: 2, zeros: true})
261
+ ```
262
+
263
+ Friendly byte sizes - *Chart.js*
264
+
265
+ ```javascript
266
+ new Chartkick.LineChart("chart", data, {bytes: true})
267
+ ```
268
+
269
+ Specify the message when the chart is loading
270
+
271
+ ```javascript
272
+ new Chartkick.LineChart("chart", data, {loading: "Loading..."})
273
+ ```
274
+
275
+ Specify the message when data is empty
276
+
277
+ ```javascript
278
+ new Chartkick.LineChart("chart", data, {empty: "No data"})
279
+ ```
280
+
281
+ Refresh data from a remote source every `n` seconds
282
+
283
+ ```javascript
284
+ new Chartkick.LineChart("chart", url, {refresh: 60})
285
+ ```
286
+
287
+ You can pass options directly to the charting library with:
288
+
289
+ ```javascript
290
+ new Chartkick.LineChart("chart", data, {library: {backgroundColor: "pink"}})
291
+ ```
292
+
293
+ See the documentation for [Chart.js](https://www.chartjs.org/docs/), [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), and [Highcharts](https://api.highcharts.com/highcharts) for more info.
294
+
295
+ To customize datasets in Chart.js, use:
296
+
297
+ ```javascript
298
+ new Chartkick.LineChart("chart", data, {dataset: {borderWidth: 10}})
299
+ ```
300
+
301
+ You can pass this option to individual series as well.
302
+
303
+ ### Global Options
304
+
305
+ To set options for all of your charts, use:
306
+
307
+ ```javascript
308
+ Chartkick.options = {
309
+ colors: ["#b00", "#666"]
310
+ }
311
+ ```
312
+
313
+ ### Multiple Series
314
+
315
+ You can pass a few options with a series:
316
+
317
+ - `name`
318
+ - `data`
319
+ - `color`
320
+ - `dataset` - *Chart.js only*
321
+ - `points` - *Chart.js only*
322
+ - `curve` - *Chart.js only*
323
+
324
+ ### Code
325
+
326
+ If you want to use the charting library directly, get the code with:
327
+
328
+ ```javascript
329
+ new Chartkick.LineChart("chart", data, {code: true})
330
+ ```
331
+
332
+ The code will be logged to the JavaScript console.
333
+
334
+ **Note:** JavaScript functions cannot be logged, so it may not be identical.
335
+
336
+ ### Download Charts
337
+
338
+ *Chart.js only*
339
+
340
+ Give users the ability to download charts. It all happens in the browser - no server-side code needed.
341
+
342
+ ```javascript
343
+ new Chartkick.LineChart("chart", data, {download: true})
344
+ ```
345
+
346
+ Set the filename
347
+
348
+ ```javascript
349
+ new Chartkick.LineChart("chart", data, {download: {filename: "boom"}})
350
+ ```
351
+
352
+ **Note:** Safari will open the image in a new window instead of downloading.
353
+
354
+ Set the background color
355
+
356
+ ```javascript
357
+ new Chartkick.LineChart("chart", data, {download: {background: "#fff"}})
358
+ ```
359
+
360
+ ## Installation
361
+
362
+ ### Chart.js
363
+
364
+ Run
365
+
366
+ ```sh
367
+ npm install chartkick chart.js
368
+ ```
369
+
370
+ And add
371
+
372
+ ```javascript
373
+ import Chartkick from "chartkick"
374
+ import "chartkick/chart.js"
375
+ ```
376
+
377
+ ### Google Charts
378
+
379
+ Run
380
+
381
+ ```sh
382
+ npm install chartkick
383
+ ```
384
+
385
+ And add
386
+
387
+ ```javascript
388
+ import Chartkick from "chartkick"
389
+ ```
390
+
391
+ And include on the page
392
+
393
+ ```html
394
+ <script src="https://www.gstatic.com/charts/loader.js"></script>
395
+ ```
396
+
397
+ To specify a language or Google Maps API key, use:
398
+
399
+ ```js
400
+ Chartkick.configure({language: "de", mapsApiKey: "..."})
401
+ ```
402
+
403
+ before your charts.
404
+
405
+ ### Highcharts
406
+
407
+ Run
408
+
409
+ ```sh
410
+ npm install chartkick highcharts
411
+ ```
412
+
413
+ And add
414
+
415
+ ```javascript
416
+ import Chartkick from "chartkick"
417
+ import "chartkick/highcharts"
418
+ ```
419
+
420
+ ### No Package Manager
421
+
422
+ Download [chartkick.js](https://unpkg.com/chartkick) directly.
423
+
424
+ For Chart.js (works with 4+), [download it](https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js) and the [date-fns adapter bundle](https://unpkg.com/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.js) and use:
425
+
426
+ ```html
427
+ <script src="/path/to/chart.js"></script>
428
+ <script src="/path/to/chartjs-adapter-date-fns.bundle.js"></script>
429
+ <script src="chartkick.js"></script>
430
+ ```
431
+
432
+ For Google Charts, use:
433
+
434
+ ```html
435
+ <script src="https://www.gstatic.com/charts/loader.js"></script>
436
+ <script src="chartkick.js"></script>
437
+ ```
438
+
439
+ For Highcharts (works with 2.1+), [download it](https://www.highcharts.com/download) and use:
440
+
441
+ ```html
442
+ <script src="/path/to/highcharts.js"></script>
443
+ <script src="chartkick.js"></script>
444
+ ```
445
+
446
+ ### Multiple Libraries
447
+
448
+ If more than one charting library is loaded, choose between them with:
449
+
450
+ ```javascript
451
+ new Chartkick.LineChart("chart", data, {adapter: "google"}) // or highcharts or chartjs
452
+ ```
453
+
454
+ ## API
455
+
456
+ Access a chart with:
457
+
458
+ ```javascript
459
+ var chart = Chartkick.charts["chart-id"]
460
+ ```
461
+
462
+ Get the underlying chart object with:
463
+
464
+ ```javascript
465
+ chart.getChartObject()
466
+ ```
467
+
468
+ You can also use:
469
+
470
+ ```javascript
471
+ chart.getElement()
472
+ chart.getData()
473
+ chart.getOptions()
474
+ chart.getAdapter()
475
+ ```
476
+
477
+ Update the data with:
478
+
479
+ ```javascript
480
+ chart.updateData(newData)
481
+ ```
482
+
483
+ You can also specify new options:
484
+
485
+ ```javascript
486
+ chart.setOptions(newOptions)
487
+ // or
488
+ chart.updateData(newData, newOptions)
489
+ ```
490
+
491
+ Refresh the data from a remote source:
492
+
493
+ ```javascript
494
+ chart.refreshData()
495
+ ```
496
+
497
+ Redraw the chart with:
498
+
499
+ ```javascript
500
+ chart.redraw()
501
+ ```
502
+
503
+ Loop over charts with:
504
+
505
+ ```javascript
506
+ Chartkick.eachChart(function (chart) {
507
+ // do something
508
+ })
509
+ ```
510
+
511
+ ## Custom Adapters
512
+
513
+ **Note:** This feature is experimental.
514
+
515
+ Add your own custom adapter with:
516
+
517
+ ```javascript
518
+ var CustomAdapter = {
519
+ name: "custom",
520
+ renderLineChart: function (chart) {
521
+ chart.getElement().innerHTML = "Hi"
522
+ }
523
+ }
524
+
525
+ Chartkick.adapters.unshift(CustomAdapter)
526
+ ```
527
+
528
+ ## Examples
529
+
530
+ To run the files in the `examples` directory, you’ll need a web server. Run:
531
+
532
+ ```sh
533
+ npm install -g serve
534
+ serve
535
+ ```
536
+
537
+ and visit [http://localhost:5000/examples/](http://localhost:5000/examples/)
538
+
539
+ ## Upgrading
540
+
541
+ ### 4.0
542
+
543
+ Run:
544
+
545
+ ```sh
546
+ npm install chartkick@latest
547
+ ```
548
+
549
+ For Chart.js, also run:
550
+
551
+ ```sh
552
+ npm install chart.js@latest
553
+ ```
554
+
555
+ And change:
556
+
557
+ ```javascript
558
+ import Chart from "chart.js"
559
+
560
+ Chartkick.use(Chart)
561
+ ```
562
+
563
+ to:
564
+
565
+ ```javascript
566
+ import "chartkick/chart.js"
567
+ ```
568
+
569
+ ## History
570
+
571
+ View the [changelog](https://github.com/ankane/chartkick.js/blob/master/CHANGELOG.md)
572
+
573
+ ## Contributing
574
+
575
+ Everyone is encouraged to help improve this project. Here are a few ways you can help:
576
+
577
+ - [Report bugs](https://github.com/ankane/chartkick.js/issues)
578
+ - Fix bugs and [submit pull requests](https://github.com/ankane/chartkick.js/pulls)
579
+ - Write, clarify, or fix documentation
580
+ - Suggest or add new features
581
+
582
+ To get started with development:
583
+
584
+ ```sh
585
+ git clone https://github.com/ankane/chartkick.js.git
586
+ cd chartkick.js
587
+ npm install
588
+ npm run build
589
+
590
+ # start web server
591
+ npm install -g serve
592
+ serve
593
+ ```
@@ -0,0 +1,5 @@
1
+ import Chartkick from "chartkick"
2
+ import Chart from "chart.js/auto"
3
+ import "chartjs-adapter-date-fns"
4
+
5
+ Chartkick.use(Chart)
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "chartkick-chart.js",
3
+ "private": true,
4
+ "module": "./chart.esm.js",
5
+ "exports": "./chart.esm.js"
6
+ }