Feature: Step-by-Step Calculation View
Relevant source files
The following files were used as context for generating this wiki page:The Step-by-Step Calculation View is a core feature of the SPK Kajek application, designed to provide a transparent and detailed breakdown of the TOPSIS (Technique for Order of Preference by Similarity to Ideal Solution) method. Its primary purpose is to demystify the decision-making process, allowing users to see exactly how the final vendor rankings are derived from the initial data and user-defined weights.
This view is implemented in the CalculationView.tsx React component, which orchestrates user interaction and data presentation. It communicates with a dedicated backend endpoint, /api/calculate-detail, which performs the complex calculations and returns a structured, step-by-step result. This enhances user trust by making the system's logic auditable and easy to understand.
Sources: frontend/src/components/CalculationView.tsx, backend/main.py:476-574, SUMMARY.md, frontend/src/components/DocumentationView.tsx:10-16
Architecture and Data Flow
The feature operates on a client-server model. The frontend captures user-defined weights and sends them to the backend. The backend then processes the request, performs the full TOPSIS calculation, and returns a detailed breakdown, which the frontend then renders in a series of expandable sections.
The following diagram illustrates the data flow from user interaction to the final display.
Frontend Component: CalculationView.tsx
This React component is the user interface for the detailed calculation feature. It manages the state for weights, loading status, and the final calculation result, and renders the information in a user-friendly, step-by-step format.
Sources: frontend/src/components/CalculationView.tsx
Key Responsibilities
- Weight Input: Provides input fields for the user to define the weights for each criterion (CPU, RAM, Disk, Price). It includes real-time validation to ensure the sum of weights is 1.0.
- API Interaction: Triggers the calculation by sending a POST request to the
/api/calculate-detailendpoint via thehandleCalculatefunction. - State Management: Uses React's
useStatehook to manage component state. - Result Rendering: Displays the returned data in six distinct, collapsible
StepCardcomponents, each representing a stage of the TOPSIS algorithm. A genericrenderMatrixfunction is used to display tabular data for each step.
Component State
| State Variable | Type | Description |
|---|---|---|
weights | { cpu, ram, disk, price } | Stores the current values of the criteria weights from user input. |
result | `CalculationResult | null` |
loading | boolean | Tracks the loading state while waiting for the API response. |
expandedSteps | { [key: string]: boolean } | Manages the collapsed/expanded state of each of the six StepCard components. |
Sources: frontend/src/components/CalculationView.tsx:8-28
Formula Reference
The view includes a quick reference card that displays the key mathematical formulas used in the TOPSIS method, providing context for the calculations shown in each step.
| Formula Name | Equation |
|---|---|
| Normalisasi | rij = xij / √(Σxij²) |
| Pembobotan | yij = wj × rij |
| Jarak Euclidean | D± = √(Σ(yij - A±)²) |
| Score TOPSIS | Score = D- / (D+ + D-) |
| Ideal Positif (A+) | Max(BENEFIT), Min(COST) |
| Ideal Negatif (A-) | Min(BENEFIT), Max(COST) |
Sources: frontend/src/components/CalculationView.tsx:191-224, backend/main.py:507-518
Backend Endpoint: /api/calculate-detail
This FastAPI endpoint is the computational engine for the feature. It accepts the criteria weights and performs the entire TOPSIS calculation, packaging the results from each stage into a comprehensive JSON object.
Sources: backend/main.py:476-574
Endpoint Details
| Property | Value |
|---|---|
| Path | /api/calculate-detail |
| Method | POST |
| Request Body | WeightRequest Pydantic model |
| Response Body | JSON containing 6 steps of TOPSIS calculation |
Request & Response Structure
The endpoint expects a JSON object matching the WeightRequest model and returns a detailed JSON object.
This diagram shows the WeightRequest model used for the POST request and the structure of the CalculationResult object returned in the response.
Sources: backend/main.py:47-52, 477, frontend/src/components/CalculationView.tsx:8-17
TOPSIS Calculation Steps
The backend logic follows the standard six-step TOPSIS process. The data for each step is returned to the frontend and displayed in a corresponding StepCard.
Sources: backend/main.py:494-574, frontend/src/components/DocumentationView.tsx:120-143
Backend Calculation Flow
This flowchart outlines the sequence of operations performed by the /api/calculate-detail endpoint.
Step 1: Decision Matrix (X)
- Description: The initial matrix of raw performance values for each alternative (vendor) against each criterion. The backend first reads the level-based data (1-5) from
TOPSIS_Input_Level.xlsxand converts it into standardized numerical values. - API Response (
step1_input):title: "1. Matriks Keputusan (X)"description: "Nilai kriteria untuk setiap alternatif (konversi dari Level)"vendors: Array of vendor names.data: 2D array of numerical values.col_names: Array of criteria names (["CPU", "RAM", "Disk I/O", "Harga"]).
Sources: backend/main.py:494-497, 520-526, generate_excel_level.py:38-57
Step 2: Normalized Matrix (R)
- Description: The decision matrix is normalized to eliminate units and create a comparable scale.
- Formula:
rij = xij / √(Σxij²) - API Response (
step2_normalized):title: "2. Matriks Ternormalisasi (R)"description: "Rumus: rij = xij / √(Σxij²)"data: 2D array of normalized values.divisors: An array containing the calculated divisor (the square root of the sum of squares) for each column.
Sources: backend/main.py:500-502, 527-533
Step 3: Weighted Normalized Matrix (Y)
- Description: The normalized values are multiplied by the user-defined weights.
- Formula:
yij = wj × rij - API Response (
step3_weighted):title: "3. Matriks Terbobot (Y)"description: "Rumus: yij = wj × rij"data: 2D array of weighted normalized values.
Sources: backend/main.py:505-506, 534-539
Step 4: Ideal and Negative-Ideal Solutions (A+, A-)
- Description: The best (A+) and worst (A-) possible values for each criterion are determined from the weighted matrix. For "benefit" criteria (CPU, RAM, Disk I/O), A+ is the maximum value and A- is the minimum. For the "cost" criterion (Harga/Price), this is reversed.
- API Response (
step4_ideal):title: "4. Solusi Ideal"description: "A+ (Ideal Positif): Max untuk BENEFIT, Min untuk COST | A- (Ideal Negatif): sebaliknya"ideal_pos: Array of the positive-ideal values for each criterion.ideal_neg: Array of the negative-ideal values for each criterion.
Sources: backend/main.py:508-514, 540-545, README.md:104-110
Step 5: Euclidean Distance (D+, D-)
- Description: The Euclidean distance for each alternative from the positive-ideal solution (D+) and the negative-ideal solution (D-) is calculated.
- Formula:
D± = √(Σ(yij - A±)²) - API Response (
step5_distance):title: "5. Jarak ke Solusi Ideal"description: "D+ = Jarak ke A+ | D- = Jarak ke A-"d_pos: Array of D+ values for each vendor.d_neg: Array of D- values for each vendor.
Sources: backend/main.py:517-518, 546-552
Step 6: Performance Score (Score) and Ranking
- Description: The final TOPSIS score is calculated for each alternative. A higher score indicates a better overall performance. The alternatives are then ranked based on this score.
- Formula:
Score = D- / (D+ + D-) - API Response (
step6_score):title: "6. Hasil Akhir TOPSIS"description: "Score = D- / (D+ + D-) | Range: 0-1 (semakin tinggi semakin baik)"scores: Array of final scores for each vendor.ranks: Array of integer ranks for each vendor.
Sources: backend/main.py:521-523, 553-559, README.md:214-219
Conclusion
The Step-by-Step Calculation View is a critical feature that embodies the principle of transparency in decision support systems. By breaking down the complex TOPSIS algorithm into six digestible steps, it empowers users to not only see the final recommendation but to understand and verify the entire process behind it. This builds confidence in the system's output and transforms the application from a "black box" into a transparent and auditable analytical tool.
Sources: SUMMARY.md, frontend/src/components/CalculationView.tsx:132-136