wick-charts 0.10.1 → 0.11.0

package/README.md

@@ -256,13 +256,19 @@ const chart = createCandlestickChart(canvas, {
       `시가 ${candle.open.toLocaleString()}`,
       `고가 ${candle.high.toLocaleString()}`,
       `저가 ${candle.low.toLocaleString()}`,
-      `종가 ${candle.close.toLocaleString()}`,
       // A line can be a plain string (drawn in legend.textColor, like the
-      // four above) or { text, color } for one that needs its own color —
-      // see "Coloring individual legend lines" just below.
+      // three above), { text, color } for a whole line in its own color, or
+      // an array of { text, color } segments to color only *part* of one
+      // line — see "Coloring individual legend lines" just below.
       change === null
-        ? '등락 —'
-        : { text: `등락 ${change >= 0 ? '+' : ''}${change.toFixed(2)}%`, color: change >= 0 ? '#22c55e' : '#ef4444' },
+        ? `종가 ${candle.close.toLocaleString()}`
+        : [
+            { text: `종가 ${candle.close.toLocaleString()} ` },
+            {
+              text: `(${change >= 0 ? '+' : ''}${change.toFixed(2)}%)`,
+              color: change >= 0 ? '#22c55e' : '#ef4444',
+            },
+          ],
     ];
   },
 });
@@ -276,12 +282,13 @@ the previous point regardless of where the user has panned/zoomed to.
 
 #### Coloring individual legend lines
 
-Every line returned by `formatLegend` is a `LegendLine` — either a plain `string`, drawn in
-`legend.textColor` like every line before this existed, or `{ text, color }` for one line that
-needs its own color independent of the rest (the `change` line above: green when positive, red
-when negative, regardless of `legend.textColor`). Mixing both shapes in one returned array, as
-above, is the normal case — only the lines that actually need a distinct color use the object
-form. There's no chart-wide "green means up" setting for this: which color means "up" is a
+Every line returned by `formatLegend` is a `LegendLine` — a plain `string`, drawn in
+`legend.textColor` like every line before this existed; `{ text, color }` for one line that
+needs its own color independent of the rest; or a `LegendSegment[]` (`{ text, color? }[]`) for
+several colored runs on the *same* line — the `종가` line above keeps its label in
+`legend.textColor` and colors only the `(±%)` suffix, rather than tinting the whole line green
+or red. Mixing all three shapes in one returned array, as above, is the normal case — only the
+text that actually needs a distinct color gets it. There's no chart-wide "green means up" setting for this: which color means "up" is a
 convention that varies by market (green-up in most markets, red-up in South Korea and a few
 others) and isn't something the library should hardcode, so `formatLegend` decides it per line
 the same way it decides everything else about the legend's text. This is separate from

package/dist/crosshairRenderer.js

@@ -1,6 +1,16 @@
 import { formatHoverTime } from './axis.js';
 import { formatPrice } from './priceAxis.js';
 import { pixelToValue } from './valueAxis.js';
