@wick-charts/vue 0.4.2 → 0.5.0

package/dist/ui/Tooltip.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Tooltip.vue.js";
+export {
+  f as default
+};

package/dist/ui/YAxis.vue.js

@@ -0,0 +1,42 @@
+import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as f, createElementBlock as b, normalizeStyle as y, unref as u } from "vue";
+import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
+import { useChartInstance as h } from "../context.js";
+const _ = /* @__PURE__ */ m({
+  __name: "YAxis",
+  props: {
+    format: { type: Function },
+    labelCount: {},
+    minLabelSpacing: {}
+  },
+  setup(c) {
+    const e = c, n = h(), t = p(null), a = () => n.yScale.setFormat(e.format ?? null);
+    r(a), s(() => e.format, a), o(() => n.yScale.setFormat(null));
+    const i = () => {
+      n.setYAxisLabelDensity({
+        labelCount: e.labelCount ?? null,
+        minLabelSpacing: e.minLabelSpacing ?? null
+      });
+    };
+    i(), s(() => [e.labelCount, e.minLabelSpacing], i), o(() => n.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+    let l = null;
+    return r(() => {
+      t.value !== null && (l = x({ chart: n, container: t.value, axis: "y" }));
+    }), o(() => {
+      l?.(), l = null;
+    }), (L, S) => (f(), b("div", {
+      ref_key: "containerRef",
+      ref: t,
+      style: y({
+        position: "absolute",
+        right: "0",
+        top: "0",
+        bottom: u(n).xAxisHeight + "px",
+        width: u(n).yAxisWidth + "px",
+        pointerEvents: "none"
+      })
+    }, null, 4));
+  }
+});
+export {
+  _ as default
+};

package/dist/ui/YAxis.vue2.js

@@ -0,0 +1,4 @@
+import f from "./YAxis.vue.js";
+export {
+  f as default
+};

package/dist/ui/YLabel.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as B, useSlots as F, computed as n, ref as _, onMounted as T, onUnmounted as z, openBlock as h, createElementBlock as b, Fragment as x, renderSlot as Y, createElementVNode as C, normalizeStyle as L, unref as E, createVNode as N, createCommentVNode as V } from "vue";
+import { useChartInstance as D } from "../context.js";
+import O from "./NumberFlow.vue.js";
+const A = /* @__PURE__ */ B({
+  __name: "YLabel",
+  props: {
+    seriesId: {},
+    color: {},
+    format: { type: Function }
+  },
+  setup(S) {
+    const u = S, e = D(), k = F(), I = n(() => typeof k.default == "function"), r = _(0), i = () => {
+      r.value++;
+    };
+    T(() => {
+      e.setYLabel(!0), e.on("overlayChange", i), e.on("viewportChange", i), e.getSeriesIds().length > 0 && r.value++;
+    }), z(() => {
+      e.setYLabel(!1), e.off("overlayChange", i), e.off("viewportChange", i);
+    });
+    function w(a, l) {
+      if (l !== void 0) return l;
+      const g = a.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
+      if (g.length > 0) return g[0];
+      const y = a.getSeriesIdsByType("time", { visibleOnly: !0 });
+      return y.length > 0 ? y[0] : null;
+    }
+    const s = n(() => (r.value, w(e, u.seriesId))), t = n(() => (r.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), v = n(() => (r.value, s.value !== null ? e.getPreviousClose(s.value) : null)), o = n(() => (r.value, e.getTheme())), c = n(() => (r.value, t.value === null ? 0 : e.yScale.valueToY(t.value.value))), f = n(() => t.value === null || v.value === null ? "neutral" : t.value.value > v.value ? "up" : t.value.value < v.value ? "down" : "neutral"), d = n(() => {
+      if (t.value === null) return o.value.yLabel.neutralBackground;
+      if (!t.value.isLive) return o.value.axis.textColor;
+      if (u.color) return u.color;
+      switch (f.value) {
+        case "up":
+          return o.value.yLabel.upBackground;
+        case "down":
+          return o.value.yLabel.downBackground;
+        default:
+          return o.value.yLabel.neutralBackground;
+      }
+    }), m = n(() => {
+      r.value;
+      const a = e.yScale.getRange(), l = a.max - a.min;
+      return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
+    }), p = n(() => {
+      if (u.format) return u.format;
+      const a = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: m.value,
+        maximumFractionDigits: m.value,
+        useGrouping: !1
+      });
+      return (l) => a.format(l);
+    });
+    return (a, l) => t.value !== null ? (h(), b(x, { key: 0 }, [
+      I.value ? Y(a.$slots, "default", {
+        key: 0,
+        value: t.value.value,
+        y: c.value,
+        bgColor: d.value,
+        isLive: t.value.isLive,
+        direction: f.value,
+        format: p.value
+      }) : (h(), b(x, { key: 1 }, [
+        C("div", {
+          style: L({
+            position: "absolute",
+            left: "0",
+            right: E(e).yAxisWidth + "px",
+            top: c.value + "px",
+            height: "0",
+            borderTop: "1px dashed " + d.value,
+            opacity: 0.5,
+            pointerEvents: "none",
+            zIndex: 2
+          })
+        }, null, 4),
+        C("div", {
+          style: L({
+            position: "absolute",
+            right: "4px",
+            top: c.value + "px",
+            transform: "translateY(-50%)",
+            pointerEvents: "auto",
+            zIndex: 3,
+            background: d.value,
+            color: o.value.yLabel.textColor,
+            fontSize: o.value.yLabel.fontSize + "px",
+            fontFamily: o.value.typography.fontFamily,
+            padding: "3px 8px",
+            borderRadius: "3px",
+            whiteSpace: "nowrap",
+            transition: "background-color 0.3s ease"
+          })
+        }, [
+          N(O, {
+            value: t.value.value,
+            format: p.value,
+            "spin-duration": 350
+          }, null, 8, ["value", "format"])
+        ], 4)
+      ], 64))
+    ], 64)) : V("", !0);
+  }
+});
+export {
+  A as default
+};

