skip: merge master

.github/dependabot.yml

@@ -0,0 +1,27 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    ignore:
+      - dependency-name: "d3-axis"
+      - dependency-name: "d3-brush"
+      - dependency-name: "d3-color"
+      - dependency-name: "d3-drag"
+      - dependency-name: "d3-dsv"
+      - dependency-name: "d3-ease"
+      - dependency-name: "d3-interpolate"
+      - dependency-name: "d3-scale"
+      - dependency-name: "d3-selection"
+      - dependency-name: "d3-shape"
+      - dependency-name: "d3-time-format"
+      - dependency-name: "d3-transition"
+      - dependency-name: "d3-zoom"
+      - dependency-name: "d3-format"
+      - dependency-name: "d3-polygon"

.npmrc

@@ -0,0 +1,2 @@
+# https://docs.npmjs.com/using-npm/config
+package-lock=false

AUTHORS.txt

@@ -41,3 +41,4 @@ Wonju Jeon <wonju.jeon@navercorp.com>
 ECrownofFire <ECrownofFire@gmail.com>
 Artem Savienkov <as@attractgroup.com>
 Hamid Sarfraz <praisedpk@gmail.com>
+Alan Hamlett <alan.hamlett@gmail.com>

CHANGELOG.md

@@ -1,11 +1,3 @@
-## [2.0.3](https://github.com/naver/billboard.js/compare/2.0.2...2.0.3) (2020-08-07)
-
-
-### Bug Fixes
-
-* **axis:** fix y axis clip-path coordinates ([da717b8](https://github.com/naver/billboard.js/commit/da717b8a9572861c94831f868c23c8b059fdcd17)), closes [#1572](https://github.com/naver/billboard.js/issues/1572)
-* **types:** Specify context for callbacks ([574bfea](https://github.com/naver/billboard.js/commit/574bfea2e102fed2030fb2b85590ff92ed40ae23)), closes [#1551](https://github.com/naver/billboard.js/issues/1551)
-
 ## [2.0.2](https://github.com/naver/billboard.js/compare/2.0.1...2.0.2) (2020-07-24)
 
 

README.md

@@ -33,7 +33,7 @@ If you have any questions, checkout the previous posts or create a new one at:
 - [Issue with 'question' label](https://github.com/naver/billboard.js/issues?utf8=%E2%9C%93&q=label%3Aquestion)
 
 ## Supported chart types
-![Chart Types](https://naver.github.io/billboard.js/img/chart-types.png?v=5)
+![Chart Types](https://naver.github.io/billboard.js/img/chart-types.png?v=6)
 
 ## Download and Installation
 

config/deploy.sh

@@ -20,12 +20,16 @@ setup() {
     DEST_REMOTE=upstream
   fi
 
-  # if this is the @next release channel, also deploy docs to in latest folder
-  if [[ $CUR_BRANCH == "next" ]]; then
-    DIST_TAG=next
+  # if this is the @next release channel, do not deploy doc & build files to gh-pages
+  if [[ $VERSION == *"next"* ]]; then
+    exit 1
+    # DIST_TAG=next
   else
     DIST_TAG=latest
   fi
+
+  echo $VERSION
+  echo $DIST_TAG
 }
 
 build() {

demo/benchmark/benchmark.css

@@ -0,0 +1,5 @@
+h1 {margin: 10px 0}
+p {margin:5px 0}
+input, button, select {font-size:16px;}
+button{border:solid 1px #ccc;}
+button:nth-child(3) {background-color: red;color:#fff}

demo/benchmark/benchmark.js

@@ -0,0 +1,89 @@
+window.bench = {
+    chart: null,
+    timer: null,
+    billboard: null,
+    $el: {
+        type: document.getElementById("type"),
+        matrix1: document.getElementById("matrix1"),
+        matrix2: document.getElementById("matrix2"),
+        transition: document.getElementById("transition")
+    },
+    getRandom(min = 100, max = 1000) {
+        return Math.random() * (max - min) + min;
+    },
+    getData() {
+        const data = [];
+        const matrix = [this.$el.matrix1.value, this.$el.matrix2.value];
+
+        for (let i = 0; i < matrix[1]; i++) {
+            const d = [];
+
+            for (let j = 0; j < matrix[0]; j++) {
+                if (j === 0) {
+                    d.push(`data${i}`);
+                } else {
+                    d.push(this.getRandom());
+                }
+            }
+
+            data.push(d);
+        }
+
+        return data;
+    },
+    loadBillboard: function() {
+        const version = document.getElementById("version").value;
+
+        this.billboard && document.head.removeChild(this.billboard);
+		this.billboard = document.createElement("script");
+
+		this.billboard.src = version === "local-latest" ? 
+			"../../dist/billboard.js":
+			`https://cdn.jsdelivr.net/npm/billboard.js@${version}/dist/billboard.js`;
+
+        document.head.appendChild(this.billboard);
+    },
+    generate: function(type) {
+        this.chart = bb.generate({
+            data: {
+                columns: this.getData(),
+                type: this.$el.type.value
+            },
+            transition: {
+                duration: +this.$el.transition.value
+            },
+            legend: {
+              show: false
+            }
+        });
+
+        this[type]();
+    },
+    load: function() {
+        const ctx = this;
+
+        this.stop();
+
+        this.chart.load({
+            columns: this.getData(),
+            done: function() {
+                ctx.timer = setTimeout(bench.load.bind(bench), 500);
+            }
+        });
+    },
+    resize: function() {
+        const ctx = this;
+
+        this.stop();
+        this.timer = setInterval(function() {
+            bench.chart.resize({
+                width: ctx.getRandom(200, 600),
+                height: ctx.getRandom(200, 480)
+            });
+        }, 500);
+    },
+    stop: function() {
+        this.play = false;
+        clearInterval(this.timer);
+    }
+};

demo/benchmark/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Benchmark</title>
+  <link rel="stylesheet" href="./benchmark.css">
+  <link rel="stylesheet" href="../../dist/billboard.min.css">
+  <script src="https://d3js.org/d3.v5.min.js"></script>
+</head>
+<body>
+  <h1>Benchmark</h1>
+  1) billboard.js
+  <select id="version" onchange="bench.loadBillboard()">
+	<option>select version</option>
+	<option value="1.12.11">v1.12.11</option>
+	<option value="2.0.0">v2.0.0</option>
+	<option value="local-latest">local-latest</option>
+  </select>
+  <p>
+	2) Data matrix: <input id="matrix1" type="text" value="50" style="width:50px"> x 
+	<input id="matrix2" type="text" value="50" style="width:50px"> / 
+	Transition: <select id="transition">
+	  <option value="0">0</option>
+	  <option value="350">350</option>
+	</select>
+
+  </p>
+  <p>
+	3) Type: <select id="type">
+	<option value="area">area</option>
+	<option value="area-spline">area-spline</option>
+	<option value="area-step">area-step</option>
+	<option value="bar">bar</option>
+	<option value="bubble">bubble</option>
+	<option value="donut">donut</option>
+	<option value="gauge">gauge</option>
+	<option value="line">line</option>
+	<option value="pie">pie</option>
+	<option value="radar">radar</option>
+	<option value="scatter">scatter</option>
+	<option value="spline">spline</option>
+	<option value="step">step</option>
+	</select>
+  </p>
+  <p>
+	4) Run! - 
+	<button onclick="bench.generate('load')">Load Start</button> 
+	<button onclick="bench.generate('resize')">Resize Start</button> 
+	<button onclick="bench.stop()">STOP</button>
+  </p>
+
+  <div id="chart"></div>  
+  <script src="./benchmark.js"></script>
+</body>
+</html>

demo/demo.js

@@ -856,7 +856,7 @@ var demos = {
 					columns: [
 						["x", 100, 395, 740, 1500, 3000, 4500],
 						["data1", 210, 1150, 12000, 100000, 1000000],
-						["data2", 100, 100, 100, 100, 100]
+						["data2", 100, 200, 150, 90, 250]
 					],
 					axes: {
 						data1: "y",
@@ -879,8 +879,9 @@ var demos = {
 					},
 					y2: {
 						show: true,
+						type: "indexed",
 						min: 30,
-						max: 20000
+						max: 300
 					}
 				}
 			}
@@ -3015,7 +3016,9 @@ d3.select(".chart_area")
 					}
 				},
 				point: {
-					show: false
+					focus: {
+						only: true
+					}
 				}
 			},
 			style: [

demo/index.html

@@ -95,6 +95,7 @@ <h2 class="sidebar-brand">billboard.js</h2>
         <form id="theme">
             Theme: <select class="classic">
                 <option value="">default</option>
+                <option value="datalab">datalab</option>
                 <option value="insight">insight</option>
                 <option value="graph">graph</option>
             </select>

demo/themes/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	 <meta charset="utf-8">
+	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+	 <title>billboard.js - Themes</title>
+	 <style>
+		 span {
+			 display: inline-block;
+			 padding: 5px;
+			 color: #fff;
+			 font-size: 15px;
+		 }
+	 </style>
+</head>
+<body>
+	<h1>Themes Colors</h1>
+	<div id="colors"></div>
+	<script>
+		//
+		const colors = {
+			default: "#1f77b4;#ff7f0e;#2ca02c;#d62728;#9467bd;#8c564b;#e377c2;#7f7f7f;#bcbd22;#17becf;",
+			insight: "#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;",
+			graph: "#65CFC2;#D0A45F;#64A4F5;#EF65A2;#A377FE;#8AAEC7;#FF7E5A;#898EFE;#FFAC35;#70B0FF;",
+			datalab: "#2ac4b3;#feaf29;#ff617b;#73a2ef;#b180d0;#3064cf;#d0a45f;#8aaec7;#ef65a2;#8aaec7;"
+		}
+
+		let html = "";
+
+		Object.keys(colors).forEach(v => {
+			html += `<h2>${v}</h2>`;
+
+			colors[v].split(";").forEach(v2 => {
+				html += `<span style=background-color:${v2}>${v2}</span>`;
+			});
+		});
+
+		document.getElementById("colors").innerHTML = html;
+	</script>
+</body>
+</html>

demo/types/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	 <meta charset="utf-8">
+	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+	 <title>billboard.js - benchmark</title>
+	 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/insight.min.css">
+	 <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
+	 <link rel="stylesheet" href="./types.css">
+</head>
+<body>
+	<h1>Supported Chart Types</h1>
+	<div id="wrapper"></div>
+	<script src="./types.js"></script>
+</body>
+</html>

demo/types/types.css

@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
+
+:root {
+	--border-color: #969696;
+}
+
+body {
+	padding: 10px;
+}
+
+h1 {margin: 10px 0}
+
+.bb {
+	height: 160px;
+	border-right: dotted 1px var(--border-color);
+	border-bottom: dotted 1px var(--border-color);
+}
+
+.title {
+	font-family: 'Raleway', sans-serif;
+	font-size: 15px;
+	margin: 10px 0 0 10px;
+	text-transform: capitalize;
+	position: absolute;
+	color: var(--border-color);
+}
+
+#wrapper {
+	border-top: dotted 1px var(--border-color);
+	border-left: dotted 1px var(--border-color);
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}