@carbon/charts 0.59.0-beta.0 → 1.0.3

package/demo/data/time-series-axis.ts

@@ -1,468 +0,0 @@
-import frLocaleObject from 'date-fns/locale/fr/index';
-
-// 15seconds
-export const lineTimeSeriesData15seconds = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 11, 10, 23, 59, 15), value: 10 },
-				{ date: new Date(2020, 11, 10, 23, 59, 30), value: 15 },
-				{ date: new Date(2020, 11, 10, 23, 59, 45), value: 7 },
-				{ date: new Date(2020, 11, 11, 0, 0, 0), value: 2 },
-				{ date: new Date(2020, 11, 11, 0, 0, 15), value: 9 },
-				{ date: new Date(2020, 11, 11, 0, 0, 30), value: 13 },
-				{ date: new Date(2020, 11, 11, 0, 0, 45), value: 8 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeries15secondsOptions = {
-	title: 'Line (time series) - Time interval 15seconds',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// minute
-export const lineTimeSeriesDataMinute = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 4, 21, 23, 40), value: 10 },
-				{ date: new Date(2020, 4, 21, 23, 50), value: 10 },
-				{ date: new Date(2020, 4, 21, 23, 55), value: 10 },
-				{ date: new Date(2020, 4, 22, 0, 0), value: 10 },
-				{ date: new Date(2020, 4, 22, 0, 5), value: 10 },
-				{ date: new Date(2020, 4, 22, 0, 7), value: 10 },
-				{ date: new Date(2020, 4, 22, 0, 10), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesMinuteOptions = {
-	title: 'Line (time series) - Time interval minute',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// 30minutes
-export const lineTimeSeriesData30minutes = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 11, 10, 23, 0), value: 10 },
-				{ date: new Date(2020, 11, 10, 23, 30), value: 10 },
-				{ date: new Date(2020, 11, 11, 0, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 0, 30), value: 10 },
-				{ date: new Date(2020, 11, 11, 1, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 1, 30), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeries30minutesOptions = {
-	title: 'Line (time series) - Time interval 30minutes',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// hourly with default ticks formats
-export const lineTimeSeriesDataHourlyDefaultTicksFormats = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 11, 10, 22, 0), value: 10 },
-				{ date: new Date(2020, 11, 10, 23, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 0, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 1, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 2, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 3, 0), value: 10 },
-				{ date: new Date(2020, 11, 11, 4, 0), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesHourlyDefaultLocaleOptions = {
-	title:
-		"Line (time series) - Time interval hourly with default ticks formats ('MMM d, hh a' and 'hh a')",
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// hourly with custom ticks formats
-export const lineTimeSeriesDataHourlyCustomTicksFormats = lineTimeSeriesDataHourlyDefaultTicksFormats;
-
-export const lineTimeSeriesHourlyCustomTicksFormatsOptions = {
-	title:
-		"Line (time series) - Time interval hourly with custom ticks formats ('MMM d, HH:mm' and 'HH:mm')",
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		timeIntervalFormats: {
-			hourly: { primary: 'MMM d, HH:mm', secondary: 'HH:mm' },
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// daily
-export const lineTimeSeriesDataDaily = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2019, 11, 30), value: 10 },
-				{ date: new Date(2019, 11, 31), value: 10 },
-				{ date: new Date(2020, 0, 1), value: 10 },
-				{ date: new Date(2020, 0, 2), value: 10 },
-				{ date: new Date(2020, 0, 3), value: 10 },
-				{ date: new Date(2020, 0, 4), value: 10 },
-				{ date: new Date(2020, 0, 5), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesDailyOptions = {
-	title: 'Line (time series) - Time interval daily',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// weekly
-export const lineTimeSeriesDataWeekly = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2019, 11, 30), value: 10 },
-				{ date: new Date(2019, 11, 31), value: 10 },
-				{ date: new Date(2020, 0, 1), value: 10 },
-				{ date: new Date(2020, 0, 2), value: 10 },
-				{ date: new Date(2020, 0, 3), value: 10 },
-				{ date: new Date(2020, 0, 4), value: 10 },
-				{ date: new Date(2020, 0, 5), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesWeeklyOptions = {
-	title: 'Line (time series) - Time interval weekly',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		showDayName: true,
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// monthly with default locale
-export const lineTimeSeriesDataMonthlyDefaultLocale = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2019, 9), value: 10 },
-				{ date: new Date(2019, 10), value: 10 },
-				{ date: new Date(2019, 11), value: 10 },
-				{ date: new Date(2019, 0), value: 10 },
-				{ date: new Date(2019, 1), value: 10 },
-				{ date: new Date(2019, 2), value: 10 },
-				{ date: new Date(2019, 3), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesMonthlyDefaultLocaleOptions = {
-	title: 'Line (time series) - Time interval monthly with default locale',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// monthly with custom locale
-export const lineTimeSeriesDataMonthlyCustomLocale = lineTimeSeriesDataMonthlyDefaultLocale;
-
-export const lineTimeSeriesMonthlyCustomLocaleOptions = {
-	title: 'Line (time series) - Time interval monthly with custom locale (fr)',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		localeObject: frLocaleObject,
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// quarterly
-export const lineTimeSeriesDataQuarterly = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2018, 0), value: 10 },
-				{ date: new Date(2018, 3), value: 10 },
-				{ date: new Date(2018, 6), value: 10 },
-				{ date: new Date(2018, 9), value: 10 },
-				{ date: new Date(2019, 0), value: 10 },
-				{ date: new Date(2019, 3), value: 10 },
-				{ date: new Date(2019, 6), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesQuarterlyOptions = {
-	title: 'Line (time series) - Time interval quarterly',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// yearly
-export const lineTimeSeriesDataYearly = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(1977, 0), value: 10 },
-				{ date: new Date(1978, 0), value: 10 },
-				{ date: new Date(1979, 0), value: 10 },
-				{ date: new Date(1980, 0), value: 10 },
-				{ date: new Date(1981, 0), value: 10 },
-				{ date: new Date(1982, 0), value: 10 },
-				{ date: new Date(1983, 0), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesYearlyOptions = {
-	title: 'Line (time series) - Time interval yearly',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// single datum
-export const lineTimeSeriesDataSingleDatum = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [{ date: new Date('2020-01-06T19:43:16Z'), value: 10 }],
-		},
-	],
-};
-
-export const lineTimeSeriesSingleDatumOptions = {
-	title: 'Line (time series) - Single datum',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// addSpaceOnEdges = 0
-export const lineTimeSeriesNoExtendedDomainData = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2019, 11, 30), value: 10 },
-				{ date: new Date(2019, 11, 31), value: 10 },
-				{ date: new Date(2020, 0, 1), value: 10 },
-				{ date: new Date(2020, 0, 2), value: 10 },
-				{ date: new Date(2020, 0, 3), value: 10 },
-				{ date: new Date(2020, 0, 4), value: 10 },
-				{ date: new Date(2020, 0, 5), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesNoExtendedDomainOptions = {
-	title: 'Line (time series) - addSpaceOnEdges = 0',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		addSpaceOnEdges: 0,
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// bug two identical labels
-export const lineTimeSeriesDataTwoIdenticalLabels = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 0, 23, 23, 0), value: 10 },
-				{ date: new Date(2020, 1, 9, 23, 0), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesTwoIdenticalLabelsOptions = {
-	title: 'Line (time series) - Two identical labels',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		addSpaceOnEdges: 0,
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-export const lineTimeSeriesTwoIdenticalLabels2Options = {
-	title: 'Line (time series) - Two identical labels 2',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		addSpaceOnEdges: 0,
-	},
-	legend: {
-		clickable: false,
-	},
-};
-
-// bug all labels in primary format
-export const lineTimeSeriesDataAllLabelsInPrimaryFormat = {
-	labels: ['Qty'],
-	datasets: [
-		{
-			label: 'Dataset 1',
-			data: [
-				{ date: new Date(2020, 0, 23, 1, 0), value: 10 },
-				{ date: new Date(2020, 0, 29, 1, 0), value: 10 },
-			],
-		},
-	],
-};
-
-export const lineTimeSeriesAllLabelsInPrimaryFormatOptions = {
-	title: 'Line (time series) - All labels in primary format',
-	axes: {
-		left: {},
-		bottom: {
-			scaleType: 'time',
-		},
-	},
-	timeScale: {
-		addSpaceOnEdges: 0,
-	},
-	legend: {
-		clickable: false,
-	},
-};

package/demo/data/toolbar.ts

@@ -1,80 +0,0 @@
-import * as barChart from './bar';
-import * as lineChart from './line';
-
-// utility function to enable toolbar option
-const addToolbarOptions = (options, configs?) => {
-	options.toolbar = {
-		enabled: true,
-		numberOfIcons: 3,
-	};
-	options.zoomBar = {
-		top: {
-			enabled: true,
-		},
-	};
-	options.toolbar.controls = [
-		{
-			type: 'Zoom in',
-		},
-		{
-			type: 'Zoom out',
-		},
-		{
-			type: 'Reset zoom',
-		},
-		{
-			type: 'Custom',
-			text: 'Custom button',
-			shouldBeDisabled: () => false,
-			clickFunction: () => {
-				console.log(
-					'Custom click function executed. Event `toolbar-button-click` has also been dispatched.'
-				);
-			},
-			iconSVG: {
-				content: `<path d="M23,13H18v2h5v2H19a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2h6V15A2,2,0,0,0,23,13Zm0,8H19V19h4Z"/>
-				<path d="M13,9H9a2,2,0,0,0-2,2V23H9V18h4v5h2V11A2,2,0,0,0,13,9ZM9,16V11h4v5Z"/><rect data-name="&lt;Transparent Rectangle&gt;" width="32" height="32" style="fill: none"/>`,
-			},
-		},
-	];
-
-	if (configs) {
-		if (configs.titleSuffix) {
-			options.title += configs.titleSuffix;
-		}
-		if (configs.numberOfIcons) {
-			options.toolbar.numberOfIcons = configs.numberOfIcons;
-		}
-		if (configs.controls) {
-			options.toolbar.controls = configs.controls;
-		}
-	}
-
-	return options;
-};
-
-export const toolbarStackedBarTimeSeriesData =
-	barChart.stackedBarTimeSeriesData;
-export const toolbarStackedBarTimeSeriesOptions = addToolbarOptions(
-	Object.assign({}, barChart.stackedBarTimeSeriesOptions)
-);
-
-export const toolbarLineTimeSeriesData = lineChart.lineTimeSeriesData;
-export const toolbarLineTimeSeriesOptions = addToolbarOptions(
-	Object.assign({}, lineChart.lineTimeSeriesOptions),
-	{
-		titleSuffix: ' - two icons',
-		numberOfIcons: 2,
-		controls: [
-			{
-				type: 'Reset zoom',
-			},
-			{
-				type: 'Zoom in',
-			},
-			{
-				type: 'Zoom out',
-			},
-		],
-	}
-);