@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/model/heatmap.ts

@@ -1,337 +0,0 @@
-// Internal Imports
-import { AxisFlavor, ScaleTypes } from '../interfaces';
-import { ChartModelCartesian } from './cartesian-charts';
-import { Tools } from '../tools';
-
-// d3 imports
-import { extent } from 'd3-array';
-import { scaleQuantize, scaleLinear } from 'd3-scale';
-
-/** The gauge chart model layer */
-export class HeatmapModel extends ChartModelCartesian {
-	protected axisFlavor = AxisFlavor.HOVERABLE;
-	private _colorScale: any = undefined;
-
-	// List of unique ranges and domains
-	private _domains = [];
-	private _ranges = [];
-
-	private _matrix = {};
-
-	constructor(services: any) {
-		super(services);
-
-		// Check which scale types are being used
-		const axis = Tools.getProperty(this.getOptions(), 'axes');
-
-		// Need to check options since scale service hasn't been instantiated
-		if (
-			(!!Tools.getProperty(axis, 'left', 'scaleType') &&
-				Tools.getProperty(axis, 'left', 'scaleType') !==
-					ScaleTypes.LABELS) ||
-			(!!Tools.getProperty(axis, 'right', 'scaleType') &&
-				Tools.getProperty(axis, 'right', 'scaleType') !==
-					ScaleTypes.LABELS) ||
-			(!!Tools.getProperty(axis, 'top', 'scaleType') &&
-				Tools.getProperty(axis, 'top', 'scaleType') !==
-					ScaleTypes.LABELS) ||
-			(!!Tools.getProperty(axis, 'bottom', 'scaleType') &&
-				Tools.getProperty(axis, 'bottom', 'scaleType') !==
-					ScaleTypes.LABELS)
-		) {
-			throw Error('Heatmap only supports label scaletypes.');
-		}
-	}
-
-	/**
-	 * Get min and maximum value of the display data
-	 * @returns Array consisting of smallest and largest values in  data
-	 */
-	getValueDomain() {
-		const limits = extent(this.getDisplayData(), (d: any) => d.value);
-		const domain = scaleLinear()
-			.domain(limits as [number, number])
-			.nice()
-			.domain();
-
-		// Ensuring limits start at 0 to make scale look more `nicer`
-		if (domain[0] > 0) {
-			domain[0] = 0;
-		}
-
-		// Ensure the median of the range is 0 if domain extends into both negative & positive
-		if (domain[0] < 0 && domain[1] > 0) {
-			if (Math.abs(domain[0]) > domain[1]) {
-				domain[1] = Math.abs(domain[0]);
-			} else {
-				domain[0] = -domain[1];
-			}
-		}
-
-		return domain;
-	}
-
-	/**
-	 * @override
-	 * @param value
-	 * @returns string
-	 */
-	getFillColor(value: number) {
-		return this._colorScale(value);
-	}
-
-	/**
-	 * Generate a list of all unique domains
-	 * @returns String[]
-	 */
-	getUniqueDomain(): string[] {
-		if (Tools.isEmpty(this._domains)) {
-			const displayData = this.getDisplayData();
-			const { cartesianScales } = this.services;
-
-			const domainIdentifier = cartesianScales.getDomainIdentifier();
-			const mainXAxisPosition = cartesianScales.getMainXAxisPosition();
-			const customDomain = cartesianScales.getCustomDomainValuesByposition(
-				mainXAxisPosition
-			);
-
-			// Use user defined domain if specified
-			if (!!customDomain) {
-				return customDomain;
-			}
-
-			// Get unique axis values & create a matrix
-			this._domains = Array.from(
-				new Set(
-					displayData.map((d) => {
-						return d[domainIdentifier];
-					})
-				)
-			);
-		}
-
-		return this._domains;
-	}
-
-	/**
-	 * Generates a list of all unique ranges
-	 * @returns String[]
-	 */
-	getUniqueRanges(): string[] {
-		if (Tools.isEmpty(this._ranges)) {
-			const displayData = this.getDisplayData();
-			const { cartesianScales } = this.services;
-
-			const rangeIdentifier = cartesianScales.getRangeIdentifier();
-			const mainYAxisPosition = cartesianScales.getMainYAxisPosition();
-			const customDomain = cartesianScales.getCustomDomainValuesByposition(
-				mainYAxisPosition
-			);
-
-			// Use user defined domain if specified
-			if (!!customDomain) {
-				return customDomain;
-			}
-
-			// Get unique axis values & create a matrix
-			this._ranges = Array.from(
-				new Set(
-					displayData.map((d) => {
-						return d[rangeIdentifier];
-					})
-				)
-			);
-		}
-
-		return this._ranges;
-	}
-
-	/**
-	 * Generates a matrix (If doesn't exist) and returns it
-	 * @returns Object
-	 */
-	getMatrix() {
-		if (Tools.isEmpty(this._matrix)) {
-			const uniqueDomain = this.getUniqueDomain();
-			const uniqueRange = this.getUniqueRanges();
-
-			const domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
-			const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
-
-			// Create a column
-			const range = {};
-			uniqueRange.forEach((ran: any) => {
-				// Initialize matrix to empty state
-				range[ran] = {
-					value: null,
-					index: -1,
-				};
-			});
-
-			// Complete the matrix by cloning the column to all domains
-			uniqueDomain.forEach((dom: any) => {
-				this._matrix[dom] = Tools.clone(range);
-			});
-
-			// Fill in user passed data
-			this.getDisplayData().forEach((d, i) => {
-				this._matrix[d[domainIdentifier]][d[rangeIdentifier]] = {
-					value: d['value'],
-					index: i,
-				};
-			});
-		}
-
-		return this._matrix;
-	}
-
-	/**
-	 *
-	 * @param newData The new raw data to be set
-	 */
-	setData(newData) {
-		const sanitizedData = this.sanitize(Tools.clone(newData));
-		const dataGroups = this.generateDataGroups(sanitizedData);
-
-		this.set({
-			data: sanitizedData,
-			dataGroups,
-		});
-
-		// Set attributes to empty
-		this._domains = [];
-		this._ranges = [];
-		this._matrix = {};
-
-		return sanitizedData;
-	}
-
-	/**
-	 * Converts Object matrix into a single array
-	 * @returns Object[]
-	 */
-	getMatrixAsArray(): Object[] {
-		if (Tools.isEmpty(this._matrix)) {
-			this.getMatrix();
-		}
-
-		const uniqueDomain = this.getUniqueDomain();
-		const uniqueRange = this.getUniqueRanges();
-
-		const domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
-		const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
-
-		const arr = [];
-		uniqueDomain.forEach((domain) => {
-			uniqueRange.forEach((range) => {
-				const element = {
-					value: this._matrix[domain][range].value,
-					index: this._matrix[domain][range].index,
-				};
-				element[domainIdentifier] = domain;
-				element[rangeIdentifier] = range;
-				arr.push(element);
-			});
-		});
-
-		return arr;
-	}
-
-	/**
-	 * Generate tabular data from display data
-	 * @returns Array<Object>
-	 */
-	getTabularDataArray() {
-		const displayData = this.getDisplayData();
-
-		const {
-			primaryDomain,
-			primaryRange,
-			secondaryDomain,
-			secondaryRange,
-		} = this.assignRangeAndDomains();
-
-		let domainValueFormatter;
-
-		const result = [
-			[primaryDomain.label, primaryRange.label, 'Value'],
-			...displayData.map((datum) => [
-				datum[primaryDomain.identifier] === null
-					? '&ndash;'
-					: domainValueFormatter
-					? domainValueFormatter(datum[primaryDomain.identifier])
-					: datum[primaryDomain.identifier],
-				datum[primaryRange.identifier] === null
-					? '&ndash;'
-					: datum[primaryRange.identifier].toLocaleString(),
-				datum['value'],
-			]),
-		];
-
-		return result;
-	}
-
-	// Uses quantize scale to return class names
-	getColorClassName(configs: { value?: number; originalClassName?: string }) {
-		return `${configs.originalClassName} ${this._colorScale(
-			configs.value as number
-		)}`;
-	}
-
-	protected setColorClassNames() {
-		const options = this.getOptions();
-
-		const customColors = Tools.getProperty(
-			options,
-			'color',
-			'gradient',
-			'colors'
-		);
-		const customColorsEnabled = !Tools.isEmpty(customColors);
-
-		let colorPairingOption = Tools.getProperty(
-			options,
-			'color',
-			'pairing',
-			'option'
-		);
-
-		// If domain consists of negative and positive values, use diverging palettes
-		const domain = this.getValueDomain();
-		const colorScheme = domain[0] < 0 && domain[1] > 0 ? 'diverge' : 'mono';
-
-		// Use default color pairing options if not in defined range
-		if (
-			colorPairingOption < 1 &&
-			colorPairingOption > 4 &&
-			colorScheme === 'mono'
-		) {
-			colorPairingOption = 1;
-		} else if (
-			colorPairingOption < 1 &&
-			colorPairingOption > 2 &&
-			colorScheme === 'diverge'
-		) {
-			colorPairingOption = 1;
-		}
-
-		// Uses css classes for fill
-		const colorPairing = customColorsEnabled ? customColors : [];
-
-		if (!customColorsEnabled) {
-			// Add class names to list and the amount based on the color scheme
-			// Carbon charts has 11 colors for a single monochromatic palette & 17 for a divergent palette
-			const colorGroupingLength = colorScheme === 'diverge' ? 17 : 11;
-			for (let i = 1; i < colorGroupingLength + 1; i++) {
-				colorPairing.push(
-					`fill-${colorScheme}-${colorPairingOption}-${i}`
-				);
-			}
-		}
-
-		// Save scale type
-		this._colorScale = scaleQuantize()
-			.domain(this.getValueDomain() as [number, number])
-			.range(colorPairing);
-	}
-}

