archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Generate ticks from small to large (#7559)

Browse Source 
* Generate ticks from small to large
* Add note to migration guide
This commit is contained in:
Ben McCann 2020-06-29 04:52:28 -07:00 committed by GitHub
parent 2ca155cce1
commit 919e50b9fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/getting-started/v3-migration.md
View File

@ -288,6 +288,7 @@ The following properties and methods were removed:
#### Scales
* `LinearScaleBase.handleDirectionalChanges`
* `LogarithmicScale.minNotZero`
* `Scale.getRightValue`
* `Scale.longestLabelWidth`
@ -410,6 +411,7 @@ The APIs listed in this section have changed in signature or behaviour from vers
* `Scale.convertTicksToLabels` was renamed to `generateTickLabels`. It is now expected to set the label property on the ticks given as input
* `Scale.ticks` now contains objects instead of strings
* When the `autoSkip` option is enabled, `Scale.ticks` now contains only the non-skipped ticks instead of all ticks.
* Ticks are now always generated in monotonically increasing order
##### Time Scale

9
src/scales/scale.linear.js
View File

@ -41,15 +41,6 @@ class LinearScale extends LinearScaleBase {
return Math.ceil(me.height / tickFont.lineHeight);
}
/**
* Called after the ticks are built
* @protected
*/
handleDirectionalChanges(ticks) {
// If we are in a vertical orientation the top value is the highest so reverse the array
return this.isHorizontal() ? ticks : ticks.reverse();
}
// Utils
getPixelForValue(value) {
const me = this;

11
src/scales/scale.linearbase.js
View File

@ -217,13 +217,6 @@ export default class LinearScaleBase extends Scale {
return Number.POSITIVE_INFINITY;
}
/**
* @protected
*/
handleDirectionalChanges(ticks) {
return ticks;
}
buildTicks() {
const me = this;
const opts = me.options;
@ -243,9 +236,7 @@ export default class LinearScaleBase extends Scale {
precision: tickOpts.precision,
stepSize: valueOrDefault(tickOpts.fixedStepSize, tickOpts.stepSize)
};
let ticks = generateTicks(numericGeneratorOptions, me);
ticks = me.handleDirectionalChanges(ticks);
const ticks = generateTicks(numericGeneratorOptions, me);
// At this point, we need to update our max and min given the tick values since we have expanded the
// range of the scale

BIN
test/fixtures/core.layouts/long-labels.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

2
test/specs/core.layouts.tests.js
View File

@ -570,7 +570,7 @@ describe('Chart.layouts', function() {
// issue #4441: y-axis labels partially hidden.
// minimum horizontal space required to fit labels
expect(yAxis.width).toBeCloseToPixel(33);
expect(getLabels(yAxis)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5', '0']);
expect(getLabels(yAxis)).toEqual(['0', '0.5', '1.0', '1.5', '2.0', '2.5']);
});
});
});

2
test/specs/core.ticks.tests.js
View File

