nuxt-charts 2.2.1 → 3.0.0-beta.0

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

@@ -0,0 +1,40 @@
+/**
+ * Shared scaffolding for the cartesian charts (area, bar, line, bubble).
+ *
+ * Renders the responsive container, the supplied `vccs` chart container, the
+ * grid, axes, tooltip and legend from the v2 config props — leaving the series
+ * (`<Area>` / `<Bar>` / `<Line>` / `<Scatter>`) to the default slot. This keeps
+ * every chart adapter small and the axis/legend/tooltip wiring in one place.
+ */
+import { type Component } from "vue";
+import type { CartesianChartBaseProps } from "../../types/charts.js";
+import type { Orientation } from "../../enums.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<CartesianChartBaseProps<T> & {
+        /** The `vccs` chart container component to render (AreaChart, BarChart, …). */
+        container: Component;
+        /** Extra props forwarded to the `vccs` chart container. */
+        containerProps?: Record<string, unknown>;
+        /** Data key for the category (x) axis. */
+        xAxisKey?: string;
+        /** Bar/area orientation; drives the container `layout`. */
+        orientation?: Orientation;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    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/CartesianFrame.vue

@@ -0,0 +1,321 @@
+<script setup>
+import { computed, h } from "vue";
+import {
+  CartesianGrid,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "vccs";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../../utils/legend";
+import {
+  AXIS_TICK_MARGIN,
+  resolveAxisProps,
+  resolveYAxes,
+  resolveXAxisHeight,
+  resolveYAxisWidth,
+  toAxisLabel,
+  toTickFormatter,
+  toTickProp
+} from "../../utils/axis";
+import { categoriesToSeries } from "../../utils/categories";
+import { toAxisDomain, toCssProperties } from "../../utils/style";
+import { axisTickVars, resolveHoverRadius, resolveHoverVisible, themeToVars } from "../../utils/theme";
+import ChartTooltip from "./ChartTooltip.vue";
+import ChartLegend from "./ChartLegend.vue";
+const props = defineProps({
+  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 },
+  container: { type: null, required: true },
+  containerProps: { type: Object, required: false },
+  xAxisKey: { type: String, required: false },
+  orientation: { type: String, required: false }
+});
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const showXGrid = computed(() => props.xGridLine ?? true);
+const showYGrid = computed(() => props.yGridLine ?? true);
+const categoryIndexByValue = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  if (props.xAxisKey === void 0) return map;
+  props.data.forEach((row, i) => {
+    map.set(row[props.xAxisKey], i);
+  });
+  return map;
+});
+function withCategoryIndex(fn) {
+  if (!fn || props.xAxisKey === void 0) return fn;
+  return (value, index) => {
+    const i = categoryIndexByValue.value.get(value);
+    return fn(i ?? value, i ?? index);
+  };
+}
+const layout = computed(
+  () => props.orientation === "horizontal" ? "vertical" : "horizontal"
+);
+const rawXFormatter = computed(
+  () => toTickFormatter(props.xFormatter ?? props.xAxisConfig?.tickFormat)
+);
+const rawYFormatter = computed(
+  () => toTickFormatter(props.yFormatter ?? props.yAxisConfig?.tickFormat)
+);
+const categoryFormatter = computed(
+  () => withCategoryIndex(layout.value === "vertical" ? rawYFormatter.value : rawXFormatter.value)
+);
+const valueFormatter = computed(
+  () => layout.value === "vertical" ? rawXFormatter.value : rawYFormatter.value
+);
+const xAxisDomain = computed(() => toAxisDomain(props.xDomain));
+const yAxisDomain = computed(() => toAxisDomain(props.yDomain));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+const xAxis = computed(
+  () => resolveAxisProps(props.xExplicitTicks, props.xAxisConfig, props.minMaxTicksOnly)
+);
+const yAxis = computed(
+  () => resolveAxisProps(props.yExplicitTicks, props.yAxisConfig, props.minMaxTicksOnly)
+);
+const showXTickLine = computed(() => props.xAxisConfig?.tickLine ?? props.xTickLine ?? false);
+const showYTickLine = computed(() => props.yAxisConfig?.tickLine ?? props.yTickLine ?? false);
+const xAxisTitle = computed(
+  () => toAxisLabel(layout.value === "vertical" ? props.yLabel : props.xLabel, "insideBottom")
+);
+const yAxisTitle = computed(
+  () => toAxisLabel(layout.value === "vertical" ? props.xLabel : props.yLabel, "insideLeft", {
+    angle: -90
+  })
+);
+const isCategoryYAxis = computed(
+  () => layout.value === "vertical" && props.xAxisKey !== void 0
+);
+const xAxisHeight = computed(() => resolveXAxisHeight({ hasTitle: !!xAxisTitle.value }));
+const yAxisWidth = computed(
+  () => resolveYAxisWidth({ hasTitle: !!yAxisTitle.value, isCategoryAxis: isCategoryYAxis.value })
+);
+const rootStyle = computed(() => ({
+  ...themeToVars(props.theme),
+  ...axisTickVars("x", xAxis.value.tick),
+  ...axisTickVars("y", yAxis.value.tick)
+}));
+const xTickProp = computed(() => toTickProp(xAxis.value.tick));
+const yTickProp = computed(() => toTickProp(yAxis.value.tick));
+const gridStroke = "var(--vc-grid-color)";
+const axisLineStyle = { stroke: "var(--vc-axis-line-color)" };
+const tickLineStyle = { stroke: "var(--vc-axis-line-color)" };
+const cursor = computed(
+  () => resolveHoverVisible(props.theme) ? {
+    fill: "var(--vc-hover-fill)",
+    stroke: "var(--vc-hover-stroke)",
+    radius: resolveHoverRadius(props.theme)
+  } : false
+);
+const xAxisLine = computed(() => props.xDomainLine ?? true ? axisLineStyle : false);
+const yAxisLine = computed(() => props.yDomainLine ?? true ? axisLineStyle : false);
+const xTickLineProp = computed(() => showXTickLine.value ? tickLineStyle : false);
+const yTickLineProp = computed(() => showYTickLine.value ? tickLineStyle : false);
+const mergedContainerProps = computed(() => ({
+  data: props.data,
+  layout: layout.value,
+  syncId: props.syncId,
+  ...props.containerProps
+}));
+const referenceLines = computed(() => props.referenceLines ?? []);
+const SMALL_CATEGORY_AXIS_MAX = 12;
+function resolveCategoryAxisInterval(configured, isCategoryAxis) {
+  if (configured !== void 0) return configured;
+  if (isCategoryAxis && props.data.length <= SMALL_CATEGORY_AXIS_MAX) return 0;
+  return void 0;
+}
+const xAxisInterval = computed(
+  () => resolveCategoryAxisInterval(
+    layout.value === "vertical" ? yAxis.value.interval : xAxis.value.interval,
+    layout.value !== "vertical" && props.xAxisKey !== void 0
+  )
+);
+const yAxisInterval = computed(
+  () => resolveCategoryAxisInterval(
+    layout.value === "vertical" ? xAxis.value.interval : yAxis.value.interval,
+    layout.value === "vertical" && props.xAxisKey !== void 0
+  )
+);
+const tooltipContent = computed(() => {
+  const formatLabel = categoryFormatter.value;
+  const titleFormatter = props.tooltipTitleFormatter;
+  return (tooltipProps) => {
+    let label = tooltipProps.label;
+    const row = tooltipProps.payload?.[0]?.payload;
+    if (titleFormatter && row != null) {
+      label = titleFormatter(row);
+    } else if (formatLabel != null && label !== void 0 && label !== "") {
+      const rowIndex = row != null ? props.data.indexOf(row) : -1;
+      const index = rowIndex >= 0 ? rowIndex : typeof label === "number" ? label : Number(label);
+      label = formatLabel(label, Number.isNaN(index) ? 0 : index);
+    }
+    return h(ChartTooltip, { ...tooltipProps, label });
+  };
+});
+const resolvedYAxes = computed(() => {
+  if (props.hideYAxis || layout.value === "vertical") return [];
+  return resolveYAxes({
+    series: categoriesToSeries(props.categories),
+    yAxes: props.yAxes,
+    minMaxTicksOnly: props.minMaxTicksOnly,
+    primary: {
+      ...yAxis.value,
+      label: props.yLabel,
+      domain: yAxisDomain.value,
+      tickCount: props.yNumTicks,
+      tickFormatter: valueFormatter.value,
+      tickLine: showYTickLine.value,
+      hide: false
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="vue-chrts" :style="rootStyle">
+  <ResponsiveContainer width="100%" :height="height">
+    <component :is="container" v-bind="mergedContainerProps">
+      <CartesianGrid
+        v-if="showXGrid || showYGrid"
+        :horizontal="showYGrid"
+        :vertical="showXGrid"
+        :stroke="gridStroke"
+        stroke-dasharray="var(--vc-grid-dash)"
+        :stroke-width="'var(--vc-grid-width)'"
+      />
+      <!--
+        Horizontal orientation: vccs uses layout="vertical" which swaps the axes.
+        The category (dataKey) axis becomes YAxis; the value axis becomes XAxis.
+      -->
+      <XAxis
+        v-if="!hideXAxis"
+        :data-key="layout === 'vertical' ? void 0 : xAxisKey"
+        :hide="hideXAxis"
+        :height="xAxisHeight"
+        :tick="xTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.x"
+        :tick-line="xTickLineProp"
+        :axis-line="xAxisLine"
+        :tick-count="layout === 'vertical' ? yNumTicks : xNumTicks"
+        :tick-formatter="layout === 'vertical' ? valueFormatter : categoryFormatter"
+        :domain="layout === 'vertical' ? yAxisDomain : xAxisDomain"
+        :ticks="layout === 'vertical' ? yAxis.ticks : xAxis.ticks"
+        :interval="layout === 'vertical' ? yAxisInterval : xAxisInterval"
+        :label="xAxisTitle"
+        :type="layout === 'vertical' ? 'number' : 'category'"
+      />
+      <!--
+        Horizontal orientation keeps the single swapped category y-axis; only
+        the standard layout supports several value axes (one per `yAxes` id).
+      -->
+      <!-- Horizontal orientation (layout="vertical"): the single swapped category y-axis. -->
+      <YAxis
+        v-if="!hideYAxis && layout === 'vertical'"
+        :data-key="xAxisKey"
+        :width="yAxisWidth"
+        :tick="yTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.y"
+        :tick-line="yTickLineProp"
+        :axis-line="yAxisLine"
+        :tick-count="xNumTicks"
+        :tick-formatter="categoryFormatter"
+        :domain="xAxisDomain"
+        :ticks="xAxis.ticks"
+        :interval="xAxisInterval"
+        :label="yAxisTitle"
+        type="category"
+      />
+      <!-- Standard layout: one value axis per resolved `yAxes` id (shared cutover styling). -->
+      <YAxis
+        v-for="axis in resolvedYAxes"
+        :key="axis.id"
+        :y-axis-id="axis.id"
+        :orientation="axis.orientation"
+        :hide="axis.hide"
+        :width="yAxisWidth"
+        :tick="toTickProp(axis.tick)"
+        :tick-margin="AXIS_TICK_MARGIN.y"
+        :tick-line="axis.tickLine ? yTickLineProp : false"
+        :axis-line="yAxisLine"
+        :tick-count="axis.tickCount"
+        :tick-formatter="axis.tickFormatter"
+        :domain="axis.domain"
+        :ticks="axis.ticks"
+        :interval="axis.interval"
+        :label="toAxisLabel(axis.label, axis.orientation === 'right' ? 'insideRight' : 'insideLeft', { angle: axis.orientation === 'right' ? 90 : -90 })"
+        type="number"
+      />
+
+      <slot />
+
+      <ReferenceLine
+        v-for="(line, i) in referenceLines"
+        :key="i"
+        :x="line.x"
+        :y="line.y"
+        :stroke="line.color ?? '#888'"
+        :stroke-width="line.strokeWidth ?? 1"
+        :stroke-dasharray="line.strokeDasharray"
+        :label="line.label"
+      />
+
+      <Tooltip
+        v-if="!hideTooltip"
+        :content="tooltipContent"
+        :cursor="cursor"
+        :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>
+    </component>
+  </ResponsiveContainer>
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+/**
+ * Shared scaffolding for the cartesian charts (area, bar, line, bubble).
+ *
+ * Renders the responsive container, the supplied `vccs` chart container, the
+ * grid, axes, tooltip and legend from the v2 config props — leaving the series
+ * (`<Area>` / `<Bar>` / `<Line>` / `<Scatter>`) to the default slot. This keeps
+ * every chart adapter small and the axis/legend/tooltip wiring in one place.
+ */
+import { type Component } from "vue";
+import type { CartesianChartBaseProps } from "../../types/charts.js";
+import type { Orientation } from "../../enums.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<CartesianChartBaseProps<T> & {
+        /** The `vccs` chart container component to render (AreaChart, BarChart, …). */
+        container: Component;
+        /** Extra props forwarded to the `vccs` chart container. */
+        containerProps?: Record<string, unknown>;
+        /** Data key for the category (x) axis. */
+        xAxisKey?: string;
+        /** Bar/area orientation; drives the container `layout`. */
+        orientation?: Orientation;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    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/ChartLegend.d.vue.ts

@@ -0,0 +1,11 @@
+interface LegendItem {
+    value: string;
+    color?: string;
+    inactive?: boolean;
+}
+type __VLS_Props = {
+    payload?: LegendItem[];
+};
+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/ChartLegend.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  payload: { type: Array, required: false }
+});
+</script>
+
+<template>
+  <ul class="vc-legend">
+    <li
+      v-for="item in payload"
+      :key="item.value"
+      class="vc-legend__item"
+      :class="{ 'vc-legend__item--inactive': item.inactive }"
+    >
+      <span
+        class="vc-legend__dot"
+        :style="{ background: item.color }"
+      />
+      <span class="vc-legend__label">{{ item.value }}</span>
+    </li>
+  </ul>
+</template>

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

@@ -0,0 +1,11 @@
+interface LegendItem {
+    value: string;
+    color?: string;
+    inactive?: boolean;
+}
+type __VLS_Props = {
+    payload?: LegendItem[];
+};
+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/ChartTooltip.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({ name: "ChartTooltip", inheritAttrs: false });
+const props = defineProps({
+  label: { type: [String, Number], required: false },
+  payload: { type: Array, required: true },
+  coordinate: { type: Object, required: false },
+  active: { type: Boolean, required: true },
+  accessibilityLayer: { type: Boolean, required: true }
+});
+const items = computed(
+  () => (props.payload ?? []).filter((p) => p.value !== null && p.value !== void 0)
+);
+function formatValue(value) {
+  if (typeof value === "number") return value.toLocaleString();
+  return String(value);
+}
+</script>
+
+<template>
+  <div
+    v-if="active && items.length"
+    class="vc-tooltip"
+  >
+    <p v-if="label !== void 0 && label !== ''" class="vc-tooltip__label">
+      {{ label }}
+    </p>
+    <ul class="vc-tooltip__list">
+      <li v-for="item in items" :key="item.dataKey" class="vc-tooltip__item">
+        <span
+          class="vc-tooltip__dot"
+          :style="{ background: item.color ?? item.fill ?? item.stroke }"
+        />
+        <span class="vc-tooltip__name">{{ item.name }}</span>
+        <span class="vc-tooltip__value">{{ formatValue(item.value) }}</span>
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,28 @@
+import { type CubeColumnBand } from "../../utils/cubes.js";
+type __VLS_Props = {
+    x?: number | null;
+    y?: number | null;
+    width?: number;
+    height?: number;
+    background?: CubeColumnBand | null;
+    fill?: string;
+    gap?: number;
+    radius?: number;
+    preferredSize?: number;
+    /** When set below preferredSize, cubes shrink from top → bottom. */
+    minSize?: number;
+    /** Floor opacity when size-tapering (top = 1). Default 0.05. */
+    minOpacity?: number;
+    emptyColor?: string;
+    /** When false, only filled cubes are emitted (stacked layers above the first). */
+    includeEmpty?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    gap: number;
+    radius: number;
+    preferredSize: number;
+    emptyColor: string;
+    includeEmpty: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from "vue";
+import {
+  DEFAULT_CUBE_EMPTY_COLOR,
+  DEFAULT_CUBE_GAP,
+  DEFAULT_CUBE_RADIUS,
+  DEFAULT_CUBE_SIZE,
+  layoutCubeColumn
+} from "../../utils/cubes";
+const props = defineProps({
+  x: { type: [Number, null], required: false },
+  y: { type: [Number, null], required: false },
+  width: { type: Number, required: false },
+  height: { type: Number, required: false },
+  background: { type: [Object, null], required: false },
+  fill: { type: String, required: false },
+  gap: { type: Number, required: false, default: DEFAULT_CUBE_GAP },
+  radius: { type: Number, required: false, default: DEFAULT_CUBE_RADIUS },
+  preferredSize: { type: Number, required: false, default: DEFAULT_CUBE_SIZE },
+  minSize: { type: Number, required: false },
+  minOpacity: { type: Number, required: false },
+  emptyColor: { type: String, required: false, default: DEFAULT_CUBE_EMPTY_COLOR },
+  includeEmpty: { type: Boolean, required: false, default: true }
+});
+const cubes = computed(() => {
+  const hasBackground = props.background && props.background.width > 0 && props.background.height > 0;
+  const hasBar = props.x != null && props.y != null && (props.width ?? 0) > 0 && (props.height ?? 0) > 0;
+  const column = hasBackground && hasBar ? {
+    x: props.x,
+    y: props.background.y,
+    width: props.width,
+    height: props.background.height
+  } : hasBackground ? props.background : hasBar ? {
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height
+  } : null;
+  if (!column) return [];
+  return layoutCubeColumn({
+    column,
+    valueHeight: Math.max(0, props.height ?? 0),
+    segmentY: hasBackground ? props.y ?? void 0 : void 0,
+    includeEmpty: props.includeEmpty,
+    gap: props.gap,
+    radius: props.radius,
+    preferredSize: props.preferredSize,
+    minSize: props.minSize,
+    minOpacity: props.minOpacity
+  });
+});
+</script>
+
+<template>
+  <g class="vc-cube-bar">
+    <rect
+      v-for="(cube, i) in cubes"
+      :key="i"
+      :x="cube.x"
+      :y="cube.y"
+      :width="cube.size"
+      :height="cube.size"
+      :rx="cube.radius"
+      :ry="cube.radius"
+      :fill="cube.filled ? fill ?? 'currentColor' : emptyColor"
+      :fill-opacity="cube.opacity"
+    />
+  </g>
+</template>

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

@@ -0,0 +1,28 @@
+import { type CubeColumnBand } from "../../utils/cubes.js";
+type __VLS_Props = {
+    x?: number | null;
+    y?: number | null;
+    width?: number;
+    height?: number;
+    background?: CubeColumnBand | null;
+    fill?: string;
+    gap?: number;
+    radius?: number;
+    preferredSize?: number;
+    /** When set below preferredSize, cubes shrink from top → bottom. */
+    minSize?: number;
+    /** Floor opacity when size-tapering (top = 1). Default 0.05. */
+    minOpacity?: number;
+    emptyColor?: string;
+    /** When false, only filled cubes are emitted (stacked layers above the first). */
+    includeEmpty?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    gap: number;
+    radius: number;
+    preferredSize: number;
+    emptyColor: string;
+    includeEmpty: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;