Back

Version 30

11/6/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { LineChart } from "https://esm.sh/@mui/x-charts/LineChart";

function App({ tweetData }) {
const [selectedTweetId, setSelectedTweetId] = useState(tweetData[0]?.id);
const [filteredData, setFilteredData] = useState([]);

useEffect(() => {
const filtered = tweetData.filter(tweet => tweet.id === selectedTweetId);
setFilteredData(filtered);
}, [selectedTweetId, tweetData]);

const ids = [...new Set(tweetData.map(t=>t.id))]
const tweets = ids.map(id=>tweetData.find(t=>t.id===id))

return (
<div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
<h1>Tweet Engagement Over Time</h1>
<select
value={selectedTweetId}
onChange={(e) => setSelectedTweetId(e.target.value)}
style={{ width: '100%', marginBottom: '20px', padding: '10px' }}
>
{tweets.map(tweet => (
<option key={tweet.id} value={tweet.id}>
{tweet.text.substring(0, 50)}... (ID: {tweet.id})
</option>
))}
</select>
<LineChart
dataset={filteredData}
xAxis={[{
dataKey: 'time',
scaleType: 'time',
nulo-mileishowgraph.web.val.run
Updated: January 17, 2025