MonoChart

Overview

TxMonoChart renders native SVG using the existing chart scales, d3 curves, Sankey layout and --tx-chart-* theme. It has no React, Recharts or ECharts runtime. All values come from data; omitting it shows an empty state, not invented business values. Activity palettes retain emerald, blue and violet emphasis; other charts follow the host's monochrome ink.

Hover a mark to read its actual values. Focus the SVG and use arrow keys, Home or End to inspect marks, Enter or Space to emit select, and Escape to clear the readout. Donut/radial legends are also keyboard-operable. Repository disclosure uses a native button, aria-expanded and an inert collapsed list. Center values reflect the hovered segment, otherwise the caller's metric or the data total.

Usage

Catalog and data contracts

The demo renders every original catalog ID, switches the actual supplied dataset, and includes all source controls. Filtering changes which examples are displayed; it does not alias different chart types to one drawing.

Source capabilities

github-activity preserves the extra GitHubActivity calendar: fitted recent columns, configurable cell size and month window, month headers, one-color or four/five-color intensity scales, year metadata, stacked repository avatars and controlled/uncontrolled repository expansion. Pass data.contributions and data.repos to use your source. Explicit empty arrays remain empty.

For real public data, pass username. Missing contribution/repository fields are loaded from the upstream public calendar endpoint and GitHub public events API through the shared network client, forwarding the same cancellation signal; no credentials are embedded. activityLoader(username, signal) replaces this adapter for a proxy or authenticated source. Failures emit error and show the configurable retry state; there is no generated-data fallback. Requests are aborted on source changes, offscreen suspension, deactivation and unmount; a stale response cannot replace a newer source.

periods can select periodData datasets (shallowly merged with data) or inclusive numeric/ISO-date ranges. Ranges filter series points, categories, candles, range bands and contribution dates. A label-only period without matching data or a range merely emits the selection; it cannot invent a new time window. The demo's date filter removes real points, while its dataset switch replaces real input values across all chart types.

Best Practices

• Use the matching data field from the catalog table; series is not a fallback for candles, flow nodes, matrix cells or tree allocations.
• Match each categorical point's x to categories, or omit categories to derive their order. Provide input-order stages and tiers deliberately. points.z controls circle area, not radius.
• Set each radial item's max for non-percent units; the default is 100. Donut values are normalized against their actual positive sum, not a hardcoded 100.
• Supply repository URLs and labels from your source. Use a custom loader rather than exposing private credentials to the browser. Network access occurs only after the calendar becomes visible on the client.
• Give SSR an explicit width and a consistent locale. SVG gradients and repository panel IDs use Vue useId, so multiple instances do not collide during hydration.
• Localize title, ariaLabel, data labels and the labels object. Adapt theme tokens instead of overriding SVG geometry. Reduced motion keeps the finished chart visible.

API Reference

Props

Data types

All types are exported from @talex-touch/tuffex/charts.

Labels

labels is partial; omitted keys retain English defaults: single='Single', dual='Dual', col='Col', row='Row', monotone='Monotone', natural='Natural', showLine='Spline on', hideLine='Spline off', repositories='Top contributions in', expand='Show repositories', collapse='Hide repositories', empty='No data', loading='Loading activity', error='Activity could not be loaded', retry='Retry', less='Less', more='More', target='Target', open='Open', high='High', low='Low', close='Close', x='X', y='Y', z='Z', min='Min', max='Max', delta='Delta', balance='Balance'.

Events

Slots

CSS variables

Technologies

The implementation ports the distinct rendering contracts of all 29 files under Amicro src/components/mono-charts plus its 30-row catalog. GitHubActivity is an additional variant, not a renamed activity palette. Geometry is pure and data-driven; chart scale/curve/tooltip-position/Sankey helpers are reused. Weighted allocation is calculated from input rather than the upstream demo's fixed CSS grid. Request abort/version ownership prevents stale updates, and the shared motion activity helper owns visibility/KeepAlive cleanup. The repository disclosure transition runs only while active and with no reduced-motion preference. No browser API is touched during SVG SSR. Final build, browser and lifecycle verification are performed by the integration owner.