@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/model/pie.ts

@@ -1,52 +0,0 @@
-// Internal Imports
-import { ChartModel } from './model';
-
-/** The charting model layer which includes mainly the chart data and options,
- * as well as some misc. information to be shared among components */
-export class PieChartModel extends ChartModel {
-	constructor(services: any) {
-		super(services);
-	}
-
-	getTabularData(data) {
-		const tabularData = super.getTabularData(data);
-
-		// if the data was changed to tabular format
-		// update the group to the key so the slices render with the correct tooltips and colors
-		if (data !== tabularData) {
-			// If a label was set for the overall dataset, reassign it to key value
-			tabularData.forEach((d) => {
-				if (d.key && d.key !== d.group) {
-					d.group = d.key;
-				}
-			});
-		}
-
-		return tabularData;
-	}
-
-	getTabularDataArray() {
-		const displayData = this.getDisplayData();
-		const options = this.getOptions();
-		const { groupMapsTo } = options.data;
-
-		const result = [
-			['Group', 'Value'],
-			...displayData.map((datum) => [
-				datum[groupMapsTo],
-				datum['value'] === null
-					? '–'
-					: datum['value'].toLocaleString(),
-			]),
-		];
-
-		return result;
-	}
-
-	sanitize(data) {
-		const tabularData = this.getTabularData(data);
-
-		// Sort data based on value
-		return tabularData.sort((a, b) => b.value - a.value);
-	}
-}

package/src/model/radar.ts

@@ -1,46 +0,0 @@
-// Internal Imports
-import { ChartModelCartesian } from './cartesian-charts';
-import { Tools } from '../tools';
-
-/** The charting model layer which includes mainly the chart data and options,
- * as well as some misc. information to be shared among components */
-export class RadarChartModel extends ChartModelCartesian {
-	constructor(services: any) {
-		super(services);
-	}
-
-	getTabularDataArray() {
-		const options = this.getOptions();
-
-		const groupedData = this.getGroupedData();
-
-		const { angle, value } = Tools.getProperty(options, 'radar', 'axes');
-
-		const additionalHeaders = Tools.getProperty(
-			groupedData,
-			'0',
-			'data'
-		).map((d) => d[angle]);
-
-		const result = [
-			['Group', ...additionalHeaders],
-			...groupedData.map((datum) => {
-				return [
-					datum['name'],
-					...additionalHeaders.map((additionalHeader, i) =>
-						Tools.getProperty(datum, 'data', i, value) !== null
-							? Tools.getProperty(
-									datum,
-									'data',
-									i,
-									value
-							  ).toLocaleString()
-							: '–'
-					),
-				];
-			}),
-		];
-
-		return result;
-	}
-}

package/src/model/tree.ts

@@ -1,42 +0,0 @@
-// Internal Imports
-import { ChartModel } from './model';
-
-/**
- * The tree chart model layer
- */
-export class TreeChartModel extends ChartModel {
-	constructor(services: any) {
-		super(services);
-	}
-
-	getTabularDataArray() {
-		const displayData = this.getDisplayData();
-
-		const result = [['Child', 'Parent']];
-
-		displayData.forEach((datum) => {
-			// Call recurisve function
-			this.getChildrenDatums(datum, result);
-			result.push([datum.name, '–']);
-		});
-
-		return result;
-	}
-
-	/**
-	 * Determine the child parent relationship in nested data
-	 * @param datum: Object
-	 * @param result: Array<Object>
-	 */
-	private getChildrenDatums(datum, result = []) {
-		// Check to see if datum has children before iterating through it
-		if (datum.children) {
-			if (datum.children.length > 0) {
-				datum.children.forEach((child) => {
-					this.getChildrenDatums(child, result);
-					result.push([child.name, datum.name]);
-				});
-			}
-		}
-	}
-}

package/src/model/treemap.ts

