@carbon/charts
Version:
Carbon charting components
503 lines • 17.8 kB
JavaScript
import { timeFormat } from 'd3';
export var lineData = [
{ group: 'Dataset 1', key: 'Qty', value: 34200 },
{ group: 'Dataset 1', key: 'More', value: 23500 },
{ group: 'Dataset 1', key: 'Sold', value: 53100 },
{ group: 'Dataset 1', key: 'Restocking', value: 42300 },
{ group: 'Dataset 1', key: 'Misc', value: 12300 },
{ group: 'Dataset 2', key: 'Qty', value: 34200 },
{ group: 'Dataset 2', key: 'More', value: 53200 },
{ group: 'Dataset 2', key: 'Sold', value: 42300 },
{ group: 'Dataset 2', key: 'Restocking', value: 21400 },
{ group: 'Dataset 2', key: 'Misc', value: 0 },
{ group: 'Dataset 3', key: 'Qty', value: 41200 },
{ group: 'Dataset 3', key: 'More', value: 18400 },
{ group: 'Dataset 3', key: 'Sold', value: 34210 },
{ group: 'Dataset 3', key: 'Restocking', value: 1400 },
{ group: 'Dataset 3', key: 'Misc', value: 42100 },
{ group: 'Dataset 4', key: 'Qty', value: 22000 },
{ group: 'Dataset 4', key: 'More', value: 1200 },
{ group: 'Dataset 4', key: 'Sold', value: 9000 },
{ group: 'Dataset 4', key: 'Restocking', value: 24000, audienceSize: 10 },
{ group: 'Dataset 4', key: 'Misc', value: 3000, audienceSize: 10 },
];
export var lineOptions = {
title: 'Line (discrete)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
};
export var sparklineLoadingOptions = {
title: 'Sparkline (loading)',
axes: {
bottom: {
visible: false,
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
left: {
visible: false,
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
grid: {
x: {
enabled: false,
},
y: {
enabled: false,
},
},
legend: {
enabled: false,
},
tooltip: {
enabled: false,
},
points: {
enabled: false,
},
data: {
loading: true,
},
};
export var lineCenteredLegendData = lineData;
export var lineCenteredLegendOptions = {
title: 'Line (centered legend)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
legend: {
alignment: 'center',
},
};
export var lineLongLabelData = [
{ group: 'Dataset 1', key: 'Qty', value: 34200 },
{ group: 'Dataset 1', key: 'More', value: 23500 },
{ group: 'Dataset 1', key: 'Sold', value: 53100 },
{
group: 'Dataset 1',
key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
value: 42300,
},
{ group: 'Dataset 1', key: 'Misc', value: 12300 },
{ group: 'Dataset 2', key: 'Qty', value: 34200 },
{ group: 'Dataset 2', key: 'More', value: 53200 },
{ group: 'Dataset 2', key: 'Sold', value: 42300 },
{
group: 'Dataset 2',
key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
value: 21400,
},
{ group: 'Dataset 2', key: 'Misc', value: 0 },
{ group: 'Dataset 3', key: 'Qty', value: 41200 },
{ group: 'Dataset 3', key: 'More', value: 18400 },
{ group: 'Dataset 3', key: 'Sold', value: 34210 },
{
group: 'Dataset 3',
key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
value: 1400,
},
{ group: 'Dataset 3', key: 'Misc', value: 42100 },
{ group: 'LongLabelShouldBeTruncated', key: 'Qty', value: 22000 },
{ group: 'LongLabelShouldBeTruncated', key: 'More', value: 1200 },
{ group: 'LongLabelShouldBeTruncated', key: 'Sold', value: 9000 },
{
group: 'LongLabelShouldBeTruncated',
key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
value: 24000,
audienceSize: 10,
},
{
group: 'LongLabelShouldBeTruncated',
key: 'Misc',
value: 3000,
audienceSize: 10,
},
];
export var lineLongLabelOptions = {
title: 'Line (discrete with truncated labels)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
};
export var lineCustomDomainOptions = {
title: 'Line (discrete with customized domain)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
domain: ['Qty', 'More', 'Misc'],
},
left: {
domain: [10000, 50000],
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
};
export var lineSelectedGroupsData = [
{ group: 'Dataset 1', key: 'Qty', value: 34200 },
{ group: 'Dataset 1', key: 'More', value: 23500 },
{ group: 'Dataset 1', key: 'Sold', value: 53100 },
{ group: 'Dataset 1', key: 'Restocking', value: 42300 },
{ group: 'Dataset 1', key: 'Misc', value: 12300 },
{ group: 'Dataset 2', key: 'Qty', value: 34200 },
{ group: 'Dataset 2', key: 'More', value: 56000 },
{ group: 'Dataset 2', key: 'Sold', value: 42300 },
{ group: 'Dataset 2', key: 'Restocking', value: 21400 },
{ group: 'Dataset 2', key: 'Misc', value: 0 },
{ group: 'Dataset 3', key: 'Qty', value: 41200 },
{ group: 'Dataset 3', key: 'More', value: 18400 },
{ group: 'Dataset 3', key: 'Sold', value: 34210 },
{ group: 'Dataset 3', key: 'Restocking', value: 1400 },
{ group: 'Dataset 3', key: 'Misc', value: 42100 },
{ group: 'Dataset 4', key: 'Qty', value: 22000 },
{ group: 'Dataset 4', key: 'More', value: 1200 },
{ group: 'Dataset 4', key: 'Sold', value: 9000 },
{ group: 'Dataset 4', key: 'Restocking', value: 24000, audienceSize: 10 },
{ group: 'Dataset 4', key: 'Misc', value: 3000, audienceSize: 10 },
];
export var lineSelectedGroupsOptions = {
title: 'Line (selected groups)',
data: {
selectedGroups: ['Dataset 1', 'Dataset 3'],
},
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
};
export var lineCustomColorOptions = {
title: 'Line (custom colors)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
color: {
scale: {
'Dataset 1': '#925699',
'Dataset 2': '#525669',
'Dataset 3': '#725699',
'Dataset 4': '#ccc',
},
},
};
export var lineTimeSeriesData = [
{ group: 'Dataset 1', date: new Date(2019, 0, 1), value: 50000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 5), value: 65000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 8), value: null },
{ group: 'Dataset 1', date: new Date(2019, 0, 13), value: 49213 },
{ group: 'Dataset 1', date: new Date(2019, 0, 17), value: 51213 },
{ group: 'Dataset 2', date: new Date(2019, 0, 2), value: 0 },
{ group: 'Dataset 2', date: new Date(2019, 0, 6), value: 57312 },
{ group: 'Dataset 2', date: new Date(2019, 0, 8), value: 27432 },
{ group: 'Dataset 2', date: new Date(2019, 0, 15), value: 70323 },
{ group: 'Dataset 2', date: new Date(2019, 0, 19), value: 21300 },
{ group: 'Dataset 3', date: new Date(2019, 0, 1), value: 40000 },
{ group: 'Dataset 3', date: new Date(2019, 0, 5), value: null },
{ group: 'Dataset 3', date: new Date(2019, 0, 8), value: 18000 },
{ group: 'Dataset 3', date: new Date(2019, 0, 13), value: 39213 },
{ group: 'Dataset 3', date: new Date(2019, 0, 17), value: 61213 },
{ group: 'Dataset 4', date: new Date(2019, 0, 2), value: 20000 },
{ group: 'Dataset 4', date: new Date(2019, 0, 6), value: 37312 },
{ group: 'Dataset 4', date: new Date(2019, 0, 8), value: 51432 },
{ group: 'Dataset 4', date: new Date(2019, 0, 15), value: 25332 },
{ group: 'Dataset 4', date: new Date(2019, 0, 19), value: null },
];
export var lineTimeSeriesOptions = {
title: 'Line (time series)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneX',
};
export var lineTimeSeriesCustomDomainOptions = {
title: 'Line (time series with customized domain)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
domain: [new Date(2019, 0, 5), new Date(2019, 0, 15)],
mapsTo: 'date',
scaleType: 'time',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneX',
};
export var lineTimeSeriesWithThresholdsOptions = {
title: 'Line with thresholds (time series)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
thresholds: [
{
value: new Date(2019, 0, 11),
label: 'Custom formatter',
valueFormatter: timeFormat('%b %d'),
},
],
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
thresholds: [
{ value: 55000, label: 'Custom label', fillColor: 'orange' },
{ value: 10000, fillColor: '#03a9f4' },
],
},
},
curve: 'curveMonotoneX',
};
export var lineTimeSeriesDenseData = [
{ group: 'Dataset 1', date: new Date(2019, 0, 1), value: 10000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 1, 5), value: 12000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 1, 10), value: 14000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 2), value: 25000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 2, 2), value: 26000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 3), value: 10000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 3, 5), value: 10000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 3, 10), value: 12000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 5), value: 45000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 7), value: 49000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 7, 15), value: 45000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 9), value: 50000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 9, 5), value: 52000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 9, 15), value: 55000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 10), value: 50000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 12), value: 65000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 13), value: 80000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 14, 10), value: 85000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 15, 7), value: 90000 },
{ group: 'Dataset 1', date: new Date(2019, 0, 15, 18), value: 70000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 1), value: 20000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 1, 3), value: 22000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 1, 16), value: 24000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 2), value: 35000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 2, 7), value: 36000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 3), value: 20000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 3, 6), value: 20000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 3, 18), value: 22000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 5), value: 62000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 6), value: 52000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 7), value: 52000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 7, 15), value: 52000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 9), value: 60000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 9, 5), value: 62000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 9, 10), value: 62000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 12), value: 65000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 14), value: 40000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 15, 5), value: 45000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 15, 10), value: 35000 },
{ group: 'Dataset 2', date: new Date(2019, 0, 15, 18), value: 30000 },
];
export var lineTimeSeriesDenseOptions = {
title: 'Line (dense time series)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneX',
};
export var lineTimeSeriesDataRotatedTicks = [
{ group: 'Dataset 1', date: new Date(2019, 11, 30), value: 32100 },
{ group: 'Dataset 1', date: new Date(2019, 11, 31), value: 23500 },
{ group: 'Dataset 1', date: new Date(2020, 0, 1), value: 53100 },
{ group: 'Dataset 1', date: new Date(2020, 0, 2), value: 42300 },
{ group: 'Dataset 1', date: new Date(2020, 0, 3), value: 12300 },
];
export var lineTimeSeriesRotatedTicksOptions = {
title: 'Line (time series) - Rotated ticks labels',
width: '400px',
axes: {
bottom: {
scaleType: 'time',
mapsTo: 'date',
},
left: {
mapsTo: 'value',
},
},
legend: {
clickable: false,
},
};
export var lineHorizontalOptions = {
title: 'Line Horizontal (discrete)',
axes: {
left: {
title: '2019 Annual Sales Figures',
mapsTo: 'key',
scaleType: 'labels',
},
bottom: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
};
export var lineTimeSeriesHorizontalOptions = {
title: 'Line Horizontal (time series)',
axes: {
left: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
bottom: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneY',
};
// line - empty state
export var lineEmptyStateData = [];
export var lineEmptyStateOptions = {
title: 'Line (empty state)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneX',
};
// line - skeleton
export var lineSkeletonData = [];
export var lineSkeletonOptions = {
title: 'Line (skeleton)',
axes: {
bottom: {
title: '2019 Annual Sales Figures',
mapsTo: 'date',
scaleType: 'time',
},
left: {
mapsTo: 'value',
title: 'Conversion rate',
scaleType: 'linear',
},
},
curve: 'curveMonotoneX',
data: {
loading: true,
},
};
export var lineTimeSeriesDualAxesData = [
{ group: 'Temperature', date: new Date(2019, 0, 1), temp: 23 },
{ group: 'Temperature', date: new Date(2019, 1, 1), temp: 15 },
{ group: 'Temperature', date: new Date(2019, 2, 1), temp: 24 },
{ group: 'Temperature', date: new Date(2019, 3, 1), temp: 33 },
{ group: 'Temperature', date: new Date(2019, 4, 1), temp: 23 },
{ group: 'Temperature', date: new Date(2019, 5, 1), temp: 32 },
{ group: 'Temperature', date: new Date(2019, 6, 1), temp: 23 },
{ group: 'Rainfall', date: new Date(2019, 0, 1), rainfall: 50 },
{ group: 'Rainfall', date: new Date(2019, 1, 1), rainfall: 65 },
{ group: 'Rainfall', date: new Date(2019, 2, 1), rainfall: 35 },
{ group: 'Rainfall', date: new Date(2019, 3, 1), rainfall: 43 },
{ group: 'Rainfall', date: new Date(2019, 4, 1), rainfall: 53 },
{ group: 'Rainfall', date: new Date(2019, 5, 1), rainfall: 19 },
{ group: 'Rainfall', date: new Date(2019, 6, 1), rainfall: 13 },
];
export var dualLine = {
title: 'Line + Line (dual axes)',
axes: {
left: {
title: 'Temperature (°C)',
mapsTo: 'temp',
},
bottom: {
scaleType: 'time',
mapsTo: 'date',
title: 'Date',
},
right: {
title: 'Rainfall (mm)',
mapsTo: 'rainfall',
correspondingDatasets: ['Rainfall'],
},
},
curve: 'curveMonotoneX',
};
//# sourceMappingURL=../../../demo/data/line.js.map