@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/graphs/wordcloud.ts

@@ -1,303 +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 { select } from 'd3-selection';
-import { scaleLinear } from 'd3-scale';
-import { extent } from 'd3-array';
-import cloud from 'd3-cloud';
-
-export class WordCloud extends Component {
-	type = 'wordcloud';
-	renderType = RenderTypes.SVG;
-
-	init() {
-		const eventsFragment = this.services.events;
-
-		// Highlight correct words on legend item hovers
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_HOVER,
-			this.handleLegendOnHover
-		);
-
-		// Un-highlight words on legend item mouseouts
-		eventsFragment.addEventListener(
-			Events.Legend.ITEM_MOUSEOUT,
-			this.handleLegendMouseOut
-		);
-	}
-
-	render(animate = true) {
-		const self = this;
-		const svg = this.getComponentContainer()
-			.attr('width', '100%')
-			.attr('height', '100%');
-
-		const displayData = this.model.getDisplayData();
-		const fontSizeScale = this.getFontSizeScale(displayData);
-
-		const options = this.getOptions();
-		const { fontSizeMapsTo, wordMapsTo } = options.wordCloud;
-		const { groupMapsTo } = options.data;
-
-		const { width, height } = DOMUtils.getSVGElementSize(svg, {
-			useAttrs: true,
-		});
-
-		if (width === 0 || height === 0) {
-			return;
-		}
-
-		const layout = cloud()
-			.size([width, height])
-			.words(
-				displayData.map(function (d) {
-					return {
-						[groupMapsTo]: d[groupMapsTo],
-						text: d[wordMapsTo],
-						size: d[fontSizeMapsTo],
-						value: d[fontSizeMapsTo],
-					};
-				})
-			)
-			.padding(5)
-			.rotate(0)
-			.fontSize((d) => fontSizeScale(d.size))
-			.on('end', draw);
-
-		layout.start();
-
-		function draw(words) {
-			const textGroup = DOMUtils.appendOrSelect(svg, 'g.words');
-			textGroup.attr(
-				'transform',
-				`translate(${layout.size()[0] / 2}, ${layout.size()[1] / 2})`
-			);
-
-			const allText = textGroup
-				.selectAll('text')
-				.data(words, (d) => `${d[groupMapsTo]}-${d.text}`);
-
-			// Remove texts that are no longer needed
-			allText.exit().attr('opacity', 0).remove();
-
-			const enteringText = allText
-				.enter()
-				.append('text')
-				.attr('opacity', 0);
-
-			enteringText
-				.merge(allText)
-				.style('font-size', (d) => `${d.size}px`)
-				.text(function (d) {
-					return d.text;
-				})
-				.attr('class', (d) =>
-					self.model.getColorClassName({
-						classNameTypes: [ColorClassNameTypes.FILL],
-						dataGroupName: d[groupMapsTo],
-						originalClassName: `word ${d.size > 32 ? 'light' : ''}`,
-					})
-				)
-				.style('fill', (d) => {
-					return self.model.getFillColor(d[groupMapsTo], d.text, d);
-				})
-				.attr('text-anchor', 'middle')
-				.transition()
-				.call((t) =>
-					self.services.transitions.setupTransition({
-						transition: t,
-						name: 'wordcloud-text-update-enter',
-						animate,
-					})
-				)
-				.attr('transform', (d) => `translate(${d.x}, ${d.y})`)
-				.attr('opacity', 1);
-		}
-
-		// Add event listeners
-		this.addEventListeners();
-	}
-
-	getFontSizeScale(data: any) {
-		const options = this.getOptions();
-		const { fontSizeMapsTo } = options.wordCloud;
-
-		// Filter out any null/undefined values
-		const allOccurences = data
-			.map((d) => d[fontSizeMapsTo])
-			.filter((size) => size);
-		const chartSize = DOMUtils.getHTMLElementSize(
-			this.services.domUtils.getMainContainer()
-		);
-
-		// We need the ternary operator here in case the user
-		// doesn't provide size values in data
-		const sizeDataIsValid = allOccurences.length > 0;
-		const domain = sizeDataIsValid ? extent(allOccurences) : [1, 1];
-
-		// @ts-ignore
-		return scaleLinear()
-			.domain(domain as any)
-			.range(
-				sizeDataIsValid
-					? options.wordCloud.fontSizeRange(chartSize, data)
-					: [4, 4]
-			);
-	}
-
-	// Highlight elements that match the hovered legend item
-	handleLegendOnHover = (event: CustomEvent) => {
-		const { hoveredElement } = event.detail;
-		const { groupMapsTo } = this.getOptions().data;
-
-		this.parent
-			.selectAll('text.word')
-			.transition('legend-hover-wordcloud')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-hover-wordcloud',
-				})
-			)
-			.attr('opacity', (d) =>
-				d[groupMapsTo] !== hoveredElement.datum()['name'] ? 0.3 : 1
-			);
-	};
-
-	// Un-highlight all elements
-	handleLegendMouseOut = (event: CustomEvent) => {
-		this.parent
-			.selectAll('text.word')
-			.transition('legend-mouseout-wordcloud')
-			.call((t) =>
-				this.services.transitions.setupTransition({
-					transition: t,
-					name: 'legend-mouseout-wordcloud',
-				})
-			)
-			.attr('opacity', 1);
-	};
-
-	addEventListeners() {
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-		const self = this;
-
-		// Highlights 1 word or unhighlights all
-		const debouncedHighlight = Tools.debounce((word) => {
-			const allWords = self.parent
-				.selectAll('text.word')
-				.transition('wordcloud-word-mouse-highlight')
-				.call((t) =>
-					self.services.transitions.setupTransition({
-						transition: t,
-						name: 'wordcloud-word-mouse-highlight',
-					})
-				);
-
-			if (word === null) {
-				allWords.attr('opacity', 1);
-			} else {
-				allWords.attr('opacity', function () {
-					if (word === this) {
-						return 1;
-					}
-
-					return 0.3;
-				});
-			}
-		}, 6);
-
-		this.parent
-			.selectAll('text.word')
-			.on('mouseover', function (event, datum) {
-				const hoveredElement = this;
-				debouncedHighlight(hoveredElement);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.WordCloud.WORD_MOUSEOVER,
-					{
-						event,
-						element: select(this),
-						datum,
-					}
-				);
-
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement,
-					items: [
-						{
-							label: options.tooltip.wordLabel,
-							value: datum.text,
-						},
-						{
-							label: options.tooltip.valueLabel,
-							value: datum.value,
-						},
-						{
-							label: options.tooltip.groupLabel,
-							value: datum[groupMapsTo],
-							class: self.model.getColorClassName({
-								classNameTypes: [ColorClassNameTypes.TOOLTIP],
-								dataGroupName: datum[groupMapsTo],
-							}),
-						},
-					],
-				});
-			})
-			.on('mousemove', function (event, datum) {
-				const hoveredElement = select(this);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.WordCloud.WORD_MOUSEMOVE,
-					{
-						element: hoveredElement,
-						datum,
-					}
-				);
-
-				// Show tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-					event,
-				});
-			})
-			.on('click', function (event, datum) {
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.WordCloud.WORD_CLICK,
-					{
-						event,
-						element: select(this),
-						datum,
-					}
-				);
-			})
-			.on('mouseout', function (event, datum) {
-				const hoveredElement = select(this);
-				debouncedHighlight(null);
-
-				// Dispatch mouse event
-				self.services.events.dispatchEvent(
-					Events.WordCloud.WORD_MOUSEOUT,
-					{
-						event,
-						element: hoveredElement,
-						datum,
-					}
-				);
-
-				// Hide tooltip
-				self.services.events.dispatchEvent(Events.Tooltip.HIDE, {
-					hoveredElement,
-				});
-			});
-	}
-}

package/src/components/index.ts

@@ -1,61 +0,0 @@
-export * from './component';
-
-// ESSENTIALS
-export * from './essentials/legend';
-export * from './essentials/color-scale-legend';
-export * from './essentials/modal';
-export * from './essentials/threshold';
-export * from './essentials/title';
-export * from './essentials/title-meter';
-export * from './essentials/tooltip';
-export * from './essentials/tooltip-axis';
-export * from './essentials/canvas-chart-clip';
-export * from './essentials/highlights';
-
-// GRAPHS
-export * from './graphs/area';
-export * from './graphs/area-stacked';
-export * from './graphs/bar-simple';
-export * from './graphs/bar-grouped';
-export * from './graphs/bar-stacked';
-export * from './graphs/boxplot';
-export * from './graphs/bubble';
-export * from './graphs/bullet';
-export * from './graphs/histogram';
-export * from './graphs/line';
-export * from './graphs/lollipop';
-export * from './graphs/scatter';
-export * from './graphs/scatter-stacked';
-export * from './graphs/pie';
-export * from './graphs/gauge';
-export * from './graphs/donut';
-export * from './graphs/skeleton';
-export * from './graphs/skeleton-lines';
-export * from './graphs/tree';
-export * from './graphs/treemap';
-export * from './graphs/radar';
-export * from './graphs/circle-pack';
-export * from './graphs/wordcloud';
-export * from './graphs/alluvial';
-export * from './graphs/heatmap';
-
-// Layout
-export * from './layout/spacer';
-export * from './layout/layout';
-
-// MISC
-export * from './axes/two-dimensional-axes';
-export * from './axes/axis';
-export * from './axes/grid-brush';
-export * from './axes/chart-clip';
-export * from './axes/grid';
-export * from './axes/ruler';
-export * from './axes/ruler-binned';
-export * from './axes/ruler-stacked';
-export * from './axes/toolbar';
-export * from './axes/zero-line';
-export * from './axes/zoom-bar';
-
-// Diagrams
-export * from './diagrams/buildPaths';
-export * from './diagrams/markerDefinitions';

