@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/components/essentials/title-meter.ts

@@ -1,395 +0,0 @@
-// Internal Imports
-import { Title } from './title';
-import { DOMUtils } from '../../services';
-import { Tools } from '../../tools';
-import { RenderTypes, Statuses } from './../../interfaces/enums';
-import * as Configuration from '../../configuration';
-
-export class MeterTitle extends Title {
-	type = 'meter-title';
-	renderType = RenderTypes.SVG;
-
-	render() {
-		const dataset = Tools.getProperty(this.model.getDisplayData(), 0);
-		const options = this.getOptions();
-		const svg = this.getComponentContainer();
-		const { groupMapsTo } = options.data;
-
-		const proportional = Tools.getProperty(
-			options,
-			'meter',
-			'proportional'
-		);
-
-		if (proportional) {
-			this.displayTotal();
-			this.displayBreakdownTitle();
-		} else {
-			// the title for a meter, is the label for that dataset
-			const title = svg
-				.selectAll('text.meter-title')
-				.data([dataset[groupMapsTo]]);
-
-			title
-				.enter()
-				.append('text')
-				.classed('meter-title', true)
-				.merge(title)
-				.attr('x', 0)
-				.attr('y', '1em')
-				.text((d) => d);
-
-			title.exit().remove();
-
-			// appends the associated percentage after title
-			this.appendPercentage();
-		}
-
-		// if status ranges are provided (custom or default), display indicator
-		this.displayStatus();
-
-		// get the max width of a title (with consideration for the status/percentage)
-		const maxWidth = this.getMaxTitleWidth();
-		const titleElement = DOMUtils.appendOrSelect(svg, 'text.meter-title');
-
-		if (
-			maxWidth > 0 &&
-			titleElement.node().getComputedTextLength() > maxWidth
-		) {
-			this.truncateTitle(titleElement, maxWidth);
-		}
-	}
-
-	displayBreakdownTitle() {
-		const self = this;
-		const svg = this.getComponentContainer();
-		const options = this.getOptions();
-		const datasetsTotal = this.model.getMaximumDomain(
-			this.model.getDisplayData()
-		);
-		const total = Tools.getProperty(
-			options,
-			'meter',
-			'proportional',
-			'total'
-		);
-		const unit = Tools.getProperty(options, 'meter', 'proportional', 'unit')
-			? Tools.getProperty(options, 'meter', 'proportional', 'unit')
-			: '';
-
-		let data;
-		if (datasetsTotal === total) {
-			data = null;
-		} else {
-			const difference =
-				total !== null ? total - datasetsTotal : datasetsTotal;
-			//breakdownFormatter
-			const breakdownFormatter = Tools.getProperty(
-				options,
-				'meter',
-				'proportional',
-				'breakdownFormatter'
-			);
-			data =
-				breakdownFormatter !== null
-					? breakdownFormatter({
-							datasetsTotal: datasetsTotal,
-							total: total,
-					  })
-					: `${datasetsTotal} ${unit} used (${difference} ${unit} available)`;
-		}
-
-		// the breakdown part to whole of the datasets to the overall total
-		const title = svg
-			.selectAll('text.proportional-meter-title')
-			.data([data]);
-
-		title
-			.enter()
-			.append('text')
-			.classed('proportional-meter-title', true)
-			.merge(title)
-			.attr('x', 0)
-			.attr('y', '1em')
-			.text((d) => d);
-
-		title.exit().remove();
-
-		const maxWidth = this.getMaxTitleWidth();
-		const titleElement = DOMUtils.appendOrSelect(
-			svg,
-			'text.proportional-meter-title'
-		);
-
-		if (
-			maxWidth > 0 &&
-			titleElement.node().getComputedTextLength() > maxWidth
-		) {
-			this.truncateTitle(titleElement, maxWidth);
-		}
-	}
-
-	// show the total for prop meter
-	displayTotal() {
-		const self = this;
-		const svg = this.getComponentContainer();
-		const options = this.getOptions();
-
-		const total = Tools.getProperty(
-			options,
-			'meter',
-			'proportional',
-			'total'
-		);
-
-		const totalValue = total
-			? Tools.getProperty(options, 'meter', 'proportional', 'total')
-			: this.model.getMaximumDomain(this.model.getDisplayData());
-
-		const unit = Tools.getProperty(options, 'meter', 'proportional', 'unit')
-			? Tools.getProperty(options, 'meter', 'proportional', 'unit')
-			: '';
-
-		// totalFormatter function
-		const totalFormatter = Tools.getProperty(
-			options,
-			'meter',
-			'proportional',
-			'totalFormatter'
-		);
-
-		const totalString =
-			totalFormatter !== null
-				? totalFormatter(totalValue)
-				: `${total} ${unit} total`;
-
-		const containerBounds = DOMUtils.getHTMLElementSize(
-			this.services.domUtils.getMainContainer()
-		);
-
-		// need to check if the width is 0, and try to use the parent attribute
-		// this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions
-		const containerWidth = containerBounds.width
-			? containerBounds.width
-			: this.parent.node().getAttribute('width');
-
-		const title = svg
-			.selectAll('text.proportional-meter-total')
-			.data([totalString]);
-
-		title
-			.enter()
-			.append('text')
-			.classed('proportional-meter-total', true)
-			.merge(title)
-			// Position the total text -24 pixels to add spacing between text and status icon (if status exists)
-			.attr(
-				'x',
-				this.model.getStatus()
-					? containerWidth - Configuration.meter.total.paddingRight
-					: containerWidth
-			)
-			.attr('y', '1em')
-			.attr('text-anchor', 'end')
-			.text((d) => d);
-
-		title.exit().remove();
-	}
-
-	/**
-	 * Appends the corresponding status based on the value and the peak.
-	 */
-	displayStatus() {
-		const self = this;
-		const svg = this.getComponentContainer();
-
-		const containerBounds = DOMUtils.getHTMLElementSize(
-			this.services.domUtils.getMainContainer()
-		);
-
-		// need to check if the width is 0, and try to use the parent attribute
-		// this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions
-		const containerWidth = containerBounds.width
-			? containerBounds.width
-			: 0;
-
-		// get the status from the model
-		const status = this.model.getStatus();
-		const radius = Configuration.meter.status.indicatorSize / 2;
-
-		// create a group for the icon/inner path
-		const statusGroup = DOMUtils.appendOrSelect(svg, `g.status-indicator`)
-			.attr(
-				'class',
-				status !== null ? `status-indicator status--${status}` : ''
-			)
-			.attr('transform', `translate(${containerWidth - radius}, 0)`);
-
-		const data = status ? [status] : [];
-		const icon = statusGroup.selectAll('circle.status').data(data);
-
-		icon.enter()
-			.append('circle')
-			.merge(icon)
-			.attr('class', 'status')
-			.attr('r', radius)
-			.attr('cx', 0)
-			.attr('cy', `calc(1em / 2)`);
-
-		const innerIcon = statusGroup.selectAll('path.innerFill').data(data);
-
-		innerIcon
-			.enter()
-			.append('path')
-			.merge(innerIcon)
-			.attr('d', self.getStatusIconPathString(status))
-			.attr('transform', `translate(-${radius}, 0)`)
-			.attr('class', 'innerFill');
-
-		innerIcon.exit().remove();
-		icon.exit().remove();
-	}
-
-	/**
-	 * Appends the associated percentage to the end of the title
-	 */
-	appendPercentage() {
-		const dataValue = Tools.getProperty(
-			this.model.getDisplayData(),
-			0,
-			'value'
-		);
-
-		// use the title's position to append the percentage to the end
-		const svg = this.getComponentContainer();
-		const title = DOMUtils.appendOrSelect(svg, 'text.meter-title');
-
-		// check if it is enabled
-		const data =
-			Tools.getProperty(
-				this.getOptions(),
-				'meter',
-				'statusBar',
-				'percentageIndicator',
-				'enabled'
-			) === true
-				? [dataValue]
-				: [];
-
-		// append a percentage if it is enabled, update it
-		const percentage = svg.selectAll('text.percent-value').data(data);
-
-		// the horizontal offset of the percentage value from the title
-		const offset = Configuration.meter.statusBar.paddingRight;
-
-		percentage
-			.enter()
-			.append('text')
-			.classed('percent-value', true)
-			.merge(percentage)
-			.text((d) => `${d}%`)
-			.attr(
-				'x',
-				+title.attr('x') + title.node().getComputedTextLength() + offset
-			) // set the position to after the title
-			.attr('y', title.attr('y'));
-
-		percentage.exit().remove();
-	}
-
-	/**
-	 * Uses the parent class truncate logic
-	 * @param title d3 selection of title element that will be truncated
-	 * @param titlestring the original string that needs truncation
-	 * @param maxWidth the max width the title can take
-	 */
-	truncateTitle(title, maxWidth) {
-		super.truncateTitle(title, maxWidth);
-
-		// update the position on the percentage to be inline with the title
-		const tspan = DOMUtils.appendOrSelect(this.parent, 'tspan');
-		const offset = Configuration.meter.statusBar.paddingRight;
-		const tspanLength = Math.ceil(tspan.node().getComputedTextLength());
-
-		const percentage = DOMUtils.appendOrSelect(
-			this.parent,
-			'text.percent-value'
-		);
-		percentage.attr(
-			'x',
-			+title.attr('x') +
-				title.node().getComputedTextLength() +
-				tspanLength +
-				offset
-		);
-	}
-
-	// computes the maximum space a title can take
-	protected getMaxTitleWidth() {
-		// get a reference to the title elements to calculate the size the title can be
-		const containerBounds = DOMUtils.getHTMLElementSize(
-			this.services.domUtils.getMainContainer()
-		);
-
-		const proportional = Tools.getProperty(
-			this.getOptions(),
-			'meter',
-			'proportional'
-		);
-
-		// need to check if the width is 0, and try to use the parent attribute
-		const containerWidth = containerBounds.width
-			? containerBounds.width
-			: this.parent.node().getAttribute('width');
-
-		if (proportional !== null) {
-			const total = DOMUtils.appendOrSelect(
-				this.parent,
-				'text.proportional-meter-total'
-			).node();
-
-			const totalWidth = DOMUtils.getSVGElementSize(total, {
-				useBBox: true,
-			}).width;
-
-			return (
-				containerWidth -
-				totalWidth -
-				Configuration.meter.total.paddingLeft
-			);
-		} else {
-			const percentage = DOMUtils.appendOrSelect(
-				this.parent,
-				'text.percent-value'
-			);
-			// the title needs to fit the width of the container without crowding the status, and percentage value
-			const offset = Configuration.meter.statusBar.paddingRight;
-			const percentageWidth = percentage.node().getComputedTextLength();
-
-			const statusGroup = DOMUtils.appendOrSelect(
-				this.parent,
-				'g.status-indicator'
-			).node();
-			const statusWidth =
-				DOMUtils.getSVGElementSize(statusGroup, { useBBox: true })
-					.width + Configuration.meter.status.paddingLeft;
-
-			return containerWidth - percentageWidth - offset - statusWidth;
-		}
-	}
-
-	/**
-	 * Get the associated status icon for the data
-	 * @param status the active status for the meter chart
-	 */
-	protected getStatusIconPathString(status) {
-		switch (status) {
-			case Statuses.SUCCESS:
-				return 'M6.875 11.3125 3.75 8.1875 4.74375 7.25 6.875 9.34375 11.50625 4.75 12.5 5.7375 Z';
-			case Statuses.DANGER:
-				return 'M10.7 11.5 4.5 5.3 5.3 4.5 11.5 10.7 Z';
-			case Statuses.WARNING:
-				return 'M7.9375,11.125 C7.41973305,11.125 7,11.544733 7,12.0625 C7,12.580267 7.41973305,13 7.9375,13 C8.45526695,13 8.875,12.580267 8.875,12.0625 C8.875,11.544733 8.45526695,11.125 7.9375,11.125 M7.3125, 3 8.5625, 3 8.5625, 9.875 7.3125, 9.875, 7.3125, 3 Z';
-		}
-	}
-}

