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/Dark/Small', component: AreaChart }; export const Stacked = () => { return (

Incident Report

Threat Intel
DLP
SysLog
new Date(v).toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }) } fill="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={['#FAE5F6', '#EE4094', '#BB015A']} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={['#FAE5F6', '#EE4094', '#BB015A']} /> } gridlines={ } /> } />
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="#9A9AAF" /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#4C86FF', '#40D3F4', '#9152EE']} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#40D3F4'} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#5B14C5', '#DAC5F9', '#B58BF3']} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#5B14C5'} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={['#5B14C5', '#DAC5F9', '#B58BF3']} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={'#5B14C5'} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ } area={ , ]} /> } /> } colorScheme={'#4C86FF'} /> } 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="#9A9AAF" /> } tickSize={70} /> } /> } yAxis={ } /> } series={ , ]} /> } /> } colorScheme={[ '#4C86FF', '#0D4ED2', '#40D3F4', '#40E5D1', '#9152EE', '#A840E8', '#D740BE', '#DAC5F9' ]} /> } gridlines={ } /> } />
Mean Time to Respond
6 Hours
Incident Response Time
4 Hours
Incident Escalation Rate
10%
); };