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

…to scatter-option * 'master' of https://github.com/JennChao/carbon-charts: 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 11, 2020 · e26af21 · e26af21
2 parents 77ebcf3 + 7201a08
commit e26af21
Show file tree

Hide file tree

Showing 21 changed files with 211 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.36.4"
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.36.4",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.36.2"
+		"@carbon/charts": "^0.36.4"
 	},
 	"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,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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.36.4",
 	"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/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

diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts
@@ -24,6 +24,18 @@ export class Ruler extends Component {
 		domainValue: number;
 		originalData: any;
 	}[];
+	isXGridEnabled = Tools.getProperty(
+		this.model.getOptions(),
+		"grid",
+		"x",
+		"enabled"
+	);
+	isYGridEnabled = Tools.getProperty(
+		this.model.getOptions(),
+		"grid",
+		"y",
+		"enabled"
+	);
 
 	render() {
 		this.drawBackdrop();
@@ -231,7 +243,9 @@ export class Ruler extends Component {
 		this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop");
 		const backdropRect = DOMUtils.appendOrSelect(
 			this.backdrop,
-			"rect.chart-grid-backdrop"
+			this.isXGridEnabled || this.isYGridEnabled
+				? "rect.chart-grid-backdrop.stroked"
+				: "rect.chart-grid-backdrop"
 		);
 
 		this.backdrop

diff --git a/packages/core/src/components/axes/zoom-bar.ts b/packages/core/src/components/axes/zoom-bar.ts
@@ -38,20 +38,6 @@ export class ZoomBar extends Component {
 			Events.ZoomBar.UPDATE,
 			this.render.bind(this)
 		);
-
-		// get initZoomDomain
-		const initialZoomDomain = Tools.getProperty(
-			this.model.getOptions(),
-			"zoomBar",
-			"top",
-			"initialZoomDomain"
-		);
-		if (initialZoomDomain !== null) {
-			this.model.set(
-				{ zoomDomain: initialZoomDomain },
-				{ skipUpdate: true }
-			);
-		}
 	}
 
 	render(animate = true) {
@@ -128,6 +114,40 @@ export class ZoomBar extends Component {
 			// add value 0 to the extended domain for zoom bar area graph
 			this.compensateDataForDefaultDomain(zoomBarData, defaultDomain);
 
+			// get old initialZoomDomain from model
+			const oldInitialZoomDomain = this.model.get("initialZoomDomain");
+			// get new initialZoomDomain from option
+			const newInitialZoomDomain = Tools.getProperty(
+				this.model.getOptions(),
+				"zoomBar",
+				"top",
+				"initialZoomDomain"
+			);
+
+			// update initialZoomDomain and set zoomDomain in model only if the option is changed
+			// not the same object, and both start date and end date are not equal
+			if (
+				!(
+					oldInitialZoomDomain === newInitialZoomDomain ||
+					(oldInitialZoomDomain &&
+						newInitialZoomDomain &&
+						oldInitialZoomDomain[0].valueOf() ===
+							newInitialZoomDomain[0].valueOf() &&
+						oldInitialZoomDomain[1].valueOf() ===
+							newInitialZoomDomain[1].valueOf())
+				)
+			) {
+				this.model.set(
+					{
+						initialZoomDomain: newInitialZoomDomain,
+						zoomDomain: newInitialZoomDomain
+							? newInitialZoomDomain
+							: defaultDomain
+					},
+					{ skipUpdate: true }
+				);
+			}
+
 			this.xScale.range([axesLeftMargin, width]).domain(defaultDomain);
 
 			// keep max selection range

diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
@@ -69,11 +69,16 @@ export class Tooltip extends Component {
 						"customHTML"
 					)
 				) {
-					tooltipTextContainer.html(
+					if (e.detail.content) {
+						const labelHTML = `<div class="title-tooltip">${e.detail.content}</div>`;
+						tooltipTextContainer.html(labelHTML);
+					} else {
+						tooltipTextContainer.html(
 						this.model
 							.getOptions()
 							.tooltip.customHTML(data, defaultHTML)
-					);
+						);
+					}
 				} else {
 					// Use default tooltip
 					tooltipTextContainer.html(defaultHTML);

diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -62,9 +62,13 @@ const legend: LegendOptions = {
  */
 export const grid: GridOptions = {
 	x: {
+		// set enable to false will not draw grid and stroke of grid backdrop
+		enabled: true,
 		numberOfTicks: 15
 	},
 	y: {
+		// set enable to false will not draw grid and stroke of grid backdrop
+		enabled: true,
 		numberOfTicks: 5
 	}
 };

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -85,9 +85,11 @@ export interface ThresholdOptions {
 
 export interface GridOptions {
 	y?: {
+		enabled?: boolean;
 		numberOfTicks?: number;
 	};
 	x?: {
+		enabled?: boolean;
 		numberOfTicks?: number;
 	};
 }

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -127,6 +127,16 @@ export class ChartModel {
 	}
 
 	getDataGroups() {
+		const isDataLoading = Tools.getProperty(
+			this.getOptions(),
+			"data",
+			"loading"
+		);
+
+		// No data should be displayed while data is still loading
+		if (isDataLoading) {
+			return [];
+		}
 		return this.get("dataGroups");
 	}
 

diff --git a/packages/core/src/styles/components/_grid.scss b/packages/core/src/styles/components/_grid.scss
@@ -7,6 +7,8 @@
 		} @else {
 			fill: $ui-background;
 		}
+	}
+	rect.chart-grid-backdrop.stroked {
 		stroke: $ui-03;
 	}
 

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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-react
+
+
+
+
+
+## [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-react
+
+
+
+
+
 ## [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-react

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-react",
-	"version": "0.36.2",
+	"version": "0.36.4",
 	"description": "Carbon charting components for React",
 	"main": "./bundle.js",
 	"module": "./index.js",
@@ -46,7 +46,7 @@
 	},
 	"homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
 	"dependencies": {
-		"@carbon/charts": "^0.36.2"
+		"@carbon/charts": "^0.36.4"
 	},
 	"peerDependencies": {
 		"react": "^16.6.3",