import React from 'react'; import { motion } from 'motion/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, mediumMultiDateData, multiDateData } from 'reaviz-data-utils'; export default { tags: ['snapshot'], title: 'Blocks/Area Chart/Light/Small', component: AreaChart }; export const Stacked = () => { return (

Incident Report

Threat Intel
DLP
SysLog
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={['#F1BFE9', '#EE4094', '#DE006B']} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const StackedNormalized = () => { return (

Incident Report

Threat Intel
DLP
SysLog
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={['#F1BFE9', '#EE4094', '#DE006B']} /> } gridlines={ } /> } containerClassName="overflow-hidden" />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const NonZero = () => { return (

Incident Report

new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={'#EE4094'} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const MultiSeriesSimple = () => { return (

Incident Report

DLP
Threat Intel
SysLog
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#105EFF', '#00C5F0', '#6C18E8']} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const Simple = () => { return (

Incident Report

new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#00C5F0'} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const MultiSeriesInterpolationSmooth = () => { return (

Incident Report

DLP
SysLog
Threat Intel
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#4B10A1', '#9152EE', '#5B14C5']} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const InterpolationSmooth = () => { return (

Incident Report

new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#4B10A1'} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const MultiSeriesInterpolationStep = () => { return (

Incident Report

DLP
Threat Intel
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#4B10A1', '#9152EE', '#5B14C5']} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const InterpolationStep = () => { return (

Incident Report

new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#4B10A1'} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const CircleSeries = () => { return (

Incident Report

new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={'#105EFF'} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); }; export const LargeDataset = () => { return (

Incident Report

Series 18
Series 19
Series 20
Series 21
Series 22
Series 23
Series 24
Series 25
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#535362" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={[ '#105EFF', '#0D4ED2', '#00C5F0', '#40E5D1', '#6C18E8', '#A840E8', '#C900A8', '#9152EE' ]} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); };