@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/component.ts

@@ -1,163 +0,0 @@
-// Internal Imports
-import { ChartModel } from '../model/model';
-import { DOMUtils } from '../services';
-import { RenderTypes } from '../interfaces';
-import { Tools } from '../tools';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-// import the settings for the css prefix
-import { carbonPrefix } from "../configuration-non-customizable";
-
-export class Component {
-	public type: string;
-	public renderType = RenderTypes.HTML;
-
-	public id: string;
-
-	protected parent: any;
-
-	protected configs: any = {};
-
-	protected model: any;
-	protected services: any;
-
-	constructor(model: ChartModel, services: any, configs?: any) {
-		this.model = model;
-		this.services = services;
-
-		if (configs) {
-			this.configs = configs;
-			if (this.configs.id) {
-				const chartprefix = Tools.getProperty(
-					this.model.getOptions(),
-					'style',
-					'prefix'
-				);
-				this.id = `${chartprefix}--${this.configs.id}`;
-			}
-		}
-
-		// Set parent element to shell SVG if no parent exists for component
-		if (!this.parent) {
-			this.setParent(select(this.services.domUtils.getMainContainer()));
-		}
-	}
-
-	init() {
-		// do nothing.
-	}
-
-	render(animate = true) {
-		console.error('render() method is not implemented');
-	}
-
-	destroy() {
-		// do nothing.
-	}
-
-	// Used to pass down information to the components
-	setModel(newObj) {
-		this.model = newObj;
-	}
-
-	// Used to pass down information to the components
-	setServices(newObj) {
-		this.services = newObj;
-	}
-
-	setParent(parent) {
-		const oldParent = this.parent;
-		this.parent = parent;
-
-		if (oldParent && oldParent.node() === parent.node()) {
-			return;
-		}
-
-		if (this.type) {
-			const chartprefix = Tools.getProperty(
-				this.model.getOptions(),
-				'style',
-				'prefix'
-			);
-			this.parent.classed(
-				`${carbonPrefix}--${chartprefix}--${this.type}`,
-				true
-			);
-
-			if (oldParent) {
-				oldParent.classed(
-					`${carbonPrefix}--${chartprefix}--${this.type}`,
-					false
-				);
-			}
-		}
-	}
-
-	getParent() {
-		return this.parent;
-	}
-
-	getComponentContainer(configs = { withinChartClip: false }) {
-		if (this.type) {
-			const chartprefix = Tools.getProperty(
-				this.model.getOptions(),
-				'style',
-				'prefix'
-			);
-
-			const idSelector = this.id ? `#${this.id}` : '';
-			const container = DOMUtils.appendOrSelect(
-				this.parent,
-				`${
-					this.renderType === RenderTypes.SVG ? 'svg' : 'div'
-				}${idSelector}.${carbonPrefix}--${chartprefix}--${this.type}`
-			);
-
-			if (configs.withinChartClip) {
-				// get unique chartClipId int this chart from model
-				const chartClipId = this.model.get('chartClipId');
-
-				if (chartClipId) {
-					const chartClipSelection = select(`#${chartClipId}`);
-					const chartClipRectSelection = chartClipSelection.select(
-						'rect'
-					);
-
-					/*
-					 * these checks are needed because of a chrome bug
-					 * related to the rendering of the clip path
-					 */
-					if (
-						chartClipRectSelection.size() !== 0 &&
-						parseFloat(chartClipRectSelection.attr('height')) > 0
-					) {
-						container.attr('clip-path', `url(#${chartClipId})`);
-					}
-				}
-			}
-
-			return container.attr('width', '100%').attr('height', '100%');
-		}
-
-		return this.parent;
-	}
-
-	/**
-	 * graphs used in combo charts share a model with global options but can receive their own local options.
-	 * this function retrieves the global options and merges it with any options passed into this
-	 * component's config.options object.
-	 */
-	getOptions() {
-		if (this.configs.options) {
-			const options = Tools.merge(
-				{},
-				this.model.getOptions(),
-				this.configs.options
-			);
-			return options;
-		}
-		return this.model.getOptions();
-	}
-}