@@ -1,33 +0,0 @@
-// Internal Imports
-import { ChartModel } from './model';
-import { Tools } from '../tools';
-
-/**
- * The treemap chart model layer
- */
-export class TreemapChartModel extends ChartModel {
-  constructor(services: any) {
-    super(services);
-  }
-
-  getTabularDataArray() {
-    const displayData = this.getDisplayData();
-
-    const result = [['Child', 'Group', 'Value']];
-
-    displayData.forEach((datum) => {
-      if (Array.isArray(datum.children)) {
-        datum.children.forEach((child) => {
-          result.push([child.name, datum.name, child.value]);
-        });
-      } else if (
-        Tools.getProperty(datum.name) !== null &&
-        Tools.getProperty(datum.value)
-      ) {
-        result.push(["–", datum.name, datum.value]);
-      }
-    });
-
-    return result;
-  }
-}

package/src/model/wordcloud.ts

@@ -1,29 +0,0 @@
-// Internal Imports
-import { ChartModel } from './model';
-
-/** The charting model layer which includes mainly the chart data and options,
- * as well as some misc. information to be shared among components */
-export class WordCloudModel extends ChartModel {
-	constructor(services: any) {
-		super(services);
-	}
-
-	getTabularDataArray() {
-		const displayData = this.getDisplayData();
-
-		const options = this.getOptions();
-		const { fontSizeMapsTo, wordMapsTo } = options.wordCloud;
-		const { groupMapsTo } = options.data;
-
-		const result = [
-			[options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel],
-			...displayData.map((datum) => [
-				datum[wordMapsTo],
-				datum[groupMapsTo],
-				datum[fontSizeMapsTo],
-			]),
-		];
-
-		return result;
-	}
-}

package/src/polyfills.ts

@@ -1,40 +0,0 @@
-if (typeof window !== 'undefined') {
-	(function () {
-		if (typeof window['CustomEvent'] === 'function') {
-			return false;
-		}
-
-		function CustomEvent(event, params) {
-			params = params || {
-				bubbles: false,
-				cancelable: false,
-				detail: undefined,
-			};
-			const evt = document.createEvent('CustomEvent');
-			evt.initCustomEvent(
-				event,
-				params.bubbles,
-				params.cancelable,
-				params.detail
-			);
-			return evt;
-		}
-
-		CustomEvent.prototype = window['Event'].prototype;
-		window['CustomEvent'] = CustomEvent as any;
-	})();
-
-	// Avoid multiple instances of babel-polyfill
-	function idempotentBabelPolyfill() {
-		if (
-			(typeof global !== 'undefined' && !global['_babelPolyfill']) ||
-			!window['_babelPolyfill']
-		) {
-			return require('babel-polyfill');
-		}
-
-		return null;
-	}
-
-	idempotentBabelPolyfill();
-}

package/src/selectedGroups.spec.ts

@@ -1,56 +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('selectedGroups option', () => {
-	beforeEach(function () {
-		const testEnvironment = new TestEnvironment();
-		testEnvironment.render();
-
-		this.chart = testEnvironment.getChartReference();
-		this.testEnvironment = testEnvironment;
-	});
-
-	describe('selected legend labels', () => {
-		it('should match the selected groups provided in options', function (done) {
-			const sampleSelectedGroups = ['Dataset 1', 'Dataset 3'];
-
-			const chartEventsService = this.chart.services.events;
-
-			const renderCb = () => {
-				// Remove render event listener
-				chartEventsService.removeEventListener(
-					Events.Chart.RENDER_FINISHED,
-					renderCb
-				);
-
-				const selectedLegendLabels = select(
-					`g.${settings.prefix}--${options.chart.style.prefix}--legend`
-				)
-					.selectAll('g.legend-item.active > text')
-					.nodes()
-					.map((item) => item['innerHTML']);
-
-				expect(selectedLegendLabels).toEqual(sampleSelectedGroups);
-
-				done();
-			};
-
-			// Add event listener for when chart render is finished
-			chartEventsService.addEventListener(
-				Events.Chart.RENDER_FINISHED,
-				renderCb
-			);
-		});
-	});
-
-	afterEach(function () {
-		this.testEnvironment.destroy();
-	});
-});

package/src/services/angle-utils.ts

