vue-chrts 0.0.106 → 0.0.107

package/dist/Bar/BarChart.vue.d.ts

@@ -1,21 +1,25 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
+import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
+import { PaginationPosition } from '../Line';
 
 declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<any & {
         data: T[];
+        stacked?: boolean;
         height: number;
         xLabel?: string;
         yLabel?: string;
         categories: Record<string, BulletLegendItemInterface>;
-        xFormatter: (i: number, idx: number) => string;
+        xFormatter: (i: number, idx?: number) => string | number;
         yFormatter?: (i: number, idx?: number) => string | number;
         yNumTicks?: number;
         xNumTicks?: number;
-        yAxis: string[];
+        yAxis: (keyof T)[];
         groupPadding?: number;
         barPadding?: number;
         radius?: number;
         hideLegend?: boolean;
+        orientation?: Orientation;
+        paginationPosition?: PaginationPosition;
     }, string | number | symbol>> & {} & any;
     expose(exposed: import('../../../vue/dist/vue.esm-bundler.js').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -23,3 +27,6 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
     emit: typeof __VLS_emit;
 }>) => any;
 export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/{charts-bM3o2NNr.js → charts-CO6Yq10P.js}

@@ -865,7 +865,7 @@ function* selection_iterator() {
   }
 }
 
