Entry-price baseline

Paint linear price changes above and below an explicit entry reference.

APIs demonstrated

BaselineSeries from @pibbl/core/viz
BaselineSeriesProps from @pibbl/core/viz
BaselineSeriesStyle from @pibbl/core/viz
BaselineSideStyle 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 } from "@pibbl/core";
import {
  BaselineSeries,
  LinearScale,
  type BaselineSeriesProps,
  type BaselineSideStyle,
  type BaselineSeriesStyle,
} from "@pibbl/core/viz";
const prices = [
  { time: 0, close: 98 },
  { time: 1, close: 104 },
  { time: 2, close: null },
  { time: 3, close: 102 },
  { time: 4, close: 96 },
];
const above: BaselineSideStyle = { fill: "teal", stroke: "teal" };
const below: BaselineSideStyle = { fill: "coral", stroke: "coral" };
const style: BaselineSeriesStyle = {
  above,
  below,
  fillOpacity: 0.22,
};
const props: BaselineSeriesProps<(typeof prices)[number]> = {
  data: prices,
  x: "time",
  y: "close",
  xScale: "time",
  yScale: "price",
  baseline: 100,
  style,
};
export default function mount(canvas: HTMLCanvasElement) {
  return pibbl(
    canvas,
    <LinearScale id="time" domain={[0, 4]} range={[16, 300]}>
      <LinearScale id="price" domain={[94, 106]} range={[180, 16]}>
        <BaselineSeries
          data={props.data}
          x={props.x}
          y={props.y}
          xScale={props.xScale}
          yScale={props.yScale}
          baseline={props.baseline}
          style={props.style}
        />
      </LinearScale>
    </LinearScale>,
  );
}

const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = mount(canvas);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

Documentation version

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