@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/axes/chart-clip.ts

@@ -1,60 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { ChartModel } from '../../model/model';
-import { RenderTypes } from '../../interfaces';
-
-// This class is used to create the clipPath to clip the chart components
-// It's necessary for zoom in/out behavior
-export class ChartClip extends Component {
-	type = 'chart-clip';
-	renderType = RenderTypes.SVG;
-
-	// Give every chart-clip a distinct ID
-	// so they don't interfere each other in a page with multiple charts
-	chartClipId = 'chart-clip-id-' + Math.floor(Math.random() * 99999999999);
-
-	chartClipPath: any;
-
-	constructor(model: ChartModel, services: any, configs?: any) {
-		super(model, services, configs);
-		this.init();
-	}
-
-	init() {
-		// set unique chartClipId in this chart to model
-		this.model.set({ chartClipId: this.chartClipId }, { skipUpdate: true });
-	}
-
-	render(animate = true) {
-		// Create the clipPath
-		this.createClipPath();
-	}
-
-	createClipPath() {
-		const svg = this.parent;
-		const { cartesianScales } = this.services;
-		const mainXScale = cartesianScales.getMainXScale();
-		const mainYScale = cartesianScales.getMainYScale();
-
-		const [xScaleStart, xScaleEnd] = mainXScale.range();
-		const [yScaleEnd, yScaleStart] = mainYScale.range();
-
-		// Get height
-		this.chartClipPath = DOMUtils.appendOrSelect(
-			svg,
-			`clipPath.${this.type}`
-		).attr('id', this.chartClipId);
-		const clipRect = DOMUtils.appendOrSelect(
-			this.chartClipPath,
-			`rect.${this.type}`
-		);
-		clipRect
-			.attr('x', xScaleStart)
-			.attr('y', yScaleStart)
-			.attr('width', xScaleEnd - xScaleStart)
-			.attr('height', yScaleEnd - yScaleStart);
-
-		this.chartClipPath.merge(clipRect).lower();
-	}
-}

package/src/components/axes/grid-brush.ts