+/** Normalizes any `LegendLine` shape to the one form actually drawn:
+ * a list of colored segments (a plain string/line becomes one segment
+ * with no color override). */
+function toSegments(line) {
+    if (typeof line === 'string')
+        return [{ text: line }];
+    if (Array.isArray(line))
+        return line;
+    return [line];
+}
 /**
  * Draws the hover crosshair (dashed lines), its price/time label chips,
  * and the OHLC-style legend tooltip. Split out of `ChartRenderer` for the
@@ -75,12 +85,12 @@ export class CrosshairRenderer {
         ctx.font = this.legendFont();
         ctx.textAlign = 'left';
         ctx.textBaseline = 'top';
-        // Each line is either a plain string or { text, color } — normalize to
-        // its text once up front for sizing, and read its own color (falling
-        // back to legend.textColor) only when actually drawing it below.
-        const texts = lines.map((line) => (typeof line === 'string' ? line : line.text));
+        // Normalize every line to its segments once up front — sizing needs
+        // each line's full concatenated width; drawing needs each segment's
+        // own color (falling back to legend.textColor).
+        const segmentedLines = lines.map(toSegments);
         const lineHeight = font.legendSize + 4;
-        const textWidth = Math.max(...texts.map((text) => ctx.measureText(text).width));
+        const textWidth = Math.max(...segmentedLines.map((segments) => segments.reduce((w, seg) => w + ctx.measureText(seg.text).width, 0)));
         const boxWidth = textWidth + legend.paddingX * 2;
         const boxHeight = lines.length * lineHeight + legend.paddingY * 2;
         const anchorY = hoverY ?? 0;
@@ -88,9 +98,14 @@ export class CrosshairRenderer {
         const top = Math.min(Math.max(anchorY - boxHeight - legend.cursorGap, 0), Math.max(0, chartHeight - boxHeight));
         ctx.fillStyle = legend.background;
         ctx.fillRect(left, top, boxWidth, boxHeight);
-        lines.forEach((line, i) => {
-            ctx.fillStyle = typeof line === 'string' ? legend.textColor : (line.color ?? legend.textColor);
-            ctx.fillText(texts[i], left + legend.paddingX, top + legend.paddingY + i * lineHeight);
+        segmentedLines.forEach((segments, i) => {
+            let segX = left + legend.paddingX;
+            const y = top + legend.paddingY + i * lineHeight;
+            for (const seg of segments) {
+                ctx.fillStyle = seg.color ?? legend.textColor;
+                ctx.fillText(seg.text, segX, y);
+                segX += ctx.measureText(seg.text).width;
+            }
         });
     }
     /** The highlighted price-axis label that follows the crosshair's

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import type { ChartPlugin } from './plugins/types.js';
 import type { CandlestickStyle } from './series/candlestick.js';
 import type { LineStyle } from './series/line.js';
 import type { Candle, LegendFormatContext, LegendLine, LinePoint, PaneOptions, WickChartOptions, SeriesPoint, ValueRange, WickTime } from './types.js';
-export type { BusinessDay, Candle, LegendFormatContext, LegendLine, LinePoint, PaneOptions, WickChartOptions, WickTime, SeriesPoint, UnixMillis, ValueRange, } from './types.js';
+export type { BusinessDay, Candle, LegendFormatContext, LegendLine, LegendSegment, LinePoint, PaneOptions, WickChartOptions, WickTime, SeriesPoint, UnixMillis, ValueRange, } from './types.js';
 export type { DataLoader, DataRequest } from './dataSource.js';
 export type { ChartPlugin, ChartPointerEvent, PluginRenderApi } from './plugins/types.js';
 export { distanceToSegment, hitTestPoint, hitTestSegment } from './hitTest.js';

package/dist/types.d.ts

@@ -193,18 +193,22 @@ export interface LegendFormatContext<TPoint extends SeriesPoint = SeriesPoint> {
      * time — the same array `SeriesDrawContext.allPoints` is. */
     allPoints: readonly TPoint[];
 }
-/**
- * One line of the hover legend — a plain `string` (drawn in the legend's
- * configured `textColor`, same as every version of this library before
- * per-line color existed) or `{ text, color }` for a line that needs its
- * own color independent of the rest — a percent-change line that should
- * read green/red by sign, say. Mixing both in the same `formatLegend`
- * return array is fine: each line is colored independently.
- */
-export type LegendLine = string | {
+/** One colored run of text within a legend line — see `LegendLine`. */
+export interface LegendSegment {
     text: string;
     color?: string;
-};
+}
+/**
+ * One line of the hover legend:
+ *  - a plain `string`, drawn in the legend's configured `textColor`;
+ *  - `{ text, color }`, a whole line in its own color;
+ *  - `LegendSegment[]`, several runs of text drawn left-to-right on the
+ *    same line, each independently colored — e.g. a plain label followed
+ *    by a colored `(+1.23%)` suffix, without tinting the label too.
+ * Mixing all three shapes in the same `formatLegend` return array is fine:
+ * each line is laid out independently.
+ */
+export type LegendLine = string | LegendSegment | LegendSegment[];
 export interface WickChartOptions {
     /**
      * Which registered series type to render this chart as (see

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wick-charts",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "An open-source financial charting library — WASM (Rust) for compute, Canvas2D for rendering.",
   "license": "MIT",
   "author": "eatnows",