@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/axes/hover-axis.ts

@@ -1,266 +0,0 @@
-// Internal Imports
-import { Axis } from './axis';
-import { AxisPositions, Events, ScaleTypes } from '../../interfaces';
-import { ChartModel } from '../../model/model';
-import { DOMUtils } from '../../services';
-import { Tools } from '../../tools';
-import * as Configuration from '../../configuration';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-export class HoverAxis extends Axis {
-	constructor(model: ChartModel, services: any, configs?: any) {
-		super(model, services, configs);
-	}
-
-	render(animate = true) {
-		super.render(animate);
-
-		// Remove existing event listeners to avoid flashing behavior
-		super.destroy();
-
-		const { position: axisPosition } = this.configs;
-		const svg = this.getComponentContainer();
-		const container = DOMUtils.appendOrSelect(
-			svg,
-			`g.axis.${axisPosition}`
-		);
-
-		const self = this;
-		container.selectAll('g.tick').each(function (_, index) {
-			const g = select(this);
-			g.classed('tick-hover', true).attr(
-				'tabindex',
-				index === 0 ? 0 : -1
-			);
-			const textNode = g.select('text');
-			const { width, height } = DOMUtils.getSVGElementSize(textNode, {
-				useBBox: true,
-			});
-
-			const rectangle = DOMUtils.appendOrSelect(g, 'rect.axis-holder');
-
-			let x = 0,
-				y = 0;
-
-			// Depending on axis position, apply correct translation & rotation to align the rect
-			// with the text
-			switch (axisPosition) {
-				case AxisPositions.LEFT:
-					x = -width + Number(textNode.attr('x'));
-					y = -(height / 2);
-					break;
-				case AxisPositions.RIGHT:
-					x = Math.abs(Number(textNode.attr('x')));
-					y = -(height / 2);
-					break;
-				case AxisPositions.TOP:
-					x = -(width / 2);
-					y = -height + Number(textNode.attr('y')) / 2;
-
-					if (self.truncation[axisPosition]) {
-						x = 0;
-						rectangle.attr('transform', `rotate(-45)`);
-					}
-					break;
-				case AxisPositions.BOTTOM:
-					x = -(width / 2);
-					y = height / 2 - 2;
-
-					if (self.truncation[axisPosition]) {
-						x = -width;
-						rectangle.attr('transform', `rotate(-45)`);
-					}
-					break;
-			}
-
-			// Translates x position -4 left to keep center after padding
-			// Adds padding on left & right
-			rectangle
-				.attr('x', x - Configuration.axis.hover.rectanglePadding)
-				.attr('y', y)
-				.attr(
-					'width',
-					width + Configuration.axis.hover.rectanglePadding * 2
-				)
-				.attr('height', height)
-				.lower();
-
-			// Add keyboard event listeners to each group element
-			g.on('keydown', function (event: KeyboardEvent) {
-				// Choose specific arrow key depending on the axis
-				if (
-					axisPosition === AxisPositions.LEFT ||
-					axisPosition === AxisPositions.RIGHT
-				) {
-					if (event.key && event.key === 'ArrowUp') {
-						self.goNext(this as HTMLElement, event);
-					} else if (event.key && event.key === 'ArrowDown') {
-						self.goPrevious(this as HTMLElement, event);
-					}
-				} else {
-					if (event.key && event.key === 'ArrowLeft') {
-						self.goPrevious(this as HTMLElement, event);
-					} else if (event.key && event.key === 'ArrowRight') {
-						self.goNext(this as HTMLElement, event);
-					}
-				}
-			});
-		});
-
-		// Add event listeners to element group
-		this.addEventListeners();
-	}
-
-	addEventListeners() {
-		const svg = this.getComponentContainer();
-		const { position: axisPosition } = this.configs;
-		const container = DOMUtils.appendOrSelect(
-			svg,
-			`g.axis.${axisPosition}`
-		);
-		const options = this.getOptions();
-		const axisOptions = Tools.getProperty(options, 'axes', axisPosition);
-		const axisScaleType = Tools.getProperty(axisOptions, 'scaleType');
-		const truncationThreshold = Tools.getProperty(
-			axisOptions,
-			'truncation',
-			'threshold'
-		);
-
-		const self = this;
-		container
-			.selectAll('g.tick.tick-hover')
-			.on('mouseover', function (event) {
-				const hoveredElement = select(this).select('text');
-				const datum = hoveredElement.datum() as string;
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.Axis.LABEL_MOUSEOVER,
-					{
-						event,
-						element: hoveredElement,
-						datum,
-					}
-				);
-
-				if (
-					axisScaleType === ScaleTypes.LABELS &&
-					datum.length > truncationThreshold
-				) {
-					self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-						event,
-						element: hoveredElement,
-						datum,
-					});
-				}
-			})
-			.on('mousemove', function (event) {
-				const hoveredElement = select(this).select('text');
-				const datum = hoveredElement.datum() as string;
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.Axis.LABEL_MOUSEMOVE,
-					{
-						event,
-						element: hoveredElement,
-						datum,
-					}
-				);
-
-				self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-					event,
-				});
-			})
-			.on('click', function (event) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
-					event,
-					element: select(this).select('text'),
-					datum: select(this).select('text').datum(),
-				});
-			})
-			.on('mouseout', function (event) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
-					event,
-					element: select(this).select('text'),
-					datum: select(this).select('text').datum(),
-				});
-
-				if (axisScaleType === ScaleTypes.LABELS) {
-					self.services.events.dispatchEvent(Events.Tooltip.HIDE);
-				}
-			})
-			.on('focus', function (event) {
-				const coordinates = { clientX: 0, clientY: 0 };
-
-				if (event.target) {
-					// Focus element since we are using arrow keys
-					event.target.focus();
-					const boundingRect = event.target.getBoundingClientRect();
-					coordinates.clientX = boundingRect.x;
-					coordinates.clientY = boundingRect.y;
-				}
-
-				// Dispatch focus event
-				self.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {
-					event: { ...event, ...coordinates },
-					element: select(this),
-					datum: select(this).select('text').datum(),
-				});
-			})
-			.on('blur', function (event) {
-				// Dispatch blur event
-				self.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {
-					event,
-					element: select(this),
-					datum: select(this).select('text').datum(),
-				});
-			});
-	}
-
-	// Focus on the next HTML element sibling
-	private goNext(element: HTMLElement, event: Event) {
-		if (
-			element.nextElementSibling &&
-			element.nextElementSibling.tagName !== 'path'
-		) {
-			element.nextElementSibling.dispatchEvent(new Event('focus'));
-		}
-
-		event.preventDefault();
-	}
-
-	// Focus on the previous HTML element sibling
-	private goPrevious(element: HTMLElement, event: Event) {
-		if (
-			element.previousElementSibling &&
-			element.previousElementSibling.tagName !== 'path'
-		) {
-			element.previousElementSibling.dispatchEvent(new Event('focus'));
-		}
-
-		event.preventDefault();
-	}
-
-	destroy() {
-		const svg = this.getComponentContainer();
-		const { position: axisPosition } = this.configs;
-		const container = DOMUtils.appendOrSelect(
-			svg,
-			`g.axis.${axisPosition}`
-		);
-
-		// Remove event listeners
-		container
-			.selectAll('g.tick.tick-hover')
-			.on('mouseover', null)
-			.on('mousemove', null)
-			.on('mouseout', null)
-			.on('focus', null)
-			.on('blur', null);
-	}
-}

