import React from 'react';
import { motion } from 'motion/react';
import {
AreaChart,
Count,
Heatmap,
HeatmapCell,
HeatmapSeries,
LinearXAxis,
LinearXAxisTickLabel,
LinearXAxisTickSeries,
LinearYAxis,
LinearYAxisTickLabel,
LinearYAxisTickSeries,
SequentialLegend
} from 'reaviz';
import {
heatmapLargeBlocksData,
heatmapMediumSimpleBlocksData
} from 'reaviz-data-utils';
import { schemes } from 'reaviz';
export default {
tags: ['snapshot'],
title: 'Blocks/Heatmap/Light/Large',
component: AreaChart
};
export const Simple = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const SimpleCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{
fill: '#FFC600',
filter: 'drop-shadow(0px 0px 5px #FFC600)'
},
{ fill: '#F68500' },
{ fill: '#E00007' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const SimpleHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{
fill: '#FFC600',
filter: 'drop-shadow(0px 0px 5px #FFC600)'
},
{ fill: '#F68500' },
{ fill: '#E00007' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Intensity = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const IntensityCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#8b00e066', stroke: '#9152EE', strokeWidth: '2px' },
{ fill: '#F8A340' },
{ fill: '#FFD440', filter: 'drop-shadow(0px 0px 5px #FFD440)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const IntensityHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#8b00e066', stroke: '#9152EE', strokeWidth: '2px' },
{ fill: '#F8A340' },
{ fill: '#FFD440', filter: 'drop-shadow(0px 0px 5px #FFD440)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Correlation = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const CorrelationCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#01736566' },
{ fill: '#40e5d166', stroke: '#40E5D1', strokeWidth: '2px' },
{ fill: '#40E5D1', filter: 'drop-shadow(0px 0px 5px #40E5D1)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const CorrelationHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#01736566' },
{ fill: '#40e5d166', stroke: '#40E5D1', strokeWidth: '2px' },
{ fill: '#40E5D1', filter: 'drop-shadow(0px 0px 5px #40E5D1)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Geospatial = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const GeospatialCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#202E03', stroke: '#AADC40', strokeWidth: '2px' },
{ fill: '#80CE5B' },
{ fill: '#D5EFC8', filter: 'drop-shadow(0px 0px 5px #D5EFC8)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const GeospatialHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#202E03', stroke: '#AADC40', strokeWidth: '2px' },
{ fill: '#80CE5B' },
{ fill: '#D5EFC8', filter: 'drop-shadow(0px 0px 5px #D5EFC8)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Warm = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const WarmCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#F7BFC166' },
{ fill: '#e0000766', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007', filter: 'drop-shadow(0px 0px 5px #E00007)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const WarmHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#F7BFC166' },
{ fill: '#e0000766', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007', filter: 'drop-shadow(0px 0px 5px #E00007)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Hot = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const HotCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#b7000666', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007' },
{
fill: '#F7BFC1',
filter: 'drop-shadow(0px 0px 5px #F7BFC1)'
}
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const HotHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#b7000666', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007' },
{
fill: '#F7BFC1',
filter: 'drop-shadow(0px 0px 5px #F7BFC1)'
}
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const Classic = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const ClassicCircle = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#a840e866', stroke: '#8B00E0', strokeWidth: '2px' },
{ fill: '#4C86FF' },
{ fill: '#40D3F4', filter: 'drop-shadow(0px 0px 5px #40D3F4)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};
export const ClassicHex = () => {
return (
Incident Report
}
/>
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapLargeBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(6, 8) rotate(90)';
const size = 160;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.1; // Adjust this value to make the hexagon slimmer or wider
const d = `M ${radius * slimFactor} 0
L ${(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-(radius * slimFactor) / 2} ${
(radius * Math.sqrt(3)) / 2
}
L ${-radius * slimFactor} 0
L ${-(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
}
L ${(radius * slimFactor) / 2} ${
-(radius * Math.sqrt(3)) / 2
} Z`;
if (rowNumber % 2 === 0) {
transform = 'translate(17, 8) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#a840e866', stroke: '#8B00E0', strokeWidth: '2px' },
{ fill: '#4C86FF' },
{ fill: '#40D3F4', filter: 'drop-shadow(0px 0px 5px #40D3F4)' }
]}
/>
}
/>
Critical Incidents
Compared to 293 last week
Total Incidents
Compared to 1.06k last week
);
};