@wick-charts/react 0.2.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/react",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "High-performance canvas timeseries charts for React — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -49,7 +49,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.2.3"
+    "@wick-charts/core": "^0.3.0"
   },
   "scripts": {
     "build": "vite build"

package/src/CandlestickSeries.tsx

@@ -89,13 +89,14 @@ export function CandlestickSeries({ data, options, id: idProp }: CandlestickSeri
     }
   }, [
     chart,
-    options?.upColor,
-    options?.downColor,
-    options?.wickUpColor,
-    options?.wickDownColor,
+    // Tuple bodies are new array refs on every render (preset `autoGradient()`
+    // output, inline literals, etc.) and would misfire `Object.is`. Collapse
+    // to a stable string the same way BarSeries/LineSeries handle `colors`.
+    Array.isArray(options?.up?.body) ? options.up.body.join(',') : options?.up?.body,
+    Array.isArray(options?.down?.body) ? options.down.body.join(',') : options?.down?.body,
+    options?.up?.wick,
+    options?.down?.wick,
     options?.bodyWidthRatio,
-    options?.bodyGradient,
-    options?.candleGradient,
     options?.entryAnimation,
     options?.enterAnimation,
     options?.entryMs,

package/src/index.ts

@@ -1,4 +1,12 @@
-// Re-export core (users import everything from '@wick-charts/react')
+/**
+ * @wick-charts/react — React bindings for Wick Charts.
+ *
+ * Everything importable from the library is re-exported here: components
+ * (`<ChartContainer>`, `<CandlestickSeries>`, …), option types, utility
+ * hooks, and themes. The underlying `@wick-charts/core` engine is bundled
+ * into this package — its source lives at
+ * https://github.com/mo4islona/wick-charts/tree/main/packages/core/src.
+ */
 
 export type {
   AxisBound,
@@ -46,6 +54,7 @@ export type {
 export {
   ChartInstance,
   andromeda,
+  autoGradient,
   ayuMirage,
   buildHoverSnapshots,
   buildLastSnapshots,
@@ -76,6 +85,9 @@ export {
   panda,
   peachCream,
   quietLight,
+  resolveAxisFontSize,
+  resolveAxisTextColor,
+  resolveCandlestickBodyColor,
   rosePineDawn,
   sandDune,
   solarizedLight,

package/src/ui/Crosshair.tsx

@@ -18,7 +18,7 @@ export function Crosshair() {
     // badge from looking like an opaque block.
     background: `color-mix(in srgb, ${theme.crosshair.labelBackground} 80%, transparent)`,
     color: theme.crosshair.labelTextColor,
-    fontSize: theme.typography.axisFontSize,
+    fontSize: theme.axis.fontSize,
     fontFamily: theme.typography.fontFamily,
     fontVariantNumeric: 'tabular-nums' as const,
     padding: '2px 6px',

package/src/ui/InfoBar.tsx

@@ -10,6 +10,7 @@ import {
   formatCompact,
   formatPriceAdaptive,
   formatTime,
+  resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 
 import { useChartInstance } from '../context';
@@ -145,7 +146,7 @@ export function InfoBar({ sort = 'none', format = defaultInfoBarFormat, children
         if (isOHLC) {
           const ohlc = s.data as OHLCData;
           const isUp = ohlc.close >= ohlc.open;
-          const c = isUp ? theme.candlestick.upColor : theme.candlestick.downColor;
+          const c = resolveCandlestickBodyColor(isUp ? theme.candlestick.up.body : theme.candlestick.down.body);
           return (
             <span key={s.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
               <LegendItem label="O" display={format(ohlc.open, 'open')} color={c} dim={theme.axis.textColor} />

package/src/ui/Legend.tsx

@@ -210,7 +210,7 @@ export function Legend({ items, position = 'bottom', mode = 'toggle', children }
     alignItems: isRight ? 'flex-start' : 'center',
     justifyContent: isRight ? 'flex-start' : 'center',
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.axisFontSize,
+    fontSize: theme.axis.fontSize,
     color: theme.axis.textColor,
     pointerEvents: 'auto',
     flexShrink: 0,

package/src/ui/PieLegend.tsx

@@ -136,7 +136,7 @@ export function PieLegend({ seriesId, mode: modeProp, format, position, children
                 // absolute value → dim + smaller.
                 opacity: mode === 'percent' ? 1 : 0.5,
                 fontWeight: mode === 'percent' ? 600 : 400,
-                fontSize: mode === 'percent' ? theme.typography.fontSize : theme.typography.axisFontSize,
+                fontSize: mode === 'percent' ? theme.typography.fontSize : theme.axis.fontSize,
                 fontVariantNumeric: 'tabular-nums',
                 minWidth: 40,
                 textAlign: 'right',

package/src/ui/Sparkline.tsx

@@ -1,6 +1,6 @@
 import { type CSSProperties, useMemo } from 'react';
 
-import { type ChartTheme, type TimePoint, formatCompact } from '@wick-charts/core';
+import { type ChartTheme, type TimePoint, formatCompact, resolveCandlestickBodyColor } from '@wick-charts/core';
 
 import { BarSeries } from '../BarSeries';
 import { ChartContainer } from '../ChartContainer';
@@ -85,8 +85,10 @@ export function Sparkline({
   const change = useMemo(() => computeChange(data), [data]);
 
   const resolvedColor = color ?? theme.seriesColors[0];
-  const resolvedNegColor = negativeColor ?? theme.candlestick.downColor;
-  const changeColor = change.positive ? theme.candlestick.upColor : theme.candlestick.downColor;
+  const resolvedNegColor = negativeColor ?? resolveCandlestickBodyColor(theme.candlestick.down.body);
+  const changeColor = resolveCandlestickBodyColor(
+    change.positive ? theme.candlestick.up.body : theme.candlestick.down.body,
+  );
 
   const valueBlock = valuePosition !== 'none' && (
     <div
@@ -102,7 +104,7 @@ export function Sparkline({
       {label && (
         <div
           style={{
-            fontSize: theme.typography.axisFontSize,
+            fontSize: theme.axis.fontSize,
             color: theme.axis.textColor,
             lineHeight: 1.2,
             whiteSpace: 'nowrap',
@@ -128,7 +130,7 @@ export function Sparkline({
       {sublabel !== undefined ? (
         <div
           style={{
-            fontSize: theme.typography.axisFontSize - 1,
+            fontSize: theme.axis.fontSize - 1,
             color: theme.axis.textColor,
             lineHeight: 1.2,
             whiteSpace: 'nowrap',
@@ -139,7 +141,7 @@ export function Sparkline({
       ) : (
         <div
           style={{
-            fontSize: theme.typography.axisFontSize - 1,
+            fontSize: theme.axis.fontSize - 1,
             fontWeight: 500,
             color: changeColor,
             lineHeight: 1.2,

package/src/ui/TimeAxis.tsx

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef } from 'react';
 
-import { formatTime } from '@wick-charts/core';
+import { formatTime, resolveAxisFontSize, resolveAxisTextColor } from '@wick-charts/core';
 
 import { useChartInstance } from '../context';
 import { useVisibleRange } from '../store-bridge';
@@ -93,8 +93,8 @@ export function TimeAxis({ labelCount, minLabelSpacing }: TimeAxisProps = {}) {
               position: 'absolute',
               left: x,
               transform: 'translateX(-50%)',
-              color: theme.axis.textColor,
-              fontSize: theme.typography.axisFontSize,
+              color: resolveAxisTextColor(theme, 'x'),
+              fontSize: resolveAxisFontSize(theme, 'x'),
               fontFamily: theme.typography.fontFamily,
               userSelect: 'none',
               whiteSpace: 'nowrap',

package/src/ui/Title.tsx

@@ -53,7 +53,7 @@ export function Title({ children, sub, style }: TitleProps) {
     >
       {children != null && children !== false && <span>{children}</span>}
       {sub != null && sub !== false && (
-        <span style={{ fontWeight: 400, color: theme.axis.textColor, fontSize: theme.typography.axisFontSize }}>
+        <span style={{ fontWeight: 400, color: theme.axis.textColor, fontSize: theme.axis.fontSize }}>
           {sub}
         </span>
       )}

package/src/ui/Tooltip.tsx

@@ -12,6 +12,7 @@ import {
   formatDate,
   formatPriceAdaptive,
   formatTime,
+  resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 
 export { computeTooltipPosition } from '@wick-charts/core';
@@ -183,7 +184,7 @@ function CustomFloatingTooltip({
         padding: '10px 14px',
         boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
         fontFamily: theme.typography.fontFamily,
-        fontSize: theme.typography.tooltipFontSize,
+        fontSize: theme.tooltip.fontSize,
         fontVariantNumeric: 'tabular-nums',
         color: theme.tooltip.textColor,
         width: 'max-content',
@@ -245,7 +246,7 @@ function FloatingTooltip({
         borderRadius: 8,
         padding: '10px 14px',
         boxShadow: shadow,
-        fontSize: theme.typography.tooltipFontSize,
+        fontSize: theme.tooltip.fontSize,
         fontFamily: theme.typography.fontFamily,
         fontVariantNumeric: 'tabular-nums',
         color: theme.tooltip.textColor,
@@ -261,7 +262,7 @@ function FloatingTooltip({
       {/* Time header */}
       <div
         style={{
-          fontSize: theme.typography.axisFontSize,
+          fontSize: theme.axis.fontSize,
           color: theme.axis.textColor,
           marginBottom: 8,
           paddingBottom: 6,
@@ -277,9 +278,9 @@ function FloatingTooltip({
         if (isOHLC) {
           const ohlc = s.data as OHLCData;
           const isUp = ohlc.close >= ohlc.open;
-          const upColor = theme.candlestick.upColor;
-          const downColor = theme.candlestick.downColor;
-          const valColor = isUp ? upColor : downColor;
+          const valColor = resolveCandlestickBodyColor(
+            isUp ? theme.candlestick.up.body : theme.candlestick.down.body,
+          );
           return (
             <div key={s.id} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '4px 12px' }}>
               <TooltipRow label="Open" color={valColor} display={format(ohlc.open, 'open')} />

package/src/ui/YAxis.tsx

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef } from 'react';
 
-import type { ValueFormatter } from '@wick-charts/core';
+import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '@wick-charts/core';
 
 import { useChartInstance } from '../context';
 import { useYRange } from '../store-bridge';
@@ -103,8 +103,8 @@ export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {})
               right: 8,
               top: y,
               transform: 'translateY(-50%)',
-              color: theme.axis.textColor,
-              fontSize: theme.typography.axisFontSize,
+              color: resolveAxisTextColor(theme, 'y'),
+              fontSize: resolveAxisFontSize(theme, 'y'),
               fontFamily: theme.typography.fontFamily,
               fontVariantNumeric: 'tabular-nums',
               userSelect: 'none',

package/src/ui/YLabel.tsx

@@ -152,7 +152,7 @@ export function YLabel({ seriesId, color, format, children }: YLabelProps) {
           zIndex: 3,
           background: bgColor,
           color: theme.yLabel.textColor,
-          fontSize: theme.typography.yFontSize,
+          fontSize: theme.yLabel.fontSize,
           fontFamily: theme.typography.fontFamily,
           padding: '3px 8px',
           borderRadius: 3,