nuxt-charts 2.2.1 → 3.0.0-beta.0

package/dist/runtime/components/FunnelChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { FunnelChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FunnelChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/LineChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { LineChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<LineChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/LineChart.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from "vue";
+import { Line, LineChart as VccsLineChart } from "vccs";
+import CartesianFrame from "./internal/CartesianFrame.vue";
+import { categoriesToSeries } from "../utils/categories";
+import { curveTypeToVccs } from "../utils/curve";
+import { markerToDot, normalizeMarkerConfig, toStrokeDasharray } from "../utils/marker";
+const props = defineProps({
+  xAxis: { type: null, required: false },
+  curveType: { type: String, required: false },
+  lineWidth: { type: Number, required: false },
+  stacked: { type: Boolean, required: false },
+  lineDashArray: { type: [Array, String], required: false },
+  markerConfig: { type: Object, required: false },
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  padding: { type: Object, required: false },
+  categories: { type: Object, required: true },
+  xFormatter: { type: Function, required: false },
+  yFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  xNumTicks: { type: Number, required: false },
+  yNumTicks: { type: Number, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  xDomainLine: { type: Boolean, required: false },
+  yDomainLine: { type: Boolean, required: false },
+  xTickLine: { type: Boolean, required: false },
+  yTickLine: { type: Boolean, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  xDomain: { type: Array, required: false },
+  yDomain: { type: Array, required: false },
+  duration: { type: Number, required: false },
+  xAxisConfig: { type: Object, required: false },
+  yAxisConfig: { type: Object, required: false },
+  yAxes: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  referenceLines: { type: Array, required: false },
+  syncId: { type: String, required: false },
+  minMaxTicksOnly: { type: Boolean, required: false },
+  xExplicitTicks: { type: Array, required: false },
+  yExplicitTicks: { type: Array, required: false },
+  crosshairConfig: { type: Object, required: false },
+  theme: { type: Object, required: false }
+});
+const markers = computed(() => normalizeMarkerConfig(props.markerConfig));
+const series = computed(
+  () => categoriesToSeries(props.categories).map((s) => ({
+    ...s,
+    dot: markerToDot(markers.value[s.dataKey], s.color)
+  }))
+);
+const curve = computed(() => curveTypeToVccs(props.curveType));
+const stackId = computed(() => props.stacked ? "stack" : void 0);
+const dashArray = computed(() => toStrokeDasharray(props.lineDashArray));
+const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : void 0);
+</script>
+
+<template>
+  <CartesianFrame :container="VccsLineChart" :x-axis-key="xAxisKey" v-bind="props">
+    <Line
+      v-for="s in series"
+      :key="s.dataKey"
+      :data-key="s.dataKey"
+      :name="s.name"
+      :y-axis-id="s.yAxisId"
+      :type="curve"
+      :stack-id="stackId"
+      :stroke="s.color"
+      :stroke-width="lineWidth ?? 2"
+      :stroke-dasharray="dashArray"
+      :dot="s.dot"
+      :hide="s.hidden"
+      :is-animation-active="duration !== void 0 && duration !== 0"
+    />
+  </CartesianFrame>
+</template>

package/dist/runtime/components/LineChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { LineChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<LineChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/RadarChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { RadarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<RadarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/RadarChart.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from "vue";
+import {
+  Legend,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as VccsRadarChart,
+  ResponsiveContainer,
+  Tooltip
+} from "vccs";
+import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartLegend from "./internal/ChartLegend.vue";
+import { categoriesToSeries } from "../utils/categories";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
+import { toCssProperties } from "../utils/style";
+import { themeToVars } from "../utils/theme";
+const props = defineProps({
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  dataKey: { type: null, required: true },
+  categories: { type: Object, required: true },
+  fillOpacity: { type: Number, required: false },
+  angleFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  hideRadiusAxis: { type: Boolean, required: false },
+  radiusAxisAngle: { type: Number, required: false },
+  tooltip: { type: Object, required: false },
+  theme: { type: Object, required: false },
+  duration: { type: Number, required: false }
+});
+const series = computed(() => categoriesToSeries(props.categories).filter((s) => !s.hidden));
+const angleKey = computed(() => String(props.dataKey));
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+const themeVars = computed(() => themeToVars(props.theme));
+</script>
+
+<template>
+  <div class="vue-chrts" :style="themeVars">
+  <ResponsiveContainer width="100%" :height="height">
+    <VccsRadarChart :data="data">
+      <PolarGrid stroke="var(--vc-grid-color)" />
+      <PolarAngleAxis :data-key="angleKey" :tick-formatter="angleFormatter" />
+      <!--
+        vccs defaults the radius axis to `angle: 0`, which lays the 0→max scale
+        out horizontally to the right. Point it up instead so the scale reads
+        bottom-to-top from the centre; `orientation: middle` then centres the
+        tick labels on the axis line rather than hanging them off one side.
+      -->
+      <PolarRadiusAxis
+        v-if="!hideRadiusAxis"
+        :angle="radiusAxisAngle ?? 90"
+        orientation="middle"
+      />
+
+      <Radar
+        v-for="s in series"
+        :key="s.dataKey"
+        :data-key="s.dataKey"
+        :name="s.name"
+        :stroke="s.color"
+        :fill="s.color"
+        :fill-opacity="fillOpacity ?? 0.6"
+        :is-animation-active="duration !== void 0 && duration !== 0"
+      />
+
+      <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
+      <Legend
+        v-if="!hideLegend"
+        :align="legend.align"
+        :vertical-align="legend.verticalAlign"
+        :layout="legend.layout"
+        :wrapper-style="legendWrapperStyle"
+      >
+        <template #content="slotProps">
+          <ChartLegend v-bind="slotProps" />
+        </template>
+      </Legend>
+    </VccsRadarChart>
+  </ResponsiveContainer>
+  </div>
+</template>

package/dist/runtime/components/RadarChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { RadarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<RadarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/RadialBarChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { RadialBarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<RadialBarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/RadialBarChart.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from "vue";
+import {
+  Legend,
+  RadialBar,
+  RadialBarChart as VccsRadialBarChart,
+  ResponsiveContainer,
+  Tooltip
+} from "vccs";
+import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartLegend from "./internal/ChartLegend.vue";
+import { categoriesToSeries } from "../utils/categories";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
+import { toCssProperties } from "../utils/style";
+import { themeToVars } from "../utils/theme";
+const props = defineProps({
+  data: { type: Array, required: true },
+  categories: { type: Object, required: true },
+  height: { type: Number, required: true },
+  innerRadius: { type: [Number, String], required: false },
+  outerRadius: { type: [Number, String], required: false },
+  startAngle: { type: Number, required: false },
+  endAngle: { type: Number, required: false },
+  cornerRadius: { type: Number, required: false },
+  background: { type: Boolean, required: false },
+  hideLegend: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  hideTooltip: { type: Boolean, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  tooltip: { type: Object, required: false },
+  theme: { type: Object, required: false },
+  duration: { type: Number, required: false }
+});
+const themeVars = computed(() => themeToVars(props.theme));
+const bars = computed(() => {
+  const cats = categoriesToSeries(props.categories);
+  return props.data.map((value, i) => ({
+    name: cats[i]?.name ?? String(i),
+    value,
+    fill: cats[i]?.color ?? `var(--chart-color-${i})`
+  }));
+});
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+</script>
+
+<template>
+  <div class="vue-chrts" :style="themeVars">
+  <ResponsiveContainer width="100%" :height="height">
+    <VccsRadialBarChart
+      :data="bars"
+      :inner-radius="innerRadius ?? '30%'"
+      :outer-radius="outerRadius ?? '100%'"
+      :start-angle="startAngle ?? 90"
+      :end-angle="endAngle ?? -270"
+    >
+      <RadialBar
+        data-key="value"
+        :background="background ?? true"
+        :corner-radius="cornerRadius"
+        :is-animation-active="duration !== void 0 && duration !== 0"
+      />
+      <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
+      <Legend
+        v-if="!hideLegend"
+        :align="legend.align"
+        :vertical-align="legend.verticalAlign"
+        :layout="legend.layout"
+        :wrapper-style="legendWrapperStyle"
+      >
+        <template #content="slotProps">
+          <ChartLegend v-bind="slotProps" />
+        </template>
+      </Legend>
+    </VccsRadialBarChart>
+  </ResponsiveContainer>
+  </div>
+</template>

package/dist/runtime/components/RadialBarChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { RadialBarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<RadialBarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/StatusTrackerChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { StatusTrackerChartProps, StatusTrackerDatum } from "../types/charts.js";
+declare const __VLS_export: <T extends StatusTrackerDatum>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<StatusTrackerChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/StatusTrackerChart.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { categoriesToSeries } from "../utils/categories";
+const props = defineProps({
+  data: { type: Array, required: true },
+  categories: { type: Object, required: true },
+  title: { type: String, required: false },
+  summary: { type: [String, Number], required: false },
+  height: { type: Number, required: false, default: 28 },
+  barWidth: { type: Number, required: false, default: 8 },
+  barGap: { type: Number, required: false, default: 3 },
+  visibleBars: { type: Number, required: false },
+  startLabel: { type: String, required: false },
+  endLabel: { type: String, required: false },
+  emptyStatus: { type: String, required: false, default: "empty" },
+  emptyColor: { type: String, required: false, default: "var(--chart-empty-color, #e5e7eb)" },
+  statusAccessor: { type: Function, required: false },
+  labelAccessor: { type: Function, required: false },
+  valueAccessor: { type: Function, required: false },
+  valueFormatter: { type: Function, required: false },
+  hideHeader: { type: Boolean, required: false, default: false },
+  hideLegend: { type: Boolean, required: false, default: false },
+  hideTooltip: { type: Boolean, required: false, default: false },
+  rounded: { type: Boolean, required: false, default: true }
+});
+const containerRef = ref(null);
+const containerWidth = ref(0);
+let resizeObserver;
+const categoryMap = computed(() => {
+  const entries = categoriesToSeries(props.categories);
+  return new Map(entries.map((item) => [item.dataKey, item]));
+});
+const legendItems = computed(
+  () => categoriesToSeries(props.categories).filter((item) => !item.hidden)
+);
+const resolvedVisibleBars = computed(() => {
+  if (props.visibleBars !== void 0) return Math.max(0, props.visibleBars);
+  if (!containerWidth.value) return props.data.length;
+  const barWidth = Math.max(1, props.barWidth);
+  const gap = Math.max(0, props.barGap);
+  return Math.max(1, Math.floor((containerWidth.value + gap) / (barWidth + gap)));
+});
+const visibleBars = computed(() => {
+  const count = resolvedVisibleBars.value;
+  if (count === 0) return [];
+  const start = Math.max(0, props.data.length - count);
+  const visibleData = props.data.slice(start);
+  const emptyCount = Math.max(0, count - visibleData.length);
+  return [
+    ...Array.from({ length: emptyCount }, (_, index) => ({
+      key: `empty-${index}`,
+      status: props.emptyStatus,
+      color: props.emptyColor,
+      label: "No data",
+      title: "No data",
+      isEmpty: true
+    })),
+    ...visibleData.map((datum, visibleIndex) => {
+      const dataIndex = start + visibleIndex;
+      const status = props.statusAccessor?.(datum, dataIndex) ?? datum.status;
+      const category = categoryMap.value.get(status);
+      const value = props.valueAccessor?.(datum, dataIndex) ?? datum.value;
+      const label = props.labelAccessor?.(datum, dataIndex) ?? datum.label ?? category?.name ?? status;
+      const formattedValue = typeof value === "number" ? props.valueFormatter?.(value, datum, dataIndex) ?? value.toLocaleString() : void 0;
+      return {
+        key: `${dataIndex}-${status}`,
+        status,
+        color: category?.color ?? props.emptyColor,
+        label,
+        title: formattedValue ? `${label}: ${formattedValue}` : label,
+        isEmpty: false
+      };
+    })
+  ];
+});
+const trackerStyle = computed(() => ({
+  gap: `${Math.max(0, props.barGap)}px`,
+  height: `${Math.max(1, props.height)}px`
+}));
+const barStyle = computed(() => ({
+  width: `${Math.max(1, props.barWidth)}px`
+}));
+const ariaLabel = computed(() => {
+  const prefix = props.title ? `${props.title}: ` : "";
+  const samples = props.data.length === 1 ? "1 status sample" : `${props.data.length} status samples`;
+  return `${prefix}${samples}`;
+});
+function updateContainerWidth() {
+  containerWidth.value = containerRef.value?.offsetWidth ?? 0;
+}
+onMounted(() => {
+  updateContainerWidth();
+  if (typeof ResizeObserver === "undefined") return;
+  resizeObserver = new ResizeObserver(updateContainerWidth);
+  if (containerRef.value) resizeObserver.observe(containerRef.value);
+});
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+</script>
+
+<template>
+  <section class="vc-status-tracker vue-chrts" :aria-label="ariaLabel">
+    <header v-if="!hideHeader && (title || summary !== void 0)" class="vc-status-tracker__header">
+      <h3 v-if="title" class="vc-status-tracker__title">
+        {{ title }}
+      </h3>
+      <p v-if="summary !== void 0" class="vc-status-tracker__summary">
+        {{ summary }}
+      </p>
+    </header>
+
+    <div
+      ref="containerRef"
+      class="vc-status-tracker__track"
+      role="img"
+      :aria-label="ariaLabel"
+      :style="trackerStyle"
+    >
+      <span
+        v-for="(bar, index) in visibleBars"
+        :key="bar.key"
+        class="vc-status-tracker__bar"
+        :class="{
+  'vc-status-tracker__bar--rounded-start': rounded && index === 0,
+  'vc-status-tracker__bar--rounded-end': rounded && index === visibleBars.length - 1,
+  'vc-status-tracker__bar--empty': bar.isEmpty
+}"
+        :style="{ ...barStyle, backgroundColor: bar.color }"
+        :title="hideTooltip ? void 0 : bar.title"
+        :aria-label="bar.title"
+      />
+    </div>
+
+    <div v-if="startLabel || endLabel" class="vc-status-tracker__labels">
+      <span>{{ startLabel }}</span>
+      <span>{{ endLabel }}</span>
+    </div>
+
+    <ul v-if="!hideLegend && legendItems.length" class="vc-status-tracker__legend">
+      <li v-for="item in legendItems" :key="item.dataKey" class="vc-status-tracker__legend-item">
+        <span class="vc-status-tracker__legend-dot" :style="{ backgroundColor: item.color }" />
+        <span>{{ item.name }}</span>
+      </li>
+    </ul>
+  </section>
+</template>

package/dist/runtime/components/StatusTrackerChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { StatusTrackerChartProps, StatusTrackerDatum } from "../types/charts.js";
+declare const __VLS_export: <T extends StatusTrackerDatum>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<StatusTrackerChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/internal/CandlestickTooltip.d.vue.ts

@@ -0,0 +1,17 @@
+interface Row {
+    label: string | number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume?: number;
+}
+type __VLS_Props = {
+    row: Row;
+    upColor: string;
+    downColor: string;
+    valueFormatter?: (value: number) => string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/internal/CandlestickTooltip.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  row: { type: Object, required: true },
+  upColor: { type: String, required: true },
+  downColor: { type: String, required: true },
+  valueFormatter: { type: Function, required: false }
+});
+const directionColor = computed(
+  () => props.row.close >= props.row.open ? props.upColor : props.downColor
+);
+function fmt(value) {
+  return props.valueFormatter ? props.valueFormatter(value) : value.toLocaleString();
+}
+const rows = computed(() => {
+  const r = props.row;
+  return [
+    { name: "Open", value: fmt(r.open), color: directionColor.value },
+    { name: "High", value: fmt(r.high), color: props.upColor },
+    { name: "Low", value: fmt(r.low), color: props.downColor },
+    { name: "Close", value: fmt(r.close), color: directionColor.value },
+    ...r.volume != null && !Number.isNaN(r.volume) ? [{ name: "Volume", value: r.volume.toLocaleString(), color: "var(--vc-tooltip-muted, oklch(0.556 0 0))" }] : []
+  ];
+});
+</script>
+
+<template>
+  <div class="vc-tooltip">
+    <p class="vc-tooltip__label">{{ row.label }}</p>
+    <ul class="vc-tooltip__list">
+      <li v-for="item in rows" :key="item.name" class="vc-tooltip__item">
+        <span class="vc-tooltip__dot" :style="{ background: item.color }" />
+        <span class="vc-tooltip__name">{{ item.name }}</span>
+        <span class="vc-tooltip__value">{{ item.value }}</span>
+      </li>
+    </ul>
+  </div>
+</template>

package/dist/runtime/components/internal/CandlestickTooltip.vue.d.ts

@@ -0,0 +1,17 @@
+interface Row {
+    label: string | number;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume?: number;
+}
+type __VLS_Props = {
+    row: Row;
+    upColor: string;
+    downColor: string;
+    valueFormatter?: (value: number) => string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;