@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/tools.ts

@@ -1,488 +0,0 @@
-// Internal imports
-import {
-	AxisChartOptions,
-	CartesianOrientations,
-	ScaleTypes,
-	TruncationTypes,
-	LegendItemType,
-} from './interfaces';
-
-import { defaultLegendAdditionalItems } from './configuration-non-customizable';
-
-import {
-	debounce as lodashDebounce,
-	merge as lodashMerge,
-	cloneDeep as lodashCloneDeep,
-	unionBy as lodashUnionBy,
-	uniq as lodashUnique,
-	clamp as lodashClamp,
-	flatten as lodashFlatten,
-	groupBy as lodashGroupBy,
-	camelCase as lodashCamelCase,
-	isEmpty as lodashIsEmpty,
-	isEqual as lodashIsEqual,
-	flatMapDeep as lodashFlatMapDeep,
-	kebabCase as lodashKebabCase,
-	fromPairs as lodashFromPairs,
-	some as lodashSome,
-	// the imports below are needed because of typescript bug (error TS4029)
-	Cancelable,
-	DebounceSettings,
-} from 'lodash-es';
-
-// D3 Imports
-// @ts-ignore
-// ts-ignore is needed because `@types/d3`
-// is missing the `pointer` function
-import { pointer } from 'd3-selection';
-import { Numeric } from 'd3-array';
-
-// Functions
-export namespace Tools {
-	// Export these functions from lodash
-	export const debounce = lodashDebounce;
-	export const clone = lodashCloneDeep;
-	export const merge = lodashMerge;
-	export const unionBy = lodashUnionBy;
-	export const removeArrayDuplicates = lodashUnique;
-	export const clamp = lodashClamp;
-	export const flatten = lodashFlatten;
-	export const groupBy = lodashGroupBy;
-	export const camelCase = lodashCamelCase;
-	export const isEmpty = lodashIsEmpty;
-	export const isEqual = lodashIsEqual;
-	export const flatMapDeep = lodashFlatMapDeep;
-	export const kebabCase = lodashKebabCase;
-	export const fromPairs = lodashFromPairs;
-	export const some = lodashSome;
-
-	export function debounceWithD3MousePosition(fn, delay, holder) {
-		var timer = null;
-		return function () {
-			const context = this;
-			const args = arguments;
-
-			//we get the D3 event here
-			context.mousePosition = pointer(args[0], holder);
-
-			clearTimeout(timer);
-
-			timer = setTimeout(function () {
-				// and use the reference here
-				fn.apply(context, args);
-			}, delay);
-		};
-	}
-
-	/**
-	 * Returns default chart options merged with provided options,
-	 * with special cases for axes.
-	 * Axes object will not merge the not provided axes.
-	 *
-	 * @export
-	 * @param {AxisChartOptions} defaultOptions Configuration.options[chartType]
-	 * @param {AxisChartOptions} providedOptions user provided options
-	 * @returns merged options
-	 */
-	export function mergeDefaultChartOptions(
-		defaultOptions: any,
-		providedOptions: any
-	) {
-		const clonedDefaultOptions = Tools.clone(defaultOptions);
-		const providedAxesNames = Object.keys(providedOptions.axes || {});
-
-		// Use provide controls list if it exists
-		// Prevents merging and element overriding of the two lists
-		if (providedOptions?.toolbar?.controls) {
-			delete clonedDefaultOptions.toolbar.controls;
-		}
-
-		if (providedAxesNames.length === 0) {
-			delete clonedDefaultOptions.axes;
-		}
-
-		// Update deprecated options to work with the tabular data format
-		// Similar to the functionality in model.transformToTabularData()
-		for (const axisName in clonedDefaultOptions.axes) {
-			if (providedAxesNames.includes(axisName)) {
-				const providedAxisOptions = providedOptions.axes[axisName];
-
-				if (
-					providedAxisOptions['primary'] ||
-					providedAxisOptions['secondary']
-				) {
-					console.warn(
-						'`primary` & `secondary` are no longer needed for axis configurations. Read more here https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format'
-					);
-				}
-
-				const identifier = providedAxisOptions['mapsTo'];
-				if (identifier === undefined || identifier === null) {
-					const scaleType = providedAxisOptions['scaleType'];
-
-					if (scaleType === undefined || scaleType === null) {
-						providedAxisOptions['mapsTo'] = 'value';
-					} else if (scaleType === ScaleTypes.TIME) {
-						providedAxisOptions['mapsTo'] = 'date';
-					} else if (scaleType === ScaleTypes.LABELS) {
-						providedAxisOptions['mapsTo'] = 'key';
-					}
-				}
-			} else {
-				delete clonedDefaultOptions.axes[axisName];
-			}
-		}
-
-		updateLegendAdditionalItems(clonedDefaultOptions, providedOptions);
-
-		return Tools.merge(clonedDefaultOptions, providedOptions);
-	}
-
-	/**************************************
-	 *  DOM-related operations            *
-	 *************************************/
-
-	/**
-	 * Get width & height of an element
-	 *
-	 * @export
-	 * @param {any} el element to get dimensions from
-	 * @returns an object containing the width and height of el
-	 */
-	export function getDimensions(el) {
-		return {
-			width: parseFloat(
-				el.style.width.replace('px', '') || el.offsetWidth
-			),
-			height: parseFloat(
-				el.style.height.replace('px', '') || el.offsetHeight
-			),
-		};
-	}
-
-	/**
-	 * Gets elements's x and y translations from transform attribute or returns null
-	 *
-	 * @param {HTMLElement} element
-	 * @returns an object containing the translated x and y values or null
-	 */
-	export function getTranslationValues(elementRef: HTMLElement) {
-		if (!elementRef) {
-			return;
-		}
-
-		// regex to ONLY get values for translate (instead of all rotate, translate, skew, etc)
-		const translateRegex = /translate\([0-9]+\.?[0-9]*,[0-9]+\.?[0-9]*\)/;
-
-		const transformStr = elementRef
-			.getAttribute('transform')
-			.match(translateRegex);
-		if (!transformStr) {
-			return null;
-		}
-
-		// check for the match
-		if (transformStr[0]) {
-			const transforms = transformStr[0]
-				.replace(/translate\(/, '')
-				.replace(/\)/, '')
-				.split(',');
-
-			return {
-				tx: transforms[0],
-				ty: transforms[1],
-			};
-		}
-		return null;
-	}
-
-	/**************************************
-	 *  Formatting & calculations         *
-	 *************************************/
-
-	/**
-	 * Gets x and y coordinates from HTML transform attribute
-	 *
-	 * @export
-	 * @param {any} string the transform attribute string ie. transform(x,y)
-	 * @returns Returns an object with x and y offsets of the transform
-	 */
-	export function getTranformOffsets(string) {
-		const regExp = /\(([^)]+)\)/;
-		const match = regExp.exec(string)[1];
-		const xyString = match.split(',');
-
-		return {
-			x: parseFloat(xyString[0]),
-			y: parseFloat(xyString[1]),
-		};
-	}
-
-	/**
-	 * Returns string value for height/width using pixels if there isn't a specified unit of measure
-	 *
-	 * @param value string or number value to be checked for unit of measure
-	 */
-	export function formatWidthHeightValues(value) {
-		const stringValue = value.toString();
-
-		// If the value provided contains any letters
-		// Return it the same way
-		if (stringValue.match(/[a-z]/i)) {
-			return stringValue;
-		}
-
-		return stringValue + 'px';
-	}
-
-	/**
-	 * Capitalizes first letter of a string
-	 *
-	 * @export
-	 * @param {any} string the input string to perform first letter capitalization with
-	 * @returns The transformed string after first letter is capitalized
-	 */
-	export function capitalizeFirstLetter(string) {
-		return string[0].toUpperCase() + string.slice(1);
-	}
-
-	/**
-	 * Get the percentage of a datapoint compared to the entire dataset.
-	 * @export
-	 * @param {any} item
-	 * @param {any} fullData
-	 * @param {string} key
-	 * @returns The percentage in the form of a number (1 significant digit if necessary)
-	 */
-	export function convertValueToPercentage(item, fullData, key = 'value') {
-		const percentage =
-			(item / fullData.reduce((accum, val) => accum + val[key], 0)) * 100;
-		// if the value has any significant figures, keep 1
-		return percentage % 1 !== 0
-			? parseFloat(percentage.toFixed(1))
-			: percentage;
-	}
-
-	/**
-	 * Truncate the labels
-	 * @export
-	 * @param {any} fullText
-	 * @param {any} truncationType
-	 * @param {any} numCharacter
-	 * @returns Truncated text
-	 */
-	export function truncateLabel(fullText, truncationType, numCharacter) {
-		if (numCharacter > fullText.length) {
-			return fullText;
-		}
-		if (truncationType === TruncationTypes.MID_LINE) {
-			return (
-				fullText.substr(0, numCharacter / 2) +
-				'...' +
-				fullText.substr(-numCharacter / 2)
-			);
-		} else if (truncationType === TruncationTypes.FRONT_LINE) {
-			return '...' + fullText.substr(-numCharacter);
-		} else if (truncationType === TruncationTypes.END_LINE) {
-			return fullText.substr(0, numCharacter) + '...';
-		}
-	}
-
-	/**
-	 * Update legend additional items
-	 * @param {any} defaultOptions
-	 * @param {any} providedOptions
-	 */
-	export function updateLegendAdditionalItems(
-		defaultOptions,
-		providedOptions
-	) {
-		let defaultAdditionalItems = Tools.getProperty(
-			defaultOptions,
-			'legend',
-			'additionalItems'
-		);
-		const userProvidedAdditionalItems = Tools.getProperty(
-			providedOptions,
-			'legend',
-			'additionalItems'
-		);
-
-		// Retain default legend additional items
-		if (defaultAdditionalItems && userProvidedAdditionalItems) {
-			const providedTypes = userProvidedAdditionalItems.map(
-				(item) => item.type
-			);
-
-			const defaultTypes = defaultAdditionalItems.map(
-				(item) => item.type
-			);
-
-			// Get default items in default options but not in provided options
-			const updatedDefaultItems = defaultLegendAdditionalItems.filter(
-				(item) =>
-					defaultTypes.includes(item.type) &&
-					!providedTypes.includes(item.type)
-			);
-
-			defaultOptions.legend.additionalItems = updatedDefaultItems;
-
-			providedOptions.legend.additionalItems = Tools.unionBy(
-				updatedDefaultItems,
-				userProvidedAdditionalItems,
-				'name'
-			);
-		}
-	}
-
-	/**************************************
-	 *  Object/array related checks       *
-	 *************************************/
-
-	/**
-	 * Compares two arrays to return the difference between two arrays' items.
-	 *
-	 * @export
-	 * @param {any[]} oldArray the array to check for missing items
-	 * @param {any[]} newArray the array to check for newly added items
-	 * @returns An object containing items missing (existing in oldArray but not newArray)
-	 * and items added (existing in newArray but not in oldArray). Object is of the form { missing: [], added: [] }
-	 */
-	export function arrayDifferences(oldArray: any[], newArray: any[]) {
-		const difference = {
-			missing: [],
-			added: [],
-		};
-
-		oldArray.forEach((element) => {
-			if (newArray.indexOf(element) === -1) {
-				difference.missing.push(element);
-			}
-		});
-
-		newArray.forEach((element) => {
-			if (oldArray.indexOf(element) === -1) {
-				difference.added.push(element);
-			}
-		});
-
-		return difference;
-	}
-
-	/**
-	 * Gets the duplicated keys from an array of data
-	 *
-	 * @export
-	 * @param {*} data - array of data
-	 * @returns A list of the duplicated keys in data
-	 */
-	export function getDuplicateValues(arr: any) {
-		const values = [];
-		const duplicateValues = [];
-
-		arr.forEach((value) => {
-			if (
-				values.indexOf(value) !== -1 &&
-				duplicateValues.indexOf(value) === -1
-			) {
-				duplicateValues.push(value);
-			}
-
-			values.push(value);
-		});
-
-		return duplicateValues;
-	}
-
-	// ================================================================================
-	// D3 Extensions
-	// ================================================================================
-
-	/**
-	 * In D3, moves an element to the front of the canvas
-	 *
-	 * @export
-	 * @param {any} element input element to moved in front
-	 * @returns The function to be used by D3 to push element to the top of the canvas
-	 */
-	export function moveToFront(element) {
-		return element.each(function () {
-			this.parentNode.appendChild(this);
-		});
-	}
-
-	// ================================================================================
-	// Style Helpers
-	// ================================================================================
-
-	/**
-	 * Gets a speicified property from within an object.
-	 *
-	 * @param object the object containing the property to retrieve
-	 * @param propPath nested properties used to extract the final property from within the object
-	 * (i.e "style", "color" would retrieve the color property from within an object that has "color" nested within "style")
-	 */
-	export const getProperty = (object, ...propPath) => {
-		let position = object;
-		if (position) {
-			for (const prop of propPath) {
-				if (position[prop] !== null && position[prop] !== undefined) {
-					position = position[prop];
-				} else {
-					return null;
-				}
-			}
-			return position;
-		}
-
-		return null;
-	};
-
-	interface SVGPathCoordinates {
-		x0: number;
-		x1: number;
-		y0: number;
-		y1: number;
-	}
-
-	export const flipSVGCoordinatesBasedOnOrientation = (
-		verticalCoordinates: SVGPathCoordinates,
-		orientation?: CartesianOrientations
-	) => {
-		if (orientation === CartesianOrientations.HORIZONTAL) {
-			return {
-				y0: verticalCoordinates.x0,
-				y1: verticalCoordinates.x1,
-				x0: verticalCoordinates.y0,
-				x1: verticalCoordinates.y1,
-			};
-		}
-
-		return verticalCoordinates;
-	};
-
-	export const generateSVGPathString = (
-		verticalCoordinates: SVGPathCoordinates,
-		orientation?: CartesianOrientations
-	) => {
-		const { x0, x1, y0, y1 } = flipSVGCoordinatesBasedOnOrientation(
-			verticalCoordinates,
-			orientation
-		);
-
-		return `M${x0},${y0}L${x0},${y1}L${x1},${y1}L${x1},${y0}L${x0},${y0}`;
-	};
-
-	export function flipDomainAndRangeBasedOnOrientation<D, R>(
-		domain: D,
-		range: R,
-		orientation?: CartesianOrientations
-	): [D, R] | [R, D] {
-		return orientation === CartesianOrientations.VERTICAL
-			? [domain, range]
-			: [range, domain];
-	}
-
-	export const compareNumeric = (a: Numeric, b: Numeric) =>
-		Number(a) === Number(b);
-}

