Summary
This feature provides users with a deep understanding of their digital habits through advanced data visualization. It primarily uses a Treemap to show which app categories generate the most notifications, allowing users to spot “noisy” categories at a glance. Additionally, it offers a suite of Premium Charts—such as scatter plots and trend lines—that tell a detailed story about focus time, app usage history, and daily routines, occasionally prompting users to upgrade to a Pro plan for full access.How It Works
The feature works by aggregating raw usage data and transforming it into geometric shapes (rectangles for treemaps, curves for trend lines) to make complex data intuitive.Aggregating Notification Data
When the user opens the Insights tab, the app retrieves a history of all notifications received over a specific period (e.g., today or the last week). It also fetches the category for every app (e.g., “Social,” “Productivity”) from the local database.
Calculating the Treemap
The ViewModel groups these notifications by category. It calculates what percentage of the total volume belongs to each category. is applied here: if the percentages don’t add up to exactly 100 due to decimals, the system intelligently adds or subtracts single percentage points from the largest remainders to ensure a perfect fit.
Visualizing the Data
The screen draws a Treemap, where the screen is divided into rectangles. The size of each rectangle corresponds to the volume of notifications.
- Big rectangles = High distraction categories.
- Small rectangles = Low distraction categories.
Generating Premium Insights
For specific behaviors (like “Morning Routine” or “Focus Score”), the app uses the Premium Insight Sheet. This component dynamically selects a specialized chart type—like a scatter plot for wake-up times or a bubble chart for session durations—and draws it using custom graphics to tell a specific story about the user’s day.
Data Stored
This feature primarily visualizes existing data, but it constructs specific data models to render the charts.| Field | Type | Description |
|---|---|---|
| packageName | String | The unique ID of the app (e.g., com.example.app) |
| category | String | The group the app belongs to (e.g., “Social”) |
| count | Integer | Number of notifications or minutes spent |
| displayPercent | Integer | The calculated percentage of the total (0-100) |
| history | List | A list of data points representing usage over past days |
Key Components
Treemap Engine
Responsible for taking raw counts and calculating the exact size and color of the rectangles so they fit perfectly on the screen.
Premium Charts
A library of custom-drawn visualizations (Scatter, Trend, Bubble, Gauge) that use low-level graphics commands to draw smooth animations and interactions.
Insight Sheet
A “Master Layout” that adapts its content based on the data. It decides whether to show a graph, a timeline, or a gauge, and adds a text summary explaining the trend.
Paywall Sheet
An interactive bottom sheet that displays pricing plans (Monthly, Annual, Lifetime), handles feature comparisons, and manages the upgrade flow.