diff --git a/packages/heatmap/src/HeatMapCellCircle.tsx b/packages/heatmap/src/HeatMapCellCircle.tsx
index 01ec7400d2..f9848cef0e 100644
--- a/packages/heatmap/src/HeatMapCellCircle.tsx
+++ b/packages/heatmap/src/HeatMapCellCircle.tsx
@@ -27,6 +27,7 @@ const NonMemoizedHeatMapCellCircle = <Datum extends HeatMapDatum>({
 
     return (
         <animated.g
+            data-testid={`cell.${cell.id}`}
             style={{ cursor: 'pointer' }}
             opacity={animatedProps.opacity}
             {...handlers}
diff --git a/packages/heatmap/src/HeatMapCellRect.tsx b/packages/heatmap/src/HeatMapCellRect.tsx
index 9b9599770c..960a50565e 100644
--- a/packages/heatmap/src/HeatMapCellRect.tsx
+++ b/packages/heatmap/src/HeatMapCellRect.tsx
@@ -28,6 +28,7 @@ const NonMemoizedHeatMapCellRect = <Datum extends HeatMapDatum>({
 
     return (
         <animated.g
+            data-testid={`cell.${cell.id}`}
             style={{ cursor: 'pointer' }}
             opacity={animatedProps.opacity}
             {...handlers}
diff --git a/packages/heatmap/tests/HeatMap.test.js b/packages/heatmap/tests/HeatMap.test.js
deleted file mode 100644
index 48e9f35f1a..0000000000
--- a/packages/heatmap/tests/HeatMap.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import renderer from 'react-test-renderer'
-import { mount } from 'enzyme'
-import HeatMapCellRect from '../src/HeatMapCellRect'
-import HeatMap from '../src/HeatMap'
-
-const sampleProps = {
-    indexBy: 'age',
-    keys: ['rent', 'loan', 'income'],
-    data: [
-        {
-            age: 20,
-            rent: 30,
-            loan: 24,
-            income: 60,
-        },
-        {
-            age: 30,
-            rent: 40,
-            loan: 50,
-            income: 90,
-        },
-        {
-            age: 40,
-            rent: 20,
-            loan: 13,
-            income: 40,
-        },
-    ],
-    width: 500,
-    height: 300,
-    animate: false,
-}
-
-it('should render a basic heat map chart', () => {
-    const component = renderer.create(<HeatMap {...sampleProps} />)
-
-    let tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-})
-
-it('should allow to disable labels', () => {
-    const wrapper = mount(<HeatMap {...sampleProps} enableLabels={false} />)
-
-    const cells = wrapper.find(HeatMapCellRect)
-    expect(cells).toHaveLength(9)
-    cells.forEach(cell => {
-        expect(cell.find('text').exists()).toBe(false)
-    })
-})
-
-it('should allow to format labels', () => {
-    const wrapper = mount(
-        <HeatMap {...sampleProps} label={(datum, key) => datum[key].toFixed(2)} />
-    )
-
-    const cells = wrapper.find(HeatMapCellRect)
-    expect(cells).toHaveLength(9)
-    cells.forEach(cell => {
-        expect(cell.find('text').exists()).toBe(true)
-        expect(cell.find('text').text().length).toEqual(5)
-    })
-})
diff --git a/packages/heatmap/tests/HeatMap.test.tsx b/packages/heatmap/tests/HeatMap.test.tsx
new file mode 100644
index 0000000000..8eb3b105b2
--- /dev/null
+++ b/packages/heatmap/tests/HeatMap.test.tsx
@@ -0,0 +1,263 @@
+import { mount } from 'enzyme'
+import { Globals } from '@react-spring/web'
+// @ts-ignore
+import { HeatMap, HeatMapSvgProps, DefaultHeatMapDatum } from '../src'
+
+const baseProps: HeatMapSvgProps<DefaultHeatMapDatum, Record<string, unknown>> = {
+    width: 300,
+    height: 300,
+    data: [
+        {
+            id: 'A',
+            data: [
+                { x: 'X', y: 1 },
+                { x: 'Y', y: 2 },
+                { x: 'Z', y: 3 },
+            ],
+        },
+        {
+            id: 'B',
+            data: [
+                { x: 'X', y: 3 },
+                { x: 'Y', y: 2 },
+                { x: 'Z', y: 1 },
+            ],
+        },
+        {
+            id: 'C',
+            data: [
+                { x: 'X', y: 2 },
+                { x: 'Y', y: 2 },
+                { x: 'Z', y: 2 },
+            ],
+        },
+    ],
+}
+
+const dataPoints: {
+    id: string
+    data: DefaultHeatMapDatum
+}[] = []
+baseProps.data.forEach(serie => {
+    serie.data.forEach(datum => {
+        dataPoints.push({
+            id: `${serie.id}.${datum.x}`,
+            data: datum,
+        })
+    })
+})
+
+const CELL_SHAPES = ['rect', 'circle'] as const
+
+beforeAll(() => {
+    Globals.assign({ skipAnimation: true })
+})
+
+afterAll(() => {
+    Globals.assign({ skipAnimation: false })
+})
+
+it('should render a basic heamap chart', () => {
+    const wrapper = mount(<HeatMap {...baseProps} />)
+
+    dataPoints.forEach(datum => {
+        expect(wrapper.find(`g[data-testid='cell.${datum.id}']`).exists()).toBeTruthy()
+    })
+})
+
+describe('interactivity', () => {
+    CELL_SHAPES.forEach(shape => {
+        describe(shape, () => {
+            it('onClick', () => {
+                const onClick = jest.fn()
+                const wrapper = mount(
+                    <HeatMap {...baseProps} cellComponent={shape} onClick={onClick} />
+                )
+
+                dataPoints.forEach(datum => {
+                    wrapper.find(`g[data-testid='cell.${datum.id}']`).simulate('click')
+
+                    expect(onClick).toHaveBeenCalledTimes(1)
+                    const [data] = onClick.mock.calls[0]
+                    expect(data.id).toEqual(datum.id)
+                    expect(data.data).toEqual(datum.data)
+
+                    onClick.mockClear()
+                })
+            })
+
+            it('onMouseEnter', () => {
+                const onMouseEnter = jest.fn()
+                const wrapper = mount(
+                    <HeatMap {...baseProps} cellComponent={shape} onMouseEnter={onMouseEnter} />
+                )
+
+                dataPoints.forEach(datum => {
+                    wrapper.find(`g[data-testid='cell.${datum.id}']`).simulate('mouseenter')
+
+                    expect(onMouseEnter).toHaveBeenCalledTimes(1)
+                    const [data] = onMouseEnter.mock.calls[0]
+                    expect(data.id).toEqual(datum.id)
+                    expect(data.data).toEqual(datum.data)
+
+                    onMouseEnter.mockClear()
+                })
+            })
+
+            it('onMouseMove handler', () => {
+                const onMouseMove = jest.fn()
+                const wrapper = mount(
+                    <HeatMap {...baseProps} cellComponent={shape} onMouseMove={onMouseMove} />
+                )
+
+                dataPoints.forEach(datum => {
+                    wrapper.find(`g[data-testid='cell.${datum.id}']`).simulate('mousemove')
+
+                    expect(onMouseMove).toHaveBeenCalledTimes(1)
+                    const [data] = onMouseMove.mock.calls[0]
+                    expect(data.id).toEqual(datum.id)
+                    expect(data.data).toEqual(datum.data)
+
+                    onMouseMove.mockClear()
+                })
+            })
+
+            it('onMouseLeave handler', () => {
+                const onMouseLeave = jest.fn()
+                const wrapper = mount(
+                    <HeatMap {...baseProps} cellComponent={shape} onMouseLeave={onMouseLeave} />
+                )
+
+                dataPoints.forEach(datum => {
+                    wrapper.find(`g[data-testid='cell.${datum.id}']`).simulate('mouseleave')
+
+                    expect(onMouseLeave).toHaveBeenCalledTimes(1)
+                    const [data] = onMouseLeave.mock.calls[0]
+                    expect(data.id).toEqual(datum.id)
+                    expect(data.data).toEqual(datum.data)
+
+                    onMouseLeave.mockClear()
+                })
+            })
+
+            it('disabled if non interactive', () => {
+                const onClick = jest.fn()
+                const onMouseEnter = jest.fn()
+                const onMouseMove = jest.fn()
+                const onMouseLeave = jest.fn()
+
+                const wrapper = mount(
+                    <HeatMap
+                        {...baseProps}
+                        cellComponent={shape}
+                        onClick={onClick}
+                        onMouseEnter={onMouseEnter}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                        isInteractive={false}
+                    />
+                )
+
+                dataPoints.forEach(datum => {
+                    const cell = wrapper.find(`g[data-testid='cell.${datum.id}']`)
+
+                    cell.simulate('mouseenter')
+                    expect(onMouseEnter).not.toHaveBeenCalled()
+
+                    cell.simulate('mousemove')
+                    expect(onMouseMove).not.toHaveBeenCalled()
+
+                    cell.simulate('mouseleave')
+                    expect(onMouseLeave).not.toHaveBeenCalled()
+
+                    cell.simulate('click')
+                    expect(onClick).not.toHaveBeenCalled()
+                })
+            })
+        })
+    })
+})
+
+describe('layers', () => {
+    it('custom order', () => {
+        /*
+        const wrapper = mount(<Network {...baseProps} layers={['nodes', 'links']} />)
+
+        const layers = wrapper.find('svg > g').children()
+        expect(layers.at(0).is('NetworkNodes')).toBeTruthy()
+        expect(layers.at(1).is('NetworkLinks')).toBeTruthy()
+        */
+    })
+
+    it('custom layer', () => {
+        /*
+        const CustomLayer = () => null
+        const wrapper = mount(<Network {...baseProps} layers={[CustomLayer]} />)
+
+        const customLayer = wrapper.find(CustomLayer)
+        expect(customLayer.exists()).toBeTruthy()
+
+        const customLayerProps = customLayer.props()
+        expect(customLayerProps).toHaveProperty('nodes')
+        expect(customLayerProps).toHaveProperty('links')
+        expect(customLayerProps).toHaveProperty('activeNodeIds')
+        expect(customLayerProps).toHaveProperty('setActiveNodeIds')
+        */
+    })
+})
+
+describe('annotations', () => {
+    it('rect annotation using id', () => {
+        /*
+        const annotatedNodeId = 'C'
+        const wrapper = mount(
+            <Network
+                {...baseProps}
+                annotations={[
+                    {
+                        type: 'circle',
+                        match: {
+                            id: annotatedNodeId,
+                        },
+                        note: 'Note',
+                        noteX: 160,
+                        noteY: 36,
+                    },
+                ]}
+            />
+        )
+
+        const annotation = wrapper.find(Annotation)
+        expect(annotation.exists()).toBeTruthy()
+
+        const annotatedNode = wrapper.find(`circle[data-testid='node.${annotatedNodeId}']`)
+        const [nodeX, nodeY] = Array.from(
+            annotatedNode.prop('transform').match(/translate\(([0-9.]+),([0-9.]+)\)/)
+        )
+            .slice(1)
+            .map(Number)
+
+        expect(annotation.find('circle').first().prop('cx')).toEqual(nodeX)
+        expect(annotation.find('circle').first().prop('cy')).toEqual(nodeY)
+        */
+    })
+})
+
+describe('accessibility', () => {
+    it('aria properties', () => {
+        const wrapper = mount(
+            <HeatMap
+                {...baseProps}
+                ariaLabel="AriaLabel"
+                ariaLabelledBy="AriaLabelledBy"
+                ariaDescribedBy="AriaDescribedBy"
+            />
+        )
+
+        const svg = wrapper.find('svg')
+
+        expect(svg.prop('aria-label')).toBe('AriaLabel')
+        expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
+        expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
+    })
+})
diff --git a/packages/heatmap/tests/__snapshots__/HeatMap.test.js.snap b/packages/heatmap/tests/__snapshots__/HeatMap.test.js.snap
deleted file mode 100644
index da10185933..0000000000
--- a/packages/heatmap/tests/__snapshots__/HeatMap.test.js.snap
+++ /dev/null
@@ -1,612 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render a basic heat map chart 1`] = `
-<div
-  style={
-    Object {
-      "position": "relative",
-    }
-  }
->
-  <svg
-    height={300}
-    role="img"
-    width={500}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      fill="transparent"
-      height={300}
-      width={500}
-    />
-    <g
-      transform="translate(0,0)"
-    >
-      <g
-        transform="translate(0,0)"
-      >
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(83.33333333333333,0)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={0}
-            y1={0}
-            y2={-5}
-          />
-          <text
-            dominantBaseline="alphabetic"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="middle"
-            transform="translate(0,-10) rotate(0)"
-          >
-            rent
-          </text>
-        </g>
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(250,0)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={0}
-            y1={0}
-            y2={-5}
-          />
-          <text
-            dominantBaseline="alphabetic"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="middle"
-            transform="translate(0,-10) rotate(0)"
-          >
-            loan
-          </text>
-        </g>
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(416.66666666666663,0)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={0}
-            y1={0}
-            y2={-5}
-          />
-          <text
-            dominantBaseline="alphabetic"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="middle"
-            transform="translate(0,-10) rotate(0)"
-          >
-            income
-          </text>
-        </g>
-        <line
-          style={
-            Object {
-              "stroke": "transparent",
-              "strokeWidth": 1,
-            }
-          }
-          x1={0}
-          x2={500}
-          y1={0}
-          y2={0}
-        />
-      </g>
-      <g
-        transform="translate(0,0)"
-      >
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(0,50)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={-5}
-            y1={0}
-            y2={0}
-          />
-          <text
-            dominantBaseline="central"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="end"
-            transform="translate(-10,0) rotate(0)"
-          >
-            20
-          </text>
-        </g>
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(0,150)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={-5}
-            y1={0}
-            y2={0}
-          />
-          <text
-            dominantBaseline="central"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="end"
-            transform="translate(-10,0) rotate(0)"
-          >
-            30
-          </text>
-        </g>
-        <g
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-          transform="translate(0,250)"
-        >
-          <line
-            style={
-              Object {
-                "stroke": "#777777",
-                "strokeWidth": 1,
-              }
-            }
-            x1={0}
-            x2={-5}
-            y1={0}
-            y2={0}
-          />
-          <text
-            dominantBaseline="central"
-            style={
-              Object {
-                "fill": "#333333",
-                "fontFamily": "sans-serif",
-                "fontSize": 11,
-              }
-            }
-            textAnchor="end"
-            transform="translate(-10,0) rotate(0)"
-          >
-            40
-          </text>
-        </g>
-        <line
-          style={
-            Object {
-              "stroke": "transparent",
-              "strokeWidth": 1,
-            }
-          }
-          x1={0}
-          x2={0}
-          y1={0}
-          y2={300}
-        />
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(83.33333333333333, 50)"
-      >
-        <rect
-          fill="rgba(244, 117, 96, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(244, 117, 96, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(148, 71, 58, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          30
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(250, 50)"
-      >
-        <rect
-          fill="rgba(215, 100, 69, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(215, 100, 69, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(130, 61, 42, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          24
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(416.66666666666663, 50)"
-      >
-        <rect
-          fill="rgba(151, 227, 213, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(151, 227, 213, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(92, 138, 129, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          60
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(83.33333333333333, 150)"
-      >
-        <rect
-          fill="rgba(232, 193, 160, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(232, 193, 160, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(141, 117, 97, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          40
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(250, 150)"
-      >
-        <rect
-          fill="rgba(232, 193, 160, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(232, 193, 160, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(141, 117, 97, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          50
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(416.66666666666663, 150)"
-      >
-        <rect
-          fill="rgba(0, 176, 167, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(0, 176, 167, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(0, 107, 101, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          90
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(83.33333333333333, 250)"
-      >
-        <rect
-          fill="rgba(215, 100, 69, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(215, 100, 69, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(130, 61, 42, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          20
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(250, 250)"
-      >
-        <rect
-          fill="rgba(215, 100, 69, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(215, 100, 69, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(130, 61, 42, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          13
-        </text>
-      </g>
-      <g
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseMove={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-          }
-        }
-        transform="translate(416.66666666666663, 250)"
-      >
-        <rect
-          fill="rgba(232, 193, 160, 1)"
-          fillOpacity={0.85}
-          height={100}
-          stroke="rgba(232, 193, 160, 1)"
-          strokeOpacity={0.85}
-          strokeWidth={0}
-          width={166.66666666666666}
-          x={-83.33333333333333}
-          y={-50}
-        />
-        <text
-          dominantBaseline="central"
-          fillOpacity={0.85}
-          style={
-            Object {
-              "fill": "rgba(141, 117, 97, 1)",
-              "fontFamily": "sans-serif",
-              "fontSize": 11,
-            }
-          }
-          textAnchor="middle"
-        >
-          40
-        </text>
-      </g>
-    </g>
-  </svg>
-</div>
-`;