feat(core): enable or disable ruler (#765)

* feat: enable or disable ruler

* fix: enable ruler as default setting

* refactor: move isRulerEnabled into render

* refactor: remove backdrop event listener

* refactor: remove code for styling backdrop in ruler component

* refactor: flag for checking event listener added status

* refactor: refactor ruler component

packages/core/src/components/axes/ruler.ts

@@ -36,10 +36,28 @@ export class Ruler extends Component {
 		"y",
 		"enabled"
 	);
+	// flag for checking whether ruler event listener is added or not
+	isEventListenerAdded = false;
 
 	render() {
+		const isRulerEnabled =  Tools.getProperty(
+			this.model.getOptions(),
+			"ruler",
+			"enabled"
+		);
+
 		this.drawBackdrop();
-		this.addBackdropEventListeners();
+
+		if (isRulerEnabled && !this.isEventListenerAdded) {
+			this.addBackdropEventListeners();
+		} else if (!isRulerEnabled && this.isEventListenerAdded) {
+			this.removeBackdropEventListeners();
+		}
+	}
+
+	removeBackdropEventListeners() {
+		this.isEventListenerAdded = false;
+		this.backdrop.on("mousemove mouseover mouseout", null);
 	}
 
 	formatTooltipData(tooltipData) {
@@ -203,6 +221,7 @@ export class Ruler extends Component {
 	 * Adds the listener on the X grid to trigger multiple point tooltips along the x axis.
 	 */
 	addBackdropEventListeners() {
+		this.isEventListenerAdded = true;
 		const self = this;
 		const displayData = this.model.getDisplayData();
 
@@ -247,15 +266,5 @@ export class Ruler extends Component {
 				? "rect.chart-grid-backdrop.stroked"
 				: "rect.chart-grid-backdrop"
 		);
-
-		this.backdrop
-			.merge(backdropRect)
-			.attr("x", xScaleStart)
-			.attr("y", yScaleStart)
-			.attr("width", xScaleEnd - xScaleStart)
-			.attr("height", yScaleEnd - yScaleStart)
-			.lower();
-
-		backdropRect.attr("width", "100%").attr("height", "100%");
 	}
 }

packages/core/src/configuration.ts

@@ -14,6 +14,7 @@ import {
 	RadarChartOptions,
 	// Components
 	GridOptions,
+	RulerOptions,
 	AxesOptions,
 	TimeScaleOptions,
 	TooltipOptions,
@@ -73,6 +74,15 @@ export const grid: GridOptions = {
 	}
 };
 
+/**
+ * Ruler options
+ */
+export const ruler: RulerOptions = {
+	// enable or disable ruler
+	enabled: true
+};
+
+
 /**
  * Tooltip options
  */
@@ -150,6 +160,7 @@ const axisChart: AxisChartOptions = Tools.merge({}, chart, {
 	axes,
 	timeScale,
 	grid,
+	ruler,
 	zoomBar: {
 		top: {
 			enabled: false,

packages/core/src/interfaces/components.ts

@@ -94,6 +94,14 @@ export interface GridOptions {
 	};
 }
 
+/**
+ * Ruler options
+ */
+export interface RulerOptions {
+	enabled?: boolean;
+}
+
+
 export interface BarOptions {
 	width?: number;
 	maxWidth?: number;