import React from 'react';
import {
Heatmap,
HeatmapCell,
HeatmapSeries,
LinearXAxis,
LinearXAxisTickLabel,
LinearXAxisTickSeries,
LinearYAxis,
LinearYAxisTickSeries,
ScatterPlot,
SequentialLegend
} from 'reaviz';
import {
heatmapXSmallBlocksData,
heatmapXSmallSimpleBlocksData
} from 'reaviz-data-utils';
import { schemes } from 'reaviz';
export default {
tags: ['snapshot'],
title: 'Blocks/Heatmap/Light/X-Small',
component: ScatterPlot
};
export const Simple = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
export const SimpleCircle = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{
fill: '#FFC600',
filter: 'drop-shadow(0px 0px 5px #FFC600)'
},
{ fill: '#F68500' },
{ fill: '#E00007' }
]}
/>
}
/>
);
};
export const SimpleHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{
fill: '#FFC600',
filter: 'drop-shadow(0px 0px 5px #FFC600)'
},
{ fill: '#F68500' },
{ fill: '#E00007' }
]}
padding={0.3}
/>
}
/>
);
};
export const Intensity = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
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)' }
]}
/>
}
/>
);
};
export const IntensityHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#8b00e066', stroke: '#9152EE', strokeWidth: '2px' },
{ fill: '#F8A340' },
{ fill: '#FFD440', filter: 'drop-shadow(0px 0px 5px #FFD440)' }
]}
padding={0.3}
/>
}
/>
);
};
export const Correlation = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
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)' }
]}
/>
}
/>
);
};
export const CorrelationyHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#01736566' },
{ fill: '#40e5d166', stroke: '#40E5D1', strokeWidth: '2px' },
{ fill: '#40E5D1', filter: 'drop-shadow(0px 0px 5px #40E5D1)' }
]}
padding={0.3}
/>
}
/>
);
};
export const Geospatial = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
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)' }
]}
/>
}
/>
);
};
export const GeospatialHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#202E03', stroke: '#AADC40', strokeWidth: '2px' },
{ fill: '#80CE5B' },
{ fill: '#D5EFC8', filter: 'drop-shadow(0px 0px 5px #D5EFC8)' }
]}
padding={0.3}
/>
}
/>
);
};
export const Warm = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
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)' }
]}
/>
}
/>
);
};
export const WarmHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#F7BFC166' },
{ fill: '#e0000766', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007', filter: 'drop-shadow(0px 0px 5px #E00007)' }
]}
padding={0.3}
/>
}
/>
);
};
export const Hot = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
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)'
}
]}
/>
}
/>
);
};
export const HotHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#b7000666', stroke: '#E00007', strokeWidth: '2px' },
{ fill: '#E00007' },
{
fill: '#F7BFC1',
filter: 'drop-shadow(0px 0px 5px #F7BFC1)'
}
]}
padding={0.3}
/>
}
/>
);
};
export const Classic = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
);
};
export const ClassicCircle = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
}
/>
}
colorScheme={[
{ fill: '#a840e866', stroke: '#8B00E0', strokeWidth: '2px' },
{ fill: '#105EFF' },
{ fill: '#40D3F4', filter: 'drop-shadow(0px 0px 5px #40D3F4)' }
]}
/>
}
/>
);
};
export const ClassicHex = () => {
return (
Incident Report
}
/>
}
xAxis={
}
tickSize={30}
/>
}
/>
}
series={
{
const rowNumber =
heatmapXSmallBlocksData?.[0]?.data?.findIndex(
(d) => d.key === data?.x
);
let transform = 'translate(2, 2) rotate(90)';
const size = 110;
const radius = Math.sqrt(size / Math.sqrt(3));
const slimFactor = 1.2; // 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(12, 2) rotate(90)';
}
return ;
}}
/>
}
colorScheme={[
{ fill: '#a840e866', stroke: '#8B00E0', strokeWidth: '2px' },
{ fill: '#105EFF' },
{ fill: '#40D3F4', filter: 'drop-shadow(0px 0px 5px #40D3F4)' }
]}
padding={0.3}
/>
}
/>
);
};