@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/graphs/bar-grouped.ts

@@ -1,369 +0,0 @@
-// Internal Imports
-import { Bar } from './bar';
-import { Tools } from '../../tools';
-import {
-	CartesianOrientations,
-	ColorClassNameTypes,
-	Events,
-	RenderTypes,
-	Roles,
-} from '../../interfaces';
-
-// D3 Imports
-import { select } from 'd3-selection';
-import { ScaleBand, scaleBand } from 'd3-scale';
-
-export class GroupedBar extends Bar {
-	type = 'grouped-bar';
-	renderType = RenderTypes.SVG;
-
-	groupScale: ScaleBand<any>;
-
-	padding = 5;
-
-	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) {
-		// Chart options mixed with the internal configurations
-		const displayData = this.model.getDisplayData(this.configs.groups);
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		// Get unique labels
-		this.setGroupScale();
-
-		// Grab container SVG
-		const svg = this.getComponentContainer({ withinChartClip: true });
-
-		const allDataLabels = Tools.removeArrayDuplicates(
-			displayData.map((datum) => {
-				const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(
-					datum
-				);
-
-				return datum[domainIdentifier] &&
-					typeof datum[domainIdentifier].toString === 'function'
-					? datum[domainIdentifier].toString()
-					: datum[domainIdentifier];
-			})
-		);
-
-		// Update data on bar groups
-		const barGroups = svg
-			.selectAll('g.bars')
-			.data(allDataLabels, (label) => label);
-
-		// Remove dot groups that need to be removed
-		barGroups.exit().attr('opacity', 0).remove();
-
-		// Add the bar groups that need to be introduced
-		const barGroupsEnter = barGroups
-			.enter()
-			.append('g')
-			.classed('bars', true)
-			.attr('role', Roles.GROUP)
-			.attr('data-name', 'bars');
-
-		// Update data on all bars
-		const allBarGroups = barGroupsEnter.merge(barGroups);
-
-		allBarGroups
-			// Transition
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'bar-group-update-enter',
-					animate,
-				})
-			)
-			.attr('transform', (label, i) => {
-				const scaleValue = this.services.cartesianScales.getDomainValue(
-					label,
-					i
-				);
-				const translateBy = scaleValue - this.getGroupWidth() / 2;
-				// const translateBy = scaleValue - this.getGroupWidth(null) / 2 + this.getBarWidth(null);
-
-				if (
-					this.services.cartesianScales.getOrientation() ===
-					CartesianOrientations.VERTICAL
-				) {
-					return `translate(${translateBy}, 0)`;
-				} else {
-					// translate in the y direction for horizontal groups
-					return `translate(0, ${translateBy})`;
-				}
-			});
-
-		const bars = allBarGroups.selectAll('path.bar').data(
-			(label) => this.getDataCorrespondingToLabel(label),
-			(d) => d[groupMapsTo]
-		);
-
-		// Remove bars that are no longer needed
-		bars.exit().attr('opacity', 0).remove();
-
-		// Add the bars that need to be introduced
-		const barsEnter = bars.enter().append('path').attr('opacity', 0);
-
-		// code for vertical grouped bar charts
-		barsEnter
-			.merge(bars)
-			.classed('bar', true)
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: '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) => {
-				/*
-				 * 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 startX = this.groupScale(d[groupMapsTo]);
-				const barWidth = this.getBarWidth();
-
-				const x0 = startX;
-				const x1 = startX + barWidth;
-				const rangeAxis = this.services.cartesianScales.getRangeAxisPosition(
-					{ datum: d }
-				);
-				const y0 = this.services.cartesianScales.getValueThroughAxisPosition(
-					rangeAxis,
-					0
-				);
-				const y1 = this.services.cartesianScales.getRangeValue(d);
-
-				// don't show if part of bar is out of zoom domain
-				if (this.isOutsideZoomedDomain(x0, x1)) {
-					return;
-				}
-				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) => d.value);
-
-		// Add event listeners to elements drawn
-		this.addEventListeners();
-	}
-
-	// Highlight elements that match the hovered legend item
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		const { groupMapsTo } = this.getOptions().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 self = this;
-
-		this.parent
-			.selectAll('path.bar')
-			.on('mouseover', function (event, datum) {
-				const hoveredElement = select(this);
-				hoveredElement.classed('hovered', true);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
-					event,
-					element: hoveredElement,
-					datum,
-				});
-
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement,
-					data: [datum],
-				});
-			})
-			.on('mousemove', function (event, datum) {
-				const hoveredElement = select(this);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
-					event,
-					element: hoveredElement,
-					datum,
-				});
-
-				self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-					event,
-				});
-			})
-			.on('click', function (event, datum) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
-					event,
-					element: select(this),
-					datum,
-				});
-			})
-			.on('mouseout', function (event, datum) {
-				const hoveredElement = select(this);
-				hoveredElement.classed('hovered', false);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
-					event,
-					element: hoveredElement,
-					datum,
-				});
-
-				// Hide tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-					hoveredElement,
-				});
-			});
-	}
-
-	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
-		);
-	}
-
-	protected getDataCorrespondingToLabel(label: string) {
-		const displayData = this.model.getDisplayData(this.configs.groups);
-
-		return displayData.filter((datum) => {
-			const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(
-				datum
-			);
-			return datum[domainIdentifier] === label;
-		});
-	}
-
-	protected getGroupWidth() {
-		const activeData = this.model.getGroupedData(this.configs.groups);
-		const totalGroupPadding = this.getTotalGroupPadding();
-
-		return this.getBarWidth() * activeData.length + totalGroupPadding;
-	}
-
-	protected getTotalGroupPadding() {
-		const activeData = this.model.getGroupedData(this.configs.groups);
-
-		if (activeData.length === 1) {
-			return 0;
-		}
-
-		const domainScale = this.services.cartesianScales.getDomainScale();
-		const padding = Math.min(5, 5 * (domainScale.step() / 70));
-
-		return padding * (activeData.length - 1);
-	}
-
-	// Gets the correct width for bars based on options & configurations
-	protected getBarWidth() {
-		const options = this.getOptions();
-		const providedWidth = Tools.getProperty(options, 'bars', 'width');
-		const providedMaxWidth = Tools.getProperty(options, 'bars', 'maxWidth');
-
-		// If there's a provided width, compare with maxWidth and
-		// Determine which to return
-		if (providedWidth !== null) {
-			if (
-				providedMaxWidth === null ||
-				providedWidth <= providedMaxWidth
-			) {
-				return providedWidth;
-			}
-		}
-
-		const activeData = this.model.getGroupedData(this.configs.groups);
-		const numOfActiveDataGroups = activeData.length;
-		const totalGroupPadding = this.getTotalGroupPadding();
-
-		const domainScale = this.services.cartesianScales.getDomainScale();
-		return Math.min(
-			providedMaxWidth,
-			(domainScale.step() - totalGroupPadding) / numOfActiveDataGroups
-		);
-	}
-
-	protected setGroupScale() {
-		const activeData = this.model.getActiveDataGroupNames(
-			this.configs.groups
-		);
-
-		this.groupScale = scaleBand()
-			.domain(activeData)
-			.rangeRound([0, this.getGroupWidth()]);
-	}
-}

package/src/components/graphs/bar-simple.ts

@@ -1,253 +0,0 @@
-// Internal Imports
-import { Bar } from './bar';
-import {
-	Events,
-	Roles,
-	RenderTypes,
-	ColorClassNameTypes,
-	CartesianOrientations,
-} from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-export class SimpleBar extends Bar {
-	type = 'simple-bar';
-	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) {
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		// Grab container SVG
-		const svg = this.getComponentContainer({ withinChartClip: true });
-
-		const data = this.model.getDisplayData(this.configs.groups);
-
-		const orientation = this.services.cartesianScales.getOrientation();
-
-		// Update data on all bars
-		const bars = svg
-			.selectAll('path.bar')
-			.data(data, (datum) => datum[groupMapsTo]);
-
-		// Remove bars that are no longer needed
-		bars.exit().attr('opacity', 0).remove();
-
-		// Add the paths that need to be introduced
-		const barsEnter = bars.enter().append('path').attr('opacity', 0);
-
-		barsEnter
-			.merge(bars)
-			.classed('bar', true)
-			.attr('width', this.getBarWidth.bind(this))
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: '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) => {
-				/*
-				 * 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 rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
-				const barWidth = this.getBarWidth();
-				const value = d[rangeIdentifier];
-
-				const x0 =
-					this.services.cartesianScales.getDomainValue(d, i) -
-					barWidth / 2;
-				const x1 = x0 + barWidth;
-				let y0, y1;
-				if (Array.isArray(value) && value.length === 2) {
-					y0 = this.services.cartesianScales.getRangeValue(value[0]);
-					y1 = this.services.cartesianScales.getRangeValue(
-						value[1],
-						i
-					);
-				} else {
-					const rangeScale = this.services.cartesianScales.getRangeScale();
-					const yScaleDomainStart = rangeScale.domain()[0];
-
-					y0 = this.services.cartesianScales.getRangeValue(
-						Math.max(0, yScaleDomainStart)
-					);
-					y1 = this.services.cartesianScales.getRangeValue(d, i);
-				}
-
-				const difference = Math.abs(y1 - y0);
-				// Set a min-2px size for the bar
-				if (difference !== 0 && difference < 2) {
-					if (
-						(value > 0 &&
-							orientation === CartesianOrientations.VERTICAL) ||
-						(value < 0 &&
-							orientation === CartesianOrientations.HORIZONTAL)
-					) {
-						y1 = y0 - 2;
-					} else {
-						y1 = y0 + 2;
-					}
-				}
-
-				// don't show if part of bar is out of zoom domain
-				if (this.isOutsideZoomedDomain(x0, x1)) {
-					return;
-				}
-
-				return Tools.generateSVGPathString(
-					{ x0, x1, y0, y1 },
-					orientation
-				);
-			})
-			.attr('opacity', 1)
-			// a11y
-			.attr('role', Roles.GRAPHICS_SYMBOL)
-			.attr('aria-roledescription', 'bar')
-			.attr('aria-label', (d) => d.value);
-
-		// Add event listeners to elements drawn
-		this.addEventListeners();
-	}
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-		const { groupMapsTo } = this.getOptions().data;
-
-		this.parent
-			.selectAll('path.bar')
-			.transition('legend-hover-simple-bar')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-simple-bar',
-				})
-			)
-			.attr('opacity', (d) =>
-				d[groupMapsTo] !== hoveredElement.datum()['name'] ? 0.3 : 1
-			);
-	};
-
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('path.bar')
-			.transition('legend-mouseout-simple-bar')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-simple-bar',
-				})
-			)
-			.attr('opacity', 1);
-	};
-
-	addEventListeners() {
-		const self = this;
-		this.parent
-			.selectAll('path.bar')
-			.on('mouseover', function (event, datum) {
-				const hoveredElement = select(this);
-				hoveredElement.classed('hovered', true);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOVER, {
-					event,
-					element: hoveredElement,
-					datum,
-				});
-
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement,
-					data: [datum],
-				});
-			})
-			.on('mousemove', function (event, datum) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEMOVE, {
-					event,
-					element: select(this),
-					datum,
-				});
-
-				self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-					event,
-				});
-			})
-			.on('click', function (event, datum) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_CLICK, {
-					event,
-					element: select(this),
-					datum,
-				});
-			})
-			.on('mouseout', function (event, datum) {
-				const hoveredElement = select(this);
-				hoveredElement.classed('hovered', false);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(Events.Bar.BAR_MOUSEOUT, {
-					event,
-					element: hoveredElement,
-					datum,
-				});
-
-				// Hide tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-					hoveredElement,
-				});
-			});
-	}
-
-	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
-		);
-	}
-}