package/src/components/essentials/title.spec.ts

@@ -1,48 +0,0 @@
-import { TestEnvironment } from '../../tests/index';
-
-// import the settings for the css prefixes
-import settings from 'carbon-components/es/globals/js/settings';
-
-import { options } from './../../configuration';
-import { Events } from './../../interfaces';
-
-import { select } from 'd3-selection';
-
-describe('title component', () => {
-	beforeEach(function () {
-		const testEnvironment = new TestEnvironment();
-		testEnvironment.render();
-
-		this.chart = testEnvironment.getChartReference();
-		this.testEnvironment = testEnvironment;
-	});
-
-	describe('content', () => {
-		it('should match text provided in options', function (done) {
-			const sampleTitle = 'My chart';
-
-			const chartEventsService = this.chart.services.events;
-			const renderCb = () => {
-				const title = select(
-					`g.${settings.prefix}--${options.chart.style.prefix}--title`
-				);
-
-				// Remove event listener for when chart render is finished
-				chartEventsService.removeEventListener(
-					Events.Chart.RENDER_FINISHED,
-					renderCb
-				);
-
-				expect(title.select('text').html()).toEqual(sampleTitle);
-
-				done();
-			};
-
-			// Add event listener for when chart render is finished
-			chartEventsService.addEventListener(
-				Events.Chart.RENDER_FINISHED,
-				renderCb
-			);
-		});
-	});
-});

