Skip to content
Pinky UI

data

Data Lens

Chart-agnostic pointer, touch and keyboard local inspection.

  • data
  • inspection
  • overlay
  • chart

Live preview

Mon: 12k

Quick usage

usage
import { DataLens } from "@pinky-ui/systems";

<DataLens items={points} renderLens={renderValue}>{chart}</DataLens>

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
renderLens(item, index) => ReactNode—Host-owned compact textual inspection output.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Does not couple to SVG, canvas or a chart library.
  • Updates selection only when index changes.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Adding a consistent inspector to custom charts

When not to use

  • Charts that already provide an accessible inspector

Skill

Purpose

DataLens adds chart-agnostic local inspection around custom SVG, canvas or DOM data surfaces. Use it when the host visualization already exists but needs consistent pointer, touch and keyboard selection.

Supply ordered items and a compact textual lens. Avoid coupling essential meaning only to the floating overlay, or wrapping a chart whose own inspection model already works well.

The wrapper exposes slider semantics and Arrow/Home/End selection. Touch may tap or drag. Keep updates to index changes rather than raw pointer frames, and ensure a non-visual summary exists outside the overlay.

Open this skill on its own page