Adding Task Counters and Stats to Your Kanban Board

Welcome to the fifth lesson of our "Building A Kanban Board" course! So far, we've built a functional Kanban board with the ability to display tasks, add new tasks, and move tasks between columns. Our application is already quite useful, but we can enhance it further by adding visual indicators that show how many tasks are in each column and the total number of tasks on our board.

Task counters and statistics are important features in any task management application. They provide users with a quick overview of their workload and progress without requiring them to manually count tasks. For example, seeing that you have 10 tasks in the "To Do" column, 3 in "In Progress," and 15 in "Done" immediately tells you about your current workload and overall progress.

In this lesson, we'll enhance our Kanban board by:

1. Adding a counter to each column that shows the number of tasks it contains
2. Creating a stats bar that displays the total number of tasks on the board
3. Ensuring these counters update automatically when tasks are added or moved

We'll build on the components we've already created and leverage Svelte's reactivity system to keep our counters in sync with the underlying data. By the end of this lesson, your Kanban board will not only be functional but also informative, providing users with valuable insights at a glance.

Let's start by enhancing our task store to track the total number of tasks!

In our previous lessons, we created a task store that maintains our tasks and provides derived values for filtering tasks by status. Now, we'll add a new derived value to track the total number of tasks across all statuses.

Let's look at the enhanced version of our taskStore.svelte.js file:

// Create initial state with $state
export const tasks = $state([
  { id: 1, title: 'Learn Svelte 5', description: 'Study the new Runes API', status: 'todo' },
  { id: 2, title: 'Design components', description: '', status: 'todo' },
  { id: 3, title: 'Build Kanban board', description: 'Create the main layout', status: 'inprogress' },
  { id: 4, title: 'Setup project', description: 'Initialize SvelteKit', status: 'done' }
]);

// Derive filtered tasks for each column
const todoTasks = $derived(tasks.filter(task => task.status === 'todo'));
const inProgressTasks = $derived(tasks.filter(task => task.status === 'inprogress'));
const doneTasks = $derived(tasks.filter(task => task.status === 'done'));
const totalTasks = $derived(tasks.length);

export const getTodoTasks = () => todoTasks;
export const getInProgressTasks = () => inProgressTasks;
export const getDoneTasks = () => doneTasks;
export const getTotalTasks = () => totalTasks;

// Function to add a new task
export function addTask(title, description = '') {
  const newTask = {
    id: Date.now(),
    title,
    description,
    status: 'todo'
  };
  
  tasks.push(newTask);
  return newTask;
}

// Function to update task status
export function updateTaskStatus(id, newStatus) {
  const taskIndex = tasks.findIndex(task => task.id === id);
  if (taskIndex !== -1) {
    tasks[taskIndex].status = newStatus;
  }
}

The key additions to our task store are:

1. A new derived value totalTasks that simply returns the length of our tasks array:

   const totalTasks = $derived(tasks.length);

2. A new accessor function getTotalTasks that returns this derived value:

   export const getTotalTasks = () => totalTasks;

This is a simple but powerful enhancement. The totalTasks derived value will automatically update whenever tasks are added, removed, or modified, thanks to Svelte's reactivity system. By exporting a getter function, we maintain a consistent interface for accessing our state, which makes our code more maintainable and easier to understand.

The beauty of derived values is that they're computed automatically based on their dependencies. In this case, totalTasks depends on the length of the tasks array, so it will update automatically whenever tasks are added or removed. This means we don't have to manually update a counter whenever we modify our tasks; Svelte handles that for us.

Now that we have a way to track the total number of tasks, let's update our Column component to display the number of tasks it contains.

Now that our task store can provide the count of tasks in each status category, let's update our Column component to display these counts. This will give users a quick visual indication of how many tasks are in each column.

Here's the updated code for our Column.svelte component:

<script>
  let { title, children, taskCount = 0 } = $props();
</script>

<div class="column">
  <h2>
    {title}
    <span class="count">{taskCount}</span>
  </h2>
  <div class="tasks">
    {@render children?.()}
  </div>
</div>

