@wick-charts/vue 0.6.4 → 0.8.0

package/src/ui/Marker.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
   label?: string;
   /** Color override. Falls back to the series color (when `seriesId` is set), then the theme line color. */
   color?: string;
+  /** Named Y scale (`ChartContainer` `scales`) the `value` maps through. Default: the `seriesId` series' scale, else the default scale. */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
@@ -33,6 +35,7 @@ onMounted(() => {
     pulse: props.pulse,
     label: props.label,
     color: props.color,
+    scale: props.scale,
   });
 });
 
@@ -42,7 +45,7 @@ onUnmounted(() => {
 });
 
 watch(
-  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color],
+  () => [props.time, props.value, props.seriesId, props.shape, props.pulse, props.label, props.color, props.scale],
   () => {
     if (markerId === null) return;
 
@@ -54,6 +57,7 @@ watch(
       pulse: props.pulse,
       label: props.label,
       color: props.color,
+      scale: props.scale,
     });
   },
 );

package/src/ui/Navigator.vue

@@ -25,6 +25,7 @@ const stripRef = ref<HTMLDivElement | null>(null);
 const controller = shallowRef<NavigatorController | null>(null);
 
 const resolvedHeight = computed(() => props.height ?? themeRef.value.navigator.height);
+const timeAxis = computed(() => chartRef.value?.checkTimeOnlyFeature('Navigator') ?? false);
 
 // Mount the controller once the strip div exists and the chart is available.
 // Watch both — either may arrive after the other across Teleport boundaries.
@@ -63,7 +64,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Teleport v-if="anchor" :to="anchor">
+  <Teleport v-if="anchor && timeAxis" :to="anchor">
     <div
       ref="stripRef"
       data-chart-navigator=""

package/src/ui/ReferenceLine.vue

@@ -17,6 +17,8 @@ const props = defineProps<{
   style?: ReferenceLineStyle;
   /** Stroke width in CSS pixels. Default: `1`. */
   width?: number;
+  /** Named Y scale (`ChartContainer` `scales`) the `value` maps through. Default: the default scale. */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
@@ -30,6 +32,7 @@ onMounted(() => {
     label: props.label,
     style: props.style,
     width: props.width,
+    scale: props.scale,
   });
 });
 
@@ -39,7 +42,7 @@ onUnmounted(() => {
 });
 
 watch(
-  () => [props.value, props.time, props.color, props.label, props.style, props.width],
+  () => [props.value, props.time, props.color, props.label, props.style, props.width, props.scale],
   () => {
     if (lineId === null) return;
 
@@ -50,6 +53,7 @@ watch(
       label: props.label,
       style: props.style,
       width: props.width,
+      scale: props.scale,
     });
   },
 );

package/src/ui/Tooltip.vue

