feat: scroll into view highlighted legend item (#35)

* feat: scroll into view highlighted legend item

* fix: remove whole page scroll behavior

Author: jsilll

src/internal/components/chart-legend/index.tsx

@@ -45,7 +45,36 @@ export const ChartLegend = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const segmentsRef = useRef<Record<number, HTMLElement>>([]);
   const highlightControl = useMemo(() => new DebouncedCall(), []);
+  const scrollIntoViewControl = useMemo(() => new DebouncedCall(), []);
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  useEffect(() => {
+    const highlightedIndex = items.findIndex((item) => item.highlighted);
+    if (highlightedIndex === -1) {
+      return;
+    }
+
+    scrollIntoViewControl.cancelPrevious();
+    scrollIntoViewControl.call(() => {
+      const container = containerRef.current;
+      const element = segmentsRef.current?.[highlightedIndex];
+      if (!container || !element) {
+        return;
+      }
+
+      const elementRect = element.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+
+      if (!isVisible) {
+        const elementCenter = elementRect.top + elementRect.height / 2;
+        const containerCenter = containerRect.top + containerRect.height / 2;
+        const top = container.scrollTop + (elementCenter - containerCenter);
+        container.scrollTo({ top, behavior: "smooth" });
+      }
+    }, 100);
+  }, [items, scrollIntoViewControl]);
+
   const showHighlight = (itemId: string) => {
     const item = items.find((item) => item.id === itemId);
     if (item?.visible) {

src/internal/components/chart-legend/styles.scss

@@ -12,6 +12,9 @@
   @include styles.styles-reset;
   @include styles.default-text-style;
 
+  overflow: auto;
+  max-height: inherit;
+
   &:focus {
     outline: none;
   }