Components / AI Data Visualization

AI Sentiment Chart

A time-series chart showing sentiment analysis results with positive/negative/neutral color coding.

Live Preview — ai-sentiment-chart-01

Sentiment Analysis

Positive
68%
Neutral
22%
Negative
10%

Overall sentiment is Bullish based on 12,402 indexed snippets today.

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-sentiment-chart-01.tsx 
"use client";

import React from "react";
import { Smile, Frown, Meh, TrendingUp } from "lucide-react";

export default function AISentimentChart() {
    const data = [
        { label: "Positive", val: 68, color: "text-emerald-500", icon: <Smile className="h-4 w-4" /> },
        { label: "Neutral", val: 22, color: "text-amber-500", icon: <Meh className="h-4 w-4" /> },
        { label: "Negative", val: 10, color: "text-red-500", icon: <Frown className="h-4 w-4" /> },
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-sm mx-auto overflow-hidden">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Sentiment Analysis</h3>
                <TrendingUp className="h-4 w-4 text-emerald-500" />
            </div>

            <div className="space-y-6">
                {data.map((d) => (
                    <div key={d.label} className="space-y-2">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <div className={d.color}>{d.icon}</div>
                                <span className="text-xs font-bold text-zinc-600 dark:text-zinc-400">{d.label}</span>
                            </div>
                            <span className={`text-[11px] font-black uppercase tracking-wider ${d.color}`}>{d.val}%</span>
                        </div>
                        <div className="h-2 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                            <div className={`h-full opacity-50 transition-all duration-1000 ${d.color.replace("text", "bg")}`} style={{ width: `${d.val}%` }} />
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-8 pt-6 border-t border-zinc-100 dark:border-zinc-800">
                <p className="text-[10px] text-zinc-500 leading-relaxed italic">
                    Overall sentiment is <span className="text-emerald-500 font-bold uppercase tracking-widest">Bullish</span> based on 12,402 indexed snippets today.
                </p>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AISentimentChart() None

Variables

All variable declarations found in this component.

Name Kind Value
data const [

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<Frown> 1× Library lucide-react
<Meh> 1× Library lucide-react
<Smile> 1× Library lucide-react
<TrendingUp> 1× Library lucide-react
<div> 10× Native Native HTML
<h3> 1× Native Native HTML
<p> 1× Native Native HTML
<span> 3× Native Native HTML

Related Components

  • AI Confidence Gauge — A gauge chart showing AI prediction confidence levels with color gradients from red (low) to green (high).
  • AI Embedding Scatter Plot — A 2D scatter plot visualizing AI embedding clusters with interactive hover tooltips and cluster labels.
  • AI Training Progress — A training progress dashboard showing loss curves, epoch progress, and training metrics in real-time.
  • AI Attention Heatmap — A heatmap visualization of transformer attention weights showing token-to-token relationships.
  • AI Token Distribution — A bar chart showing token probability distributions from AI model outputs with top-k visualization.
  • AI Model Comparison Radar — A radar chart comparing multiple AI models across dimensions like speed, accuracy, cost, and reasoning.