@@ -10,6 +10,7 @@ import {
   computeTooltipPosition,
   formatCompact,
   formatDate,
+  formatHeaderX,
   formatPriceAdaptive,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
@@ -106,7 +107,7 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
   if (!crosshair.value || snapshots.value.length === 0) return null;
   const mediaSize = chart.getMediaSize();
   const chartLeft = chart.plotLeft;
-  const chartWidth = mediaSize.width - chart.yAxisWidth;
+  const chartWidth = chart.getLayout().chartArea.width;
   const chartHeight = mediaSize.height - chart.xAxisHeight;
 
   if (hasCustomSlot.value) {
@@ -187,8 +188,10 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
         letterSpacing: '0.02em',
       }"
     >
-      {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
-      {{ chart.timeScale.formatX(displayTime, dataInterval) }}
+      <template v-if="chart.timeScale.getType() === 'time'">
+        {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
+      </template>
+      {{ formatHeaderX(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
     </div>
 
     <template v-for="s in snapshots" :key="s.id">
@@ -288,7 +291,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
       fontVariantNumeric: 'tabular-nums',
       color: theme.tooltip.textColor,
       width: 'max-content',
-      maxWidth: (chart.getMediaSize().width - chart.yAxisWidth) + 'px',
+      maxWidth: chart.getLayout().chartArea.width + 'px',
       boxSizing: 'border-box',
       zIndex: 10,
       visibility: measuredSize !== null ? 'visible' : 'hidden',

package/src/ui/{TimeAxis.vue → XAxis.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { mountAxisLabels } from '@wick-charts/core';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { type XAxisFormatter, mountAxisLabels } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useAxisLayout } from '../composables';
 import { useChartInstance } from '../context';
@@ -10,11 +10,16 @@ const props = defineProps<{
   labelCount?: number;
   /** Minimum pixel gap between adjacent labels (hard floor). Overrides chart-level. */
   minLabelSpacing?: number;
+  /**
+   * Custom label formatter. `x` is epoch ms on a time axis, the number on a
+   * numeric axis, the category name on a category axis; `step` is the tick
+   * spacing. Also formats the crosshair label and the tooltip / info-bar headers.
+   */
+  format?: XAxisFormatter;
 }>();
 
 const chart = useChartInstance();
 const layout = useAxisLayout(chart);
-const onLeft = computed(() => layout.value.yAxisPosition === 'left');
 const containerRef = ref<HTMLDivElement | null>(null);
 
 const applyDensity = () => {
@@ -25,8 +30,16 @@ const applyDensity = () => {
 };
 applyDensity();
 watch(() => [props.labelCount, props.minLabelSpacing], applyDensity);
+
+chart.setXAxisFormat(props.format ?? null);
+watch(
+  () => props.format,
+  (format) => chart.setXAxisFormat(format ?? null),
+);
+
 onUnmounted(() => {
   chart.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
+  chart.setXAxisFormat(null);
 });
 
 let cleanup: (() => void) | null = null;
@@ -45,9 +58,9 @@ onUnmounted(() => {
     ref="containerRef"
     :style="{
       position: 'absolute',
-      left: (onLeft ? layout.yAxisWidth : 0) + 'px',
+      left: layout.leftAxisWidth + 'px',
       bottom: '0',
-      right: (onLeft ? 0 : layout.yAxisWidth) + 'px',
+      right: layout.rightAxisWidth + 'px',
       height: layout.xAxisHeight + 'px',
       pointerEvents: 'none',
       display: 'flex',

package/src/ui/YAxis.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type ValueFormatter, mountAxisLabels } from '@wick-charts/core';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { useAxisLayout } from '../composables';
+import { useAxisLayout, useYRange } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -15,34 +15,87 @@ const props = defineProps<{
   labelCount?: number;
   /** Minimum pixel gap between adjacent labels (hard floor). Overrides chart-level. */
   minLabelSpacing?: number;
+  /**
+   * Named Y scale (`ChartContainer` `scales`) this axis labels. Default: the
+   * default scale. An overlay scale has no column, so only `format` and the
+   * label density apply.
+   */
+  scale?: string;
 }>();
 
 const chart = useChartInstance();
 const layout = useAxisLayout(chart);
+// `setScales` emits `viewportChange`, which this ref follows.
+const yRange = useYRange(chart);
 const containerRef = ref<HTMLDivElement | null>(null);
 
+// An id `scales` doesn't define (yet) must not fall through to the default scale.
+const known = computed(() => {
+  void yRange.value;
+
+  return props.scale === undefined || chart.getYScaleIds().includes(props.scale);
+});
+const column = computed(() => {
+  const { yAxisPosition, yAxisWidth } = layout.value;
+  if (props.scale === undefined) return { position: yAxisPosition, width: yAxisWidth };
+
+  return known.value ? chart.getYScaleColumn(props.scale) : null;
+});
+
 // Route the formatter through yScale so Crosshair / YLabel fallback use
 // the same function as the axis labels.
-const syncFormat = () => chart.yScale.setFormat(props.format ?? null);
+// The scale whose formatter this axis set, so a scale switch and unmount clear that one.
+let formatApplied: { scale: string | undefined } | null = null;
+const clearFormat = () => {
+  if (formatApplied === null) return;
+
+  chart.setYAxisFormat({ format: null, scale: formatApplied.scale });
+  formatApplied = null;
+};
+const syncFormat = () => {
+  clearFormat();
+  if (!known.value) return;
+
+  chart.setYAxisFormat({ format: props.format ?? null, scale: props.scale });
+  formatApplied = { scale: props.scale };
+};
 onMounted(syncFormat);
-watch(() => props.format, syncFormat);
-onUnmounted(() => chart.yScale.setFormat(null));
+watch(() => [props.format, props.scale, known.value], syncFormat);
+onUnmounted(clearFormat);
+
+// The scale whose density this axis set, so a scale switch and unmount reset that one.
+let densityApplied: { scale: string | undefined } | null = null;
+const resetDensity = () => {
+  if (densityApplied === null) return;
 
+  chart.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null, scale: densityApplied.scale });
+  densityApplied = null;
+};
 const applyDensity = () => {
+  if (densityApplied !== null && densityApplied.scale !== props.scale) resetDensity();
+  if (!known.value) return;
+
   chart.setYAxisLabelDensity({
     labelCount: props.labelCount ?? null,
     minLabelSpacing: props.minLabelSpacing ?? null,
+    scale: props.scale,
   });
+  densityApplied = { scale: props.scale };
 };
 applyDensity();
-watch(() => [props.labelCount, props.minLabelSpacing], applyDensity);
-onUnmounted(() => chart.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+watch(() => [props.labelCount, props.minLabelSpacing, props.scale, known.value], applyDensity);
+onUnmounted(resetDensity);
 
 let cleanup: (() => void) | null = null;
-onMounted(() => {
+const mountLabels = () => {
+  cleanup?.();
+  cleanup = null;
   if (containerRef.value === null) return;
-  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'y' });
-});
+
+  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'y', scale: props.scale });
+};
+onMounted(mountLabels);
+watch([containerRef, () => props.scale], mountLabels, { flush: 'post' });
 onUnmounted(() => {
   cleanup?.();
   cleanup = null;
@@ -51,13 +104,14 @@ onUnmounted(() => {
 
 <template>
   <div
+    v-if="column"
     ref="containerRef"
     :style="{
       position: 'absolute',
-      [layout.yAxisPosition]: '0',
+      [column.position]: '0',
       top: '0',
       bottom: layout.xAxisHeight + 'px',
-      width: layout.yAxisWidth + 'px',
+      width: column.width + 'px',
       pointerEvents: 'none',
     }"
   />

package/src/ui/YLabel.vue

@@ -29,13 +29,19 @@ const props = defineProps<{
    */
   seriesId?: string;
   color?: string;
-  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. */
+  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. Default: the scale's `<YAxis format>`, else a range-adaptive number. */
   format?: ValueFormatter;
   /**
    * Badge motion. `true` (default) glides + counts up + fades in with the
    * intro; `false` snaps with no easing; an object tunes individual parts.
    */
   animate?: YLabelAnimate;
+  /**
+   * Named Y scale (`ChartContainer` `scales`) the value maps through. Default:
+   * the series' own scale. The badge sits on that scale's axis side — the
+   * default axis side for an overlay scale.
+   */
+  scale?: string;
 }>();
 
 defineSlots<{
@@ -169,6 +175,24 @@ const theme = computed(() => {
   return chart.getTheme();
 });
 
+const scaleId = computed<string | undefined>(() => {
+  void bump.value;
+  if (props.scale !== undefined) return props.scale;
+
+  return resolvedId.value !== null ? chart.getSeriesScale(resolvedId.value) : undefined;
+});
+const yScale = computed(() => {
+  void bump.value;
+
+  return chart.getYScale(scaleId.value);
+});
+// An overlay scale has no column; its badge sits on the default axis side.
+const side = computed(() => {
+  void bump.value;
+
+  return chart.getYScaleColumn(scaleId.value)?.position ?? chart.yAxisPosition;
+});
+
 // Position eases (the glide); the digit value steps discretely (once per real
 // point, not per frame) so the roll doesn't churn. Before the first rAF frame
 // lands, fall back to the settled value (hidden if an intro is still sweeping).
@@ -195,7 +219,7 @@ const y = computed(() => {
   void bump.value;
   if (last.value === null) return 0;
 
-  return chart.yScale.valueToY(positionValue.value);
+  return yScale.value.valueToY(positionValue.value);
 });
 
 // Direction / color track the settled last value (not the mid-glide display
@@ -225,7 +249,7 @@ const bgColor = computed<string>(() => {
 
 const fractionDigits = computed(() => {
   void bump.value;
-  const yRange = chart.yScale.getRange();
+  const yRange = yScale.value.getRange();
   const range = yRange.max - yRange.min;
   if (range < 0.1) return 6;
   if (range < 10) return 4;
@@ -236,6 +260,12 @@ const fractionDigits = computed(() => {
 
 const effectiveFormat = computed<ValueFormatter>(() => {
   if (props.format) return props.format;
+
+  // `<YAxis format>` puts its formatter on the scale; the badge follows it.
+  void bump.value;
+  const scaleFormat = yScale.value.getFormat();
+  if (scaleFormat) return scaleFormat;
+
   const nf = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: fractionDigits.value,
     maximumFractionDigits: fractionDigits.value,
@@ -263,7 +293,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
         :style="{
           position: 'absolute',
           left: chart.plotLeft + 'px',
-          right: (chart.yAxisPosition === 'left' ? 0 : chart.yAxisWidth) + 'px',
+          right: chart.getAxisColumnWidth('right') + 'px',
           top: y + 'px',
           height: '0',
           borderTop: '1px dashed ' + bgColor,
@@ -275,7 +305,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
       <div
         :style="{
           position: 'absolute',
-          [chart.yAxisPosition]: '4px',
+          [side]: '4px',
           top: y + 'px',
           transform: 'translateY(-50%)',
           opacity: opacity,

package/dist/ui/TimeAxis.vue.js

@@ -1,44 +0,0 @@
-import { defineComponent as c, computed as p, ref as m, watch as f, onUnmounted as u, onMounted as x, openBlock as b, createElementBlock as y, normalizeStyle as h, unref as o } from "vue";
-import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
-import { useAxisLayout as d } from "../composables.js";
-import { useChartInstance as g } from "../context.js";
-const D = /* @__PURE__ */ c({
-  __name: "TimeAxis",
-  props: {
-    labelCount: {},
-    minLabelSpacing: {}
-  },
-  setup(r) {
-    const e = r, n = g(), t = d(n), a = p(() => t.value.yAxisPosition === "left"), l = m(null), s = () => {
-      n.setTimeAxisLabelDensity({
-        labelCount: e.labelCount ?? null,
-        minLabelSpacing: e.minLabelSpacing ?? null
-      });
-    };
-    s(), f(() => [e.labelCount, e.minLabelSpacing], s), u(() => {
-      n.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
-    });
-    let i = null;
-    return x(() => {
-      l.value !== null && (i = L({ chart: n, container: l.value, axis: "x" }));
-    }), u(() => {
-      i?.(), i = null;
-    }), (A, v) => (b(), y("div", {
-      ref_key: "containerRef",
-      ref: l,
-      style: h({
-        position: "absolute",
-        left: (a.value ? o(t).yAxisWidth : 0) + "px",
-        bottom: "0",
-        right: (a.value ? 0 : o(t).yAxisWidth) + "px",
-        height: o(t).xAxisHeight + "px",
-        pointerEvents: "none",
-        display: "flex",
-        alignItems: "center"
-      })
-    }, null, 4));
-  }
-});
-export {
-  D as default
-};

package/dist/ui/TimeAxis.vue2.js

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