IMPALA-12037: Update Chart.js to 2.9.4

Updates Chart.js to 2.9.4 for bug fixes and to avoid prototype
pollution. Added Chart.min.js from
https://github.com/chartjs/Chart.js/releases/tag/v2.9.4. Moment.js from
bundle does not seem to be needed.

Chart.js 2.8 introduced https://github.com/chartjs/Chart.js/issues/6154,
which causes the last X-axis label with "and above" to always be
omitted. Add a custom autofit function to calculate our own spacing.

Testing:
- Examined /admission page with multiple queries admitted. Graph appears
  to render correctly.

Change-Id: Ia4e0da58755b9561ddc75c217ef227a81c80a2a6
Reviewed-on: http://gerrit.cloudera.org:8080/19683
Reviewed-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
Tested-by: Impala Public Jenkins <impala-public-jenkins@cloudera.com>
This commit is contained in:
Michael Smith
2023-04-03 10:49:21 -07:00
committed by Impala Public Jenkins
parent ac23deab4d
commit 73a33d93d9
3 changed files with 48 additions and 11 deletions

File diff suppressed because one or more lines are too long

7
www/Chart-2.9.4.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@@ -99,13 +99,45 @@ Example of json received from the impala server
<strong>{{statestore_update_staleness_detail}}</strong>
</div>
{{/statestore_update_staleness_detail}}
<script src='{{ __common__.host-url }}/www/Chart-2.7.3.min.js'></script>
<script src='{{ __common__.host-url }}/www/Chart-2.9.4.min.js'></script>
<script type="text/javascript">
window.onload = function() {
renderGraph();
formatMemoryColumns();
};
// Workaround for https://github.com/chartjs/Chart.js/issues/6154, where the last X-axis
// label is always omitted. This function bakes in a lot of assumptions for our chart.
function afterFit(axis) {
const ticks = axis.getTicks();
const widest = axis._labelSizes.widest.width;
const chartWidth = axis.width;
// Apply a rough heuristic for rotation.
const maxFit = Math.trunc(3 * chartWidth / (2 * widest));
// Limit to 20 labels.
const willFit = Math.min(maxFit, 20);
// Ensure first and last are always shown.
const validLabelIndices = new Set();
validLabelIndices.add(0);
validLabelIndices.add(ticks.length - 1);
const numLabels = ticks.length % 2 === 0 ? willFit : willFit - 1;
const interval = ticks.length / (numLabels - 1);
for (let i = 1; i < willFit - 1; i += 1) {
validLabelIndices.add(Math.floor(interval * i));
}
ticks.forEach((tick, index) => {
Object.assign(
tick,
{ label: validLabelIndices.has(index) ? tick.label : null },
);
});
}
// Picks up all the canvas elements associated with each resource pool and renders its
// peak memory usage histogram.
function renderGraph() {
@@ -147,6 +179,14 @@ function renderGraph() {
title: {
display: true,
text: 'Peak Memory per Host'
},
scales: {
xAxes: [{
afterFit: afterFit,
ticks: {
autoSkip: false
}
}]
}
}
});