add basic implementation of Heatmap chart

src/components/App.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import '../stylesheets/App.css';
+import ChartShowcase from './ChartShowcase';
 
 const App: React.FC = () => {
   return (
     <div className="App">
+      <ChartShowcase />
     </div>
   );
 }

src/components/ChartShowcase.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Heatmap from './charts/Heatmap';
+import {range, randomInt} from '../util';
+
+const margin = {top: 2, left: 2};
+const heatmapSize = {width: 10, height: 10};
+const showcaseSize = {width: 50, height: 50};
+
+const generateHeatmapData = (max: number): number[][] => {
+  const xNum = 1 + randomInt(9)
+  const yNum = 1 + randomInt(9)
+  return range(0, yNum).map(
+    (y) => range(0, xNum).map(
+      (x)=> randomInt(max)
+    )
+  )
+}
+
+const ChartShowcase = () => {
+  const [heatmapData, setHeatmapData] = useState<number[][]>([[10]]);
+  const handleButton = () => {
+    setHeatmapData(generateHeatmapData(50))
+  }
+
+  return (
+    <article className="chart-showcase">
+      <section className="chart-showwcase__title">
+        <h1>SVG Chart Showcase</h1>
+      </section>
+      <section>
+        <h1 className="chart-showwcase__element-title">Heatmap SVG</h1> 
+        <div>
+          <button onClick={handleButton}>Generate Heatmap data</button>
+          <div>
+            { heatmapData.map((e,i) => (<div key={i}>{ e.toString() }</div>)) }
+          </div>
+          <svg 
+            viewBox={`0 0 ${showcaseSize.width} ${showcaseSize.height}`}
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+          >
+            <Heatmap
+              margin={margin}
+              size={heatmapSize}
+              data={heatmapData}
+              max={50}
+            />
+          </svg>
+        </div>
+      </section>
+    </article>
+  );
+}
+
+export default ChartShowcase;

src/components/charts/Heatmap.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+type Margin = {
+  top: number;
+  left: number;
+}
+type Size = {
+  width: number;
+  height: number;
+}
+
+type Props = {
+  margin: Margin;
+  size: Size;
+  data: number[][];
+  max: number;
+};
+
+const calcElementSize = (data: number[][], size: Size): Size => {
+  if (data.length > 0 && data[0].length > 0 ) {
+    const width = size.width/data[0].length;
+    const height = size.height/data.length;
+    return {width, height};
+  } 
+  throw new Error("data is invalid");
+}
+
+const generateColor = (n: number, max: number): [number, number, number] => {
+  const blue = [0, 103, 192];
+  const red = [255, 0, 0];
+  const diff = [red[0]-blue[0], red[1]-blue[1], red[2]-blue[2]];
+  const percentage = n/max
+  return [
+    diff[0]*percentage+blue[0],
+    diff[1]*percentage+blue[1],
+    diff[2]*percentage+blue[2]
+  ]
+}
+
+const drawElementRect = (data: number[][], size: Size, max: number) => {
+  const elementSize = calcElementSize(data, size);
+  return data.map(
+    (nl,y) => nl.map((n,x)=> (
+      <rect key={`${x}-${y}`} className="charts__heatmap__rect-element"
+        x={x*elementSize.width}
+        y={y*elementSize.height}
+        style={
+          {
+            fill: `rgb(${generateColor(n, max).join(',')})`
+          }
+        }
+        width={elementSize.width}
+        height={elementSize.height}
+      >{n}</rect>
+    ))
+  );
+};
+
+const Heatmap = ({margin, size, data, max}: Props) => {
+  return (
+    <g transform={`translate(${margin.left},${margin.top})`}>
+      <rect className="charts__heatmap__rect-element"
+        x={0} 
+        y={0} 
+        width={size.width}
+        height={size.height}
+      />
+      { drawElementRect(data, size, max) }
+    </g>
+  );
+}
+
+export default Heatmap;

src/util.ts

@@ -0,0 +1,9 @@
+const range =
+  (start: number, end: number) => Array.from({length: (end - start + 1)}, (v, k) => k + start);
+
+const randomInt = (max: number): number => Math.floor(Math.random() * Math.floor(max));
+
+export {
+  range,
+  randomInt
+}