package/src/components/essentials/title.ts

@@ -1,135 +0,0 @@
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { Events, RenderTypes } from './../../interfaces';
-import { Tools } from '../../tools';
-
-export class Title extends Component {
-	type = 'title';
-	renderType = RenderTypes.HTML;
-
-	render() {
-		const svg = this.getComponentContainer();
-		const title = Tools.getProperty(this.getOptions(), 'title');
-
-		const text = svg.selectAll('p.title').data([title]);
-
-		text.enter()
-			.append('p')
-			.classed('title', true)
-			.attr('role', 'heading')
-			.attr('aria-level', 2)
-			.merge(text)
-			.html((d) => d);
-
-		// check if title needs truncation (and tooltip support)
-		if (text.node() && text.node().offsetWidth < text.node().scrollWidth) {
-			// add events for displaying the tooltip with the title
-			const self = this;
-			text.on('mouseover', function (event) {
-				self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-					event,
-					hoveredElement: text,
-					content: text.text(),
-				});
-			})
-				.on('mousemove', function (event) {
-					self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-						event,
-					});
-				})
-				.on('mouseout', function () {
-					self.services.events.dispatchEvent(Events.Tooltip.HIDE);
-				});
-		}
-
-		text.exit().remove();
-	}
-
-	/**
-	 * Truncates title creating ellipses and attaching tooltip for exposing full title.
-	 */
-	truncateTitle(title, maxWidth) {
-		// sanity check to prevent stack overflow on binary search
-		if (maxWidth <= 0) {
-			return;
-		}
-
-		const untruncatedTitle = title.text();
-		// check if the title is too big for the containing svg
-		if (title.node().getComputedTextLength() > maxWidth) {
-			// append the ellipses to their own tspan to calculate the text length
-			title.append('tspan').text('...');
-
-			// get the bounding width including the elipses '...'
-			const tspanLength = DOMUtils.appendOrSelect(title, 'tspan')
-				.node()
-				.getComputedTextLength();
-
-			// with elipses
-			const titleString = title.text();
-
-			// get the index for creating the max length substring that fit within the svg
-			// use one less than the index to avoid crowding (the elipsis)
-			const substringIndex = this.getSubstringIndex(
-				title.node(),
-				0,
-				titleString.length - 1,
-				maxWidth - tspanLength
-			);
-
-			// use the substring as the title
-			title
-				.html(titleString.substring(0, substringIndex - 1))
-				.append('tspan')
-				.text('...');
-
-			// add events for displaying the tooltip with the title
-			const self = this;
-			title
-				.on('mouseover', function (event) {
-					self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
-						event,
-						hoveredElement: title,
-						content: untruncatedTitle,
-					});
-				})
-				.on('mousemove', function (event) {
-					self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
-						event,
-					});
-				})
-				.on('mouseout', function () {
-					self.services.events.dispatchEvent(Events.Tooltip.HIDE);
-				});
-		}
-	}
-
-	// computes the maximum space a title can take
-	protected getMaxTitleWidth() {
-		return DOMUtils.getSVGElementSize(this.parent.node(), {
-			useAttrs: true,
-		}).width;
-	}
-
-	/**
-	 * Returns the index for a maximum length substring that is less than the width parameter.
-	 * @param title the title node used for getting the text lengths of substrings
-	 * @param start the start index for the binary search
-	 * @param end the end index for the binary search
-	 * @param width the width of the svg container that holds the title
-	 */
-	protected getSubstringIndex(title, start, end, width) {
-		const mid = Math.floor((end + start) / 2);
-		if (title.getSubStringLength(0, mid) > width) {
-			return this.getSubstringIndex(title, start, mid, width);
-		} else if (title.getSubStringLength(0, mid) < width) {
-			if (title.getSubStringLength(0, mid + 1) > width) {
-				return mid;
-			}
-			return this.getSubstringIndex(title, mid, end, width);
-		} else {
-			return mid;
-		}
-	}
-}

