Merge pull request #45 from escottalexander/logarithmic

Adds Logarithmic view to graph
BuidlGuidl · Feb 24, 2024 · 118f9d5 · 118f9d5
2 parents 411f878 + a6c0c92
commit 118f9d5
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx
@@ -20,7 +20,7 @@ const transformData = (impactData: DataSet[]): any[] => {
     const transformedItem: any = {
       image: item.metadata["Meta: Project Image"],
       name: item.metadata["Meta: Project Name"],
-      Rank: Math.floor(item.rank),
+      Rank: item.rank.toFixed(2),
       profile: `${item.metadata["Meta: Project Name"]}===${item.metadata["Meta: Project Image"]}`,
     };
 
@@ -40,6 +40,7 @@ const sortByTotalDescending = (dataSetArray: any[]) => {
 
 export default function ImpactVectorGraph({ data }: { data: DataSet[] }) {
   const [showVectors, setShowVectors] = useState(false);
+  const [isLogarithmic, setIsLogarithmic] = useState(false);
   const [hoveredProject, setHoveredProject] = useState<string | null>(null);
   const transformedData = transformData(sortByTotalDescending(data));
 
@@ -89,7 +90,14 @@ export default function ImpactVectorGraph({ data }: { data: DataSet[] }) {
             }
           }}
         >
-          <YAxis axisLine={false} tickLine={false} className="text-xs opacity-50" tickMargin={10} />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            className="text-xs opacity-50"
+            tickMargin={10}
+            scale={isLogarithmic ? "log" : "linear"}
+            domain={["auto", "auto"]}
+          />
           <XAxis
             dataKey="profile"
             onMouseMove={handleMouseMove}
@@ -110,7 +118,9 @@ export default function ImpactVectorGraph({ data }: { data: DataSet[] }) {
                       .filter(key => key.endsWith("_actual"))
                       .map(key => {
                         const value = data[key];
-                        const formattedValue = !isNaN(value) ? Math.floor(parseFloat(value)) : value;
+                        const formattedValue = !isNaN(value || "string")
+                          ? Math.floor(parseFloat(value)) || "none"
+                          : value || "none";
                         return (
                           <p key={key}>{`${key.replace(/^OSO:/, "").replace("_actual", "")}: ${formattedValue}`}</p>
                         );
@@ -153,6 +163,9 @@ export default function ImpactVectorGraph({ data }: { data: DataSet[] }) {
       {transformedData.length > 0 && (
         <div className="items-center text-xs justify-end flex">
           <button onClick={() => setShowVectors(!showVectors)}>{showVectors ? "Hide Vectors" : "Show Vectors"}</button>
+          <button className="px-3" onClick={() => setIsLogarithmic(!isLogarithmic)}>
+            {isLogarithmic ? "Linear" : "Logarithmic"}
+          </button>
         </div>
       )}
     </div>