@wick-charts/vue 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.4.0"
+    "@wick-charts/core": "^0.4.2"
   },
   "scripts": {
     "build": "vite build"

package/src/composables.ts

@@ -22,10 +22,20 @@ export function useYRange(chart: ChartInstance): Ref<YRange> {
 }
 
 export function useLastYValue(chart: ChartInstance, seriesId: string): Ref<{ value: number; isLive: boolean } | null> {
-  const val = ref<{ value: number; isLive: boolean } | null>(chart.getLastValue(seriesId));
+  let snapshot = chart.getLastValue(seriesId);
+  // Track the pixel Y the snapshot maps to so a pan/zoom/resize that leaves the
+  // value unchanged but shifts the badge still re-emits — a consumer-positioned
+  // badge reads `yScale.valueToY` off this ref. Comparing prev/next against the
+  // live yScale alone would always be equal.
+  let lastY = snapshot ? chart.yScale.valueToY(snapshot.value) : null;
+  const val = ref<{ value: number; isLive: boolean } | null>(snapshot);
   const handler = () => {
     const next = chart.getLastValue(seriesId);
-    if (val.value?.value === next?.value && val.value?.isLive === next?.isLive) return;
+    const nextY = next ? chart.yScale.valueToY(next.value) : null;
+    if (snapshot?.value === next?.value && snapshot?.isLive === next?.isLive && lastY === nextY) return;
+
+    snapshot = next;
+    lastY = nextY;
     val.value = next;
   };
   onMounted(() => {

package/src/index.ts

@@ -11,17 +11,25 @@
 export type {
   AxisBound,
   AxisConfig,
+  BarPaintArgs,
+  BarPainter,
   BarSeriesOptions,
   /** @deprecated Use {@link StackingMode} instead. */
   BuildHoverSnapshotsArgs,
   BuildLastSnapshotsArgs,
+  CandlePaintArgs,
+  CandlePainter,
   CandlestickSeriesOptions,
   ChartLayout,
   ChartOptions,
   ChartTheme,
+  CornerMask,
   CrosshairPosition,
+  CurveKind,
   HoverInfo,
   LegendItem,
+  LinePaintArgs,
+  LinePainter,
   /** @deprecated Use {@link TimePoint} instead. */
   LineSeriesOptions,
   NavigatorCandlePoint,
@@ -32,8 +40,10 @@ export type {
   NavigatorSeriesType,
   OHLCData,
   OHLCInput,
+  PaintEnv,
   PieSeriesOptions,
   PieSliceData,
+  RoundedRectArgs,
   SeriesSnapshot,
   SeriesType,
   SliceInfo,
@@ -48,6 +58,7 @@ export type {
   TooltipFormatter,
   TooltipPosition,
   TooltipPositionArgs,
+  TracePathArgs,
   Typography,
   ValueFormatter,
   VisibleRange,
@@ -55,6 +66,7 @@ export type {
   YAxisConfig,
   YRange,
 } from '@wick-charts/core';
+// Painters — custom per-element drawing for bar / candle / line series.
 export {
   ChartInstance,
   NavigatorController,
@@ -68,6 +80,7 @@ export {
   createTheme,
   detectInterval,
   dracula,
+  fillRoundedRect,
   formatCompact,
   formatDate,
   formatPriceAdaptive,
@@ -92,8 +105,14 @@ export {
   resolveAxisTextColor,
   resolveCandlestickBodyColor,
   rosePineDawn,
+  roundedBarFill,
+  roundedCandleFill,
   sandDune,
+  smoothCurve,
   solarizedLight,
+  steppedCurve,
+  straightCurve,
+  tracePath,
 } from '@wick-charts/core';
 
 export { default as BarSeries } from './BarSeries.vue';

package/src/ui/Crosshair.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { formatTime } from '@wick-charts/core';
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import { useCrosshairPosition } from '../composables';
 import { useChartInstance } from '../context';
@@ -8,8 +8,33 @@ import { useChartInstance } from '../context';
 const chart = useChartInstance();
 const position = useCrosshairPosition(chart);
 
-const theme = computed(() => chart.getTheme());
+// `setTheme` fires `overlayChange`; bump re-runs the theme computed so the
+// label colors track a runtime theme swap instead of freezing on the
+// first-render snapshot (matches Tooltip/PieTooltip).
+const bump = ref(0);
+const onOverlayChange = () => {
+  bump.value++;
+};
+onMounted(() => chart.on('overlayChange', onOverlayChange));
+onUnmounted(() => chart.off('overlayChange', onOverlayChange));
+
+const theme = computed(() => {
+  void bump.value;
+
+  return chart.getTheme();
+});
 const dataInterval = computed(() => chart.getDataInterval());
+// Format the time pill at the axis's *resolved* tick granularity, not the raw
+// data interval — otherwise a time-of-day badge floats among date labels when
+// zoomed out. `niceTickValues` reads the live visible range, which Vue can't
+// track reactively, so depend on `position` (a wheel-zoom re-emits the
+// crosshair) to re-resolve on zoom — matching React, which recomputes this on
+// every render. Falls back to dataInterval on a degenerate range.
+const tickInterval = computed(() => {
+  void position.value;
+
+  return chart.timeScale.niceTickValues(dataInterval.value).tickInterval || dataInterval.value;
+});
 
 const labelStyle = computed(() => ({
   // Blend the theme's labelBackground at 80% opacity so the axis grid
@@ -54,7 +79,7 @@ const labelStyle = computed(() => ({
         ...labelStyle,
       }"
     >
-      {{ formatTime(position.time, dataInterval) }}
+      {{ formatTime(position.time, tickInterval) }}
     </div>
   </template>
 </template>