diff --git a/app/line_chart_dotted.js b/app/line_chart_dotted.js new file mode 100644 index 0000000..7fd2137 --- /dev/null +++ b/app/line_chart_dotted.js @@ -0,0 +1,87 @@ +"use client"; + +// Import Plotly if you're using modules +import dynamic from "next/dynamic"; + +// Dynamically import Plotly with no SSR +const Plot = dynamic(() => import("react-plotly.js"), { + ssr: false, + loading: () =>
Loading Plot...
, +}); + +import Papa from "papaparse"; +import { useEffect, useState } from "react"; + +function LineDottedPlotChart({ datapath, colors }) { + const [data, setData] = useState([]); + const [columns, setColumns] = useState([]); + const [xData, setXData] = useState([]); + + useEffect(() => { + console.log("LinePlotChart component mounted with datapath:", datapath); + + // Fetch and parse the CSV data + fetch(datapath) + .then((response) => response.text()) + .then((csv) => { + Papa.parse(csv, { + complete: (result) => { + // Extract columns and data + const columns = result.data[0].map((col) => col.trim()); + const parsedData = result.data.slice(1).map((row) => + row.map((cell) => parseFloat(cell.trim())) + ); + const xValues = result.data + .slice(1) + .map((row) => row[0].trim()); + setColumns(columns); + setData(parsedData); + setXData(xValues); + }, + header: false, + }); + }) + .catch((error) => console.error("Error loading CSV data:", error)); + }, [datapath]); + + if (colors === undefined) { + colors = ["#3e95cd"]; + } + + console.log("hello", data, columns, xData); + + // Function to get a random color from the colors array + const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)]; + + return ( +
+ ({ + x: xData, + y: data.map((row) => row[index + 1]), + type: "line", + name: `Line ${index + 1}: ${col}`, + line: { + color: getRandomColor(), + dash: index % 2 === 1 ? "dot" : "solid", // Alternate between solid and dotted lines + }, + }))} + layout={{ + title: { text: "Line Plot" }, + xaxis: { title: { text: columns[0] } }, + yaxis: { title: { text: "Values" } }, + transition: { + duration: 1000, + easing: "ease-in-out", + }, + frame: { + duration: 1000, + }, + responsive: true, + }} + /> +
+ ); +} + +export { LineDottedPlotChart }; \ No newline at end of file diff --git a/app/page.js b/app/page.js index f0f126d..c48b97b 100644 --- a/app/page.js +++ b/app/page.js @@ -10,13 +10,14 @@ import { import { BoxPlotChart } from "./box_plot_chart.js"; import { LinePlotChart } from "./line_chart.js"; import { BarPlotChart } from "./bar_chart.js"; -import { RacingChartComponent } from "./racing_chart.js" +import { RacingChartComponent } from "./racing_chart.js"; import { HeatMapChart } from "./heatmap.js"; import { NavBar } from "./nav.js"; import { Footer, LandingPage } from "./home_layout.js"; import { IframeChart } from "./iframe_charts.js"; import { BubbleChart } from "./bubble_chart.js"; import { SankeyChart } from "./sankey_chart.js"; +import { LineDottedPlotChart } from "./line_chart_dotted.js"; function SubTitleText({ title, text }) { return ( @@ -27,48 +28,26 @@ function SubTitleText({ title, text }) { ); } -function VariableChooserComponent({ Title, variables, children }) { - const [selectedVariable, setSelectedVariable] = useState( - variables[0].datapath - ); - - const handleChange = (e) => { - setSelectedVariable(e.target.value); - }; - +function Paragraph({ text }) { return ( -
-

{Title}

- {variables.length > 1 && ( - - )} - {children(selectedVariable)} +
+

{text}

); } -function VariableChooserComponentLDA({ Title, variables, children }) { - const [selectedVariable, setSelectedVariable] = useState( - variables[0].datapath - ); +function VariableChooserComponent({ Title, variables, children }) { + const [selectedVariable, setSelectedVariable] = useState( + variables[0].datapath + ); - const handleChange = (e) => { - setSelectedVariable(e.target.value); - }; + const handleChange = (e) => { + setSelectedVariable(e.target.value); + }; - return ( -
-

{Title}

+ return ( +
+

{Title}

{variables.length > 1 && ( + {variables.map((variable, index) => ( + + ))} + + )} +
+ {children(selectedVariable)} +
+
+ ); +} export default function Home() { return ( @@ -124,6 +131,30 @@ export default function Home() { As sports content on YouTube continues to grow, it becomes a vital indicator of global sports trends and fan interests. Below, our first plot showcases the delta views of various sports channels over the years, illustrating the evolving patterns of viewer engagement." > } /> + + + {(variable) => ( + } + /> + )} + + ( } /> )} - {(variable) => ( - } /> )} - - - - {(variable) => ( - } - /> - )} - - + ( } + /> + )} + + + {(variable) => ( + } /> )}