From 2790ee1445dbcf4adc9d3bab52da3892ecabb44b Mon Sep 17 00:00:00 2001 From: Fran Date: Tue, 16 Apr 2024 23:48:44 +0200 Subject: [PATCH 1/6] fix graph responsiveness --- packages/nextjs/app/page.css | 11 +++++++++++ packages/nextjs/app/page.tsx | 9 +++------ .../components/impact-vector/ImpactVectorGraph.tsx | 1 + 3 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 packages/nextjs/app/page.css diff --git a/packages/nextjs/app/page.css b/packages/nextjs/app/page.css new file mode 100644 index 0000000..4f755e1 --- /dev/null +++ b/packages/nextjs/app/page.css @@ -0,0 +1,11 @@ +.w-custom{ + width: 100%; + } + + + @media (min-width: 1000px) { + .w-custom{ + width: calc(100% - 550px); + } + + } \ No newline at end of file diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index f4a9898..6c19aff 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useState } from "react"; +import "./page.css"; import { DataSet, SelectedVector } from "./types/data"; import { debounce } from "lodash"; import type { NextPage } from "next"; @@ -63,11 +64,7 @@ const Home: NextPage = () => { return (
-
+
{ @@ -93,7 +90,7 @@ const Home: NextPage = () => {
diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx index c3afb3c..d1b7559 100644 --- a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx +++ b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx @@ -147,6 +147,7 @@ export default function ImpactVectorGraph({ tickLine={false} className="text-xs opacity-50" tickMargin={10} + width={55} scale={isLogarithmic ? logScale : "linear"} domain={[1, "auto"]} tickFormatter={abbreviateNumber} From 51cea0d477e54166f2eef439b963b401a9bdb597 Mon Sep 17 00:00:00 2001 From: Fran Date: Tue, 16 Apr 2024 23:49:12 +0200 Subject: [PATCH 2/6] fix add vector in mobile --- .../impact-vector/ImpactVectorCard.tsx | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx b/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx index 5bca499..244e405 100644 --- a/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx +++ b/packages/nextjs/components/impact-vector/ImpactVectorCard.tsx @@ -65,24 +65,22 @@ const ImpactVectorCard = ({ vector }: IProps) => { ) : ( -
- -
+ )}

@{vector.sourceName}

From 07c3bf0475afa013d98f55c801268f92a240a284 Mon Sep 17 00:00:00 2001 From: Fran Date: Tue, 16 Apr 2024 23:49:39 +0200 Subject: [PATCH 3/6] fix overlap of filters icon --- .../impact-vector/table-components/ImpactTableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx b/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx index a576367..72fb293 100644 --- a/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx +++ b/packages/nextjs/components/impact-vector/table-components/ImpactTableRow.tsx @@ -48,7 +48,7 @@ const ImpactTableRow = ({ vector, updateWeight, onFilteredChange }: Props) => {
-
+
onFilteredChange(newFilters)} /> +
+
+ ); +}; + +export default FilterModal; + +interface IValueInputsProps { + item: IFilter; + onChange: (arg: IFilter) => void; +} +const ValueInputs = ({ item, onChange }: IValueInputsProps) => { + let value = item.value; + let value2 = "0"; + const isBetweenOperator = item.condition == "<>"; + if (isBetweenOperator) { + const val = JSON.parse(`${item.value || "[]"}`) as string[]; + value = val[0]; + value2 = val[1]; + } + return ( + <> { - onChange({ ...item, value: e.target.value }); + const newVal = !isBetweenOperator ? e.target.value : `[${[e.target.value, value2]}]`; + onChange({ ...item, value: newVal }); }} - value={item.value} + value={value} /> {item.condition == "<>" ? ( <> @@ -200,21 +228,15 @@ const FilterItem = ({ item, onChange, onDelete }: IFilterItemProps) => { className=" max-w-[60px] pl-2 p-0 input input-info input-bordered bg-secondary focus:outline-none border border-neutral hover:border-gray-400 rounded-xl text-neutral-500" placeholder="0" onChange={e => { - onChange({ ...item, value: e.target.value }); + const newVal = `[${[value, e.target.value]}]`; + onChange({ ...item, value: newVal }); }} - value={item.value} + value={value2} /> ) : ( <> )} -
- -
-
+ ); }; - -export default FilterModal; diff --git a/packages/nextjs/components/impact-vector/SaveIcon.tsx b/packages/nextjs/components/impact-vector/SaveIcon.tsx index 38589e2..343f627 100644 --- a/packages/nextjs/components/impact-vector/SaveIcon.tsx +++ b/packages/nextjs/components/impact-vector/SaveIcon.tsx @@ -3,13 +3,13 @@ export const SaveIcon = () => ( xmlns="http://www.w2.org/2000/svg" fill="none" viewBox="-1 0 24 24" - stroke-width="0.5" + strokeWidth="0.5" stroke="currentColor" className="h-7 w-6" > From 680f3685511a98c58585855c8f04e8106f6c9f98 Mon Sep 17 00:00:00 2001 From: Fran Date: Wed, 17 Apr 2024 00:09:54 +0200 Subject: [PATCH 5/6] Find complimentary colors for the vector bar chart and add card styles --- .../impact-vector/ImpactVectorGraph.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx index d1b7559..8b71819 100644 --- a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx +++ b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx @@ -15,22 +15,22 @@ const NON_VECTOR_KEYS = ["image", "name", "profile", "opAllocation"]; const COLOR_CLASS_BY_VECTOR: { [key in keyof ImpactVectors]: string } = { "# GitHub Repos": "text-[#ff0000]", "Date First Commit": "text-[#00ff00]", - "Total Stars": "text-[#0000ff]", - "Total Forks": "text-[#ffff00]", - "Total Contributors": "text-[#ff00ff]", - "Contributors Last 6 Months": "text-[#00ffff]", + "Total Stars": "text-[#FA5300]", + "Total Forks": "text-[#5A9E00]", + "Total Contributors": "text-[#FF0420]", + "Contributors Last 6 Months": "text-[#3374DB]", "Avg Monthly Active Devs Last 6 Months": "text-[#ff8000]", "# OP Contracts": "text-[#8000ff]", "Date First Txn": "text-[#00ff80]", - "Total Onchain Users": "text-[#ff0080]", - "Onchain Users Last 6 Months": "text-[#80ff00]", + "Total Onchain Users": "text-[#8D33DB]", + "Onchain Users Last 6 Months": "text-[#008F8F]", "Total Txns": "text-[#0080ff]", "Total Txn Fees (ETH)": "text-[#ff0080]", "Txn Fees Last 6 Months (ETH)": "text-[#ff80ff]", - "# NPM Packages": "text-[#80ff80]", + "# NPM Packages": "text-[#027A48]", "Date First Download": "text-[#8080ff]", - "Total Downloads": "text-[#ffff80]", - "Downloads Last 6 Months": "text-[#80ffff]", + "Total Downloads": "text-[#147C49]", + "Downloads Last 6 Months": "text-[#B42318]", }; const shouldRenderAsVector = (key: string) => !key.includes("_actual") && !key.includes("_normalized") && !NON_VECTOR_KEYS.includes(key); @@ -171,8 +171,8 @@ export default function ImpactVectorGraph({ if (active && payload && payload.length) { const data = payload[0].payload; return ( -
-

{`${data.name}`}

+
+

{`${data.name}`}

OP Allocation: {data.opAllocation}

From 4346698cd402cc04bf709852faa703ffd2fe6a1c Mon Sep 17 00:00:00 2001 From: Fran Date: Wed, 17 Apr 2024 00:17:43 +0200 Subject: [PATCH 6/6] change height of graph --- packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx index 8b71819..3a17181 100644 --- a/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx +++ b/packages/nextjs/components/impact-vector/ImpactVectorGraph.tsx @@ -162,6 +162,7 @@ export default function ImpactVectorGraph({ dataKey="profile" onMouseMove={handleMouseMove} axisLine={false} + height={0} tickLine={false} tick={} interval={0}