package/src/model/meter.ts

@@ -1,124 +0,0 @@
-// Internal Imports
-import * as Configuration from '../configuration';
-import { ChartModel } from './model';
-import { Tools } from '../tools';
-
-/** The meter chart model layer which extends some of the data setting options.
- * Meter only uses 1 dataset
- *  */
-
-export class MeterChartModel extends ChartModel {
-	constructor(services: any) {
-		super(services);
-	}
-
-	getMaximumDomain(data) {
-		const max = data.reduce(
-			(accumulator, datum) => accumulator + datum.value,
-			0
-		);
-		return max;
-	}
-
-	/**
-	 * Use a provided color for the bar or default to carbon color if no status provided.
-	 * Defaults to carbon color otherwise.
-	 * @param group dataset group label
-	 */
-	getFillColor(group: string) {
-		const options = this.getOptions();
-		const userProvidedScale = Tools.getProperty(options, 'color', 'scale');
-		const status = this.getStatus();
-		// user provided a fill color or there isn't a status we can use the colorScale
-		if (userProvidedScale || !status) {
-			return super.getFillColor(group);
-		} else {
-			return null;
-		}
-	}
-
-	/**
-	 * Get the associated status for the data by checking the ranges
-	 */
-	getStatus() {
-		const options = this.getOptions();
-		const dataValues = Tools.getProperty(this.getDisplayData());
-
-		const { value: totalValue } = dataValues
-			? dataValues.reduce((previous, current) => {
-					return { value: previous.value + current.value };
-			  })
-			: 0;
-
-		// use max value if the percentage is bigger than 100%
-		const boundedValue = Tools.getProperty(options, 'meter', 'proportional')
-			? totalValue
-			: totalValue > 100
-			? 100
-			: totalValue;
-
-		// user needs to supply ranges
-		const allRanges = Tools.getProperty(
-			options,
-			'meter',
-			'status',
-			'ranges'
-		);
-
-		if (allRanges) {
-			const result = allRanges.filter(
-				(step) =>
-					step.range[0] <= boundedValue &&
-					boundedValue <= step.range[1]
-			);
-			if (result.length > 0) {
-				return result[0].status;
-			}
-		}
-
-		return null;
-	}
-
-	getTabularDataArray() {
-		const displayData = this.getDisplayData();
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-		const status = this.getStatus();
-		const proportional = Tools.getProperty(
-			options,
-			'meter',
-			'proportional'
-		);
-
-		let result = [];
-		let domainMax;
-		// Display the appropriate columns and fields depending on the type of meter
-		if (proportional === null) {
-			domainMax = 100;
-			const datum = displayData[0];
-
-			result = [
-				['Group', 'Value', ...(status ? ['Status'] : [])],
-				[
-					datum[groupMapsTo],
-					datum['value'],
-					...(status ? [status] : []),
-				],
-			];
-		} else {
-			const total = Tools.getProperty(proportional, 'total');
-			domainMax = total ? total : this.getMaximumDomain(displayData);
-
-			result = [
-				['Group', 'Value', 'Percentage of total'],
-				...displayData.map((datum) => [
-					datum[groupMapsTo],
-					datum['value'],
-					((datum['value'] / domainMax) * 100).toFixed(2) + ' %',
-				]),
-			];
-		}
-
-		return result;
-	}
-}