Lab 6: Creating a Data Dashboard

---

General Description

In this lab, you will build a Data Dashboard to visualize a topic of your choice. You will learn to use specialized Vuetify components like Sparkline, Stepper, and Data Table, to transform complex datasets into an interactive user experience.

While you are free to select your own theme (e.g., Sports Stats, Financial Trends, or Environmental Data), this lab will use the 2025-2027 Canada Immigration Levels Plan as the primary example to demonstrate how to map data to the different components.

Learning Objectives

• Practice advanced Data Structuring and Display by organizing Objects into v-sparkline, v-stepper, and v-data-table components.
• Implement logic to map numeric arrays directly to the v-sparkline component, turning raw numbers into visual stories.

Table of Contents

---

1. Pre-requisite: Setup Your Project
2. Choose a Theme
3. Visualizing Trends with Sparklines
4. Using Steppers For Sequencial Content
5. Data Tables & Statistics
6. Optional Challenge: Polishing the Dashboard
7. Wrap Up & Sharing Your Work

Pre-requisite: Setup Your Project

---

1. Create a new folder for this lab.
2. Inside your new folder create the app.js and index.html files with their starter/boilerplate code. Refer to Lab 2, section "Setup Starter Vuetify Code" to complete this step.

Choose a Theme

---

In this lab, you will build a dashboard that visualizes a specific topic using data-driven components. While this lab uses the 2025-2027 Canada Immigration Levels Plan as the primary example, you are encouraged to choose a different theme that interests you, as long as it follows the same data logic.

1. Brainstorm a theme for your dashboard. Think of topics that involve numbers over time or sequencial processes (e.g., Sports Season Stats, Global Climate Trends, Personal Finance).
2. Identify the following data components for your chosen theme:
   • Trend Data: At least 2 categories that have numeric values over a multi year/month/day period (to be used in a sparkline).
   • Process Steps: A 3-4 step explanation of a policy, workflow, or guide related to your theme (to be used in a stepper).
   • Detail Records: A list of at least 5-6 items with associated statistics (to be used in a data table).

Visualizing Trends with Sparklines

---

Create the Trend Data

1. In your app.js, create an Array of Objects with a title, a subtitle, and a trend array. See example below:

const immigrationTargets = [
    {
    title: 'Temporary Resident Targets',
    subtitle: 'Plan for 2025 - 2027',
    trend: [673650, 516600, 543600]
    },
    {
    title: 'Permanent Resident Targets',
    subtitle: 'Plan for 2025 - 2027',
    trend: [395000, 380000, 365000]
    }
    ];

💡 Understanding the Trend Array: The trend property is an Array of Numbers. Vuetify uses these numbers to plot points on a graph. In the example above:
• The first number in the array represents the starting point (i.e., target numbers for 2025).
• The second number in the array represents the next point (i.e, target numbers for 2026).
• The last number represents the end point (i.e., target numbers for 2027).
• The sparkline will plot them automatically, based on the highest and lowest values in your array.

Render the Sparkline Cards

1. In index.html, use a v-for loop to generate a v-card for each object in your array. Refer to Lab 3, section 3. Generating Cards with the v-for Loop to complete this step.
2. Inside the card, add the <v-sparkline> component.
3. Connect your data using the :model-value command, using the dot notation to access the object's data.
4. See example below:

<v-sparkline :model-value="immigrationTargets.trend"></v-sparkline>

💡 What is :model-value? In Vuetify, :model-value tells the sparkline what data it should be visualizing. In this case, :model-value="target.trend" tells the sparkline: "Look at the trend array inside the current object and use those numbers to draw the line."
5. Add the command auto-draw. This tells the component to animate the line drawing from left to right when the page loads.

<v-sparkline :model-value="immigrationTargets.trend" auto-draw ></v-sparkline>

Using Steppers For Sequencial Content

---

Create the Content Array

1. In your app.js, create an Array of Objects. In this example, the array is called policies.
2. Each object should contain at least, a title (Vuetify will look specifically for this field to use for the step label) and a description (the main content for that step). See example below:

