@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Chart/ChartToolbar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { CHART } from '../../lib/constants/components';
 import { Icon } from '../Icon';
 import type { PhosphorIconsType } from '../Icon/Icon';
@@ -50,6 +50,10 @@ export interface ChartToolbarProps {
     zoom?: boolean;
     pan?: boolean;
     reset?: boolean;
+    grid?: boolean;
+    legend?: boolean;
+    tooltips?: boolean;
+    animations?: boolean;
   };
 
   /**
@@ -145,13 +149,156 @@ const ChartToolbar = memo(
     ) => {
       const [showExportMenu, setShowExportMenu] = useState(false);
       const [showSettingsMenu, setShowSettingsMenu] = useState(false);
+      const exportMenuRef = useRef<HTMLDivElement>(null);
+      const settingsMenuRef = useRef<HTMLDivElement>(null);
+      const exportButtonRef = useRef<HTMLButtonElement>(null);
+      const settingsButtonRef = useRef<HTMLButtonElement>(null);
+
+      // Compute effective defaults based on provided groups
+      const effectiveDefaults =
+        groups && groups.length > 0
+          ? {
+              refresh: defaults.refresh ?? true,
+              export: defaults.export ?? true,
+              fullscreen: defaults.fullscreen ?? true,
+              settings: defaults.settings ?? true,
+              zoom: groups.some(group =>
+                group.actions.some(action => action.id === 'zoom-in' || action.id === 'zoom-out')
+              ),
+              pan: groups.some(group => group.actions.some(action => action.id === 'pan')),
+              reset: groups.some(group => group.actions.some(action => action.id === 'reset')),
+              grid: defaults.grid ?? true,
+              legend: defaults.legend ?? true,
+              tooltips: defaults.tooltips ?? true,
+              animations: defaults.animations ?? true,
+            }
+          : defaults;
+
+      // Close menus when clicking outside
+      useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+          if (
+            exportMenuRef.current &&
+            !exportMenuRef.current.contains(event.target as Node) &&
+            exportButtonRef.current &&
+            !exportButtonRef.current.contains(event.target as Node)
+          ) {
+            setShowExportMenu(false);
+          }
+          if (
+            settingsMenuRef.current &&
+            !settingsMenuRef.current.contains(event.target as Node) &&
+            settingsButtonRef.current &&
+            !settingsButtonRef.current.contains(event.target as Node)
+          ) {
+            setShowSettingsMenu(false);
+          }
+        };
+
+        if (showExportMenu || showSettingsMenu) {
+          document.addEventListener('mousedown', handleClickOutside);
+          return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+          };
+        }
+      }, [showExportMenu, showSettingsMenu]);
+
+      // Handle keyboard shortcuts
+      useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+          // Prevent shortcuts when typing in inputs
+          if (
+            event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLTextAreaElement ||
+            (event.target instanceof HTMLElement && event.target.isContentEditable)
+          ) {
+            return;
+          }
+
+          // Ctrl/Cmd + R: Refresh
+          if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
+            if (effectiveDefaults.refresh && onRefresh) {
+              event.preventDefault();
+              onRefresh();
+            }
+          }
+
+          // Ctrl/Cmd + E: Export
+          if ((event.ctrlKey || event.metaKey) && event.key === 'e') {
+            if (effectiveDefaults.export && onExport) {
+              event.preventDefault();
+              setShowExportMenu(!showExportMenu);
+            }
+          }
+
+          // F11: Fullscreen
+          if (event.key === 'F11') {
+            if (effectiveDefaults.fullscreen && onFullscreen) {
+              event.preventDefault();
+              onFullscreen(!state.isFullscreen);
+            }
+          }
+
+          // Space: Pan toggle
+          if (event.key === ' ' && effectiveDefaults.pan && onPanToggle) {
+            event.preventDefault();
+            onPanToggle(!state.panEnabled);
+          }
+
+          // R: Reset
+          if (event.key === 'r' || event.key === 'R') {
+            if (!event.ctrlKey && !event.metaKey && effectiveDefaults.reset) {
+              event.preventDefault();
+              onZoomReset?.();
+              onReset?.();
+            }
+          }
+
+          // +/-: Zoom
+          if (event.key === '+' || event.key === '=') {
+            if (effectiveDefaults.zoom && onZoomIn) {
+              event.preventDefault();
+              onZoomIn();
+            }
+          }
+          if (event.key === '-' || event.key === '_') {
+            if (effectiveDefaults.zoom && onZoomOut) {
+              event.preventDefault();
+              onZoomOut();
+            }
+          }
+
+          // Escape: Close menus
+          if (event.key === 'Escape') {
+            setShowExportMenu(false);
+            setShowSettingsMenu(false);
+          }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+          document.removeEventListener('keydown', handleKeyDown);
+        };
+      }, [
+        effectiveDefaults,
+        onRefresh,
+        onExport,
+        onFullscreen,
+        onPanToggle,
+        onZoomReset,
+        onReset,
+        onZoomIn,
+        onZoomOut,
+        state,
+        showExportMenu,
+      ]);
 
       // Generate chart-specific default actions
       const getDefaultActions = useCallback((): ChartToolbarGroup[] => {
         const actions: ChartToolbarAction[] = [];
 
         // Refresh action
-        if (defaults.refresh && onRefresh) {
+        if (effectiveDefaults.refresh && onRefresh) {
           actions.push({
             id: 'refresh',
             label: 'Refresh',
@@ -164,7 +311,7 @@ const ChartToolbar = memo(
         }
 
         // Export actions
-        if (defaults.export && onExport) {
+        if (effectiveDefaults.export && onExport) {
           actions.push({
             id: 'export',
             label: 'Export',
@@ -185,20 +332,14 @@ const ChartToolbar = memo(
             separator: true,
           },
         ];
-      }, [defaults, onRefresh, onExport, state, showExportMenu]);
+      }, [effectiveDefaults, onRefresh, onExport, state, showExportMenu]);
 
       // Generate chart-specific view actions
       const getViewActions = useCallback((): ChartToolbarGroup[] => {
         const actions: ChartToolbarAction[] = [];
 
-        // Zoom actions (for interactive charts)
-        if (
-          defaults.zoom &&
-          (chartType === 'interactive' ||
-            chartType === 'line' ||
-            chartType === 'area' ||
-            chartType === 'bar')
-        ) {
+        // Zoom actions (use configuration from props)
+        if (effectiveDefaults.zoom && (onZoomIn || onZoomOut)) {
           actions.push(
             {
               id: 'zoom-in',
@@ -219,11 +360,8 @@ const ChartToolbar = memo(
           );
         }
 
-        // Pan toggle (for interactive charts)
-        if (
-          defaults.pan &&
-          (chartType === 'interactive' || chartType === 'line' || chartType === 'area')
-        ) {
+        // Pan toggle (use configuration from props)
+        if (effectiveDefaults.pan && onPanToggle) {
           actions.push({
             id: 'pan',
             label: 'Pan',
@@ -235,8 +373,8 @@ const ChartToolbar = memo(
           });
         }
 
-        // Reset view
-        if (defaults.reset && (onZoomReset || onReset)) {
+        // Reset view (use configuration from props)
+        if (effectiveDefaults.reset && (onZoomReset || onReset)) {
           actions.push({
             id: 'reset',
             label: 'Reset View',
@@ -250,8 +388,8 @@ const ChartToolbar = memo(
           });
         }
 
-        // Fullscreen
-        if (defaults.fullscreen && onFullscreen) {
+        // Fullscreen (for all chart types that support it)
+        if (effectiveDefaults.fullscreen && onFullscreen) {
           actions.push({
             id: 'fullscreen',
             label: state.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen',
@@ -274,8 +412,7 @@ const ChartToolbar = memo(
             ]
           : [];
       }, [
-        defaults,
-        chartType,
+        effectiveDefaults,
         onZoomIn,
         onZoomOut,
         onPanToggle,
@@ -285,17 +422,89 @@ const ChartToolbar = memo(
         state,
       ]);
 
+      // Generate display/visual actions
+      const getDisplayActions = useCallback((): ChartToolbarGroup[] => {
+        const actions: ChartToolbarAction[] = [];
+
+        // Grid toggle
+        if (effectiveDefaults.grid && onGridToggle) {
+          actions.push({
+            id: 'grid',
+            label: 'Grid',
+            icon: 'GridFour',
+            onClick: () => onGridToggle(!state.showGrid),
+            active: state.showGrid,
+            tooltip: 'Toggle grid lines',
+          });
+        }
+
+        // Legend toggle
+        if (effectiveDefaults.legend && onLegendToggle) {
+          actions.push({
+            id: 'legend',
+            label: 'Legend',
+            icon: 'List',
+            onClick: () => onLegendToggle(!state.showLegend),
+            active: state.showLegend,
+            tooltip: 'Toggle legend',
+          });
+        }
+
+        // Tooltips toggle
+        if (effectiveDefaults.tooltips && onTooltipsToggle) {
+          actions.push({
+            id: 'tooltips',
+            label: 'Tooltips',
+            icon: 'CursorText',
+            onClick: () => onTooltipsToggle(!state.showTooltips),
+            active: state.showTooltips,
+            tooltip: 'Toggle tooltips',
+          });
+        }
+
+        // Animations toggle
+        if (effectiveDefaults.animations && onAnimationsToggle) {
+          actions.push({
+            id: 'animations',
+            label: 'Animations',
+            icon: 'Sparkle',
+            onClick: () => onAnimationsToggle(!state.animationsEnabled),
+            active: state.animationsEnabled,
+            tooltip: 'Toggle animations',
+          });
+        }
+
+        return actions.length > 0
+          ? [
+              {
+                id: 'display-actions',
+                label: 'Display',
+                actions,
+                separator: true,
+              },
+            ]
+          : [];
+      }, [
+        effectiveDefaults,
+        onGridToggle,
+        onLegendToggle,
+        onTooltipsToggle,
+        onAnimationsToggle,
+        state,
+      ]);
+
       // Generate chart-specific tool actions
       const getToolActions = useCallback((): ChartToolbarGroup[] => {
         const actions: ChartToolbarAction[] = [];
 
         // Settings
-        if (defaults.settings && onSettings) {
+        if (effectiveDefaults.settings && onSettings) {
           actions.push({
             id: 'settings',
             label: 'Settings',
             icon: 'Gear',
             onClick: () => setShowSettingsMenu(!showSettingsMenu),
+            active: showSettingsMenu,
             tooltip: 'Chart settings',
           });
         }
@@ -309,40 +518,80 @@ const ChartToolbar = memo(
               },
             ]
           : [];
-      }, [defaults, onSettings, showSettingsMenu]);
+      }, [effectiveDefaults, onSettings, showSettingsMenu]);
 
-      // Always use provided groups if available, otherwise generate defaults
+      // Use provided groups if available, otherwise generate defaults
       const allGroups =
         groups && groups.length > 0
           ? groups
-          : [
-              ...(enableDefaults ? getDefaultActions() : []),
-              ...(enableDefaults ? getViewActions() : []),
-              ...(enableDefaults ? getToolActions() : []),
-            ];
-
-      console.log('ChartToolbar: All groups', allGroups);
-      console.log('ChartToolbar: Groups provided', groups);
-      console.log('ChartToolbar: Enable defaults', enableDefaults);
+          : enableDefaults
+            ? [
+                ...getDefaultActions(),
+                ...getViewActions(),
+                ...getDisplayActions(),
+                ...getToolActions(),
+              ]
+            : [];
 
       // Render action button
       const renderAction = (action: ChartToolbarAction) => {
-        console.log('ChartToolbar: Rendering action', action.id, action);
+        // Use the action's onClick handler if available
+        const handleClick = () => {
+          if (action.onClick) {
+            action.onClick();
+          } else {
+            // Fallback for special cases that need custom handling
+            if (action.id === 'export' && onExport) {
+              setShowExportMenu(!showExportMenu);
+            } else if (action.id === 'settings' && onSettings) {
+              setShowSettingsMenu(!showSettingsMenu);
+            } else {
+              // Try to find the appropriate individual handler
+              switch (action.id) {
+                case 'zoom-in':
+                  onZoomIn?.();
+                  break;
+                case 'zoom-out':
+                  onZoomOut?.();
+                  break;
+                case 'pan':
+                  onPanToggle?.(!state.panEnabled);
+                  break;
+                case 'reset':
+                  onZoomReset?.();
+                  onReset?.();
+                  break;
+                case 'fullscreen':
+                  onFullscreen?.(!state.isFullscreen);
+                  break;
+                case 'refresh':
+                  onRefresh?.();
+                  break;
+                default:
+                  console.warn(`No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`);
+              }
+            }
+          }
+        };
+
+        const buttonRef =
+          action.id === 'export' ? exportButtonRef : action.id === 'settings' ? settingsButtonRef : null;
+
         return (
           <button
             key={action.id}
-            className={`${CHART.ACTION_CLASS} ${action.variant ? `${CHART.ACTION_CLASS}--${action.variant}` : ''} ${action.active ? 'is-active' : ''} u-d-inline-flex u-align-items-center u-gap-1`}
-            onClick={() => {
-              console.log('ChartToolbar: Action clicked', action.id);
-              action.onClick();
-            }}
+            ref={buttonRef}
+            className={`${CHART.ACTION_CLASS} ${action.variant ? `${CHART.ACTION_CLASS}--${action.variant}` : ''} ${action.active ? 'is-active' : ''}`}
+            onClick={handleClick}
             disabled={action.disabled}
             title={action.tooltip}
             type="button"
             aria-label={action.label}
+            aria-pressed={action.active ? 'true' : 'false'}
+            aria-expanded={action.id === 'export' ? showExportMenu : action.id === 'settings' ? showSettingsMenu : undefined}
           >
             <Icon name={action.icon} size="sm" />
-            {size === 'lg' && <span className="u-text-xs">{action.label}</span>}
+            {size === 'lg' && <span className={`${CHART.ACTION_CLASS}-label`}>{action.label}</span>}
           </button>
         );
       };
@@ -353,19 +602,24 @@ const ChartToolbar = memo(
 
         return (
           <div
-            className={`${CHART.EXPORT_DROPDOWN_CLASS} u-position-absolute u-bg-white u-border u-border-radius u-shadow u-p-2 u-z-10`}
+            ref={exportMenuRef}
+            className={`${CHART.EXPORT_DROPDOWN_CLASS}`}
+            role="menu"
+            aria-label="Export formats"
           >
-            <div className="u-mb-2 u-text-xs u-text-muted u-fw-medium">Export Formats</div>
+            <div className={`${CHART.EXPORT_DROPDOWN_CLASS}-title`}>Export Formats</div>
             {exportFormats.map(format => (
               <button
                 key={format}
-                className={`${CHART.EXPORT_OPTION_CLASS} u-d-block u-w-full u-text-start u-p-1 u-border-0 u-bg-transparent u-text-decoration-none u-border-radius-sm`}
+                className={`${CHART.EXPORT_OPTION_CLASS}`}
                 onClick={() => {
                   onExport(format);
                   setShowExportMenu(false);
                 }}
                 disabled={state.isExporting}
                 type="button"
+                role="menuitem"
+                aria-label={`Export as ${format.toUpperCase()}`}
               >
                 {format.toUpperCase()}
               </button>
@@ -380,22 +634,79 @@ const ChartToolbar = memo(
 
         return (
           <div
-            className="u-position-absolute u-bg-white u-border u-border-radius u-shadow u-p-3 u-z-10"
-            style={{ minWidth: '200px' }}
+            ref={settingsMenuRef}
+            className={`${CHART.SETTINGS_MENU_CLASS}`}
+            role="menu"
+            aria-label="Chart settings"
           >
-            <div className="u-mb-2 u-text-xs u-text-muted u-fw-medium">Chart Settings</div>
-            <div className="u-d-flex u-flex-column u-gap-2">
-              {state.zoomLevel && (
-                <div className="u-d-flex u-justify-between u-align-items-center">
-                  <span className="u-text-sm">Zoom Level</span>
-                  <span className="u-text-sm u-text-muted">
+            <div className={`${CHART.SETTINGS_MENU_CLASS}-title`}>Chart Settings</div>
+            <div className={`${CHART.SETTINGS_MENU_CLASS}-content`}>
+              {/* Display toggles */}
+              {effectiveDefaults.grid && onGridToggle && (
+                <div className={`${CHART.SETTINGS_MENU_CLASS}-item`}>
+                  <label className={`${CHART.SETTINGS_MENU_CLASS}-toggle`}>
+                    <input
+                      type="checkbox"
+                      checked={state.showGrid ?? false}
+                      onChange={e => onGridToggle(e.target.checked)}
+                      aria-label="Toggle grid lines"
+                    />
+                    <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Show Grid</span>
+                  </label>
+                </div>
+              )}
+              {effectiveDefaults.legend && onLegendToggle && (
+                <div className={`${CHART.SETTINGS_MENU_CLASS}-item`}>
+                  <label className={`${CHART.SETTINGS_MENU_CLASS}-toggle`}>
+                    <input
+                      type="checkbox"
+                      checked={state.showLegend ?? false}
+                      onChange={e => onLegendToggle(e.target.checked)}
+                      aria-label="Toggle legend"
+                    />
+                    <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Show Legend</span>
+                  </label>
+                </div>
+              )}
+              {effectiveDefaults.tooltips && onTooltipsToggle && (
+                <div className={`${CHART.SETTINGS_MENU_CLASS}-item`}>
+                  <label className={`${CHART.SETTINGS_MENU_CLASS}-toggle`}>
+                    <input
+                      type="checkbox"
+                      checked={state.showTooltips ?? false}
+                      onChange={e => onTooltipsToggle(e.target.checked)}
+                      aria-label="Toggle tooltips"
+                    />
+                    <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Show Tooltips</span>
+                  </label>
+                </div>
+              )}
+              {effectiveDefaults.animations && onAnimationsToggle && (
+                <div className={`${CHART.SETTINGS_MENU_CLASS}-item`}>
+                  <label className={`${CHART.SETTINGS_MENU_CLASS}-toggle`}>
+                    <input
+                      type="checkbox"
+                      checked={state.animationsEnabled ?? false}
+                      onChange={e => onAnimationsToggle(e.target.checked)}
+                      aria-label="Toggle animations"
+                    />
+                    <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Enable Animations</span>
+                  </label>
+                </div>
+              )}
+
+              {/* Info items */}
+              {state.zoomLevel !== undefined && (
+                <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+                  <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Zoom Level</span>
+                  <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>
                     {Math.round((state.zoomLevel || 1) * 100)}%
                   </span>
                 </div>
               )}
