Dev | Examples | Tooltip | Sticky: Multiple configurations

packages/dev/src/examples/auxiliary/tooltip/tooltip-stick-position/index.tsx

@@ -1,36 +1,49 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Position, Scatter } from '@unovis/ts'
-import { VisXYContainer, VisAxis, VisScatter, VisTooltip } from '@unovis/react'
-
-import { XYDataRecord } from '@src/utils/data'
+import { VisXYContainer, VisAxis, VisScatter, VisTooltip, VisTooltipProps } from '@unovis/react'
 
 export const title = 'Tooltip Sticky Position'
 export const subTitle = 'Hoverable Tooltip'
 
-export const component = (): JSX.Element => {
-  const data = [
-    { x: 0, y: 5 },
-    { x: 3, y: 10 },
-    { x: 6, y: 0 },
-    { x: 9, y: 5 },
-  ]
+export const TooltipComponent = (props: VisTooltipProps): JSX.Element => {
+  const data = useMemo(() => Array.from({ length: 15 }, (_, i) => ({
+    x: i + 10 * Math.random(),
+    y: Math.random() * 10,
+    size: 50 * Math.random(),
+  })), [])
 
+  type XYDataRecord = typeof data[0]
   return (<>
-    <VisXYContainer<XYDataRecord> data={data}>
-      <VisScatter x={(d: XYDataRecord) => d.x} y={(d: XYDataRecord) => d.y} size={50}/>
+    <VisXYContainer<XYDataRecord> data={data} height={400}>
+      <VisScatter x={(d: XYDataRecord) => d.x} y={(d: XYDataRecord) => d.y} size={d => d.size}/>
       <VisTooltip
         followCursor={false}
-        container={document.body}
         horizontalPlacement={Position.Auto}
         verticalPlacement={Position.Auto}
         triggers={{
           [Scatter.selectors.point]: () => `
               You can hover over this tooltip
           `,
-        }} />
+        }}
+        {...props}
+      />
       <VisAxis type='x' />
       <VisAxis type='y' />
     </VisXYContainer>
   </>
   )
 }
+
+export const component = (): JSX.Element => {
+  return (<>
+    Container: Default, Automatic Placement
+    <TooltipComponent/>
+
+    Container: Default, Vertical Placement: Center, Horizontal Placement: Right
+    <TooltipComponent verticalPlacement={Position.Center} horizontalPlacement={Position.Right}/>
+
+    Container: Body, Automatic Placement
+    <TooltipComponent container={document.body}/>
+  </>
+  )
+}