Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/chrisdzasc/Time-Tracking-Dashboard/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Time Tracking Dashboard reads activity data from data.json. The data structure defines activities with multiple timeframes (daily, weekly, monthly), allowing the dashboard to display different time periods.

​
JSON Schema

​
Complete Structure

The data file contains an array of activity objects. Here’s the complete schema: 
[
  {
    "title": "Activity Name",
    "timeframes": {
      "daily": {
        "current": 0,
        "previous": 0
      },
      "weekly": {
        "current": 0,
        "previous": 0
      },
      "monthly": {
        "current": 0,
        "previous": 0
      }
    }
  }
]

​
Field Descriptions

FieldTypeRequiredDescription
titlestringYesActivity name (e.g., “Work”, “Play”)
timeframesobjectYesContains all time period data
timeframes.dailyobjectYesDaily time tracking data
timeframes.weeklyobjectYesWeekly time tracking data
timeframes.monthlyobjectYesMonthly time tracking data
currentnumberYesCurrent period hours
previousnumberYesPrevious period hours for comparison

​
Real Data Examples

​
Work Activity (from data.json:2-18)

{
  "title": "Work",
  "timeframes": {
    "daily": {
      "current": 5,
      "previous": 7
    },
    "weekly": {
      "current": 32,
      "previous": 36
    },
    "monthly": {
      "current": 103,
      "previous": 128
    }
  }
}
This shows:
  • Today: 5 hours (yesterday: 7 hours)
  • This week: 32 hours (last week: 36 hours)
  • This month: 103 hours (last month: 128 hours)

​
Exercise Activity (from data.json:53-68)

{
  "title": "Exercise",
  "timeframes": {
    "daily": {
      "current": 1,
      "previous": 1
    },
    "weekly": {
      "current": 4,
      "previous": 5
    },
    "monthly": {
      "current": 11,
      "previous": 18
    }
  }
}

​
Study Activity (from data.json:36-51)

{
  "title": "Study",
  "timeframes": {
    "daily": {
      "current": 0,
      "previous": 1
    },
    "weekly": {
      "current": 4,
      "previous": 7
    },
    "monthly": {
      "current": 13,
      "previous": 19
    }
  }
}
Notice that current and previous can be 0, which represents no time spent on that activity during the period.

​
Complete Data File

The current data.json contains six activities in this order: 
[
  { "title": "Work", ... },
  { "title": "Play", ... },
  { "title": "Study", ... },
  { "title": "Exercise", ... },
  { "title": "Social", ... },
  { "title": "Self Care", ... }
]
The order matters! The JavaScript code in app.js accesses activities by array index:
  • dashboardData[0] = Work
  • dashboardData[1] = Play
  • dashboardData[2] = Study
  • dashboardData[3] = Exercise
  • dashboardData[4] = Social
  • dashboardData[5] = Self Care
Changing the order will break the display unless you update app.js.

​
Adding New Time Periods

You can add custom timeframes beyond daily, weekly, and monthly.
1

Add new timeframe to data.json

Add a new timeframe object to each activity:
{
  "title": "Work",
  "timeframes": {
    "daily": { "current": 5, "previous": 7 },
    "weekly": { "current": 32, "previous": 36 },
    "monthly": { "current": 103, "previous": 128 },
    "yearly": { "current": 1248, "previous": 1534 }
  }
}
2

Update index.html

Add a new button for the timeframe:
<button class="profile-card__option text--p5-regular" id="yearly">Yearly</button>
3

Update app.js

Create a new function and event listener:
function yearlyActivity() {
    removeActiveClasses();
    yearly.classList.add("profile-card__option--active");
    
    workCurrent.innerText = dashboardData[0].timeframes.yearly.current;
    workPrevious.innerText = dashboardData[0].timeframes.yearly.previous;
    // ... repeat for all activities
}

const yearly = document.querySelector('#yearly');
yearly.addEventListener("click", yearlyActivity);

​
Data Validation Requirements

​
Required Fields

Every activity object MUST include:
  1. A title field (string)
  2. A timeframes object
  3. daily, weekly, and monthly objects within timeframes
  4. current and previous numbers in each timeframe

​
Valid Example

{
  "title": "Reading",
  "timeframes": {
    "daily": { "current": 2, "previous": 1 },
    "weekly": { "current": 12, "previous": 10 },
    "monthly": { "current": 45, "previous": 38 }
  }
}

​
Invalid Examples

Missing timeframe: 
{
  "title": "Reading",
  "timeframes": {
    "daily": { "current": 2, "previous": 1 },
    "weekly": { "current": 12, "previous": 10 }
    // Missing monthly - INVALID!
  }
}
Missing previous value: 
{
  "title": "Reading",
  "timeframes": {
    "daily": { "current": 2 }, // Missing previous - INVALID!
    "weekly": { "current": 12, "previous": 10 },
    "monthly": { "current": 45, "previous": 38 }
  }
}
String instead of number: 
{
  "title": "Reading",
  "timeframes": {
    "daily": { "current": "2", "previous": "1" }, // Strings - INVALID!
    "weekly": { "current": 12, "previous": 10 },
    "monthly": { "current": 45, "previous": 38 }
  }
}

​
Updating Activity Data

​
Modifying Existing Activities

To update hours for an activity, edit the numbers in data.json: Before: 
{
  "title": "Work",
  "timeframes": {
    "weekly": {
      "current": 32,
      "previous": 36
    }
  }
}
After: 
{
  "title": "Work",
  "timeframes": {
    "weekly": {
      "current": 40,
      "previous": 32
    }
  }
}
The dashboard will automatically display the new values when you refresh the page.

​
Testing Your Data

1

Validate JSON syntax

Use a JSON validator (like JSONLint.com) to ensure your JSON is properly formatted.
2

Check all required fields

Verify each activity has title, timeframes, and all three timeframe periods.
3

Verify data types

Ensure current and previous values are numbers, not strings.
4

Test in browser

Open the dashboard and switch between Daily, Weekly, and Monthly views to confirm data displays correctly.

​
Data Loading Process

The dashboard loads data using the Fetch API (app.js:3-11): 
fetch('./js/data.json')
    .then(response => { 
        return response.json()
    })
    .then(data => {
        dashboardData = data;
        weeklyActivity();
    });
The dashboard displays the weekly view by default (calls weeklyActivity() after loading data).

​
Common Issues and Solutions

​
Issue: Dashboard shows “NaN” or blank values

Cause: Invalid JSON format or missing fields. Solution: Validate your JSON and ensure all required fields are present.

​
Issue: New activity doesn’t appear

Cause: No corresponding HTML or JavaScript code for the activity. Solution: See the Adding Activities guide for complete instructions.

​
Issue: Wrong data displayed for timeframe

Cause: Array index mismatch between data.json order and app.js references. Solution: Ensure activities in data.json match the order expected in app.js:17-28.

​
Reference

  • Data file: js/data.json
  • Data loading: app.js:3-11
  • Activity array indexes: app.js:17-28, app.js:42-58, app.js:66-82, app.js:89-105

Build docs developers (and LLMs) love

Get started for freeTalk to us