@ -49,7 +49,7 @@ describe('Test tick generators', function() {
var yLabels = getLabels(chart.scales.y);
expect(xLabels).toEqual(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1']);
expect(yLabels).toEqual(['1', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1', '0']);
expect(yLabels).toEqual(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1']);
});
it('Should generate logarithmic spaced ticks with correct precision', function() {

2
test/specs/plugin.tooltip.tests.js
View File

@ -2,7 +2,7 @@
const tooltipPlugin = Chart.plugins.getAll().find(p => p.id === 'tooltip');
const Tooltip = tooltipPlugin._element;
describe('Core.Tooltip', function() {
describe('Plugin.Tooltip', function() {
describe('auto', jasmine.fixture.specs('core.tooltip'));
describe('config', function() {

38
test/specs/scale.linear.tests.js
View File

@ -543,8 +543,8 @@ describe('Linear Scale', function() {
expect(chart.scales.y.min).toBe(-1010);
expect(chart.scales.y.max).toBe(1010);
var labels = getLabels(chart.scales.y);
expect(labels[0]).toBe('1,010');
expect(labels[labels.length - 1]).toBe('-1,010');
expect(labels[0]).toBe('-1,010');
expect(labels[labels.length - 1]).toBe('1,010');
});
it('Should use min, max and stepSize to create fixed spaced ticks', function() {
@ -574,7 +574,7 @@ describe('Linear Scale', function() {
expect(chart.scales.y).not.toEqual(undefined); // must construct
expect(chart.scales.y.min).toBe(1);
expect(chart.scales.y.max).toBe(11);
expect(getLabels(chart.scales.y)).toEqual(['11', '9', '7', '5', '3', '1']);
expect(getLabels(chart.scales.y)).toEqual(['1', '3', '5', '7', '9', '11']);
});
it('Should create decimal steps if stepSize is a decimal number', function() {
@ -602,7 +602,7 @@ describe('Linear Scale', function() {
expect(chart.scales.y).not.toEqual(undefined); // must construct
expect(chart.scales.y.min).toBe(0);
expect(chart.scales.y.max).toBe(10);
expect(getLabels(chart.scales.y)).toEqual(['10', '7.5', '5', '2.5', '0']);
expect(getLabels(chart.scales.y)).toEqual(['0', '2.5', '5', '7.5', '10']);
});
describe('precision', function() {
@ -631,7 +631,7 @@ describe('Linear Scale', function() {
expect(chart.scales.y).not.toEqual(undefined); // must construct
expect(chart.scales.y.min).toBe(0);
expect(chart.scales.y.max).toBe(2);
expect(getLabels(chart.scales.y)).toEqual(['2', '1', '0']);
expect(getLabels(chart.scales.y)).toEqual(['0', '1', '2']);
});
it('Should round the step size to the given number of decimal places', function() {
@ -659,7 +659,7 @@ describe('Linear Scale', function() {
expect(chart.scales.y).not.toEqual(undefined); // must construct
expect(chart.scales.y.min).toBe(0);
expect(chart.scales.y.max).toBe(0.01);
expect(getLabels(chart.scales.y)).toEqual(['0.01', '0']);
expect(getLabels(chart.scales.y)).toEqual(['0', '0.01']);
});
});
@ -685,19 +685,19 @@ describe('Linear Scale', function() {
});
expect(chart.scales.y).not.toEqual(undefined); // must construct
expect(getLabels(chart.scales.y)).toEqual(['50', '45', '40', '35', '30', '25', '20']);
expect(getLabels(chart.scales.y)).toEqual(['20', '25', '30', '35', '40', '45', '50']);
chart.scales.y.options.beginAtZero = true;
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['50', '45', '40', '35', '30', '25', '20', '15', '10', '5', '0']);
expect(getLabels(chart.scales.y)).toEqual(['0', '5', '10', '15', '20', '25', '30', '35', '40', '45', '50']);
chart.data.datasets[0].data = [-20, -30, -40, -50];
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['0', '-5', '-10', '-15', '-20', '-25', '-30', '-35', '-40', '-45', '-50']);
expect(getLabels(chart.scales.y)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20', '-15', '-10', '-5', '0']);
chart.scales.y.options.beginAtZero = false;
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['-20', '-25', '-30', '-35', '-40', '-45', '-50']);
expect(getLabels(chart.scales.y)).toEqual(['-50', '-45', '-40', '-35', '-30', '-25', '-20']);
});
it('Should generate tick marks in the correct order in reversed mode', function() {
@ -720,7 +720,7 @@ describe('Linear Scale', function() {
}
});
expect(getLabels(chart.scales.y)).toEqual(['0', '10', '20', '30', '40', '50', '60', '70', '80']);
expect(getLabels(chart.scales.y)).toEqual(['80', '70', '60', '50', '40', '30', '20', '10', '0']);
expect(chart.scales.y.start).toBe(80);
expect(chart.scales.y.end).toBe(0);
});
@ -743,7 +743,7 @@ describe('Linear Scale', function() {
}
}
});
expect(getLabels(chart.scales.y)).toEqual(['0.06', '0.05', '0.04', '0.03', '0.02', '0.01', '0']);
expect(getLabels(chart.scales.y)).toEqual(['0', '0.01', '0.02', '0.03', '0.04', '0.05', '0.06']);
});
it('Should correctly limit the maximum number of ticks', function() {
@ -764,33 +764,33 @@ describe('Linear Scale', function() {
}
});
expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scales.y.ticks.maxTicksLimit = 11;
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scales.y.ticks.maxTicksLimit = 21;
chart.update();
expect(getLabels(chart.scales.y)).toEqual([
'2.5', '2.4', '2.3', '2.2', '2.1', '2.0', '1.9', '1.8', '1.7', '1.6',
'1.5', '1.4', '1.3', '1.2', '1.1', '1.0', '0.9', '0.8', '0.7', '0.6',
'0.5'
'0.5',
'0.6', '0.7', '0.8', '0.9', '1.0', '1.1', '1.2', '1.3', '1.4', '1.5',
'1.6', '1.7', '1.8', '1.9', '2.0', '2.1', '2.2', '2.3', '2.4', '2.5'
]);
chart.options.scales.y.ticks.maxTicksLimit = 11;
chart.options.scales.y.ticks.stepSize = 0.01;
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['2.5', '2.0', '1.5', '1.0', '0.5']);
expect(getLabels(chart.scales.y)).toEqual(['0.5', '1.0', '1.5', '2.0', '2.5']);
chart.options.scales.y.min = 0.3;
chart.options.scales.y.max = 2.8;
chart.update();
expect(getLabels(chart.scales.y)).toEqual(['2.8', '2.3', '1.8', '1.3', '0.8', '0.3']);
expect(getLabels(chart.scales.y)).toEqual(['0.3', '0.8', '1.3', '1.8', '2.3', '2.8']);
});
it('Should build labels using the user supplied callback', function() {