Merge branch 'master' of https://github.com/JennChao/carbon-charts in…

…to tooltip-option * 'master' of https://github.com/JennChao/carbon-charts: v0.37.1 Merge pull request carbon-design-system#800 from metonym/fix-svelte-base-chart v0.37.0 Merge pull request carbon-design-system#780 from natashadecoste/fix-meter-max-val feat: enable or disable scatter dot on charts except scatter chart (carbon-design-system#769) feat: create options for tick rotation (carbon-design-system#770) v0.36.4 Merge pull request carbon-design-system#761 from JennChao/sparkline Merge pull request carbon-design-system#793 from hlyang397/update-initial-zoom-domain fix the defect of label tooltip not showing when using custom tooltip (carbon-design-system#787) v0.36.3 Merge pull request carbon-design-system#785 from sophiiae/skeleton-with-data
JennChao · Sep 15, 2020 · b00aad9 · b00aad9
2 parents 0b2697b + 67675cf
commit b00aad9
Show file tree

Hide file tree

Showing 32 changed files with 436 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+
+### Features
+
+* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154))
+* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009))
+
+
+
+
+
+## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
+## [0.36.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.2...v0.36.3) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
 ## [0.36.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.1...v0.36.2) (2020-09-02)
 
 **Note:** Version bump only for package @carbon/charts-monorepo

diff --git a/lerna.json b/lerna.json
@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.36.2"
+	"version": "0.37.1"
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.36.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.2...v0.36.3) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.36.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.1...v0.36.2) (2020-09-02)
 
 **Note:** Version bump only for package @carbon/charts-angular

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-angular",
-	"version": "0.36.2",
+	"version": "0.37.1",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.36.2"
+		"@carbon/charts": "^0.37.1"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+
+### Features
+
+* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154))
+* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009))
+
+
+
+
+
+## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.36.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.2...v0.36.3) (2020-09-10)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 ## [0.36.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.1...v0.36.2) (2020-09-02)
 
 **Note:** Version bump only for package @carbon/charts

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "0.36.2",
+	"version": "0.37.1",
 	"description": "Carbon charting components",
 	"main": "./bundle.js",
 	"module": "./index.js",

diff --git a/packages/core/src/axis-chart.ts b/packages/core/src/axis-chart.ts
@@ -90,14 +90,8 @@ export class AxisChart extends Chart {
 			}
 		};
 
-		// if the chart is loading but has data, don't enable legend until loading is false
-		const isDataLoading = Tools.getProperty(
-			this.model.getOptions(),
-			"data",
-			"loading"
-		);
 		const isLegendEnabled =
-			this.model.getOptions().legend.enabled !== false && !isDataLoading;
+			this.model.getOptions().legend.enabled !== false;
 
 		// Decide the position of the legend in reference to the chart
 		let fullFrameComponentDirection = LayoutDirection.COLUMN;

diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -10,6 +10,7 @@ import {
 import { Tools } from "../../tools";
 import { ChartModel } from "../../model";
 import { DOMUtils } from "../../services";
+import { TickRotations } from "../../interfaces/enums";
 import * as Configuration from "../../configuration";
 import {
 	computeTimeIntervalName,
@@ -29,9 +30,6 @@ export class Axis extends Component {
 	scale: any;
 	scaleType: ScaleTypes;
 
-	// Track whether zoom domain needs to update in a render
-	zoomDomainChanging = false;
-
 	constructor(model: ChartModel, services: any, configs?: any) {
 		super(model, services, configs);
 
@@ -40,31 +38,8 @@ export class Axis extends Component {
 		}
 
 		this.margins = this.configs.margins;
-		this.init();
-	}
-
-	init() {
-		this.services.events.addEventListener(
-			Events.ZoomBar.SELECTION_START,
-			this.handleZoomBarSelectionStart
-		);
-		this.services.events.addEventListener(
-			Events.ZoomBar.SELECTION_END,
-			this.handleZoomBarSelectionEnd
-		);
 	}
 
-	handleZoomBarSelectionStart = () => {
-		this.zoomDomainChanging = true;
-	};
-
-	handleZoomBarSelectionEnd = () => {
-		this.zoomDomainChanging = false;
-		// need another update after zoom bar selection is completed
-		// to make sure the tick rotation is calculated correctly
-		this.services.events.dispatchEvent(Events.Model.UPDATE);
-	};
-
 	render(animate = true) {
 		const { position: axisPosition } = this.configs;
 		const options = this.model.getOptions();
@@ -439,41 +414,56 @@ export class Axis extends Component {
 			axisPosition === AxisPositions.BOTTOM ||
 			axisPosition === AxisPositions.TOP
 		) {
-			let rotateTicks = false;
-
-			// If we're dealing with a discrete scale type
-			// We're able to grab the spacing between the ticks
-			if (scale.step) {
-				const textNodes = invisibleAxisRef
-					.selectAll("g.tick text")
-					.nodes();
-
-				// If any ticks are any larger than the scale step size
-				rotateTicks = textNodes.some(
-					(textNode) =>
-						DOMUtils.getSVGElementSize(textNode, { useBBox: true })
-							.width >= scale.step()
-				);
-			} else {
-				// When dealing with a continuous scale
-				// We need to calculate an estimated size of the ticks
-				const minTickSize =
-					Tools.getProperty(
-						axisOptions,
-						"ticks",
-						"rotateIfSmallerThan"
-					) || Configuration.axis.ticks.rotateIfSmallerThan;
-				const ticksNumber = isTimeScaleType
-					? axis.tickValues().length
-					: scale.ticks().length;
-				const estimatedTickSize = width / ticksNumber / 2;
-				rotateTicks = isTimeScaleType
-					? estimatedTickSize < minTickSize * 2 // datetime tick could be very long
-					: estimatedTickSize < minTickSize;
+			let shouldRotateTicks = false;
+			// user could decide if tick rotation is required during zoom domain changing
+			const tickRotation = Tools.getProperty(
+				axisOptions,
+				"ticks",
+				"rotation"
+			);
+
+			if (tickRotation === TickRotations.ALWAYS) {
+				shouldRotateTicks = true;
+			} else if (tickRotation === TickRotations.NEVER) {
+				shouldRotateTicks = false;
+			} else if (!tickRotation || tickRotation === TickRotations.AUTO) {
+				// if the option is not set or set to AUTO
+
+				// depending on if tick rotation is necessary by calculating space
+				// If we're dealing with a discrete scale type
+				// We're able to grab the spacing between the ticks
+				if (scale.step) {
+					const textNodes = invisibleAxisRef
+						.selectAll("g.tick text")
+						.nodes();
+
+					// If any ticks are any larger than the scale step size
+					shouldRotateTicks = textNodes.some(
+						(textNode) =>
+							DOMUtils.getSVGElementSize(textNode, {
+								useBBox: true
+							}).width >= scale.step()
+					);
+				} else {
+					// When dealing with a continuous scale
+					// We need to calculate an estimated size of the ticks
+					const minTickSize =
+						Tools.getProperty(
+							axisOptions,
+							"ticks",
+							"rotateIfSmallerThan"
+						) || Configuration.axis.ticks.rotateIfSmallerThan;
+					const ticksNumber = isTimeScaleType
+						? axis.tickValues().length
+						: scale.ticks().length;
+					const estimatedTickSize = width / ticksNumber / 2;
+					shouldRotateTicks = isTimeScaleType
+						? estimatedTickSize < minTickSize * 2 // datetime tick could be very long
+						: estimatedTickSize < minTickSize;
+				}
 			}
 
-			// always rotate ticks if zoomDomain is changing to avoid rotation flips during zoomDomain changing
-			if (rotateTicks || this.zoomDomainChanging) {
+			if (shouldRotateTicks) {
 				if (!isNumberOfTicksProvided) {
 					axis.ticks(
 						this.getNumberOfFittingTicks(
@@ -690,15 +680,5 @@ export class Axis extends Component {
 			.on("mouseover", null)
 			.on("mousemove", null)
 			.on("mouseout", null);
-
-		// Remove zoom bar event listeners
-		this.services.events.removeEventListener(
-			Events.ZoomBar.SELECTION_START,
-			this.handleZoomBarSelectionStart
-		);
-		this.services.events.removeEventListener(
-			Events.ZoomBar.SELECTION_END,
-			this.handleZoomBarSelectionEnd
-		);
 	}
 }
diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts
@@ -12,13 +12,34 @@ export class Grid extends Component {
 	backdrop: any;
 
 	render(animate = true) {
+		const isXGridEnabled = Tools.getProperty(
+			this.model.getOptions(),
+			"grid",
+			"x",
+			"enabled"
+		);
+		const isYGridEnabled = Tools.getProperty(
+			this.model.getOptions(),
+			"grid",
+			"y",
+			"enabled"
+		);
+
+		if (!isXGridEnabled && !isYGridEnabled) {
+			return;
+		}
 		// Draw the backdrop
-		this.drawBackdrop();
-		DOMUtils.appendOrSelect(this.backdrop, "g.x.grid");
-		DOMUtils.appendOrSelect(this.backdrop, "g.y.grid");
+		this.drawBackdrop(isXGridEnabled, isYGridEnabled);
 
-		this.drawXGrid(animate);
-		this.drawYGrid(animate);
+		if (isXGridEnabled) {
+			DOMUtils.appendOrSelect(this.backdrop, "g.x.grid");
+			this.drawXGrid(animate);
+		}
+
+		if (isYGridEnabled) {
+			DOMUtils.appendOrSelect(this.backdrop, "g.y.grid");
+			this.drawYGrid(animate);
+		}
 	}
 
 	drawXGrid(animate: boolean) {
@@ -184,7 +205,7 @@ export class Grid extends Component {
 		return xGridlines;
 	}
 
-	drawBackdrop() {
+	drawBackdrop(isXGridEnabled, isYGridEnabled) {
 		const svg = this.parent;
 
 		const mainXScale = this.services.cartesianScales.getMainXScale();
@@ -197,7 +218,9 @@ export class Grid extends Component {
 		this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop");
 		const backdropRect = DOMUtils.appendOrSelect(
 			this.backdrop,
-			"rect.chart-grid-backdrop"
+			isXGridEnabled || isYGridEnabled
+				? "rect.chart-grid-backdrop.stroked"
+				: "rect.chart-grid-backdrop"
 		);
 
 		this.backdrop
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,5 @@ @@
     			]
     		}
     	},
-    	"version": "0.36.2"
+    	"version": "0.37.1"
     }