Add burndown chart button

README.md

@@ -32,6 +32,13 @@ Click on a task's title to open the task editor in a new tab. From here, you can
 
 You can also modify the index or task files directly, or by using Kanbn CLI commands, and the Kanbn board should update automatically to reflect these changes.
 
+The following commands are available:
+
+- `Kanbn: Initialise Kanbn` will initialise Kanbn in the open workspace.
+- `Kanbn: Open board` will open open the Kanbn board.
+- `Kanbn: Open burndown chart` will open a burndown chart.
+- `Kanbn: Add task` will open the task editor.
+
 ## Filtering the Kanbn board
 
 At the top-right of the Kanbn board there is a filter input. To filter visible tasks, enter a filter string and click the filter button (or press Enter). To clear any active filters, clear the filter string and click the filter button.

docs/styles.md

@@ -18,6 +18,7 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
 - `kanbn-filter-input`
 - `kanbn-clear-filter-button`
 - `kanbn-filter-button`
+- `kanbn-burndown-button`
 - `kanbn-header-description`
 - `kanbn-board`
 - `kanbn-column`

ext-src/KanbnBoardPanel.ts

@@ -143,6 +143,12 @@ export default class KanbnBoardPanel {
             message.columnName
           );
           return;
+
+        // Open a burndown chart
+        case 'kanbn.burndown':
+          // TODO open a burndown chart webview panel
+          vscode.window.showInformationMessage('opening burndown chart...');
+          return;
       }
     }, null, this._disposables);
   }

ext-src/extension.ts

@@ -102,6 +102,13 @@ export async function activate(context: vscode.ExtensionContext) {
     }
   }));
 
+  // Register a command to open a burndown chart.
+  context.subscriptions.push(vscode.commands.registerCommand('kanbn.burndown', async () => {
+
+    // TODO open burndown chart singleton webview panel
+    vscode.window.showErrorMessage('Not implemented yet!');
+  }));
+
   // If a workspace folder is open, add a status bar item and start watching for file changes
   if (vscode.workspace.workspaceFolders !== undefined) {
 

package.json

@@ -54,6 +54,11 @@
         "command": "kanbn.addTask",
         "title": "Add task",
         "category": "Kanbn"
+      },
+      {
+        "command": "kanbn.burndown",
+        "title": "Open burndown chart",
+        "category": "Kanbn"
       }
     ]
   },

src/Board.tsx

@@ -186,6 +186,18 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
               >
                 <i className="codicon codicon-filter"></i>
               </button>
+              <button
+                type="button"
+                className="kanbn-burndown-button"
+                onClick={() => {
+                  vscode.postMessage({
+                    command: 'kanbn.burndown'
+                  });
+                }}
+                title="Open burndown chart"
+              >
+                <i className="codicon codicon-graph"></i>
+              </button>
             </form>
           </div>
         </h1>
@@ -228,7 +240,7 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
                       vscode.postMessage({
                         command: 'kanbn.addTask',
                         columnName
-                      })
+                      });
                     }}
                   >
                     <i className="codicon codicon-add"></i>

src/TaskItem.tsx

@@ -54,7 +54,7 @@ const TaskItem = ({ task, position, dateFormat, vscode }: {
                     command: 'kanbn.task',
                     taskId: task.id,
                     columnName: task.column
-                  })
+                  });
                 }}
                 title={task.id}
               >

src/index.css

@@ -46,7 +46,7 @@ body.vscode-high-contrast {
 
 .kanbn-clear-filter-button {
     position: absolute;
-    right: 45px;
+    right: 92px;
     outline: none;
     border: none;
     color: var(--vscode-button-foreground);
@@ -55,7 +55,8 @@ body.vscode-high-contrast {
     opacity: 0.6;
 }
 
-.kanbn-filter-button {
+.kanbn-filter-button,
+.kanbn-burndown-button {
     outline: none;
     border: none;
     background-color: var(--vscode-button-background);
@@ -64,18 +65,24 @@ body.vscode-high-contrast {
     margin-left: 8px;
 }
 
+.kanbn-filter-button .codicon,
 .kanbn-clear-filter-button .codicon,
-.kanbn-filter-button .codicon {
+.kanbn-burndown-button .codicon {
     font-size: 12px !important;
     position: relative;
     top: 1px;
 }
 
+.kanbn-burndown-button .codicon {
+    top: 2px;
+}
+
 .kanbn-clear-filter-button:hover, .kanbn-clear-filter-button:focus {
     opacity: 1;
 }
 
-.kanbn-filter-button:hover, .kanbn-filter-button:focus {
+.kanbn-filter-button:hover, .kanbn-filter-button:focus,
+.kanbn-burndown-button:hover, .kanbn-burndown-button:focus {
     background-color: var(--vscode-button-hoverBackground);
 }