@thi.ng/viz/plot/candle.js

Declarative, functional & multi-format data visualization toolkit based around @thi.ng/hiccup

import { map } from "@thi.ng/transducers/map";
import { __resolveData, __valueMapper } from "./utils.js";
const candlePlot = (data, opts = { shape: candle() }) => (spec) => {
  const mapper = __valueMapper(spec.xaxis, spec.yaxis, spec.project);
  return [
    "g",
    {},
    ...map(([x, candle2]) => {
      const { o, h, l, c } = candle2;
      return opts.shape(
        candle2,
        {
          o: mapper([x, o]),
          h: mapper([x, h]),
          l: mapper([x, l]),
          c: mapper([x, c])
        },
        x,
        c >= o
      );
    }, __resolveData(data, spec.xaxis.domain))
  ];
};
const candle = (opts = {}) => {
  const {
    up = () => ({ stroke: [1, 0, 0], fill: [1, 0, 0] }),
    down = () => ({ stroke: [0, 0.8, 0], fill: [0, 0.8, 0] }),
    width = 5,
    title
  } = opts;
  const w = width / 2;
  return (raw, candle2, x, isUp) => {
    const { o, h, l, c } = candle2;
    return [
      "g",
      isUp ? up(x, raw) : down(x, raw),
      title ? ["title", {}, title(x, raw)] : null,
      ["line", {}, l, h],
      [
        "polygon",
        {},
        [
          [o[0] - w, o[1]],
          [c[0] - w, c[1]],
          [c[0] + w, c[1]],
          [o[0] + w, o[1]]
        ]
      ]
    ];
  };
};
export {
  candle,
  candlePlot
};