@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/graphs/histogram.ts

@@ -1,263 +0,0 @@
-// Internal Imports
-import { Tools } from '../../tools';
-import {
-	Roles,
-	Events,
-	CartesianOrientations,
-	ColorClassNameTypes,
-	RenderTypes,
-} from '../../interfaces';
-import { Component } from '../component';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-import { get } from 'lodash-es';
-
-export class Histogram extends Component {
-	type = 'histogram';
-	renderType = RenderTypes.SVG;
-
-	init() {
-		const eventsFragment = this.services.events;
-
-		// Highlight correct circle on legend item hovers
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-
-		// Un-highlight circles on legend item mouseouts
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate: boolean) {
-		// Grab container SVG
-		const svg = this.getComponentContainer();
-
-		// Chart options mixed with the internal configurations
-		const options = this.model.getOptions();
-		const { groupIdentifier } = options;
-		const { groupMapsTo } = options.data;
-
-		const binnedStackedData = this.model.getBinnedStackedData();
-
-		const x = this.services.cartesianScales.getMainXScale();
-
-		// Update data on all bar groups
-		const barGroups = svg
-			.selectAll('g.bars')
-			.data(binnedStackedData, (d) => get(d, `0.${groupMapsTo}`));
-
-		barGroups.exit().attr('opacity', 0).remove();
-
-		// Add bar groups that need to be introduced
-		barGroups
-			.enter()
-			.append('g')
-			.classed('bars', true)
-			.attr('role', Roles.GROUP);
-
-		// Update data on all bars
-		const bars = svg
-			.selectAll('g.bars')
-			.selectAll('path.bar')
-			.data((data) => data);
-
-		// Remove bars that need to be removed
-		bars.exit().remove();
-
-		bars.enter()
-			.append('path')
-			.merge(bars)
-			.classed('bar', true)
-			.attr(groupIdentifier, (d, i) => i)
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'histogram-bar-update-enter',
-					animate,
-				})
-			)
-			.attr('class', (d) =>
-				this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.FILL],
-					dataGroupName: d[groupMapsTo],
-					originalClassName: 'bar',
-				})
-			)
-			.style('fill', (d) => this.model.getFillColor(d[groupMapsTo]))
-			.attr('d', (d, i) => {
-				const bin = get(d, 'data');
-
-				if (!bin) {
-					return;
-				}
-
-				/*
-				 * Orientation support for horizontal/vertical bar charts
-				 * Determine coordinates needed for a vertical set of paths
-				 * to draw the bars needed, and pass those coordinates down to
-				 * generateSVGPathString() to decide whether it needs to flip them
-				 */
-				const barWidth = x(bin.x1) - x(bin.x0) - 1;
-				const x0 = this.services.cartesianScales.getDomainValue(
-					bin.x0,
-					i
-				);
-				const x1 = x0 + barWidth;
-
-				const y0 = this.services.cartesianScales.getRangeValue(d[0], i);
-				let y1 = this.services.cartesianScales.getRangeValue(d[1], i);
-
-				// Add the divider gap
-				if (
-					Math.abs(y1 - y0) > 0 &&
-					Math.abs(y1 - y0) > options.bars.dividerSize
-				) {
-					if (
-						this.services.cartesianScales.getOrientation() ===
-						CartesianOrientations.VERTICAL
-					) {
-						y1 += 1;
-					} else {
-						y1 -= 1;
-					}
-				}
-
-				return Tools.generateSVGPathString(
-					{ x0, x1, y0, y1 },
-					this.services.cartesianScales.getOrientation()
-				);
-			})
-			.attr('opacity', 1)
-			// a11y
-			.attr('role', Roles.GRAPHICS_SYMBOL)
-			.attr('aria-roledescription', 'bar')
-			.attr('aria-label', (d) =>
-				Tools.getProperty(d, 'data', d[groupMapsTo])
-			);
-
-		// Add event listeners for the above elements
-		this.addEventListeners();
-	}
-
-	// Highlight elements that match the hovered legend item
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		this.parent
-			.selectAll('path.bar')
-			.transition('legend-hover-bar')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-bar',
-				})
-			)
-			.attr('opacity', (d) =>
-				d[groupMapsTo] !== hoveredElement.datum()['name'] ? 0.3 : 1
-			);
-	};
-
-	// Un-highlight all elements
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('path.bar')
-			.transition('legend-mouseout-bar')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-bar',
-				})
-			)
-			.attr('opacity', 1);
-	};
-
-	addEventListeners() {
-		const options = this.model.getOptions();
-		const { groupMapsTo } = options.data;
-
-		const self = this;
-		this.parent
-			.selectAll('path.bar')
-			.on('mouseover', function (event, datum) {
-				const hoveredElement = select(this);
-
-				hoveredElement.classed('hovered', true);
-
-				const x0 = parseFloat(get(datum, 'data.x0'));
-				const x1 = parseFloat(get(datum, 'data.x1'));
-
-				const rangeAxisPosition = self.services.cartesianScales.getRangeAxisPosition();
-				const rangeScaleLabel = self.services.cartesianScales.getScaleLabel(
-					rangeAxisPosition
-				);
-
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement,
-					items: [
-						{
-							label: get(options, 'bins.rangeLabel') || 'Range',
-							value: `${x0} – ${x1}`,
-						},
-						{
-							label: options.tooltip.groupLabel || 'Group',
-							value: datum[groupMapsTo],
-							class: self.model.getColorClassName({
-								classNameTypes: [ColorClassNameTypes.TOOLTIP],
-								dataGroupName: datum[groupMapsTo],
-							}),
-						},
-						{
-							label: rangeScaleLabel,
-							value: get(datum, `data.${datum[groupMapsTo]}`),
-						},
-					],
-				});
-			})
-			.on('mousemove', function (event, datum) {
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-					event,
-				});
-			})
-			.on('mouseout', function (event, datum) {
-				const hoveredElement = select(this);
-
-				// Select all same group elements
-				hoveredElement.classed('hovered', false);
-
-				// Hide tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.HIDE);
-			});
-	}
-
-	destroy() {
-		// Remove event listeners
-		this.parent
-			.selectAll('path.bar')
-			.on('mouseover', null)
-			.on('mousemove', null)
-			.on('mouseout', null);
-
-		// Remove legend listeners
-		const eventsFragment = this.services.events;
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-}

