feat(bar): add non zero based bar chart

demo/demo.js

@@ -84,35 +84,65 @@ var demos = {
 				];
 			}
 		},
-		BarChart: {
-			options: {
-				data: {
-					columns: [
-						["data1", 30, 200, 100, 400, 150, 250],
-						["data2", 130, 100, 140, 200, 150, 50]
-					],
-					type: "bar"
-				},
-				bar: {
-					width: {
-						ratio: 0.5 // this makes bar width 50% of length between ticks
+		BarChart: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 400, 150, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "bar"
+					},
+					bar: {
+						width: {
+							ratio: 0.5 // this makes bar width 50% of length between ticks
+						}
+						// or
+						//width: 100 // this makes bar width 100px
 					}
-					// or
-					//width: 100 // this makes bar width 100px
+				},
+				func: function(chart) {
+					chart.timer = [
+						setTimeout(function() {
+							chart.load({
+								columns: [
+									["data3", 130, -150, 200, 300, -200, 100]
+								]
+							});
+						}, 1000)
+					];
 				}
 			},
-			func: function(chart) {
-				chart.timer = [
-					setTimeout(function() {
-						chart.load({
-							columns: [
-								["data3", 130, -150, 200, 300, -200, 100]
-							]
-						});
-					}, 1000)
-				];
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", -100, 100, 200, [-100, 0], [0, 100], [100, 200]],
+							["data2", 100, 300, 500, [0, 100], [100, 300], [200, 500]],
+						],
+						type: "bar"
+					},
+					bar: {
+						width: {
+							ratio: 0.5
+						}
+					}
+				},
+				func: function(chart) {
+					chart.timer = [
+						setTimeout(function() {
+							chart.load({
+								columns: [
+									["data3", 200, 500, 800, [100, 200], [300, 500], [500, 800]],
+								],
+								type: "bar"
+							});
+						}, 1000)
+					];
+				}
 			}