package/src/components/diagrams/buildPaths.ts

@@ -1,82 +0,0 @@
-import { path as d3Path } from 'd3-path';
-
-/**
- * Returns a path string for a straight path
- * @param  {Object} source - The source coordinates
- * @param  {Number} source.x - The source's x coordinate
- * @param  {Number} source.y - The source's y coordinate
- * @param  {Object} target - The target coordinates
- * @param  {Number} target.x - The target's x coordinate
- * @param  {Number} target.y - The target's y coordinate
- * @return {String} The path string
- */
-const buildStraightPathString = (source, target) => {
-	const sx = source.x;
-	const sy = source.y;
-	const tx = target.x;
-	const ty = target.y;
-
-	const path = d3Path();
-
-	path.moveTo(sx, sy);
-	path.lineTo(tx, ty);
-
-	return path.toString();
-};
-
-/**
- * Returns a path string for an elbow path with a bend point
- * @param  {Object} source - The source coordinates
- * @param  {Number} source.x - The source's x coordinate
- * @param  {Number} source.y - The source's y coordinate
- * @param  {Object} target - The target coordinates
- * @param  {Number} target.x - The target's x coordinate
- * @param  {Number} target.y - The target's y coordinate
- * @param  {Number} percent - Where the bend point should appear between the source and target
- * @return {String} The path string
- */
-const buildElbowPathString = (source, target, percent = 0.5) => {
-	const sx = source.x;
-	const sy = source.y;
-	const tx = target.x;
-	const ty = target.y;
-
-	const path = d3Path();
-
-	path.moveTo(sx, sy);
-	path.lineTo(sx + (tx - sx) * percent, sy);
-	path.lineTo(sx + (tx - sx) * percent, ty);
-	path.lineTo(tx, ty);
-
-	return path.toString();
-};
-
-/**
- * Returns a path string for an path with a custom bezier curve
- * @param  {Object} source - The source coordinates
- * @param  {Number} source.x - The source's x coordinate
- * @param  {Number} source.y - The source's y coordinate
- * @param  {Object} target - The target coordinates
- * @param  {Number} target.x - The target's x coordinate
- * @param  {Number} target.y - The target's y coordinate
- * @param  {Number} cpx1 - X coordinate for the first control point
- * @param  {Number} cpy1 - Y coordinate for the first control point
- * @param  {Number} cpx2 - X coordinate for the second control point
- * @param  {Number} cpy1 - Y coordinate for the second control point
- * @return {String} The path string
- */
-const buildBezierPathString = (source, target, cpx1, cpy1, cpx2, cpy2) => {
-	const sx = source.x;
-	const sy = source.y;
-	const tx = target.x;
-	const ty = target.y;
-
-	const path = d3Path();
-
-	path.moveTo(sx, sy);
-	path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, tx, ty);
-
-	return path.toString();
-};
-
-export { buildStraightPathString, buildElbowPathString, buildBezierPathString };

package/src/components/diagrams/markerDefinitions.ts

@@ -1,43 +0,0 @@
-const arrowLeft = {
-	d: 'M7 0v8L0 4z',
-	height: 8,
-	width: 7.5,
-	id: 'arrowLeft',
-};
-
-const arrowRight = {
-	d: 'M0 0v8l7-4z',
-	height: 8,
-	width: 7.5,
-	id: 'arrowRight',
-};
-
-const circle = {
-	d: 'M5.32 9.513a4.75 4.75 0 100-9.5 4.75 4.75 0 000 9.5z',
-	height: 10,
-	width: 10,
-	id: 'circle',
-};
-
-const diamond = {
-	d: 'M5.03517654-1e-7l4.99999996 5-4.99999996 5-5-5L2.4517844 2.58339204z',
-	height: 10,
-	width: 10,
-	id: 'diamond',
-};
-
-const square = {
-	d: 'M0 .44974747h8v8H0v-3.6830331z',
-	height: 9,
-	width: 8,
-	id: 'square',
-};
-
-const tee = {
-	d: 'M0 0h1.5v8H0z',
-	height: 8,
-	width: 2,
-	id: 'tee',
-};
-
-export { arrowLeft, arrowRight, square, diamond, circle, tee };

