Merge branch 'master' into latest

.eslintrc

@@ -53,6 +53,9 @@
         "jsdoc/require-returns-description": 0,
         "jsdoc/no-undefined-types": 0,
         "jsdoc/valid-types": 0,
-        "jsdoc/check-values": 0
+        "jsdoc/check-values": 0,
+        "jsdoc/no-multi-asterisks": 0,
+        "jsdoc/tag-lines": 0
+
     }
 }

.github/workflows/ci.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [11.x, 12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2

AUTHORS.txt

@@ -45,3 +45,6 @@ Alan Hamlett <[email protected]>
 Nicolas Forêt <[email protected]>
 Marc Faber <[email protected]>
 Donald Pipowitch <[email protected]>
+Sung Oh Park <[email protected]>
+Adrian Schmutzler <[email protected]>
+Aziz Gazanchiyan <[email protected]>

README.md

@@ -5,7 +5,7 @@
 ![CI Status][badge-ci-status] [![Coverage Status][badge-coverage]][link-coverage] [![Known Vulnerabilities][badge-snyk]][link-snyk] 
 [![download][badge-download]][link-download] [![jsDelivr][badge-jsDelivr]][link-jsDelivr] [![gzip size][badge-gzip-size]][link-gzip-size]
 
-billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+.
+billboard.js is a re-usable, easy interface JavaScript chart library, based on [D3.js](https://d3js.org/).
 > The name "billboard" comes from the famous `billboard chart` which everybody knows.<br>
 > - [Why we decided to start billboard.js?](https://github.com/naver/billboard.js/wiki/Why-we-decided-to-start-billboard.js%3F)
 
@@ -19,9 +19,15 @@ billboard.js is a re-usable, easy interface JavaScript chart library, based on D
 - [Third Party Applications](https://github.com/naver/billboard.js/wiki/Third-party-applications)
 - [Who's using billboard.js](https://github.com/naver/billboard.js/wiki/Who's-using-billboard.js)
 - [Benchmark](https://naver.github.io/billboard.js/demo/benchmark/)
+- Technicals:
+  - [How to bundle for legacy browsers?](https://github.com/naver/billboard.js/wiki/How-to-bundle-for-legacy-browsers%3F)
+  - [How to generate chart image in Node.js environment?](https://github.com/naver/billboard.js/wiki/How-to-generate-chart-image-in-Node.js-environment%3F)
+  - find out more at [Wiki](https://github.com/naver/billboard.js/wiki) page.
 - v2 updates:
   - [v2 CHANGELOG](https://github.com/naver/billboard.js/wiki/CHANGELOG-v2)
   - [Migration Guide to v2](https://github.com/naver/billboard.js/wiki/Migration-Guide-to-v2)
+- v3 updates:
+  - [billboard.js 3.0 release: D3.js v6 support & new candlestick type!](https://netil.medium.com/billboard-js-3-0-release-d3-js-v6-support-new-candlestick-type-9bd74af6a753)
 
 ## Playground
 Play with the diverse options generating on the fly!

config/deploy.sh

@@ -58,7 +58,7 @@ push() {
 		git config --global user.email "[email protected]"
 		git config --global user.name "netil"
 
-		git remote set-url ${DEST_REMOTE} https://netil:${1}@github.com/naver/billboard.js.git > /dev/null 2>&1
+		git remote set-url ${DEST_REMOTE} https://git:${1}@github.com/naver/billboard.js.git > /dev/null 2>&1
 	fi
 
 	# push to github pages

config/webpack/development.js

@@ -5,9 +5,6 @@ const path = require("path");
 
 const config = {
 	devServer: {
-		dev: {
-			publicPath: "/dist"
-		},
 		static: {
 			directory: path.join(__dirname, "../../"),
 			serveIndex: true,

demo/demo.js

@@ -1004,25 +1004,46 @@ var demos = {
 				}
 			}
 		},
-		IndexedAxis: {
-			options: {
-				data: {
-					x: "x",
-					columns: [
-						["x", 495, 940, 1500, 3000, 4500, 6000, 7500, 9000, 10500, 12000, 13500, 15000],
-						["data", 47.911, 47.915, 48.437, 49.117, 49.583, 50.28, 51.712, 53.103, 54.456, 55.955, 56.752, 56.851]
-					],
-					type: "line"
-				},
-				axis: {
-					x: {
-						tick: {
-							culling: false
+		IndexedAxis: [
+			{
+				options: {
+					data: {
+						x: "x",
+						columns: [
+							["x", 495, 940, 1500, 3000, 4500, 6000, 7500, 9000, 10500, 12000, 13500, 15000],
+							["data", 47.911, 47.915, 48.437, 49.117, 49.583, 50.28, 51.712, 53.103, 54.456, 55.955, 56.752, 56.851]
+						],
+						type: "line"
+					},
+					axis: {
+						x: {
+							tick: {
+								culling: false
+							}
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						x: "x",
+						columns: [
+							["x", 0.1, 0.3, 0.6, 0.9, 10],
+							["data1", 4, 1, 6, 8, 10]
+						  ],
+						  type:"line"
+					  },
+					  axis: {
+						x: {
+							tick: {
+								values: [0, 2.5, 5, 7.5, 10]
+							}
 						}
 					}
 				}
 			}
-		},
+		],
 		LogScales: {
 			options: {
 				data: {
@@ -1906,7 +1927,7 @@ var demos = {
 				];
 			}
 		},
-		"DataFromURL": {
+		DataFromURL: {
 			options: {
 				data: {
 					url: "./data/test.csv",
@@ -2241,6 +2262,7 @@ var demos = {
 						],
 						type: "bar",
 						labels: {
+							backgroundColors: "yellow",
 							colors: "red"
 						}
 					}
@@ -2255,6 +2277,9 @@ var demos = {
 						],
 						type: "line",
 						labels: {
+							backgroundColors: {
+								data1: "rgba(0, 0, 0, 0.2)"
+							},
 							colors: {
 								data1: "fuchsia",
 								data2: "blue"
@@ -2612,7 +2637,8 @@ var demos = {
 					type: "line"
 				},
 				subchart: {
-					show: "subchart()"
+					show: "subchart()",
+					showHandle: true
 				}
 			},
 			description: "Drag over subchart area to zoom main chart.<br>When is zoomed, try dragging zoom selection element or expand it dragging each edge(left/right)"

package.json

@@ -66,46 +66,46 @@
 	"license": "MIT",
 	"readmeFilename": "README.md",
 	"dependencies": {
-		"d3-axis": "^2.0.0",
-		"d3-brush": "^2.1.0",
-		"d3-color": "^2.0.0",
-		"d3-drag": "^2.0.0",
-		"d3-dsv": "^2.0.0",
-		"d3-ease": "^2.0.0",
-		"d3-interpolate": "^2.0.1",
-		"d3-scale": "^3.2.3",
-		"d3-selection": "^2.0.0",
-		"d3-shape": "^2.0.0",
-		"d3-time-format": "^3.0.0",
-		"d3-transition": "^2.0.0",
-		"d3-zoom": "^2.0.0"
+		"d3-axis": "^3.0.0",
+		"d3-brush": "^3.0.0",
+		"d3-color": "^3.0.1",
+		"d3-drag": "^3.0.0",
+		"d3-dsv": "^3.0.1",
+		"d3-ease": "^3.0.1",
+		"d3-interpolate": "^3.0.1",
+		"d3-scale": "^4.0.0",
+		"d3-selection": "^3.0.0",
+		"d3-shape": "^3.0.1",
+		"d3-time-format": "^4.0.0",
+		"d3-transition": "^3.0.1",
+		"d3-zoom": "^3.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.13.15",
-		"@babel/plugin-proposal-class-properties": "^7.13.0",
-		"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-		"@babel/plugin-transform-runtime": "^7.13.15",
-		"@babel/preset-env": "^7.13.15",
-		"@babel/preset-typescript": "^7.13.0",
-		"@babel/runtime": "^7.13.10",
-		"@commitlint/cli": "^12.1.1",
-		"@commitlint/config-conventional": "^12.1.1",
+		"@babel/core": "^7.14.6",
+		"@babel/plugin-proposal-class-properties": "^7.14.5",
+		"@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+		"@babel/plugin-transform-runtime": "^7.14.5",
+		"@babel/preset-env": "^7.14.7",
+		"@babel/preset-typescript": "^7.14.5",
+		"@babel/runtime": "^7.14.6",
+		"@commitlint/cli": "^12.1.4",
+		"@commitlint/config-conventional": "^12.1.4",
 		"@rollup/plugin-babel": "^5.3.0",
-		"@rollup/plugin-node-resolve": "^11.2.0",
+		"@rollup/plugin-node-resolve": "^13.0.0",
 		"@rollup/plugin-replace": "^2.4.1",
 		"@rollup/plugin-typescript": "^8.2.0",
 		"@semantic-release/changelog": "^5.0.1",
 		"@semantic-release/commit-analyzer": "^8.0.1",
 		"@semantic-release/exec": "^5.0.0",
 		"@semantic-release/git": "^9.0.0",
-		"@semantic-release/npm": "^7.1.1",
-		"@semantic-release/release-notes-generator": "^9.0.2",
-		"@types/chai": "^4.2.16",
-		"@types/d3": "^6.3.0",
+		"@semantic-release/npm": "^7.1.3",
+		"@semantic-release/release-notes-generator": "^9.0.3",
+		"@types/chai": "^4.2.19",
+		"@types/d3": "^6.7.1",
 		"@types/mocha": "^8.2.1",
-		"@types/sinon": "^9.0.10",
-		"@typescript-eslint/eslint-plugin": "^4.22.0",
-		"@typescript-eslint/parser": "^4.22.0",
+		"@types/sinon": "^10.0.2",
+		"@typescript-eslint/eslint-plugin": "^4.28.0",
+		"@typescript-eslint/parser": "^4.28.0",
 		"babel-eslint": "^10.1.0",
 		"babel-helper-modules": "^6.0.0",
 		"babel-loader": "^8.2.2",
@@ -122,29 +122,29 @@
 		"better-docs": "^2.3.2",
 		"chai": "^4.3.4",
 		"clean-webpack-plugin": "^4.0.0-alpha.0",
-		"cloc": "^2.7.0",
-		"core-js": "^3.10.1",
+		"cloc": "^2.8.0",
+		"core-js": "^3.15.0",
 		"coveralls": "^3.1.0",
 		"cross-env": "^7.0.3",
-		"css-loader": "^5.2.1",
-		"css-minimizer-webpack-plugin": "^2.0.0",
-		"d3-format": "^2.0.0",
-		"d3-polygon": "^2.0.0",
+		"css-loader": "^5.2.6",
+		"css-minimizer-webpack-plugin": "^3.0.1",
+		"d3-format": "^3.0.1",
+		"d3-polygon": "^3.0.1",
 		"d3-voronoi": "^1.1.4",
 		"docdash": "^1.2.0",
-		"dtslint": "^4.0.9",
-		"eslint": "^7.24.0",
+		"dtslint": "^4.1.0",
+		"eslint": "^7.29.0",
 		"eslint-config-naver": "^2.1.0",
 		"eslint-loader": "^4.0.2",
-		"eslint-plugin-import": "^2.22.1",
-		"eslint-plugin-jsdoc": "^32.3.0",
-		"exports-loader": "^2.0.0",
+		"eslint-plugin-import": "^2.23.4",
+		"eslint-plugin-jsdoc": "^35.4.0",
+		"exports-loader": "^3.0.0",
 		"hammer-simulator": "0.0.1",
 		"husky": "^6.0.0",
 		"istanbul-instrumenter-loader": "^3.0.1",
 		"istanbul-lib-instrument": "^4.0.3",
-		"jsdoc": "^3.6.6",
-		"karma": "^6.2.0",
+		"jsdoc": "^3.6.7",
+		"karma": "^6.3.4",
 		"karma-chai": "^0.1.0",
 		"karma-chrome-launcher": "^3.1.0",
 		"karma-coverage-istanbul-reporter": "^3.0.3",
@@ -155,27 +155,27 @@
 		"karma-sourcemap-loader": "^0.3.8",
 		"karma-webpack": "^5.0.0",
 		"lite-fixture": "^1.0.2",
-		"mini-css-extract-plugin": "^1.4.1",
-		"mocha": "^8.3.2",
-		"node-sass": "^5.0.0",
+		"mini-css-extract-plugin": "^1.6.0",
+		"mocha": "^9.0.1",
+		"node-sass": "^6.0.0",
 		"regenerator-runtime": "^0.13.7",
-		"rollup": "^2.45.2",
-		"sass-loader": "^11.0.1",
-		"semantic-release": "^17.4.2",
+		"rollup": "^2.52.2",
+		"sass-loader": "^12.1.0",
+		"semantic-release": "^17.4.4",
 		"simulant": "^0.2.2",
-		"sinon": "^10.0.0",
-		"string-replace-loader": "^3.0.1",
+		"sinon": "^11.1.1",
+		"string-replace-loader": "^3.0.2",
 		"style-loader": "^2.0.0",
-		"terser-webpack-plugin": "^5.1.1",
-		"tslib": "^2.2.0",
-		"typescript": "^4.2.4",
-		"webpack": "^5.32.0",
-		"webpack-bundle-analyzer": "^4.4.1",
+		"terser-webpack-plugin": "^5.1.3",
+		"tslib": "^2.3.0",
+		"typescript": "^4.3.4",
+		"webpack": "^5.40.0",
+		"webpack-bundle-analyzer": "^4.4.2",
 		"webpack-clean": "^1.2.5",
-		"webpack-cli": "^4.5.0",
+		"webpack-cli": "^4.7.2",
 		"webpack-common-shake": "^2.1.0",
-		"webpack-dev-server": "^4.0.0-beta.2",
-		"webpack-merge": "^5.7.3",
+		"webpack-dev-server": "^4.0.0-beta.3",
+		"webpack-merge": "^5.8.0",
 		"webpackbar": "^5.0.0-3",
 		"write-file-webpack-plugin": "^4.5.1"
 	}

src/Chart/Chart.ts

@@ -4,7 +4,7 @@
  */
 import ChartInternal from "../ChartInternal/ChartInternal";
 import {loadConfig} from "../config/config";
-import {extend, isFunction} from "../module/util";
+import {extend, isFunction, notEmpty} from "../module/util";
 
 import apiChart from "./api/chart";
 import apiColor from "./api/color";
@@ -89,12 +89,15 @@ export default class Chart {
 			Object.keys(fn).forEach(key => {
 				const isFunc = isFunction(fn[key]);
 				const isChild = target !== argThis;
-				const hasChild = Object.keys(fn[key]).length > 0;
+				const isNotNil = notEmpty(fn[key]);
+				const hasChild = isNotNil && Object.keys(fn[key]).length > 0;
 
 				if (isFunc && ((!isChild && hasChild) || isChild)) {
 					target[key] = fn[key].bind(argThis);
-				} else if (!isFunc) {
+				} else if (isNotNil && !isFunc) {
 					target[key] = {};
+				} else {
+					target[key] = fn[key];
 				}
 
 				hasChild && bindThis(fn[key], target[key], argThis);