package/src/components/graphs/line.ts

@@ -1,203 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import * as Configuration from '../../configuration';
-import {
-	Roles,
-	Events,
-	ColorClassNameTypes,
-	RenderTypes,
-} from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { line } from 'd3-shape';
-
-export class Line extends Component {
-	type = 'line';
-	renderType = RenderTypes.SVG;
-
-	init() {
-		const { events } = this.services;
-		// Highlight correct line legend item hovers
-		events.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		// Un-highlight lines on legend item mouseouts
-		events.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate = true) {
-		const svg = this.getComponentContainer({ withinChartClip: true });
-		const { cartesianScales, curves } = this.services;
-
-		const getDomainValue = (d, i) => cartesianScales.getDomainValue(d, i);
-		const getRangeValue = (d, i) => cartesianScales.getRangeValue(d, i);
-		const [
-			getXValue,
-			getYValue,
-		] = Tools.flipDomainAndRangeBasedOnOrientation(
-			getDomainValue,
-			getRangeValue,
-			cartesianScales.getOrientation()
-		);
-		const options = this.getOptions();
-
-		// D3 line generator function
-		const lineGenerator = line()
-			.x(getXValue)
-			.y(getYValue)
-			.curve(curves.getD3Curve())
-			.defined((datum: any, i) => {
-				const rangeIdentifier = cartesianScales.getRangeIdentifier(
-					datum
-				);
-				const value = datum[rangeIdentifier];
-				if (value === null || value === undefined) {
-					return false;
-				}
-				return true;
-			});
-
-		let data = [];
-		if (this.configs.stacked) {
-			const percentage = Object.keys(options.axes).some(
-				(axis) => options.axes[axis].percentage
-			);
-			const { groupMapsTo } = options.data;
-			const stackedData = this.model.getStackedData({
-				groups: this.configs.groups,
-				percentage,
-			});
-
-			data = stackedData.map((d) => {
-				const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(
-					d
-				);
-				const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier(
-					d
-				);
-				return {
-					name: Tools.getProperty(d, 0, groupMapsTo),
-					data: d.map((datum) => ({
-						[domainIdentifier]: datum.data.sharedStackKey,
-						[groupMapsTo]: datum[groupMapsTo],
-						[rangeIdentifier]: datum[1],
-					})),
-					hidden: !Tools.some(d, (datum) => datum[0] !== datum[1]),
-				};
-			});
-		} else {
-			data = this.model.getGroupedData(this.configs.groups);
-		}
-
-		// Update the bound data on lines
-		const lines = svg
-			.selectAll('path.line')
-			.data(data, (group) => group.name);
-
-		// Remove elements that need to be exited
-		// We need exit at the top here to make sure that
-		// Data filters are processed before entering new elements
-		// Or updating existing ones
-		lines.exit().attr('opacity', 0).remove();
-
-		// Add lines that need to be introduced
-		const enteringLines = lines
-			.enter()
-			.append('path')
-			.classed('line', true)
-			.attr('opacity', 0);
-
-		// Apply styles and datum
-		enteringLines
-			.merge(lines)
-			.data(data, (group) => group.name)
-			.attr('class', (group) =>
-				this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.STROKE],
-					dataGroupName: group.name,
-					originalClassName: 'line',
-				})
-			)
-			.style('stroke', (group) => this.model.getStrokeColor(group.name))
-			// a11y
-			.attr('role', Roles.GRAPHICS_SYMBOL)
-			.attr('aria-roledescription', 'line')
-			.attr('aria-label', (group) => {
-				const { data: groupData } = group;
-				return groupData
-					.map((datum) => {
-						const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier(
-							datum
-						);
-						return datum[rangeIdentifier];
-					})
-					.join(',');
-			})
-			// Transition
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'line-update-enter',
-					animate,
-				})
-			)
-			.attr('opacity', (d) => (d.hidden ? 0 : 1))
-			.attr('d', (group) => {
-				const { data: groupData } = group;
-				return lineGenerator(groupData);
-			});
-	}
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		this.parent
-			.selectAll('path.line')
-			.transition('legend-hover-line')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-line',
-				})
-			)
-			.attr('opacity', (group) => {
-				if (group.name !== hoveredElement.datum()['name']) {
-					return Configuration.lines.opacity.unselected;
-				}
-
-				return Configuration.lines.opacity.selected;
-			});
-	};
-
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('path.line')
-			.transition('legend-mouseout-line')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-line',
-				})
-			)
-			.attr('opacity', Configuration.lines.opacity.selected);
-	};
-
-	destroy() {
-		// Remove legend listeners
-		const eventsFragment = this.services.events;
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-}

