Nick:

mendableai · May 27, 2024 · d714e44 · d714e44
1 parent ff5a80b
commit d714e44
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -77,7 +77,7 @@ export default function Home() {
   const chartRef = useRef<HTMLDivElement>(null);
   const [githubLink, setGithubLink] = useState<string>("");
   const [csvData, setCsvData] = useState<string>("");
-  const [graphTitle, setGraphTitle] = useState<string>("Your fire graph 🔥");
+  const [graphTitle, setGraphTitle] = useState<string>("Firegraph🔥");
   const [maxValue, setMaxValue] = useState(0);
   const [finalChartData, setFinalChartData] = useState(chartData);
 

diff --git a/src/components/data-input.tsx b/src/components/data-input.tsx
@@ -184,7 +184,7 @@ export default function DataInput({
                     setChartData(parsedData);
                     setXName(key);
                     setYName(value);
-                    setGraphTitle(`Your fire graph 🔥`);
+                    setGraphTitle(`Firegraph🔥`);
                     // close the dialog after file is uploaded
                     setOpenCsv(false);
                   }}

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
@@ -60,13 +60,13 @@ export default function Graph({
       className={`${!background ? "border border-gray-300/25" : ""} rounded-lg scale-75 md:scale-100` }
     >
       <div
-        className="cc flex items-center justify-center h-fit resize-x overflow-auto"
+        className="cc w-full flex items-center justify-center h-fit resize-x overflow-auto"
         style={{
           background: background ? theme.gradient : "transparent",
         }}
         ref={chartRef}
       >
-        <div style={{ padding: `${padding}px` }} className="transition-all">
+        <div style={{ padding: `${padding}px` }} className="transition-all ">
           <div
             className={`rounded-lg p-4 ${
               darkMode ? "bg-black bg-opacity-90" : "bg-white bg-opacity-90"
@@ -99,7 +99,11 @@ export default function Graph({
                 </div>
               </div>
             </div>
-            <div className="pt-6 text-xs ">
+            <div className="relative flex flex-row items-center w-full pt-6 text-xs ">
+              <div className="-rotate-90 mb-12  mr-2 text-zinc-500">
+                {yName}
+              </div>
+              <div className="flex flex-col w-full">
               <AreaChart
                 style={{ width: width + "px"}}
                 className={`h-72 transition-all`}
@@ -111,8 +115,6 @@ export default function Graph({
                 yAxisWidth={35}
                 showAnimation={true}
                 showLegend={false}
-                yAxisLabel={yName}
-                xAxisLabel={xName}
                 valueFormatter={(value) => {
                   if (value > 999) {
                     return (value / 1000).toFixed(1) + "k";
@@ -123,9 +125,14 @@ export default function Graph({
                 connectNulls={true}
                 curveType="monotone"
               />
+              <p className="mt-2 w-full flex items-center justify-center mx-auto text-md text-zinc-500">
+              {xName}
+              </p>
+              </div>
+            </div>
+
+            </div>
             </div>
-          </div>
-        </div>
       </div>
     </div>
   );