-		},
+		],
 		BubbleChart: {
 			options: {
 				data: {
@@ -195,7 +225,7 @@ var demos = {
 				options: {
 					data: {
 						columns: [
-							["data1", 
+							["data1",
 								// open, high, low, close, volume (optional)
 								[1327,1369,1289,1348],
 								[1348,1371,1314,1320],
@@ -269,7 +299,7 @@ var demos = {
 						x: "x",
 						columns: [
 							["x", "2021-02-20", "2021-02-21"],
-							["data1", 
+							["data1",
 								// open, high, low, close, volume (optional)
 								{open: 1300, high: 1369, low: 1200, close: 1339, volume: 100},
 								{open: 1348, high: 1371, low: 1271, close: 1320},
@@ -720,43 +750,85 @@ var demos = {
 				}
 			}
 		},
-		StackedBarChart: {
-			options: {
-				data: {
-					columns: [
-						["data1", -30, 200, 200, 400, -150, 250],
-						["data2", 130, 100, -100, 200, -150, 50],
-						["data3", -230, 200, 200, -300, 250, 250]
-					],
-					type: "bar",
-					groups: [
-						["data1", "data2"]
-					]
-				},
-				grid: {
-					y: {
-						lines: [{value: 0}]
+		StackedBarChart: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", -30, 200, 200, 400, -150, 250],
+							["data2", 130, 100, -100, 200, -150, 50],
+							["data3", -230, 200, 200, -300, 250, 250]
+						],
+						type: "bar",
+						groups: [
+							["data1", "data2"]
+						]
+					},
+					grid: {
+						y: {
+							lines: [{value: 0}]
+						}
 					}
+				},
+				func: function(chart) {
+					chart.timer = [
+						setTimeout(function() {
+							chart.groups([["data1", "data2", "data3"]])
+						}, 1000),
+
+						setTimeout(function() {
+							chart.load({
+								columns: [["data4", 100, -50, 150, 200, -300, -100]]
+							});
+						}, 1500),
+
+						setTimeout(function() {
+							chart.groups([["data1", "data2", "data3", "data4"]])
+						}, 2000)
+					];
 				}
 			},
-			func: function(chart) {
-				chart.timer = [
-					setTimeout(function() {
-						chart.groups([["data1", "data2", "data3"]])
-					}, 1000),
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", -100, 100, 200, [-100, 0], [0, 100], [100, 200]],
+							["data2", 100, 300, 500, [0, 100], [100, 300], [200, 500]],
+							["data3", 200, 500, 800, [100, 200], [300, 500], [500, 800]],
+						],
+						type: "bar"
+					},
+					grid: {
+						y: {
+							lines: [{value: 0}]
+						}
+					}
+				},
+				func: function(chart) {
+					chart.timer = [
+						setTimeout(function() {
+							chart.groups([["data1", "data2"]])
+						}, 1000),
 
-					setTimeout(function() {
-						chart.load({
-							columns: [["data4", 100, -50, 150, 200, -300, -100]]
-						});
-					}, 1500),
+						setTimeout(function() {
+							chart.groups([["data1", "data2", "data3"]])
+						}, 1500),
 
-					setTimeout(function() {
-						chart.groups([["data1", "data2", "data3", "data4"]])
-					}, 2000)
-				];
+						setTimeout(function() {
+							chart.load({
+								columns: [
+									["data4", 500, 900, 1500, [400, 500], [700, 900], [1000, 1500]]
+								],
+							});
+						}, 2000),
+
+						setTimeout(function() {
+							chart.groups([["data1", "data2", "data3", "data4"]])
+						}, 2500),
+					];
+				}
 			}
-		},
+		],
 		StepChart: [
 			{
 				options: {
@@ -1472,7 +1544,7 @@ var demos = {
 						setTimeout(function() {
 							chart.resize({width: window.innerWidth * 0.4});
 						}, 1000),
-						
+
 						setTimeout(function() {
 							chart.resize();
 						}, 3000)
@@ -4971,7 +5043,7 @@ d3.select(".chart_area")
 						chart.export(null, function(dataUrl) {
 							// append an image element
 							var img = document.getElementById("exported");
-							
+
 							if (!img) {
 								img = document.createElement("img");
 
@@ -4987,7 +5059,7 @@ d3.select(".chart_area")
 							// append an image element
 							// append an image element
 							var img = document.getElementById("exported2");
-							
+
 							if (!img) {
 								img = document.createElement("img");
 

src/ChartInternal/data/convert.ts

@@ -23,7 +23,7 @@ export default {
 	 * @returns {object}
 	 * @private
 	 */
-	convertData(args, callback: Function): object {
+	convertData(args, callback: Function): any[] | false {
 		let data;
 
 		if (args.bindto) {

src/ChartInternal/data/data.ts

@@ -82,7 +82,7 @@ export default {
 	 * @returns {number} index number
 	 * @private
 	 */
-	getIndexByX(x, basedX: (string|Date)[]): number {
+	getIndexByX(x: Date|number|string, basedX: (Date|number|string)[]): number {
 		const $$ = this;
 
 		return basedX ?

src/ChartInternal/internals/format.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
-import {isValue, isFunction, isObjectType} from "../../module/util";
+import {isArray, isValue, isFunction, isObjectType} from "../../module/util";
 import {AxisType} from "../../../types/types";
 
 /**
@@ -46,6 +46,11 @@ export default {
 	},
 
 	defaultValueFormat(v): number|string {
+		// TODO We could extract this if block
+		// as defaultRangeValueFormat like thing.
+		if (isArray(v) && v.length === 2) {
+			return v.join(" ~ ");
+		}
 		return isValue(v) ? +v : "";
 	},
 

src/ChartInternal/internals/type.ts

@@ -159,6 +159,12 @@ export default {
 		return this.isTypeOf(d, TYPE_BY_CATEGORY.AreaRange);
 	},
 
+	isBarRangeType(d): boolean {
+		const {value} = d;
+
+		return isArray(value) && value.length === 2 && value.every(v => isNumber(v));
+	},
+
 	isBarType(d): boolean {
 		return this.isTypeOf(d, "bar");
 	},

src/ChartInternal/shape/bar.ts

@@ -2,8 +2,11 @@
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
+import {DataRow} from "../../../types/types";
 import CLASS from "../../config/classes";
-import {getRandom, isNumber} from "../../module/util";
+import {getRandom, isArray, isNumber} from "../../module/util";
+
+type BarTypeDataRow = DataRow<number | number[]>;
 
 export default {
 	initBar(): void {
@@ -23,7 +26,7 @@ export default {
 		}
 	},
 
-	updateTargetsForBar(targets): void {
+	updateTargetsForBar(targets: BarTypeDataRow[]): void {
 		const $$ = this;
 		const {config, $el} = $$;
 		const classChartBar = $$.getChartClass("Bar");
@@ -35,12 +38,14 @@ export default {
 			$$.initBar();
 		}
 
+		this.assertBarRange(targets);
+
 		const mainBarUpdate = $$.$el.main.select(`.${CLASS.chartBars}`)
 			.selectAll(`.${CLASS.chartBar}`)
 			.data(
 				// remove
 				targets.filter(
-					v => !v.values.every(d => !isNumber(d.value))
+					v => v.values.some(d => (isNumber(d.value) || $$.isBarRangeType(d)))
 				)
 			)
 			.attr("class", d => classChartBar(d) + classFocus(d));
@@ -56,6 +61,26 @@ export default {
 			.style("cursor", d => (isSelectable?.bind?.($$.api)(d) ? "pointer" : null));
 	},
 
+	assertBarRange(targets: BarTypeDataRow[]): void | never {
+		targets.forEach(({values}) => {
+			values.forEach(({value}) => {
+				if (isArray(value)) {
+					if (value.length !== 2) {
+						throw new Error(
+							"The length of values of the range type bar should be 2. " +
+							`(eg [start, end]). The given data is [${value.join(", ")}].`
+						);
+					} else if (value[0] >= value[1]) {
+						throw new Error(
+							"The end value of the range type bar should be greater " +
+							`than the start value. The given data is [${value.join(", ")}].`
+						);
+					}
+				}
+			});
+		});
+	},
+
 	/**
 	 * Generate/Update elements
 	 * @param {boolean} withTransition Transition for exit elements
@@ -97,7 +122,7 @@ export default {
 
 		return [
 			$$.$T(bar, withTransition, getRandom())
-				.attr("d", d => isNumber(d.value) && drawFn(d))
+				.attr("d", d => ((isNumber(d.value) || $$.isBarRangeType(d)) ? drawFn(d) : ""))
 				.style("fill", this.color)
 				.style("opacity", null)
 		];
@@ -179,7 +204,9 @@ export default {
 				posY = y0;
 			}
 
-			posY -= (y0 - offset);
+			if (!$$.isBarRangeType(d)) {
+				posY -= (y0 - offset);
+			}
 
 			const startPosX = posX + width;