Interactive Charts and Visualizations

Relevant source files

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

• dashboard-next/components/OptimizedCharts.tsx
• dashboard-next/components/AreaChart.tsx
• dashboard-next/app/api/analytics/targets/route.ts
• dashboard-next/app/api/layers/route.ts
• dashboard-next/DASHBOARD_STRUCTURE.md
• PERFORMANCE_OPTIMIZATION_REPORT.md
• dashboard-next/README.md

The sentiment analysis dashboard utilizes a suite of interactive charts and visualizations to present complex data in an understandable format. Built with the Recharts library, these components provide a responsive and engaging user experience for exploring sentiment, emotion, and other analytical dimensions. The system is designed with a "Progressive Disclosure" philosophy, where high-level overviews are presented first, with more detailed charts available on dedicated pages.

This visualization system is architected for performance, employing techniques such as component memoization, code splitting, and optimized data fetching to ensure a fast and smooth interface, even with large datasets. Data is served to the frontend components via dedicated Next.js API routes that process a core CSV file.

Sources: dashboard-next/README.md, dashboard-next/DASHBOARD_STRUCTURE.md, PERFORMANCE_OPTIMIZATION_REPORT.md

Architecture and Data Flow

The charting architecture follows a standard client-server pattern within the Next.js framework. React components on the client-side are responsible for rendering the charts, while server-side API routes handle data processing and aggregation from the source CSV file.

The general data flow is as follows:

1. A page component (e.g., /sentiment/page.tsx) mounts.
2. A client-side hook (e.g., useDashboardStats) requests data from a specific API endpoint.
3. The Next.js API route (e.g., /api/layers) reads the raw comments_fixed_labels.csv file.
4. The API route processes the data—counting, grouping, and formatting it into a JSON structure suitable for Recharts.
5. The API responds with the JSON data.
6. The client-side hook receives the data and passes it to the chart component.
7. The Recharts component renders the interactive visualization.

Sources: dashboard-next/DASHBOARD_STRUCTURE.md, dashboard-next/app/api/layers/route.ts, PERFORMANCE_OPTIMIZATION_REPORT.md

This diagram illustrates the data flow from the backend data source to the rendered chart on the user's screen.

Chart Components

The project contains several reusable and optimized chart components, primarily located in dashboard-next/components/. These components are built using Recharts and are wrapped in React.memo for performance optimization.

Component	File	Chart Type	Purpose
OptimizedEmotionChart	OptimizedCharts.tsx	Vertical Bar Chart	Displays the distribution of different emotions.
OptimizedTargetChart	OptimizedCharts.tsx	Bar Chart	Shows the count of comments aimed at different targets (PSSI, Players, etc.).
OptimizedPieChart	OptimizedCharts.tsx	Pie Chart (Donut)	Visualizes the proportion of different categories, such as overall sentiment.
AreaChart	AreaChart.tsx	Vertical Bar Chart	Displays the distribution of Positive, Negative, and Neutral sentiments. Note: The component is named AreaChart but implements a BarChart.

Sources: dashboard-next/components/OptimizedCharts.tsx, dashboard-next/components/AreaChart.tsx

Common Chart Features

• Responsiveness: All charts are wrapped in ResponsiveContainer to adapt to different screen sizes.
• Interactive Tooltips: Custom-styled tooltips appear on hover, providing detailed information about the data point. The tooltip style is defined to match the dashboard's dark, glass-morphism theme.
• Custom Colors: Color schemes are defined and passed to the charts to ensure visual consistency for different categories (e.g., sentiment, emotions).

Sources: dashboard-next/components/OptimizedCharts.tsx:11-19, dashboard-next/components/AreaChart.tsx

Data Endpoints for Visualizations

Chart components are populated with data from dedicated API routes that process the source dataset.

/api/layers

This is a comprehensive endpoint that provides aggregated data for multiple analytical "layers" in a single response. It reads the comments_fixed_labels.csv file, counts occurrences for each category, and formats the output.

The endpoint returns an object with keys for each layer:

• sentiment
• target
• emotion
• constructiveness

Each key contains an array of objects, sorted by value, ready for consumption by the chart components. If the data file is not found, it returns hardcoded fallback data.

Sources: dashboard-next/app/api/layers/route.ts

The data structure for each item in the sentiment array is as follows:

Field	Type	Description	Example
name	string	The name of the category.	"Negative"
value	number	The total count for this category.	13421
percentage	number	The percentage of the total.	69.8
color	string	The hex color code for the chart.	"#ef4444"
accuracy	number	The model accuracy for this classification type.	89.4

Sources: dashboard-next/app/api/layers/route.ts:110-117

/api/analytics/targets

This endpoint is dedicated to analyzing data based on the target_kritik (target of criticism) column.

• If called without a target query parameter, it returns an aggregated list of all targets, their total counts, and sentiment breakdown percentages.
• If called with a target query parameter (e.g., /api/analytics/targets?target=pssi_management), it returns detailed statistics for that specific target, including total comments, sentiment breakdown, and sample comments.

This diagram shows the logic within the /api/analytics/targets endpoint.

Performance Optimizations

Performance is a critical aspect of the visualization system, addressed through several techniques.

Sources: PERFORMANCE_OPTIMIZATION_REPORT.md, dashboard-next/OPTIMIZATION_SUMMARY.md

Component and Data Memoization

To prevent unnecessary re-renders, which can be expensive for complex charts, the application heavily uses React's memoization features.

• React.memo: Chart components like OptimizedEmotionChart are wrapped in memo. This ensures the component only re-renders if its props have changed.
• useMemo: Inside the components, the chartData variable is wrapped in a useMemo hook. This ensures that the data transformation logic only runs when the source data prop changes, not on every render.

// dashboard-next/components/OptimizedCharts.tsx:21-30
export const OptimizedEmotionChart = memo(function OptimizedEmotionChart({ data }: { data: any[] }) {
  const chartData = useMemo(() => 
    data?.map((e, i) => ({ 
      name: e.name, 
      value: e.count, 
      pct: parseFloat(e.percentage), 
      fill: EMOTION_COLORS[i % 6] 
    })) || [], [data]
  );
//...

Sources: dashboard-next/components/OptimizedCharts.tsx:21-30, PERFORMANCE_OPTIMIZATION_REPORT.md

Code Splitting and Dynamic Imports

Heavy components, including charts, are lazy-loaded using Next.js dynamic imports. This reduces the initial JavaScript bundle size, leading to a faster initial page load. A loading skeleton is shown while the chart component is being fetched.

// PERFORMANCE_OPTIMIZATION_REPORT.md
const AIInsights = dynamic(
  () => import("../components/AIInsights"),
  { 
    ssr: false,
    loading: () => <LoadingSkeleton />
  }
);

Sources: PERFORMANCE_OPTIMIZATION_REPORT.md

Build Configuration

The next.config.js file is configured to optimize package imports for libraries like recharts, which aids in tree-shaking and results in a smaller production bundle.

Sources: PERFORMANCE_OPTIMIZATION_REPORT.md

Summary

The interactive visualization system in the Garuda Sentiment Analysis Dashboard is a robust and performant feature. By leveraging Recharts for rendering, dedicated API routes for data processing, and a suite of optimization techniques like memoization and code splitting, the dashboard provides users with a fast, responsive, and insightful way to explore sentiment data. The modular design of the chart components and data endpoints makes the system maintainable and easy to extend with new visualizations in the future.