govuk_publishing_components 46.4.0 → 47.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_heading.scss +6 -14
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss +4 -0
  5. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +4 -4
  6. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  7. data/app/views/govuk_publishing_components/components/_heading.html.erb +24 -9
  8. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +6 -1
  9. data/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb +4 -7
  10. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +6 -5
  11. data/app/views/govuk_publishing_components/components/docs/heading.yml +34 -10
  12. data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +1 -1
  13. data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +9 -0
  14. data/app/views/govuk_publishing_components/components/docs/skip_link.yml +1 -0
  15. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml +1 -0
  16. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml +1 -0
  17. data/config/locales/ar.yml +0 -8
  18. data/config/locales/az.yml +0 -8
  19. data/config/locales/be.yml +0 -8
  20. data/config/locales/bg.yml +0 -8
  21. data/config/locales/bn.yml +0 -8
  22. data/config/locales/cs.yml +0 -8
  23. data/config/locales/cy.yml +0 -8
  24. data/config/locales/da.yml +0 -8
  25. data/config/locales/de.yml +0 -8
  26. data/config/locales/dr.yml +0 -8
  27. data/config/locales/el.yml +0 -8
  28. data/config/locales/en.yml +0 -8
  29. data/config/locales/es-419.yml +0 -8
  30. data/config/locales/es.yml +0 -8
  31. data/config/locales/et.yml +0 -8
  32. data/config/locales/fa.yml +0 -8
  33. data/config/locales/fi.yml +0 -8
  34. data/config/locales/fr.yml +0 -8
  35. data/config/locales/gd.yml +0 -8
  36. data/config/locales/gu.yml +0 -8
  37. data/config/locales/he.yml +0 -8
  38. data/config/locales/hi.yml +0 -8
  39. data/config/locales/hr.yml +0 -8
  40. data/config/locales/hu.yml +0 -8
  41. data/config/locales/hy.yml +0 -8
  42. data/config/locales/id.yml +0 -8
  43. data/config/locales/is.yml +0 -8
  44. data/config/locales/it.yml +0 -8
  45. data/config/locales/ja.yml +0 -8
  46. data/config/locales/ka.yml +0 -8
  47. data/config/locales/kk.yml +0 -8
  48. data/config/locales/ko.yml +0 -8
  49. data/config/locales/lt.yml +0 -8
  50. data/config/locales/lv.yml +0 -8
  51. data/config/locales/ms.yml +0 -8
  52. data/config/locales/mt.yml +0 -8
  53. data/config/locales/nl.yml +0 -8
  54. data/config/locales/no.yml +0 -8
  55. data/config/locales/pa-pk.yml +0 -8
  56. data/config/locales/pa.yml +0 -8
  57. data/config/locales/pl.yml +0 -8
  58. data/config/locales/ps.yml +0 -8
  59. data/config/locales/pt.yml +0 -8
  60. data/config/locales/ro.yml +0 -8
  61. data/config/locales/ru.yml +0 -8
  62. data/config/locales/si.yml +0 -8
  63. data/config/locales/sk.yml +0 -8
  64. data/config/locales/sl.yml +0 -8
  65. data/config/locales/so.yml +0 -8
  66. data/config/locales/sq.yml +0 -8
  67. data/config/locales/sr.yml +0 -8
  68. data/config/locales/sv.yml +0 -8
  69. data/config/locales/sw.yml +0 -8
  70. data/config/locales/ta.yml +0 -8
  71. data/config/locales/th.yml +0 -8
  72. data/config/locales/tk.yml +0 -8
  73. data/config/locales/tr.yml +0 -8
  74. data/config/locales/uk.yml +0 -8
  75. data/config/locales/ur.yml +0 -8
  76. data/config/locales/uz.yml +0 -8
  77. data/config/locales/vi.yml +0 -8
  78. data/config/locales/zh-hk.yml +0 -8
  79. data/config/locales/zh-tw.yml +0 -8
  80. data/config/locales/zh.yml +0 -8
  81. data/lib/govuk_publishing_components/presenters/heading_helper.rb +3 -3
  82. data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb +3 -1
  83. data/lib/govuk_publishing_components/version.rb +1 -1
  84. data/lib/govuk_publishing_components.rb +0 -1
  85. metadata +3 -36
  86. data/app/assets/javascripts/govuk_publishing_components/components/chart.js +0 -1
  87. data/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +0 -57
  88. data/app/assets/stylesheets/govuk_publishing_components/components/_chat-entry.scss +0 -39
  89. data/app/views/govuk_publishing_components/components/_chart.html.erb +0 -146
  90. data/app/views/govuk_publishing_components/components/_chat_entry.html.erb +0 -55
  91. data/app/views/govuk_publishing_components/components/docs/chart.yml +0 -576
  92. data/app/views/govuk_publishing_components/components/docs/chat_entry.yml +0 -45
  93. data/lib/govuk_publishing_components/presenters/chart_helper.rb +0 -112
  94. data/node_modules/chartkick/LICENSE.txt +0 -22
  95. data/node_modules/chartkick/README.md +0 -593
  96. data/node_modules/chartkick/chart.js/chart.esm.js +0 -5
  97. data/node_modules/chartkick/chart.js/package.json +0 -6
  98. data/node_modules/chartkick/dist/chartkick.esm.js +0 -2562
  99. data/node_modules/chartkick/dist/chartkick.js +0 -2570
  100. data/node_modules/chartkick/dist/chartkick.min.js +0 -2
  101. data/node_modules/chartkick/highcharts/highcharts.esm.js +0 -4
  102. data/node_modules/chartkick/highcharts/package.json +0 -6
  103. data/node_modules/chartkick/package.json +0 -50