const policies = [
        {
        title: 'Economy and Labour Market Needs',
        description: 'In recent years, Canada welcomed newcomers to support our economy...',
        },
        {
        title: 'Temporary Residents',
        description: 'To ensure a well-managed migration system the Government is reducing...',
        },
        {
        title: 'International Students',
        description: 'In keeping with these reductions, targets for new temporary resident...',
        },
        {
        title: 'Permanent Residents',
        description: 'The 2025-27 Levels Plan projects a decrease in overall permanent...',
        }
];

Implementing the Stepper

1. Use the <v-stepper> component and use the :items command to generate the step headers.

<v-stepper :items="policies">
</v-stepper>

💡 What is :items? The :items command is used by the Stepper to automatically create the navigation header. By default, the stepper looks for a title property inside each object of your array to label the steps.
2. Inside the stepper, add a <template> tag and use v-for to loop through your array.

<v-stepper :items="policies">
    <template v-for="policy in policies" :key="policy.title">
    </template>
</v-stepper>

3. Add an index to your v-for. This tracks the position of the current item (starting at 0), which we will need to identify each step.

<v-stepper :items="policies">
    <template v-for="(policy, index) in policies" :key="policy.title">
    </template>
</v-stepper>

4. In app.js, create a function to generate the step/item number dynamically. Vuetify expects the format item.1, item.2, etc.

function step(index) {
      let stepNumber = index + 1
      return "item." + stepNumber
    }

5. Add a dynamic v-slot to the template using the function created above. This ensures your content connects to the correct step number.

<v-stepper :items="policies">
    <template v-for="(policy, index) in policies" :key="policy.title" v-slot:[step(index)]>
    </template>
</v-stepper>

💡 Why the square brackets? Using [step(index)] tells Vue that the slot name is dynamic. It runs your function, gets the result (like item.1), and assigns the content to that specific step.
6. Finally, place a v-card inside the template to display the information from your objects using dot notation.

<v-stepper :items="policies">
    <template v-for="(policy, index) in policies" :key="policy.title" v-slot:[step(index)]>
        <v-card>
            <v-card-title>{{ policy.title }}</v-card-title>
            <v-card-text>{{ policy.description }}</v-card-text>
        </v-card>
    </template>
</v-stepper>

Data Tables & Statistics

---

Organizing Your Dataset

1. In your app.js, create an array that contains your raw data. For our immigration example, we will call this immigrationByCountry.
2. Each object in your array should represent one row in the table. Ensure every object uses the same fields (e.g., country and number), as these keys will become the column headers.

const immigrationByCountry = [
        { country: 'India', number: '147,190' },
        { country: 'Philippines', Number: '188,805' },
        { country: 'China', number: '129,020' },
        { country: 'Syria', number: '29,945' },
        { country: 'Nigeria', number: '17,285' },
        { country: 'United States of America', number: '33,060' }
];

Displaying the Table

1. In your index.html, add a v-data-table component.
2. Use the :items command to connect the table to your array.
<

<v-data-table :items="immigrationByCountry"></v-data-table>

Optional Challenge: Polishing the Dashboard

---

Challenge 1: Branding and Layout Styling

1. Add a v-app-bar at the top of your page. Use the v-app-bar-title to clearly state the name of your dashboard.
2. Differentiate the sections of your dashboard (e.g., the sparkline area vs. the table area) by applying different colors. Follow colors documentation here: https://v3.vuetifyjs.com/en/styles/colors/#classes

Challenge 2: Visualizing the Content

1. Standard text can be overwhelming. Try adding visual cues (e.g., icons or images) to your v-stepper cards to make the information more digestible.

Challenge 3: Managing Screen Space (Collapsible Sections)

1. Use v-expansion-panels. to make sections collapsible so the user can focus on one piece of data at a time. Follow Expansion Panels documentation: https://vuetifyjs.com/en/components/expansion-panels/#api.

Wrap Up & Sharing Your Work

---

Congratulations! You have successfully built a professionally looking data dashboard. In this lab, you practiced the following skills:

• Data Structuring & Display: You practiced organizing raw Objects into high-performance, structured interfaces using the v-data-table.
Time-Series Visualization: You implemented logic to map numeric arrays directly to the v-sparkline component, turning raw numbers into visual stories.