@wick-charts/vue 0.5.0 → 0.6.0

package/src/LineSeries.vue

@@ -5,13 +5,21 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
-const props = defineProps<{
-  /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
-  data: MultiLayerData;
-  options?: Partial<LineSeriesOptions>;
-  /** Stable series ID — same value across remounts. */
-  id?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+    data: MultiLayerData;
+    options?: Partial<LineSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
@@ -35,6 +43,7 @@ onMounted(() => {
   prevSync = new Array(layerCount).fill(EMPTY_SYNC_STATE);
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
   applyData(id, props.data);
+  chart.setSeriesVisible(id, props.visible);
 });
 
 onUnmounted(() => {
@@ -60,6 +69,13 @@ watch(
   },
   { deep: true },
 );
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
 </script>
 
 <template><span v-if="false" /></template>

package/src/PieSeries.vue

@@ -5,12 +5,20 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
-const props = defineProps<{
-  data: PieSliceData[];
-  options?: Partial<PieSeriesOptions>;
-  /** Stable series ID — same value across remounts. */
-  id?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    data: PieSliceData[];
+    options?: Partial<PieSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
@@ -22,6 +30,7 @@ onMounted(() => {
   if (props.data.length > 0) {
     chart.setSeriesData(id, props.data);
   }
+  chart.setSeriesVisible(id, props.visible);
 });
 
 onUnmounted(() => {
@@ -46,6 +55,13 @@ watch(
   },
   { deep: true },
 );
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
 </script>
 
 <template><span v-if="false" /></template>

package/src/index.ts

@@ -9,16 +9,32 @@
  */
 
 export type {
+  AnimationTime,
+  AnimationsConfig,
   AxisBound,
   AxisConfig,
+  BarElementTransform,
+  BarEntryAnimation,
+  BarIntroDirectives,
+  BarIntroElement,
+  BarIntroFn,
+  BarIntroFrame,
+  BarIntroValueArgs,
   BarPaintArgs,
   BarPainter,
   BarSeriesOptions,
-  /** @deprecated Use {@link StackingMode} instead. */
+  BaseSeriesRenderer,
+  BitmapCoordinateSpace,
   BuildHoverSnapshotsArgs,
   BuildLastSnapshotsArgs,
+  CandleElementTransform,
+  CandleIntroDirectives,
+  CandleIntroElement,
+  CandleIntroFn,
+  CandleIntroFrame,
   CandlePaintArgs,
   CandlePainter,
+  CandlestickEntryAnimation,
   CandlestickSeriesOptions,
   ChartLayout,
   ChartOptions,
@@ -26,14 +42,28 @@ export type {
   CornerMask,
   CrosshairPosition,
   CurveKind,
+  CustomSpatialSeriesRenderer,
+  EdgeReachedInfo,
+  EdgeSide,
+  EdgeState,
+  HeatmapCellData,
+  HeatmapCellLabelsOptions,
+  HeatmapSeriesOptions,
+  HeatmapSeriesRenderer,
   HoverInfo,
   LegendItem,
+  LineIntroDirectives,
+  LineIntroFn,
+  LineIntroFrame,
+  LineIntroValueArgs,
   LinePaintArgs,
   LinePainter,
-  /** @deprecated Use {@link TimePoint} instead. */
   LineSeriesOptions,
+  LoadingIndicatorArgs,
+  LoadingIndicatorFn,
   MarkerConfig,
   MarkerShape,
+  MultiLayerData,
   NavigatorCandlePoint,
   NavigatorControllerParams,
   NavigatorData,
@@ -42,18 +72,26 @@ export type {
   NavigatorSeriesType,
   OHLCData,
   OHLCInput,
+  OverlayRenderContext,
   PaintEnv,
   PerfConfig,
   PerfMonitorOptions,
   PerfStats,
   PieSeriesOptions,
+  PieSeriesRenderer,
   PieSliceData,
+  PointClickInfo,
   ReferenceLineConfig,
   ReferenceLineOrientation,
   ReferenceLineStyle,
+  RenderPadding,
   RoundedRectArgs,
   SeriesCreateEnv,
   SeriesDefinition,
+  SeriesHoverInfo,
+  SeriesKind,
+  SeriesRenderContext,
+  SeriesRenderer,
   SeriesSnapshot,
   SeriesType,
   SliceInfo,
@@ -61,19 +99,33 @@ export type {
   StackingMode,
   ThemeConfig,
   ThemePreset,
+  TimeFormatOptions,
+  TimeFormatter,
   TimePoint,
   TimePointInput,
   TimeRegionConfig,
   TimeRegionEnd,
+  TimeSeriesRenderer,
+  TimeTickGenerator,
   TimeValue,
   TooltipField,
   TooltipFormatter,
   TooltipPosition,
   TooltipPositionArgs,
   TracePathArgs,
+  Transition,
+  TransitionContext,
+  TransitionFactory,
   Typography,
   ValueFormatter,
+  ValueTickGenerator,
   VisibleRange,
+  VisibleRangeSpec,
+  WaveIntroDirectives,
+  WaveIntroElement,
+  WaveIntroFn,
+  WaveIntroFrame,
+  WaveIntroTransform,
   XAxisConfig,
   YAxisConfig,
   YRange,
@@ -83,56 +135,83 @@ export {
   BarSeriesDef,
   CandlestickSeriesDef,
   ChartInstance,
+  HeatmapSeriesDef,
   LineSeriesDef,
   NavigatorController,
   PerfMonitor,
   PieSeriesDef,
+  XScale,
+  YScale,
   andromeda,
   autoGradient,
   ayuMirage,
+  backfillSweepIntro,
   buildHoverSnapshots,
   buildLastSnapshots,
+  candleUnfoldIntro,
   catppuccin,
+  centerOutIntro,
   computeTooltipPosition,
   createTheme,
+  deepEqual,
   detectInterval,
   dracula,
+  fadeIntro,
   fillRoundedRect,
   formatCompact,
   formatDate,
   formatPriceAdaptive,
   formatTime,
   githubLight,
+  growIntro,
   gruvbox,
   handwritten,
+  hermite,
   highContrast,
+  isDarkBg,
+  isTimeSeriesRenderer,
   lavenderMist,
   lightPink,
   materialPalenight,
   minimalLight,
   mintBreeze,
+  mixColors,
   monokaiPro,
   nightOwl,
   normalizeTime,
   oneDarkPro,
   panda,
+  parseAnimationTime,
   peachCream,
   perfHud,
+  plotterIntro,
   quietLight,
   registerBuiltinSeries,
   registerSeriesDefinition,
   resolveAxisFontSize,
   resolveAxisTextColor,
   resolveCandlestickBodyColor,
+  riseIntro,
   rosePineDawn,
   roundedBarFill,
   roundedCandleFill,
+  sampleRamp,
   sandDune,
+  skeletonLoadingIndicator,
+  skeletonMorphIntro,
   smoothCurve,
+  snap,
   solarizedLight,
+  spring,
+  springIntro,
   steppedCurve,
   straightCurve,
+  sweepIntro,
+  traceIntro,
   tracePath,
+  unfoldIntro,
+  wickBodyIntro,
+  wipeIntro,
 } from '@wick-charts/core';
 
 export { default as BarSeries } from './BarSeries.vue';
@@ -142,9 +221,11 @@ export { default as ChartContainer } from './ChartContainer.vue';
 export { useCrosshairPosition, useLastYValue, usePreviousClose, useVisibleRange, useYRange } from './composables';
 // Composables and context
 export { useChartInstance, useTheme } from './context';
+export { default as HeatmapSeries } from './HeatmapSeries.vue';
 export { default as LineSeries } from './LineSeries.vue';
 export { default as PieSeries } from './PieSeries.vue';
 export { default as Crosshair } from './ui/Crosshair.vue';
+export { default as HeatmapTooltip } from './ui/HeatmapTooltip.vue';
 export { default as InfoBar } from './ui/InfoBar.vue';
 export { default as Legend } from './ui/Legend.vue';
 export { default as Marker } from './ui/Marker.vue';
@@ -153,7 +234,7 @@ export { default as NumberFlow } from './ui/NumberFlow.vue';
 export { default as PieLegend } from './ui/PieLegend.vue';
 export { default as PieTooltip } from './ui/PieTooltip.vue';
 export { default as ReferenceLine } from './ui/ReferenceLine.vue';
-export { default as TimeAxis } from './ui/TimeAxis.vue';
+export { default as TimeAxis, default as XAxis } from './ui/TimeAxis.vue';
 export { default as TimeRegion } from './ui/TimeRegion.vue';
 export { default as Title } from './ui/Title.vue';
 // UI overlays

package/src/ui/Crosshair.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { formatTime } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import { useCrosshairPosition } from '../composables';
@@ -79,7 +78,7 @@ const labelStyle = computed(() => ({
         ...labelStyle,
       }"
     >
-      {{ formatTime(position.time, tickInterval) }}
+      {{ chart.timeScale.formatX(position.time, tickInterval) }}
     </div>
   </template>
 </template>

package/src/ui/HeatmapTooltip.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import {
+  HEATMAP_TOOLTIP_HEIGHT,
+  HEATMAP_TOOLTIP_WIDTH,
+  type HoverInfo,
+  type ValueFormatter,
+  computeTooltipPosition,
+  defaultHeatmapFormat,
+  resolveHeatmapSeriesId,
+} from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /**
+   * Owning series id. **Optional** — when omitted, the first visible heatmap
+   * series is picked.
+   */
+  seriesId?: string;
+  /** Custom formatter for the cell value. Default: plain integers, compact decimals. */
+  format?: ValueFormatter;
+}>();
+
+const effectiveFormat = computed<ValueFormatter>(() => props.format ?? defaultHeatmapFormat);
+
+const chart = useChartInstance();
+const crosshair = useCrosshairPosition(chart);
+
+const bump = ref(0);
+const handler = () => {
+  bump.value++;
+};
+onMounted(() => {
+  chart.on('overlayChange', handler);
+});
+onUnmounted(() => {
+  chart.off('overlayChange', handler);
+});
+
+const theme = computed(() => {
+  // `setTheme` fires `overlayChange`; read `bump` so this computed picks up
+  // runtime theme swaps instead of freezing on the first-render snapshot.
+  void bump.value;
+
+  return chart.getTheme();
+});
+const resolvedId = computed<string | null>(() => {
+  void bump.value;
+
+  return resolveHeatmapSeriesId(chart, props.seriesId);
+});
+
+const info = computed<HoverInfo | null>(() => {
+  void crosshair.value;
+  void bump.value;
+  if (resolvedId.value === null) return null;
+
+  return chart.getHoverInfo(resolvedId.value);
+});
+
+const meterWidth = computed(() => {
+  if (!info.value) return 0;
+
+  return Math.max(2, Math.min(100, info.value.percent));
+});
+
+const tooltipPos = computed(() => {
+  if (!crosshair.value || !info.value) return null;
+  const mediaSize = chart.getMediaSize();
+
+  return computeTooltipPosition({
+    x: crosshair.value.mediaX,
+    y: crosshair.value.mediaY,
+    chartWidth: mediaSize.width,
+    chartHeight: mediaSize.height,
+    tooltipWidth: HEATMAP_TOOLTIP_WIDTH,
+    tooltipHeight: HEATMAP_TOOLTIP_HEIGHT,
+    offsetX: 16,
+    offsetY: 16,
+  });
+});
+</script>
+
+<template>
+  <div
+    v-if="info && crosshair && tooltipPos"
+    :style="{
+      position: 'absolute',
+      left: tooltipPos.left + 'px',
+      top: tooltipPos.top + 'px',
+      pointerEvents: 'none',
+      background: theme.tooltip.background,
+      backdropFilter: 'blur(12px)',
+      WebkitBackdropFilter: 'blur(12px)',
+      border: '1px solid ' + theme.tooltip.borderColor,
+      borderRadius: '8px',
+      padding: '10px 14px',
+      boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
+      fontSize: theme.typography.fontSize + 'px',
+      fontFamily: theme.typography.fontFamily,
+      color: theme.tooltip.textColor,
+      zIndex: 10,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6px',
+      minWidth: '120px',
+    }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '8px' }">
+      <span
+        :style="{
+          width: '10px',
+          height: '10px',
+          borderRadius: '3px',
+          background: info.color,
+          flexShrink: 0,
+        }"
+      />
+      <span :style="{ fontWeight: 600 }">{{ info.label }}</span>
+      <span :style="{ marginLeft: 'auto', fontWeight: 600 }">{{ effectiveFormat(info.value) }}</span>
+    </div>
+    <div
+      :style="{
+        position: 'relative',
+        height: '4px',
+        borderRadius: '2px',
+        background: theme.tooltip.borderColor,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          position: 'absolute',
+          inset: '0',
+          width: meterWidth + '%',
+          borderRadius: '2px',
+          background: info.color,
+        }"
+      />
+    </div>
+  </div>
+</template>

package/src/ui/InfoBar.vue

@@ -9,7 +9,6 @@ import {
   buildLastSnapshots,
   formatCompact,
   formatPriceAdaptive,
-  formatTime,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
@@ -140,7 +139,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
       <slot v-if="hasCustomSlot" :snapshots="snapshots" :time="displayTime" :is-hover="isHover" />
       <template v-else>
         <span :style="{ color: theme.axis.textColor, marginRight: '2px' }">
-          {{ formatTime(displayTime, dataInterval) }}
+          {{ chart.timeScale.formatX(displayTime, dataInterval) }}
         </span>
         <template v-for="s in snapshots" :key="s.id">
           <span v-if="isOHLC(s.data)" :style="{ display: 'inline-flex', alignItems: 'center', gap: '4px' }">

package/src/ui/Legend.vue

@@ -17,12 +17,22 @@ export interface LegendItemOverride {
 
 type LegendMode = 'toggle' | 'isolate' | 'solo';
 
+/** Payload for the `onToggle` prop — one entry per user click, regardless of built-in vs custom rendering. */
+export interface LegendToggleInfo {
+  /** The clicked item's id (matches {@link LegendItem.id}). */
+  id: string;
+  /** Which interaction produced this change. */
+  action: 'toggle' | 'isolate' | 'unisolate';
+}
+
 const props = withDefaults(
   defineProps<{
     items?: LegendItemOverride[];
     position?: 'bottom' | 'right';
     /** `'isolate'` shows only the clicked item; `'solo'` is a @deprecated alias. */
     mode?: LegendMode;
+    /** Fired after a click changes series visibility — via the built-in UI or a custom slot calling `item.toggle()`/`isolate()` directly. */
+    onToggle?: (info: LegendToggleInfo) => void;
   }>(),
   {
     position: 'bottom',
@@ -87,6 +97,7 @@ function makeItem(args: MakeItemArgs): LegendItem {
     } else {
       chart.setSeriesVisible(seriesId, !chart.isSeriesVisible(seriesId));
     }
+    props.onToggle?.({ id, action: 'toggle' });
   };
 
   const isolate = () => {
@@ -101,6 +112,7 @@ function makeItem(args: MakeItemArgs): LegendItem {
         }
       });
       isolatedId.value = null;
+      props.onToggle?.({ id, action: 'unisolate' });
 
       return;
     }
@@ -119,6 +131,7 @@ function makeItem(args: MakeItemArgs): LegendItem {
       }
     });
     isolatedId.value = id;
+    props.onToggle?.({ id, action: 'isolate' });
   };
 
   return { id, seriesId, layerIndex, label, color, isDisabled, toggle, isolate };

package/src/ui/Marker.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
   shape?: MarkerShape;
   /** Reuse the line pulse halo around the anchor. Default: `false`. */
   pulse?: boolean;
-  /** Optional text label drawn in a pill next to the anchor. */
+  /** Optional text label drawn as a callout chip whose tail points at the anchor. */
   label?: string;
   /** Color override. Falls back to the series color (when `seriesId` is set), then the theme line color. */
   color?: string;

package/src/ui/PieTooltip.vue

@@ -188,6 +188,16 @@ const tooltipPos = computed(() => {
       left: tooltipPos.left + 'px',
       top: tooltipPos.top + 'px',
       pointerEvents: 'none',
+      background: theme.tooltip.background,
+      backdropFilter: 'blur(12px)',
+      WebkitBackdropFilter: 'blur(12px)',
+      border: '1px solid ' + theme.tooltip.borderColor,
+      borderRadius: '8px',
+      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.fontSize + 'px',
+      color: theme.tooltip.textColor,
       zIndex: 10,
       width: 'max-content',
       maxWidth: chart.getMediaSize().width + 'px',

package/src/ui/ReferenceLine.vue

@@ -9,9 +9,9 @@ const props = defineProps<{
   value?: number;
   /** Vertical line at this `time` (epoch ms or `Date`). Mutually exclusive with `value`. */
   time?: TimeValue;
-  /** Line and label-pill color. Default: the theme line color. */
+  /** Line and label-chip accent color. Default: the theme line color. */
   color?: string;
-  /** Optional text label drawn in a pill at the line's near end. */
+  /** Optional text label drawn in an annotation chip at the line's near end. */
   label?: string;
   /** Dash style. Default: `'dashed'`. */
   style?: ReferenceLineStyle;

package/src/ui/TimeRegion.vue

@@ -11,9 +11,9 @@ const props = defineProps<{
   to?: TimeRegionEnd;
   /** Band fill — any CSS color, typically translucent. Default: a faint tint of `color`. */
   fill?: string;
-  /** Optional text label drawn in a pill at the top of the band. */
+  /** Optional text label drawn in an annotation chip at the top of the band. */
   label?: string;
-  /** Edge-line and label-pill accent. Default: the theme's muted axis text color. */
+  /** Edge-line and label-chip accent. Default: the theme's muted axis text color. */
   color?: string;
 }>();
 

package/src/ui/Tooltip.vue

@@ -10,7 +10,6 @@ import {
   formatCompact,
   formatDate,
   formatPriceAdaptive,
-  formatTime,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
@@ -178,7 +177,8 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
         letterSpacing: '0.02em',
       }"
     >
-      {{ formatDate(displayTime) }} {{ formatTime(displayTime, dataInterval) }}
+      {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
+      {{ chart.timeScale.formatX(displayTime, dataInterval) }}
     </div>
 
     <template v-for="s in snapshots" :key="s.id">