@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/graphs/tree.ts

@@ -1,297 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { Events, RenderTypes, TreeTypes } from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { cluster as d3Cluster, tree as d3Tree, hierarchy } from 'd3-hierarchy';
-import { linkHorizontal } from 'd3-shape';
-import { select } from 'd3-selection';
-
-const NODE_OFFSET = 6;
-
-export class Tree extends Component {
-	type = 'tree';
-	renderType = RenderTypes.SVG;
-
-	getLongestLabel(data) {
-		let longestLabel = '';
-		data.forEach((d) => {
-			let longestLabelInChildren = d.children
-				? this.getLongestLabel(d.children)
-				: '';
-			if (
-				longestLabelInChildren.length > longestLabel.length ||
-				d.name.length > longestLabel.length
-			) {
-				longestLabel =
-					longestLabelInChildren.length > d.name.length
-						? longestLabelInChildren
-						: d.name;
-			}
-		});
-
-		return longestLabel;
-	}
-
-	getMockLabelWidth(svg, label) {
-		// Add mock label to get dimensions
-		const mockLabel = svg
-			.append('text')
-			.attr('dy', '0.31em')
-			.attr('x', 0)
-			.attr('text-anchor', 'end')
-			.text(label);
-
-		// Get the mock label width
-		const { width: mockLabelWidth } = DOMUtils.getSVGElementSize(
-			mockLabel.node(),
-			{
-				useBBox: true,
-			}
-		);
-
-		// Remove the mock title label
-		mockLabel.remove();
-
-		return mockLabelWidth;
-	}
-
-	render(animate = true) {
-		const svg = this.getComponentContainer();
-
-		// Empty out the svg before rendering the tree
-		svg.html('');
-
-		const { width, height } = DOMUtils.getSVGElementSize(this.parent, {
-			useAttrs: true,
-		});
-
-		if (width < 1 || height < 1) {
-			return;
-		}
-
-		const options = this.model.getOptions();
-		const displayData = this.model.getDisplayData();
-
-		const rootTitle =
-			Tools.getProperty(options, 'tree', 'rootTitle') || 'Tree';
-
-		const mockRootTitleWidth = this.getMockLabelWidth(svg, rootTitle);
-
-		let longestLabel = this.getLongestLabel(displayData);
-		const mockLongestLabelWidth = this.getMockLabelWidth(svg, longestLabel);
-
-		const margin = {
-			top: 0,
-			right: 0,
-			bottom: 0,
-			left:
-				mockRootTitleWidth > 0
-					? mockRootTitleWidth + NODE_OFFSET
-					: 30 - NODE_OFFSET,
-		};
-		const root = hierarchy({
-			name: rootTitle,
-			children: displayData,
-		}) as any;
-
-		const dx = 10;
-		const dy = width / 6;
-
-		const update = (source) => {
-			const nodes = root.descendants().reverse();
-			const links = root.links();
-
-			let left = root;
-			let right = root;
-			root.eachBefore((node) => {
-				if (node.x < left.x) left = node;
-				if (node.x > right.x) right = node;
-			});
-
-			const height = right.x - left.x;
-
-			const transition = svg
-				.transition()
-				.call((t) =>
-					this.services.transitions.setupTransition({
-						transition: t,
-						name: 'tree-update-viewbox',
-						animate: true,
-					})
-				)
-				.attr('viewBox', [-margin.left, left.x, width, height]);
-
-			// Update data on nodes
-			const nodeGroups = nodeGroup
-				.selectAll('g')
-				.data(nodes, (d) => d.id);
-
-			const self = this;
-			// Add any entering nodes
-			const nodeGroupsEnter = nodeGroups
-				.enter()
-				.append('g')
-				.attr('transform', () => `translate(${source.y0},${source.x0})`)
-				.attr('class', (d) =>
-					d.depth !== 0 && d.children && d.children.length > 0
-						? 'clickable'
-						: null
-				)
-				.on('mouseover', function (event, d) {
-					// Dispatch mouse event
-					self.services.events.dispatchEvent(
-						Events.Tree.NODE_MOUSEOVER,
-						{
-							event,
-							element: select(this),
-							datum: d,
-						}
-					);
-				})
-				.on('click', function (event, d) {
-					if (d.depth !== 0) {
-						d.children = d.children ? null : d._children;
-
-						update(d);
-					}
-
-					// Dispatch mouse event
-					self.services.events.dispatchEvent(Events.Tree.NODE_CLICK, {
-						event,
-						element: select(this),
-						datum: d,
-					});
-				})
-				.on('mouseout', function (event, d) {
-					// Dispatch mouse event
-					self.services.events.dispatchEvent(
-						Events.Tree.NODE_MOUSEOUT,
-						{
-							event,
-							element: select(this),
-							datum: d,
-						}
-					);
-				});
-
-			// Add node circles to entering nodes
-			nodeGroupsEnter
-				.append('circle')
-				.attr('r', 2.5)
-				.attr('class', (d) => (d._children ? 'parent' : 'child'))
-				.attr('stroke-width', 10);
-
-			// Add node labels
-			nodeGroupsEnter
-				.append('text')
-				.attr('dy', '0.31em')
-				.attr('x', (d) => (d._children ? -NODE_OFFSET : NODE_OFFSET))
-				.attr('text-anchor', (d) => (d._children ? 'end' : 'start'))
-				.text((d) => d.data.name)
-				.clone(true)
-				.attr('class', 'text-stroke')
-				.lower();
-
-			// Reposition nodes
-			nodeGroups
-				.merge(nodeGroupsEnter)
-				.transition(transition)
-				.attr('transform', (d) => `translate(${d.y},${d.x})`)
-				.attr('fill-opacity', 1)
-				.attr('stroke-opacity', 1);
-
-			// Remove exiting nodes
-			nodeGroups
-				.exit()
-				.transition(transition)
-				.remove()
-				.attr('transform', () => `translate(${source.y},${source.x})`)
-				.attr('fill-opacity', 0)
-				.attr('stroke-opacity', 0);
-
-			// Update data on links
-			const linkPaths = linkGroup
-				.selectAll('path')
-				.data(links, (d) => d.target.id);
-
-			// Add any entering link paths
-			const linkPathsEnter = linkPaths
-				.enter()
-				.append('path')
-				.attr('d', (d) => {
-					const o = { x: source.x0, y: source.y0 };
-					return diagonal({ source: o, target: o });
-				});
-
-			// Reposition updating link paths
-			linkPaths
-				.merge(linkPathsEnter)
-				.transition(transition)
-				.attr('d', diagonal);
-
-			// Remove any exiting link paths
-			linkPaths
-				.exit()
-				.transition(transition)
-				.remove()
-				.attr('d', () => {
-					const o = { x: source.x, y: source.y };
-					return diagonal({ source: o, target: o });
-				});
-
-			// Update position data for nodes
-			root.eachBefore((d) => {
-				d.x0 = d.x;
-				d.y0 = d.y;
-			});
-		};
-
-		const descendants = root.descendants();
-		const maxDepth = descendants[descendants.length - 1].depth;
-
-		const tree =
-			Tools.getProperty(options, 'tree', 'type') === TreeTypes.DENDROGRAM
-				? d3Cluster().size([
-						height,
-						width -
-							mockLongestLabelWidth -
-							maxDepth * NODE_OFFSET -
-							mockRootTitleWidth,
-				  ])
-				: d3Tree()
-						.nodeSize([dx, dy])
-						.size([
-							height,
-							width -
-								mockLongestLabelWidth -
-								maxDepth * NODE_OFFSET -
-								mockRootTitleWidth,
-						]);
-
-		const diagonal = linkHorizontal()
-			.x((d: any) => d.y)
-			.y((d: any) => d.x) as any;
-
-		root.x0 = dy / 2;
-		root.y0 = 0;
-		root.descendants().forEach((d, i) => {
-			d.id = i;
-			d._children = d.children;
-		});
-
-		tree(root);
-
-		svg.attr('viewBox', [-margin.left, -margin.top, width, dx]).style(
-			'user-select',
-			'none'
-		);
-
-		const linkGroup = svg.append('g').attr('class', 'links');
-		const nodeGroup = svg.append('g').attr('class', 'nodes');
-
-		update(root);
-	}
-}