package/src/components/essentials/canvas-chart-clip.ts

@@ -1,38 +0,0 @@
-// Internal Imports
-import { ChartClip } from './../axes/chart-clip';
-import { DOMUtils } from './../../services';
-
-// This class is used to create the clipPath to clip the chart components
-// It's necessary for zoom in/out behavior
-export class CanvasChartClip extends ChartClip {
-	type = 'canvas-chart-clip';
-
-	// Give every chart-clip a distinct ID
-	// so they don't interfere each other in a page with multiple charts
-	chartClipId =
-		'canvas-chart-clip-id-' + Math.floor(Math.random() * 99999999999);
-
-	createClipPath() {
-		const svg = this.parent;
-		const { width, height } = DOMUtils.getSVGElementSize(this.parent, {
-			useAttrs: true,
-		});
-
-		this.chartClipPath = DOMUtils.appendOrSelect(
-			svg,
-			`clipPath.${this.type}`
-		).attr('id', this.chartClipId);
-		const clipRect = DOMUtils.appendOrSelect(
-			this.chartClipPath,
-			`rect.${this.type}`
-		);
-
-		clipRect
-			.attr('x', 0)
-			.attr('y', 0)
-			.attr('width', width)
-			.attr('height', height);
-
-		this.chartClipPath.merge(clipRect).lower();
-	}
-}

package/src/components/essentials/color-scale-legend.ts

