feat(viz): update candlePlot(), add candle() shape fn

packages/viz/src/plot/candle.ts

@@ -1,46 +1,79 @@
-import type { Fn2, NumOrString } from "@thi.ng/api";
+import type { Fn2, Fn4, NumOrString } from "@thi.ng/api";
+import { isFunction } from "@thi.ng/checks";
 import { map } from "@thi.ng/transducers";
-import type { PlotFn } from "../api";
+import type { DomainValues, PlotFn } from "../api";
 import { valueMapper } from "./utils";
 
 export type Candle = { o: number; h: number; l: number; c: number };
 
+export type MappedCandle = Record<keyof Candle, number[]>;
+
+export type CandleShapeFn = Fn4<Candle, MappedCandle, number, boolean, any>;
+
 export interface CandlePlotOpts {
+    shape: CandleShapeFn;
+}
+
+export interface CandleShapeOpts {
     up: Fn2<number, Candle, any>;
     down: Fn2<number, Candle, any>;
     title: Fn2<number, Candle, NumOrString>;
     width: number;
 }
 
 export const candlePlot = (
-    data: Iterable<[number, { o: number; h: number; l: number; c: number }]>,
-    opts: Partial<CandlePlotOpts> = {}
+    data: DomainValues<Candle>,
+    opts: CandlePlotOpts = { shape: candle() }
 ): PlotFn => (spec) => {
     const mapper = valueMapper(spec.xaxis, spec.yaxis, spec.project);
-    const w = (opts.width || 6) / 2;
     return [
         "g",
         {},
-        ...map(([x, candle]) => {
-            const { o, h, l, c } = candle;
-            const $o = mapper([x, o]);
-            const $c = mapper([x, c]);
-            return [
-                "g",
-                c >= o ? opts.up!(x, candle) : opts.down!(x, candle),
-                opts.title ? ["title", {}, opts.title(x, candle)] : null,
-                ["line", {}, mapper([x, l]), mapper([x, h])],
+        ...map(
+            ([x, candle]) => {
+                const { o, h, l, c } = candle;
+                return opts.shape(
+                    candle,
+                    {
+                        o: mapper([x, o]),
+                        h: mapper([x, h]),
+                        l: mapper([x, l]),
+                        c: mapper([x, c]),
+                    },
+                    x,
+                    c >= o
+                );
+            },
+            isFunction(data) ? data(spec.xaxis.domain) : data
+        ),
+    ];
+};
+
+export const candle = (opts?: Partial<CandleShapeOpts>) => {
+    const { up, down, title, width } = {
+        up: () => ({ stroke: [1, 0, 0], fill: [1, 0, 0] }),
+        down: () => ({ stroke: [0, 0.8, 0], fill: [0, 0.8, 0] }),
+        width: 4,
+        ...opts,
+    };
+    const w = width / 2;
+    return (raw: Candle, candle: MappedCandle, x: number, isUp: boolean) => {
+        const { o, h, l, c } = candle;
+        return [
+            "g",
+            isUp ? up(x, raw) : down(x, raw),
+            title ? ["title", {}, title(x, raw)] : null,
+            ["line", {}, l, h],
+            [
+                "polygon",
+                {},
                 [
-                    "polygon",
-                    {},
-                    [
-                        [$o[0] - w, $o[1]],
-                        [$c[0] - w, $c[1]],
-                        [$c[0] + w, $c[1]],
-                        [$o[0] + w, $o[1]],
-                    ],
+                    [o[0] - w, o[1]],
+                    [c[0] - w, c[1]],
+                    [c[0] + w, c[1]],
+                    [o[0] + w, o[1]],
                 ],
-            ];
-        }, data),
-    ];
+            ],
+        ];
+    };
 };

packages/viz/tools/candles.ts

@@ -3,6 +3,7 @@ import { convertTree, svg } from "@thi.ng/hiccup-svg";
 import { float, Z2 } from "@thi.ng/strings";
 import { readFileSync, writeFileSync } from "fs";
 import {
+    candle,
     candlePlot,
     dataBounds,
     dataMax,
@@ -54,15 +55,7 @@ const res = plotCartesian({
                 { o: p.open, h: p.high, l: p.low, c: p.close },
             ]),
             {
-                down: () => ({
-                    stroke: "#c00",
-                    fill: "#fff",
-                }),
-                up: () => ({
-                    stroke: "#0c0",
-                    fill: "#0c0",
-                }),
-                width: 4,
+                shape: candle(),
             }
         ),
     ],