@@ -1,187 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { Events, RenderTypes, ScaleTypes } from '../../interfaces';
-import { DOMUtils } from '../../services';
-
-// D3 Imports
-import { brushX } from 'd3-brush';
-import { scaleTime } from 'd3-scale';
-// @ts-ignore
-// ts-ignore is needed because `@types/d3`
-// is missing the `pointer` function
-import { pointer } from 'd3-selection';
-
-// This class is used for handle brush events in chart
-export class ChartBrush extends Component {
-	static DASH_LENGTH = 4;
-
-	type = 'grid-brush';
-	renderType = RenderTypes.SVG;
-
-	selectionSelector = 'rect.selection'; // needs to match the class name in d3.brush
-
-	frontSelectionSelector = 'rect.frontSelection'; // needs to match the class name in _grid-brush.scss
-
-	render(animate = true) {
-		const svg = this.parent;
-
-		// use this area to display selection above all graphs
-		const frontSelectionArea = this.getComponentContainer();
-		const backdrop = DOMUtils.appendOrSelect(
-			svg,
-			'svg.chart-grid-backdrop'
-		);
-		// use this area to handle d3 brush events
-		const brushArea = DOMUtils.appendOrSelect(backdrop, `g.${this.type}`);
-
-		// set an id for rect.selection to be referred
-		const d3Selection = DOMUtils.appendOrSelect(
-			brushArea,
-			this.selectionSelector
-		);
-
-		const { width, height } = DOMUtils.getSVGElementSize(backdrop, {
-			useAttrs: true,
-		});
-
-		const { cartesianScales } = this.services;
-		const mainXScaleType = cartesianScales.getMainXScaleType();
-		const mainXScale = cartesianScales.getMainXScale();
-		const [xScaleStart, xScaleEnd] = mainXScale.range();
-		frontSelectionArea.attr('transform', `translate(${xScaleStart},0)`);
-		const frontSelection = DOMUtils.appendOrSelect(
-			frontSelectionArea,
-			this.frontSelectionSelector
-		);
-
-		if (mainXScale && mainXScaleType === ScaleTypes.TIME) {
-			// get current zoomDomain
-			let zoomDomain = this.model.get('zoomDomain');
-			if (zoomDomain === undefined) {
-				// default to full range with extended domain
-				zoomDomain = this.services.zoom.getDefaultZoomBarDomain();
-				if (zoomDomain) {
-					this.model.set(
-						{ zoomDomain: zoomDomain },
-						{ animate: false }
-					);
-				}
-			}
-
-			const updateSelectionDash = (selection) => {
-				// set end drag point to dash
-				const selectionWidth = selection[1] - selection[0];
-				let dashArray = '0,' + selectionWidth.toString(); // top (invisible)
-
-				// right
-				const dashCount = Math.floor(height / ChartBrush.DASH_LENGTH);
-				const totalRightDash = dashCount * ChartBrush.DASH_LENGTH;
-				for (let i = 0; i < dashCount; i++) {
-					dashArray += ',' + ChartBrush.DASH_LENGTH; // for each full length dash
-				}
-				dashArray += ',' + (height - totalRightDash); // for rest of the right height
-				// if dash count is even, one more ",0" is needed to make total right dash pattern even
-				if (dashCount % 2 === 1) {
-					dashArray += ',0';
-				}
-				dashArray += ',' + selectionWidth.toString(); // bottom (invisible)
-				dashArray += ',' + height.toString(); // left
-				frontSelection.attr('stroke-dasharray', dashArray);
-			};
-
-			const brushEventHandler = (event) => {
-				// selection range: [0, width]
-				const selection = event.selection;
-				if (selection === null || selection[0] === selection[1]) {
-					return;
-				}
-
-				// copy the d3 selection attrs to front selection element
-				frontSelection
-					.attr(
-						'x',
-						parseFloat(d3Selection.attr('x')) +
-							parseFloat(backdrop.attr('x'))
-					)
-					.attr('y', d3Selection.attr('y'))
-					.attr('width', d3Selection.attr('width'))
-					.attr('height', d3Selection.attr('height'))
-					.style('cursor', 'pointer')
-					.style('display', null);
-
-				updateSelectionDash(selection);
-			};
-
-			// assume max range is [0, width]
-			const updateZoomDomain = (startPoint, endPoint) => {
-				// create xScale based on current zoomDomain
-				const xScale = scaleTime().range([0, width]).domain(zoomDomain);
-
-				let newDomain = [
-					xScale.invert(startPoint),
-					xScale.invert(endPoint),
-				];
-				// if selected start time and end time are the same
-				// reset to default full range
-				if (newDomain[0].valueOf() === newDomain[1].valueOf()) {
-					// same as d3 behavior and zoom bar behavior: set to default full range
-					newDomain = this.services.zoom.getDefaultZoomBarDomain();
-				}
-
-				// only if zoomDomain needs update
-				if (
-					zoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
-					zoomDomain[1].valueOf() !== newDomain[1].valueOf()
-				) {
-					this.services.zoom.handleDomainChange(newDomain);
-				}
-			};
-
-			const brushed = (event) => {
-				// max selection range: [0, width]
-				const selection = event.selection;
-
-				if (selection !== null) {
-					// updateZoomDomain assumes max range is [0, width]
-					updateZoomDomain(selection[0], selection[1]);
-
-					// clear brush selection
-					brushArea.call(brush.move, null);
-					// hide frontSelection
-					frontSelection.style('display', 'none');
-				}
-			};
-			// leave some space to display selection strokes besides axis
-			const brush = brushX()
-				.extent([
-					[0, 0],
-					[width - 1, height],
-				])
-				.on('start brush end', brushEventHandler)
-				.on('end.brushed', brushed);
-
-			brushArea.call(brush);
-
-			const zoomRatio = this.services.zoom.getZoomRatio();
-			backdrop.on('click', function (event) {
-				if (event.shiftKey) {
-					const holder = this.services.domUtils.getHolder();
-
-					// clickedX range: [0, width]
-					const clickedX = pointer(brushArea.node(), holder)[0];
-
-					let leftPoint = clickedX - (width * zoomRatio) / 2;
-					if (leftPoint < 0) {
-						leftPoint = 0;
-					}
-					let rightPoint = clickedX + (width * zoomRatio) / 2;
-					if (rightPoint > width) {
-						rightPoint = width;
-					}
-					// updateZoomDomain assumes max range is [0, width]
-					updateZoomDomain(leftPoint, rightPoint);
-				}
-			});
-		}
-	}
-}

package/src/components/axes/grid.ts

