Merge branch 'master' into next

package.json

@@ -74,13 +74,13 @@
     "d3-zoom": "^1.8.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.6.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/runtime": "^7.6.0",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.3.0",
     "@semantic-release/exec": "^3.4.0-beta.2",
@@ -106,14 +106,14 @@
     "cloc": "^2.5.0",
     "core-js": "^3.2.1",
     "coveralls": "^3.0.6",
-    "cross-env": "^5.2.1",
+    "cross-env": "^6.0.0",
     "css-loader": "^3.2.0",
     "d3-array": "^2.3.1",
-    "d3-format": "^1.3.2",
+    "d3-format": "^1.4.1",
     "d3-polygon": "^1.0.5",
     "d3-voronoi": "^1.1.4",
     "docdash": "^1.1.1",
-    "eslint": "^6.3.0",
+    "eslint": "^6.4.0",
     "eslint-config-naver": "^2.1.0",
     "eslint-loader": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
@@ -147,12 +147,12 @@
     "style-loader": "^1.0.0",
     "uglify-js": "^3.6.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.39.3",
-    "webpack-bundle-analyzer": "^3.4.1",
+    "webpack": "^4.40.2",
+    "webpack-bundle-analyzer": "^3.5.0",
     "webpack-clean": "^1.2.3",
-    "webpack-cli": "^3.3.7",
+    "webpack-cli": "^3.3.9",
     "webpack-common-shake": "^2.1.0",
-    "webpack-dev-server": "^3.8.0",
+    "webpack-dev-server": "^3.8.1",
     "webpack-merge": "^4.2.2",
     "webpack-stylish": "^0.1.8",
     "webpackbar": "^4.0.0",

spec/internals/axis-spec.js

