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/Light/Small',
component: BarChart
};
export const SimpleMulti = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 8)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={['#9152EE', '#00DCC2', '#6C18E8', '#6C18E8']}
layout="vertical"
type="grouped"
groupPadding={30}
/>
}
gridlines={
} />
}
/>
);
};
export const SimpleMultiGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 8)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#9152EE', '#00DCC2', '#6C18E8', '#6C18E8']}
layout="vertical"
type="grouped"
groupPadding={30}
/>
}
gridlines={
} />
}
/>
);
};
export const Simple = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={[
'#6C18E8',
'#6C18E8',
'#00DCC2',
'#A840E8',
'#105EFF',
'#0D4ED2',
'#40D3F4'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const SimpleGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={[
'#6C18E8',
'#6C18E8',
'#00DCC2',
'#A840E8',
'#105EFF',
'#0D4ED2',
'#40D3F4'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const Labels = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
'#0D4ED2',
'#105EFF',
'#40D3F4',
'#00DCC2',
'#9152EE',
'#6C18E8',
'#6C18E8'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const LabelsGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
label={}
/>
}
colorScheme={[
'#0D4ED2',
'#105EFF',
'#40D3F4',
'#00DCC2',
'#9152EE',
'#6C18E8',
'#6C18E8'
]}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const Waterfall = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
type="waterfall"
colorScheme={['#00DCC2', '#40D3F4', '#105EFF', '#6C18E8']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const WaterfallGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
type="waterfall"
colorScheme={['#00DCC2', '#40D3F4', '#105EFF', '#6C18E8']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const LargeDataset = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={'#6C18E8'}
padding={0.5}
/>
}
gridlines={
} />
}
/>
);
};
export const LargeDatasetGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={'#6C18E8'}
padding={0.5}
/>
}
gridlines={
} />
}
/>
);
};
export const Stacked = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
}
colorScheme={['#105EFF', '#00DCC2', '#40D3F4', '#6C18E8']}
padding={0.35}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#105EFF', '#00DCC2', '#40D3F4', '#6C18E8']}
padding={0.35}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedDiverging = () => {
return (
Incident Report
} />}
xAxis={
}
/>
}
series={
}
colorScheme={['#E84045', '#E00007']}
/>
}
gridlines={
} />
}
/>
);
};
export const StackedDivergingGradient = () => {
return (
Incident Report
} />}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>,
,
]}
/>
}
/>
]}
colorScheme={['#E84045', '#E00007']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStackedDivergingGradient = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
,
]}
/>
}
rangeLines={}
/>,
,
]}
/>
}
rangeLines={}
/>
]}
colorScheme={['#E00007', '#F8A446']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimple = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalWaterfall = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
type="waterfall"
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalWaterfallGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
type="waterfall"
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalLabels = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
/>
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalLabelsGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
label={}
/>
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
padding={0.2}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleMulti = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalSimpleMultiGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStacked = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
}
padding={0.35}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
/>
}
gridlines={
} />
}
/>
);
};
export const HorizontalStackedGradient = () => {
return (
Incident Report
`${text.slice(0, 5)}...`}
fill="#535362"
/>
}
/>
}
/>
}
xAxis={
}
/>
}
series={
,
]}
/>
}
/>
}
padding={0.35}
colorScheme={['#6C18E8', '#40D3F4', '#00DCC2', '#105EFF']}
/>
}
gridlines={
} />
}
/>
);
};