DocsGeomsGeomTile
NPM Version

@graphique/geom-tile

For rectangular charts like heatmaps in Graphique.

Install

npm install @graphique/geom-tile # @graphique/graphique is a peer dependency

Example

Check out ScaleFill to see related options for coloring tiles in different ways.

API

GeomTile(props: GeomProps) => React.JSX.Element | null

GeomPropsinterface

namedescription
data?

data used by this Geom

This will overwrite top-level data passed to GG as it relates to mappings defined in aes.

Datum[]
aes?

functional mapping applied to data for this Geom

This extends the top-level aes passed to GG. Any repeated mappings defined here will take precedence within the Geom.

GeomAes
attr?

attributes passed to the underlying SVG elements

React.SVGAttributes
showTooltip?

should this Geom have a tooltip associated with it (default: true)

boolean
entrance?

where elements should start as they enter the drawing area (default: Entrance.DATA)

Entrance
xPadding?

padding value (0-1) that sets the space between tile columns (default: 0)

number
yPadding?

padding value (0-1) that sets the space between tile rows (default: 0)

number
xDomain?

input x domain to use with continuous x scales (unique, sequential values across [min, max]). For example, if a column represents a day, xDomain should include the full sequence of days between the min and max values.

(number | Date)[]
yDomain?

input y domain to use with continuous y scales (unique, sequential values across [min, max]). For example, if a row represents a day, yDomain should include the full sequence of days between the min and max values.

(number | Date)[]
focusedKeys?

array of keys (of the kind that are generated by aes.key) used to programmatically focus associated tiles

string[]
focusedStyle?

styles applied to focused elements

React.CSSProperties
unfocusedStyle?

styles applied to unfocused elements

React.CSSProperties
onDatumFocus?

callback called for mousemove events on the drawing area when focusing data

(data: Datum[], index: number[]) => void
onDatumSelection?

callback called for click events on the drawing area when selecting focused data

(data: Datum[], index: number[]) => void
onExit?

callback called for mouseleave events on the drawing area

() => void
isAnimated?

should elements enter/update/exit with animated transitions (default: true)

boolean

Legend(props: LegendProps) => React.JSX.Element | null

LegendPropsinterface

namedescription
title?

title of legend

React.ReactNode
orientation?

determines vertical/horizontal orientation of categorical legend members (default: LegendOrientation.V)

LegendOrientation
format?

function for formatting legend member labels (categorical) or tick labels (continuous/ordinal)

(v: any, i: number) => string
width?

width of continuous/ordinal legend in pixels (default: 320)

number
numTicks?

approximate number of ticks for continuous legend (default: width / 64)

number
onSelection?

callback called for click events on legend members

(v: [number, number] | string, event: PointerEvent | React.KeyboardEvent | React.MouseEvent) => void
focusedThresholds?

when using ordinal fill scales, an array of thresholds for programmatically focusing legend members

[number, number][]
style?

additional styles passed to legend container

React.CSSProperties
GeomPointGeomVLine