-var root$8 = [null];
+var root$9 = [null];
 
 function Selection$1(groups, parents) {
   this._groups = groups;
@@ -873,7 +873,7 @@ function Selection$1(groups, parents) {
 }
 
 function selection() {
-  return new Selection$1([[document.documentElement]], root$8);
+  return new Selection$1([[document.documentElement]], root$9);
 }
 
 function selection_selection() {
@@ -922,7 +922,7 @@ Selection$1.prototype = selection.prototype = {
 function select(selector) {
   return typeof selector === "string"
       ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
-      : new Selection$1([[selector]], root$8);
+      : new Selection$1([[selector]], root$9);
 }
 
 function sourceEvent(event) {
@@ -9200,7 +9200,7 @@ const TooltipDefaultConfig = {
     className: undefined,
 };
 
-const root$7 = css `
+const root$8 = css `
   label: tooltip;
   display: inline-block;
   left: 0;
@@ -9222,7 +9222,7 @@ const root$7 = css `
 /**
  * @deprecated This selector is deprecated and will be removed in future versions. Use `root` instead.
  */
-const tooltip = root$7;
+const tooltip = root$8;
 const variables$2 = injectGlobal `
   :root {
     --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);
@@ -9241,7 +9241,7 @@ const variables$2 = injectGlobal `
     --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);
   }
 
-  body.theme-dark ${`.${root$7}`} {
+  body.theme-dark ${`.${root$8}`} {
     --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);
     --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);
     --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);
@@ -9271,12 +9271,12 @@ const nonInteractive = css `
   user-select: none;
 `;
 
-const style$7 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+const style$8 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   hidden,
   nonInteractive,
   positionFixed,
-  root: root$7,
+  root: root$8,
   show,
   tooltip,
   variables: variables$2
@@ -9290,7 +9290,7 @@ class Tooltip {
         this._setContainerPositionThrottled = throttle(this._setContainerPosition, 500);
         this._isShown = false;
         this.element = document.createElement('div');
-        this.div = select(this.element).attr('class', root$7);
+        this.div = select(this.element).attr('class', root$8);
         this.setConfig(config);
         this.components = this.config.components;
         // Set up MutationObserver to automatically re-position the tooltip
@@ -9605,7 +9605,7 @@ class Tooltip {
         (_a = this.div) === null || _a === void 0 ? void 0 : _a.remove();
     }
 }
-Tooltip.selectors = style$7;
+Tooltip.selectors = style$8;
 
 function constant(x) {
   return function constant() {
@@ -10438,14 +10438,14 @@ const symbolTriangle = {
 
 const c$1 = -0.5;
 const s$1 = sqrt(3) / 2;
-const k = 1 / sqrt(12);
-const a = (k / 2 + 1) * 3;
+const k$1 = 1 / sqrt(12);
+const a = (k$1 / 2 + 1) * 3;
 
 const symbolWye = {
   draw(context, size) {
     const r = sqrt(size / a);
-    const x0 = r / 2, y0 = r * k;
-    const x1 = x0, y1 = r * k + r;
+    const x0 = r / 2, y0 = r * k$1;
+    const x1 = x0, y1 = r * k$1 + r;
     const x2 = -x1, y2 = y1;
     context.moveTo(x0, y0);
     context.lineTo(x1, y1);
@@ -12142,7 +12142,7 @@ const Curve = {
 
 const LineDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { curveType: CurveType.MonotoneX, lineWidth: 2, lineDashArray: undefined, fallbackValue: undefined, highlightOnHover: false, cursor: null, interpolateMissingData: false });
 
-const globalStyles$4 = injectGlobal `
+const globalStyles$5 = injectGlobal `
   :root {
     --vis-line-cursor: default;
     --vis-line-stroke-dasharray: none;
@@ -12153,7 +12153,7 @@ const globalStyles$4 = injectGlobal `
     --vis-line-gapfill-stroke-dashoffset: 0;
   }
 `;
-const root$6 = css `
+const root$7 = css `
   label: line-component;
 `;
 const line$1 = css `
@@ -12184,15 +12184,15 @@ const interpolatedPath = css `
   stroke-opacity: var(--vis-line-gapfill-stroke-opacity);
 `;
 
-const style$6 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+const style$7 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
   dim,
-  globalStyles: globalStyles$4,
+  globalStyles: globalStyles$5,
   interpolatedPath,
   line: line$1,
   linePath,
   lineSelectionHelper,
-  root: root$6
+  root: root$7
 }, Symbol.toStringTag, { value: 'Module' }));
 
 class Line extends XYComponentCore {
@@ -12369,7 +12369,7 @@ class Line extends XYComponentCore {
         }
     }
 }
-Line.selectors = style$6;
+Line.selectors = style$7;
 
 /*
  * Generate SVG path for rectangle with rounded corners
@@ -12412,6 +12412,254 @@ function roundedRectPath({ x, y, w, h, tl = false, tr = false, bl = false, br =
     return path;
 }
 
+const StackedBarDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, barMaxWidth: undefined, barWidth: undefined, dataStep: undefined, barPadding: 0.0, roundedCorners: 2, cursor: null, barMinHeight1Px: false, barMinHeightZeroValue: null, orientation: Orientation.Vertical });
+
+const root$6 = css `
+  label: stacked-bar-component;
+`;
+const globalStyles$4 = injectGlobal `
+  :root {
+    --vis-stacked-bar-cursor: default;
+    --vis-stacked-bar-fill-color: var(--vis-color-main);
+    --vis-stacked-bar-stroke-color: none;
+    --vis-stacked-bar-stroke-width: 0px;
+    --vis-stacked-bar-hover-stroke-width: none;
+    --vis-stacked-bar-hover-stroke-color: none;
+
+    /* Dark Theme */
+    --vis-dark-stacked-bar-stroke-color: none;
+  }
+
+  body.theme-dark ${`.${root$6}`} {
+    --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);
+  }
+`;
+const bar$1 = css `
+  label: bar;
+  fill: var(--vis-stacked-bar-fill-color);
+  stroke: var(--vis-stacked-bar-stroke-color);
+  stroke-width: var(--vis-stacked-bar-stroke-width);
+  cursor: var(--vis-stacked-bar-cursor);
+
+  &:hover {
+    stroke-width: var(--vis-stacked-bar-hover-stroke-width);
+    stroke: var(--vis-stacked-bar-hover-stroke-color);
+  }
+`;
+const barGroup$1 = css `
+  label: barGroup;
+`;
+const barGroupExit$1 = css `
+  label: barGroupExit;
+`;
+
+const style$6 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  bar: bar$1,
+  barGroup: barGroup$1,
+  barGroupExit: barGroupExit$1,
+  globalStyles: globalStyles$4,
+  root: root$6
+}, Symbol.toStringTag, { value: 'Module' }));
+
+class StackedBar extends XYComponentCore {
+    constructor(config) {
+        super();
+        this._defaultConfig = StackedBarDefaultConfig;
+        this.config = this._defaultConfig;
+        this.getAccessors = () => (isArray(this.config.y) ? this.config.y : [this.config.y]);
+        this.stacked = true;
+        this.events = {};
+        this._barData = [];
+        if (config)
+            this.setConfig(config);
+    }
+    get bleed() {
+        this._barData = this._getVisibleData();
+        if (this._barData.length === 0)
+            return { top: 0, bottom: 0, left: 0, right: 0 };
+        // By default, horizontal orientation is "flipped", i.e. the `yDirection` of `XYContainer` is set to `Direction.North`
+        const isHorizontalAndFlipped = !this.isVertical() && (this.dataScale.range()[0] > this.dataScale.range()[1]);
+        const dataDomain = this.dataScale.domain();
+        const halfGroupWidth = this._getBarWidth() / 2;
+        const dataScaleValues = this._barData.map((d, i) => getNumber(d, this.config.x, i));
+        const firstDataValue = min$1(dataScaleValues);
+        const lastDataValue = max$1(dataScaleValues);
+        const firstValuePx = this.dataScale(firstDataValue);
+        const lastValuePx = this.dataScale(lastDataValue);
+        const dataDomainRequiredStart = this.dataScale.invert(firstValuePx + (isHorizontalAndFlipped ? halfGroupWidth : -halfGroupWidth));
+        const dataDomainRequiredEnd = this.dataScale.invert(lastValuePx + (isHorizontalAndFlipped ? -halfGroupWidth : halfGroupWidth));
+        const bleedPxStart = dataDomainRequiredStart <= dataDomain[0] ? this.dataScale(dataDomain[0]) - this.dataScale(dataDomainRequiredStart) : 0;
+        const bleedPxEnd = dataDomainRequiredEnd > dataDomain[1] ? this.dataScale(dataDomainRequiredEnd) - this.dataScale(dataDomain[1]) : 0;
+        return {
+            top: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxEnd : bleedPxStart),
+            bottom: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxStart : bleedPxEnd),
+            left: this.isVertical() ? bleedPxStart : 0,
+            right: this.isVertical() ? bleedPxEnd : 0,
+        };
+    }
+    get dataScale() {
+        return this.isVertical() ? this.xScale : this.yScale;
+    }
+    get valueScale() {
+        return this.isVertical() ? this.yScale : this.xScale;
+    }
+    isVertical() {
+        return this.config.orientation === Orientation.Vertical;
+    }
+    _render(customDuration) {
+        const { config } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const yAccessors = this.getAccessors();
+        const stacked = getStackedData(this._barData, 0, yAccessors, this._prevNegative);
+        this._prevNegative = stacked.map(s => !!s.isMostlyNegative);
+        const barGroups = this.g
+            .selectAll(`.${barGroup$1}`)
+            .data(this._barData, (d, i) => { var _a; return `${(_a = getString(d, config.id, i)) !== null && _a !== void 0 ? _a : i}`; });
+        const getBarGroupsTransform = (d, i) => {
+            const v = this.dataScale(getNumber(d, config.x, i));
+            const x = this.isVertical() ? v : 0;
+            const y = this.isVertical() ? 0 : v;
+            return `translate(${x},${y})`;
+        };
+        const barGroupsEnter = barGroups.enter().append('g')
+            .attr('class', barGroup$1)
+            .attr('transform', getBarGroupsTransform)
+            .style('opacity', 1);
+        const barGroupsMerged = barGroupsEnter.merge(barGroups);
+        smartTransition(barGroupsMerged, duration)
+            .attr('transform', getBarGroupsTransform)
+            .style('opacity', 1);
+        const barGroupExit$1$1 = barGroups.exit()
+            .attr('class', barGroupExit$1);
+        smartTransition(barGroupExit$1$1, duration)
+            .style('opacity', 0)
+            .remove();
+        // Animate bars from exiting groups going down
+        smartTransition(barGroupExit$1$1.selectAll(`.${bar$1}`), duration)
+            .attr('transform', this.isVertical()
+            ? `translate(0,${this._height / 3})`
+            : `translate(${this._width / 6},0)`);
+        // Render Bars
+        const bars = barGroupsMerged
+            .selectAll(`.${bar$1}`)
+            .data((d, j) => stacked.map((s, stackIndex) => (Object.assign(Object.assign({}, d), { _index: j, _stacked: s[j], 
+            // Ending bar if the next stack is not the same as the current one
+            _ending: (stackIndex === stacked.length - 1) ||
+                ((stackIndex <= stacked.length - 1) && stacked[stackIndex + 1][j][0] !== s[j][1]) }))));
+        const barsEnter = bars.enter().append('path')
+            .attr('class', bar$1)
+            .attr('d', (d, j) => this._getBarPath(d, j, true))
+            .style('fill', (d, j) => getColor(d, config.color, j));
+        const barsMerged = barsEnter.merge(bars);
+        smartTransition(barsMerged, duration)
+            .attr('d', (d, j) => this._getBarPath(d, j))
+            .style('fill', (d, j) => getColor(d, config.color, j))
+            .style('cursor', (d, j) => getString(d, config.cursor, j));
+        smartTransition(bars.exit(), duration)
+            .style('opacity', 0)
+            .remove();
+    }
+    _getBarWidth() {
+        const { config, datamodel: { data } } = this;
+        if (isEmpty(data))
+            return 0;
+        if (config.barWidth)
+            return min$1([config.barWidth, config.barMaxWidth]);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const isOrdinal = this.dataScale.bandwidth;
+        const domain = (this.dataScale.domain ? this.dataScale.domain() : []);
+        const domainLength = isOrdinal ? domain.length : domain[1] - domain[0];
+        // If the dataStep property is provided the amount of data elements is calculates as domainLength / dataStep
+        //   otherwise we get the number of data elements within the domain range
+        // Or if the scale is ordinal we use data.length
+        let dataSize = (1 + domainLength / config.dataStep) ||
+            (!isOrdinal && data.filter((d, i) => {
+                const value = getNumber(d, config.x, i);
+                return (value >= domain[0]) && (value <= domain[1]);
+            }).length) ||
+            data.length;
+        // We increase the dataSize by 1 to take into account possible additional domain space
+        if (!isOrdinal && dataSize >= 2)
+            dataSize += 1;
+        const c = dataSize < 2 ? 1 : 1 - config.barPadding;
+        const barWidth = c * (this.isVertical() ? this._width : this._height) / dataSize;
+        return min$1([barWidth, config.barMaxWidth]);
+    }
+    _getVisibleData() {
+        const { config, datamodel: { data } } = this;
+        const groupWidth = this._getBarWidth();
+        const halfGroupWidthPx = data.length < 2 ? 0 : groupWidth / 2;
+        const scale = this.dataScale;
+        const halfGroupWidth = Math.abs(scale.invert(halfGroupWidthPx) - scale.invert(0));
+        const filtered = data === null || data === void 0 ? void 0 : data.filter((d, i) => {
+            const v = getNumber(d, config.x, i);
+            const domain = scale.domain();
+            const domainMin = +domain[0];
+            const domainMax = +domain[1];
+            return (v >= (domainMin - halfGroupWidth)) && (v <= (domainMax + halfGroupWidth));
+        });
+        return filtered;
+    }
+    _getBarPath(d, accessorIndex, isEntering = false) {
+        const { config } = this;
+        const yAccessors = this.getAccessors();
+        const barWidth = this._getBarWidth();
+        const isNegative = d._stacked[1] < 0;
+        const isEnding = d._ending; // The most top bar or, if the value is negative, the most bottom bar
+        const value = getNumber(d, yAccessors[accessorIndex], d._index);
+        const height = isEntering ? 0 : Math.abs(this.valueScale(d._stacked[0]) - this.valueScale(d._stacked[1]));
+        const h = !isEntering && config.barMinHeight1Px && (height < 1) && isFinite(value) && (value !== config.barMinHeightZeroValue) ? 1 : height;
+        const y = isEntering
+            ? this.valueScale(0)
+            : this.valueScale(isNegative ? d._stacked[0] : d._stacked[1]) - (height < 1 && config.barMinHeight1Px ? 1 : 0);
+        const x = -barWidth / 2;
+        const width = barWidth;
+        const cornerRadius = config.roundedCorners
+            ? isNumber(config.roundedCorners) ? +config.roundedCorners : width / 2
+            : 0;
+        const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(height, width) / 2);
+        const isNorthDirected = this.yScale.range()[0] > this.yScale.range()[1];
+        return roundedRectPath({
+            x: this.isVertical() ? x : y - h,
+            y: this.isVertical() ? y + (isNorthDirected ? 0 : -h) : x,
+            w: this.isVertical() ? width : h,
+            h: this.isVertical() ? h : width,
+            tl: isEnding && (this.isVertical()
+                ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
+                : isNegative),
+            tr: isEnding && (this.isVertical()
+                ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
+                : !isNegative),
+            br: isEnding && (this.isVertical()
+                ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
+                : !isNegative),
+            bl: isEnding && (this.isVertical()
+                ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
+                : isNegative),
+            r: cornerRadiusClamped,
+        });
+    }
+    getValueScaleExtent(scaleByVisibleData) {
+        const { datamodel } = this;
+        const yAccessors = this.getAccessors();
+        const data = scaleByVisibleData ? this._getVisibleData() : datamodel.data;
+        return getStackedExtent(data, ...yAccessors);
+    }
+    getDataScaleExtent() {
+        const { config, datamodel } = this;
+        return getExtent(datamodel.data, config.x);
+    }
+    getYDataExtent(scaleByVisibleData) {
+        return this.isVertical() ? this.getValueScaleExtent(scaleByVisibleData) : this.getDataScaleExtent();
+    }
+    getXDataExtent() {
+        return this.isVertical() ? this.getDataScaleExtent() : this.getValueScaleExtent(false);
+    }
+}
+StackedBar.selectors = style$6;
+
 const GroupedBarDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { color: undefined, groupMaxWidth: undefined, groupWidth: undefined, dataStep: undefined, groupPadding: 0.05, barPadding: 0.0, roundedCorners: 2, barMinHeight: 2, cursor: null, orientation: Orientation.Vertical });
 
 const root$5 = css `
@@ -15311,6 +15559,52 @@ const b = { "data-vis-component": "" }, S$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const k = { "data-vis-component": "" }, w = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    color: {},
+    barWidth: {},
+    barMaxWidth: {},
+    dataStep: {},
+    barPadding: {},
+    roundedCorners: { type: [Number, Boolean] },
+    cursor: {},
+    barMinHeight1Px: { type: Boolean },
+    barMinHeightZeroValue: {},
+    orientation: {},
+    x: {},
+    y: {},
+    id: { type: Function },
+    xScale: { type: [Object, Function] },
+    yScale: { type: [Object, Function] },
+    excludeFromDomainCalculation: { type: Boolean },
+    duration: {},
+    events: {},
+    attributes: {},
+    data: {}
+  },
+  setup(d, { expose: l }) {
+    const o$1 = inject(o), r = d, a = computed(() => o$1.data.value ?? r.data), n = m(r), t = ref();
+    return onMounted(() => {
+      nextTick(() => {
+        var e;
+        t.value = new StackedBar(n.value), (e = t.value) == null || e.setData(a.value), o$1.update(t.value);
+      });
+    }), onUnmounted(() => {
+      var e;
+      (e = t.value) == null || e.destroy(), o$1.destroy();
+    }), watch(n, (e, c) => {
+      var s;
+      f(e, c) || (s = t.value) == null || s.setConfig(n.value);
+    }), watch(a, () => {
+      var e;
+      (e = t.value) == null || e.setData(a.value);
+    }), l({
+      component: t
+    }), (e, c) => (openBlock(), createElementBlock("div", k));
+  }
+});
+
 const x = { "data-vis-component": "" }, E = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -15433,7 +15727,7 @@ const S = /* @__PURE__ */ defineComponent({
 
 (function(){try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".unovis-xy-container,.unovis-single-container{display:block;position:relative;width:100%}[data-vis-leaflet-map],[data-vis-leaflet-flow-map]{display:block;position:relative}[data-vis-bullet-legend]{display:block}")),document.head.appendChild(e);}}catch(t){console.error("vite-plugin-css-injected-by-js",t);}})();
 
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "flex items center justify-end"
 };
