Feature: TOPSIS Analysis View

Relevant source files

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

• frontend/src/components/AnalysisView.tsx
• backend/topsis_service.py
• backend/main.py
• SUMMARY.md
• README.md
• frontend/src/components/DocumentationView.tsx
• topsis_spk.py
• generate_excel_level.py

The TOPSIS Analysis View is the central feature of the SPK Kajek application, providing a user interface to execute the TOPSIS (Technique for Order Preference by Similarity to Ideal Solution) algorithm for ranking Cloud VPS providers. This view allows users to dynamically configure the weights of different criteria, run the analysis, and view the ranked results through interactive charts and tables. It serves as the primary decision-making tool within the system.

The architecture is a classic client-server model, with a React frontend communicating with a FastAPI backend via a REST API. The frontend is responsible for user input and data visualization, while the backend handles the core computational logic.

Sources: SUMMARY.md:1-10, 29-32, README.md:15-16, frontend/src/components/AnalysisView.tsx

Architecture and Data Flow

The analysis process begins on the frontend, where the user adjusts criteria weights and initiates the calculation. A request is sent to the backend API, which performs the TOPSIS calculation and returns the ranked results. The frontend then renders these results in various visual formats.

This diagram illustrates the sequence of events when a user performs an analysis.

Frontend Component: AnalysisView.tsx

This React component provides the user interface for the TOPSIS analysis. It is built using TypeScript, Tailwind CSS for styling, and Recharts for data visualization.

Key UI elements include:

• Weight Configuration: Sliders for users to adjust the weights for CPU, RAM, Disk I/O, and Price. The total weight is validated to ensure it sums to 100%.
• Analysis Button: A button to trigger the calculation by calling the backend API.
• Results Display:
  • A ranked list of the top 10 recommended vendors.
  • An interactive bar chart (BarChart) visualizing the scores of the top 10 vendors.
  • A radar chart (RadarChart) comparing the attributes of the top-ranked vendors.

Sources: SUMMARY.md:33-36, DASHBOARD_README.md:104-112, README.md:175-180

Backend API Endpoint: /api/calculate

The backend exposes a single endpoint to perform the entire TOPSIS calculation.

• Endpoint: POST /api/calculate
• Description: Receives criteria weights, performs the full TOPSIS calculation using data from TOPSIS_Input_Level.xlsx, and returns the ranked results.
• Authentication: This endpoint is protected and requires a valid JWT Bearer token.

Sources: backend/main.py:330-331, SUMMARY.md:43, 50

Request Body

The endpoint expects a JSON object matching the WeightRequest Pydantic model.

Parameter	Type	Description
cpu	float	Weight for the CPU criterion (e.g., 0.25)
ram	float	Weight for the RAM criterion (e.g., 0.25)
disk	float	Weight for the Disk I/O criterion (e.g., 0.25)
price	float	Weight for the Price criterion (e.g., 0.25)
Sources: backend/main.py:53-58

Response Body

The API returns a JSON object containing the complete analysis results, including a ranked list, the top recommendation, and the ideal solution vectors.

{
  "rankings": [
    {
      "Rank": 1,
      "Vendor": "Vendor A",
      "Nama Paket (Plan)": "Basic",
      "CPU_val": 4,
      "RAM_val": 8,
      "DiskIO_val": 500,
      "Price_val": 35,
      "Score": 0.8976,
      "D_pos": 0.0123,
      "D_neg": 0.1077
    }
  ],
  "top_recommendation": {
    "Vendor": "Vendor A",
    "Score": 0.8976,
    "Rank": 1
  },
  "matrix": {
    "ideal_pos": [0.05, 0.06, 0.04, 0.01],
    "ideal_neg": [0.01, 0.01, 0.01, 0.08]
  }
}

Sources: backend/main.py:392-413

TOPSIS Calculation Logic

The core logic resides in the backend and follows the standard TOPSIS methodology. The process is encapsulated within the /api/calculate endpoint handler.

This flowchart shows the step-by-step process of the TOPSIS calculation in the backend.

1. Data Loading and Conversion

The system first reads the vendor data from the 1. Input Level sheet in TOPSIS_Input_Level.xlsx. Each criterion is stored as a level from 1 to 5. These levels are then converted into standardized numerical values based on a predefined mapping.

Sources: backend/main.py:333-344, generate_excel_level.py:44-67

The criteria types and their level-to-value conversions are as follows:

Criteria	Type	Level 1	Level 2	Level 3	Level 4	Level 5
CPU	Benefit	2	4	6	8	10
RAM	Benefit	2	4	8	16	32
Disk I/O	Benefit	150	300	500	700	1000
Harga	Cost	15	35	75	150	250
Sources: backend/main.py:340-344, README.md:112-166, INFO.txt:34-38

2. TOPSIS Algorithm Steps

The calculation proceeds through the following steps implemented in Python using NumPy and Pandas:

1. Normalization: The decision matrix X is normalized using vector normalization to create matrix R.
   • Formula: rij = xij / √(Σxij²)
2. Weighting: The normalized matrix R is multiplied by the user-defined weights w to create the weighted matrix Y.
   • Formula: yij = wj × rij
3. Ideal Solutions: The positive ideal solution (A+) and negative ideal solution (A-) are determined.
   • For benefit criteria (CPU, RAM, Disk I/O), A+ is the maximum value and A- is the minimum.
   • For the cost criterion (Harga), A+ is the minimum value and A- is the maximum.
4. Distance Calculation: The Euclidean distance of each alternative from A+ (distance D+) and A- (distance D-) is calculated.
5. Preference Score: The final TOPSIS score for each alternative is calculated. A higher score indicates a better ranking.
   • Formula: Score = D- / (D+ + D-)
6. Ranking: Alternatives are ranked in descending order based on their final score.

Sources: backend/main.py:347-380, backend/topsis_service.py:68-85, frontend/src/components/DocumentationView.tsx:142-157

Summary

The Analysis View is the cornerstone of the SPK Kajek application, seamlessly integrating a user-friendly frontend with a powerful backend calculation engine. It empowers users to perform sophisticated multi-criteria decision analysis by simply adjusting weights and interpreting the clear, visual results. The separation of concerns between the React frontend and FastAPI backend creates a robust and maintainable architecture for this critical feature.

Sources: SUMMARY.md:1-4, 33-36, README.md:15-16