Analytics: Messages Over Time Chart

Relevant source files

The following files were used as context for generating this wiki page:

• web/src/analytics/components/MessagesOverTimeChart.jsx
• web/src/analytics/processors/timePeriodProcessor.js
• web/src/analytics/components/charts/columnDateChart.jsx
• web/src/analytics/MessageDataProcessor.js
• web/src/analytics/utils/dataStructureHelpers.js
• web/src/Pages/SearchSQLite/components/ResultsStep.jsx

The "Messages Over Time Chart" is a dynamic visualization component within the web application that displays the volume of messages exchanged over different time periods. It allows users to analyze messaging trends by day, month, or year. This feature is a key part of the analytics results screen, providing a high-level overview of chat activity within a selected date range.

The component is composed of a time frame selector and a column chart. It relies on a dedicated data processing layer to aggregate message counts and the amCharts library for rendering the interactive chart. It is instantiated within the ResultsStep component after a user has uploaded their chat data and executed a search.

Sources: web/src/analytics/components/MessagesOverTimeChart.jsx, web/src/Pages/SearchSQLite/components/ResultsStep.jsx:24-27

Architecture and Data Flow

The feature's architecture separates data processing from presentation. The MessageDataProcessor class acts as a central hub for analytics data, delegating time-based aggregation to the TimePeriodProcessor. The React components then consume this processed data to render the UI.

Component Structure

The UI is built from a hierarchy of React components. The main MessagesOverTimeChart component manages the state for the selected time frame and orchestrates data fetching, while the ColumnDateChart is a specialized component responsible for rendering the chart itself using amCharts.

The diagram below illustrates the component hierarchy.

Data Processing Flow

When a user interacts with the chart, a data flow is initiated to fetch and display the appropriate information. The MessageDataProcessor caches results to avoid redundant computations.

The following sequence diagram shows the interaction when a user changes the time frame.

Core Components

MessagesOverTimeChart.jsx

This is the main container component. It manages the state for the selected timeFrame (day, month, or year) and the corresponding data to be displayed.

• State Management: Uses the useState hook to manage timeFrame and data.
• User Interaction: Employs a SelectPicker from the rsuite library to allow users to change the time frame. The handleTimeFrameChange function updates the state by calling the appropriate method on the dataProcessor prop.
• Data Fetching: It retrieves processed data by calling methods like getMessagesPerDay(), getMessagesPerMonth(), or getMessagesPerYear() from the dataProcessor instance passed via props.

Props

Prop	Type	Description
dataProcessor	MessageDataProcessor	An instance of the main data processor class.
selectedChat	Array<string>	An array containing the name of the selected chat.

Time Frame Options

Label	Value	Method Called on dataProcessor
Day	day	getMessagesPerDay()
Month	month	getMessagesPerMonth()
Year	year	getMessagesPerYear()

Sources: web/src/analytics/components/MessagesOverTimeChart.jsx:10-16, 18-32

ColumnDateChart.jsx

This component is a wrapper for the amCharts 5 XY Chart, specifically configured to display date-based data. It is responsible for all aspects of chart rendering.

• Chart Initialization: Uses am5.Root.new() to create the chart instance within a useEffect hook.
• Axes: Configures a DateAxis for the x-axis and a ValueAxis for the y-axis. The baseInterval of the DateAxis is dynamically set based on the timeFrame prop.
• Series: A ColumnSeries is used to display the data. valueXField is set to 'date' and valueYField is set to the chat name.
• Interactivity: Includes an XYChartScrollbar for navigation and zooming, along with tooltips to show the exact message count for a given data point.
• Data Handling: The series.data.setAll(data) method is called within a useEffect hook to update the chart whenever the data or timeFrame props change.

Sources: web/src/analytics/components/charts/columnDateChart.jsx:45-71, 203-211

TimePeriodProcessor.js

This class contains the core logic for aggregating message counts over time. It is instantiated by MessageDataProcessor with the full message list and the selected start/end dates.

The general logic for each processing method is as follows:

1. Generate a complete date range for the given period (day, month, or year).
2. Initialize an array of data points, one for each date in the range.
3. Iterate through each message.
4. Calculate the difference between the message's date and the start of the date range.
5. Use this difference as an index to find the correct data point in the array and increment the message count for the corresponding chat.

The following diagram illustrates the processMessagesByDay logic.

Key methods in this class include:

Method	Description	Helper Functions Used
processMessagesByDay()	Groups messages by day.	generateDateRange, getDayDifference, initializeDataPoint, incrementMessageCount
processMessagesByMonth()	Groups messages by month.	generateDateRange, getMonthDifference, initializeDataPoint, incrementMessageCount
processMessagesByYear()	Groups messages by year.	generateDateRange, getYearDifference, initializeDataPoint, incrementMessageCount

Sources: web/src/analytics/processors/timePeriodProcessor.js:20-73, web/src/analytics/utils/dataStructureHelpers.js:20-33

Summary

The "Messages Over Time Chart" feature provides a powerful and interactive way for users to visualize their messaging habits. Its architecture effectively decouples the data aggregation logic in TimePeriodProcessor from the rendering logic in ColumnDateChart, with MessagesOverTimeChart acting as a controller. This modular design, combined with the caching capabilities of MessageDataProcessor, ensures efficient and responsive performance. The use of the amCharts library provides a rich, interactive user experience with features like zooming, scrolling, and detailed tooltips.