package/src/components/layout/layout.ts

@@ -1,260 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import {
-	LayoutDirection,
-	LayoutGrowth,
-	LayoutComponentChild,
-	LayoutConfigs,
-	RenderTypes,
-	LayoutAlignItems,
-} from '../../interfaces/index';
-import { Tools } from '../../tools';
-import { DOMUtils } from '../../services';
-import { ChartModel } from '../../model/model';
-
-// D3 Imports
-import { select } from 'd3-selection';
-
-// import the settings for the css prefix
-import { carbonPrefix } from "../../configuration-non-customizable";
-
-export class LayoutComponent extends Component {
-	// Give every layout component a distinct ID
-	// so they don't interfere when querying elements
-	static instanceID = Math.floor(Math.random() * 99999999999);
-
-	type = 'layout';
-
-	children: LayoutComponentChild[];
-
-	private _instanceID: number;
-
-	constructor(
-		model: ChartModel,
-		services: any,
-		children: LayoutComponentChild[],
-		configs?: LayoutConfigs
-	) {
-		super(model, services, configs);
-
-		this.configs = configs;
-		this.children = children;
-
-		this._instanceID = LayoutComponent.instanceID++;
-
-		this.init();
-	}
-
-	init() {
-		this.children.forEach((child) => {
-			child.components.forEach((component) => {
-				component.init();
-			});
-		});
-	}
-
-	getPreferedAndFixedSizeSum(): number {
-		const svg = this.parent;
-		let sum = 0;
-
-		svg.selectAll(`div.layout-child-${this._instanceID}`)
-			.filter((d: any) => {
-				const growth = Tools.getProperty(d, 'growth');
-
-				return (
-					growth === LayoutGrowth.PREFERRED ||
-					growth === LayoutGrowth.FIXED
-				);
-			})
-			.each(function (d: any) {
-				sum += d.size;
-			});
-
-		return sum;
-	}
-
-	getNumOfStretchChildren(): number {
-		const svg = this.parent;
-
-		return svg
-			.selectAll(`div.layout-child-${this._instanceID}`)
-			.filter(
-				(d: any) =>
-					Tools.getProperty(d, 'growth') === LayoutGrowth.STRETCH
-			)
-			.size();
-	}
-
-	render(animate = true) {
-		// Get parent element to render inside of
-		const parent = this.parent;
-
-		const { width, height } = DOMUtils.getHTMLElementSize(parent.node());
-
-		const horizontal =
-			this.configs.direction === LayoutDirection.ROW ||
-			this.configs.direction === LayoutDirection.ROW_REVERSE;
-
-		const chartprefix = Tools.getProperty(
-			this.model.getOptions(),
-			'style',
-			'prefix'
-		);
-
-		// Add new boxes to the DOM for each layout child
-		const updatedBoxes = parent
-			.classed(
-				`${carbonPrefix}--${chartprefix}--layout-row`,
-				this.configs.direction === LayoutDirection.ROW
-			)
-			.classed(
-				`${carbonPrefix}--${chartprefix}--layout-row-reverse`,
-				this.configs.direction === LayoutDirection.ROW_REVERSE
-			)
-			.classed(
-				`${carbonPrefix}--${chartprefix}--layout-column`,
-				this.configs.direction === LayoutDirection.COLUMN
-			)
-			.classed(
-				`${carbonPrefix}--${chartprefix}--layout-column-reverse`,
-				this.configs.direction === LayoutDirection.COLUMN_REVERSE
-			)
-			.classed(
-				`${carbonPrefix}--${chartprefix}--layout-alignitems-center`,
-				this.configs.alignItems === LayoutAlignItems.CENTER
-			)
-			.selectAll(`div.layout-child-${this._instanceID}`)
-			.data(this.children, (d: any) => d.id);
-
-		const enteringBoxes = updatedBoxes.enter().append('div');
-
-		enteringBoxes
-			.merge(parent.selectAll(`div.layout-child-${this._instanceID}`))
-			.attr(
-				'class',
-				(d: any) =>
-					`layout-child layout-child-${this._instanceID} ${d.id}`
-			)
-			.each(function (d: any) {
-				// Set parent component for each child
-				d.components.forEach((itemComponent) => {
-					const selection = select(this);
-
-					const renderType = Tools.getProperty(d, 'renderType');
-					const isRenderingSVG = renderType === RenderTypes.SVG;
-					itemComponent.setParent(
-						isRenderingSVG
-							? DOMUtils.appendOrSelect(
-									selection,
-									'svg.layout-svg-wrapper'
-							  )
-									.attr('width', '100%')
-									.attr('height', '100%')
-							: selection
-					);
-
-					// Render preffered & fixed items
-					const growth = Tools.getProperty(d, 'growth');
-					if (
-						growth === LayoutGrowth.PREFERRED ||
-						growth === LayoutGrowth.FIXED
-					) {
-						itemComponent.render(animate);
-					}
-				});
-			});
-
-		parent
-			.selectAll(`div.layout-child-${this._instanceID}`)
-			.style('height', null)
-			.style('width', null)
-			.each(function (d: any) {
-				// Calculate preffered children sizes after internal rendering
-				const growth = Tools.getProperty(d, 'growth');
-
-				const renderType = Tools.getProperty(d, 'renderType');
-				const matchingElementDimensions =
-					renderType === RenderTypes.SVG
-						? DOMUtils.getSVGElementSize(
-								select(this).select('svg.layout-svg-wrapper'),
-								{
-									useBBox: true,
-								}
-						  )
-						: DOMUtils.getHTMLElementSize(this);
-
-				if (growth === LayoutGrowth.PREFERRED) {
-					const matchingElementWidth = horizontal
-						? matchingElementDimensions.width
-						: matchingElementDimensions.height;
-					const elementWidth = horizontal ? width : height;
-
-					d.size = (matchingElementWidth / elementWidth) * 100;
-				}
-			});
-
-		updatedBoxes.exit().remove();
-
-		// Run through stretch x-items
-		this.children
-			.filter((child) => {
-				const growth = Tools.getProperty(child, 'growth');
-				return growth === LayoutGrowth.STRETCH;
-			})
-			.forEach((child, i) => {
-				child.size =
-					(100 - +this.getPreferedAndFixedSizeSum()) /
-					+this.getNumOfStretchChildren();
-			});
-
-		// Update all boxes with new sizing
-		const allUpdatedBoxes = parent
-			.selectAll(`div.layout-child-${this._instanceID}`)
-			.data(this.children, (d: any) => d.id);
-
-		if (horizontal) {
-			allUpdatedBoxes
-				.style('width', (d) => `${(d.size / 100) * width}px`)
-				.style('height', '100%');
-		} else {
-			allUpdatedBoxes
-				.style('height', (d) => `${(d.size / 100) * height}px`)
-				.style('width', '100%');
-		}
-
-		allUpdatedBoxes.each(function (d: any, i) {
-			d.components.forEach((itemComponent) => {
-				const growth = Tools.getProperty(d, 'growth');
-				if (growth === LayoutGrowth.STRETCH) {
-					itemComponent.render(animate);
-				}
-			});
-		});
-	}
-
-	// Pass on model to children as well
-	setModel(newObj) {
-		super.setModel(newObj);
-
-		this.children.forEach((child) => {
-			child.components.forEach((component) => component.setModel(newObj));
-		});
-	}
-
-	// Pass on essentials to children as well
-	setServices(newObj) {
-		super.setServices(newObj);
-
-		this.children.forEach((child) => {
-			child.components.forEach((component) =>
-				component.setServices(newObj)
-			);
-		});
-	}
-
-	destroy() {
-		this.children.forEach((child) => {
-			child.components.forEach((component) => component.destroy());
-		});
-	}
-}

package/src/components/layout/spacer.ts

@@ -1,20 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import * as Configuration from '../../configuration';
-
-export class Spacer extends Component {
-	type = 'spacer';
-
-	render() {
-		this.getComponentContainer()
-			.style(
-				'width',
-				`${this.configs.size || Configuration.spacers.default.size}px`
-			)
-			.style(
-				'height',
-				`${this.configs.size || Configuration.spacers.default.size}px`
-			)
-			.attr('opacity', 0);
-	}
-}