Threshold-colored bars

Render category bars with a typed style resolver and threshold fill.

APIs demonstrated

BarSeries from @pibbl/core/viz
BarThresholdFill from @pibbl/core/viz
BarCategoryAccessor from @pibbl/core/viz
BarSeriesStyle from @pibbl/core/viz
BarStyleResolver from @pibbl/core/viz
BarSeriesProps from @pibbl/core/viz

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import { pibbl, Overlay } from "@pibbl/core";
import { Axis, BarSeries, type BarCategoryAccessor, type BarSeriesProps, type BarSeriesStyle, type BarStyleResolver, type BarThresholdFill, BarScale, LinearScale } from "@pibbl/core/viz";

type Sale = { month: string; amount: number };
const sales: readonly Sale[] = [
  { month: "Apr", amount: 28 },
  { month: "May", amount: 52 },
  { month: "Jun", amount: 74 },
];
const category: BarCategoryAccessor<Sale> = "month";
const fill: BarThresholdFill = {
  type: "threshold",
  thresholds: [50],
  colors: ["#0f766e", "#f97316"],
};
const baseStyle: BarSeriesStyle = { fill, bandwidth: "auto" };
const style: BarStyleResolver<Sale> = (datum) => ({
  ...baseStyle,
  opacity: datum.amount < 30 ? 0.65 : 1,
});
const bars: BarSeriesProps<Sale> = {
  data: sales,
  category,
  value: "amount",
  categoryScale: "month",
  valueScale: "amount",
  style,
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <Overlay style={{ left: 70, top: 15, width: 230, height: 170 }}>
    <BarScale
      id="month"

      domain={sales.map((sale) => sale.month)}
      range="width"
      paddingInner={0.2}
      style={{ width: 230, height: 170 }}
    >
      <LinearScale id="amount"  domain={[0, 80]} range="height" reverse>
        <BarSeries {...bars} />
        <Axis scale="amount" position="left" tickValues={[0, 20, 40, 60, 80]} />
        <Axis
          scale="month"
          position="bottom"
          tickValues={sales.map((sale) => sale.month)}
        />
      </LinearScale>
    </BarScale>
  </Overlay>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

Creates its own canvas and disposes the Pibbl mount on pagehide.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.