purescript-hylograph-components

Ready-made chart components built on Hylograph HATS — typed Config records, Foldable-polymorphic data, a shared Theme, and coordinated-hover tooltips out of the box.

Live interactive demo can be seen as part of the suite of Hylograph library demos. Click the screenshot below for the Component Gallery.

Seven chart presets and a standalone legend, over one shared substrate. Every preset is the same shape: a typed Config, a pure Input -> Tree render function, and a Halogen component obtained from a single mkFrame call. The same Axis, Theme, Layout and Frame sit under all of them, so learning one chart is most of the work of learning the rest.

Rendering is pure. A chart is a HATS Tree; putting that tree in the DOM is the Frame's job, and nothing in a chart module touches Effect.

spago install hylograph-components

• BarChart — categorical bars, with Orientation (vertical/horizontal) and StackMode (grouped, stacked, normalized-to-100%)
• LinePlot — lines and points, with an optional areaFill
• ScatterPlot — points, with mark shapes, continuous colour, and jitter
• PieChart — arcs, with innerRadius for donuts
• BoxPlot — quartile boxes, whiskers at 1.5·IQR, outlier dots
• Heatmap — cell grid on two categorical axes, coloured by a continuous value
• Treemap — rectangles packed via squarify, sized proportional to value
• Legend — a standalone preset, not a chart decorator; swatches are either a MarkShape (circle, square, triangle, diamond, cross, star) or a line in any LineStyle, so they match the chart's marks exactly

Plus the shared substrate: Axis, Theme, Layout, Frame, Series, Mark, LineStyle, Annotation, Binning.

There is no StackedBarChart, GroupedBarChart, AreaChart, DonutChart or Histogram module, on purpose. Those are not distinct charts; they are values of a field on a Config that already exists:

A new module appears only when the mark geometry is genuinely new.

import Halogen.HTML as HH
import Hylograph.Components.BarChart as BarChart
import Hylograph.Components.Frame (FrameInput)
import Hylograph.Components.Theme (defaultTheme)
import Type.Proxy (Proxy(..))

type QuarterRow = ( category :: String, value :: Number )

revenue :: FrameInput (BarChart.Input Array QuarterRow)
revenue =
  { containerId: "revenue"
  , chart:
      { config: BarChart.config { category: _.category, value: _.value }
      , dataset:
          [ { category: "Q1", value: 42.0 }
          , { category: "Q2", value: 58.0 }
          , { category: "Q3", value: 31.0 }
          , { category: "Q4", value: 73.0 }
          ]
      , theme: defaultTheme
      }
  }

-- in some parent component's render:
_chart = HH.slot_ (Proxy :: _ "revenue") unit BarChart.frame revenue

config is a smart constructor: give it the projections the chart cannot guess (here category and value) and it fills in sensible defaults for everything else — layout, series, key, tooltip, padding, orientation. Override by record update.

Give two or more charts the same non-empty highlightGroup and hovering a mark in one highlights the matching key in all of them:

config { highlightGroup = Just "quarters" }

Matching is by encoding.key, which defaults to whatever identifies a row for that chart. Tooltips come along for free.

This library ships no stylesheet. Hovering assigns one of .highlight-primary, .highlight-related or .highlight-dimmed to every mark and leaves the presentation entirely to your page. Until you write rules for those classes the classification is computed correctly and is completely invisible — which looks exactly like coordinated hover not working.

The minimum that makes it visible:

.highlight-primary { opacity: 1 !important; }
.highlight-related { opacity: 1 !important; }
.highlight-dimmed  { opacity: 0.15 !important; }

svg * { transition: opacity 0.15s, fill-opacity 0.15s; }

Tooltips are the exception — they render themselves and need no CSS from you, which is why a chart can look like it has working hover and dead highlighting at the same time.

Charts only ever emit Primary and Dimmed; Related comes from the sibling library, where a mark can have neighbours. Style all three if you use both.

Anything whose geometry can be built from basic HATS elements plus scale arithmetic belongs here. Charts whose positions are computed by a DataViz.Layout.* algorithm — Sankey, chord, sunburst, dendrogram, circle pack, adjacency matrix — or by force simulation are deliberately not here; they are reserved for a sibling library. See docs/SIBLING-LIBRARY.md.

• AUTHORING.md — the template every chart module follows. Read this before adding one.
• docs/SIBLING-LIBRARY.md — the proposed hylograph-layout-components sibling.
• docs/FUTURE-SESSIONS.md — the live backlog.

• hylograph-components — chart presets (this package)
• hylograph-selection — HATS, scales, shapes; the substrate this builds on
• hylograph-layout — layout algorithms
• hylograph-graph — graph algorithms and DAG support
• hylograph-simulation — force simulation

MIT