@carbon/charts 0.59.0-beta.0 → 1.0.3

package/src/services/service.ts

@@ -1,31 +0,0 @@
-import { ChartModel } from '../model/model';
-
-export class Service {
-	protected model: ChartModel;
-	protected services: any;
-
-	constructor(model: ChartModel, services: any) {
-		this.model = model;
-		this.services = services;
-
-		this.init();
-	}
-
-	init() {
-		// do nothing.
-	}
-
-	update() {
-		// do nothing.
-	}
-
-	// Used to pass down information to the components
-	setModel(newObj) {
-		this.model = newObj;
-	}
-
-	// Used to pass down services to the components
-	setServices(newObj) {
-		this.services = newObj;
-	}
-}

package/src/services/time-series.spec.ts

@@ -1,332 +0,0 @@
-import { formatTick, computeTimeIntervalName } from './time-series';
-import { TimeScaleOptions } from '../interfaces';
-import * as Configuration from '../configuration';
-import frLocaleObject from 'date-fns/locale/fr/index';
-
-type TickTuple = [Date, string];
-type Dataset = TickTuple[];
-
-const timeScaleDefaultOptions = Configuration.timeScale;
-
-const format = (
-	ticks: number[],
-	timeInterval: string,
-	timeScaleOptions: TimeScaleOptions
-): string[] => {
-	return ticks.map((tick, i) =>
-		formatTick(tick, i, timeInterval, timeScaleOptions)
-	);
-};
-
-const getTimestampsAndFormattedTicks = (dataset: Dataset) => {
-	const timestamps = dataset.map((d) => d[0].getTime());
-	const formattedTicks = dataset.map((d) => d[1]);
-	return { timestamps, formattedTicks };
-};
-
-it('should format ticks with timeInterval 15seconds', () => {
-	const dataset: Dataset = [
-		[new Date(2020, 11, 10, 23, 59, 15), 'Dec 10, 11:59:15 PM'],
-		[new Date(2020, 11, 10, 23, 59, 30), '11:59:30 PM'],
-		[new Date(2020, 11, 10, 23, 59, 45), '11:59:45 PM'],
-		[new Date(2020, 11, 11, 0, 0, 0), 'Dec 11, 12:00:00 AM'],
-		[new Date(2020, 11, 11, 0, 0, 15), '12:00:15 AM'],
-		[new Date(2020, 11, 11, 0, 0, 30), '12:00:30 AM'],
-		[new Date(2020, 11, 11, 0, 0, 45), '12:00:45 AM'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('15seconds');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval minute', () => {
-	const dataset: Dataset = [
-		[new Date(2020, 4, 21, 23, 47, 0), 'May 21, 11:47 PM'],
-		[new Date(2020, 4, 21, 23, 58, 0), '11:58 PM'],
-		[new Date(2020, 4, 21, 23, 59, 0), '11:59 PM'],
-		[new Date(2020, 4, 22, 0, 0, 0), 'May 22, 12:00 AM'],
-		[new Date(2020, 4, 22, 0, 1, 0), '12:01 AM'],
-		[new Date(2020, 4, 22, 0, 2, 0), '12:02 AM'],
-		[new Date(2020, 4, 22, 0, 3, 0), '12:03 AM'],
-		[new Date(2020, 4, 22, 11, 58, 0), '11:58 AM'],
-		[new Date(2020, 4, 22, 11, 59, 0), '11:59 AM'],
-		[new Date(2020, 4, 22, 12, 0, 0), '12:00 PM'],
-		[new Date(2020, 4, 22, 12, 1, 0, 0), '12:01 PM'],
-		[new Date(2020, 4, 22, 12, 2, 0), '12:02 PM'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('minute');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval 30minutes', () => {
-	const dataset: Dataset = [
-		[new Date(2020, 11, 10, 22, 30), 'Dec 10, 10:30 PM'],
-		[new Date(2020, 11, 10, 23, 0), '11:00 PM'],
-		[new Date(2020, 11, 10, 23, 30), '11:30 PM'],
-		[new Date(2020, 11, 11, 0, 0), 'Dec 11, 12:00 AM'],
-		[new Date(2020, 11, 11, 0, 30), '12:30 AM'],
-		[new Date(2020, 11, 11, 1, 0), '1:00 AM'],
-		[new Date(2020, 11, 11, 1, 30), '1:30 AM'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('30minutes');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval hourly', () => {
-	// hourly with default formats
-	const datasetDefaultFormats: Dataset = [
-		[new Date(2020, 11, 10, 22, 0), 'Dec 10, 10 PM'],
-		[new Date(2020, 11, 10, 23, 0), '11 PM'],
-		[new Date(2020, 11, 11, 0, 0), 'Dec 11, 12 AM'],
-		[new Date(2020, 11, 11, 1, 0), '01 AM'],
-		[new Date(2020, 11, 11, 2, 0), '02 AM'],
-		[new Date(2020, 11, 11, 3, 0), '03 AM'],
-		[new Date(2020, 11, 11, 4, 0), '04 AM'],
-		[new Date(2020, 11, 11, 11, 0), '11 AM'],
-		[new Date(2020, 11, 11, 12, 0), '12 PM'],
-		[new Date(2020, 11, 11, 13, 0), '01 PM'],
-		[new Date(2020, 11, 11, 14, 0), '02 PM'],
-		[new Date(2020, 11, 11, 15, 0), '03 PM'],
-	];
-	const {
-		timestamps: timestampsDefaultFormats,
-		formattedTicks: formattedTicksDefaultFormats,
-	} = getTimestampsAndFormattedTicks(datasetDefaultFormats);
-	const timeIntervalDefaultFormats = computeTimeIntervalName(
-		timestampsDefaultFormats
-	);
-	expect(timeIntervalDefaultFormats).toEqual('hourly');
-	expect(
-		format(
-			timestampsDefaultFormats,
-			timeIntervalDefaultFormats,
-			timeScaleDefaultOptions
-		)
-	).toEqual(formattedTicksDefaultFormats);
-
-	// hourly with custom formats
-	const datasetCustomFormats: Dataset = [
-		[new Date(2020, 11, 10, 22, 0), 'Dec 10, 22:00'],
-		[new Date(2020, 11, 10, 23, 0), '23:00'],
-		[new Date(2020, 11, 11, 0, 0), 'Dec 11, 00:00'],
-		[new Date(2020, 11, 11, 1, 0), '01:00'],
-		[new Date(2020, 11, 11, 2, 0), '02:00'],
-		[new Date(2020, 11, 11, 3, 0), '03:00'],
-		[new Date(2020, 11, 11, 4, 0), '04:00'],
-		[new Date(2020, 11, 11, 11, 0), '11:00'],
-		[new Date(2020, 11, 11, 12, 0), '12:00'],
-		[new Date(2020, 11, 11, 13, 0), '13:00'],
-		[new Date(2020, 11, 11, 14, 0), '14:00'],
-		[new Date(2020, 11, 11, 15, 0), '15:00'],
-	];
-	const {
-		timestamps: timestampsCustomFormats,
-		formattedTicks: formattedTicksCustomFormats,
-	} = getTimestampsAndFormattedTicks(datasetCustomFormats);
-	const timeIntervalCustomFormats = computeTimeIntervalName(
-		timestampsCustomFormats
-	);
-	expect(timeIntervalCustomFormats).toEqual('hourly');
-	const timeScaleCustomOptions = {
-		...timeScaleDefaultOptions,
-		timeIntervalFormats: {
-			hourly: { primary: 'MMM d, HH:mm', secondary: 'HH:mm' },
-		},
-	};
-	expect(
-		format(
-			timestampsCustomFormats,
-			timeIntervalCustomFormats,
-			timeScaleCustomOptions
-		)
-	).toEqual(formattedTicksCustomFormats);
-});
-
-it('should format ticks with timeInterval daily', () => {
-	const dataset: Dataset = [
-		[new Date(2019, 11, 30), 'Dec 30'],
-		[new Date(2019, 11, 31), '31'],
-		[new Date(2020, 0, 1), 'Jan 1'],
-		[new Date(2020, 0, 2), '2'],
-		[new Date(2020, 0, 3), '3'],
-		[new Date(2020, 0, 4), '4'],
-		[new Date(2020, 0, 5), '5'],
-		[new Date(2020, 0, 30), '30'],
-		[new Date(2020, 0, 31), '31'],
-		[new Date(2020, 1, 1), 'Feb 1'],
-		[new Date(2020, 1, 2), '2'],
-		[new Date(2020, 1, 3), '3'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('daily');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval weekly', () => {
-	const dataset: Dataset = [
-		[new Date(2020, 0, 27), 'Mon, Jan 27'],
-		[new Date(2020, 0, 28), 'Tue'],
-		[new Date(2020, 0, 29), 'Wed'],
-		[new Date(2020, 0, 30), 'Thu'],
-		[new Date(2020, 0, 31), 'Fri'],
-		[new Date(2020, 1, 1), 'Sat'],
-		[new Date(2020, 1, 2), 'Sun'],
-		[new Date(2020, 1, 3), 'Mon, Feb 3'],
-		[new Date(2020, 1, 4), 'Tue'],
-		[new Date(2020, 1, 5), 'Wed'],
-		[new Date(2020, 1, 6), 'Thu'],
-		[new Date(2020, 1, 7), 'Fri'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('daily');
-	const timeScaleCustomOptions = {
-		...timeScaleDefaultOptions,
-		showDayName: true,
-	};
-	expect(format(timestamps, timeInterval, timeScaleCustomOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval monthly', () => {
-	// monthly with default formats
-	const datasetdefaultFormats: Dataset = [
-		[new Date(2018, 9), 'Oct 2018'],
-		[new Date(2018, 10), 'Nov'],
-		[new Date(2018, 11), 'Dec'],
-		[new Date(2019, 0), 'Jan 2019'],
-		[new Date(2019, 1), 'Feb'],
-		[new Date(2019, 2), 'Mar'],
-		[new Date(2019, 3), 'Apr'],
-		[new Date(2019, 10), 'Nov'],
-		[new Date(2019, 11), 'Dec'],
-		[new Date(2020, 0), 'Jan 2020'],
-		[new Date(2020, 1), 'Feb'],
-		[new Date(2020, 2), 'Mar'],
-	];
-	const {
-		timestamps: timestampsdefaultFormats,
-		formattedTicks: formattedTicksdefaultFormats,
-	} = getTimestampsAndFormattedTicks(datasetdefaultFormats);
-	const timeIntervaldefaultFormats = computeTimeIntervalName(
-		timestampsdefaultFormats
-	);
-	expect(timeIntervaldefaultFormats).toEqual('monthly');
-	expect(
-		format(
-			timestampsdefaultFormats,
-			timeIntervaldefaultFormats,
-			timeScaleDefaultOptions
-		)
-	).toEqual(formattedTicksdefaultFormats);
-
-	// monthly with custom formats
-	const datasetCustomFormats: Dataset = [
-		[new Date(2018, 9), 'oct. 2018'],
-		[new Date(2018, 10), 'nov.'],
-		[new Date(2018, 11), 'déc.'],
-		[new Date(2019, 0), 'janv. 2019'],
-		[new Date(2019, 1), 'févr.'],
-		[new Date(2019, 2), 'mars'],
-		[new Date(2019, 3), 'avr.'],
-		[new Date(2019, 10), 'nov.'],
-		[new Date(2019, 11), 'déc.'],
-		[new Date(2020, 0), 'janv. 2020'],
-		[new Date(2020, 1), 'févr.'],
-		[new Date(2020, 2), 'mars'],
-	];
-	const {
-		timestamps: timestampsCustomFormats,
-		formattedTicks: formattedTicksCustomFormats,
-	} = getTimestampsAndFormattedTicks(datasetCustomFormats);
-	const timeIntervalCustomFormats = computeTimeIntervalName(
-		timestampsCustomFormats
-	);
-	expect(timeIntervalCustomFormats).toEqual('monthly');
-	const timeScaleCustomOptions = {
-		...timeScaleDefaultOptions,
-		localeObject: frLocaleObject,
-	};
-	expect(
-		format(
-			timestampsCustomFormats,
-			timeIntervalCustomFormats,
-			timeScaleCustomOptions
-		)
-	).toEqual(formattedTicksCustomFormats);
-});
-
-it('should format ticks with timeInterval quarterly', () => {
-	const dataset: Dataset = [
-		[new Date(2017, 0), `Q1 '17`],
-		[new Date(2017, 3), `Q2`],
-		[new Date(2017, 6), `Q3`],
-		[new Date(2017, 9), `Q4`],
-		[new Date(2018, 1), `Q1 '18`],
-		[new Date(2018, 4), `Q2`],
-		[new Date(2018, 7), `Q3`],
-		[new Date(2019, 0), `Q1 '19`],
-		[new Date(2019, 5), `Q2`],
-		[new Date(2019, 7), `Q3`],
-		[new Date(2019, 10), `Q4`],
-		[new Date(2020, 0), `Q1 '20`],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('quarterly');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});
-
-it('should format ticks with timeInterval yearly', () => {
-	const dataset: Dataset = [
-		[new Date(1977, 0), '1977'],
-		[new Date(1978, 0), '1978'],
-		[new Date(1979, 0), '1979'],
-		[new Date(1980, 0), '1980'],
-		[new Date(1981, 0), '1981'],
-		[new Date(1982, 0), '1982'],
-		[new Date(1983, 0), '1983'],
-		[new Date(2015, 0), '2015'],
-		[new Date(2016, 0), '2016'],
-		[new Date(2017, 0), '2017'],
-		[new Date(2018, 0), '2018'],
-		[new Date(2019, 0), '2019'],
-	];
-	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(
-		dataset
-	);
-	const timeInterval = computeTimeIntervalName(timestamps);
-	expect(timeInterval).toEqual('yearly');
-	expect(format(timestamps, timeInterval, timeScaleDefaultOptions)).toEqual(
-		formattedTicks
-	);
-});

package/src/services/time-series.ts

@@ -1,175 +0,0 @@
-import { format } from 'date-fns';
-import { TimeScaleOptions } from '../interfaces/axis-scales';
-import { Tools } from '../tools';
-
-// D3 Imports
-import { min } from 'd3-array';
-
-export const TIME_INTERVALS = [
-	['15seconds', 15 * 1000],
-	['minute', 60 * 1000],
-	['30minutes', 30 * 60 * 1000],
-	['hourly', 60 * 60 * 1000],
-	['daily', 24 * 60 * 60 * 1000],
-	['monthly', 30 * 24 * 60 * 60 * 1000],
-	['quarterly', 3 * 30 * 24 * 60 * 60 * 1000],
-	['yearly', 12 * 30 * 24 * 60 * 60 * 1000],
-];
-
-// Return true if the tick is a primary tick, false otherwise
-export function isTickPrimary(
-	tick: number,
-	i: number,
-	allTicks: Array<number>,
-	interval: string,
-	showDayName: boolean
-): boolean {
-	const isFirstTick = i === 0;
-	const hasANewWeekStarted = Number(format(new Date(tick), 'c')) === 2;
-	const isFirstQuarter = Number(format(new Date(tick), 'q')) === 1;
-	const previousTick = i !== 0 ? allTicks[i - 1] : null;
-	switch (interval) {
-		case '15seconds':
-			return (
-				isFirstTick ||
-				isDayOfMonthChanged(tick) ||
-				isMonthChanged(tick, previousTick) ||
-				isYearChanged(tick)
-			);
-		case 'minute':
-			return (
-				isFirstTick ||
-				isDayOfMonthChanged(tick) ||
-				isMonthChanged(tick, previousTick) ||
-				isYearChanged(tick)
-			);
-		case '30minutes':
-			return (
-				isFirstTick ||
-				isDayOfMonthChanged(tick) ||
-				isMonthChanged(tick, previousTick) ||
-				isYearChanged(tick)
-			);
-		case 'hourly':
-			return (
-				isFirstTick ||
-				isDayOfMonthChanged(tick) ||
-				isMonthChanged(tick, previousTick) ||
-				isYearChanged(tick)
-			);
-		case 'daily':
-			if (!showDayName) {
-				// daily
-				return (
-					isFirstTick ||
-					isMonthChanged(tick, previousTick) ||
-					isYearChanged(tick)
-				);
-			} else {
-				// weekly
-				return isFirstTick || hasANewWeekStarted || isYearChanged(tick);
-			}
-		case 'monthly':
-			return isFirstTick || isYearChanged(tick);
-		case 'quarterly':
-			return isFirstTick || isFirstQuarter;
-		case 'yearly':
-			return false;
-		default:
-			throw new Error(`${interval} is not a valid time interval.`);
-	}
-}
-
-// Return the formatted current tick
-export function formatTick(
-	tick: number,
-	i: number,
-	allTicks: Array<number>,
-	interval: string,
-	timeScaleOptions: TimeScaleOptions
-): string {
-	const showDayName = timeScaleOptions.showDayName;
-	const intervalConsideringAlsoShowDayNameOption =
-		interval === 'daily' && showDayName ? 'weekly' : interval;
-	const date = new Date(tick);
-	const formats = Tools.getProperty(timeScaleOptions, 'timeIntervalFormats')[
-		intervalConsideringAlsoShowDayNameOption
-	];
-	const primary = Tools.getProperty(formats, 'primary');
-	const secondary = Tools.getProperty(formats, 'secondary');
-	const formatString = isTickPrimary(tick, i, allTicks, interval, showDayName)
-		? primary
-		: secondary;
-	const locale = timeScaleOptions.localeObject;
-
-	return format(date, formatString, { locale });
-}
-
-// Given a timestamp, return an object of useful time formats
-// Use Unicode date field symbol (https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)
-export function getTimeformats(timestamp: number) {
-	const date = new Date(timestamp);
-	return {
-		M: date.getMonth() + 1, // month: 1-12
-		d: date.getDate(), // day of the month: 1-31
-		H: date.getHours(), // 24-hour clock: 0-23
-		m: date.getMinutes(), // minute: 0-59
-		s: date.getSeconds(), // seconds: 0-59
-	};
-}
-
-// Find the differences between consecutive numbers in an array
-function getConsecutiveDifferences(elements: number[]): number[] {
-	if (!elements) {
-		return;
-	}
-	return elements.slice(1).map((elem, i) => elem - elements[i]);
-}
-
-// Given a duration in ms, return the closest TIME_INTERVAL name
-function closestTimeIntervalName(duration: number): string {
-	const index = TIME_INTERVALS.reduce(
-		(nearestIndex, [intervalName, delta]: [string, number], i) => {
-			const deltaNearest = TIME_INTERVALS[nearestIndex][1] as number;
-			const oldNearestSpan = Math.abs(deltaNearest - duration);
-			const currentSpan = Math.abs(delta - duration);
-			return oldNearestSpan < currentSpan ? nearestIndex : i;
-		},
-		0
-	);
-	return TIME_INTERVALS[index][0] as string;
-}
-
-// Given an array of timestamps, return the interval name
-// between 15seconds, minute, 30minutes, hourly, daily, weekly, monthly, quarterly, yearly
-export function computeTimeIntervalName(ticks: number[]): string {
-	// special case: if the dataset has only one datum, we show the tick in the most detailed way possible
-	if (ticks.length === 1) {
-		return '15seconds';
-	}
-	const differences = getConsecutiveDifferences(ticks);
-	const minDifference = min(differences);
-	return closestTimeIntervalName(minDifference);
-}
-
-// Return true if the day of the month (D = 1-31) is changed, false otherwise
-function isDayOfMonthChanged(timestamp: number): boolean {
-	const { s, m, H } = getTimeformats(timestamp);
-	return H === 0 && m === 0 && s === 0;
-}
-
-// Return true if the month (M = 1-12) is changed from previous tick's timestamp, false otherwise
-function isMonthChanged(
-	timestamp: number,
-	previousTimestamp?: number
-): boolean {
-	const currentMonth = getTimeformats(timestamp).M;
-	const previousMonth = getTimeformats(previousTimestamp).M;
-	return currentMonth !== previousMonth;
-}
-
-// Return true if the year (YYYY) is changed, false otherwise
-function isYearChanged(timestamp: number): boolean {
-	const { M, d, s, m, H } = getTimeformats(timestamp);
-	return M === 1 && d === 1 && H === 0 && m === 0 && s === 0;
-}