Ruler interaction replacing Grid mouse listeners for comparative tooltips

packages/core/demo/data/index.ts

@@ -187,6 +187,11 @@ let allDemoGroups = [
 				chartType: chartTypes.LineChart,
 				isDemoExample: true
 			},
+			{
+				options: lineDemos.lineTimeSeriesDenseOptions,
+				data: lineDemos.lineTimeSeriesDenseData,
+				chartType: chartTypes.LineChart
+			},
 			{
 				options: lineDemos.lineOptions,
 				data: lineDemos.lineData,

packages/core/demo/data/line.ts

@@ -77,6 +77,69 @@ export const lineTimeSeriesOptions = {
 	curve: "curveMonotoneX"
 };
 
+export const lineTimeSeriesDenseData = [
+	{ group: "Dataset 1", date: new Date(2019, 0, 1), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 1, 5), value: 12000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 1, 10), value: 14000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 2), value: 25000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 2, 2), value: 26000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 3), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 3, 5), value: 10000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 3, 10), value: 12000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 5), value: 45000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 7), value: 49000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 7, 15), value: 45000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 9), value: 50000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 9, 5), value: 52000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 9, 15), value: 55000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 10), value: 50000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 12), value: 65000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 13), value: 80000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 14, 10), value: 85000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 15, 7), value: 90000 },
+	{ group: "Dataset 1", date: new Date(2019, 0, 15, 18), value: 70000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 1), value: 20000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 1, 3), value: 22000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 1, 16), value: 24000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 2), value: 35000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 2, 7), value: 36000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 3), value: 20000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 3, 6), value: 20000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 3, 18), value: 22000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 5), value: 62000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 6), value: 52000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 7), value: 52000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 7, 15), value: 52000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 7), value: 52000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 7, 15), value: 52000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 9), value: 60000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 9, 5), value: 62000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 9, 10), value: 62000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 12), value: 65000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 14), value: 40000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 15, 5), value: 45000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 15, 10), value: 35000 },
+	{ group: "Dataset 2", date: new Date(2019, 0, 15, 18), value: 30000 }
+];
+
+
+export const lineTimeSeriesDenseOptions = {
+	title: "Line (dense time series)",
+	axes: {
+		bottom: {
+			title: "2019 Annual Sales Figures",
+			mapsTo: "date",
+			scaleType: "time"
+		},
+		left: {
+			mapsTo: "value",
+			title: "Conversion rate",
+			scaleType: "linear"
+		}
+	},
+	curve: "curveMonotoneX"
+};
+
 export const lineTimeSeriesDataRotatedTicks = [
 	{ group: "Dataset 1", date: new Date(2019, 11, 30), value: 32100 },
 	{ group: "Dataset 1", date: new Date(2019, 11, 31), value: 23500 },

packages/core/src/charts/line.ts

@@ -11,6 +11,7 @@ import { Tools } from "../tools";
 import {
 	Grid,
 	Line,
+	Ruler,
 	Scatter,
 	TwoDimensionalAxes,
 	// the imports below are needed because of typescript bug (error TS4029)
@@ -42,6 +43,7 @@ export class LineChart extends AxisChart {
 		const graphFrameComponents = [
 			new TwoDimensionalAxes(this.model, this.services),
 			new Grid(this.model, this.services),
+			new Ruler(this.model, this.services),
 			new Line(this.model, this.services),
 			new Scatter(this.model, this.services)
 		];

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

@@ -0,0 +1,187 @@
+// Internal Imports
+import { Component } from "../component";
+import { DOMUtils } from "../../services";
+import { TooltipTypes, ScaleTypes } from "../../interfaces";
+import { Tools } from "../../tools";
+
+// D3 Imports
+import { mouse, Selection } from "d3-selection";
+
+type GenericSvgSelection = Selection<SVGElement, any, SVGElement, any>;
+
+const THRESHOLD = 5;
+
+/** check if x is inside threshold area extents  */
+function pointIsWithinThreshold(dx: number, x: number) {
+	return dx > x - THRESHOLD && dx < x + THRESHOLD;
+}
+
+export class Ruler extends Component {
+	type = "ruler";
+	backdrop: GenericSvgSelection;
+	hoveredElements: GenericSvgSelection;
+
+	render() {
+		const domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition();
+		const domainScaleType = this.services.cartesianScales.getScaleTypeByPosition(
+			domainAxisPosition
+		);
+		const isTimeSeries = domainScaleType === ScaleTypes.TIME;
+
+		// if scale type is not timeSeries do not show rule
+		if (!isTimeSeries) {
+			return;
+		}
+
+		this.drawBackdrop();
+		this.addBackdropEventListeners();
+	}
+
+	showRuler([x, y]: [number, number]) {
+		const svg = this.parent;
+		const ruler = DOMUtils.appendOrSelect(svg, "g.ruler");
+		const line = DOMUtils.appendOrSelect(ruler, "line.ruler-line");
+		const dataPoints: GenericSvgSelection = svg.selectAll(
+			"[role=graphics-symbol]"
+		);
+		const displayData = this.model.getDisplayData();
+		const domainScale = this.services.cartesianScales.getDomainScale();
+		const rangeScale = this.services.cartesianScales.getRangeScale();
+		const [yScaleEnd, yScaleStart] = rangeScale.range();
+
+		const scaledData: number[] = displayData.map((d, i) =>
+			this.services.cartesianScales.getDomainValue(d, i)
+		);
+
+		/**
+		 * Find matches, reduce is used instead of filter
+		 * to only get elements which belong to the same axis coordinate
+		 */
+		const scaledValuesMatches: number[] = scaledData.reduce((accum, currentValue) => {
+			// store the first element of the accumulator array to compare it with current element being processed
+			const sampleAccumValue = accum[0];
+
+			// if accumulator is not empty and current value is bigger than already existing value in the accumulator, skip current iteration
+			if (sampleAccumValue && currentValue > sampleAccumValue) {
+				return accum;
+			}
+
+			// there's a match and currentValue is either less then or equal to already stored values
+			if (pointIsWithinThreshold(currentValue, x)) {
+				if (sampleAccumValue && currentValue < sampleAccumValue) {
+					// there's a closer data point in the threshold area, so reinstantiate array
+					accum = [currentValue];
+				} else {
+					// currentValue is equal to already stored values, there's another match on the same coordinate
+					accum.push(currentValue);
+				}
+			}
+
+			return accum;
+		}, []);
+
+		// some data point match
+		if (scaledValuesMatches.length > 0) {
+			const sampleMatch = scaledValuesMatches[0];
+
+			const highlightItems = this.services.cartesianScales.getDataFromDomain(
+				domainScale.invert(sampleMatch)
+			).filter(d => d.value);
+
+			const hoveredElements = dataPoints.filter((d, i) =>
+				scaledValuesMatches.includes(
+					Number(this.services.cartesianScales.getDomainValue(d))
+				)
+			);
+
+			/** if we pass from a trigger area to another one
+			 * mouseout on previous elements won't get dispatched
+			 * so we need to do it manually
+			 */
+			if (
+				this.hoveredElements &&
+				this.hoveredElements.size() > 0 &&
+				!Tools.isEqual(this.hoveredElements, hoveredElements)
+			) {
+				this.hideRuler();
+			}
+
+			hoveredElements.dispatch("mouseover");
+
+			// set current hovered elements
+			this.hoveredElements = hoveredElements;
+
+			this.services.events.dispatchEvent("show-tooltip", {
+				hoveredElement: line,
+				multidata: highlightItems,
+				type: TooltipTypes.GRIDLINE
+			});
+
+			ruler.attr("opacity", 1);
+
+			// line snaps to matching point
+			line.attr("y1", yScaleStart)
+				.attr("y2", yScaleEnd)
+				.attr("x1", sampleMatch)
+				.attr("x2", sampleMatch);
+		} else {
+			ruler.attr("opacity", 0);
+			dataPoints.dispatch("mouseout");
+		}
+	}
+
+	hideRuler() {
+		const svg = this.parent;
+		const ruler = DOMUtils.appendOrSelect(svg, "g.ruler");
+		const dataPoints = svg.selectAll("[role=graphics-symbol]");
+
+		dataPoints.dispatch("mouseout");
+		ruler.attr("opacity", 0);
+	}
+
+	/**
+	 * Adds the listener on the X grid to trigger multiple point tooltips along the x axis.
+	 */
+	addBackdropEventListeners() {
+		const self = this;
+
+		this.backdrop
+			.on("mousemove mouseover", function() {
+				const chartContainer = self.services.domUtils.getMainSVG();
+				const pos = mouse(chartContainer);
+
+				self.showRuler(pos);
+			})
+			.on("mouseout", function() {
+				self.hideRuler();
+				self.services.events.dispatchEvent("hide-tooltip", {});
+			});
+	}
+
+	drawBackdrop() {
+		const svg = this.parent;
+
+		const domainScale = this.services.cartesianScales.getDomainScale();
+		const rangeScale = this.services.cartesianScales.getRangeScale();
+
+		const [xScaleStart, xScaleEnd] = domainScale.range();
+		const [yScaleEnd, yScaleStart] = rangeScale.range();
+
+		// Get height from the grid
+		this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop");
+		const backdropRect = DOMUtils.appendOrSelect(
+			this.backdrop,
+			"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/components/graphs/bubble.ts

@@ -1,6 +1,7 @@
 // Internal Imports
 import { Scatter } from "./scatter";
 import { DOMUtils } from "../../services";
+import { Roles } from "../../interfaces";
 
 // D3 Imports
 import { Selection } from "d3-selection";
@@ -39,6 +40,7 @@ export class Bubble extends Scatter {
 
 		selection.raise()
 			.classed("dot", true)
+			.attr("role", Roles.GRAPHICS_SYMBOL)
 			.attr("cx", (d, i) => this.services.cartesianScales.getDomainValue(d, i))
 			.transition(this.services.transitions.getTransition("bubble-update-enter", animate))
 			.attr("cy", (d, i) => this.services.cartesianScales.getRangeValue(d, i))

packages/core/src/components/index.ts

@@ -26,4 +26,5 @@ export * from "./layout/layout";
 export * from "./axes/two-dimensional-axes";
 export * from "./axes/axis";
 export * from "./axes/grid";
+export * from "./axes/ruler";
 export * from "./axes/zero-line";

packages/core/src/configuration.ts

@@ -79,7 +79,7 @@ export const baseTooltip: TooltipOptions = {
 export const axisChartTooltip: AxisTooltipOptions = Tools.merge({}, baseTooltip, {
 	gridline: {
 		enabled: true,
-		threshold: 0.25
+		threshold: 0.02
 	}
 } as AxisTooltipOptions);
 

packages/core/src/styles/components/_ruler.scss

@@ -0,0 +1,20 @@
+.#{$prefix}--#{$charts-prefix}--ruler {
+	line.ruler-line {
+		@if $ui-background == map-get($carbon--theme--g90, 'ui-background') {
+			stroke: #fff;
+		} @else if $ui-background == map-get($carbon--theme--g100, 'ui-background') {
+			stroke: #fff;
+		} @else {
+			stroke: #000;
+		}
+		stroke-width: 1px;
+		stroke-dasharray: 2;
+		pointer-events: none;
+	}
+
+	text.axis-tooltip-text {
+		fill: white;
+		dominant-baseline: middle;
+		text-anchor: middle;
+	}
+}

packages/core/src/styles/components/index.scss

@@ -1,6 +1,7 @@
 @import "./axis";
 @import "./callouts";
 @import "./grid";
+@import "./ruler";
 @import "./zero-line";
 @import "./layout";
 @import "./legend";

packages/core/src/tools.ts

@@ -11,6 +11,8 @@ import {
 	cloneDeep as lodashCloneDeep,
 	uniq as lodashUnique,
 	clamp as lodashClamp,
+	isEqual as lodashIsEqual,
+	flatten as lodashFlaten,
 	// the imports below are needed because of typescript bug (error TS4029)
 	Cancelable,
 	DebounceSettings
@@ -24,6 +26,7 @@ export namespace Tools {
 	export const merge = lodashMerge;
 	export const removeArrayDuplicates = lodashUnique;
 	export const clamp = lodashClamp;
+	export const isEqual = lodashIsEqual;
 
 	/**
 	 * Returns default chart options merged with provided options,