@@ -23,6 +23,11 @@ describe("AXIS", function() {
 			]
 		},
 		axis: {
+			x: {
+				tick: {
+					count: undefined
+				}
+			},
 			y: {
 				tick: {
 					values: null,
@@ -42,6 +47,25 @@ describe("AXIS", function() {
 		chart = util.generate(args);
 	});
 
+	describe("axis.x.tick.count", () => {
+		after(() => {
+			args.axis.x.type = "indexed";
+			args.axis.x.tick.count = undefined;
+		});
+
+		it("set options axis.x.tick.count=3", () => {
+			args.axis.x.type = "category";
+			args.axis.x.tick.count = 3;
+		});
+
+		it("should have only 3 tick on x axis", () => {
+			const ticks = chart.$.main.select(`.${CLASS.axisX}`).selectAll("g.tick");
+
+			expect(ticks.size()).to.be.equal(3);
+			expect(ticks.data()).to.be.deep.equal([0,3,5]);
+		});
+	});
+
 	describe("axis.y.tick.count", () => {
 		it("set options axis.y.tick.count=1", () => {
 			args.axis.y.tick.count = 1;

spec/shape/shape.arc-spec.js

@@ -6,6 +6,7 @@
 import {selectAll as d3SelectAll} from "d3-selection";
 import CLASS from "../../src/config/classes";
 import util from "../assets/util";
+import {getBoundingRect} from "../../src/internals/util";
 
 describe("SHAPE ARC", () => {
 	const selector = {
@@ -456,6 +457,33 @@ describe("SHAPE ARC", () => {
 				done();
 			}, 100);
 		});
+
+		it("check for startingAngle option", () => {
+			const chart = util.generate({
+				data: {
+				  columns: [
+					  ["data", 50]
+					],
+				  type: "gauge"
+				},
+				gauge: {
+				  startingAngle: 0
+				}
+			});
+
+			const arc = chart.$.arc;
+
+			// gauge backgound shouldn't be aligned with the 'startingAngle' option
+			expect(
+				getBoundingRect(arc.select(`.${CLASS.chartArcsBackground}`).node()).width
+			).to.be.above(600);
+
+			expect(
+				arc.select(`.${CLASS.arc}-data`).datum().startAngle
+			).to.be.equal(
+				chart.config("gauge.startingAngle")
+			);
+		});
 	});
 
 	describe("check for interaction", () => {

src/axis/Axis.js

@@ -605,6 +605,8 @@ export default class Axis {
 			} else if (targetCount === 2) {
 				tickValues = [values[0], values[values.length - 1]];
 			} else if (targetCount > 2) {
+				const isCategorized = this.owner.isCategorized();
+
 				count = targetCount - 2;
 				start = values[0];
 				end = values[values.length - 1];
@@ -615,7 +617,11 @@ export default class Axis {
 
 				for (i = 0; i < count; i++) {
 					tickValue = +start + interval * (i + 1);
-					tickValues.push(forTimeSeries ? new Date(tickValue) : tickValue);
+					tickValues.push(
+						forTimeSeries ? new Date(tickValue) : (
+							isCategorized ? Math.round(tickValue) : tickValue
+						)
+					);
 				}
 
 				tickValues.push(end);

src/config/Options.js

@@ -3189,7 +3189,7 @@ export default class Options {
 			 * @property {Number} [gauge.expand.duration=50] Set the expand transition time in milliseconds.
 			 * @property {Number} [gauge.min=0] Set min value of the gauge.
 			 * @property {Number} [gauge.max=100] Set max value of the gauge.
-			 * @property {Number} [gauge.startingAngle=-1 * Math.PI / 2]
+			 * @property {Number} [gauge.startingAngle=-1 * Math.PI / 2] Set starting angle where data draws.
 			 * @property {String} [gauge.title=""] Set title of gauge chart. Use `\n` character to enter line break.
 			 * @property {String} [gauge.units] Set units of the gauge.
 			 * @property {Number} [gauge.width] Set width of gauge chart.

src/shape/arc.js

@@ -630,16 +630,17 @@ extend(ChartInternal.prototype, {
 
 		if (hasGauge) {
 			const isFullCircle = config.gauge_fullCircle;
-			const endAngle = (isFullCircle ? -4 : -1) * config.gauge_startingAngle;
+			const startAngle = -1 * Math.PI / 2;
+			const endAngle = (isFullCircle ? -4 : -1) * startAngle;
 
 			isFullCircle && text.attr("dy", `${Math.round($$.radius / 14)}`);
 
 			$$.arcs.select(`.${CLASS.chartArcsBackground}`)
 				.attr("d", () => {
 					const d = {
 						data: [{value: config.gauge_max}],
-						startAngle: config.gauge_startingAngle,
-						endAngle: endAngle
+						startAngle,
+						endAngle
 					};
 
 					return $$.getArc(d, true, true);
@@ -651,7 +652,7 @@ extend(ChartInternal.prototype, {
 
 			if (config.gauge_label_show) {
 				$$.arcs.select(`.${CLASS.chartArcsGaugeMin}`)
-					.attr("dx", `${-1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2)))}px`)
+					.attr("dx", `${-1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (isFullCircle ? 1 : 2)))}px`)
 					.attr("dy", "1.2em")
 					.text($$.textForGaugeMinMax(config.gauge_min, false));
 

types/options.d.ts

@@ -448,6 +448,13 @@ export interface ChartOptions {
 	};
 
 	gauge?: {
+		/**
+		 * Whether this should be displayed
+		 * as a full circle instead of a
+		 * half circle.
+		 */
+		fullCircle?: boolean;
+
 		label?: {
 			/**
 			 * Show or hide label on gauge.
@@ -458,12 +465,22 @@ export interface ChartOptions {
 			 * Set formatter for the label on gauge.
 			 */
 			format?(value: any, ratio: number): string;
+
+			/**
+			 * Set customized min/max label text.
+			 */
+			extents?(value: number, isMax: boolean): string | number;
 		};
 
 		/**
 		 * Enable or disable expanding gauge.
 		 */
-		expand?: boolean;
+		expand?: boolean | {
+			/**
+			 * Set the expand transition time in milliseconds.
+			 */
+			duration?: number
+		};
 
 		/**
 		 * Set min value of the gauge.
@@ -475,6 +492,11 @@ export interface ChartOptions {
 		 */
 		max?: number;
 
+		/**
+		 * Set starting angle where data draws.
+		 */
+		startingAngle?: number;
+
 		/**
 		 * Set title of gauge chart. Use `\n` character to enter line break.
 		 */
@@ -489,13 +511,6 @@ export interface ChartOptions {
 		 * Set width of gauge chart.
 		 */
 		width?: number;
-
-		/**
-		 * Whether this should be displayed
-		 * as a full circle instead of a
-		 * half circle.
-		 */
-		fullCircle?: boolean;
 	};
 
 	spline?: {