feat(candlestick): Intent to ship candlestick type

src/ChartInternal/ChartInternal.ts

@@ -16,7 +16,7 @@ import Options from "../config/Options/Options";
 import {document, window} from "../module/browser";
 import Cache from "../module/Cache";
 import {generateResize} from "../module/generator";
-import {extend, notEmpty, convertInputType, getOption, isFunction, isObject, isString, callFn, sortValue} from "../module/util";
+import {capitalize, extend, notEmpty, convertInputType, getOption, isFunction, isObject, isString, callFn, sortValue} from "../module/util";
 
 // data
 import dataConvert from "./data/convert";
@@ -446,6 +446,7 @@ export default class ChartInternal {
 			$$.hasType("bar") && types.push("Bar");
 			$$.hasType("bubble") && types.push("Bubble");
 			$$.hasTypeOf("Line") && types.push("Line");
+			$$.hasType("candlestick") && types.push("Candlestick");
 		} else {
 			if (!hasRadar) {
 				types.push("Arc", "Pie");
@@ -534,8 +535,13 @@ export default class ChartInternal {
 		$$.updateTargetsForText(targets);
 
 		if (hasAxis) {
-			$$.hasType("bar") && $$.updateTargetsForBar(targets); // Bar
-			$$.hasTypeOf("Line") && $$.updateTargetsForLine(targets); // Line
+			["bar", "candlestick", "line"].forEach(v => {
+				const capitalized = capitalize(v);
+
+				if ((v === "line" && $$.hasTypeOf(capitalized)) || $$.hasType(v)) {
+					$$[`updateTargetsFor${capitalized}`](targets);
+				}
+			});
 
 			// Sub Chart
 			$$.updateTargetsForSubchart &&

src/ChartInternal/internals/redraw.ts

@@ -5,7 +5,7 @@
 import {transition as d3Transition} from "d3-transition";
 import CLASS from "../../config/classes";
 import {generateWait} from "../../module/generator";
-import {callFn, getOption, isTabVisible, notEmpty} from "../../module/util";
+import {callFn, capitalize, getOption, isTabVisible, notEmpty} from "../../module/util";
 
 export default {
 	redraw(options: any = {}, transitionsValue?): void {
@@ -178,8 +178,6 @@ export default {
 		const list: Function[] = [];
 
 		if (hasAxis) {
-			const {area, bar, line} = shape.type;
-
 			if (config.grid_x_lines.length || config.grid_y_lines.length) {
 				list.push($$.redrawGrid(isTransition));
 			}
@@ -188,9 +186,15 @@ export default {
 				list.push($$.redrawRegion(isTransition));
 			}
 
-			$$.hasTypeOf("Line") && list.push($$.redrawLine(line, isTransition));
-			$$.hasTypeOf("Area") && list.push($$.redrawArea(area, isTransition));
-			$$.hasType("bar") && list.push($$.redrawBar(bar, isTransition));
+			Object.keys(shape.type).forEach(v => {
+				const capitalized = capitalize(v);
+				const shapeType = shape.type[v];
+
+				if ((/^(area|line)$/.test(v) && $$.hasTypeOf(capitalized)) || $$.hasType(v)) {
+					list.push($$[`redraw${capitalized}`](shapeType, isTransition));
+				}
+			});
+
 			!flow && grid.main && list.push($$.updateGridFocus());
 		}
 

src/ChartInternal/internals/type.ts

@@ -164,6 +164,10 @@ export default {
 		return this.isTypeOf(d, "bubble");
 	},
 
+	isCandlestickType(d): boolean {
+		return this.isTypeOf(d, "candlestick");
+	},
+
 	isScatterType(d): boolean {
 		return this.isTypeOf(d, "scatter");
 	},

src/ChartInternal/shape/candlestick.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+import CLASS from "../../config/classes";
+import {getPointer, getRandom, getRectSegList, isNumber, isObjectType, isValue} from "../../module/util";
+
+export default {
+	initCandlestick(): void {
+		const {$el} = this;
+
+		$el.candlestick = $el.main.select(`.${CLASS.chart}`)
+			// should positioned at the beginning of the shape node to not overlap others
+			.insert("g", ":first-child")
+			.attr("class", CLASS.chartCandlesticks);
+	},
+
+	// called from: updateTargets
+	updateTargetsForCandlestick(targets): void {
+		const $$ = this;
+		const {config, $el} = $$;
+		const classChart = $$.getChartClass("Candlestick");
+		const classCandlesticks = $$.getClass("candlesticks", true);
+		const classFocus = $$.classFocus.bind($$);
+
+		console.log("updateTargets", targets)
+		// const classChartBar = $$.classChartBar.bind($$);
+		// const classBars = $$.classBars.bind($$);
+		// const classFocus = $$.classFocus.bind($$);
+
+		if (!$el.candlestick) {
+			$$.initCandlestick();
+		}
+
+		const mainUpdate = $$.$el.main.select(`.${CLASS.chartCandlesticks}`)
+			.selectAll(`.${CLASS.chartCandlestick}`)
+			.data(targets)
+			.attr("class", d => classChart(d) + classFocus(d));
+
+		const mainEnter = mainUpdate.enter().append("g")
+			.attr("class", classChart)
+			.style("opacity", "0")
+			.style("pointer-events", "none");
+
+		// // Bars for each data
+		mainEnter.append("g")
+			.attr("class", classCandlesticks);
+			//.style("cursor", d => (isSelectable && isSelectable.bind($$.api)(d) ? "pointer" : null));
+	},
+
+	generateDrawCandlestick() {
+		console.log("generate")
+
+		return (d, i) => {
+			console.log(d, i)
+
+			return `M0,0`;
+		};
+	},
+
+	generateGetCandlestickPoints() {
+		console.log("generate points")
+	},
+
+	redrawCandlestick() {
+		console.log("redraw")
+	}
+};

src/ChartInternal/shape/shape.ts

@@ -24,7 +24,7 @@ import {
 } from "d3-shape";
 import {select as d3Select} from "d3-selection";
 import CLASS from "../../config/classes";
-import {getUnique, isObjectType, isNumber, isUndefined, notEmpty} from "../../module/util";
+import {capitalize, getUnique, isObjectType, isNumber, isUndefined, notEmpty} from "../../module/util";
 
 export default {
 	/**
@@ -59,12 +59,15 @@ export default {
 			}
 		}
 
-		if ($$.hasType("bar")) {
-			const indices = $$.getShapeIndices($$.isBarType);
+		["bar", "candlestick"].forEach(v => {
+			if ($$.hasType(v)) {
+				const capitalized = capitalize(v);
+				const indices = $$.getShapeIndices($$[`is${capitalized}Type`]);
 
-			shape.indices.bar = indices;
-			shape.type.bar = $$.generateDrawBar ? $$.generateDrawBar(indices) : undefined;
-		}
+				shape.indices[v] = indices;
+				shape.type[v] = $$[`generateDraw${capitalized}`] ? $$[`generateDraw${capitalized}`](indices) : undefined;
+			}
+		});
 
 		if (!$$.hasArcType() || hasRadar) {
 			// generate circle x/y functions depending on updated params

src/config/classes.ts

@@ -24,6 +24,8 @@ export default {
 	brush: "bb-brush",
 	button: "bb-button",
 	buttonZoomReset: "bb-zoom-reset",
+	candlestick: "bb-candlestick",
+	candlesticks: "bb-candlesticks",
 	chart: "bb-chart",
 	chartArc: "bb-chart-arc",
 	chartArcs: "bb-chart-arcs",
@@ -35,6 +37,8 @@ export default {
 	chartArcsGaugeTitle: "bb-chart-arcs-gauge-title",
 	chartBar: "bb-chart-bar",
 	chartBars: "bb-chart-bars",
+	chartCandlestick: "bb-chart-candlestick",
+	chartCandlesticks: "bb-chart-candlesticks",
 	chartCircles: "bb-chart-circles",
 	chartLine: "bb-chart-line",
 	chartLines: "bb-chart-lines",

src/config/const.ts

@@ -14,6 +14,7 @@ export const TYPE = {
 	AREA_STEP: "area-step",
 	BAR: "bar",
 	BUBBLE: "bubble",
+	CANDLESTICK: "candlestick",
 	DONUT: "donut",
 	GAUGE: "gauge",
 	LINE: "line",

src/config/resolver/shape.ts

@@ -19,6 +19,7 @@ import {
 import shapeArc from "../../ChartInternal/shape/arc";
 import shapeArea from "../../ChartInternal/shape/area";
 import shapeBar from "../../ChartInternal/shape/bar";
+import shapeCandlestick from "../../ChartInternal/shape/candlestick";
 import shapeGauge from "../../ChartInternal/shape/gauge";
 import shapeBubble from "../../ChartInternal/shape/bubble";
 import shapeLine from "../../ChartInternal/shape/line";
@@ -48,6 +49,7 @@ export {
 	areaStep,
 	bar,
 	bubble,
+	candlestick,
 	donut,
 	gauge,
 	line,
@@ -127,6 +129,9 @@ let bar = (): string => (extendAxis([shapeBar], optBar), (bar = () => TYPE.BAR)(
 let bubble = (): string => (
 	extendAxis([shapePoint, shapeBubble], [optBubble, optPoint]), (bubble = () => TYPE.BUBBLE)()
 );
+let candlestick = (): string => (
+	extendAxis([shapeCandlestick], []), (candlestick = () => TYPE.CANDLESTICK)()
+);
 let scatter = (): string => (
 	extendAxis([shapePoint], [optPoint, optScatter]), (scatter = () => TYPE.SCATTER)()
 );