@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/services/zoom.ts

@@ -1,294 +0,0 @@
-// Internal Imports
-import { AxisPositions, Events, ScaleTypes } from '../interfaces';
-import { Service } from './service';
-import { Tools } from '../tools';
-import * as Configuration from '../configuration';
-import { ChartModelCartesian } from '../model/cartesian-charts';
-
-// D3 imports
-import { extent } from 'd3-array';
-
-export class Zoom extends Service {
-	protected model: ChartModelCartesian;
-
-	isZoomBarEnabled() {
-		// CartesianScales service is only available in axis charts
-		if (!this.services.cartesianScales) {
-			return false;
-		}
-
-		// @todo - need to update this if zoom bar in other position (bottom, left, right) is supported
-		// check configuration
-		if (
-			!Tools.getProperty(
-				this.model.getOptions(),
-				'zoomBar',
-				'top',
-				'enabled'
-			)
-		) {
-			return false;
-		}
-
-		// @todo - Zoom Bar only supports main axis at BOTTOM axis and time scale for now
-		this.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()
-		const mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition();
-		const mainXScaleType = Tools.getProperty(
-			this.model.getOptions(),
-			'axes',
-			mainXAxisPosition,
-			'scaleType'
-		);
-
-		return (
-			mainXAxisPosition === AxisPositions.BOTTOM &&
-			mainXScaleType === ScaleTypes.TIME
-		);
-	}
-
-	// get display data for zoom bar
-	// basically it's sum of value grouped by time
-	getZoomBarData() {
-		const customZoomBarData = this.model.getZoomBarData();
-
-		// if user already defines zoom bar data, use it
-		if (customZoomBarData && customZoomBarData.length > 1) {
-			return customZoomBarData;
-		} else {
-			// use displayData if not defined
-			return this.model.getDisplayData();
-		}
-	}
-
-	getDefaultZoomBarDomain(zoomBarData?) {
-		const allZoomBarData =
-			zoomBarData || this.services.zoom.getZoomBarData();
-		const { cartesianScales } = this.services;
-		const mainXAxisPosition = cartesianScales.getMainXAxisPosition();
-		const domainIdentifier = cartesianScales.getDomainIdentifier();
-
-		const customDomain = Tools.getProperty(
-			this.model.getOptions(),
-			'axes',
-			mainXAxisPosition,
-			'domain'
-		);
-
-		// return custom domain if exists && valid
-		if (Array.isArray(customDomain) && customDomain.length === 2) {
-			return customDomain;
-		}
-
-		// default to full range with extended domain
-		return cartesianScales.extendsDomain(
-			mainXAxisPosition,
-			extent(allZoomBarData, (d: any) => d[domainIdentifier])
-		);
-	}
-
-	handleDomainChange(newDomain, configs = { dispatchEvent: true }) {
-		this.model.set({ zoomDomain: newDomain }, { animate: false });
-		if (configs.dispatchEvent) {
-			this.services.events.dispatchEvent(Events.ZoomDomain.CHANGE, {
-				newDomain,
-			});
-		}
-	}
-
-	getZoomRatio() {
-		return Tools.getProperty(
-			this.model.getOptions(),
-			'zoomBar',
-			'zoomRatio'
-		);
-	}
-
-	// filter out data not inside zoom domain
-	// to get better range value for axis label
-	filterDataForRangeAxis(displayData: object[], configs?: any) {
-		const zoomDomain = this.model.get('zoomDomain');
-		const mergedConfigs = Object.assign(
-			{ stacked: false }, // default configs
-			configs
-		);
-		const shouldUpdateRangeAxis = Tools.getProperty(
-			this.model.getOptions(),
-			'zoomBar',
-			'updateRangeAxis'
-		);
-		if (this.isZoomBarEnabled() && shouldUpdateRangeAxis && zoomDomain) {
-			const domainIdentifier = mergedConfigs.stacked
-				? 'sharedStackKey'
-				: this.services.cartesianScales.getDomainIdentifier();
-			const filteredData = displayData.filter(
-				(datum) =>
-					new Date(datum[domainIdentifier]) >= zoomDomain[0] &&
-					new Date(datum[domainIdentifier]) <= zoomDomain[1]
-			);
-			// if no data in zoom domain, use all data to get full range value
-			// so only return filteredData if length > 0
-			if (filteredData.length > 0) {
-				return filteredData;
-			}
-		}
-		// return original data by default
-		return displayData;
-	}
-
-	zoomIn(zoomRatio = this.getZoomRatio()) {
-		// get current zoomDomain
-		const currentZoomDomain = this.model.get('zoomDomain');
-		const handleWidth = Configuration.zoomBar.handleWidth;
-		const xScale = this.services.cartesianScales.getMainXScale().copy();
-		xScale.domain(this.getDefaultZoomBarDomain()); // reset domain to default full domain
-
-		// use scale range (rather than domain) to calculate
-		// current zoom bar handle x position
-		const currentX0 = xScale(currentZoomDomain[0]);
-		const currentX1 = xScale(currentZoomDomain[1]);
-
-		// zoom bar handles are already too close
-		if (currentX1 - currentX0 < handleWidth + 1) {
-			return;
-		}
-		const fullRange = xScale.range();
-		const gap = currentX1 - currentX0;
-		const diff = Math.min(
-			((fullRange[1] - fullRange[0]) / 2) * (zoomRatio / 2),
-			gap / 2
-		);
-
-		// new zoom bar handle x position
-		let newX0 = currentX0 + diff;
-		let newX1 = currentX1 - diff;
-		// if left handle becomes right side of right handle, just make them close to each other
-		if (newX0 >= newX1) {
-			newX0 = currentX0 + gap / 2 - handleWidth / 2;
-			newX1 = currentX1 - gap / 2 + handleWidth / 2;
-		}
-
-		const newDomain = [xScale.invert(newX0), xScale.invert(newX1)];
-
-		// only if zoomDomain needs update
-		if (
-			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
-			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
-		) {
-			this.handleDomainChange(newDomain);
-		}
-	}
-
-	zoomOut(zoomRatio = this.getZoomRatio()) {
-		// get current zoomDomain
-		const currentZoomDomain = this.model.get('zoomDomain');
-		const xScale = this.services.cartesianScales.getMainXScale().copy();
-		xScale.domain(this.getDefaultZoomBarDomain()); // reset domain to default full domain
-
-		// use scale range (rather than domain) to calculate
-		// current zoom bar handle x position
-		const currentX0 = xScale(currentZoomDomain[0]);
-		const currentX1 = xScale(currentZoomDomain[1]);
-
-		const fullRange = xScale.range();
-		const diff = ((fullRange[1] - fullRange[0]) / 2) * (zoomRatio / 2);
-
-		// new zoom bar handle x position
-		// max to full range
-		const newX0 = Math.max(currentX0 - diff, fullRange[0]);
-		const newX1 = Math.min(currentX1 + diff, fullRange[1]);
-
-		const newDomain = [xScale.invert(newX0), xScale.invert(newX1)];
-
-		// only if zoomDomain needs update
-		if (
-			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
-			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
-		) {
-			this.handleDomainChange(newDomain);
-		}
-	}
-
-	resetZoomDomain() {
-		// get current zoomDomain
-		const currentZoomDomain = this.model.get('zoomDomain');
-		const newDomain = this.getDefaultZoomBarDomain();
-
-		// only if zoomDomain needs update
-		if (
-			currentZoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
-			currentZoomDomain[1].valueOf() !== newDomain[1].valueOf()
-		) {
-			this.handleDomainChange(newDomain);
-		}
-	}
-
-	// check if current zoom domain is already the min zoom domain
-	// when toolbar is rendered, we don't render chart yet
-	// don't depend on scale range
-	isMinZoomDomain() {
-		// get current zoomDomain
-		const currentZoomDomain = this.model.get('zoomDomain');
-		// assume the max zoom domain is the default zoom bar domain
-		const maxZoomDomain = this.getDefaultZoomBarDomain();
-		if (!currentZoomDomain || !maxZoomDomain) {
-			return false;
-		}
-
-		const currentZoomDomainPeriod =
-			currentZoomDomain[1].valueOf() - currentZoomDomain[0].valueOf();
-		const maxZoomDomainPeriod =
-			maxZoomDomain[1].valueOf() - maxZoomDomain[0].valueOf();
-		const minZoomRatio = Tools.getProperty(
-			this.model.getOptions(),
-			'zoomBar',
-			'minZoomRatio'
-		);
-		// if current zoom domain is already smaller than minZoomRatio
-		if (currentZoomDomainPeriod / maxZoomDomainPeriod < minZoomRatio) {
-			return true;
-		}
-
-		return false;
-	}
-
-	// check if current zoom domain is already the max zoom domain
-	isMaxZoomDomain() {
-		// get current zoom domain
-		const currentZoomDomain = this.model.get('zoomDomain');
-		// assume the max zoom domain is the default zoom bar domain
-		const maxZoomDomain = this.getDefaultZoomBarDomain();
-
-		if (
-			currentZoomDomain &&
-			maxZoomDomain &&
-			currentZoomDomain[0].valueOf() === maxZoomDomain[0].valueOf() &&
-			currentZoomDomain[1].valueOf() === maxZoomDomain[1].valueOf()
-		) {
-			return true;
-		}
-
-		return false;
-	}
-
-	isEmptyState() {
-		return this.getZoomBarData().length === 0;
-	}
-
-	isZoomBarLoading(position) {
-		return Tools.getProperty(
-			this.model.getOptions(),
-			'zoomBar',
-			position,
-			'loading'
-		);
-	}
-
-	isZoomBarLocked(position) {
-		return Tools.getProperty(
-			this.model.getOptions(),
-			'zoomBar',
-			position,
-			'locked'
-		);
-	}
-}

