Feature: Calculation History and Trends
Relevant source files
The following files were used as context for generating this wiki page:
The Calculation History and Trends feature provides users with the ability to archive, review, and analyze past TOPSIS calculations. This functionality serves as a persistent record of decision-making processes, allowing users to track results over time, compare different analysis scenarios, and restore previous weight configurations for re-evaluation.
The system saves each analysis with associated metadata, including weights, top results, and user-defined titles and tags. This data is then presented in a timeline view and visualized in trend charts to offer insights into how ranking outcomes change with different criteria priorities.
Sources: frontend/src/components/HistoryView.tsx, SUMMARY.md, README.md
Architecture
The feature is built on a client-server architecture involving the React frontend, a FastAPI backend, and a JSON file for data persistence. The user interacts with the AnalysisView to save a calculation, which triggers a request to the backend. The backend processes this request, performs the TOPSIS calculation again to ensure data integrity, and appends the result to the calculation_history.json file. The HistoryView component then fetches and displays this data.
Sources: backend/main.py, frontend/src/components/HistoryView.tsx, frontend/src/components/AnalysisView.tsx
Component Interaction Diagram
This diagram illustrates the flow of data and user interaction between the main components of the history feature.
Data Storage
All calculation history is stored in a single JSON file named calculation_history.json located in the backend directory. The backend manages this file, creating it if it doesn't exist and ensuring new entries are inserted at the beginning of the array (newest first). The history is capped at the last 50 entries to prevent the file from growing indefinitely.
Sources: backend/main.py:643-656, 737-740
Data Model (calculation_history.json)
The schema for each entry in the history JSON file is defined by the HistoryEntry Pydantic model in the backend and the save_calculation function.
Sources: backend/main.py:658-663, 720-735
Data Fields
| Field | Type | Description | Source File |
|---|---|---|---|
id | integer | A unique, sequential identifier for the history entry. | backend/main.py:721 |
timestamp | string | The ISO 8601 timestamp when the calculation was saved. | backend/main.py:722 |
title | string | A user-provided title for the analysis. | backend/main.py:660, 723 |
description | string | An optional, user-provided description. | backend/main.py:661, 724 |
tags | string[] | An array of user-provided tags for filtering. | backend/main.py:662, 725 |
weights | object | An object containing the weights used (cpu, ram, disk, price). | backend/main.py:661, 726 |
total_alternatives | integer | The total number of alternatives (vendors) included in the calculation. | backend/main.py:731 |
top_vendor | string | The name of the vendor that ranked first. | backend/main.py:732 |
top_score | float | The final TOPSIS score of the top-ranked vendor. | backend/main.py:733 |
rankings | object[] | An array containing the top 5 vendors with their rank, name, and score. | backend/main.py:734 |
Backend API
The backend provides a set of RESTful endpoints under /api/history to manage calculation history. These are defined in backend/main.py.
Sources: backend/main.py:665-769
API Endpoints
| Method | Endpoint | Description |
|---|---|---|
GET | /api/history | Retrieves the entire list of history entries. |
POST | /api/history | Saves a new calculation to the history. |
DELETE | /api/history/{id} | Deletes a specific history entry by its ID. |
DELETE | /api/history | Clears all entries from the history file. |
Sources: backend/main.py:667, 674, 747, 757
Save History Flow
The process of saving a calculation involves both the frontend and backend. The user provides metadata in a modal on the AnalysisView, which is then sent to the backend to be processed and stored.
Frontend Implementation
The user interface for the history feature is primarily handled by the HistoryView component, with support from AnalysisView for saving and HistoryTrendChart for visualization.
Sources: frontend/src/components/HistoryView.tsx, frontend/src/components/AnalysisView.tsx, frontend/src/components/HistoryTrendChart.tsx
History View (HistoryView.tsx)
This component is the main interface for browsing past calculations. It presents the data in a vertical timeline, grouped by date.
Key Features:
- Timeline Display: History items are grouped by date and displayed in a zig-zag timeline format.
- Search and Filter: Users can search by title or tag, and filter by a date range.
- Summary Statistics: Displays cards with total analyses, the most frequent top vendor, and the average top score.
- Actions per Item: Each item has a dropdown menu with options to:
- Restore Weights: Loads the item's weights into local storage, which can then be used in the
AnalysisView. - Export to PDF: Generates a PDF report of the analysis using
jsPDF. - Delete: Removes the entry from the history.
- Restore Weights: Loads the item's weights into local storage, which can then be used in the
- Comparison: Users can select two or more history items to open a comparison modal, which shows the weight distributions and top results side-by-side using radar charts.
Sources: frontend/src/components/HistoryView.tsx:138-149, 151-177, 269-340, 408-493
Trend Analysis (HistoryTrendChart.tsx)
This component is embedded within HistoryView and provides a visual representation of historical data. It plots the top score of each calculation over time, helping users identify trends or the impact of different weight scenarios.
The chart displays:
- A line representing the
top_scoreof each saved analysis. - An area fill under the line for better visual impact.
- Tooltips that show the
title,top_vendor, andtop_scorewhen hovering over a data point.
Sources: frontend/src/components/HistoryTrendChart.tsx, frontend/src/components/HistoryView.tsx:265-267
Saving a Calculation (AnalysisView.tsx)
The process of creating a history entry starts in the AnalysisView after a TOPSIS calculation has been performed.
- A "Simpan Hasil Analisa" button becomes available.
- Clicking it opens a modal where the user can input a Title, Description, and comma-separated Tags.
- Upon submission, the
handleSaveHistoryfunction is called, which sends aPOSTrequest to the/api/historyendpoint. - A success notification is displayed upon completion.
Sources: frontend/src/components/AnalysisView.tsx:141-160, 482-536
Conclusion
The Calculation History and Trends feature is a critical component of the SPK Kajek application, elevating it from a simple calculator to a robust decision support tool. By providing a persistent, searchable, and visual archive of past analyses, it empowers users to track their decision-making process, compare outcomes, and derive deeper insights from historical data. The combination of a timeline view, trend charts, and comparison tools offers a comprehensive solution for retrospective analysis.
Sources: SUMMARY.md, frontend/src/components/HistoryView.tsx