package/dist/ui/YLabel.vue2.js

@@ -0,0 +1,4 @@
+import f from "./YLabel.vue.js";
+export {
+  f as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "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.2"
+    "@wick-charts/core": "^0.5.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { BarSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { BarSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-charts/core';
+import { BarSeriesDef, EMPTY_SYNC_STATE, syncLayers, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: TimePoint[][];
+  /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+  data: MultiLayerData;
   options?: Partial<BarSeriesOptions>;
   /** Stable series ID — same value across remounts. */
   id?: string;
@@ -15,25 +16,23 @@ const props = defineProps<{
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 // Per-layer sync state — drives the shared append/keepLast/update/replace
-// reconciliation so streaming eases instead of snapping Y every tick.
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
 let prevSync: SeriesSyncState[] = [];
 
-function applyData(id: string, data: TimePoint[][]): void {
-  chart.batch(() => {
-    for (let i = 0; i < data.length; i++) {
-      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
-    }
-  });
+function applyData(id: string, data: MultiLayerData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
 onMounted(() => {
-  const id = chart.addSeries('bar', {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(BarSeriesDef, {
     ...props.options,
-    layers: props.data.length,
+    layers: layerCount,
     id: props.id,
   });
   seriesId.value = id;
-  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
+  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);
 });

package/src/CandlestickSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { CandlestickSeriesOptions, OHLCInput, SeriesSyncState } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { CandlestickData, CandlestickSeriesOptions, OHLCInput, SeriesSyncState } from '@wick-charts/core';
+import { CandlestickSeriesDef, EMPTY_SYNC_STATE, syncSeriesLayer, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: OHLCInput[];
+  /** Flat `OHLCInput[]`, or `{ label, data }` to name the stream. */
+  data: CandlestickData;
   options?: Partial<CandlestickSeriesOptions>;
   /** Stable series ID — same value across remounts. */
   id?: string;
@@ -19,13 +20,23 @@ const seriesId = ref<string | null>(null);
 // burst takes the smooth append path, matching React's 20-candle threshold).
 let prevSync: SeriesSyncState = EMPTY_SYNC_STATE;
 
+function applyData(id: string, data: CandlestickData): void {
+  const layer = toLayers<OHLCInput>(data)[0];
+  chart.setSeriesLabels(id, [layer.label]);
+  prevSync = syncSeriesLayer({ chart, id, data: layer.data, prev: prevSync });
+}
+
 onMounted(() => {
-  const id = chart.addSeries('candlestick', { ...props.options, id: props.id });
+  const id = chart.addSeries(CandlestickSeriesDef, {
+    ...props.options,
+    id: props.id,
+    label: toLayers<OHLCInput>(props.data)[0].label,
+  });
   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.
-  prevSync = syncSeriesLayer({ chart, id, data: props.data, prev: prevSync });
+  applyData(id, props.data);
 });
 
 onUnmounted(() => {
@@ -38,7 +49,7 @@ watch(
     const id = seriesId.value;
     if (!id) return;
 
-    prevSync = syncSeriesLayer({ chart, id, data, prev: prevSync });
+    applyData(id, data);
   },
 );
 

package/src/LineSeries.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { LineSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
-import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
+import type { LineSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-charts/core';
+import { EMPTY_SYNC_STATE, LineSeriesDef, syncLayers, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
 const props = defineProps<{
-  data: TimePoint[][];
+  /** 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;
@@ -15,25 +16,23 @@ const props = defineProps<{
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 // Per-layer sync state — drives the shared append/keepLast/update/replace
-// reconciliation so streaming eases instead of snapping Y every tick.
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
 let prevSync: SeriesSyncState[] = [];
 
-function applyData(id: string, data: TimePoint[][]): void {
-  chart.batch(() => {
-    for (let i = 0; i < data.length; i++) {
-      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
-    }
-  });
+function applyData(id: string, data: MultiLayerData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
 onMounted(() => {
-  const id = chart.addSeries('line', {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(LineSeriesDef, {
     ...props.options,
-    layers: props.data.length,
+    layers: layerCount,
     id: props.id,
   });
   seriesId.value = id;
-  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
+  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);
 });

package/src/PieSeries.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PieSeriesOptions, PieSliceData } from '@wick-charts/core';
+import { PieSeriesDef } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
@@ -15,7 +16,7 @@ const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 
 onMounted(() => {
-  const id = chart.addSeries('pie', { ...props.options, id: props.id });
+  const id = chart.addSeries(PieSeriesDef, { ...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) {

package/src/index.ts

@@ -32,6 +32,8 @@ export type {
   LinePainter,
   /** @deprecated Use {@link TimePoint} instead. */
   LineSeriesOptions,
+  MarkerConfig,
+  MarkerShape,
   NavigatorCandlePoint,
   NavigatorControllerParams,
   NavigatorData,
@@ -41,9 +43,17 @@ export type {
   OHLCData,
   OHLCInput,
   PaintEnv,
+  PerfConfig,
+  PerfMonitorOptions,
+  PerfStats,
   PieSeriesOptions,
   PieSliceData,
+  ReferenceLineConfig,
+  ReferenceLineOrientation,
+  ReferenceLineStyle,
   RoundedRectArgs,
+  SeriesCreateEnv,
+  SeriesDefinition,
   SeriesSnapshot,
   SeriesType,
   SliceInfo,
@@ -53,6 +63,8 @@ export type {
   ThemePreset,
   TimePoint,
   TimePointInput,
+  TimeRegionConfig,
+  TimeRegionEnd,
   TimeValue,
   TooltipField,
   TooltipFormatter,
@@ -68,8 +80,13 @@ export type {
 } from '@wick-charts/core';
 // Painters — custom per-element drawing for bar / candle / line series.
 export {
+  BarSeriesDef,
+  CandlestickSeriesDef,
   ChartInstance,
+  LineSeriesDef,
   NavigatorController,
+  PerfMonitor,
+  PieSeriesDef,
   andromeda,
   autoGradient,
   ayuMirage,
@@ -100,7 +117,10 @@ export {
   oneDarkPro,
   panda,
   peachCream,
+  perfHud,
   quietLight,
+  registerBuiltinSeries,
+  registerSeriesDefinition,
   resolveAxisFontSize,
   resolveAxisTextColor,
   resolveCandlestickBodyColor,
@@ -127,11 +147,14 @@ 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 Marker } from './ui/Marker.vue';
 export { default as Navigator } from './ui/Navigator.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 ReferenceLine } from './ui/ReferenceLine.vue';
 export { default as TimeAxis } from './ui/TimeAxis.vue';
+export { default as TimeRegion } from './ui/TimeRegion.vue';
 export { default as Title } from './ui/Title.vue';
 // UI overlays
 export { default as Tooltip } from './ui/Tooltip.vue';

package/src/ui/Legend.vue

@@ -129,7 +129,6 @@ function buildLegendItems(c: ChartInstance): LegendItem[] {
   for (const seriesId of c.getSeriesIds()) {
     const layers = c.getSeriesLayers(seriesId);
     if (layers) {
-      const baseLabel = c.getSeriesLabel(seriesId);
       for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
         const id = `${seriesId}_layer${layerIndex}`;
         const visible = c.isSeriesVisible(seriesId) && c.isLayerVisible(seriesId, layerIndex);
@@ -138,7 +137,7 @@ function buildLegendItems(c: ChartInstance): LegendItem[] {
             id,
             seriesId,
             layerIndex,
-            label: baseLabel ? `${baseLabel} ${layerIndex + 1}` : `Series ${layerIndex + 1}`,
+            label: c.getLayerLabel(seriesId, layerIndex) ?? `Series ${layerIndex + 1}`,
             color: layers[layerIndex].color,
             isDisabled: !visible,
           }),

package/src/ui/Marker.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { MarkerShape, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** X anchor — epoch ms or a `Date`. */
+  time: TimeValue;
+  /** Y anchor as a data value. Omit and set `seriesId` to snap to that series' value at `time`. */
+  value?: number;
+  /** Snap Y to this series' value at `time` when `value` is omitted. Also the default color source. */
+  seriesId?: string;
+  /** Glyph at the anchor. Default: `'dot'`. Arrows point their tip at the anchor. */
+  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. */
+  label?: string;
+  /** Color override. Falls back to the series color (when `seriesId` is set), then the theme line color. */
+  color?: string;
+}>();
+
+const chart = useChartInstance();
+let markerId: string | null = null;
+
+onMounted(() => {
+  markerId = chart.addMarker({
+    time: props.time,
+    value: props.value,
+    seriesId: props.seriesId,
+    shape: props.shape,
+    pulse: props.pulse,
+    label: props.label,
+    color: props.color,
+  });
+});
+
+onUnmounted(() => {
+  if (markerId !== null) chart.removeMarker(markerId);
+  markerId = null;
+});
+
+watch(
+  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color],
+  () => {
+    if (markerId === null) return;
+
+    chart.updateMarker(markerId, {
+      time: props.time,
+      value: props.value,
+      seriesId: props.seriesId,
+      shape: props.shape,
+      pulse: props.pulse,
+      label: props.label,
+      color: props.color,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/ui/ReferenceLine.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ReferenceLineStyle, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** Horizontal line at this Y data value. Mutually exclusive with `time`. */
+  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. */
+  color?: string;
+  /** Optional text label drawn in a pill at the line's near end. */
+  label?: string;
+  /** Dash style. Default: `'dashed'`. */
+  style?: ReferenceLineStyle;
+  /** Stroke width in CSS pixels. Default: `1`. */
+  width?: number;
+}>();
+
+const chart = useChartInstance();
+let lineId: string | null = null;
+
+onMounted(() => {
+  lineId = chart.addLine({
+    value: props.value,
+    time: props.time,
+    color: props.color,
+    label: props.label,
+    style: props.style,
+    width: props.width,
+  });
+});
+
+onUnmounted(() => {
+  if (lineId !== null) chart.removeLine(lineId);
+  lineId = null;
+});
+
+watch(
+  () => [props.value, props.time, props.color, props.label, props.style, props.width],
+  () => {
+    if (lineId === null) return;
+
+    chart.updateLine(lineId, {
+      value: props.value,
+      time: props.time,
+      color: props.color,
+      label: props.label,
+      style: props.style,
+      width: props.width,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/ui/TimeRegion.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { TimeRegionEnd, TimeValue } from '@wick-charts/core';
+import { onMounted, onUnmounted, watch } from 'vue';
+
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** Left edge — epoch ms or a `Date`. */
+  from: TimeValue;
+  /** Right edge — epoch ms or a `Date`. Omit (or pass `'now'`) for an open-ended band to the right edge. */
+  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. */
+  label?: string;
+  /** Edge-line and label-pill accent. Default: the theme's muted axis text color. */
+  color?: string;
+}>();
+
+const chart = useChartInstance();
+let regionId: string | null = null;
+
+onMounted(() => {
+  regionId = chart.addRegion({
+    from: props.from,
+    to: props.to,
+    fill: props.fill,
+    label: props.label,
+    color: props.color,
+  });
+});
+
+onUnmounted(() => {
+  if (regionId !== null) chart.removeRegion(regionId);
+  regionId = null;
+});
+
+watch(
+  () => [props.from, props.to, props.fill, props.label, props.color],
+  () => {
+    if (regionId === null) return;
+
+    chart.updateRegion(regionId, {
+      from: props.from,
+      to: props.to,
+      fill: props.fill,
+      label: props.label,
+      color: props.color,
+    });
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>