phares3757/vscode-kanbn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on burndown chart

Browse Source
This commit is contained in:
Gordon
2021-04-18 20:45:36 +01:00
parent ab42299b6b
commit 2998afa356
4 changed files with 145 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@ -117,6 +117,7 @@ function App() {
tasks={tasks}
sprints={sprints}
burndownData={burndownData}
dateFormat={dateFormat}
vscode={vscode}
/>
}

113
src/Burndown.tsx
View File

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { ResponsiveContainer, LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
import VSCodeApi from "./VSCodeApi";
import formatDate from 'dateformat';
import dateFormat from 'dateformat';
const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
const Burndown = ({ name, tasks, sprints, burndownData, dateFormat, vscode }: {
name: string,
tasks: Record<string, KanbnTask>,
sprints: KanbnSprint[],
@ -14,23 +15,71 @@ const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
to: string,
dataPoints: Array<{
x: string,
y: number
y: number,
count: number,
tasks: Array<{
eventType: string,
taskId: string
}>
}>
}>
},
dateFormat: string,
vscode: VSCodeApi
}) => {
const [sprintMode, setSprintMode] = useState(sprints.length > 0);
const [sprint, setSprint] = useState(null);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const hasSprints = sprints.length > 0;
const [sprintMode, setSprintMode] = useState(hasSprints);
const [sprint, setSprint] = useState(sprintMode ? burndownData.series[0].sprint.name : '');
const [startDate, setStartDate] = useState(sprintMode ? '' : formatDate(burndownData.series[0].from, 'yyyy-mm-dd'));
const [endDate, setEndDate] = useState(sprintMode ? '' : formatDate(burndownData.series[0].to, 'yyyy-mm-dd'));
const [assigned, setAssigned] = useState('');
const data = [
{name: 'one', uv: 20},
{name: 'two', uv: 80},
{name: 'three', uv: 45},
{name: 'four', uv: 32}
];
const refreshBurndownData = () => {
vscode.postMessage({
command: 'kanbn.refreshBurndownData',
sprintMode,
sprint,
startDate,
endDate,
assigned
});
};
const handleChangeSprint = ({ target: { value }}) => {
setSprint(value);
refreshBurndownData();
};
const handleChangeStartDate = ({ target: { value }}) => {
setStartDate(value);
refreshBurndownData();
};
const handleChangeEndDate = ({ target: { value }}) => {
setEndDate(value);
refreshBurndownData();
};
const handleClickSprintMode = () => {
setSprintMode(true);
refreshBurndownData();
};
const handleClickDateMode = () => {
setSprintMode(false);
refreshBurndownData();
};
const chartMin = Date.parse(burndownData.series[0].from);
const chartMax = Date.parse(burndownData.series[0].to);
const chartData = burndownData.series[0].dataPoints.map(dataPoint => ({
x: Date.parse(dataPoint.x),
y: dataPoint.y,
'Active tasks': dataPoint.count,
'Activity': dataPoint.tasks.map(task => `${task.eventType} ${task.taskId}`).join('\n')
}));
const formatXAxis = date => formatDate(date, dateFormat);
return (
<React.Fragment>
@ -41,12 +90,16 @@ const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
<form>
{
sprintMode
? <select className="kanbn-burndown-settings-sprint-select" onChange={e => { console.log(e); }}>
? <select
value={sprint}
className="kanbn-burndown-settings-sprint-select"
onChange={handleChangeSprint}
>
{
sprints.length > 0
? sprints.map((sprint, i) => {
? sprints.map(sprint => {
return (
<option value={i}>{sprint.name}</option>
<option value={sprint.name}>{sprint.name}</option>
);
})
: <option disabled>No sprints</option>
@ -55,31 +108,30 @@ const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
: <React.Fragment>
<input
type="date"
value={startDate}
className="kanbn-burndown-settings-input kanbn-burndown-settings-start-date"
onChange={e => { console.log(e); }}
onChange={handleChangeStartDate}
/>
<input
type="date"
value={endDate}
className="kanbn-burndown-settings-input kanbn-burndown-settings-end-date"
onChange={e => { console.log(e); }}
onChange={handleChangeEndDate}
/>
</React.Fragment>
}
<button
{hasSprints && <button
type="button"
className={[
'kanbn-header-button',
'kanbn-burndown-settings-sprint-mode',
sprintMode ? 'kanbn-header-button-active' : 'kanbn-header-button-inactive'
].join(' ')}
onClick={() => {
setSprintMode(true);
// update burndown chart
}}
onClick={handleClickSprintMode}
title="View sprint burndown"
>
<i className="codicon codicon-rocket"></i>
</button>
</button>}
<button
type="button"
className={[
@ -87,10 +139,7 @@ const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
'kanbn-burndown-settings-date-mode',
sprintMode ? 'kanbn-header-button-inactive' : 'kanbn-header-button-active'
].join(' ')}
onClick={() => {
setSprintMode(false);
// update burndown chart
}}
onClick={handleClickDateMode}
title="View date-range burndown"
>
<i className="codicon codicon-clock"></i>
@ -101,10 +150,10 @@ const Burndown = ({ name, tasks, sprints, burndownData, vscode }: {
</div>
<div className="kanbn-burndown">
<ResponsiveContainer width="100%" height="100%" className="kanbn-burndown-chart">
<LineChart data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="name" />
<LineChart data={chartData}>
<Line className="kanbn-burndown-line" type="monotone" dataKey="y" />
<CartesianGrid className="kanbn-burndown-grid" strokeDasharray="5 5" vertical={false} />
<XAxis dataKey="x" type="number" domain={[chartMin, chartMax]} tickFormatter={formatXAxis} />
<YAxis />
<Tooltip />
</LineChart>

8
src/index.css
View File

@ -537,3 +537,11 @@ body.vscode-dark .kanbn-burndown-settings-input[type="date"]::-webkit-calendar-p
height: 85vh;
width: 95vw;
}
.kanbn-burndown-grid {
stroke: var(--vscode-activityBar-inactiveForeground);
}
.kanbn-burndown-line path {
stroke: #3c7;
}