package/src/components/essentials/tooltip-axis.ts

@@ -1,136 +0,0 @@
-import { Tooltip } from './tooltip';
-import { ColorClassNameTypes } from '../../interfaces';
-import { Tools } from '../../tools';
-
-import { get } from 'lodash-es';
-
-export class AxisChartsTooltip extends Tooltip {
-	getItems(e: CustomEvent) {
-		if (e.detail.items) {
-			return e.detail.items;
-		}
-
-		const data = e.detail.data;
-		if (!data.length || !data[0]) {
-			return [];
-		}
-
-		const options = this.getOptions();
-		const { cartesianScales } = this.services;
-		const domainIdentifier = cartesianScales.getDomainIdentifier();
-		const dualAxes = cartesianScales.isDualAxes();
-
-		// Generate default tooltip
-		const { groupMapsTo } = options.data;
-		const domainLabel = cartesianScales.getDomainLabel();
-		let rangeLabel = cartesianScales.getRangeLabel();
-
-		let domainValue = data[0][domainIdentifier];
-		let items: any[];
-		if (data.length === 1) {
-			const datum = data[0];
-			const rangeIdentifier = cartesianScales.getRangeIdentifier(datum);
-
-			if (dualAxes) {
-				const position = cartesianScales.getRangeAxisPosition({
-					datum,
-					groups: [datum[groupMapsTo]],
-				});
-				rangeLabel = cartesianScales.getScaleLabel(position);
-			}
-			const value = datum[rangeIdentifier];
-
-			items = [
-				{
-					label: domainLabel,
-					value: domainValue,
-				},
-				...(Array.isArray(value) && value.length === 2
-					? [
-							{
-								label: 'Start',
-								value: value[0],
-							},
-							{
-								label: 'End',
-								value: value[1],
-							},
-					  ]
-					: [
-							{
-								label: rangeLabel,
-								value: datum[rangeIdentifier],
-							},
-					  ]),
-			];
-
-			if (e.detail.additionalItems) {
-				e.detail.additionalItems.forEach((additionalItem) =>
-					items.push({
-						label: additionalItem.label,
-						value: additionalItem.value,
-					})
-				);
-			}
-
-			items.push({
-				label: options.tooltip.groupLabel,
-				value: datum[groupMapsTo],
-				color: this.model.getFillColor(datum[groupMapsTo]),
-				class: this.model.getColorClassName({
-					classNameTypes: [ColorClassNameTypes.TOOLTIP],
-					dataGroupName: datum[groupMapsTo],
-				}),
-			});
-		} else if (data.length > 1) {
-			items = [
-				{
-					label: domainLabel,
-					value: domainValue,
-				},
-			];
-
-			items = items.concat(
-				data
-					.map((datum) => {
-						// Format value if is array
-						const value =
-							datum[cartesianScales.getRangeIdentifier(datum)];
-
-						return {
-							label: datum[groupMapsTo],
-							value:
-								Array.isArray(value) && value.length === 2
-									? `${value[0]} - ${value[1]}`
-									: value,
-							color: this.model.getFillColor(datum[groupMapsTo]),
-							class: this.model.getColorClassName({
-								classNameTypes: [ColorClassNameTypes.TOOLTIP],
-								dataGroupName: datum[groupMapsTo],
-							}),
-						};
-					})
-					.sort((a, b) => b.value - a.value)
-			);
-
-			if (
-				!dualAxes &&
-				Tools.getProperty(options, 'tooltip', 'showTotal') === true
-			) {
-				// use the primary/only range id
-				const rangeIdentifier = cartesianScales.getRangeIdentifier();
-				items.push({
-					label: get(options, 'tooltip.totalLabel') || 'Total',
-					value: data.reduce(
-						(accumulator, datum) =>
-							accumulator + datum[rangeIdentifier],
-						0
-					),
-					bold: true,
-				});
-			}
-		}
-
-		return items;
-	}
-}