import React from 'react';
import { motion } from 'motion/react';
import {
Bar,
BarChart,
BarLabel,
BarSeries,
Gradient,
GradientStop,
Gridline,
GridlineSeries,
LinearXAxis,
LinearXAxisTickLabel,
LinearXAxisTickSeries,
LinearYAxis,
LinearYAxisTickLabel,
LinearYAxisTickSeries,
RangeLines,
StackedBarChart,
StackedBarSeries
} from 'reaviz';
import {
binnedDateData,
categoryData,
labelsData,
largeCategoryData2,
mediumCategoryData,
multiCategory,
multiCategorySmallBlock,
multiCategoryXSmallBlock
} from 'reaviz-data-utils';
export default {
tags: ['snapshot'],
title: 'Blocks/Bar Chart/Dark/Small',
component: BarChart
};
export const SimpleMulti = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 8)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={['#DAC5F9', '#40E5D1', '#9152EE', '#5B14C5']}
layout="vertical"
type="grouped"
groupPadding={30}
/>
}
gridlines={
} />
}
/>
);
};
export const SimpleMultiGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 8)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#DAC5F9', '#40E5D1', '#9152EE', '#5B14C5']}
layout="vertical"
type="grouped"
groupPadding={30}
/>
}
gridlines={
} />
}
/>
);
};
export const Simple = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={[
'#5B14C5',
'#9152EE',
'#40E5D1',
'#A840E8',
'#4C86FF',
'#0D4ED2',
'#40D3F4'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const SimpleGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={[
'#5B14C5',
'#9152EE',
'#40E5D1',
'#A840E8',
'#4C86FF',
'#0D4ED2',
'#40D3F4'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const Labels = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
'#0D4ED2',
'#4C86FF',
'#40D3F4',
'#40E5D1',
'#DAC5F9',
'#9152EE',
'#5B14C5'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const LabelsGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
label={}
/>
}
colorScheme={[
'#0D4ED2',
'#4C86FF',
'#40D3F4',
'#40E5D1',
'#DAC5F9',
'#9152EE',
'#5B14C5'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const Waterfall = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
type="waterfall"
colorScheme={['#40E5D1', '#40D3F4', '#4C86FF', '#9152EE']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const WaterfallGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
type="waterfall"
colorScheme={['#40E5D1', '#40D3F4', '#4C86FF', '#9152EE']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const LargeDataset = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={'#5B14C5'}
padding={0.5}
/>
}
gridlines={
} />
}
/>
);
};
export const LargeDatasetGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#5B14C5'}
padding={0.5}
/>
}
gridlines={
} />
}
/>
);
};
export const Stacked = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={['#4C86FF', '#40E5D1', '#40D3F4', '#9152EE']}
padding={0.35}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#4C86FF', '#40E5D1', '#40D3F4', '#9152EE']}
padding={0.35}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedDiverging = () => {
return (
Incident Report
} />}
xAxis={
}
/>
}
series={
}
colorScheme={['#F7BFC1', '#E84045']}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedDivergingGradient = () => {
return (
Incident Report
} />}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>,
,
]}
/>
}
/>
]}
colorScheme={['#F7BFC1', '#E84045']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStackedDivergingGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
rangeLines={}
/>,
,
]}
/>
}
rangeLines={}
/>
]}
colorScheme={['#E84045', '#F8A446']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimple = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalWaterfall = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
type="waterfall"
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalWaterfallGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
type="waterfall"
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalLabels = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
/>
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalLabelsGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
label={}
/>
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleMulti = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleMultiGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStacked = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
padding={0.35}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStackedGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
padding={0.35}
colorScheme={['#9152EE', '#40D3F4', '#40E5D1', '#4C86FF']}
/>
}
gridlines={
} />
}
/>
);
};