package/src/styles/_chart-holder.scss

@@ -1,50 +0,0 @@
-@use "@carbon/styles/scss/theme" as *;
-@use "@carbon/styles/scss/themes";
-
-.#{$prefix}--chart-holder {
-	position: relative;
-	display: block;
-	width: 100%;
-	height: 100%;
-
-	&.filled,
-	&.fullscreen {
-		background-color: $background;
-
-		.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-			background-color: $background;
-		}
-	}
-
-	.DONT_STYLE_ME_css_styles_verifier {
-		overflow: hidden;
-		opacity: 0;
-	}
-}
-
-.#{$prefix}--chart-holder {
-	@include theme(themes.$white);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g10"] {
-	@include theme(themes.$g10);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g90"] {
-	@include theme(themes.$g90);
-}
-
-.#{$prefix}--chart-holder[data-carbon-theme="g100"] {
-	@include theme(themes.$g100);
-}
-
-.#{$prefix}--chart-holder.fullscreen,
-.#{$prefix}--chart-holder:-webkit-full-screen {
-	/* !important is used here to get closer to
-	a truly fullscreen experience */
-	width: 100% !important;
-	height: 100% !important;
-	max-width: unset !important;
-	max-height: unset !important;
-	padding: 2em;
-}

package/src/styles/_type.scss

@@ -1,44 +0,0 @@
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/layout' as *;
-
-.#{$prefix}--#{$charts-prefix}--chart-wrapper {
-	font-family: font-family('sans-condensed');
-
-	p {
-		padding: 0;
-		margin: 0;
-		font-size: 12px;
-		// TODO-V11
-		// font-weight: font-weight('regular');
-		font-weight: 400;
-		color: $text-secondary;
-	}
-
-	text {
-		font-size: 12px;
-		// TODO-V11
-		// font-weight: font-weight('regular');
-		font-weight: 400;
-		fill: $text-secondary;
-	}
-
-	g.gauge-numbers text.gauge-value-number {
-		font-family: font-family('sans');
-		// TODO-V11
-		// font-weight: font-weight('light');
-		font-weight: 300;
-	}
-
-	text.meter-title,
-	text.percent-value {
-		font-size: $base-font-size;
-		font-family: font-family('sans');
-	}
-
-	text.meter-title {
-		// TODO-V11
-		// font-weight: font-weight('semibold');
-		font-weight: 600;
-	}
-}