@@ -1,100 +0,0 @@
-import { TextAnchor, DominantBaseline } from '../interfaces/enums';
-
-export interface Point {
-	x: number;
-	y: number;
-}
-
-export type Angle = number;
-
-interface LabelAlignment {
-	textAnchor: TextAnchor;
-	dominantBaseline: DominantBaseline;
-}
-
-export function radialLabelPlacement(angleRadians: Angle): LabelAlignment {
-	const angle = mod(radToDeg(angleRadians), 360);
-
-	if (isInRange(angle, [0, 10]) || isInRange(angle, [350, 0])) {
-		return {
-			textAnchor: TextAnchor.START,
-			dominantBaseline: DominantBaseline.MIDDLE,
-		};
-	} else if (isInRange(angle, [10, 80])) {
-		return {
-			textAnchor: TextAnchor.START,
-			dominantBaseline: DominantBaseline.HANGING,
-		};
-	} else if (isInRange(angle, [80, 100])) {
-		return {
-			textAnchor: TextAnchor.MIDDLE,
-			dominantBaseline: DominantBaseline.HANGING,
-		};
-	} else if (isInRange(angle, [100, 170])) {
-		return {
-			textAnchor: TextAnchor.END,
-			dominantBaseline: DominantBaseline.HANGING,
-		};
-	} else if (isInRange(angle, [170, 190])) {
-		return {
-			textAnchor: TextAnchor.END,
-			dominantBaseline: DominantBaseline.MIDDLE,
-		};
-	} else if (isInRange(angle, [190, 260])) {
-		return {
-			textAnchor: TextAnchor.END,
-			dominantBaseline: DominantBaseline.BASELINE,
-		};
-	} else if (isInRange(angle, [260, 280])) {
-		return {
-			textAnchor: TextAnchor.MIDDLE,
-			dominantBaseline: DominantBaseline.BASELINE,
-		};
-	} else {
-		// 280 - 350
-		return {
-			textAnchor: TextAnchor.START,
-			dominantBaseline: DominantBaseline.BASELINE,
-		};
-	}
-}
-
-function mod(n: number, m: number) {
-	return ((n % m) + m) % m;
-}
-
-function isInRange(x: number, [min, max]: [number, number]) {
-	return x >= min && x <= max;
-}
-
-export function radToDeg(rad: Angle): Angle {
-	return rad * (180 / Math.PI);
-}
-
-export function degToRad(deg: Angle): Angle {
-	return deg * (Math.PI / 180);
-}
-
-export function polarToCartesianCoords(
-	a: Angle,
-	r: number,
-	t: Point = { x: 0, y: 0 }
-): Point {
-	const x = r * Math.cos(a) + t.x;
-	const y = r * Math.sin(a) + t.y;
-
-	// NaN is rendered at coordinate 0 in browsers
-	// By setting it to 0, further operations can be performed
-	return { x: isNaN(x) ? 0 : x, y: isNaN(y) ? 0 : y };
-}
-
-// Return the distance between a point (described with polar coordinates)
-// on a circumference and the vertical diameter.
-// If the point is on the left if the diameter, its distance is positive,
-// if it is on the right of the diameter, its distance is negative.
-export function distanceBetweenPointOnCircAndVerticalDiameter(
-	a: Angle,
-	r: number
-) {
-	return r * Math.sin(a - Math.PI / 2);
-}

package/src/services/canvas-zoom.ts

