Use index instead of base for consistency, chart level option

chartjs · Feb 23, 2020 · 5c4be2b · 5c4be2b
1 parent 693f81e
commit 5c4be2b
Show file tree

Hide file tree

Showing 21 changed files with 55 additions and 82 deletions.
diff --git a/docs/charts/bar.md b/docs/charts/bar.md
@@ -69,7 +69,6 @@ the color of the bars is generally set this way.
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
-| [`baseAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar.
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
 | [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
@@ -78,6 +77,7 @@ the color of the bars is generally set this way.
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | - | Yes | `1`
+| [`indexAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar.
 | [`label`](#general) | `string` | - | - | `''`
 | [`order`](#general) | `number` | - | - | `0`
 | [`xAxisID`](#general) | `string` | - | - | first x axis
@@ -87,8 +87,8 @@ the color of the bars is generally set this way.
 
 | Name | Description
 | ---- | ----
-| `baseAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
 | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
+| `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
 | `label` | The label for the dataset which appears in the legend and tooltips.
 | `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
 | `xAxisID` | The ID of the x axis to plot this dataset on.

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
@@ -19,7 +19,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 ## Chart types
 
-* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`baseAxis`](../charts/bar.md#general) option
+* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](../charts/bar.md#general) option
 
 ### Ticks
 

diff --git a/samples/charts/bar/horizontal.html b/samples/charts/bar/horizontal.html
@@ -65,11 +65,7 @@
 				type: 'bar',
 				data: horizontalBarChartData,
 				options: {
-					bar: {
-						datasets: {
-							baseAxis: 'y'
-						}
-					},
+					indexAxis: 'y',
 					// Elements options apply to all of the options unless overridden in a dataset
 					// In this case, we are setting the border of each horizontal bar to be 2px wide
 					elements: {

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
@@ -11,7 +11,6 @@ defaults.set('bar', {
 	},
 
 	datasets: {
-		baseAxis: 'x',
 		categoryPercentage: 0.8,
 		barPercentage: 0.9,
 		animation: {
@@ -23,14 +22,14 @@ defaults.set('bar', {
 	},
 
 	scales: {
-		i: {
+		_index_: {
 			type: 'category',
 			offset: true,
 			gridLines: {
 				offsetGridLines: true
 			}
 		},
-		v: {
+		_value_: {
 			type: 'linear',
 			beginAtZero: true,
 		}

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
@@ -15,10 +15,10 @@ defaults.set('line', {
 	},
 
 	scales: {
-		x: {
+		_index_: {
 			type: 'category',
 		},
-		y: {
+		_value_: {
 			type: 'linear',
 		},
 	}

diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
@@ -14,7 +14,7 @@ defaults.set('polarArea', {
 		animateScale: true
 	},
 	datasets: {
-		baseAxis: 'r'
+		indexAxis: 'r'
 	},
 	scales: {
 		r: {

diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js
@@ -12,7 +12,7 @@ defaults.set('radar', {
 		}
 	},
 	datasets: {
-		baseAxis: 'r'
+		indexAxis: 'r'
 	},
 	elements: {
 		line: {

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -17,37 +17,43 @@ import {version} from '../../package.json';
 
 const valueOrDefault = helpers.valueOrDefault;
 
-function getBaseAxis(type, options) {
+function getIndexAxis(type, options) {
 	const typeDefaults = defaults[type] || {};
-	const typeDatasetDefaults = typeDefaults.datasets || {};
+	const datasetDefaults = typeDefaults.datasets || {};
 	const typeOptions = options[type] || {};
 	const datasetOptions = typeOptions.datasets || {};
-	return datasetOptions.baseAxis || typeDatasetDefaults.baseAxis || 'x';
+	return datasetOptions.indexAxis || options.indexAxis || datasetDefaults.indexAxis || 'x';
 }
 
-function getAxisFromDefaultScaleID(id, baseAxis) {
-	let ret = id;
-	if (id === 'i') {
-		ret = baseAxis;
-	} else if (id === 'v') {
-		ret = baseAxis === 'x' ? 'y' : 'x';
+function getAxisFromDefaultScaleID(id, indexAxis) {
+	let axis = id;
+	if (id === '_index_') {
+		axis = indexAxis;
+	} else if (id === '_value_') {
+		axis = indexAxis === 'x' ? 'y' : 'x';
 	}
-	return ret;
+	return axis;
+}
+
+function getDefaultScaleIDFromAxis(axis, indexAxis) {
+	return axis === indexAxis ? '_index_' : '_value_';
 }
 
 function mergeScaleConfig(config, options) {
 	options = options || {};
 	const chartDefaults = defaults[config.type] || {scales: {}};
 	const configScales = options.scales || {};
+	const chartIndexAxis = getIndexAxis(config.type, options);
 	const firstIDs = {};
 	const scales = {};
 
 	// First figure out first scale id's per axis.
 	Object.keys(configScales).forEach(id => {
 		const scaleConf = configScales[id];
 		const axis = scaleConf.axis || id[0];
+		const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
 		firstIDs[axis] = firstIDs[axis] || id;
-		scales[id] = helpers.mergeIf({axis}, [scaleConf, chartDefaults.scales[axis]]);
+		scales[id] = helpers.mergeIf({axis}, [scaleConf, chartDefaults.scales[axis], chartDefaults.scales[defaultId]]);
 	});
 
 	// Backward compatibility
@@ -59,11 +65,11 @@ function mergeScaleConfig(config, options) {
 	// Then merge dataset defaults to scale configs
 	config.data.datasets.forEach(dataset => {
 		const type = dataset.type || config.type;
-		const baseAxis = dataset.baseAxis || getBaseAxis(type, options);
+		const indexAxis = dataset.indexAxis || getIndexAxis(type, options);
 		const datasetDefaults = defaults[type] || {};
 		const defaultScaleOptions = datasetDefaults.scales || {};
 		Object.keys(defaultScaleOptions).forEach(defaultID => {
-			const axis = getAxisFromDefaultScaleID(defaultID, baseAxis);
+			const axis = getAxisFromDefaultScaleID(defaultID, indexAxis);
 			const id = dataset[axis + 'AxisID'] || firstIDs[axis] || axis;
 			scales[id] = scales[id] || {};
 			helpers.mergeIf(scales[id], [{axis}, configScales[id], defaultScaleOptions[defaultID]]);
@@ -515,7 +521,7 @@ export default class Chart {
 				meta = me.getDatasetMeta(i);
 			}
 			meta.type = type;
-			meta.baseAxis = dataset.baseAxis || getBaseAxis(type, me.options);
+			meta.indexAxis = dataset.indexAxis || getIndexAxis(type, me.options);
 			meta.order = dataset.order || 0;
 			me._updateMetasetIndex(meta, i);
 			meta.label = '' + dataset.label;

diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
@@ -264,9 +264,9 @@ export default class DatasetController {
 		const xid = meta.xAxisID = dataset.xAxisID || getFirstScaleId(chart, 'x');
 		const yid = meta.yAxisID = dataset.yAxisID || getFirstScaleId(chart, 'y');
 		const rid = meta.rAxisID = dataset.rAxisID || getFirstScaleId(chart, 'r');
-		const baseAxis = meta.baseAxis;
-		const iid = meta.iAxisID = baseAxis === 'x' ? xid : baseAxis === 'r' ? rid : yid;
-		const vid = meta.vAxisID = baseAxis === 'x' ? yid : baseAxis === 'r' ? rid : xid;
+		const indexAxis = meta.indexAxis;
+		const iid = meta.iAxisID = indexAxis === 'x' ? xid : indexAxis === 'r' ? rid : yid;
+		const vid = meta.vAxisID = indexAxis === 'x' ? yid : indexAxis === 'r' ? rid : xid;
 		meta.xScale = me.getScaleForId(xid);
 		meta.yScale = me.getScaleForId(yid);
 		meta.rScale = me.getScaleForId(rid);

diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js
@@ -17,11 +17,7 @@ module.exports = {
 		options: {
 			legend: false,
 			title: false,
-			bar: {
-				datasets: {
-					baseAxis: 'y'
-				}
-			},
+			indexAxis: 'y',
 			scales: {
 				x: {display: false, min: 0},
 				y: {display: false, stacked: true}

diff --git a/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json b/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json
@@ -19,7 +19,7 @@
             "legend": false,
 			"bar": {
 				"datasets": {
-					"baseAxis": "y"
+					"indexAxis": "y"
 				}
 			},
             "scales": {

diff --git a/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json b/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json
@@ -19,7 +19,7 @@
             "legend": false,
 			"bar": {
 				"datasets": {
-					"baseAxis": "y"
+					"indexAxis": "y"
 				}
 			},
             "scales": {

diff --git a/test/fixtures/controller.bar/horizontal-borders.js b/test/fixtures/controller.bar/horizontal-borders.js
@@ -20,11 +20,7 @@ module.exports = {
 		options: {
 			legend: false,
 			title: false,
-			bar: {
-				datasets: {
-					baseAxis: 'y'
-				}
-			},
+			indexAxis: 'y',
 			elements: {
 				rectangle: {
 					backgroundColor: '#AAAAAA80',

diff --git a/test/fixtures/core.scale/label-offset-vertical-axes.json b/test/fixtures/core.scale/label-offset-vertical-axes.json
@@ -12,7 +12,7 @@
             "title": false,
             "bar": {
                 "datasets": {
-                    "baseAxis": "y"
+                    "indexAxis": "y"
                 }
             },
             "scales": {

diff --git a/test/fixtures/core.scale/tick-drawing.json b/test/fixtures/core.scale/tick-drawing.json
@@ -10,7 +10,7 @@
             "title": false,
 			"bar": {
 				"datasets": {
-					"baseAxis": "y"
+					"indexAxis": "y"
 				}
 			},
             "scales": {

diff --git a/test/fixtures/scale.category/ticks-from-data.js b/test/fixtures/scale.category/ticks-from-data.js
@@ -4,12 +4,12 @@ module.exports = {
 		type: 'bar',
 		data: {
 			datasets: [{
-				baseAxis: 'y',
 				data: [10, 5, 0, 25, 78]
 			}],
 			labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
 		},
 		options: {
+			indexAxis: 'y',
 			legend: false,
 			title: false,
 			elements: {

diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js
@@ -1388,11 +1388,7 @@ describe('Chart.controllers.bar', function() {
 				type: 'bar',
 				data: this.data,
 				options: {
-					bar: {
-						datasets: {
-							baseAxis: 'y'
-						}
-					},
+					indexAxis: 'y',
 					scales: {
 						y: {
 							min: 'March',
@@ -1408,11 +1404,7 @@ describe('Chart.controllers.bar', function() {
 				type: 'bar',
 				data: this.data,
 				options: {
-					bar: {
-						datasets: {
-							baseAxis: 'y'
-						}
-					},
+					indexAxis: 'y',
 					scales: {
 						x: {
 							stacked: true
@@ -1527,7 +1519,7 @@ describe('Chart.controllers.bar', function() {
 			type: 'bar',
 			data: {
 				datasets: [{
-					baseAxis: 'y',
+					indexAxis: 'y',
 					minBarLength: minBarLength,
 					data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
 				}]

diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js
@@ -156,11 +156,7 @@ describe('Core.Interaction', function() {
 					type: 'bar',
 					data: data,
 					options: {
-						bar: {
-							datasets: {
-								baseAxis: 'y'
-							}
-						}
+						indexAxis: 'y',
 					}
 				});
 
@@ -281,11 +277,7 @@ describe('Core.Interaction', function() {
 					type: 'bar',
 					data: data,
 					options: {
-						bar: {
-							datasets: {
-								baseAxis: 'y'
-							}
-						}
+						indexAxis: 'y',
 					}
 				});
 

diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js
@@ -469,7 +469,6 @@ describe('Category scale tests', function() {
 			type: 'bar',
 			data: {
 				datasets: [{
-					baseAxis: 'y',
 					data: [
 						{x: 10, y: 0},
 						{x: 5, y: 1},
@@ -481,6 +480,7 @@ describe('Category scale tests', function() {
 				labels: [0, 1, 2, 3]
 			},
 			options: {
+				indexAxis: 'y',
 				scales: {
 					x: {
 						type: 'linear',