@@ -1,112 +0,0 @@
1
- module GovukPublishingComponents
2
- module Presenters
3
- class ChartHelper
4
- def initialize(options)
5
- @rows = options[:rows]
6
- @keys = options[:keys]
7
- @minimal = options[:minimal]
8
- @enable_interactivity = false
9
- @enable_interactivity = true unless @minimal
10
- @hide_legend = options[:hide_legend]
11
- @hide_legend = true if @minimal
12
- @point_size = options[:point_size] ||= 10
13
- @point_size = 0 if @minimal
14
- @height = options[:height] || 400
15
- @h_axis_title = options[:h_axis_title]
16
- @v_axis_title = options[:v_axis_title]
17
- @text_position = "none" if @minimal
18
- @y_axis_view_window_min = 0
19
- @y_axis_view_window_min = "auto" if options[:y_axis_auto_adjust]
20
- @line_colours = options[:line_colours]
21
- @line_styles = options[:line_styles]
22
-
23
- @h_axis_format = "YYYY-MM-dd" if options[:h_axis_format] == "date"
24
- @h_axis_format = "£#" if options[:h_axis_format] == "currency"
25
- @h_axis_format = "#'\%'" if options[:h_axis_format] == "percent"
26
-
27
- @v_axis_format = "YYYY-MM-dd" if options[:v_axis_format] == "date"
28
- @v_axis_format = "£#" if options[:v_axis_format] == "currency"
29
- @v_axis_format = "#'\%'" if options[:v_axis_format] == "percent"
30
- end
31
-
32
- # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
33
- def chart_options
34
- {
35
- chartArea: { width: "80%", height: "60%" },
36
- crosshair: { orientation: "vertical", trigger: "both", color: "#ccc" },
37
- curveType: "none",
38
- enableInteractivity: @enable_interactivity,
39
- legend: legend_options,
40
- pointSize: @point_size,
41
- height: @height,
42
- tooltip: { isHtml: true },
43
- series: series_options,
44
- hAxis: {
45
- textStyle: set_font_16,
46
- title: @h_axis_title,
47
- titleTextStyle: set_font_19,
48
- textPosition: @text_position,
49
- format: @h_axis_format,
50
- },
51
- vAxis: {
52
- textStyle: set_font_16,
53
- title: @v_axis_title,
54
- titleTextStyle: set_font_19,
55
- textPosition: @text_position,
56
- format: @v_axis_format,
57
- viewWindow: {
58
- min: @y_axis_view_window_min,
59
- },
60
- },
61
- }
62
- end
63
-
64
- def chart_format_data
65
- if !@rows.empty? && !@keys.empty?
66
- @rows.map do |row|
67
- {
68
- name: row[:label],
69
- data: @keys.zip(row[:values]),
70
- }
71
- end
72
- end
73
- end
74
-
75
- private
76
-
77
- def legend_options
78
- return { position: "top", textStyle: set_font_16 } unless @hide_legend
79
-
80
- "none"
81
- end
82
-
83
- def set_font_16
84
- { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false }
85
- end
86
-
87
- def set_font_19
88
- { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false }
89
- end
90
-
91
- def series_options
92
- series = {}
93
- if @line_colours
94
- @line_colours.each_with_index do |item, index|
95
- series[index] = {} unless series[index]
96
- series[index][:color] = item
97
- end
98
- end
99
-
100
- if @line_styles
101
- @line_styles.each_with_index do |item, index|
102
- style = [2, 2] if item == "dotted"
103
- series[index] = {} unless series[index]
104
- series[index][:lineDashStyle] = style
105
- end
106
- end
107
-
108
- series
109
- end
110
- end
111
- end
112
- end
@@ -1,22 +0,0 @@
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.
@@ -1,593 +0,0 @@
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
- ```