package/src/components/graphs/treemap.ts

@@ -1,413 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { Events, ColorClassNameTypes, RenderTypes } from '../../interfaces';
-import { Tools } from '../../tools';
-
-// D3 Imports
-import { hierarchy as d3Hierarchy, treemap as d3Treemap } from 'd3-hierarchy';
-import { sum } from 'd3-array';
-import { hsl, color } from 'd3-color';
-import { select } from 'd3-selection';
-
-// Carbon colors
-import { colors } from '@carbon/colors';
-
-const findColorShade = (hex) => {
-	if (!hex) {
-		return null;
-	}
-
-	for (let colorName of Object.keys(colors)) {
-		const colorShades = colors[colorName];
-
-		for (let colorShadeLevel of Object.keys(colorShades)) {
-			const colorShade = colorShades[colorShadeLevel];
-
-			if (colorShade === hex) {
-				return colorShadeLevel;
-			}
-		}
-	}
-
-	return null;
-};
-
-const textFillColor = function () {
-	const correspondingLeaf = select(this.parentNode).select(
-		'rect.leaf'
-	) as any;
-	const correspondingLeafFill = getComputedStyle(
-		correspondingLeaf.node(),
-		null
-	).getPropertyValue('fill');
-	const cl = color(correspondingLeafFill) as any;
-
-	let colorShade;
-	if (cl) {
-		colorShade = findColorShade(cl ? cl.hex() : null);
-	}
-
-	if (colorShade === null || colorShade === undefined) {
-		const lightness = hsl(cl).l;
-		colorShade = Math.abs(lightness * 100 - 100);
-	}
-
-	return colorShade > 50 ? 'white' : 'black';
-};
-
-let uidCounter = 0;
-export class Treemap extends Component {
-	type = 'treemap';
-	renderType = RenderTypes.SVG;
-
-	init() {
-		const { events } = this.services;
-		// Highlight correct circle on legend item hovers
-		events.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-		// Un-highlight circles on legend item mouseouts
-		events.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate = true) {
-		const svg = this.getComponentContainer();
-
-		const allData = this.model.getData();
-		const displayData = this.model.getDisplayData();
-		const options = this.model.getOptions();
-
-		const windowLocation = Tools.getProperty(window, 'location');
-
-		const { width, height } = DOMUtils.getSVGElementSize(svg, {
-			useAttrs: true,
-		});
-
-		const hierarchy = d3Hierarchy({
-			name: options.title || 'Treemap',
-			children: displayData,
-		})
-			.sum((d: any) => d.value)
-			.sort((a, b) => b.value - a.value);
-
-		const root = d3Treemap()
-			.size([width, height])
-			.paddingInner(1)
-			.paddingOuter(0)
-			.round(true)(hierarchy);
-		const { transitions } = this.services;
-
-		const leafGroups = svg
-			.selectAll("g[data-name='leaf']")
-			.data(root.leaves(), (leaf) => leaf.data.name);
-
-		// Remove leaf groups that need to be removed
-		leafGroups.exit().attr('opacity', 0).remove();
-
-		// Add the leaf groups that need to be introduced
-		const enteringLeafGroups = leafGroups
-			.enter()
-			.append('g')
-			.attr('data-name', 'leaf')
-			.attr('data-uid', () => uidCounter++);
-
-		const allLeafGroups = enteringLeafGroups.merge(leafGroups);
-
-		allLeafGroups
-			.attr('data-name', 'leaf')
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'treemap-group-update',
-					animate,
-				})
-			)
-			.attr('transform', (d) => `translate(${d.x0},${d.y0})`);
-
-		const rects = allLeafGroups.selectAll('rect.leaf').data((d) => [d]);
-
-		rects.exit().attr('width', 0).attr('height', 0).remove();
-
-		const enteringRects = rects
-			.enter()
-			.append('rect')
-			.classed('leaf', true);
-
-		enteringRects
-			.merge(rects)
-			.attr('width', 0)
-			.attr('height', 0)
-			.attr('id', function () {
-				const uid = select(this.parentNode).attr('data-uid');
-				return `${options.style.prefix}-leaf-${uid}`;
-			})
-			.attr('class', (d) => {
-				while (d.depth > 1) d = d.parent;
-
-				return this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.FILL],
-					dataGroupName: d.data.name,
-					originalClassName: 'leaf',
-				});
-			})
-			.transition()
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'treemap-leaf-update-enter',
-					animate,
-				})
-			)
-			.attr('width', (d) => d.x1 - d.x0)
-			.attr('height', (d) => d.y1 - d.y0)
-			.style('fill', (d) => {
-				while (d.depth > 1) d = d.parent;
-				return this.model.getFillColor(d.data.name);
-			});
-
-		// Update all clip paths
-		allLeafGroups
-			.selectAll('clipPath')
-			.data(
-				(d) => {
-					if (d.data.showLabel !== true) {
-						return [];
-					}
-
-					return [1];
-				},
-				(d) => d
-			)
-			.join(
-				(enter) => {
-					enter
-						.append('clipPath')
-						.attr('id', function () {
-							const uid = select(this.parentNode).attr(
-								'data-uid'
-							);
-							return `${options.style.prefix}-clip-${uid}`;
-						})
-						.append('use')
-						.attr('xlink:href', function () {
-							const uid = select(this.parentNode.parentNode).attr(
-								'data-uid'
-							);
-							const leafID = `${options.style.prefix}-leaf-${uid}`;
-
-							return new URL(`#${leafID}`, windowLocation) + '';
-						});
-				},
-				(update) => null,
-				(exit) => exit.remove()
-			);
-
-		// Update all titles
-		allLeafGroups
-			.selectAll('text')
-			.data(
-				(d) => {
-					if (d.data.showLabel !== true) {
-						return [];
-					}
-
-					let parent = d;
-					while (parent.depth > 1) parent = parent.parent;
-					const color = hsl(
-						this.model.getFillColor(parent.data.name)
-					);
-					return [
-						{
-							text: d.data.name,
-							color: color.l < 0.5 ? 'white' : 'black',
-						},
-					];
-				},
-				(d) => d
-			)
-			.join(
-				(enter) => {
-					const addedText = enter
-						.append('text')
-						.text((d) => d.text)
-						.style('fill', textFillColor)
-						.attr('x', 7)
-						.attr('y', 18);
-
-					if (windowLocation) {
-						addedText.attr('clip-path', function () {
-							const uid = select(this.parentNode).attr(
-								'data-uid'
-							);
-							const clipPathID = `${options.style.prefix}-clip-${uid}`;
-
-							return `url(${
-								new URL(`#${clipPathID}`, windowLocation) + ''
-							})`;
-						});
-					}
-				},
-				(update) =>
-					update.text((d) => d.text).style('fill', textFillColor),
-				(exit) => exit.remove()
-			);
-
-		// Add event listeners to elements drawn
-		this.addEventListeners();
-	}
-
-	addEventListeners() {
-		const self = this;
-		this.parent
-			.selectAll('rect.leaf')
-			.on('mouseover', function (event, datum) {
-				const hoveredElement = select(this);
-				let fillColor = getComputedStyle(this, null).getPropertyValue(
-					'fill'
-				);
-
-				let parent = datum;
-				while (parent.depth > 1) parent = parent.parent;
-
-				hoveredElement
-					.transition('graph_element_mouseover_fill_update')
-					.call((t) =>
-						self.services.transitions.setupTransition({
-							transition: t,
-							name: 'graph_element_mouseover_fill_update',
-						})
-					)
-					.style('fill', (d: any) => {
-						const customColor = self.model.getFillColor(
-							d.parent.data.name
-						);
-						if (customColor) {
-							fillColor = customColor;
-						}
-						return color(fillColor).darker(0.7).toString();
-					});
-
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement,
-					items: [
-						{
-							color: fillColor,
-							label: parent.data.name,
-							bold: true,
-						},
-						{
-							label: datum.data.name,
-							value: datum.data.value,
-						},
-					],
-				});
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.Treemap.LEAF_MOUSEOVER,
-					{
-						event,
-						element: hoveredElement,
-						datum,
-					}
-				);
-			})
-			.on('mousemove', function (event, datum) {
-				const hoveredElement = select(this);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.Treemap.LEAF_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.Treemap.LEAF_CLICK, {
-					event,
-					element: select(this),
-					datum,
-				});
-			})
-			.on('mouseout', function (event, datum) {
-				const hoveredElement = select(this);
-				hoveredElement.classed('hovered', false);
-
-				let parent = datum;
-				while (parent.depth > 1) parent = parent.parent;
-
-				hoveredElement
-					.transition()
-					.call((t) =>
-						self.services.transitions.setupTransition({
-							transition: t,
-							name: 'graph_element_mouseout_fill_update',
-						})
-					)
-					.style('fill', (d: any) =>
-						self.model.getFillColor(d.parent.data.name)
-					);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.Treemap.LEAF_MOUSEOUT,
-					{
-						event,
-						element: hoveredElement,
-						datum,
-					}
-				);
-
-				// Hide tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-					hoveredElement,
-				});
-			});
-	}
-
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-
-		this.parent
-			.selectAll("g[data-name='leaf']")
-			.transition('legend-hover-treemap')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-treemap',
-				})
-			)
-			.attr('opacity', (d) =>
-				d.parent.data.name === hoveredElement.datum()['name'] ? 1 : 0.3
-			);
-	};
-
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll("g[data-name='leaf']")
-			.transition('legend-mouseout-treemap')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-treemap',
-				})
-			)
-			.attr('opacity', 1);
-	};
-}