@wick-charts/vue 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.2.2",
+  "version": "0.2.3",
+  "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mo4islona/wick-charts.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://mo4islona.github.io/wick-charts/",
+  "bugs": "https://github.com/mo4islona/wick-charts/issues",
+  "keywords": [
+    "charts",
+    "charting",
+    "canvas",
+    "candlestick",
+    "line-chart",
+    "bar-chart",
+    "pie-chart",
+    "timeseries",
+    "vue",
+    "visualization"
+  ],
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -11,7 +32,11 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "LICENSE",
+    "!src/__tests__",
+    "!src/**/*.test.*"
   ],
   "publishConfig": {
     "access": "public"
@@ -20,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.2.2"
+    "@wick-charts/core": "^0.2.3"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { BarSeriesOptions, TimePoint } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = defineProps<{
+  data: TimePoint[][];
+  options?: Partial<BarSeriesOptions>;
+  /** Stable series ID — same value across remounts. */
+  id?: string;
+}>();
+
+const chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+
+onMounted(() => {
+  const id = chart.addBarSeries({
+    ...props.options,
+    layers: props.data.length,
+    id: props.id,
+  });
+  seriesId.value = id;
+  // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
+  chart.batch(() => {
+    for (let i = 0; i < props.data.length; i++) {
+      chart.setSeriesData(id, props.data[i], i);
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    if (!seriesId.value) return;
+    chart.batch(() => {
+      for (let i = 0; i < data.length; i++) {
+        chart.setSeriesData(seriesId.value!, data[i], i);
+      }
+    });
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/CandlestickSeries.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { CandlestickSeriesOptions, OHLCInput } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = defineProps<{
+  data: OHLCInput[];
+  options?: Partial<CandlestickSeriesOptions>;
+  /** Stable series ID — same value across remounts. */
+  id?: string;
+}>();
+
+const chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+let prevLen = 0;
+
+onMounted(() => {
+  const id = chart.addCandlestickSeries({ ...props.options, id: props.id });
+  seriesId.value = id;
+  // Initial data load — Vue's `watch` is lazy by default, so the watcher
+  // below only fires on subsequent `data` prop mutations. Explicitly apply
+  // the first value here so components with static data render immediately.
+  if (props.data.length > 0) {
+    chart.setSeriesData(id, props.data);
+    prevLen = props.data.length;
+  }
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    const id = seriesId.value;
+    if (!id) return;
+
+    if (data.length === 0) {
+      chart.setSeriesData(id, []);
+      prevLen = 0;
+      return;
+    }
+
+    if (prevLen === 0 || data.length < prevLen || data.length - prevLen > 5) {
+      chart.setSeriesData(id, data);
+    } else if (data.length === prevLen) {
+      chart.updateData(id, data[data.length - 1]);
+    } else {
+      for (let i = prevLen; i < data.length; i++) {
+        chart.appendData(id, data[i]);
+      }
+    }
+
+    prevLen = data.length;
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/ChartContainer.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { type AxisConfig, ChartInstance, type ChartTheme, darkTheme } from '@wick-charts/core';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
+
+import { ChartKey, InfoBarAnchorKey, LegendAnchorKey, LegendRightAnchorKey, ThemeKey, TitleAnchorKey } from './context';
+
+const props = withDefaults(
+  defineProps<{
+    theme?: ChartTheme;
+    axis?: AxisConfig;
+    /** Background grid configuration. Default: `{ visible: true }`. */
+    grid?: { visible: boolean };
+  }>(),
+  {
+    theme: () => darkTheme,
+  },
+);
+
+const containerRef = ref<HTMLDivElement>();
+const chart = shallowRef<ChartInstance | null>(null);
+const themeRef = shallowRef<ChartTheme>(props.theme);
+
+// Anchors for hoisted overlays. Title / InfoBar teleport into a top
+// overlay anchor that is positioned *absolute* at the top of the canvas
+// block, so the canvas (and its grid) spans the full container height. The
+// combined anchor height is measured and fed into `chart.setPadding({ top })`
+// so data stays below the header.
+const topOverlayRef = ref<HTMLElement | null>(null);
+const titleAnchor = ref<HTMLElement | null>(null);
+const infoBarAnchor = ref<HTMLElement | null>(null);
+const legendAnchor = ref<HTMLElement | null>(null);
+const legendRightAnchor = ref<HTMLElement | null>(null);
+
+provide(ChartKey, chart);
+provide(ThemeKey, themeRef);
+provide(TitleAnchorKey, titleAnchor);
+provide(InfoBarAnchorKey, infoBarAnchor);
+provide(LegendAnchorKey, legendAnchor);
+provide(LegendRightAnchorKey, legendRightAnchor);
+
+let resizeObserver: ResizeObserver | null = null;
+let topOverlayHeight = 0;
+
+function applyPadding() {
+  if (!chart.value) return;
+  chart.value.setPadding({ top: 20 + topOverlayHeight });
+}
+
+onMounted(async () => {
+  if (!containerRef.value) return;
+  const options: any = {};
+  if (props.axis) options.axis = props.axis;
+  if (props.theme) options.theme = props.theme;
+  if (props.grid !== undefined) options.grid = props.grid;
+  chart.value = new ChartInstance(containerRef.value, options);
+
+  await nextTick();
+  if (!topOverlayRef.value) return;
+  const measure = () => {
+    topOverlayHeight = topOverlayRef.value?.getBoundingClientRect().height ?? 0;
+    applyPadding();
+  };
+  measure();
+  resizeObserver = new ResizeObserver(measure);
+  resizeObserver.observe(topOverlayRef.value);
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  chart.value?.destroy();
+  chart.value = null;
+});
+
+watch(
+  () => props.theme,
+  (newTheme) => {
+    if (chart.value && newTheme) {
+      chart.value.setTheme(newTheme);
+      themeRef.value = newTheme;
+    }
+  },
+);
+
+watch(
+  () => props.axis,
+  (newAxis) => {
+    if (chart.value && newAxis) chart.value.setAxis(newAxis);
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.grid?.visible,
+  () => {
+    if (chart.value && props.grid !== undefined) chart.value.setGrid(props.grid);
+  },
+);
+
+const rootStyle = computed(() => {
+  const t = themeRef.value;
+  const [gtop, gbot] = t?.chartGradient ?? ['transparent', 'transparent'];
+  const bg = t?.background ?? 'transparent';
+  return (
+    'position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; ' +
+    `background: linear-gradient(to bottom, ${gtop} 0%, ${bg} 70%, ${gbot} 100%)`
+  );
+});
+</script>
+
+<template>
+  <div :style="rootStyle">
+    <div style="display: flex; flex-direction: row; flex: 1; min-height: 0">
+      <div
+        ref="containerRef"
+        style="position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden"
+      >
+        <!-- Top overlay (Title + InfoBar) — stacked absolute inside the
+             canvas block so the grid extends full-height behind them. -->
+        <div
+          ref="topOverlayRef"
+          data-chart-top-overlay=""
+          style="position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column"
+        >
+          <div ref="titleAnchor" data-chart-title-anchor="" />
+          <div ref="infoBarAnchor" data-tooltip-legend-anchor="" />
+        </div>
+        <div
+          v-if="chart"
+          data-chart-series-overlay=""
+          style="position: absolute; inset: 0; pointer-events: none; z-index: 3"
+        >
+          <slot />
+        </div>
+      </div>
+      <div ref="legendRightAnchor" data-legend-right-anchor="" style="flex: 0 0 auto" />
+    </div>
+    <div ref="legendAnchor" data-legend-anchor="" style="flex: 0 0 auto" />
+  </div>
+</template>
+

package/src/LineSeries.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { LineSeriesOptions, TimePoint } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = defineProps<{
+  data: TimePoint[][];
+  options?: Partial<LineSeriesOptions>;
+  /** Stable series ID — same value across remounts. */
+  id?: string;
+}>();
+
+const chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+
+onMounted(() => {
+  const id = chart.addLineSeries({
+    ...props.options,
+    layers: props.data.length,
+    id: props.id,
+  });
+  seriesId.value = id;
+  // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
+  chart.batch(() => {
+    for (let i = 0; i < props.data.length; i++) {
+      chart.setSeriesData(id, props.data[i], i);
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    if (!seriesId.value) return;
+    chart.batch(() => {
+      for (let i = 0; i < data.length; i++) {
+        chart.setSeriesData(seriesId.value!, data[i], i);
+      }
+    });
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/PieSeries.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PieSeriesOptions, PieSliceData } from '@wick-charts/core';
+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 chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+
+onMounted(() => {
+  const id = chart.addPieSeries({ ...props.options, id: props.id });
+  seriesId.value = id;
+  // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
+  if (props.data.length > 0) {
+    chart.setSeriesData(id, props.data);
+  }
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    if (seriesId.value && data.length > 0) {
+      chart.setSeriesData(seriesId.value, data);
+    }
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/composables.ts

@@ -0,0 +1,60 @@
+import type { ChartInstance, CrosshairPosition, VisibleRange, YRange } from '@wick-charts/core';
+import { type Ref, onMounted, onUnmounted, ref } from 'vue';
+
+export function useVisibleRange(chart: ChartInstance): Ref<VisibleRange> {
+  const range = ref<VisibleRange>(chart.getVisibleRange()) as Ref<VisibleRange>;
+  const handler = () => {
+    range.value = chart.getVisibleRange();
+  };
+  onMounted(() => chart.on('viewportChange', handler));
+  onUnmounted(() => chart.off('viewportChange', handler));
+  return range;
+}
+
+export function useYRange(chart: ChartInstance): Ref<YRange> {
+  const range = ref<YRange>(chart.getYRange()) as Ref<YRange>;
+  const handler = () => {
+    range.value = chart.getYRange();
+  };
+  onMounted(() => chart.on('viewportChange', handler));
+  onUnmounted(() => chart.off('viewportChange', handler));
+  return range;
+}
+
+export function useLastYValue(chart: ChartInstance, seriesId: string): Ref<{ value: number; isLive: boolean } | null> {
+  const val = ref<{ value: number; isLive: boolean } | null>(chart.getLastValue(seriesId));
+  const handler = () => {
+    const next = chart.getLastValue(seriesId);
+    if (val.value?.value === next?.value && val.value?.isLive === next?.isLive) return;
+    val.value = next;
+  };
+  onMounted(() => {
+    chart.on('dataUpdate', handler);
+    chart.on('viewportChange', handler);
+  });
+  onUnmounted(() => {
+    chart.off('dataUpdate', handler);
+    chart.off('viewportChange', handler);
+  });
+  return val;
+}
+
+export function usePreviousClose(chart: ChartInstance, seriesId: string): Ref<number | null> {
+  const price = ref<number | null>(chart.getPreviousClose(seriesId));
+  const handler = () => {
+    price.value = chart.getPreviousClose(seriesId);
+  };
+  onMounted(() => chart.on('dataUpdate', handler));
+  onUnmounted(() => chart.off('dataUpdate', handler));
+  return price;
+}
+
+export function useCrosshairPosition(chart: ChartInstance): Ref<CrosshairPosition | null> {
+  const pos = ref<CrosshairPosition | null>(chart.getCrosshairPosition()) as Ref<CrosshairPosition | null>;
+  const handler = () => {
+    pos.value = chart.getCrosshairPosition();
+  };
+  onMounted(() => chart.on('crosshairMove', handler));
+  onUnmounted(() => chart.off('crosshairMove', handler));
+  return pos;
+}

package/src/context.ts

@@ -0,0 +1,31 @@
+import type { ChartInstance, ChartTheme } from '@wick-charts/core';
+import { type InjectionKey, type Ref, type ShallowRef, inject } from 'vue';
+
+export const ChartKey: InjectionKey<ShallowRef<ChartInstance | null>> = Symbol('wick-chart');
+export const ThemeKey: InjectionKey<ShallowRef<ChartTheme>> = Symbol('wick-theme');
+
+/**
+ * DOM anchor for a hoisted overlay component (Title, InfoBar, Legend).
+ * The child component teleports its output into the anchor the container
+ * provides, so the chart owns its own header / info-bar / footer layout.
+ */
+export const TitleAnchorKey: InjectionKey<Ref<HTMLElement | null>> = Symbol('wick-title-anchor');
+export const InfoBarAnchorKey: InjectionKey<Ref<HTMLElement | null>> = Symbol('wick-info-bar-anchor');
+export const LegendAnchorKey: InjectionKey<Ref<HTMLElement | null>> = Symbol('wick-legend-anchor');
+export const LegendRightAnchorKey: InjectionKey<Ref<HTMLElement | null>> = Symbol('wick-legend-right-anchor');
+
+export function useChartInstance(): ChartInstance {
+  const chartRef = inject(ChartKey);
+  if (!chartRef || !chartRef.value) {
+    throw new Error('useChartInstance must be used within <ChartContainer>');
+  }
+  return chartRef.value;
+}
+
+export function useTheme(): ShallowRef<ChartTheme> {
+  const themeRef = inject(ThemeKey);
+  if (!themeRef) {
+    throw new Error('useTheme must be used within <ChartContainer>');
+  }
+  return themeRef;
+}

package/src/index.ts

@@ -0,0 +1,104 @@
+// Re-export core
+
+export type {
+  AxisBound,
+  AxisConfig,
+  BarSeriesOptions,
+  /** @deprecated Use {@link StackingMode} instead. */
+  BarStacking,
+  BuildHoverSnapshotsArgs,
+  BuildLastSnapshotsArgs,
+  CandlestickSeriesOptions,
+  ChartLayout,
+  ChartOptions,
+  ChartTheme,
+  CrosshairPosition,
+  HoverInfo,
+  LegendItem,
+  /** @deprecated Use {@link TimePoint} instead. */
+  LineData,
+  LineSeriesOptions,
+  OHLCData,
+  OHLCInput,
+  PieSeriesOptions,
+  PieSliceData,
+  SeriesSnapshot,
+  SeriesType,
+  SliceInfo,
+  SnapshotSort,
+  StackingMode,
+  ThemeConfig,
+  ThemePreset,
+  TimePoint,
+  TimePointInput,
+  TimeValue,
+  TooltipField,
+  TooltipFormatter,
+  TooltipPosition,
+  TooltipPositionArgs,
+  Typography,
+  ValueFormatter,
+  VisibleRange,
+  XAxisConfig,
+  YAxisConfig,
+  YRange,
+} from '@wick-charts/core';
+export {
+  ChartInstance,
+  andromeda,
+  ayuMirage,
+  buildHoverSnapshots,
+  buildLastSnapshots,
+  catppuccin,
+  computeTooltipPosition,
+  createTheme,
+  darkTheme,
+  detectInterval,
+  dracula,
+  formatCompact,
+  formatDate,
+  formatPriceAdaptive,
+  formatTime,
+  githubLight,
+  gruvbox,
+  handwritten,
+  highContrast,
+  lavenderMist,
+  lightPink,
+  lightTheme,
+  materialPalenight,
+  minimalLight,
+  mintBreeze,
+  monokaiPro,
+  nightOwl,
+  normalizeTime,
+  oneDarkPro,
+  panda,
+  peachCream,
+  quietLight,
+  rosePineDawn,
+  sandDune,
+  solarizedLight,
+} from '@wick-charts/core';
+
+export { default as BarSeries } from './BarSeries.vue';
+export { default as CandlestickSeries } from './CandlestickSeries.vue';
+// Vue components
+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 LineSeries } from './LineSeries.vue';
+export { default as PieSeries } from './PieSeries.vue';
+export { default as Crosshair } from './ui/Crosshair.vue';
+export { default as InfoBar } from './ui/InfoBar.vue';
+export { default as Legend } from './ui/Legend.vue';
+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 TimeAxis } from './ui/TimeAxis.vue';
+export { default as Title } from './ui/Title.vue';
+// UI overlays
+export { default as Tooltip } from './ui/Tooltip.vue';
+export { default as YAxis } from './ui/YAxis.vue';
+export { default as YLabel } from './ui/YLabel.vue';

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // biome-ignore lint/suspicious/noExplicitAny: standard Vue SFC shim
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}

package/src/ui/Crosshair.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { formatTime } from '@wick-charts/core';
+import { computed } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { useChartInstance } from '../context';
+
+const chart = useChartInstance();
+const position = useCrosshairPosition(chart);
+
+const theme = computed(() => chart.getTheme());
+const dataInterval = computed(() => chart.getDataInterval());
+
+const labelStyle = computed(() => ({
+  // Blend the theme's labelBackground at 80% opacity so the axis grid
+  // shows through — keeps the badge from looking like an opaque block
+  // while still masking whatever tick sits underneath.
+  background: `color-mix(in srgb, ${theme.value.crosshair.labelBackground} 80%, transparent)`,
+  color: theme.value.crosshair.labelTextColor,
+  fontSize: theme.value.typography.axisFontSize + 'px',
+  fontFamily: theme.value.typography.fontFamily,
+  fontVariantNumeric: 'tabular-nums' as const,
+  padding: '2px 6px',
+  borderRadius: '2px',
+  whiteSpace: 'nowrap' as const,
+  pointerEvents: 'none' as const,
+  // Sit above axis ticks (z:0) but below the YLabel badge (z:3) so the
+  // live last-value stays visible when the crosshair crosses its row.
+  zIndex: 2,
+}));
+</script>
+
+<template>
+  <template v-if="position">
+    <!-- Y label on right axis -->
+    <div
+      :style="{
+        position: 'absolute',
+        right: '0',
+        top: position.mediaY + 'px',
+        transform: 'translateY(-50%)',
+        ...labelStyle,
+      }"
+    >
+      {{ chart.yScale.formatY(position.y) }}
+    </div>
+    <!-- Time label on bottom axis -->
+    <div
+      :style="{
+        position: 'absolute',
+        bottom: '0',
+        left: position.mediaX + 'px',
+        transform: 'translateX(-50%)',
+        ...labelStyle,
+      }"
+    >
+      {{ formatTime(position.time, dataInterval) }}
+    </div>
+  </template>
+</template>