I have a react js app that is currently showing a logging component which is able to read realtime data from a video feed and show it over frontend, but now i wish to build proper charts that are realavent to the data, so help me do the same, here is the current component chat js - 
import React, { useState, useEffect } from 'react';
import { logEmotionData } from '../utils/logger'; // Logger utility

function Chat() {
  const [messages, setMessages] = useState([]);

  const appendToChat = (data) => {
    // Log the entire event data object
    logEmotionData(data);

    // Store a stringified version of the whole data to render in chat
    const newMessage = { rawData: JSON.stringify(data, null, 2) };
    setMessages((prevMessages) => [...prevMessages, newMessage]);
  };

  useEffect(() => {
    const loadAiSDK = async () => {
      try {
        await loadScripts();
        const CY = window.CY;

        CY.loader()
          .licenseKey('sk1d9f92a184031a54caf357d57b91f64595b3af40b929')
          .addModule(CY.modules().FACE_AROUSAL_VALENCE.name, { smoothness: 0.7 })
          .addModule(CY.modules().FACE_ATTENTION.name, { smoothness: 0.83 })
          .addModule(CY.modules().DATA_AGGREGATOR.name, {
            initialWaitMs: 2000,
            periodMs: 1000,
          })
          .load()
          .then(({ start }) => start());

        // Listen to all events from the SDK and log the whole event.detail
        window.addEventListener(CY.modules().EVENT_BARRIER.eventName, (event) => {
          // Log the entire event detail
          appendToChat(event.detail);
        });

      } catch (error) {
        console.error('Error loading AI SDK:', error);
      }
    };

    loadAiSDK();
  }, []);

  return (
    <div id="chat-container" className="chat-container">
      {messages.map((message, index) => (
        <pre key={index} className="chat-message system">
          {message.rawData}
        </pre>
      ))}
    </div>
  );
}

async function loadScripts() {
  const loadScript = (src, config = null) => {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.onload = resolve;
      if (config) script.setAttribute('data-config', config);
      script.src = src;
      document.head.appendChild(script);
    });
  };

  await loadScript(
    'https://sdk.morphcast.com/mphtools/v1.1/mphtools.js',
    'cameraPrivacyPopup, compatibilityUI, compatibilityAutoCheck'
  );
  await loadScript('https://ai-sdk.morphcast.com/v1.16/ai-sdk.js');
}

export default Chat;


The data that is being displayed from it over chat.js is this as a dictionary - 
{
  "camera": {
    "frameTimestamp": 1727984744132
  },
  "face_arousal_valence": {
    "arousal": 0.42,
    "valence": -0.52,
    "affects38": {
      "Afraid": 0.85,
      "Amused": 0,
      "Angry": 0.69,
      "Annoyed": 0.93,
      "Anxious": 0,
      "Apathetic": 0.6,
      "Astonished": 0,
      "Bored": 0,
      "Calm": 0,
      "Conceited": 0.44,
      "Contemplative": 0,
      "Content": 0,
      "Convinced": 0.12,
      "Delighted": 0,
      "Depressed": 0.15,
      "Determined": 0,
      "Disappointed": 0.72,
      "Discontented": 0.97,
      "Distressed": 0.94,
      "Embarrassed": 0,
      "Enraged": 0.78,
      "Excited": 0,
      "Feel Well": 0,
      "Frustrated": 0.99,
      "Happy": 0,
      "Hopeful": 0,
      "Impressed": 0,
      "Melancholic": 0,
      "Peaceful": 0,
      "Pensive": 0,
      "Pleased": 0,
      "Relaxed": 0,
      "Sad": 0.25,
      "Satisfied": 0,
      "Sleepy": 0,
      "Tired": 0,
      "Uncomfortable": 0.38,
      "Worried": 0.25
    },
    "affects98": {
      "Adventurous": 0,
      "Afraid": 0.85,
      "Alarmed": 0.58,
      "Ambitious": 0.06,
      "Amorous": 0,
      "Amused": 0,
      "Angry": 0.69,
      "Annoyed": 0.93,
      "Anxious": 0,
      "Apathetic": 0.6,
      "Aroused": 0,
      "Ashamed": 0.16,
      "Astonished": 0,
      "At Ease": 0,
      "Attentive": 0,
      "Bellicose": 0.54,
      "Bitter": 0.9,
      "Bored": 0,
      "Calm": 0,
      "Compassionate": 0,
      "Conceited": 0.44,
      "Confident": 0,
      "Conscientious": 0,
      "Contemplative": 0,
      "Contemptuous": 0.94,
      "Content": 0,
      "Convinced": 0.12,
      "Courageous": 0,
      "Defient": 0.9,
      "Dejected": 0,
      "Delighted": 0,
      "Depressed": 0.15,
      "Desperate": 0.08,
      "Despondent": 0.28,
      "Determined": 0,
      "Disappointed": 0.72,
      "Discontented": 0.97,
      "Disgusted": 0.97,
      "Dissatisfied": 0.65,
      "Distressed": 0.94,
      "Distrustful": 0.9,
      "Doubtful": 0,
      "Droopy": 0,
      "Embarrassed": 0,
      "Enraged": 0.78,
      "Enthusiastic": 0,
      "Envious": 0.77,
      "Excited": 0,
      "Expectant": 0.17,
      "Feel Guilt": 0.27,
      "Feel Well": 0,
      "Feeling Superior": 0.27,
      "Friendly": 0,
      "Frustrated": 0.99,
      "Glad": 0,
      "Gloomy": 0.11,
      "Happy": 0,
      "Hateful": 0.81,
      "Hesitant": 0,
      "Hopeful": 0,
      "Hostile": 0.72,
      "Impatient": 0.75,
      "Impressed": 0,
      "Indignant": 0.92,
      "Insulted": 0.91,
      "Interested": 0,
      "Jealous": 0.79,
      "Joyous": 0,
      "Languid": 0.08,
      "Light Hearted": 0.1,
      "Loathing": 0.92,
      "Longing": 0,
      "Lusting": 0.26,
      "Melancholic": 0,
      "Miserable": 0.53,
      "Passionate": 0.21,
      "Peaceful": 0,
      "Pensive": 0,
      "Pleased": 0,
      "Polite": 0,
      "Relaxed": 0,
      "Reverent": 0,
      "Sad": 0.25,
      "Satisfied": 0,
      "Selfconfident": 0,
      "Serene": 0,
      "Serious": 0,
      "Sleepy": 0,
      "Solemn": 0,
      "Startled": 0.69,
      "Suspicious": 0.94,
      "Taken Aback": 0.57,
      "Tense": 0.56,
      "Tired": 0,
      "Triumphant": 0,
      "Uncomfortable": 0.38,
      "Wavering": 0,
      "Worried": 0.25
    },
    "quadrant": "Obstructive"
  },
  "face_attention": {
    "attention": 1
  }
}
For each frame, now help me build a new component that can show this data well in multiple relavent chart formats for a facial recognition app. Utilize the structure of this data perfectly as it is getting captured and accodingly build me a chart components and show them on the dashboard properly without any errors or bugs. here im just logging the data, but charts should capture this data and show it in realtime in charts formats.