Skip to content

Commit 04117ea

Browse files
edwardcasbonedwardcasbon
authored
Update chart library (Chart.js) to latest version (v4.4.0) (#512)
* Update Chart.js library to latest (v4.4.0) * Updated chart API to match new library * Compiled artefacts * Compiled JavaScript * Version bump to 14.3.0
1 parent eef420b commit 04117ea

File tree

9 files changed

+116
-96
lines changed

9 files changed

+116
-96
lines changed

‎dist/chart/vendor/chart.js.2.4.0.min.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎dist/chart/vendor/chart.js.4.4.0.min.js

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/honeycomb.js

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ var init = function init() {
576576
}
577577
} else {
578578
if (typeof config.url === 'undefined') {
579-
config.url = 'chart/vendor/chart.js.2.4.0.min.js';
579+
config.url = 'chart/vendor/chart.js.4.4.0.min.js';
580580
}
581581
_honeycombDocument["default"].load(config.url, init);
582582
}
@@ -640,6 +640,11 @@ var renderChart = function renderChart(chart) {
640640
return false;
641641
}
642642
var type = chart.getAttribute('data-chart-type') || 'bar';
643+
644+
// Add support for legacy type.
645+
if (type === 'horizontalBar') {
646+
type = 'bar';
647+
}
643648
var config = setConfig(chart, data);
644649
var options = setOptions(chart);
645650
if (typeof chart.getContext !== 'function') {
@@ -668,7 +673,9 @@ var setConfig = function setConfig(chart, data) {
668673
backgroundColor: setBackgroundColour(type, colourOpacity, data.dataSets, dataSet),
669674
borderColor: setBorderColour(type, colourOpacity, data.dataSets, dataSet),
670675
pointRadius: pointRadius,
671-
pointHoverRadius: pointRadius
676+
pointHoverRadius: pointRadius,
677+
fill: true,
678+
tension: 0.2
672679
};
673680
})
674681
};
@@ -688,44 +695,48 @@ var setOptions = function setOptions(chart) {
688695
var tooltips = chart.hasAttribute('data-chart-tooltips') ? chart.getAttribute('data-chart-tooltips') : null;
689696
var options = {};
690697

698+
// Horizontal bar chart.
699+
if (type === 'horizontalBar') {
700+
options.indexAxis = 'y';
701+
}
702+
691703
// Stacked bar chart.
692704
if ((type === 'bar' || type === 'horizontalBar') && stacked) {
693705
options.scales = options.scales || {};
694-
options.scales.xAxes = options.scales.xAxes || [];
695-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
696-
options.scales.xAxes[0].stacked = true;
697-
options.scales.yAxes = options.scales.yAxes || [];
698-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
699-
options.scales.yAxes[0].stacked = true;
706+
options.scales.x = options.scales.x || {};
707+
options.scales.y = options.scales.y || {};
708+
options.scales.x.stacked = true;
709+
options.scales.y.stacked = true;
700710
}
701711

702712
// Gridlines (on by default).
703713
if (!verticalGridlines) {
704714
options.scales = options.scales || {};
705-
options.scales.xAxes = options.scales.xAxes || [];
706-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
707-
options.scales.xAxes[0].gridLines = options.scales.xAxes[0].gridLines || {};
708-
options.scales.xAxes[0].gridLines.display = false;
715+
options.scales.x = options.scales.x || {};
716+
options.scales.x.grid = options.scales.x.grid || {};
717+
options.scales.x.grid.display = false;
709718
}
710719
if (!horizontalGridlines) {
711720
options.scales = options.scales || {};
712-
options.scales.yAxes = options.scales.yAxes || [];
713-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
714-
options.scales.yAxes[0].gridLines = options.scales.yAxes[0].gridLines || {};
715-
options.scales.yAxes[0].gridLines.display = false;
721+
options.scales.y = options.scales.y || {};
722+
options.scales.y.grid = options.scales.y.grid || {};
723+
options.scales.y.grid.display = false;
716724
}
717725

718726
// Legend.
719727
if (legend === 'false') {
720-
options.legend = options.legend || {};
721-
options.legend.display = false;
728+
options.plugins = options.plugins || {};
729+
options.plugins.legend = options.plugins.legend || {};
730+
options.plugins.legend.display = false;
722731
}
723732

724733
// Legend position.
725734
if (legendPosition) {
726-
options.legend = options.legend || {};
727-
options.legend.display = true;
728-
options.legend.position = legendPosition;
735+
options.plugins = options.plugins || {};
736+
options.plugins.legend = options.plugins.legend || {};
737+
options.plugins.legend.display = true;
738+
options.plugins.legend.position = legendPosition;
739+
options.plugins.legend.align = 'start';
729740
}
730741

731742
// Legend callback.
@@ -743,29 +754,28 @@ var setOptions = function setOptions(chart) {
743754
// Vertical axis
744755
if (verticalAxis === 'false') {
745756
options.scales = options.scales || {};
746-
options.scales.xAxes = options.scales.xAxes || [];
747-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
748-
options.scales.xAxes[0].display = false;
757+
options.scales.x = options.scales.x || {};
758+
options.scales.x.display = false;
749759
}
750760

751761
// Horizontal axis
752762
if (horizontalAxis === 'false') {
753763
options.scales = options.scales || {};
754-
options.scales.yAxes = options.scales.yAxes || [];
755-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
756-
options.scales.yAxes[0].display = false;
764+
options.scales.y = options.scales.y || {};
765+
options.scales.y.display = false;
757766
}
758767

759768
// Tooltips
760769
if (tooltips && tooltips === 'false') {
761-
options.tooltips = options.tooltips || {};
762-
options.tooltips.enabled = false;
770+
options.plugins = options.plugins || {};
771+
options.plugins.tooltip = options.plugins.tooltip || {};
772+
options.plugins.tooltip.enabled = false;
763773
}
764774
return options;
765775
};
766776
var setGlobalSettings = function setGlobalSettings() {
767-
window.Chart.defaults.global.defaultFontFamily = 'Roboto';
768-
window.Chart.defaults.global.legend.position = 'bottom';
777+
window.Chart.defaults.font.family = 'Roboto';
778+
window.Chart.defaults.plugins.legend.position = 'bottom';
769779
window.Honeycomb = window.Honeycomb || {};
770780
window.Honeycomb.charts = window.Honeycomb.charts || [];
771781
};

‎dist/honeycomb.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "honeycomb-web-toolkit",
3-
"version": "14.2.9",
3+
"version": "14.3.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/red-gate/honeycomb-web-toolkit"

‎src/chart/js/honeycomb.chart.js

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const init = ( config = {} ) => {
2222
}
2323
} else {
2424
if (typeof config.url === 'undefined') {
25-
config.url = 'chart/vendor/chart.js.2.4.0.min.js';
25+
config.url = 'chart/vendor/chart.js.4.4.0.min.js';
2626
}
2727

2828
loadScript.load(config.url, init);
@@ -103,7 +103,13 @@ const renderChart = chart => {
103103
return false;
104104
}
105105

106-
const type = chart.getAttribute('data-chart-type') || 'bar';
106+
let type = chart.getAttribute('data-chart-type') || 'bar';
107+
108+
// Add support for legacy type.
109+
if (type === 'horizontalBar') {
110+
type = 'bar';
111+
}
112+
107113
const config = setConfig(chart, data);
108114
const options = setOptions(chart);
109115

@@ -136,7 +142,9 @@ const setConfig = ( chart, data ) => {
136142
backgroundColor: setBackgroundColour(type, colourOpacity, data.dataSets, dataSet),
137143
borderColor: setBorderColour(type, colourOpacity, data.dataSets, dataSet),
138144
pointRadius: pointRadius,
139-
pointHoverRadius: pointRadius
145+
pointHoverRadius: pointRadius,
146+
fill: true,
147+
tension: 0.2,
140148
};
141149
})
142150
};
@@ -159,46 +167,49 @@ const setOptions = chart => {
159167

160168
const options = {};
161169

170+
// Horizontal bar chart.
171+
if (type === 'horizontalBar') {
172+
options.indexAxis = 'y';
173+
}
174+
162175
// Stacked bar chart.
163176
if ((type === 'bar' || type === 'horizontalBar') && stacked) {
164177
options.scales = options.scales || {};
178+
options.scales.x = options.scales.x || {};
179+
options.scales.y = options.scales.y || {};
165180

166-
options.scales.xAxes = options.scales.xAxes || [];
167-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
168-
options.scales.xAxes[0].stacked = true;
169-
170-
options.scales.yAxes = options.scales.yAxes || [];
171-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
172-
options.scales.yAxes[0].stacked = true;
181+
options.scales.x.stacked = true;
182+
options.scales.y.stacked = true;
173183
}
174184

175185
// Gridlines (on by default).
176186
if (!verticalGridlines) {
177187
options.scales = options.scales || {};
178-
options.scales.xAxes = options.scales.xAxes || [];
179-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
180-
options.scales.xAxes[0].gridLines = options.scales.xAxes[0].gridLines || {};
181-
options.scales.xAxes[0].gridLines.display = false;
188+
options.scales.x = options.scales.x || {};
189+
options.scales.x.grid = options.scales.x.grid || {};
190+
options.scales.x.grid.display = false;
182191
}
183192
if (!horizontalGridlines) {
184193
options.scales = options.scales || {};
185-
options.scales.yAxes = options.scales.yAxes || [];
186-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
187-
options.scales.yAxes[0].gridLines = options.scales.yAxes[0].gridLines || {};
188-
options.scales.yAxes[0].gridLines.display = false;
194+
options.scales.y = options.scales.y || {};
195+
options.scales.y.grid = options.scales.y.grid || {};
196+
options.scales.y.grid.display = false;
189197
}
190198

191199
// Legend.
192200
if (legend === 'false') {
193-
options.legend = options.legend || {};
194-
options.legend.display = false;
201+
options.plugins = options.plugins || {};
202+
options.plugins.legend = options.plugins.legend || {};
203+
options.plugins.legend.display = false;
195204
}
196205

197206
// Legend position.
198207
if (legendPosition) {
199-
options.legend = options.legend || {};
200-
options.legend.display = true;
201-
options.legend.position = legendPosition;
208+
options.plugins = options.plugins || {};
209+
options.plugins.legend = options.plugins.legend || {};
210+
options.plugins.legend.display = true;
211+
options.plugins.legend.position = legendPosition;
212+
options.plugins.legend.align = 'start';
202213
}
203214

204215
// Legend callback.
@@ -216,31 +227,30 @@ const setOptions = chart => {
216227
// Vertical axis
217228
if (verticalAxis === 'false') {
218229
options.scales = options.scales || {};
219-
options.scales.xAxes = options.scales.xAxes || [];
220-
options.scales.xAxes[0] = options.scales.xAxes[0] || {};
221-
options.scales.xAxes[0].display = false;
230+
options.scales.x = options.scales.x || {};
231+
options.scales.x.display = false;
222232
}
223233

224234
// Horizontal axis
225235
if (horizontalAxis === 'false') {
226236
options.scales = options.scales || {};
227-
options.scales.yAxes = options.scales.yAxes || [];
228-
options.scales.yAxes[0] = options.scales.yAxes[0] || {};
229-
options.scales.yAxes[0].display = false;
237+
options.scales.y = options.scales.y || {};
238+
options.scales.y.display = false;
230239
}
231240

232241
// Tooltips
233242
if (tooltips && tooltips === 'false') {
234-
options.tooltips = options.tooltips || {};
235-
options.tooltips.enabled = false;
243+
options.plugins = options.plugins || {};
244+
options.plugins.tooltip = options.plugins.tooltip || {};
245+
options.plugins.tooltip.enabled = false;
236246
}
237247

238248
return options;
239249
};
240250

241251
const setGlobalSettings = () => {
242-
window.Chart.defaults.global.defaultFontFamily = 'Roboto';
243-
window.Chart.defaults.global.legend.position = 'bottom';
252+
window.Chart.defaults.font.family = 'Roboto';
253+
window.Chart.defaults.plugins.legend.position = 'bottom';
244254

245255
window.Honeycomb = window.Honeycomb || {};
246256
window.Honeycomb.charts = window.Honeycomb.charts || [];

‎src/chart/vendor/chart.js.2.4.0.min.js

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/chart/vendor/chart.js.4.4.0.min.js

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)