Graph

SVG graphs for web apps built using Preact.

By Södra Kartfabriken – https://sodrakartfabriken.se.

Development

See the root Readme. Test using packages/graph-test.

Hover and select

Chart (and LineChart, BarChart, Graph) report the value under the pointer:

• onHover(selection) – while hovering; undefined when the pointer leaves.
• onSelect(selection) – on click or tap; clicking the selected value again gives undefined. Dragging (mouse button held, or a finger moved sideways) selects each value it passes and never deselects. A finger moved up or down scrolls the page and selects nothing. onSelect is also called with an updated pos when the chart moves (scroll, resize).
• selectedIndex – the selected index, usually selection.index from onSelect. It stays highlighted while hovering other values.
• showHover – draw the hover line (and highlight the hovered bar). Off by default; onHover is called either way.

selection is { index, pos, value } for one series and { index, pos, values } for several. pos is the value's position in the viewport, e.g. for a FloatingSheet. With onSelect the chart shows a pointer cursor.

The hovered index gets a line styled by style.select, the selected index a darker one styled by style.selected (color, opacity, strokeWidth). By default style.selected uses the select color and stroke width with three times its opacity (at most 1), e.g. style={{ select: { color: 'var(--on-surface-lighter)', opacity: 1 }, selected: { color: 'var(--on-surface-light)' } }}.

const [hovered, setHovered] = useState()
const [selected, setSelected] = useState()

<Chart
  series={series}
  onHover={setHovered}
  onSelect={setSelected}
  selectedIndex={selected ? selected.index : undefined}
/>

Migrating from 1.x

• onSelect used to fire on hover. For hover popups, rename it to onHover.
• locked and onLock are removed. Click-to-select is onSelect plus selectedIndex.

Publish to npm

Login to npm.

npm login --scope=@sodra
npm whoami        # should print your npm username

Bump the version from the repo root with npm run bump. It updates package.json and package-lock.json, then commits and creates the tag vX.Y.Z (plain npm version creates no commit or tag for a workspace package). Publish from packages/graph.

# Update the version (commit + tag)
npm run bump -- patch        # or minor, major, or an exact X.Y.Z

# Publish (prepublishOnly empties dist and builds for you)
cd packages/graph
npm publish                  # add --otp=123456 if npm asks for a one-time password

# Push the version commit and its tag to origin
git push --follow-tags origin

Publish a beta

A beta is published under the beta dist-tag, so npm install @sodra/graph keeps getting latest. Always pass --tag beta: without it npm makes the beta latest.

npm run bump -- 1.11.0-beta.0                 # next beta: npm run bump -- prerelease --preid beta

cd packages/graph
npm publish --tag beta --dry-run              # check "with tag beta" and the file list
npm publish --tag beta
git push --follow-tags origin

npm view @sodra/graph dist-tags               # { latest: ..., beta: '1.11.0-beta.0' }

Install it exactly with npm install @sodra/[email protected] --save-exact. A range like ^1.10.0 never matches a prerelease. To release it for real, run npm run bump -- 1.11.0 and npm publish without --tag.