Merge pull request carbon-design-system#761 from JennChao/sparkline

* feat: enable chart grid enable option * refactor: rename grid option * refactor: rename gridEnabled to isGridEnabled * fix: enable grid as default setting * feat: enable or disable x and y grid separately * refactor: interface modification for xGridEnabled and yGridEnabled * refactor: rename grid option * refactor: rename class Co-authored-by: Fei Z <[email protected]>
theiliad · Sep 10, 2020 · 186cb5f · 186cb5f
1 parent f6b40f3
commit 186cb5f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 8 deletions.
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/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/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;
 	}