Install recharts, prepare for burndown chart

src/App.tsx

@@ -25,7 +25,9 @@ function App() {
   const [panelUuid, setPanelUuid] = useState('');
   const [showBurndownButton, setShowBurndownButton] = useState(false);
   const [showSprintButton, setShowSprintButton] = useState(false);
+  const [sprints, setSprints] = useState([]);
   const [currentSprint, setCurrentSprint] = useState(null);
+  const [burndownData, setBurndownData] = useState({ series: [] });
 
   window.addEventListener('message', event => {
     const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
@@ -60,6 +62,13 @@ function App() {
         setColumnNames(Object.keys(event.data.index.columns));
         setPanelUuid(event.data.panelUuid);
         break;
+
+      case 'burndown':
+        setName(event.data.index.name);
+        setTasks(tasks);
+        setSprints(event.data.index.options.sprints || []);
+        setBurndownData(event.data.burndownData);
+        break;
     }
     setType(event.data.type);
     setDateFormat(event.data.dateFormat);
@@ -98,6 +107,10 @@ function App() {
       {
         type === 'burndown' &&
         <Burndown
+          name={name}
+          tasks={tasks}
+          sprints={sprints}
+          burndownData={burndownData}
         />
       }
     </React.Fragment>

src/Board.tsx

@@ -154,11 +154,7 @@ const Board = ({
   dateFormat: string,
   showBurndownButton: boolean,
   showSprintButton: boolean,
-  currentSprint: {
-    start: string,
-    name: string,
-    description: string
-  }|null,
+  currentSprint: KanbnSprint|null,
   vscode: VSCodeApi
 }) => {
   const [, setColumns] = useState(columns);

src/Burndown.tsx

@@ -1,8 +1,40 @@
 import React from 'react';
+import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
+
+const Burndown = ({ name, tasks, sprints, burndownData }: {
+  name: string,
+  tasks: Record<string, KanbnTask>,
+  sprints: KanbnSprint[],
+  burndownData: {
+    series: Array<{
+      sprint: KanbnSprint,
+      from: string,
+      to: string,
+      dataPoints: Array<{
+        x: string,
+        y: number
+      }>
+    }>
+  }
+}) => {
+  const data = [
+    {name: 'one', uv: 20},
+    {name: 'two', uv: 80},
+    {name: 'three', uv: 45},
+    {name: 'four', uv: 32}
+  ];
 
-const Burndown = () => {
   return (
-    <div>burndown chart</div>
+    <React.Fragment>
+      <div>burndown chart</div>
+      <LineChart width={600} height={300} data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+        <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+      </LineChart>
+    </React.Fragment>
   );
 };
 

src/KanbnSprint.d.ts

@@ -0,0 +1,6 @@
+// Note that Date properties will be converted to strings (ISO) when a task is serialized and passed as a prop
+declare type KanbnSprint = {
+  start: string;
+  name: string;
+  description?: string;
+};