package/src/components/axes/ruler-binned.ts

@@ -1,160 +0,0 @@
-// Internal Imports
-import { GenericSvgSelection, Ruler } from './ruler';
-import { DOMUtils } from '../../services';
-import {
-	CartesianOrientations,
-	ColorClassNameTypes,
-	Events,
-	RenderTypes,
-} from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-import { get } from 'lodash-es';
-
-export class BinnedRuler extends Ruler {
-	type = 'ruler-binned';
-	renderType = RenderTypes.SVG;
-
-	showRuler(event, [x, y]: [number, number]) {
-		const svg = this.parent;
-
-		const options = this.model.getOptions();
-
-		const orientation: CartesianOrientations = this.services.cartesianScales.getOrientation();
-
-		const rangeScale = this.services.cartesianScales.getRangeScale();
-		const [yScaleEnd, yScaleStart] = rangeScale.range();
-
-		const domainScale = this.services.cartesianScales.getDomainScale();
-		const correspondingDomainValue = domainScale.invert(
-			orientation === CartesianOrientations.VERTICAL ? x : y
-		);
-
-		const ruler = DOMUtils.appendOrSelect(svg, 'g.ruler').attr(
-			'aria-label',
-			'ruler'
-		);
-		const rulerLine = DOMUtils.appendOrSelect(ruler, 'line.ruler-line');
-
-		const dataPointElements: GenericSvgSelection = svg.selectAll(
-			'[role=graphics-symbol]'
-		);
-
-		const elementsToHighlight = dataPointElements.filter((d) => {
-			if (
-				parseFloat(get(d, 'data.x0')) <= correspondingDomainValue &&
-				parseFloat(get(d, 'data.x1')) >= correspondingDomainValue
-			) {
-				return true;
-			}
-		});
-
-		// some data point match
-		if (elementsToHighlight.size() > 0) {
-			/** 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.elementsToHighlight &&
-				this.elementsToHighlight.size() > 0 &&
-				!Tools.isEqual(this.elementsToHighlight, elementsToHighlight)
-			) {
-				this.hideRuler();
-			}
-
-			elementsToHighlight.dispatch('mouseover');
-
-			// set current hovered elements
-			this.elementsToHighlight = elementsToHighlight;
-
-			const sampleMatchData = select(
-				elementsToHighlight.nodes()[0]
-			).datum();
-
-			const x0 = parseFloat(get(sampleMatchData, 'data.x0'));
-			const x1 = parseFloat(get(sampleMatchData, 'data.x1'));
-
-			const activeDataGroupNames = this.model.getActiveDataGroupNames();
-
-			const tooltipDataGroups = activeDataGroupNames
-				.reverse()
-				.map((dataGroupName) => ({
-					label: dataGroupName,
-					value: get(sampleMatchData, `data.${dataGroupName}`),
-					class: this.model.getColorClassName({
-						classNameTypes: [ColorClassNameTypes.TOOLTIP],
-						dataGroupName,
-					}),
-				}))
-				.filter((d) => d.value !== 0);
-			const thereIsMatchingData = tooltipDataGroups.length > 0;
-
-			if (thereIsMatchingData) {
-				this.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					mousePosition: [x, y],
-					hoveredElement: rulerLine,
-					items: [
-						{
-							label: get(options, 'bins.rangeLabel') || 'Range',
-							value: `${x0} – ${x1}`,
-						},
-						...tooltipDataGroups,
-						...(Tools.getProperty(
-							options,
-							'tooltip',
-							'showTotal'
-						) === true
-							? [
-									{
-										label:
-											get(
-												options,
-												'tooltip.totalLabel'
-											) || 'Total',
-										value: activeDataGroupNames.reduce(
-											(accum, currentValue) =>
-												accum +
-												parseFloat(
-													get(
-														sampleMatchData,
-														`data.${currentValue}`
-													)
-												),
-											0
-										),
-									},
-							  ]
-							: []),
-					],
-				});
-
-				ruler.attr('opacity', 1);
-
-				const rulerPosition = domainScale((x0 + x1) / 2);
-
-				// line snaps to matching point
-				if (orientation === 'horizontal') {
-					rulerLine
-						.attr('x1', yScaleStart)
-						.attr('x2', yScaleEnd)
-						.attr('y1', rulerPosition)
-						.attr('y2', rulerPosition);
-				} else {
-					rulerLine
-						.attr('y1', yScaleStart)
-						.attr('y2', yScaleEnd)
-						.attr('x1', rulerPosition)
-						.attr('x2', rulerPosition);
-				}
-			} else {
-				this.hideRuler();
-			}
-		} else {
-			this.hideRuler();
-		}
-	}
-}

package/src/components/axes/ruler-stacked.ts

@@ -1,7 +0,0 @@
-import { Ruler } from './ruler';
-
-export class StackedRuler extends Ruler {
-	formatTooltipData(tooltipData) {
-		return tooltipData.reverse();
-	}
-}

package/src/components/axes/ruler.ts

@@ -1,274 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { CartesianOrientations, Events, RenderTypes } from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-// @ts-ignore
-// ts-ignore is needed because `@types/d3`
-// is missing the `pointer` function
-import { Selection, pointer } from 'd3-selection';
-
-export 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';
-	renderType = RenderTypes.SVG;
-
-	backdrop: GenericSvgSelection;
-	elementsToHighlight: GenericSvgSelection;
-	pointsWithinLine: {
-		domainValue: number;
-		originalData: any;
-	}[];
-	isXGridEnabled = Tools.getProperty(
-		this.getOptions(),
-		'grid',
-		'x',
-		'enabled'
-	);
-	isYGridEnabled = Tools.getProperty(
-		this.getOptions(),
-		'grid',
-		'y',
-		'enabled'
-	);
-	// flag for checking whether ruler event listener is added or not
-	isEventListenerAdded = false;
-
-	render() {
-		const isRulerEnabled = Tools.getProperty(
-			this.getOptions(),
-			'ruler',
-			'enabled'
-		);
-
-		this.drawBackdrop();
-
-		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) {
-		return tooltipData;
-	}
-
-	showRuler(event, [x, y]: [number, number]) {
-		const svg = this.parent;
-
-		const orientation: CartesianOrientations = this.services.cartesianScales.getOrientation();
-
-		const displayData = this.model.getDisplayData();
-
-		const rangeScale = this.services.cartesianScales.getRangeScale();
-		const [yScaleEnd, yScaleStart] = rangeScale.range();
-
-		const mouseCoordinate =
-			orientation === CartesianOrientations.HORIZONTAL ? y : x;
-		const ruler = DOMUtils.appendOrSelect(svg, 'g.ruler').attr(
-			'aria-label',
-			'ruler'
-		);
-		const rulerLine = DOMUtils.appendOrSelect(ruler, 'line.ruler-line');
-		const dataPointElements: GenericSvgSelection = svg.selectAll(
-			'[role=graphics-symbol]'
-		);
-
-		const pointsWithinLine = displayData
-			.map((d) => ({
-				domainValue: this.services.cartesianScales.getDomainValue(d),
-				originalData: d,
-			}))
-			.filter((d) =>
-				pointIsWithinThreshold(d.domainValue, mouseCoordinate)
-			);
-
-		if (
-			this.pointsWithinLine &&
-			pointsWithinLine.length === this.pointsWithinLine.length &&
-			pointsWithinLine.map((point) => point.domainValue).join() ===
-				this.pointsWithinLine.map((point) => point.domainValue).join()
-		) {
-			this.pointsWithinLine = pointsWithinLine;
-			return this.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-				mousePosition: [x, y],
-			});
-		}
-
-		this.pointsWithinLine = pointsWithinLine;
-
-		/**
-		 * Find matches, reduce is used instead of filter
-		 * to only get elements which belong to the same axis coordinate
-		 */
-		const dataPointsMatchingRulerLine: {
-			domainValue: number;
-			originalData: any;
-		}[] = this.pointsWithinLine.reduce((accum, currentValue) => {
-			if (accum.length === 0) {
-				accum.push(currentValue);
-				return accum;
-			}
-
-			// store the first element of the accumulator array to compare it with current element being processed
-			const sampleAccumValue = accum[0].domainValue;
-
-			const distanceToCurrentValue = Math.abs(
-				mouseCoordinate - currentValue.domainValue
-			);
-			const distanceToAccumValue = Math.abs(
-				mouseCoordinate - sampleAccumValue
-			);
-
-			if (distanceToCurrentValue > distanceToAccumValue) {
-				// if distance with current value is bigger than already existing value in the accumulator, skip current iteration
-				return accum;
-			} else if (distanceToCurrentValue < distanceToAccumValue) {
-				// currentValue data point is closer to mouse inside the threshold area, so reinstantiate array
-				accum = [currentValue];
-			} else {
-				// currentValue is equal to already stored values, which means there's another match on the same coordinate
-				accum.push(currentValue);
-			}
-
-			return accum;
-		}, []);
-
-		// some data point match
-		if (dataPointsMatchingRulerLine.length > 0) {
-			const tooltipData = dataPointsMatchingRulerLine
-				.map((d) => d.originalData)
-				.filter((d) => {
-					const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier(
-						d
-					);
-					const value = d[rangeIdentifier];
-					return value !== null && value !== undefined;
-				});
-
-			// get elements on which we should trigger mouse events
-			const domainValuesMatchingRulerLine = dataPointsMatchingRulerLine.map(
-				(d) => d.domainValue
-			);
-			const elementsToHighlight = dataPointElements.filter((d) => {
-				const domainValue = this.services.cartesianScales.getDomainValue(
-					d
-				);
-				return domainValuesMatchingRulerLine.includes(domainValue);
-			});
-
-			/** 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.elementsToHighlight &&
-				this.elementsToHighlight.size() > 0 &&
-				!Tools.isEqual(this.elementsToHighlight, elementsToHighlight)
-			) {
-				this.hideRuler();
-			}
-
-			elementsToHighlight.dispatch('mouseover');
-
-			// set current hovered elements
-			this.elementsToHighlight = elementsToHighlight;
-
-			this.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-				mousePosition: [x, y],
-				hoveredElement: rulerLine,
-				data: this.formatTooltipData(tooltipData),
-			});
-
-			ruler.attr('opacity', 1);
-
-			// line snaps to matching point
-			const sampleMatch = dataPointsMatchingRulerLine[0];
-			if (orientation === 'horizontal') {
-				rulerLine
-					.attr('x1', yScaleStart)
-					.attr('x2', yScaleEnd)
-					.attr('y1', sampleMatch.domainValue)
-					.attr('y2', sampleMatch.domainValue);
-			} else {
-				rulerLine
-					.attr('y1', yScaleStart)
-					.attr('y2', yScaleEnd)
-					.attr('x1', sampleMatch.domainValue)
-					.attr('x2', sampleMatch.domainValue);
-			}
-		} else {
-			this.hideRuler();
-		}
-	}
-
-	hideRuler() {
-		const svg = this.parent;
-		const ruler = DOMUtils.appendOrSelect(svg, 'g.ruler');
-		const dataPointElements = svg.selectAll('[role=graphics-symbol]');
-
-		dataPointElements.dispatch('mouseout');
-		this.services.events.dispatchEvent(Events.Tooltip.HIDE);
-		ruler.attr('opacity', 0);
-	}
-
-	/**
-	 * Adds the listener on the X grid to trigger multiple point tooltips along the x axis.
-	 */
-	addBackdropEventListeners() {
-		this.isEventListenerAdded = true;
-
-		const self = this;
-
-		const holder = this.services.domUtils.getHolder();
-
-		const displayData = this.model.getDisplayData();
-
-		let mouseMoveCallback = function (event) {
-			const pos = pointer(event, self.parent.node());
-
-			self.showRuler(event, pos);
-		};
-
-		// Debounce mouseMoveCallback if there are more than 100 datapoints
-		if (displayData.length > 100) {
-			const debounceThreshold = (displayData.length % 50) * 12.5;
-
-			mouseMoveCallback = Tools.debounceWithD3MousePosition(
-				function (event) {
-					const { mousePosition } = this;
-					self.showRuler(event, mousePosition);
-				},
-				debounceThreshold,
-				holder
-			);
-		}
-
-		this.backdrop
-			.on('mousemove mouseover', mouseMoveCallback)
-			.on('mouseout', this.hideRuler.bind(this));
-	}
-
-	drawBackdrop() {
-		const svg = this.parent;
-
-		// Get height from the grid
-		this.backdrop = DOMUtils.appendOrSelect(svg, 'svg.chart-grid-backdrop');
-	}
-}