@@ -1,347 +0,0 @@
-// Internal Imports
-import { Tools } from '../../tools';
-import { ColorLegendType, Events, RenderTypes } from '../../interfaces';
-import * as Configuration from '../../configuration';
-import { Legend } from './legend';
-import { DOMUtils } from '../../services';
-
-// D3 imports
-import { axisBottom } from 'd3-axis';
-import { scaleBand, scaleLinear } from 'd3-scale';
-import { interpolateNumber, quantize } from 'd3-interpolate';
-
-export class ColorScaleLegend extends Legend {
-	type = 'color-legend';
-	renderType = RenderTypes.SVG;
-
-	private gradient_id =
-		'gradient-id-' + Math.floor(Math.random() * 99999999999);
-
-	init() {
-		const eventsFragment = this.services.events;
-
-		// Highlight correct circle on legend item hovers
-		eventsFragment.addEventListener(
-			Events.Axis.RENDER_COMPLETE,
-			this.handleAxisCompleteEvent
-		);
-	}
-
-	// Position legend after axis have rendered
-	handleAxisCompleteEvent = (event: CustomEvent) => {
-		const svg = this.getComponentContainer();
-
-		const { width } = DOMUtils.getSVGElementSize(svg, {
-			useAttrs: true,
-		});
-
-		const isDataLoading = Tools.getProperty(
-			this.getOptions(),
-			'data',
-			'loading'
-		);
-
-		if (width > Configuration.legend.color.barWidth && !isDataLoading) {
-			const title = Tools.getProperty(
-				this.getOptions(),
-				'heatmap',
-				'colorLegend',
-				'title'
-			);
-
-			const { cartesianScales } = this.services;
-
-			// Get axis width & start/end positions
-			const mainXScale = cartesianScales.getMainXScale();
-			const xDimensions = mainXScale.range();
-
-			// Align legend with the axis
-			if (xDimensions[0] > 1) {
-				svg.select('g.legend').attr(
-					'transform',
-					`translate(${xDimensions[0]}, 0)`
-				);
-
-				if (title) {
-					const {
-						width: textWidth,
-					} = DOMUtils.getSVGElementSize(
-						svg.select('g.legend-title').select('text'),
-						{ useBBox: true }
-					);
-
-					// D3 moves the LEFT y-axis labels by 9
-					const availableSpace = xDimensions[0] - textWidth - 9;
-
-					// If space is available, align the label with the axis labels
-					if (availableSpace > 1) {
-						svg.select('g.legend-title').attr(
-							'transform',
-							`translate(${availableSpace}, 0)`
-						);
-					} else {
-						// Move the legend down by 16 pixels to display legend text on top
-						svg.select('g.legend').attr(
-							'transform',
-							`translate(${xDimensions[0]}, 16)`
-						);
-
-						// Align legend title with start of axis
-						svg.select('g.legend-title').attr(
-							'transform',
-							`translate(${xDimensions[0]}, 0)`
-						);
-					}
-				}
-			}
-		} else {
-			// Default state
-			svg.select('g.legend-title').attr('transform', `translate(0, 0)`);
-		}
-	};
-
-	render(animate = false) {
-		const options = this.getOptions();
-		const svg = this.getComponentContainer();
-		const { width } = DOMUtils.getSVGElementSize(svg, {
-			useAttrs: true,
-		});
-
-		const customColors = Tools.getProperty(
-			options,
-			'color',
-			'gradient',
-			'colors'
-		);
-
-		const colorScaleType = Tools.getProperty(
-			options,
-			'heatmap',
-			'colorLegend',
-			'type'
-		);
-
-		let colorPairingOption = Tools.getProperty(
-			options,
-			'color',
-			'pairing',
-			'option'
-		);
-
-		const title = Tools.getProperty(
-			options,
-			'heatmap',
-			'colorLegend',
-			'title'
-		);
-
-		// Clear DOM if loading
-		const isDataLoading = Tools.getProperty(
-			this.getOptions(),
-			'data',
-			'loading'
-		);
-
-		if (isDataLoading) {
-			svg.html('');
-			return;
-		}
-
-		const customColorsEnabled = !Tools.isEmpty(customColors);
-		const domain = this.model.getValueDomain();
-
-		const useDefaultBarWidth = !(
-			width <= Configuration.legend.color.barWidth
-		);
-		const barWidth = useDefaultBarWidth
-			? Configuration.legend.color.barWidth
-			: width;
-
-		const legendGroupElement = DOMUtils.appendOrSelect(svg, 'g.legend');
-		const axisElement = DOMUtils.appendOrSelect(
-			legendGroupElement,
-			'g.legend-axis'
-		);
-
-		// Render title if it exists
-		if (title) {
-			const legendTitleGroup = DOMUtils.appendOrSelect(
-				svg,
-				'g.legend-title'
-			);
-			const legendTitle = DOMUtils.appendOrSelect(
-				legendTitleGroup,
-				'text'
-			);
-			legendTitle.text(title).attr('dy', '0.7em');
-
-			// Move the legend down by 16 pixels to display legend text on top
-			legendGroupElement.attr('transform', `translate(0, 16)`);
-		}
-
-		// If domain consists of negative and positive values, use diverging palettes
-		const colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
-
-		// Use default color pairing options if not in defined range
-		if (
-			colorPairingOption < 1 &&
-			colorPairingOption > 4 &&
-			colorScheme === 'mono'
-		) {
-			colorPairingOption = 1;
-		} else if (
-			colorPairingOption < 1 &&
-			colorPairingOption > 2 &&
-			colorScheme === 'diverge'
-		) {
-			colorPairingOption = 1;
-		}
-
-		let colorPairing = [];
-		// Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette
-		let colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;
-
-		if (!customColorsEnabled) {
-			// Add class names to list and the amount based on the color scheme
-			for (let i = 1; i < colorGroupingLength + 1; i++) {
-				colorPairing.push(
-					colorScaleType === ColorLegendType.LINEAR
-						? `stop-color-${colorScheme}-${colorPairingOption}-${i}`
-						: `fill-${colorScheme}-${colorPairingOption}-${i}`
-				);
-			}
-		} else {
-			// Use custom colors
-			colorPairing = customColors;
-		}
-
-		// Generate equal chunks between range to act as ticks
-		const interpolator = interpolateNumber(domain[0], domain[1]);
-		const quant = quantize(interpolator, 3);
-
-		// Create scale & ticks
-		const linearScale = scaleLinear().domain(domain).range([0, barWidth]);
-
-		const legendAxis = axisBottom(linearScale)
-			.tickSize(0)
-			.tickValues(quant);
-
-		switch (colorScaleType) {
-			case ColorLegendType.LINEAR:
-				this.drawLinear(colorPairing, legendGroupElement, barWidth);
-				break;
-			case ColorLegendType.QUANTIZE:
-				const rangeStart = this.drawQuantize(
-					colorPairing,
-					colorScheme,
-					customColorsEnabled,
-					legendGroupElement,
-					barWidth
-				);
-				// Using range provided by drawQuantize for alignment purposes
-				linearScale.range([rangeStart, barWidth]);
-				break;
-			default:
-				throw Error('Entered color legend type is not supported.');
-		}
-
-		// Align axes at the bottom of the rectangle and delete the domain line
-		axisElement
-			.attr(
-				'transform',
-				`translate(0,${Configuration.legend.color.axisYTranslation})`
-			)
-			.call(legendAxis);
-
-		// Remove auto generated axis bottom line
-		axisElement.select('.domain').remove();
-
-		// Translate first/last axis tick if barWidth equals chart width
-		// Ensures text is not clipped when default bar width (300px) is not used
-		axisElement
-			.select('g.tick:last-of-type text')
-			.style('text-anchor', useDefaultBarWidth ? 'middle' : 'end');
-		axisElement
-			.select('g.tick:first-of-type text')
-			.style('text-anchor', useDefaultBarWidth ? 'middle' : 'start');
-	}
-
-	// Renders gradient legend
-	drawLinear(colorPairing, legendGroupElement, barWidth) {
-		const stopLengthPercentage = 100 / (colorPairing.length - 1);
-
-		// Generate the gradient
-		const linearGradient = DOMUtils.appendOrSelect(
-			legendGroupElement,
-			'linearGradient'
-		);
-		// Rendering gradient
-		linearGradient
-			.attr('id', `${this.gradient_id}-legend`)
-			.selectAll('stop')
-			.data(colorPairing)
-			.enter()
-			.append('stop')
-			.attr('offset', (_, i) => `${i * stopLengthPercentage}%`)
-			.attr('class', (_, i) => colorPairing[i])
-			.attr('stop-color', (d) => d);
-
-		// Create the legend container
-		const rectangle = DOMUtils.appendOrSelect(legendGroupElement, 'rect');
-		rectangle
-			.attr('width', barWidth)
-			.attr('height', Configuration.legend.color.barHeight)
-			.style('fill', `url(#${this.gradient_id}-legend)`);
-	}
-
-	/**
-	 * Renders quantized legend
-	 * @returns number (range start)
-	 */
-	drawQuantize(
-		colorPairing,
-		colorScheme,
-		customColorsEnabled,
-		legendGroupElement,
-		barWidth
-	) {
-		// If divergent && non-custom color, remove 0/white from being displayed
-		if (!customColorsEnabled && colorScheme === 'diverge') {
-			colorPairing.splice(colorPairing.length / 2, 1);
-		}
-
-		const colorScaleBand = scaleBand()
-			.domain(colorPairing)
-			.range([0, barWidth]);
-
-		// Render the quantized rectangles
-		const rectangle = DOMUtils.appendOrSelect(
-			legendGroupElement,
-			'g.quantized-rect'
-		);
-
-		rectangle
-			.selectAll('rect')
-			.data(colorScaleBand.domain())
-			.join('rect')
-			.attr('x', (d) => colorScaleBand(d))
-			.attr('y', 0)
-			.attr('width', Math.max(0, colorScaleBand.bandwidth() - 1))
-			.attr('height', Configuration.legend.color.barHeight)
-			.attr('class', (d) => d)
-			.attr('fill', (d) => d);
-
-		return (!customColorsEnabled && colorScheme) === 'mono'
-			? colorScaleBand.bandwidth() - 1
-			: 0;
-	}
-
-	destroy() {
-		// Remove legend listeners
-		const eventsFragment = this.services.events;
-		eventsFragment.removeEventListener(
-			Events.Axis.RENDER_COMPLETE,
-			this.handleAxisCompleteEvent
-		);
-	}
-}