package/src/tsconfig.json

@@ -1,8 +0,0 @@
-{
-	"extends": "./../tsconfig.json",
-	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "../dist"
-	},
-	"include": ["**/*"]
-}

package/stories/all.stories.ts

@@ -1,139 +0,0 @@
-import { storiesOf } from '@storybook/html';
-import { withKnobs, object } from '@storybook/addon-knobs';
-
-import { storybookDemoGroups } from '../demo/data';
-import * as ChartComponents from '../src/charts';
-import * as storyUtils from '../demo/utils';
-
-import * as Configuration from '../src/configuration';
-const colorPairingOptions = Configuration.color.pairingOptions;
-
-import '../demo/styles.scss';
-
-const introStories = storiesOf('Docs|', module);
-
-// Loop through the demos for the group
-introStories.add('Welcome', () => {
-	// container creation
-	const container = document.createElement('div');
-	container.setAttribute('class', 'container intro');
-
-	container.innerHTML = `<div
-	class="welcome__container"
-	style="
-	  background: url(./welcome.png) no-repeat center center fixed;
-	  background-size: cover;
-	">
-	<div class="welcome__content">
-		<h2 class="welcome__heading">Carbon Charts</h2>
-		<h4 class="welcome__heading welcome__heading--subtitle">(vanilla)</h4>
-
-		<h5 class="welcome__heading welcome__heading--other">Other versions</h5>
-		<ul>
-			<li><a href="https://charts.carbondesignsystem.com/react" class="welcome__heading welcome__heading--other">React</a></li>
-			<li><a href="https://charts.carbondesignsystem.com/angular" class="welcome__heading welcome__heading--other">Angular</a></li>
-			<li><a href="https://charts.carbondesignsystem.com/vue" class="welcome__heading welcome__heading--other">Vue</a></li>
-			<li><a href="https://charts.carbondesignsystem.com/svelte" class="welcome__heading welcome__heading--other">Svelte</a></li>
-		</ul>
-
-		<span class="netlify">Deploys by <a href="https://netlify.com" target="_blank">Netlify</a></span>
-	</div>
-  </div>`;
-
-	return container;
-});
-
-// Loop through all demo groups
-storybookDemoGroups.forEach((demoGroup) => {
-	// Create story group for each demo group
-	const groupStories = storiesOf(
-		`${demoGroup.storyGroupTitle}|${demoGroup.title}`,
-		module
-	).addDecorator(withKnobs);
-
-	demoGroup.demos.forEach((demo) => {
-		const ClassToInitialize = ChartComponents[demo.chartType.vanilla];
-
-		// Loop through the demos for the group
-		groupStories.add(demo.title, () => {
-			// container creation
-			const container = document.createElement('div');
-			container.setAttribute('class', 'container theme--g100');
-
-			container.innerHTML = `<main>
-<div class="v10-banner">
-	This version relies on <b>Carbon v11</b>. If you're using Carbon v10, <a href="https://carbon-charts-0x.netlify.app" target="_blank" rel="noreferrer">see the legacy demo site</a>
-</div>
-
-<h3>
-	<b class="component">Component</b>
-	<span class="cds--tag cds--tag--green component-name">${
-		demo.chartType.vanilla
-	}</span>
-</h3>
-<p class="props">
-	<span><b>Props: </b><span><a href="/?path=/story/docs-tutorials--tabular-data-format">data</a>, </span><a href="https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html" target="_blank">options (opens in new window)</a></span>
-</p>
-
-${
-	demo.options.experimental
-		? `
-<div data-notification
-  class="cds--inline-notification cds--inline-notification--warning"
-  role="alert">
-  <div class="cds--inline-notification__details">
-    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--inline-notification__icon" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1	s1,0.4,1,1S10.6,16,10,16z"></path><path d="M9.2,5h1.5v7H9.2V5z M10,16c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,16,10,16z" data-icon-path="inner-path" opacity="0"></path></svg>
-    <div class="cds--inline-notification__text-wrapper">
-      <p class="cds--inline-notification__title">Alpha release</p>
-      <p class="cds--inline-notification__subtitle">This is not a stable release of this component, certain pieces might be added or modified in the future. Additionally, the current implementation might have issues that we have not uncovered yet, and will work to resolve through our stable release of the component.</p>
-    </div>
-  </div>
-</div>`
-		: ''
-}
-
-${demo.isHighScale ? storyUtils.generateHighScaleDemoDataForm() : ''}
-<div id="charting-controls">
-</div>
-
-<div class="marginTop-45" id="chart-demo">
-</div>
-
-<h3 class="marginTop-45">Code Sample</h3>
-<a href="${demo.codesandbox.vanilla}" target="_blank">
-	<img class="marginTop" src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit on Codesandbox">
-</a>
-
-<h3 class="marginTop-45">Other versions</h3>
-<p style="opacity: 0.75;">(currently on <strong>vanilla</strong>)</p>
-<div id="other-versions">
-</div>
-</main>`;
-
-			// Initialize chart
-			const chart = new ClassToInitialize(
-				container.querySelector('div#chart-demo'),
-				{
-					data: object(
-						'Data',
-						demo.isHighScale
-							? storyUtils.generateRandomData(100, 100, 500)
-							: demo.data
-					),
-					options: object('Options', demo.options),
-				}
-			);
-
-			storyUtils.addDemoDataFormListeners(container, demo, chart);
-			storyUtils.addControls(container, demoGroup, chart, {
-				colorPairingOptions,
-			});
-
-			storyUtils.addOtherVersions(container, demoGroup, demo, {
-				currentVersion: 'vanilla',
-			});
-
-			return container;
-		});
-	});
-});