@@ -1,309 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { Tools } from '../../tools';
-import { DOMUtils } from '../../services';
-import { RenderTypes } from '../../interfaces';
-
-// D3 Imports
-import { axisBottom, axisLeft } from 'd3-axis';
-
-import { transition } from 'd3-transition';
-
-export class Grid extends Component {
-	type = 'grid';
-	renderType = RenderTypes.SVG;
-
-	backdrop: any;
-
-	render(animate = true) {
-		const isXGridEnabled = Tools.getProperty(
-			this.getOptions(),
-			'grid',
-			'x',
-			'enabled'
-		);
-		const isYGridEnabled = Tools.getProperty(
-			this.getOptions(),
-			'grid',
-			'y',
-			'enabled'
-		);
-
-		// Draw the backdrop
-		this.drawBackdrop(isXGridEnabled, isYGridEnabled);
-
-		if (!isXGridEnabled && !isYGridEnabled) {
-			return;
-		}
-
-		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) {
-		const svg = this.parent;
-
-		const height = this.backdrop.attr('height');
-
-		const mainXScale = this.services.cartesianScales.getMainXScale();
-		const xGrid = axisBottom(mainXScale)
-			.tickSizeInner(-height)
-			.tickSizeOuter(0);
-
-		// if the main range axis has a custom domain, align the gridlines to the ticks
-		const alignToTicks = Tools.getProperty(
-			this.getOptions(),
-			'grid',
-			'x',
-			'alignWithAxisTicks'
-		);
-
-		if (alignToTicks) {
-			const mainXPosition = this.services.cartesianScales.getDomainAxisPosition();
-			const customDomain = Tools.getProperty(
-				this.getOptions(),
-				'axes',
-				mainXPosition,
-				'ticks',
-				'values'
-			);
-			// use custom domain if there is one
-			// otherwise d3 defaults to using one gridline per tick
-			if (customDomain) {
-				xGrid.tickValues(customDomain);
-			}
-		} else {
-			// Determine number of ticks
-			const numberOfTicks = Tools.getProperty(
-				this.getOptions(),
-				'grid',
-				'x',
-				'numberOfTicks'
-			);
-
-			xGrid.ticks(numberOfTicks);
-		}
-
-		const g = svg
-			.select('.x.grid')
-			.attr(
-				'transform',
-				`translate(${-this.backdrop.attr('x')}, ${height})`
-			);
-
-		if (animate) {
-			g.transition()
-				.call((t) =>
-					this.services.transitions.setupTransition({
-						transition: t,
-						name: 'grid-update',
-						animate,
-					})
-				)
-				.call(xGrid);
-		} else {
-			g.call(xGrid);
-		}
-
-		this.cleanGrid(g);
-	}
-
-	drawYGrid(animate: boolean) {
-		const svg = this.parent;
-		const width = this.backdrop.attr('width');
-
-		const mainYScale = this.services.cartesianScales.getMainYScale();
-		const yGrid = axisLeft(mainYScale)
-			.tickSizeInner(-width)
-			.tickSizeOuter(0);
-
-		// if the main range axis has a custom domain, align the gridlines to the ticks
-		const alignToTicks = Tools.getProperty(
-			this.getOptions(),
-			'grid',
-			'y',
-			'alignWithAxisTicks'
-		);
-
-		if (alignToTicks) {
-			const mainYPosition = this.services.cartesianScales.getRangeAxisPosition();
-
-			const customDomain = Tools.getProperty(
-				this.getOptions(),
-				'axes',
-				mainYPosition,
-				'ticks',
-				'values'
-			);
-
-			// use custom domain if there is one
-			// otherwise d3 defaults to using one gridline per tick
-			if (customDomain) {
-				yGrid.tickValues(customDomain);
-			}
-		} else {
-			// Determine number of ticks
-			const numberOfTicks = Tools.getProperty(
-				this.getOptions(),
-				'grid',
-				'y',
-				'numberOfTicks'
-			);
-
-			yGrid.ticks(numberOfTicks);
-		}
-
-		const g = svg
-			.select('.y.grid')
-			.attr('transform', `translate(0, ${-this.backdrop.attr('y')})`);
-
-		if (animate) {
-			g.transition()
-				.call((t) =>
-					this.services.transitions.setupTransition({
-						transition: t,
-						name: 'grid-update',
-						animate,
-					})
-				)
-				.call(yGrid);
-		} else {
-			g.call(yGrid);
-		}
-
-		this.cleanGrid(g);
-	}
-
-	/**
-	 * Returns the threshold for the gridline tooltips based on the mouse location.
-	 * Calculated based on the mouse position between the two closest gridlines or edges of chart.
-	 */
-	getGridlineThreshold(mousePos) {
-		// use the space between axis grid ticks to adjust the threshold for the tooltips
-		const svg = this.parent;
-
-		// sort in ascending x translation value order
-		const gridlinesX = svg
-			.selectAll('.x.grid .tick')
-			.nodes()
-			.sort((a, b) => {
-				return (
-					Number(Tools.getTranslationValues(a).tx) -
-					Number(Tools.getTranslationValues(b).tx)
-				);
-			});
-
-		// find the 2 gridlines on either side of the mouse
-		let floor = -1;
-		let ceiling;
-		if (!gridlinesX.length) {
-			return;
-		}
-
-		gridlinesX.forEach((line: HTMLElement, i: any) => {
-			if (mousePos[0] >= +Tools.getTranslationValues(line).tx) {
-				floor++;
-			}
-		});
-		ceiling = floor + 1 < gridlinesX.length ? floor + 1 : gridlinesX.length;
-
-		// get the 'step' between chart gridlines
-		const line1 = gridlinesX[floor];
-		const line2 = gridlinesX[ceiling];
-		let lineSpacing;
-
-		// if the mouse is on edge of charts (mouseX < first gridline || mouseX > last gridline)
-		// we can use the chart edge to determind the threshold for the gridlines
-		if (!line1) {
-			// we are between the first gridline and the chart edge
-			lineSpacing = +Tools.getTranslationValues(line2).tx;
-		} else if (!line2) {
-			// we need to use the chart right bounds in case there isnt a domain axis
-			const gridElement = svg.select('rect.chart-grid-backdrop').node();
-			const width = DOMUtils.getSVGElementSize(gridElement).width;
-
-			lineSpacing = width - +Tools.getTranslationValues(line1).tx;
-		} else {
-			// there are two gridlines to use
-			lineSpacing =
-				+Tools.getTranslationValues(line2).tx -
-				+Tools.getTranslationValues(line1).tx;
-		}
-		const { threshold } = this.getOptions().tooltip.gridline;
-		// return the threshold
-		return lineSpacing * threshold;
-	}
-
-	/**
-	 * Returns the active gridlines based on the gridline threshold and mouse position.
-	 * @param position mouse positon
-	 */
-	getActiveGridline(position) {
-		const userSpecifiedThreshold = Tools.getProperty(
-			this.getOptions,
-			'tooltip',
-			'gridline',
-			'threshold'
-		);
-		const threshold = userSpecifiedThreshold
-			? userSpecifiedThreshold
-			: this.getGridlineThreshold(position);
-		const svg = this.parent;
-
-		const xGridlines = svg.selectAll('.x.grid .tick').filter(function () {
-			const translations = Tools.getTranslationValues(this);
-
-			// threshold for when to display a gridline tooltip
-			const bounds = {
-				min: Number(translations.tx) - threshold,
-				max: Number(translations.tx) + threshold,
-			};
-
-			return bounds.min <= position[0] && position[0] <= bounds.max;
-		});
-
-		return xGridlines;
-	}
-
-	drawBackdrop(isXGridEnabled, isYGridEnabled) {
-		const svg = this.parent;
-
-		const mainXScale = this.services.cartesianScales.getMainXScale();
-		const mainYScale = this.services.cartesianScales.getMainYScale();
-
-		const [xScaleStart, xScaleEnd] = mainXScale.range();
-		const [yScaleEnd, yScaleStart] = mainYScale.range();
-
-		// Get height from the grid
-		this.backdrop = DOMUtils.appendOrSelect(svg, 'svg.chart-grid-backdrop');
-		const backdropRect = DOMUtils.appendOrSelect(
-			this.backdrop,
-			isXGridEnabled || isYGridEnabled
-				? 'rect.chart-grid-backdrop.stroked'
-				: 'rect.chart-grid-backdrop'
-		);
-
-		this.backdrop
-			.merge(backdropRect)
-			.attr('x', xScaleStart)
-			.attr('y', yScaleStart)
-			.attr('width', Math.abs(xScaleEnd - xScaleStart))
-			.attr('height', Math.abs(yScaleEnd - yScaleStart))
-			.lower();
-
-		backdropRect.attr('width', '100%').attr('height', '100%');
-	}
-
-	cleanGrid(g) {
-		// Remove extra elements
-		g.selectAll('text').remove();
-		g.select('.domain').remove();
-	}
-}