204 lines
8.2 KiB
TypeScript
204 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import Usecase from "./Usecase";
|
|
import TopCard from "../Insights/TopCard";
|
|
import { MyResponsiveLine } from "../Insights/LineChart";
|
|
import { MyResponsivePie } from "../Insights/PieChart";
|
|
import { MyResponsiveBar } from "../Insights/BarChart";
|
|
|
|
const suggestions =
|
|
"Based on the recent data, maintaining a neutral emotional state is predominant. Although there is a slight emergence of negative emotions like disgust, sadness, and anger, they are balanced by an equal presence of joy and surprise. Encourage positive interactions and activities to enhance the joy and neutral emotions further.";
|
|
|
|
const cardData = {
|
|
main_emotion_1: { title: "Joy", value: 28.8, change: 28 },
|
|
main_emotion_2: { title: "Suprise", value: 19.2, change: -12 },
|
|
change_1: { title: "Anger", value: 12.1, change: 69 },
|
|
change_2: { title: "Fear", value: 5.9, change: -52 },
|
|
};
|
|
|
|
const barData = [
|
|
{ emotion: "Surprise", Today: 0.28, Yesterday: 0.25 },
|
|
{ emotion: "Joy", Today: 0.13, Yesterday: 0.22 },
|
|
{ emotion: "Sadness", Today: 0.12, Yesterday: 0.18 },
|
|
{ emotion: "Anger", Today: 0.12, Yesterday: 0.12 },
|
|
{ emotion: "Neutral", Today: 0.12, Yesterday: 0.1 },
|
|
{ emotion: "Fear", Today: 0.12, Yesterday: 0.1 },
|
|
{ emotion: "Disgust", Today: 0.12, Yesterday: 0.09 },
|
|
];
|
|
|
|
const lineData = [
|
|
{
|
|
id: "Negative",
|
|
name: "Negative",
|
|
data: [
|
|
{ x: "2024-09-4", y: 0.23122093090355336 },
|
|
{ x: "2024-09-5", y: 0.21122093090355345 },
|
|
{ x: "2024-09-6", y: 0.13122093090355345 },
|
|
{ x: "2024-09-7", y: 0.18122093090355345 },
|
|
{ x: "2024-09-8", y: 0.43122093090355345 },
|
|
{ x: "2024-09-9", y: 0.23122093090355345 },
|
|
{ x: "2024-09-10", y: 0.13122093090355345 },
|
|
],
|
|
},
|
|
{
|
|
id: "Neutral",
|
|
name: "Neutral",
|
|
data: [
|
|
{ x: "2024-09-4", y: 0.2433541552767576 },
|
|
{ x: "2024-09-5", y: 0.1433541552767577 },
|
|
{ x: "2024-09-6", y: 0.11122093090355345 },
|
|
{ x: "2024-09-7", y: 0.20122093090355345 },
|
|
{ x: "2024-09-8", y: 0.23122093090355345 },
|
|
{ x: "2024-09-9", y: 0.20122093090355345 },
|
|
{ x: "2024-09-10", y: 0.23122093090355345 },
|
|
],
|
|
},
|
|
{
|
|
id: "Positive",
|
|
name: "Positive",
|
|
data: [
|
|
{ x: "2024-09-4", y: 0.3233541552767576 },
|
|
{ x: "2024-09-5", y: 0.2433541552767577 },
|
|
{ x: "2024-09-6", y: 0.23122093090355345 },
|
|
{ x: "2024-09-7", y: 0.23122093090355345 },
|
|
{ x: "2024-09-8", y: 0.13122093090355345 },
|
|
{ x: "2024-09-9", y: 0.28122093090355345 },
|
|
{ x: "2024-09-10", y: 0.33122093090355345 },
|
|
],
|
|
},
|
|
];
|
|
|
|
const pieData = [
|
|
{ id: "Positive", label: "Positive", value: 0.43 },
|
|
{ id: "Neutral", label: "Neutral", value: 0.34 },
|
|
{ id: "Negative", label: "Negative", value: 0.23 },
|
|
];
|
|
|
|
export default function InsightsDemo() {
|
|
const isEmpty = (data: any) => {
|
|
return !data || data.length === 0;
|
|
};
|
|
|
|
const placeholder = (
|
|
<div className="my-4 bg-gray-50 text-center w-full h-full rounded-lg flex items-center justify-center">
|
|
<p className="text-lg font-medium text-gray-500">
|
|
Talk to a character to view your trends
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
// console.log(cardData?.["change_1"]);
|
|
return (
|
|
<div className="">
|
|
{/* <div className="text-3xl font-medium mb-8 text-gray-800">Insights</div>
|
|
<div className="mt-2 mb-4 text-gray-800">{suggestions}</div> */}
|
|
<div className="flex flex-col md:flex-row md:space-x-3">
|
|
<div className="w-full">
|
|
<h2 className="mb-4 text-lg font-bold text-gray-700">
|
|
Daily emotion highlights
|
|
</h2>
|
|
<div className="flex space-x-3">
|
|
<div className="flex-grow">
|
|
<TopCard
|
|
title={
|
|
cardData?.["main_emotion_1"]?.title ??
|
|
"Emotion"
|
|
}
|
|
value={`${cardData?.["main_emotion_1"]?.value ?? "0"}%`}
|
|
delta={
|
|
cardData?.["main_emotion_1"]?.change ?? 0
|
|
}
|
|
filter={"days"}
|
|
type="top"
|
|
/>
|
|
</div>
|
|
<div className="flex-grow">
|
|
<TopCard
|
|
title={
|
|
cardData?.["main_emotion_2"]?.title ??
|
|
"Emotion"
|
|
}
|
|
value={`${cardData?.["main_emotion_2"]?.value ?? "0"}%`}
|
|
delta={
|
|
cardData?.["main_emotion_2"]?.change ?? 0
|
|
}
|
|
filter={"days"}
|
|
type="top"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full mt-2 md:mt-0">
|
|
<h2 className="mb-4 text-lg font-bold text-gray-700">
|
|
Significant emotion shifts
|
|
</h2>
|
|
<div className="flex space-x-3">
|
|
<div className="flex-grow">
|
|
<TopCard
|
|
title={
|
|
cardData?.["change_1"]?.title ?? "Emotion"
|
|
}
|
|
value={`${cardData?.["change_1"]?.value ?? "0"}%`}
|
|
delta={cardData?.["change_1"]?.change ?? 0}
|
|
filter={"days"}
|
|
type="shift"
|
|
/>
|
|
</div>
|
|
<div className="flex-grow">
|
|
<TopCard
|
|
title={
|
|
cardData?.["change_2"]?.title ?? "Emotion"
|
|
}
|
|
value={`${cardData?.["change_2"]?.value ?? "0"}%`}
|
|
delta={cardData?.["change_2"]?.change ?? 0}
|
|
filter={"days"}
|
|
type="shift"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col md:flex-row md:space-x-8 mx-6-">
|
|
<div className="w-full order-2 md:order-1 md:flex-grow">
|
|
<h2 className="mt-6 text-lg font-bold text-gray-700">
|
|
{/* Sentiment Over Time and Forecast */}
|
|
Sentiment over time
|
|
</h2>
|
|
<div className="h-[300px] lg:h-96">
|
|
{isEmpty(lineData) ? (
|
|
placeholder
|
|
) : (
|
|
<MyResponsiveLine data={lineData} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full order-1 md:order-2 md:w-72 md:flex-shrink-0">
|
|
<h2 className="mt-6 text-lg font-bold text-gray-700">
|
|
Daily sentiment proportions
|
|
</h2>
|
|
<div className="h-[300px] lg:h-96">
|
|
{isEmpty(pieData) ? (
|
|
placeholder
|
|
) : (
|
|
<MyResponsivePie data={pieData} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <div className="w-full">
|
|
<h2 className="mt-6 text-lg font-bold text-gray-700">
|
|
Emotions Breakdown
|
|
</h2>
|
|
<div className="h-[350px] lg:h-[450px]">
|
|
{isEmpty(barData) ? (
|
|
placeholder
|
|
) : (
|
|
<MyResponsiveBar data={barData} filter={"days"} />
|
|
)}
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
);
|
|
}
|