-              <div className="u-d-flex u-justify-between u-align-items-center">
-                <span className="u-text-sm">Chart Type</span>
-                <span className="u-text-sm u-text-muted u-text-capitalize">{chartType}</span>
+              <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+                <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Chart Type</span>
+                <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>{chartType}</span>
               </div>
             </div>
           </div>
@@ -403,21 +714,21 @@ const ChartToolbar = memo(
       };
 
       const toolbarClass =
-        `${CHART.TOOLBAR_CLASS} ${CHART.TOOLBAR_CLASS}--${size} ${CHART.TOOLBAR_CLASS}--${position} u-d-flex u-align-items-center u-gap-2 ${className}`.trim();
+        `${CHART.TOOLBAR_CLASS} ${CHART.TOOLBAR_CLASS}--${size} ${CHART.TOOLBAR_CLASS}--${position} ${className}`.trim();
 
       return (
         <div ref={ref} className={toolbarClass} {...props}>
           {allGroups.map((group, groupIndex) => (
-            <div key={group.id} className="u-d-flex u-align-items-center u-gap-1">
+            <div key={group.id} className={`${CHART.TOOLBAR_CLASS}-group`}>
               {group.separator && groupIndex > 0 && (
-                <div className="u-border-start u-h-4 u-mx-1 u-opacity-25" />
+                <div className={`${CHART.TOOLBAR_CLASS}-separator`} />
               )}
 
               {group.label && size === 'lg' && (
-                <span className="u-text-xs u-text-muted u-me-1">{group.label}</span>
+                <span className={`${CHART.TOOLBAR_CLASS}-group-label`}>{group.label}</span>
               )}
 
-              <div className="u-d-flex u-align-items-center u-gap-1 u-position-relative">
+              <div className={`${CHART.TOOLBAR_CLASS}-actions`}>
                 {group.actions.map(renderAction)}
 
                 {/* Render contextual menus */}

package/src/components/Chart/ChartTooltip.tsx

@@ -1,4 +1,5 @@
 import { memo, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { ChartDataPoint } from './types';
 
 interface TooltipPosition {
@@ -31,35 +32,46 @@ const ChartTooltip = memo<ChartTooltipProps>(
         height: window.innerHeight,
       };
 
-      let newX = position.x + 8;
-      let newY = position.y - rect.height;
+      // Start with the provided position
+      let newX = position.x;
+      let newY = position.y;
 
-      // Adjust horizontal position
+      // Adjust for tooltip size to keep it in view
       if (newX + rect.width > viewport.width - 16) {
-        newX = position.x - rect.width - 8;
+        newX = position.x - rect.width - 12;
+      } else {
+        newX = position.x + 12;
       }
 
-      // Adjust vertical position
-      if (newY < 8) {
-        newY = position.y + 8;
+      if (newY + rect.height > viewport.height - 16) {
+        newY = position.y - rect.height - 12;
+      } else {
+        newY = position.y - rect.height / 2;
       }
 
       // Ensure tooltip doesn't go off-screen
-      newX = Math.max(8, Math.min(newX, viewport.width - rect.width - 8));
-      newY = Math.max(8, Math.min(newY, viewport.height - rect.height - 8));
+      newX = Math.max(16, Math.min(newX, viewport.width - rect.width - 16));
+      newY = Math.max(16, Math.min(newY, viewport.height - rect.height - 16));
 
       setAdjustedPosition({ x: newX, y: newY });
     }, [position, visible]);
 
-    if (!visible) return null;
+    if (!visible || !dataPoint) return null;
 
-    return (
+    return createPortal(
       <div
         ref={tooltipRef}
         className="c-chart__tooltip"
         style={{
-          left: adjustedPosition.x,
-          top: adjustedPosition.y,
+          left: `${adjustedPosition.x}px`,
+          top: `${adjustedPosition.y}px`,
+          opacity: visible ? 1 : 0,
+          visibility: visible ? 'visible' : 'hidden',
+          transition: 'opacity 0.2s ease, transform 0.2s ease',
+          transform: 'translateZ(0)',
+          position: 'fixed',
+          zIndex: 1000,
+          pointerEvents: 'none',
         }}
       >
         {customRenderer ? (
@@ -70,10 +82,12 @@ const ChartTooltip = memo<ChartTooltipProps>(
             <div className="c-chart__tooltip-content">
               {datasetLabel && (
                 <div className="c-chart__tooltip-dataset">
-                  <div
-                    className="c-chart__tooltip-color-indicator"
-                    style={{ backgroundColor: datasetColor }}
-                  />
+                  {datasetColor && (
+                    <div
+                      className="c-chart__tooltip-color-indicator"
+                      style={{ backgroundColor: datasetColor }}
+                    />
+                  )}
                   <span className="c-chart__tooltip-dataset-label">{datasetLabel}:</span>
                   <span className="c-chart__tooltip-value">{dataPoint.value}</span>
                 </div>
@@ -91,7 +105,8 @@ const ChartTooltip = memo<ChartTooltipProps>(
             </div>
           </>
         )}
-      </div>
+      </div>,
+      document.body
     );
   }
 );