From 56100defe02167540ceae6d3e0b236b26c0e069b Mon Sep 17 00:00:00 2001 From: andres Date: Fri, 20 Dec 2024 22:29:23 +0100 Subject: [PATCH] Added line dotted chart and part of the story --- app/line_chart_dotted.js | 87 +++++++++++++++++ app/page.js | 200 +++++++++++++++++++++++---------------- 2 files changed, 203 insertions(+), 84 deletions(-) create mode 100644 app/line_chart_dotted.js 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) => ( + } /> )}