From 00b33b263313fa80ab3cda77a878d4459be5d5ed Mon Sep 17 00:00:00 2001 From: severinlandolt Date: Sun, 23 Jun 2024 15:19:14 +0200 Subject: [PATCH] fix: legend scroll distance --- src/components/AreaChart/AreaChart.tsx | 9 ++++++--- src/components/AreaChart/changelog.md | 6 ++++++ src/components/BarChart/BarChart.tsx | 9 ++++++--- src/components/BarChart/changelog.md | 6 ++++++ src/components/LineChart/LineChart.tsx | 9 ++++++--- src/components/LineChart/changelog.md | 6 ++++++ 6 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx index bb632d7..881e8d2 100644 --- a/src/components/AreaChart/AreaChart.tsx +++ b/src/components/AreaChart/AreaChart.tsx @@ -1,4 +1,4 @@ -// Tremor Raw AreaChart [v0.2.1] +// Tremor Raw AreaChart [v0.2.2] "use client" @@ -167,6 +167,7 @@ const Legend = React.forwardRef((props, ref) => { ...other } = props const scrollableRef = React.useRef(null) + const scrollButtonsRef = React.useRef(null) const [hasScroll, setHasScroll] = React.useState(null) const [isKeyDowned, setIsKeyDowned] = React.useState(null) const intervalRef = React.useRef(null) @@ -185,14 +186,16 @@ const Legend = React.forwardRef((props, ref) => { const scrollToTest = React.useCallback( (direction: "left" | "right") => { const element = scrollableRef?.current + const scrollButtons = scrollButtonsRef?.current + const scrollButtonsWith = scrollButtons?.clientWidth ?? 0 const width = element?.clientWidth ?? 0 if (element && enableLegendSlider) { element.scrollTo({ left: direction === "left" - ? element.scrollLeft - width - : element.scrollLeft + width, + ? element.scrollLeft - width + scrollButtonsWith + : element.scrollLeft + width - scrollButtonsWith, behavior: "smooth", }) setTimeout(() => { diff --git a/src/components/AreaChart/changelog.md b/src/components/AreaChart/changelog.md index 3b13a58..7fb4cdf 100644 --- a/src/components/AreaChart/changelog.md +++ b/src/components/AreaChart/changelog.md @@ -1,5 +1,11 @@ # Tremor Raw AreaChart Changelog +## 0.2.2 + +### Changes + +- Fix: Legend scroll distance + ## 0.2.1 ### Changes diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx index 648bce8..3ab579a 100644 --- a/src/components/BarChart/BarChart.tsx +++ b/src/components/BarChart/BarChart.tsx @@ -1,4 +1,4 @@ -// Tremor Raw BarChart [v0.1.0] +// Tremor Raw BarChart [v0.1.1] "use client" @@ -222,6 +222,7 @@ const Legend = React.forwardRef((props, ref) => { ...other } = props const scrollableRef = React.useRef(null) + const scrollButtonsRef = React.useRef(null) const [hasScroll, setHasScroll] = React.useState(null) const [isKeyDowned, setIsKeyDowned] = React.useState(null) const intervalRef = React.useRef(null) @@ -240,14 +241,16 @@ const Legend = React.forwardRef((props, ref) => { const scrollToTest = React.useCallback( (direction: "left" | "right") => { const element = scrollableRef?.current + const scrollButtons = scrollButtonsRef?.current + const scrollButtonsWith = scrollButtons?.clientWidth ?? 0 const width = element?.clientWidth ?? 0 if (element && enableLegendSlider) { element.scrollTo({ left: direction === "left" - ? element.scrollLeft - width - : element.scrollLeft + width, + ? element.scrollLeft - width + scrollButtonsWith + : element.scrollLeft + width - scrollButtonsWith, behavior: "smooth", }) setTimeout(() => { diff --git a/src/components/BarChart/changelog.md b/src/components/BarChart/changelog.md index ab485bb..1cb3fb7 100644 --- a/src/components/BarChart/changelog.md +++ b/src/components/BarChart/changelog.md @@ -1,5 +1,11 @@ # Tremor Raw BarChart Changelog +## 0.1.1 + +### Changes + +- Fix: Legend scroll distance + ## 0.1.0 ### Changes diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx index 530f388..178ec28 100644 --- a/src/components/LineChart/LineChart.tsx +++ b/src/components/LineChart/LineChart.tsx @@ -1,4 +1,4 @@ -// Tremor Raw LineChart [v0.2.0] +// Tremor Raw LineChart [v0.2.1] "use client" @@ -166,6 +166,7 @@ const Legend = React.forwardRef((props, ref) => { ...other } = props const scrollableRef = React.useRef(null) + const scrollButtonsRef = React.useRef(null) const [hasScroll, setHasScroll] = React.useState(null) const [isKeyDowned, setIsKeyDowned] = React.useState(null) const intervalRef = React.useRef(null) @@ -184,14 +185,16 @@ const Legend = React.forwardRef((props, ref) => { const scrollToTest = React.useCallback( (direction: "left" | "right") => { const element = scrollableRef?.current + const scrollButtons = scrollButtonsRef?.current + const scrollButtonsWith = scrollButtons?.clientWidth ?? 0 const width = element?.clientWidth ?? 0 if (element && enableLegendSlider) { element.scrollTo({ left: direction === "left" - ? element.scrollLeft - width - : element.scrollLeft + width, + ? element.scrollLeft - width + scrollButtonsWith + : element.scrollLeft + width - scrollButtonsWith, behavior: "smooth", }) setTimeout(() => { diff --git a/src/components/LineChart/changelog.md b/src/components/LineChart/changelog.md index 33df8da..5116c31 100644 --- a/src/components/LineChart/changelog.md +++ b/src/components/LineChart/changelog.md @@ -1,5 +1,11 @@ # Tremor Raw LineChart Changelog +## 0.2.1 + +### Changes + +- Fix: Legend scroll distance + ## 0.2.0 ### Changes