@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/graphs/area-stacked.ts

@@ -1,154 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { Tools } from '../../tools';
-import * as Configuration from '../../configuration';
-import {
-	Roles,
-	Events,
-	ColorClassNameTypes,
-	RenderTypes,
-} from '../../interfaces';
-
-// D3 Imports
-import { area } from 'd3-shape';
-
-export class StackedArea extends Component {
-	type = 'area-stacked';
-	renderType = RenderTypes.SVG;
-
-	areaGenerator: any;
-
-	init() {
-		const eventsFragment = this.services.events;
-
-		// Highlight correct area on legend item hovers
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-
-		// Un-highlight area on legend item mouseouts
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate = true) {
-		let svg = this.getComponentContainer({ withinChartClip: true });
-		const self = this;
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		const percentage = Object.keys(options.axes).some(
-			(axis) => options.axes[axis].percentage
-		);
-
-		const stackedData = this.model.getStackedData({
-			percentage,
-			groups: this.configs.groups,
-		});
-
-		const firstDatum = Tools.getProperty(stackedData, 0, 0);
-
-		// area doesnt have to use the main range and domain axes - they can be mapped to the secondary (in the case of a combo chart)
-		// however area _cannot_ have multiple datasets that are mapped to _different_ ranges and domains so we can use the first data item
-		const domainAxisPosition = this.services.cartesianScales.getDomainAxisPosition(
-			{ firstDatum }
-		);
-		const rangeAxisPosition = this.services.cartesianScales.getRangeAxisPosition(
-			{ firstDatum }
-		);
-		const mainYScale = this.services.cartesianScales.getScaleByPosition(
-			rangeAxisPosition
-		);
-
-		const areas = svg
-			.selectAll('path.area')
-			.data(stackedData, (d) => Tools.getProperty(d, 0, groupMapsTo));
-
-		// D3 area generator function
-		this.areaGenerator = area()
-			.x((d: any, i) =>
-				this.services.cartesianScales.getValueThroughAxisPosition(
-					domainAxisPosition,
-					d.data.sharedStackKey,
-					i
-				)
-			)
-			.y0((d) => mainYScale(d[0]))
-			.y1((d) => mainYScale(d[1]))
-			.curve(this.services.curves.getD3Curve());
-
-		areas.exit().attr('opacity', 0).remove();
-
-		const enteringAreas = areas.enter().append('path').attr('opacity', 0);
-
-		enteringAreas
-			.merge(areas)
-			.data(stackedData, (d) => Tools.getProperty(d, 0, groupMapsTo))
-			.attr('class', 'area')
-			.attr('class', (d) =>
-				this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.FILL],
-					dataGroupName: Tools.getProperty(d, 0, groupMapsTo),
-					originalClassName: 'area',
-				})
-			)
-			.style('fill', (d) =>
-				self.model.getFillColor(Tools.getProperty(d, 0, groupMapsTo))
-			)
-			.attr('role', Roles.GRAPHICS_SYMBOL)
-			.attr('aria-roledescription', 'area')
-			.attr('aria-label', (d) => Tools.getProperty(d, 0, groupMapsTo))
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'area-update-enter',
-					animate,
-				})
-			)
-			.attr('opacity', Configuration.area.opacity.selected)
-			.attr('d', this.areaGenerator);
-	}
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		this.parent
-			.selectAll('path.area')
-			.transition('legend-hover-area')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-area',
-				})
-			)
-			.attr('opacity', (d) => {
-				if (
-					Tools.getProperty(d, 0, groupMapsTo) !==
-					hoveredElement.datum().name
-				) {
-					return Configuration.area.opacity.unselected;
-				}
-
-				return Configuration.area.opacity.selected;
-			});
-	};
-
-	handleLegendMouseOut = () => {
-		this.parent
-			.selectAll('path.area')
-			.transition('legend-mouseout-area')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-area',
-				})
-			)
-			.attr('opacity', Configuration.area.opacity.selected);
-	};
-}

package/src/components/graphs/area.ts

