Skip to content

Better progress tracking#259

Open
sneakygecko wants to merge 7 commits intodidoesdigital:masterfrom
sneakygecko:better_progress_tracking
Open

Better progress tracking#259
sneakygecko wants to merge 7 commits intodidoesdigital:masterfrom
sneakygecko:better_progress_tracking

Conversation

@sneakygecko
Copy link

Add Progress Graph and Enhanced Lesson History Tracking

This PR implements a comprehensive progress tracking system with visual analytics for the typey-type application.

What's Added

Progress Visualization

  • New interactive progress graph showing WPM, accuracy, and cumulative word count over time
  • Multi-axis chart with colour-coded metrics (WPM in purple, accuracy in orange, total words in blue)
  • Hover interactions displaying detailed lesson data
  • Daily data aggregation to reduce chart noise

Enhanced Data Tracking

  • Automatic lesson result storage to localStorage after each completed lesson
  • Lesson history includes timestamp, lesson title, WPM, accuracy, and word count
  • Progress data export/import now includes both met words and lesson history
  • Backward compatibility with existing progress data format

UI Improvements

  • Progress history table
  • Show/hide toggle for detailed history view
  • Enhanced chart axis formatting and labelling
  • Improved clipboard functionality for progress backup

Technical Changes

  • Extended Chart components with better axis customization and tick formatting
  • Added TypeScript types for LessonResult and LessonHistory
  • Implemented data deduplication to prevent duplicate lesson entries
  • Enhanced progress backup/restore to handle combined data format
  • Improved date formatting and chart interpolation using D3 curves

Files Modified

  • New components: ProgressGraph.tsx, ProgressHistoryList.tsx
  • Enhanced: Chart Axis system, Progress page, Finished lesson component
  • Updated: Download/backup functionality, TypeScript types

Impact

The progress graph provides users with valuable insights into their typing improvement over time, while maintaining full backward compatibility with existing progress data.

image

This commit introduces a new feature for tracking and visualizing detailed lesson progress.

Key features and improvements:
- Detailed Lesson Progress Tracking:
    - Introduced `LessonResult` and `LessonHistory` TypeScript types to store comprehensive lesson data (timestamp, WPM, accuracy, lesson title).
    - Modified `src/pages/lessons/components/Finished.tsx` to capture and save this detailed `LessonResult` to `localStorage` as part of a
      `LessonHistory` array after each lesson.
- Interactive Progress Graph:
    - Created `src/pages/progress/components/ProgressGraph.tsx` to visualize `LessonHistory` data, integrated into `src/pages/progress/Progress.tsx
      `.
    - Implemented daily data aggregation in `ProgressGraph.tsx` to show only max WPM and accuracy per day.
    - Configured the accuracy Y-axis scale to be fixed from 0 to 100%.
    - Configured the WPM Y-axis to be variable depending on data.
    - Configured the X-axis to show dates.
- Hidable Lesson History List:
    - Created `src/pages/progress/components/ProgressHistoryList.tsx` to display a detailed list of all completed lesson stats.
    - Added a toggle button in `src/pages/progress/Progress.tsx` to show/hide this list.
- Enhanced Progress Download/Upload:
    - Modified `src/pages/progress/components/DownloadProgressButton.tsx` to include `LessonHistory` in the downloaded progress file.
    - Updated `src/pages/progress/Progress.tsx`'s upload logic (`handleLoadProgress`) to support both old (`metWords` only) and new (`metWords` +
      `lessonHistory`) file formats, ensuring backward compatibility.
    - Updated the "Copy progress" button to copy the full progress data (`metWords` + `lessonHistory`) using a hidden textarea as a data source.

On branch better_progress_tracking
Changes to be committed:
	modified:   src/components/Chart/Axis.tsx
	modified:   src/components/FinishedSpeedChart.tsx
	modified:   src/components/PseudoContentButton.tsx
	modified:   src/pages/lessons/components/Finished.tsx
	modified:   src/pages/progress/Progress.tsx
	modified:   src/pages/progress/components/DownloadProgressButton.tsx
	new file:   src/pages/progress/components/ProgressGraph.tsx
	new file:   src/pages/progress/components/ProgressHistoryList.tsx
	modified:   src/types.ts
	modified:   src/utils/makeDownloadHref.ts
@didoesdigital
Copy link
Owner

Thanks for proposing some changes. This is a bit too much to consider and discuss in 1 Pull Request. There are multiple parts for consideration worthy of their own issues, discussion, and pull requests. For example:

  • technical choices: storage approach (local storage vs IndexedDB), date handling, accessibility
  • product/design choices: what statistics to include that would be most helpful to steno students, how to support existing workflows that rely on downloading metWords progress by itself, where to include charts and tables and how to show them (e.g. controls for progressive disclosure)
  • data visualisation choices: what to chart, how to present them (e.g. showing data points, starting Y axes from 0, avoiding dual Y axes, avoiding rotated text, prioritising most valuable insights)
  • delivery considerations: designing, discussing, building, reviewing, and releasing small, incremental improvements to minimise bugs, changes to UX/disruptions to workflows, scope of reviews, etc.

I suggest reading the CONTRIBUTING guidelines and using Issues to discuss significant features before creating pull requests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants