From e319d2faeb13ce812d9ab15857691111a4f27b66 Mon Sep 17 00:00:00 2001 From: Sophie <47993817+sdankel@users.noreply.github.com> Date: Tue, 8 Oct 2024 19:19:19 -0600 Subject: [PATCH 1/5] fix: Chart label overflow --- packages/ui/src/components/Charts/Charts.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Charts/Charts.tsx b/packages/ui/src/components/Charts/Charts.tsx index 53431a871..01bc0f3f9 100644 --- a/packages/ui/src/components/Charts/Charts.tsx +++ b/packages/ui/src/components/Charts/Charts.tsx @@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cx( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-surface]:overflow-visible", className, )} {...props} From c55e14bebe538a90ac6a648f06537d5c6e4a328d Mon Sep 17 00:00:00 2001 From: Sophie <47993817+sdankel@users.noreply.github.com> Date: Tue, 8 Oct 2024 19:51:29 -0600 Subject: [PATCH 2/5] add overflow: visible to charts --- .../src/systems/Home/components/DailyTransaction.tsx | 1 + .../src/systems/Home/components/GasSpentChart/index.tsx | 1 + packages/ui/src/components/Charts/Charts.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index 8420475ff..c7159807f 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -56,6 +56,7 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { width="14" height="14" viewBox="0 0 14 14" + overflow="visible" fill="none" xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx index 0ce8f0907..729b0034d 100644 --- a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx +++ b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx @@ -46,6 +46,7 @@ const GasSpentChart = (gasSpent: GasSpentProps) => { width="14" height="14" viewBox="0 0 14 14" + overflow="visible" fill="none" xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/ui/src/components/Charts/Charts.tsx b/packages/ui/src/components/Charts/Charts.tsx index 01bc0f3f9..53431a871 100644 --- a/packages/ui/src/components/Charts/Charts.tsx +++ b/packages/ui/src/components/Charts/Charts.tsx @@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cx( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-surface]:overflow-visible", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className, )} {...props} From e53cc1c1b836a2af907f8314ea127c9a86da19ff Mon Sep 17 00:00:00 2001 From: Sophie <47993817+sdankel@users.noreply.github.com> Date: Tue, 8 Oct 2024 20:10:04 -0600 Subject: [PATCH 3/5] try removing negative margin --- .../src/systems/Home/components/DailyTransaction.tsx | 2 +- .../src/systems/Home/components/GasSpentChart/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index c7159807f..1d327d35a 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -56,7 +56,6 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { width="14" height="14" viewBox="0 0 14 14" - overflow="visible" fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -91,6 +90,7 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { strokeDasharray="3 3" stroke="#333" vertical={false} + overflow="visible" /> { width="14" height="14" viewBox="0 0 14 14" - overflow="visible" fill="none" xmlns="http://www.w3.org/2000/svg" > @@ -78,7 +77,7 @@ const GasSpentChart = (gasSpent: GasSpentProps) => { Date: Tue, 8 Oct 2024 20:20:43 -0600 Subject: [PATCH 4/5] adjust negative margin --- .../src/systems/Home/components/DailyTransaction.tsx | 3 +-- .../src/systems/Home/components/GasSpentChart/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx index 1d327d35a..88d2cc817 100644 --- a/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx +++ b/packages/app-explorer/src/systems/Home/components/DailyTransaction.tsx @@ -84,13 +84,12 @@ const DailyTransaction = (blocks: DailyTransactionProps) => { { Date: Tue, 8 Oct 2024 20:30:15 -0600 Subject: [PATCH 5/5] adjust again --- .../src/systems/Home/components/GasSpentChart/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx index 234c15355..471029476 100644 --- a/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx +++ b/packages/app-explorer/src/systems/Home/components/GasSpentChart/index.tsx @@ -77,7 +77,7 @@ const GasSpentChart = (gasSpent: GasSpentProps) => {