import React from 'react';
import {
Area,
AreaChart,
AreaSeries,
Gradient,
GradientStop,
Gridline,
GridlineSeries,
Line,
LinearXAxis,
LinearXAxisTickLabel,
LinearXAxisTickSeries,
LinearYAxis,
LinearYAxisTickSeries,
PointSeries,
StackedAreaChart,
StackedAreaSeries,
StackedNormalizedAreaChart,
StackedNormalizedAreaSeries
} from 'reaviz';
import {
areaCircleSeriesV1Data,
areaMultiSeriesInterpolationSmoothData,
areaMultiSeriesInterpolationStepData,
areaMultiSeriesSimpleData,
areaSingleSeriesInterpolationSmoothData,
areaSingleSeriesInterpolationStepData,
areaSingleSeriesNonZeroData,
areaSingleSeriesSimpleData,
multiDateData
} from 'reaviz-data-utils';
export default {
tags: ['snapshot'],
title: 'Blocks/Area Chart/Dark/X-Small',
component: AreaChart
};
export const Stacked = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={['#FAE5F6', '#EE4094', '#BB015A']}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedNormalized = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={['#FAE5F6', '#EE4094', '#BB015A']}
/>
}
gridlines={
} />
}
/>
);
};
export const NonZero = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={'#EE4094'}
/>
}
gridlines={
} />
}
/>
);
};
export const MultiSeriesSimple = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#4C86FF', '#40D3F4', '#9152EE']}
/>
}
gridlines={
} />
}
/>
);
};
export const Simple = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#40D3F4'}
/>
}
gridlines={
} />
}
/>
);
};
export const MultiSeriesInterpolationSmooth = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#5B14C5', '#DAC5F9', '#B58BF3']}
/>
}
gridlines={
} />
}
/>
);
};
export const InterpolationSmooth = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#5B14C5'}
/>
}
gridlines={
} />
}
/>
);
};
export const MultiSeriesInterpolationStep = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#5B14C5', '#DAC5F9', '#B58BF3']}
/>
}
gridlines={
} />
}
/>
);
};
export const InterpolationStep = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#5B14C5'}
/>
}
gridlines={
} />
}
/>
);
};
export const CircleSeries = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#9A9AAF"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={'#4C86FF'}
/>
}
gridlines={
} />
}
/>
);
};