package/src/components/graphs/lollipop.ts

@@ -1,212 +0,0 @@
-// Internal Imports
-import { Scatter } from './scatter';
-import { Tools } from '../../tools';
-import {
-	CartesianOrientations,
-	ColorClassNameTypes,
-	Events,
-	RenderTypes,
-} from '../../interfaces';
-import * as Configuration from '../../configuration';
-
-export class Lollipop extends Scatter {
-	type = 'lollipop';
-	renderType = RenderTypes.SVG;
-
-	init() {
-		const { events } = this.services;
-		// Highlight correct line legend item hovers
-		events.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		// Un-highlight lines on legend item mouseouts
-		events.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate: boolean) {
-		// Grab container SVG
-		const svg = this.getComponentContainer({ withinChartClip: true });
-
-		const options = this.model.getOptions();
-
-		const { groupMapsTo } = options.data;
-
-		const { cartesianScales } = this.services;
-		const mainXScale = cartesianScales.getMainXScale();
-		const mainYScale = cartesianScales.getMainYScale();
-		const domainIdentifier = cartesianScales.getDomainIdentifier();
-
-		const getDomainValue = (d, i) => cartesianScales.getDomainValue(d, i);
-		const getRangeValue = (d, i) => cartesianScales.getRangeValue(d, i);
-		const orientation = cartesianScales.getOrientation();
-		const [
-			getXValue,
-			getYValue,
-		] = Tools.flipDomainAndRangeBasedOnOrientation(
-			getDomainValue,
-			getRangeValue,
-			orientation
-		);
-
-		// Update data on lines
-		const lines = svg
-			.selectAll('line.line')
-			.data(
-				this.getScatterData(),
-				(datum) => `${datum[groupMapsTo]}-${datum[domainIdentifier]}`
-			);
-
-		// Remove lines that are no longer needed
-		lines.exit().attr('opacity', 0).remove();
-
-		// Remove lines that need to be removed
-		const enteringLines = lines.enter().append('line').attr('opacity', 0);
-
-		const allLines = enteringLines
-			.merge(lines)
-			.classed('line', true)
-			.attr('class', (d) =>
-				this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.STROKE],
-					dataGroupName: d[groupMapsTo],
-					originalClassName: 'line',
-				})
-			)
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'lollipop-line-update-enter',
-					animate,
-				})
-			)
-			.style('stroke', (d) =>
-				this.model.getFillColor(d[groupMapsTo], d[domainIdentifier], d)
-			)
-			.attr('opacity', 1);
-
-		if (orientation === CartesianOrientations.HORIZONTAL) {
-			allLines
-				.attr('y1', getYValue)
-				.attr('y2', getYValue)
-				.attr('x1', mainXScale.range()[0])
-				.attr(
-					'x2',
-					(d, i) => (getXValue(d, i) as any) - options.points.radius
-				);
-		} else {
-			allLines
-				.attr('x1', getXValue)
-				.attr('x2', getXValue)
-				.attr('y1', mainYScale.range()[0])
-				.attr(
-					'y2',
-					(d, i) => (getYValue(d, i) as any) + options.points.radius
-				);
-		}
-
-		this.addScatterPointEventListeners();
-	}
-
-	// listen for when individual datapoints are hovered
-	addScatterPointEventListeners() {
-		// Highlight correct line associated when hovering on a scatter point
-		this.services.events.addEventListener(
-			Events.Scatter.SCATTER_MOUSEOVER,
-			this.handleScatterOnHover
-		);
-
-		// unbolden the line when not hovered on the lollipop scatter point
-		this.services.events.addEventListener(
-			Events.Scatter.SCATTER_MOUSEOUT,
-			this.handleScatterOnMouseOut
-		);
-	}
-
-	// on hover, bolden the line associated with the scatter
-	handleScatterOnHover = (event: CustomEvent) => {
-		const hoveredElement = event.detail;
-
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		this.parent.selectAll('line.line').attr('stroke-width', (d) => {
-			if (d[groupMapsTo] !== hoveredElement.datum[groupMapsTo]) {
-				return Configuration.lines.weight.unselected;
-			}
-			// apply selected weight
-			return Configuration.lines.weight.selected;
-		});
-	};
-
-	// on mouse out remove the stroke width assertion
-	handleScatterOnMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('line.line')
-			.attr('stroke-width', Configuration.lines.weight.unselected);
-	};
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		this.parent
-			.selectAll('line.line')
-			.transition('legend-hover-line')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-line',
-				})
-			)
-			.attr('opacity', (d) => {
-				if (d[groupMapsTo] !== hoveredElement.datum()['name']) {
-					return Configuration.lines.opacity.unselected;
-				}
-
-				return Configuration.lines.opacity.selected;
-			});
-	};
-
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('line.line')
-			.transition('legend-mouseout-line')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-line',
-				})
-			)
-			.attr('opacity', Configuration.lines.opacity.selected);
-	};
-
-	destroy() {
-		// Remove legend listeners
-		const eventsFragment = this.services.events;
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		eventsFragment.removeEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-
-		// remove scatter listeners
-		eventsFragment.removeEventListener(
-			Events.Scatter.SCATTER_MOUSEOVER,
-			this.handleScatterOnHover
-		);
-		eventsFragment.removeEventListener(
-			Events.Scatter.SCATTER_MOUSEOUT,
-			this.handleScatterOnMouseOut
-		);
-	}
-}