@@ -1,69 +0,0 @@
-// Internal Imports
-import { Service } from './service';
-import { Events } from './../interfaces/enums';
-import * as Configuration from '../configuration';
-// Services
-import { DOMUtils } from './essentials/dom-utils';
-import { select } from 'd3-selection';
-
-export class CanvasZoom extends Service {
-	protected model: any;
-
-	/**
-	 * focal:  object to zoom into
-	 * canvasElements: all the elements to translate and zoom on the chart area
-	 * zoomSettings: object containing duration, easing and zoomlevel for the zoom behaviours
-	 *  */
-	zoomIn(focal, canvasElements, zoomSettings?) {
-		let x;
-		let y;
-		let zoomLevel;
-		const settings = zoomSettings
-			? zoomSettings
-			: Configuration.canvasZoomSettings;
-
-		if (focal) {
-			x = focal.x;
-			y = focal.y;
-			zoomLevel = 2;
-		}
-
-		// the 'viewport' size of the chart
-		const { width, height } = DOMUtils.getSVGElementSize(
-			this.services.domUtils.getHolder(),
-			{
-				useClientDimensions: true,
-			}
-		);
-
-		canvasElements
-			.transition()
-			.duration(settings.duration)
-			.ease(settings.ease)
-			.attr(
-				'transform',
-				`translate(${width / 2}, ${
-					height / 2
-				}) scale(${zoomLevel}) translate(${-x},${-y})`
-			);
-
-		// Dispatch canvas zoom in event
-		this.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_IN, {
-			element: select(focal),
-		});
-	}
-
-	zoomOut(canvasElements, zoomSettings?) {
-		const settings = zoomSettings
-			? zoomSettings
-			: Configuration.canvasZoomSettings;
-		canvasElements
-			.transition()
-			.duration(settings.duration)
-			.ease(settings.ease)
-			.attr('transform', '');
-
-		// Dispatch canvas zoom out event
-		this.services.events.dispatchEvent(Events.CanvasZoom.CANVAS_ZOOM_OUT);
-	}
-}

package/src/services/curves.ts

@@ -1,92 +0,0 @@
-import {
-	curveBasis,
-	curveBasisClosed,
-	curveBasisOpen,
-	curveBundle,
-	curveCardinal,
-	curveCardinalClosed,
-	curveCardinalOpen,
-	curveCatmullRom,
-	curveCatmullRomClosed,
-	curveCatmullRomOpen,
-	curveLinear,
-	curveLinearClosed,
-	curveMonotoneX,
-	curveMonotoneY,
-	curveNatural,
-	curveStep,
-	curveStepAfter,
-	curveStepBefore,
-	// the imports below are needed because of typescript bug (error TS4029)
-	CurveBundleFactory,
-	CurveCardinalFactory,
-	CurveCatmullRomFactory,
-	CurveGenerator,
-} from 'd3-shape';
-
-// this import is needed because of typescript bug (error TS4029)
-import { Path } from 'd3-path';
-
-// Internal Imports
-import { Service } from './service';
-
-export class Curves extends Service {
-	curveTypes = {
-		curveLinear,
-		curveLinearClosed,
-		curveBasis,
-		curveBasisClosed,
-		curveBasisOpen,
-		curveBundle,
-		curveCardinal,
-		curveCardinalClosed,
-		curveCardinalOpen,
-		curveCatmullRom,
-		curveCatmullRomClosed,
-		curveCatmullRomOpen,
-		curveMonotoneX,
-		curveMonotoneY,
-		curveNatural,
-		curveStep,
-		curveStepAfter,
-		curveStepBefore,
-	};
-
-	getD3Curve() {
-		let curveName = 'curveLinear';
-		const curveOptions = this.model.getOptions().curve;
-
-		// Parse curve type whether the user provided a string
-		// Or an object with more options
-		if (curveOptions) {
-			if (typeof curveOptions === 'string') {
-				// curve: 'string'
-				curveName = curveOptions;
-			} else {
-				// curve: { name: 'string' }
-				curveName = curveOptions.name;
-			}
-		}
-
-		if (this.curveTypes[curveName]) {
-			// Grab correct d3 curve function
-			let curve = this.curveTypes[curveName];
-
-			// Apply user-provided options to the d3 curve
-			if (curveOptions) {
-				Object.keys(curveOptions).forEach((optionName) => {
-					if (curve[optionName]) {
-						curve = curve[optionName](curveOptions[optionName]);
-					}
-				});
-			}
-
-			return curve;
-		}
-
-		console.warn(
-			`The curve type '${curveName}' is invalid, using 'curveLinear' instead`
-		);
-		return this.curveTypes['curveLinear'];
-	}
-}