Merge pull request #101 from 0xChijioke/icon

Replace the graph expansion icon
BuidlGuidl · Apr 17, 2024 · e6cd7f4 · e6cd7f4
2 parents 7e971e4 + 4040d27
commit e6cd7f4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 36 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -5,6 +5,7 @@ import "./page.css";
 import { DataSet, SelectedVector } from "./types/data";
 import { debounce } from "lodash";
 import type { NextPage } from "next";
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 import ImpactVectorDisplay from "~~/components/impact-vector/ImpactVectorDisplay";
 import ImpactVectorGraph from "~~/components/impact-vector/ImpactVectorGraph";
 import ImpactVectorTable from "~~/components/impact-vector/ImpactVectorTable";
@@ -75,14 +76,7 @@ const Home: NextPage = () => {
             setProjectsShown(current => current + (isDown ? -10 : 10));
           }}
         >
-          {impactData.length > 0 && (
-            <ImpactVectorGraph
-              data={impactData}
-              projectsShown={projectsShown}
-              fullGraph={fullGraph}
-              setFullGraph={setFullGraph}
-            />
-          )}
+          {impactData.length > 0 && <ImpactVectorGraph data={impactData} projectsShown={projectsShown} />}
         </div>
       </div>
 
@@ -99,6 +93,9 @@ const Home: NextPage = () => {
             fullGraph ? "lg:relative mt-0" : "lg:absolute lg:top-0 lg:right-0"
           } transition-all overflow-hidden b-md:max-w-[34rem] rounded-3xl p-6 border grid gap-6 mx-auto duration-1000 ease-in-out h-[90vh]`}
         >
+          <button onClick={() => setFullGraph(!fullGraph)} className="hidden opacity-60 lg:flex w-fit lg:-my-4">
+            {fullGraph ? <ChevronUpIcon className="w-5 h-5" /> : <ChevronDownIcon className="w-5 h-5" />}
+          </button>
           <div className="rounded-xl grid grid-cols-2 bg-base-300 p-1">
             <button
               onClick={() => setIsVectors(true)}

diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { Dispatch, SetStateAction, useState } from "react";
+import React, { useState } from "react";
 import CustomXAxis from "./CustomXAxis";
 import { scaleLog } from "d3-scale";
 import { Area, Bar, CartesianGrid, ComposedChart, ResponsiveContainer, Text, Tooltip, XAxis, YAxis } from "recharts";
@@ -67,17 +67,7 @@ const sortByTotalDescending = (dataSetArray: any[]) => {
   return dataSetArray.slice().sort((a, b) => a.opAllocation - b.opAllocation);
 };
 
-export default function ImpactVectorGraph({
-  data,
-  fullGraph,
-  projectsShown,
-  setFullGraph,
-}: {
-  data: DataSet[];
-  fullGraph: boolean;
-  projectsShown: number;
-  setFullGraph: Dispatch<SetStateAction<boolean>>;
-}) {
+export default function ImpactVectorGraph({ data, projectsShown }: { data: DataSet[]; projectsShown: number }) {
   const [showVectors, setShowVectors] = useState(false);
   const [isLogarithmic, setIsLogarithmic] = useState(false);
   const [hoveredProject, setHoveredProject] = useState<string | null>(null);
@@ -101,22 +91,6 @@ export default function ImpactVectorGraph({
           <button className="px-3" onClick={() => setIsLogarithmic(!isLogarithmic)}>
             {isLogarithmic ? "Linear" : "Logarithmic"}
           </button>
-          <button onClick={() => setFullGraph(!fullGraph)} className="hidden lg:flex">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="5-4 h-5"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-              />
-            </svg>
-          </button>
         </div>
       )}
       <ResponsiveContainer width="100%" height="100%">