package/stories/tutorials/api.ts

@@ -1,72 +0,0 @@
-import marked from 'marked';
-
-export const apiTutorial = {
-	name: 'API',
-	content: marked(`
-# API
-
-When initializing an object using any of our exposed chart types (e.g. PieChart), the object that you'll receive includes many useful elements inside it.
-
-\`\`\`js
-const myChart = new PieChart({
-	data: ...,
-	options: ...
-});
-
-console.log(myChart);
-
-// RESULT
-{
-	model, // where we store charting data & options
-	services, // globalized functions that can affect charting behaviour. (e.g. event listener dispatching etc.)
-	components // internally used for arranging the charting layout, you can disregard this
-}
-\`\`\`
-
-## Data updates
-Data updates are done through the model.
-
-\`\`\`js
-const myChart = new PieChart({
-	data: ...,
-	options: ...
-});
-
-myChart.model.setData(...);
-\`\`\`
-
-Similarly, \`myChart.model.getData();\` & \`myChart.model.getDisplayData();\` can provide you the full data that's stored or only the portion that's currently being displayed.
-
-## Option updates
-Options updates are also done through the model.
-
-\`\`\`js
-const myChart = new PieChart({
-	data: ...,
-	options: ...
-});
-
-myChart.model.setOptions(...);
-\`\`\`
-
-Similarly, \`myChart.model.getOptions();\` will provide you with the options that are stored.
-
-## What are services?
-Services are globalized functions that have proven useful across the board. General tasks such as event dispatching, transition handling, DOM-related activities etc. are handled by services.
-
-**Example:**
-
-Event listeners can be added through the events service:
-
-\`\`\`js
-barChart.services.events.addEventListener("bar-mouseover", e => {
-    console.log(e.detail);
-});
-\`\`\`
-
-## API Reference
-Our full API reference docs can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/).
-
-To get an idea of all the possible configurations in every chart type, see [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html).
-`),
-};