<style>
  .column {
    background: #f4f4f4;
    padding: 1rem;
    width: 300px;
    min-height: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
  }
  
  .column:hover {
    transform: translateY(-5px);
  }

  h2 {
    margin-top: 0;
    font-size: 1.2rem;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .count {
    background: #cbd5e0;
    color: #2d3748;
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.875rem;
  }
  
  .tasks {
    flex-grow: 1;
  }
  
  @media (max-width: 950px) {
    .column {
      width: 100%;
    }
  }
</style>

Let's examine the changes we've made to this component:

1. We've updated our props to include a new taskCount prop with a default value of 0:

   let { title, children, taskCount = 0 } = $props();

2. We've added a span element with the class "count" inside the h2 element to display the task count:

   <h2>
     {title}
     <span class="count">{taskCount}</span>
   </h2>

We've added styles for the count badge to make it visually distinct:

.count {
  background: #cbd5e0;
  color: #2d3748;
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.875rem;
}

We've also made some other styling improvements, such as adding a hover effect to the column and making it responsive for smaller screens.

Another significant change is the use of the {@render children?.()} syntax instead of directly including the child elements. This is a new feature in Svelte 5 that allows us to pass a function as a prop that returns content to be rendered. The ?.() syntax is a safe call operator that ensures we don't get an error if children is undefined.

This approach gives us more flexibility in how we compose our components. Instead of passing individual tasks as props or using slots, we can pass a function that generates the content we want to display. This is particularly useful for complex components like our Kanban board, where each column might have different content based on the current state of our application.

Now that we've updated our Column component to display task counts, let's create a new component to display overall statistics for our Kanban board.

Now that we have counters for individual columns, let's create a new component to display overall statistics for our Kanban board. This will give users a high-level overview of their tasks without requiring them to add up the counts from each column.

Here's the code for our new StatsBar.svelte component:

<script>
  let { totalTasks } = $props();
</script>

<div class="stats-bar">
  <div class="stat">
    <span class="stat-label">Total Tasks:</span>
    <span class="stat-value">{totalTasks}</span>
  </div>
</div>

<style>
  .stats-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .stat {
    background: #e6f7ff;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    color: #0070f3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .stat-label {
    font-weight: 500;
  }
  
  .stat-value {
    font-weight: 600;
  }
</style>

Let's break down this component:

1. We're defining a single prop totalTasks using the $props() rune:

   let { totalTasks } = $props();

2. We're creating a simple layout with a div that contains our statistic:

   <div class="stats-bar">
     <div class="stat">
       <span class="stat-label">Total Tasks:</span>
       <span class="stat-value">{totalTasks}</span>
     </div>
   </div>

We're styling the stats bar to make it visually appealing and distinct from other elements on the page:

.stats-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat {
  background: #e6f7ff;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  color: #0070f3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

We're using different font weights for the label and value to create visual hierarchy:

.stat-label {
  font-weight: 500;
}

.stat-value {
  font-weight: 600;
}

This component is designed to be simple and focused on a single responsibility: displaying overall statistics for our Kanban board. Currently, it only shows the total number of tasks, but it's structured in a way that makes it easy to add more statistics in the future if needed.

The design uses a pill-shaped background with a light blue color to make it stand out from other elements on the page without being too distracting. The use of different font weights for the label and value creates a clear visual hierarchy that makes the information easy to scan.

Now that we have our StatsBar component, let's see how to integrate it into our application and connect all the components together.

Now that we have our Column component updated to display task counts and our new StatsBar component, let's update our Board component to use these enhancements. We'll also take advantage of Svelte 5's snippet feature to make our code cleaner and more maintainable.

Here's the updated code for our Board.svelte component:

<script>
  import Column from './Column.svelte';
  import TaskCard from './TaskCard.svelte';
  import { getTodoTasks, getInProgressTasks, getDoneTasks } from '$lib/taskStore.svelte.js';
</script>

{#snippet columnTasks(tasks, status)}
  {#each tasks as task (task.id)}
    <TaskCard 
      id={task.id}
      title={task.title} 
      description={task.description}
      status={status}
    />
  {/each}
{/snippet}

<div class="board">
  <Column title="To Do" taskCount={getTodoTasks().length}>
    {@render columnTasks(getTodoTasks(), 'todo')}
  </Column>
  <Column title="In Progress" taskCount={getInProgressTasks().length}>
    {@render columnTasks(getInProgressTasks(), 'inprogress')}
  </Column>
  <Column title="Done" taskCount={getDoneTasks().length}>
    {@render columnTasks(getDoneTasks(), 'done')}
  </Column>
</div>

<style>
  .board {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  
  @media (max-width: 950px) {
    .board {
      flex-direction: column;
    }
  }
</style>

Let's examine the changes we've made to this component:

1. We've added a snippet called columnTasks that takes two parameters: tasks and status:

   {#snippet columnTasks(tasks, status)}
     {#each tasks as task (task.id)}
       <TaskCard 
         id={task.id}
         title={task.title} 
         description={task.description}
         status={status}
       />
     {/each}
   {/snippet}

2. We're now using this snippet in each Column component using the {@render} syntax:

   <Column title="To Do" taskCount={getTodoTasks().length}>
     {@render columnTasks(getTodoTasks(), 'todo')}
   </Column>

3. We're passing the task count to each Column component using the taskCount prop:

   <Column title="To Do" taskCount={getTodoTasks().length}>

Snippets are a new feature in Svelte 5 that allow you to define reusable pieces of markup that can be rendered in multiple places. They're similar to components, but they're defined inline and can access the parent component's scope. This makes them ideal for situations like this, where we have a pattern that repeats with slight variations.

In our case, we're using a snippet to define how to render the tasks in each column. This reduces duplication and makes our code more maintainable. If we need to change how tasks are rendered, we only need to update the snippet in one place, rather than in three separate places.

The {@render} syntax is used to render a snippet with specific parameters. In our case, we're passing the tasks for each column and the corresponding status. The snippet then uses these parameters to render the appropriate TaskCard components.

Now, let's update our main page component to include the StatsBar:

<script>
  import Board from '../components/Board.svelte';
  import TaskForm from '../components/TaskForm.svelte';
  import StatsBar from '../components/StatsBar.svelte';
  import { getTotalTasks } from '$lib/taskStore.svelte.js';
</script>

<div class="container">
  <h1>📝 My Kanban Board</h1>
  
  <div class="header">
    <StatsBar totalTasks={getTotalTasks()} />
  </div>
  
  <TaskForm />
  <Board />
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }

  h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #2d3748;
  }
  
  .header {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
</style>

In this updated page component, we've:

1. Imported our new StatsBar component:

   import StatsBar from '../components/StatsBar.svelte';

2. Added the StatsBar component to the header section, passing the total number of tasks as a prop:

   <div class="header">
     <StatsBar totalTasks={getTotalTasks()} />
   </div>

This integration provides a complete overview of the task management system, with both individual column counts and overall statistics. The StatsBar component is placed prominently at the top, ensuring users can quickly assess their workload.

By leveraging Svelte's reactivity and new features like snippets, we've created a more dynamic and maintainable Kanban board. Users can now enjoy a more informative and visually appealing interface, enhancing their task management experience.

With these enhancements, your Kanban board is not only functional but also provides valuable insights at a glance. Keep exploring and building upon these concepts to create even more powerful applications!

In this lesson, we've enhanced our Kanban board with visual indicators that provide users with valuable insights about their tasks at a glance. Here's what we've accomplished:

• Extended our task store by adding a derived totalTasks value and a getTotalTasks() function that automatically updates when tasks are added or moved
• Enhanced the Column component with a visual counter showing the number of tasks in each column
• Created a StatsBar component that displays the total number of tasks on the board
• Implemented Svelte 5 snippets to reduce code duplication and improve maintainability when rendering task cards

These additions transform our Kanban board from a purely functional tool to an informative dashboard that helps users quickly understand their workload distribution without manually counting tasks.

By leveraging Svelte's reactivity system, we've ensured that all counters update automatically whenever tasks are added, moved, or removed. This creates a seamless user experience where the UI is always in sync with the underlying data.

Our implementation demonstrates the power of derived values in Svelte - simply declaring dependencies allows the framework to handle the complex task of keeping everything updated, making our code both simpler and more robust.