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/Light/X-Small',
component: AreaChart
};
export const Stacked = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={['#F1BFE9', '#EE4094', '#DE006B']}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedNormalized = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={['#F1BFE9', '#EE4094', '#DE006B']}
/>
}
gridlines={
} />
}
containerClassName="overflow-hidden"
/>
);
};
export const NonZero = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
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="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#105EFF', '#00C5F0', '#6C18E8']}
/>
}
gridlines={
} />
}
/>
);
};
export const Simple = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#00C5F0'}
/>
}
gridlines={
} />
}
/>
);
};
export const MultiSeriesInterpolationSmooth = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#4B10A1', '#9152EE', '#5B14C5']}
/>
}
gridlines={
} />
}
/>
);
};
export const InterpolationSmooth = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#4B10A1'}
/>
}
gridlines={
} />
}
/>
);
};
export const MultiSeriesInterpolationStep = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#4B10A1', '#9152EE', '#5B14C5']}
/>
}
gridlines={
} />
}
/>
);
};
export const InterpolationStep = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#4B10A1'}
/>
}
gridlines={
} />
}
/>
);
};
export const CircleSeries = () => {
return (
Incident Report
new Date(v).toLocaleDateString('en-US', {
month: 'numeric',
day: 'numeric'
})
}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
yAxis={
}
/>
}
series={
}
area={
,
]}
/>
}
/>
}
colorScheme={'#105EFF'}
/>
}
gridlines={
} />
}
/>
);
};