@overdoser/react-toolkit 0.0.13 → 0.0.15

package/llms.txt

@@ -733,10 +733,13 @@ Props:
 - `datafeed: Datafeed` — required. Plug-in adapter (see contract below).
 - `symbol: string` — required.
 - `resolution: Resolution` — bar size (the "tick interval"). TradingView-style: numeric strings are minutes (`'1'`, `'5'`, `'60'`); `'D'`, `'W'`, `'M'` for day/week/month; any other string passes through.
-- `period?: Period` — visible time-range window (the "chart interval"): `'1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y'` or any `<n><unit>` string (`'30d'`, `'48h'`, `'2y'`). When set, the chart fetches bars covering the period and the initial visible window spans all of them. Overrides `initialLookback`. Note: the chart does NOT auto-adjust `resolution` for you — pair with `suggestResolutionForPeriod()` / `suggestPeriodForResolution()` if you want them coupled.
+- `period?: Period` — visible time-range window (the "chart interval"): `'1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y' | '10Y' | '20Y' | 'MAX'` or any `<n><unit>` string (`'30d'`, `'48h'`, `'2y'`). When set, the chart fetches bars covering the period and the initial visible window spans all of them. Overrides `initialLookback`. `'MAX'` requests `from: 0` (epoch) and renders whatever the datafeed returns — pair with a coarse `resolution` (`'W'` / `'M'`). Note: the chart does NOT auto-adjust `resolution` for you — pair with `suggestResolutionForPeriod()` / `suggestPeriodForResolution()` if you want them coupled.
 - `seriesType?: 'candle' | 'bar' | 'line' | 'area'` — main pane style. @default `'candle'`. `'bar'` = OHLC bars (vertical high-low line, left tick at open, right tick at close).
 - `timezone?: Timezone` / `defaultTimezone?: Timezone` / `onTimezoneChange?: (tz) => void` — controlled / uncontrolled / notification trio for the crosshair time label. `Timezone = 'local' | 'utc' | IANA-name`. Default `'local'`. Local mode renders `YYYY-MM-DD HH:MM:SS +HH:MM`, UTC renders `… UTC`, IANA strings render `… EST` (short timezone via `Intl.DateTimeFormat`).
 - `showConfigPanel?: boolean` — show the gear button in the chart header + a Popover with a Timezone selector. @default `true`. Hide it if you want to manage timezone purely externally.
+- `priceBadgeColorByDirection?: boolean` — when true, the top cursor-value badge is tinted with `upColor` / `downColor` (white text) by the hovered bar's direction. When false, it uses the same neutral palette as the bottom datetime badge. @default `false`.
+- `priceBadgeShowTime?: boolean` — when true, the top cursor-value badge appends a date (D/W/M) or weekday+date+time (intraday) AFTER the price, separated by ` · `. Honours `timezone`. Default formats: `'17 Sep 2025'` for D/W/M, `'Wed 17 Sep 14:30'` for intraday. @default `false`.
+- `priceBadgeTimeFormat?: (unixSec: number, resolution: Resolution, timezone: Timezone) => string` — optional override for the time portion when `priceBadgeShowTime` is on. Return any string; an empty string suppresses the suffix for that hover.
 - `indicators?: IndicatorConfig[]` — see "Indicators" below.
 - `precision?: number` — decimal places for price labels and tooltips. @default `2`
 - `initialLookback?: number` — historical bars fetched on mount when `period` is not set. @default `500`
@@ -781,7 +784,7 @@ Interactions:
 - Drag = pan.
 - Wheel = zoom (anchored on cursor).
 - ←/→ keys = nudge pan.
-- Hover = full crosshair (dashed horizontal + vertical lines) with a **price badge** on the right edge and a **time badge** under the X axis showing `YYYY-MM-DD HH:MM:SS <tz>` at the cursor's snapped bar (timezone is configurable via the gear panel or props). `onCrosshair` callback fires.
+- Hover = full crosshair (dashed horizontal + vertical lines) with a **Y-axis price badge** on the right edge, a **time badge** under the X axis showing `YYYY-MM-DD HH:MM:SS <tz>` at the cursor's snapped bar (timezone is configurable via the gear panel or props), and a **top cursor-value badge** at the X position showing the hovered bar's close. `onCrosshair` callback fires. The top badge is neutral by default; pass `priceBadgeColorByDirection` to color it by bar direction and/or `priceBadgeShowTime` to include a compact date / date+time prefix.
 
 Out of scope (v1):
 - Drawing tools (trend lines, fib, shapes).

package/manifest.json

@@ -558,12 +558,15 @@
         "datafeed": { "type": "Datafeed", "required": true },
         "symbol": { "type": "string", "required": true },
         "resolution": { "type": "Resolution", "required": true, "notes": "Bar size (the 'tick interval'). TradingView-style: numeric minutes ('1', '5', '60') or 'D'/'W'/'M'. Any other string passes through to the datafeed." },
-        "period": { "type": "Period", "notes": "Visible time-range window (the 'chart interval'): '1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y' or a `<n><unit>` string. Overrides initialLookback when set. The chart does not auto-adjust resolution; pair with suggestResolutionForPeriod() / suggestPeriodForResolution() to couple the two." },
+        "period": { "type": "Period", "notes": "Visible time-range window (the 'chart interval'): '1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y' | '10Y' | '20Y' | 'MAX' or a `<n><unit>` string. Overrides initialLookback when set. 'MAX' fetches from epoch and renders whatever the datafeed returns — pair with a coarse resolution. The chart does not auto-adjust resolution; pair with suggestResolutionForPeriod() / suggestPeriodForResolution() to couple the two." },
         "seriesType": { "type": "enum", "values": ["candle", "bar", "line", "area"], "default": "candle", "notes": "'bar' = OHLC bars (vertical high-low line, left tick at open, right tick at close)." },
         "timezone": { "type": "Timezone", "notes": "Controlled timezone for the crosshair time label. 'local' | 'utc' | IANA name. Pair with onTimezoneChange." },
         "defaultTimezone": { "type": "Timezone", "default": "local", "notes": "Initial timezone when uncontrolled." },
         "onTimezoneChange": { "type": "(tz: Timezone) => void" },
         "showConfigPanel": { "type": "boolean", "default": true, "notes": "Gear button in the header that opens a Popover with a Timezone dropdown (Local / UTC / common IANA zones)." },
+        "priceBadgeColorByDirection": { "type": "boolean", "default": false, "notes": "Tint the top cursor-value badge by bar direction (up/down) instead of the neutral palette." },
+        "priceBadgeShowTime": { "type": "boolean", "default": false, "notes": "Append a compact date (D/W/M: '17 Sep 2025') or weekday+date+time (intraday: 'Wed 17 Sep 14:30') AFTER the price in the top cursor-value badge. Honours `timezone`." },
+        "priceBadgeTimeFormat": { "type": "(unixSec: number, resolution: Resolution, timezone: Timezone) => string", "notes": "Optional override for the time portion when priceBadgeShowTime is on. Return any string; empty string suppresses the suffix." },
         "indicators": { "type": "IndicatorConfig[]" },
         "precision": { "type": "number", "default": 2 },
         "initialLookback": { "type": "number", "default": 500, "notes": "Used only when `period` is not set." },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overdoser/react-toolkit",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",