@@ -15547,7 +15841,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["data", "height", "svg-defs"]),
-        !_ctx.hideLegend ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+        !_ctx.hideLegend ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
           createVNode(unref(S), {
             items: Object.values(_ctx.categories)
           }, null, 8, ["items"])
@@ -15557,8 +15851,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = { class: "flex flex-col space-y-4" };
-const _hoisted_2$2 = { class: "flex items center justify-end" };
+const _hoisted_1$2 = { class: "flex flex-col space-y-4" };
+const _hoisted_2$1 = { class: "flex items center justify-end" };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "AreaStackedChart",
   props: {
@@ -15568,14 +15862,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const x = (d) => {
-      return Number.parseInt(d.date);
+      return Number.parseInt(d.time);
     };
     const y = [
       (d) => d.firstTime,
       (d) => d.returning
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createVNode(unref($), {
           data: _ctx.data,
           height: 200
@@ -15600,7 +15894,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$2, [
+        createElementVNode("div", _hoisted_2$1, [
           createVNode(unref(S), {
             items: Object.values(_ctx.categories)
           }, null, 8, ["items"])
@@ -15610,13 +15904,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = { class: "space-y-2" };
-const _hoisted_2$1 = {
-  key: 0,
-  class: "flex items center justify-end"
-};
+const _hoisted_1$1 = { class: "flex items center justify-end" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "BarChart",
+  __name: "LineChart",
   props: {
     data: {},
     height: {},
@@ -15625,18 +15915,115 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     categories: {},
     xFormatter: { type: Function },
     yFormatter: { type: Function },
+    curveType: {},
+    yNumTicks: {},
+    xNumTicks: {},
+    paginationPoisition: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const color = (key) => Object.values(props.categories)[key].color;
+    const generateTooltip = computed(() => (d) => {
+      const app = createApp(_sfc_main$5, {
+        data: d,
+        categories: props.categories
+      });
+      const container = document.createElement("div");
+      app.mount(container);
+      const html = container.innerHTML;
+      app.unmount();
+      return html;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["space-y-4 flex flex-col", {
+          "flex-col-reverse": props.paginationPoisition === "top"
+        }])
+      }, [
+        createVNode(unref($), {
+          data: _ctx.data,
+          height: _ctx.height
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(z), {
+              "horizontal-placement": unref(Position).Right,
+              "vertical-placement": unref(Position).Top
+            }, null, 8, ["horizontal-placement", "vertical-placement"]),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(props.categories), (i, iKey) => {
+              return openBlock(), createBlock(unref(S$1), {
+                key: iKey,
+                x: (_, i2) => i2,
+                y: (d) => d[i],
+                color: color(iKey),
+                "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
+              }, null, 8, ["x", "y", "color", "curve-type"]);
+            }), 128)),
+            createVNode(unref(O), {
+              type: "x",
+              "tick-format": _ctx.xFormatter,
+              "num-ticks": _ctx.xNumTicks ?? 4,
+              label: _ctx.xLabel,
+              "label-margin": 8,
+              "domain-line": false,
+              "grid-line": false
+            }, null, 8, ["tick-format", "num-ticks", "label"]),
+            createVNode(unref(O), {
+              type: "y",
+              "num-ticks": _ctx.yNumTicks ?? 4,
+              "tick-format": _ctx.yFormatter,
+              label: _ctx.yLabel,
+              "domain-line": false
+            }, null, 8, ["num-ticks", "tick-format", "label"]),
+            createVNode(unref(A), {
+              color: "#666",
+              template: generateTooltip.value
+            }, null, 8, ["template"])
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        createElementVNode("div", _hoisted_1$1, [
+          createVNode(unref(S), {
+            items: Object.values(_ctx.categories)
+          }, null, 8, ["items"])
+        ])
+      ], 2);
+    };
+  }
+});
+
+var PaginationPosition = /* @__PURE__ */ ((PaginationPosition2) => {
+  PaginationPosition2["Top"] = "top";
+  PaginationPosition2["Bottom"] = "bottom";
+  return PaginationPosition2;
+})(PaginationPosition || {});
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "BarChart",
+  props: {
+    data: {},
+    stacked: { type: Boolean },
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
     yNumTicks: {},
     xNumTicks: {},
     yAxis: {},
     groupPadding: {},
     barPadding: {},
     radius: {},
-    hideLegend: { type: Boolean }
+    hideLegend: { type: Boolean },
+    orientation: { default: Orientation.Vertical },
+    paginationPosition: { default: PaginationPosition.Bottom }
   },
   setup(__props) {
     const props = __props;
-    const yAxis = props.yAxis.map((key) => (d) => {
-      return d[key];
+    const yAxis = computed(() => {
+      return props.yAxis.map((key) => (d) => {
+        return d[key];
+      });
     });
     const color = (_, i) => Object.values(props.categories)[i].color;
     const generateTooltip = computed(() => (d) => {
@@ -15650,8 +16037,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       app.unmount();
       return html;
     });
+    const PaginationPositionTop = computed(() => props.paginationPosition === PaginationPosition.Top);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex flex-col space-y-4", { "flex-col-reverse": PaginationPositionTop.value }])
+      }, [
         createVNode(unref($), { height: _ctx.height }, {
           default: withCtx(() => [
             createVNode(unref(z), {
@@ -15659,51 +16049,69 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 [unref(GroupedBar).selectors.bar]: generateTooltip.value
               }
             }, null, 8, ["triggers"]),
-            createVNode(unref(D), {
+            !_ctx.stacked ? (openBlock(), createBlock(unref(D), {
+              key: 0,
+              data: _ctx.data,
+              x: (_, i) => i,
+              y: yAxis.value,
+              "grid-line": false,
+              "domain-line": false,
+              color,
+              "rounded-corners": _ctx.radius ?? 0,
+              "group-padding": _ctx.groupPadding ?? 0,
+              "bar-padding": _ctx.barPadding ?? 0.2,
+              orientation: _ctx.orientation ?? unref(Orientation).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (openBlock(), createBlock(unref(w), {
+              key: 1,
               data: _ctx.data,
               x: (_, i) => i,
-              y: unref(yAxis),
+              y: yAxis.value,
               "grid-line": false,
               "domain-line": false,
               color,
               "rounded-corners": _ctx.radius ?? 0,
               "group-padding": _ctx.groupPadding ?? 0,
-              "bar-padding": _ctx.barPadding ?? 0
-            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding"]),
+              "bar-padding": _ctx.barPadding ?? 0.2,
+              orientation: _ctx.orientation ?? unref(Orientation).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
             createVNode(unref(O), {
               type: "x",
               label: _ctx.xLabel,
               "grid-line": false,
               "domain-line": false,
               "tick-format": _ctx.xFormatter,
-              "num-ticks": _ctx.xNumTicks
+              "num-ticks": _ctx.xNumTicks,
+              "tick-line": false
             }, null, 8, ["label", "tick-format", "num-ticks"]),
             createVNode(unref(O), {
               type: "y",
               label: _ctx.yLabel,
-              "grid-line": true,
+              "grid-line": _ctx.orientation !== unref(Orientation).Horizontal,
               "domain-line": false,
               "tick-format": _ctx.yFormatter
-            }, null, 8, ["label", "tick-format"])
+            }, null, 8, ["label", "grid-line", "tick-format"])
           ]),
           _: 1
         }, 8, ["height"]),
-        !_ctx.hideLegend ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+        !_ctx.hideLegend ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["flex items center justify-end", { "pb-4": PaginationPositionTop.value }])
+        }, [
           createVNode(unref(S), {
             items: Object.values(_ctx.categories)
           }, null, 8, ["items"])
-        ])) : createCommentVNode("", true)
-      ]);
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
 
-const _hoisted_1$1 = { class: "flex items-center justify-center" };
+const _hoisted_1 = { class: "flex items-center justify-center" };
 const _hoisted_2 = {
   key: 0,
   class: "flex items-center justify-center mt-4"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DonutChart",
   props: {
     type: {},
@@ -15729,7 +16137,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_1, [
           createVNode(unref(b$2), {
             class: normalizeClass(isHalf ? "mt-24" : ""),
             data: _ctx.data,
@@ -15761,97 +16169,4 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = { class: "flex items center justify-end" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LineChart",
-  props: {
-    data: {},
-    height: {},
-    xLabel: {},
-    yLabel: {},
-    categories: {},
-    xFormatter: { type: Function },
-    yFormatter: { type: Function },
-    curveType: {},
-    yNumTicks: {},
-    xNumTicks: {},
-    paginationPoisition: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const color = (key) => Object.values(props.categories)[key].color;
-    const generateTooltip = computed(() => (d) => {
-      const app = createApp(_sfc_main$5, {
-        data: d,
-        categories: props.categories
-      });
-      const container = document.createElement("div");
-      app.mount(container);
-      const html = container.innerHTML;
-      app.unmount();
-      return html;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["space-y-4 flex flex-col", {
-          "flex-col-reverse": props.paginationPoisition === "top"
-        }])
-      }, [
-        createVNode(unref($), {
-          data: _ctx.data,
-          height: _ctx.height
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(z), {
-              "horizontal-placement": unref(Position).Right,
-              "vertical-placement": unref(Position).Top
-            }, null, 8, ["horizontal-placement", "vertical-placement"]),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(props.categories), (i, iKey) => {
-              return openBlock(), createBlock(unref(S$1), {
-                key: iKey,
-                x: (_, i2) => i2,
-                y: (d) => d[i],
-                color: color(iKey),
-                "curve-type": _ctx.curveType ?? unref(CurveType).MonotoneX
-              }, null, 8, ["x", "y", "color", "curve-type"]);
-            }), 128)),
-            createVNode(unref(O), {
-              type: "x",
-              "tick-format": _ctx.xFormatter,
-              "num-ticks": _ctx.xNumTicks ?? 4,
-              label: _ctx.xLabel,
-              "label-margin": 8,
-              "domain-line": false,
-              "grid-line": false
-            }, null, 8, ["tick-format", "num-ticks", "label"]),
-            createVNode(unref(O), {
-              type: "y",
-              "num-ticks": _ctx.yNumTicks ?? 4,
-              "tick-format": _ctx.yFormatter,
-              label: _ctx.yLabel,
-              "domain-line": false
-            }, null, 8, ["num-ticks", "tick-format", "label"]),
-            createVNode(unref(A), {
-              color: "#666",
-              template: generateTooltip.value
-            }, null, 8, ["template"])
-          ]),
-          _: 1
-        }, 8, ["data", "height"]),
-        createElementVNode("div", _hoisted_1, [
-          createVNode(unref(S), {
-            items: Object.values(_ctx.categories)
-          }, null, 8, ["items"])
-        ])
-      ], 2);
-    };
-  }
-});
-
-var PaginationPosition = /* @__PURE__ */ ((PaginationPosition2) => {
-  PaginationPosition2["Top"] = "top";
-  PaginationPosition2["Bottom"] = "bottom";
-  return PaginationPosition2;
-})(PaginationPosition || {});
-
-export { _sfc_main$4 as AreaChart, _sfc_main$3 as AreaStackedChart, _sfc_main$2 as BarChart, _sfc_main$1 as DonutChart, _sfc_main as LineChart, PaginationPosition };
+export { _sfc_main$4 as AreaChart, _sfc_main$3 as AreaStackedChart, _sfc_main$1 as BarChart, _sfc_main as DonutChart, _sfc_main$2 as LineChart, PaginationPosition };

package/dist/index.d.ts

@@ -4,5 +4,5 @@ import { default as Status } from './Status/Status.vue';
 import { default as Tooltip } from './Tooltip/Tooltip.vue';
 
 export { Progress, Status, Tooltip };
-export declare const loadCharts: () => Promise<ChartModule | {}>;
+export declare const loadCharts: () => Promise<ChartModule>;
 export type LoadCharts = typeof loadCharts;

package/dist/index.js

@@ -183,7 +183,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const loadCharts = () => {
   if (import.meta.client || typeof window !== "undefined") {
-    return import('./charts-bM3o2NNr.js').then((module) => {
+    return import('./charts-CO6Yq10P.js').then((module) => {
       return module;
     });
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chrts",
   "type": "module",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "license": "MIT",
   "files": [
     "dist"