@@ -1,326 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import * as Configuration from '../../configuration';
-import {
-	CartesianOrientations,
-	Events,
-	ColorClassNameTypes,
-	RenderTypes,
-} from '../../interfaces';
-import { GradientUtils } from '../../services';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { area } from 'd3-shape';
-import { select } from 'd3-selection';
-
-export class Area extends Component {
-	type = 'area';
-	renderType = RenderTypes.SVG;
-
-	gradient_id = 'gradient-id-' + Math.floor(Math.random() * 99999999999);
-
-	init() {
-		const eventsFragment = this.services.events;
-
-		// Highlight correct area on legend item hovers
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-
-		// Un-highlight area on legend item mouseouts
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate = true) {
-		const svg = this.getComponentContainer({ withinChartClip: true });
-		const options = this.getOptions();
-		let domain = [0, 0];
-
-		const { cartesianScales } = this.services;
-
-		const orientation = cartesianScales.getOrientation();
-		const areaGenerator = area()
-			.curve(this.services.curves.getD3Curve())
-			.defined((datum: any, i) => {
-				const rangeIdentifier = cartesianScales.getRangeIdentifier();
-				const value = datum[rangeIdentifier];
-				if (value === null || value === undefined) {
-					return false;
-				}
-				return true;
-			});
-
-		// Update the bound data on area groups
-		const groupedData = this.model.getGroupedData(this.configs.groups);
-
-		const bounds = Tools.getProperty(options, 'bounds');
-		const boundsEnabled = bounds && groupedData && groupedData.length === 1;
-
-		if (!boundsEnabled && bounds) {
-			console.warn(
-				`Bounds can only be shown when having 1 single datagroup, you've supplied ${groupedData.length}`
-			); // eslint-disable-line no-console
-		}
-
-		let upperBoundRangeValue = 0;
-		// If includeZero is enabled, we want to replace upperBoundRange from 0 to domain value
-		const includeZeroInRangeValue = (position, domain) => {
-			if (
-				Tools.getProperty(options, 'axes', position, 'includeZero') ===
-				false
-			) {
-				// Replace upperBoundRangeValue if domain is positive
-				if (domain[0] > 0 && domain[1] > 0) {
-					upperBoundRangeValue = domain[0];
-				}
-			}
-		};
-
-		const upperBound = (d, i) =>
-			boundsEnabled
-				? cartesianScales.getBoundedScaledValues(d, i)[0]
-				: cartesianScales.getRangeValue(upperBoundRangeValue);
-
-		const lowerBound = (d, i) =>
-			boundsEnabled
-				? cartesianScales.getBoundedScaledValues(d, i)[1]
-				: cartesianScales.getRangeValue(d, i);
-
-		if (orientation === CartesianOrientations.VERTICAL) {
-			domain = cartesianScales.getMainYScale().domain();
-			includeZeroInRangeValue(
-				cartesianScales.getMainYAxisPosition(),
-				domain
-			);
-
-			areaGenerator
-				.x((d, i) => cartesianScales.getDomainValue(d, i))
-				.y0((d, i) => upperBound(d, i))
-				.y1((d, i) => lowerBound(d, i));
-		} else {
-			domain = cartesianScales.getMainXScale().domain();
-			includeZeroInRangeValue(
-				cartesianScales.getMainXAxisPosition(),
-				domain
-			);
-
-			areaGenerator
-				.x0((d, i) => upperBound(d, i))
-				.x1((d, i) => lowerBound(d, i))
-				.y((d, i) => cartesianScales.getDomainValue(d, i));
-		}
-
-		// Is gradient enabled or not
-		const isGradientEnabled = Tools.getProperty(
-			options,
-			'color',
-			'gradient',
-			'enabled'
-		);
-
-		// Should gradient style be applicable
-		const isGradientAllowed =
-			groupedData && groupedData.length === 1 && isGradientEnabled;
-
-		if (groupedData.length > 1 && isGradientEnabled) {
-			console.error(
-				'Gradients can only be enabled when having 1 single dataset'
-			);
-		}
-
-		const areas = svg
-			.selectAll('path.area')
-			.data(groupedData, (group) => group.name);
-
-		const chartMainContainer = select(
-			this.services.domUtils.getMainContainer()
-		);
-
-		// 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
-		areas.exit().attr('opacity', 0).remove();
-
-		// if there is no grouped data (if all data groups are turned OFF with legend which can happen in the case of combo charts)
-		if (!groupedData.length) {
-			return;
-		}
-
-		if (isGradientAllowed) {
-			// The fill value of area has been overwritten, get color value from stroke color class instead
-			const strokePathElement = chartMainContainer
-				.select(
-					`path.${this.model.getColorClassName({
-						classNameTypes: [ColorClassNameTypes.STROKE],
-						dataGroupName: groupedData[0].name,
-					})}`
-				)
-				.node();
-
-			let colorValue;
-			if (strokePathElement) {
-				colorValue = getComputedStyle(
-					strokePathElement as HTMLElement,
-					null
-				).getPropertyValue('stroke');
-			} else {
-				const sparklineColorObject = Tools.getProperty(
-					this.model.getOptions(),
-					'color',
-					'scale'
-				);
-
-				if (sparklineColorObject !== null) {
-					const sparklineColorObjectKeys = Object.keys(
-						sparklineColorObject
-					);
-					colorValue =
-						sparklineColorObject[sparklineColorObjectKeys[0]];
-				}
-			}
-			GradientUtils.appendOrUpdateLinearGradient({
-				svg: this.parent,
-				id: this.services.domUtils.generateElementIDString(
-					`${groupedData[0].name.replace(' ', '')}_${
-						this.gradient_id
-					}`
-				),
-				x1: '0%',
-				x2: '0%',
-				y1: '0%',
-				y2: '100%',
-				stops: GradientUtils.getStops(domain, colorValue),
-			});
-		} else {
-			// make sure there is no linearGradient if no gradient is allowed
-			if (!this.parent.selectAll('defs linearGradient').empty()) {
-				this.parent.selectAll('defs linearGradient').each(function () {
-					this.parentNode.remove();
-				});
-			}
-		}
-
-		const self = this;
-
-		// Enter paths that need to be introduced
-		const enteringAreas = areas.enter().append('path');
-		if (isGradientAllowed) {
-			enteringAreas
-				.merge(areas)
-				.style(
-					'fill',
-					(group) =>
-						`url(#${this.services.domUtils.generateElementIDString(
-							`${group.name.replace(' ', '')}_${this.gradient_id}`
-						)})`
-				)
-				.attr('class', 'area')
-				.attr('class', (group) =>
-					this.model.getColorClassName({
-						classNameTypes: [ColorClassNameTypes.FILL],
-						dataGroupName: group.name,
-						originalClassName: 'area',
-					})
-				)
-				.attr('d', (group) => {
-					const { data } = group;
-					return areaGenerator(data);
-				});
-		} else {
-			enteringAreas
-				.attr('opacity', 0)
-				.merge(areas)
-				.attr('class', 'area')
-				.attr('class', (group) =>
-					this.model.getColorClassName({
-						classNameTypes: [
-							ColorClassNameTypes.FILL,
-							ColorClassNameTypes.STROKE,
-						],
-						dataGroupName: group.name,
-						originalClassName: 'area',
-					})
-				)
-				.style('fill', (group) => self.model.getFillColor(group.name))
-				.transition()
-				.call((t) =>
-					this.services.transitions.setupTransition({
-						transition: t,
-						name: 'area-update-enter',
-						animate,
-					})
-				)
-				.attr(
-					'opacity',
-					boundsEnabled ? 1 : Configuration.area.opacity.selected
-				)
-				.attr('d', (group) => {
-					const { data } = group;
-					return areaGenerator(data);
-				});
-
-			if (boundsEnabled) {
-				enteringAreas
-					.attr('fill-opacity', Configuration.area.opacity.selected)
-					.style('stroke', (group) =>
-						self.model.getStrokeColor(group.name)
-					)
-					.style('stroke-dasharray', '2, 2')
-					.attr('stroke-width', 0.7 + 'px');
-			}
-		}
-	}
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		this.parent
-			.selectAll('path.area')
-			.transition('legend-hover-area')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-area',
-				})
-			)
-			.attr('opacity', (group) => {
-				if (group.name !== hoveredElement.datum()['name']) {
-					return Configuration.area.opacity.unselected;
-				}
-
-				return Configuration.area.opacity.selected;
-			});
-	};
-
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('path.area')
-			.transition('legend-mouseout-area')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-area',
-				})
-			)
-			.attr('opacity', Configuration.area.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
-		);
-	}
-}