vue-chrts 0.1.0-beta.2-internal-15 → 0.1.0-beta.2-internal-16

package/dist/components/Area/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from \"../../utils\";\nimport {\n  type NumericAccessor,\n  BulletLegendItemInterface,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nexport interface AreaChartProps<T> {\n  /**\n   * The data to be displayed in the area chart.\n   * Each element of the array represents a data point.\n   * The structure of 'T' should be compatible with the chart's rendering logic.\n   */\n  data: T[];\n  /**\n   * The height of the chart in pixels.\n   */\n  height: number;\n  /**\n   * Optional label for the x-axis.\n   */\n  xLabel?: string;\n  /**\n   * Optional label for the y-axis.\n   */\n  yLabel?: string;\n  /**\n   * A record mapping category keys to `BulletLegendItemInterface` objects.\n   * This defines the visual representation and labels for each category in the chart's legend.\n   */\n  categories: Record<string, BulletLegendItemInterface>;\n  /**\n   * A function that formats the x-axis tick labels.\n   * @param item The x-axis value to be formatted.\n   * @returns The formatted x-axis label.\n   */\n  xFormatter: (item: T) => string | number;\n  /**\n   * An optional function that formats the y-axis tick labels.\n   * @param i The value to be formatted.\n   * @param idx The index of the data point (optional).\n   * @returns The formatted y-axis label or value.\n   */\n  yFormatter?: (i: number, idx?: number) => string | number;\n  /**\n   * The type of curve to use for the area chart lines.\n   * See `CurveType` for available options.\n   */\n  curveType?: CurveType;\n  /**\n   * The desired number of ticks on the x-axis.\n   */\n  xNumTicks?: number;\n  /**\n   * The desired number of ticks on the y-axis.\n   */\n  yNumTicks?: number;\n  /**\n   * If `true`, hides the chart legend.\n   */\n  hideLegend?: boolean;\n  /**\n   * If `true`, hides the chart tooltip.\n   */\n  hideTooltip?: boolean;\n  /**\n   * If `true`, displays grid lines along the x-axis.\n   */\n  gridLineX?: boolean;\n  /**\n   * If `true`, displays a domain line (axis line) along the x-axis.\n   */\n  domainLineX?: boolean;\n  /**\n   * If `true`, displays grid lines along the y-axis.\n   */\n  gridLineY?: boolean;\n  /**\n   * If `true`, displays a domain line (axis line) along the y-axis.\n   */\n  domainLineY?: boolean;\n  /**\n   * Optional position for pagination controls, if applicable.\n   * See `PaginationPosition` for available options.\n   */\n  paginationPosition?: PaginationPosition;\n}\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return \"\";\n  }\n\n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return \"\";\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>\n  getDistributedIndices(props.data.length, props.xNumTicks)\n);\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n});\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer\n      :data=\"filteredDataByIndices\"\n      :height=\"height\"\n      :svg-defs=\"svgDefs\"\n    >\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"6sBAsGA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,EAAA,SAAS,IAC3BgB,EAAsB,sBAAArB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAC1D,EAEMsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}
+{"version":3,"file":"AreaChart.cjs","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\n  type NumericAccessor,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nimport { AreaChartProps } from \"./types\";\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return \"\";\n  }\n\n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return \"\";\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\n\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer :data=\"filteredDataByIndices\" :height=\"height\" :svg-defs=\"svgDefs\">\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":"6sBAsBA,MAAMA,EAAQC,EAORC,EAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAKG,GAAMA,EAAE,KAAK,EAE3DC,EAAkBC,EAAAA,SAAS,IAAOC,GAAS,CAC/C,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAChD,MAAA,GAGL,GAAA,CACI,MAAAC,EAAMC,YAAUC,UAAS,CAC7B,KAAMH,EACN,WAAYN,EAAM,UAAA,CACnB,EAEKU,EAAY,SAAS,cAAc,KAAK,EAC9CH,EAAI,MAAMG,CAAS,EAEnB,MAAMC,EAAOD,EAAU,UACvB,OAAAH,EAAI,QAAQ,EAELI,OACO,CACP,MAAA,EAAA,CACT,CACD,EAED,SAASC,EAAUC,EAAsD,OAChE,MAAA,CACL,EAAIP,GAAS,OAAOA,EAAEO,CAAoB,CAAC,EAC3C,QAAOC,EAAAd,EAAM,WAAWa,CAAE,IAAnB,YAAAC,EAAsB,QAAS,SACxC,CAAA,CAGF,MAAMC,EAAUb,EACb,IACC,CAACc,EAAOC,IAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA,CAAA,EAIxC,KAAK,EAAE,EAEJE,EAAwBb,EAAA,SAC5B,IAAML,EAAM,qBAAuBmB,qBAAmB,GACxD,EAEMC,EAAcf,WAAS,IAAOgB,wBAAsBrB,EAAM,KAAK,OAAQA,EAAM,SAAS,CAAC,EAEvFsB,EAAwBjB,EAAAA,SAAS,IAAM,OACvC,MAAA,GAACS,EAAAd,EAAM,OAAN,MAAAc,EAAY,SAAU,CAACM,GAAeA,EAAY,MAAM,SAAW,EAC/D,CAAC,EAEHA,EAAY,MAAM,IAAKH,GAAUjB,EAAM,KAAKiB,CAAK,CAAC,CAAA,CAC1D"}

package/dist/components/Area/AreaChart.d.ts

@@ -1,94 +1,12 @@
-import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
-import { PaginationPosition } from '../../types';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
+import { AreaChartProps } from './types';
 
-export interface AreaChartProps<T> {
-    /**
-     * The data to be displayed in the area chart.
-     * Each element of the array represents a data point.
-     * The structure of 'T' should be compatible with the chart's rendering logic.
-     */
-    data: T[];
-    /**
-     * The height of the chart in pixels.
-     */
-    height: number;
-    /**
-     * Optional label for the x-axis.
-     */
-    xLabel?: string;
-    /**
-     * Optional label for the y-axis.
-     */
-    yLabel?: string;
-    /**
-     * A record mapping category keys to `BulletLegendItemInterface` objects.
-     * This defines the visual representation and labels for each category in the chart's legend.
-     */
-    categories: Record<string, BulletLegendItemInterface>;
-    /**
-     * A function that formats the x-axis tick labels.
-     * @param item The x-axis value to be formatted.
-     * @returns The formatted x-axis label.
-     */
-    xFormatter: (item: T) => string | number;
-    /**
-     * An optional function that formats the y-axis tick labels.
-     * @param i The value to be formatted.
-     * @param idx The index of the data point (optional).
-     * @returns The formatted y-axis label or value.
-     */
-    yFormatter?: (i: number, idx?: number) => string | number;
-    /**
-     * The type of curve to use for the area chart lines.
-     * See `CurveType` for available options.
-     */
-    curveType?: CurveType;
-    /**
-     * The desired number of ticks on the x-axis.
-     */
-    xNumTicks?: number;
-    /**
-     * The desired number of ticks on the y-axis.
-     */
-    yNumTicks?: number;
-    /**
-     * If `true`, hides the chart legend.
-     */
-    hideLegend?: boolean;
-    /**
-     * If `true`, hides the chart tooltip.
-     */
-    hideTooltip?: boolean;
-    /**
-     * If `true`, displays grid lines along the x-axis.
-     */
-    gridLineX?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the x-axis.
-     */
-    domainLineX?: boolean;
-    /**
-     * If `true`, displays grid lines along the y-axis.
-     */
-    gridLineY?: boolean;
-    /**
-     * If `true`, displays a domain line (axis line) along the y-axis.
-     */
-    domainLineY?: boolean;
-    /**
-     * Optional position for pagination controls, if applicable.
-     * See `PaginationPosition` for available options.
-     */
-    paginationPosition?: PaginationPosition;
-}
 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<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & AreaChartProps<T>, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: typeof __VLS_emit;
-}>) => VNode<RendererNode, RendererElement, {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/components/Area/AreaChart.js

@@ -57,9 +57,7 @@ const Q = /* @__PURE__ */ X({
 `
     ).join(""), h = c(
       () => i.paginationPosition === E.Top
-    ), m = c(
-      () => F(i.data.length, i.xNumTicks)
-    ), p = c(() => {
+    ), m = c(() => F(i.data.length, i.xNumTicks)), p = c(() => {
       var e;
       return !((e = i.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((o) => i.data[o]);
     });

package/dist/components/Area/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from \"../../utils\";\nimport {\n  type NumericAccessor,\n  BulletLegendItemInterface,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nexport interface AreaChartProps<T> {\n  /**\n   * The data to be displayed in the area chart.\n   * Each element of the array represents a data point.\n   * The structure of 'T' should be compatible with the chart's rendering logic.\n   */\n  data: T[];\n  /**\n   * The height of the chart in pixels.\n   */\n  height: number;\n  /**\n   * Optional label for the x-axis.\n   */\n  xLabel?: string;\n  /**\n   * Optional label for the y-axis.\n   */\n  yLabel?: string;\n  /**\n   * A record mapping category keys to `BulletLegendItemInterface` objects.\n   * This defines the visual representation and labels for each category in the chart's legend.\n   */\n  categories: Record<string, BulletLegendItemInterface>;\n  /**\n   * A function that formats the x-axis tick labels.\n   * @param item The x-axis value to be formatted.\n   * @returns The formatted x-axis label.\n   */\n  xFormatter: (item: T) => string | number;\n  /**\n   * An optional function that formats the y-axis tick labels.\n   * @param i The value to be formatted.\n   * @param idx The index of the data point (optional).\n   * @returns The formatted y-axis label or value.\n   */\n  yFormatter?: (i: number, idx?: number) => string | number;\n  /**\n   * The type of curve to use for the area chart lines.\n   * See `CurveType` for available options.\n   */\n  curveType?: CurveType;\n  /**\n   * The desired number of ticks on the x-axis.\n   */\n  xNumTicks?: number;\n  /**\n   * The desired number of ticks on the y-axis.\n   */\n  yNumTicks?: number;\n  /**\n   * If `true`, hides the chart legend.\n   */\n  hideLegend?: boolean;\n  /**\n   * If `true`, hides the chart tooltip.\n   */\n  hideTooltip?: boolean;\n  /**\n   * If `true`, displays grid lines along the x-axis.\n   */\n  gridLineX?: boolean;\n  /**\n   * If `true`, displays a domain line (axis line) along the x-axis.\n   */\n  domainLineX?: boolean;\n  /**\n   * If `true`, displays grid lines along the y-axis.\n   */\n  gridLineY?: boolean;\n  /**\n   * If `true`, displays a domain line (axis line) along the y-axis.\n   */\n  domainLineY?: boolean;\n  /**\n   * Optional position for pagination controls, if applicable.\n   * See `PaginationPosition` for available options.\n   */\n  paginationPosition?: PaginationPosition;\n}\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return \"\";\n  }\n\n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return \"\";\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>\n  getDistributedIndices(props.data.length, props.xNumTicks)\n);\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n});\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer\n      :data=\"filteredDataByIndices\"\n      :height=\"height\"\n      :svg-defs=\"svgDefs\"\n    >\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE,GAEJE,IAAwBb;AAAA,MAC5B,MAAML,EAAM,uBAAuBmB,EAAmB;AAAA,IACxD,GAEMC,IAAcf;AAAA,MAAS,MAC3BgB,EAAsBrB,EAAM,KAAK,QAAQA,EAAM,SAAS;AAAA,IAC1D,GAEMsB,IAAwBjB,EAAS,MAAM;;AACvC,aAAA,GAACS,IAAAd,EAAM,SAAN,QAAAc,EAAY,WAAU,CAACM,KAAeA,EAAY,MAAM,WAAW,IAC/D,CAAC,IAEHA,EAAY,MAAM,IAAI,CAACH,MAAUjB,EAAM,KAAKiB,CAAK,CAAC;AAAA,IAAA,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AreaChart.js","sources":["../../../src/components/Area/AreaChart.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, createApp } from \"vue\";\nimport { getDistributedIndices } from '../../utils'\nimport {\n  type NumericAccessor,\n  CurveType,\n  Position,\n} from \"@unovis/ts\";\nimport {\n  VisArea,\n  VisAxis,\n  VisBulletLegend,\n  VisCrosshair,\n  VisLine,\n  VisTooltip,\n  VisXYContainer,\n} from \"@unovis/vue\";\n\nimport Tooltip from \"./../Tooltip.vue\";\nimport { PaginationPosition } from \"../../types\";\nimport { AreaChartProps } from \"./types\";\n\nconst props = withDefaults(defineProps<AreaChartProps<T>>(), {\n  xNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n  yNumTicks: (props) =>\n    props.data.length > 24 ? 24 / 4 : props.data.length - 1,\n});\n\nconst colors = Object.values(props.categories).map((c) => c.color);\n\nconst generateTooltip = computed(() => (d: T) => {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return \"\";\n  }\n\n  try {\n    const app = createApp(Tooltip, {\n      data: d,\n      categories: props.categories,\n    });\n\n    const container = document.createElement(\"div\");\n    app.mount(container);\n\n    const html = container.innerHTML;\n    app.unmount();\n\n    return html;\n  } catch (error) {\n    return \"\";\n  }\n});\n\nfunction accessors(id: string): { y: NumericAccessor<T>; color: string } {\n  return {\n    y: (d: T) => Number(d[id as keyof typeof d]),\n    color: props.categories[id]?.color ?? \"#3b82f6\",\n  };\n}\n\nconst svgDefs = colors\n  .map(\n    (color, index) => `\n  <linearGradient id=\"gradient${index}-${color}\" gradientTransform=\"rotate(90)\">\n    <stop offset=\"0%\" stop-color=\"${color}\" stop-opacity=\"1\" />\n    <stop offset=\"100%\" stop-color=\"${color}\" stop-opacity=\"0\" />\n  </linearGradient>\n`\n  )\n  .join(\"\");\n\nconst PaginationPositionTop = computed(\n  () => props.paginationPosition === PaginationPosition.Top\n);\n\nconst tickIndices = computed(() =>  getDistributedIndices(props.data.length, props.xNumTicks))\n\nconst filteredDataByIndices = computed(() => {\n  if (!props.data?.length || !tickIndices || tickIndices.value.length === 0) {\n    return [];\n  }\n  return tickIndices.value.map((index) => props.data[index]);\n})\n\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col space-y-4\"\n    :class=\"{ 'flex-col-reverse': PaginationPositionTop }\"\n  >\n    <VisXYContainer :data=\"filteredDataByIndices\" :height=\"height\" :svg-defs=\"svgDefs\">\n      <VisTooltip\n        v-if=\"!hideTooltip\"\n        :horizontal-placement=\"Position.Right\"\n        :vertical-placement=\"Position.Top\"\n      />\n      <template v-for=\"(i, iKey) in Object.keys(props.categories)\" :key=\"iKey\">\n        <VisArea\n          :x=\"(_: T, i: number) => i\"\n          v-bind=\"accessors(i)\"\n          :color=\"`url(#gradient${iKey}-${colors[iKey]})`\"\n          :opacity=\"0.5\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n        <VisLine\n          :x=\"(_: any, i: number) => i\"\n          :y=\"(d: T) => d[i as keyof typeof d]\"\n          :color=\"colors[iKey]\"\n          :curve-type=\"curveType ?? CurveType.MonotoneX\"\n        />\n      </template>\n\n      <VisAxis\n        type=\"x\"\n        :num-ticks=\"filteredDataByIndices.length\"\n        :tick-format=\"(i: number) => xFormatter(filteredDataByIndices[i])\"\n        :label=\"xLabel\"\n        :grid-line=\"gridLineX\"\n        :domain-line=\"domainLineX\"\n        :tick-line=\"!!gridLineX\"\n      />\n      <VisAxis\n        type=\"y\"\n        :num-ticks=\"yNumTicks\"\n        :tick-format=\"yFormatter\"\n        :label=\"yLabel\"\n        :grid-line=\"gridLineY\"\n        :domain-line=\"domainLineY\"\n        :tick-line=\"!!gridLineY\"\n      />\n      <VisCrosshair\n        v-if=\"!hideTooltip\"\n        color=\"#666\"\n        :template=\"generateTooltip\"\n      />\n    </VisXYContainer>\n    <div\n      v-if=\"!hideLegend\"\n      class=\"flex items center justify-end\"\n      :class=\"{ 'pb-4': PaginationPositionTop }\"\n    >\n      <VisBulletLegend :items=\"Object.values(categories)\" />\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","colors","c","generateTooltip","computed","d","app","createApp","Tooltip","container","html","accessors","id","_a","svgDefs","color","index","PaginationPositionTop","PaginationPosition","tickIndices","getDistributedIndices","filteredDataByIndices"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,UAAMA,IAAQC,GAORC,IAAS,OAAO,OAAOF,EAAM,UAAU,EAAE,IAAI,CAACG,MAAMA,EAAE,KAAK,GAE3DC,IAAkBC,EAAS,MAAM,CAACC,MAAS;AAC/C,UAAI,OAAO,SAAW,OAAe,OAAO,WAAa;AAChD,eAAA;AAGL,UAAA;AACI,cAAAC,IAAMC,EAAUC,GAAS;AAAA,UAC7B,MAAMH;AAAA,UACN,YAAYN,EAAM;AAAA,QAAA,CACnB,GAEKU,IAAY,SAAS,cAAc,KAAK;AAC9C,QAAAH,EAAI,MAAMG,CAAS;AAEnB,cAAMC,IAAOD,EAAU;AACvB,eAAAH,EAAI,QAAQ,GAELI;AAAA,cACO;AACP,eAAA;AAAA,MAAA;AAAA,IACT,CACD;AAED,aAASC,EAAUC,GAAsD;;AAChE,aAAA;AAAA,QACL,GAAG,CAACP,MAAS,OAAOA,EAAEO,CAAoB,CAAC;AAAA,QAC3C,SAAOC,IAAAd,EAAM,WAAWa,CAAE,MAAnB,gBAAAC,EAAsB,UAAS;AAAA,MACxC;AAAA,IAAA;AAGF,UAAMC,IAAUb,EACb;AAAA,MACC,CAACc,GAAOC,MAAU;AAAA,gCACUA,CAAK,IAAID,CAAK;AAAA,oCACVA,CAAK;AAAA,sCACHA,CAAK;AAAA;AAAA;AAAA,IAAA,EAIxC,KAAK,EAAE,GAEJE,IAAwBb;AAAA,MAC5B,MAAML,EAAM,uBAAuBmB,EAAmB;AAAA,IACxD,GAEMC,IAAcf,EAAS,MAAOgB,EAAsBrB,EAAM,KAAK,QAAQA,EAAM,SAAS,CAAC,GAEvFsB,IAAwBjB,EAAS,MAAM;;AACvC,aAAA,GAACS,IAAAd,EAAM,SAAN,QAAAc,EAAY,WAAU,CAACM,KAAeA,EAAY,MAAM,WAAW,IAC/D,CAAC,IAEHA,EAAY,MAAM,IAAI,CAACH,MAAUjB,EAAM,KAAKiB,CAAK,CAAC;AAAA,IAAA,CAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Area/index.d.ts

@@ -1 +1,2 @@
 export { default as AreaChart } from './AreaChart';
+export * from './types';

package/dist/components/Area/types.d.ts

@@ -0,0 +1,83 @@
+import { PaginationPosition } from '../../types';
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
+
+export interface AreaChartProps<T> {
+    /**
+     * The data to be displayed in the area chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: string;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * A function that formats the x-axis tick labels.
+     * @param item The x-axis value to be formatted.
+     * @returns The formatted x-axis label.
+     */
+    xFormatter: (item: T) => string | number;
+    /**
+     * An optional function that formats the y-axis tick labels.
+     * @param i The value to be formatted.
+     * @param idx The index of the data point (optional).
+     * @returns The formatted y-axis label or value.
+     */
+    yFormatter?: (i: number, idx?: number) => string | number;
+    /**
+     * The type of curve to use for the area chart lines.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    gridLineX?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    domainLineX?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    gridLineY?: boolean;
+    /**
+     * If `true`, displays a domain line (axis line) along the y-axis.
+     */
+    domainLineY?: boolean;
+    /**
+     * Optional position for pagination controls, if applicable.
+     * See `PaginationPosition` for available options.
+     */
+    paginationPosition?: PaginationPosition;
+}

package/dist/components/AreaStacked/AreaStackedChart.d.ts

@@ -1,5 +1,4 @@
 import { BulletLegendItemInterface } from '@unovis/ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
 
 export type AreaStackedChartProps<T> = {
     data: T[];
@@ -8,12 +7,12 @@ export type AreaStackedChartProps<T> = {
     hideTooltip?: boolean;
 };
 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<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & AreaStackedChartProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: typeof __VLS_emit;
-}>) => VNode<RendererNode, RendererElement, {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -1,9 +1,8 @@
 import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
 import { PaginationPosition } from '../../types';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
 
 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<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
         data: T[];
         stacked?: boolean;
         height: number;
@@ -21,12 +20,12 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         hideLegend?: boolean;
         orientation?: Orientation;
         paginationPosition?: PaginationPosition;
-    }, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: typeof __VLS_emit;
-}>) => VNode<RendererNode, RendererElement, {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/components/Crosshair/Crosshair.d.ts

@@ -1,30 +1,30 @@
 import { BulletLegendItemInterface } from '@unovis/ts';
-import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+import { Component } from 'vue';
 
-declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     colors: string[];
     index: string;
     items: BulletLegendItemInterface[];
     customTooltip?: Component;
 }>, {
-    colors: () => never[];
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    colors: () => any[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     colors: string[];
     index: string;
     items: BulletLegendItemInterface[];
     customTooltip?: Component;
 }>, {
-    colors: () => never[];
+    colors: () => any[];
 }>>> & Readonly<{}>, {
     colors: string[];
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
-        type: PropType<T[K]>;
+        type: import('vue').PropType<T[K]>;
         required: true;
     };
 };

package/dist/components/Donut/DonutChart.d.ts

@@ -1,18 +1,17 @@
 import { DonutChartProps } from '.';
-import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
-declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DonutChartProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
-        type: PropType<T[K]>;
+        type: import('vue').PropType<T[K]>;
         required: true;
     };
 };

package/dist/components/Line/LineChart.d.ts

@@ -1,9 +1,8 @@
 import { CurveType, BulletLegendItemInterface } from '@unovis/ts';
 import { PaginationPosition } from '../../types';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
 
 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<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
         data: T[];
         height: number;
         xLabel?: string;
@@ -15,12 +14,12 @@ declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], _
         yNumTicks?: number;
         xNumTicks?: number;
         paginationPosition?: PaginationPosition;
-    }, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: typeof __VLS_emit;
-}>) => VNode<RendererNode, RendererElement, {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/components/Tooltip.d.ts

@@ -1,16 +1,15 @@
 import { BulletLegendItemInterface } from '@unovis/ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowUnwrapRef, VNode, RendererNode, RendererElement } from 'vue';
 
 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<(Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>) & {
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
         data: T;
         categories: Record<string, BulletLegendItemInterface>;
-    }, keyof VNodeProps | keyof AllowedComponentProps>> & {} & ( VNodeProps & AllowedComponentProps & ComponentCustomProps);
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: typeof __VLS_emit;
-}>) => VNode<RendererNode, RendererElement, {
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/components.d.ts

@@ -0,0 +1,6 @@
+export * from './components/Area';
+export * from './components/AreaStacked';
+export * from './components/Line';
+export * from './components/Bar';
+export * from './components/Donut';
+export * from './components/Crosshair';

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components/Area/AreaChart.cjs"),r=require("./components/Donut/index.cjs"),u=require("./types.cjs"),e=require("@unovis/ts"),a=require("./components/AreaStacked/AreaStackedChart.cjs"),i=require("./components/Bar/BarChart.cjs"),n=require("./components/Crosshair/Crosshair.cjs"),_=require("./components/Donut/DonutChart.cjs"),o=require("./components/Line/LineChart.cjs");exports.AreaChart=t.default;exports.DonutType=r.DonutType;exports.PaginationPosition=u.PaginationPosition;Object.defineProperty(exports,"CurveType",{enumerable:!0,get:()=>e.CurveType});Object.defineProperty(exports,"Orientation",{enumerable:!0,get:()=>e.Orientation});Object.defineProperty(exports,"Position",{enumerable:!0,get:()=>e.Position});exports.AreaStackedChart=a.default;exports.BarChart=i.default;exports.Crosshair=n.default;exports.DonutChart=_.default;exports.LineChart=o.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@unovis/ts"),u=require("./components/Area/AreaChart.cjs"),_=require("./components/AreaStacked/AreaStackedChart.cjs"),a=require("./components/Line/LineChart.cjs"),n=require("./components/Bar/BarChart.cjs"),i=require("./components/Donut/DonutChart.cjs"),o=require("./components/Crosshair/Crosshair.cjs"),s=require("./components/Donut/index.cjs");var r=(e=>(e.Top="top",e.Bottom="bottom",e))(r||{});Object.defineProperty(exports,"CurveType",{enumerable:!0,get:()=>t.CurveType});Object.defineProperty(exports,"Orientation",{enumerable:!0,get:()=>t.Orientation});Object.defineProperty(exports,"Position",{enumerable:!0,get:()=>t.Position});exports.AreaChart=u.default;exports.AreaStackedChart=_.default;exports.LineChart=a.default;exports.BarChart=n.default;exports.DonutChart=i.default;exports.Crosshair=o.default;exports.DonutType=s.DonutType;exports.PaginationPosition=r;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n\nexport { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts'"],"names":["PaginationPosition"],"mappings":"ybAEY,IAAAA,GAAAA,IACRA,EAAA,IAAM,MACNA,EAAA,OAAS,SAFDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/index.d.ts

@@ -1,12 +1,6 @@
-import { default as AreaChart } from './components/Area/AreaChart';
-
-export { AreaChart };
-export type { AreaChartProps } from './components/Area/AreaChart';
-export * from './components/AreaStacked';
-export * from './components/Bar';
-export * from './components/Crosshair';
-export * from './components/Donut';
-export * from './components/Line';
-export { PaginationPosition } from './types';
-export { CurveType, Position, Orientation, type NumericAccessor } from '@unovis/ts';
-export type { BulletLegendItemInterface } from '@unovis/ts';
+export * from './components';
+export declare enum PaginationPosition {
+    Top = "top",
+    Bottom = "bottom"
+}
+export { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts';

package/dist/index.js

@@ -1,23 +1,23 @@
-import { default as o } from "./components/Area/AreaChart.js";
-import { DonutType as e } from "./components/Donut/index.js";
-import { PaginationPosition as p } from "./types.js";
-import { CurveType as s, Orientation as m, Position as n } from "@unovis/ts";
-import { default as x } from "./components/AreaStacked/AreaStackedChart.js";
-import { default as C } from "./components/Bar/BarChart.js";
-import { default as l } from "./components/Crosshair/Crosshair.js";
-import { default as y } from "./components/Donut/DonutChart.js";
-import { default as D } from "./components/Line/LineChart.js";
+import { CurveType as a, Orientation as f, Position as p } from "@unovis/ts";
+import { default as u } from "./components/Area/AreaChart.js";
+import { default as s } from "./components/AreaStacked/AreaStackedChart.js";
+import { default as C } from "./components/Line/LineChart.js";
+import { default as l } from "./components/Bar/BarChart.js";
+import { default as T } from "./components/Donut/DonutChart.js";
+import { default as v } from "./components/Crosshair/Crosshair.js";
+import { DonutType as A } from "./components/Donut/index.js";
+var t = /* @__PURE__ */ ((r) => (r.Top = "top", r.Bottom = "bottom", r))(t || {});
 export {
-  o as AreaChart,
-  x as AreaStackedChart,
-  C as BarChart,
-  l as Crosshair,
-  s as CurveType,
-  y as DonutChart,
-  e as DonutType,
-  D as LineChart,
-  m as Orientation,
-  p as PaginationPosition,
-  n as Position
+  u as AreaChart,
+  s as AreaStackedChart,
+  l as BarChart,
+  v as Crosshair,
+  a as CurveType,
+  T as DonutChart,
+  A as DonutType,
+  C as LineChart,
+  f as Orientation,
+  t as PaginationPosition,
+  p as Position
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from \"./components\";\n\nexport enum PaginationPosition {\n    Top = \"top\",\n    Bottom = \"bottom\",\n  }\n\nexport { CurveType, type BulletLegendItemInterface, Position, Orientation } from '@unovis/ts'"],"names":["PaginationPosition"],"mappings":";;;;;;;;AAEY,IAAAA,sBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length: number, numTicks: number) {\n  // Handle edge cases\n  if (numTicks <= 0) return [];\n\n  // If numTicks >= length, return all indices\n  if (numTicks >= length) {\n    return Array.from({ length }, (_, i) => i);\n  }\n\n  // Special case: if numTicks is 1, return only the middle index\n  if (numTicks === 1) {\n    return [Math.floor((length - 1) / 2)];\n  }\n\n  // For 2 ticks, just return first and last\n  if (numTicks === 2) {\n    return [0, length - 1];\n  }\n\n  // For 3 or more ticks, we need to ensure perfectly even distribution\n  const indices = [];\n\n  // We'll manually calculate the indices to ensure perfect distribution\n  for (let i = 0; i < numTicks; i++) {\n    // This formula ensures perfect distribution of indices\n    const index = Math.round(i * (length - 1) / (numTicks - 1));\n    indices.push(index);\n  }\n\n  // No need to filter duplicates as our formula ensures unique indices\n  return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","indices","i","index"],"mappings":"gFAAgB,SAAAA,EAAsBC,EAAgBC,EAAkB,CAElE,GAAAA,GAAY,EAAG,MAAO,CAAC,EAG3B,GAAIA,GAAYD,EACP,OAAA,MAAM,KAAK,CAAE,OAAAA,GAAU,CAACE,EAAG,IAAM,CAAC,EAI3C,GAAID,IAAa,EACf,MAAO,CAAC,KAAK,OAAOD,EAAS,GAAK,CAAC,CAAC,EAItC,GAAIC,IAAa,EACR,MAAA,CAAC,EAAGD,EAAS,CAAC,EAIvB,MAAMG,EAAU,CAAC,EAGjB,QAASC,EAAI,EAAGA,EAAIH,EAAUG,IAAK,CAEjC,MAAMC,EAAQ,KAAK,MAAMD,GAAKJ,EAAS,IAAMC,EAAW,EAAE,EAC1DE,EAAQ,KAAKE,CAAK,CAAA,CAIb,OAAAF,CACT"}
+{"version":3,"file":"utils.cjs","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length, numTicks) {\n  // Handle edge cases\n  if (numTicks <= 0) return [];\n\n  // If numTicks >= length, return all indices\n  if (numTicks >= length) {\n    return Array.from({ length }, (_, i) => i);\n  }\n\n  // Special case: if numTicks is 1, return only the middle index\n  if (numTicks === 1) {\n    return [Math.floor((length - 1) / 2)];\n  }\n\n  // For 2 ticks, just return first and last\n  if (numTicks === 2) {\n    return [0, length - 1];\n  }\n\n  // For 3 or more ticks, we need to ensure perfectly even distribution\n  const indices = [];\n\n  // We'll manually calculate the indices to ensure perfect distribution\n  for (let i = 0; i < numTicks; i++) {\n    // This formula ensures perfect distribution of indices\n    const index = Math.round(i * (length - 1) / (numTicks - 1));\n    indices.push(index);\n  }\n\n  // No need to filter duplicates as our formula ensures unique indices\n  return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","indices","i","index"],"mappings":"gFAAgB,SAAAA,EAAsBC,EAAQC,EAAU,CAElD,GAAAA,GAAY,EAAG,MAAO,CAAC,EAG3B,GAAIA,GAAYD,EACP,OAAA,MAAM,KAAK,CAAE,OAAAA,GAAU,CAACE,EAAG,IAAM,CAAC,EAI3C,GAAID,IAAa,EACf,MAAO,CAAC,KAAK,OAAOD,EAAS,GAAK,CAAC,CAAC,EAItC,GAAIC,IAAa,EACR,MAAA,CAAC,EAAGD,EAAS,CAAC,EAIvB,MAAMG,EAAU,CAAC,EAGjB,QAASC,EAAI,EAAGA,EAAIH,EAAUG,IAAK,CAEjC,MAAMC,EAAQ,KAAK,MAAMD,GAAKJ,EAAS,IAAMC,EAAW,EAAE,EAC1DE,EAAQ,KAAKE,CAAK,CAAA,CAIb,OAAAF,CACT"}

package/dist/utils.d.ts

@@ -1 +1 @@
-export declare function getDistributedIndices(length: number, numTicks: number): number[];
+export declare function getDistributedIndices(length: any, numTicks: any): any[];

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length: number, numTicks: number) {\n  // Handle edge cases\n  if (numTicks <= 0) return [];\n\n  // If numTicks >= length, return all indices\n  if (numTicks >= length) {\n    return Array.from({ length }, (_, i) => i);\n  }\n\n  // Special case: if numTicks is 1, return only the middle index\n  if (numTicks === 1) {\n    return [Math.floor((length - 1) / 2)];\n  }\n\n  // For 2 ticks, just return first and last\n  if (numTicks === 2) {\n    return [0, length - 1];\n  }\n\n  // For 3 or more ticks, we need to ensure perfectly even distribution\n  const indices = [];\n\n  // We'll manually calculate the indices to ensure perfect distribution\n  for (let i = 0; i < numTicks; i++) {\n    // This formula ensures perfect distribution of indices\n    const index = Math.round(i * (length - 1) / (numTicks - 1));\n    indices.push(index);\n  }\n\n  // No need to filter duplicates as our formula ensures unique indices\n  return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","i","indices","index"],"mappings":"AAAgB,SAAAA,EAAsBC,GAAgBC,GAAkB;AAElE,MAAAA,KAAY,EAAG,QAAO,CAAC;AAG3B,MAAIA,KAAYD;AACP,WAAA,MAAM,KAAK,EAAE,QAAAA,KAAU,CAACE,GAAGC,MAAMA,CAAC;AAI3C,MAAIF,MAAa;AACf,WAAO,CAAC,KAAK,OAAOD,IAAS,KAAK,CAAC,CAAC;AAItC,MAAIC,MAAa;AACR,WAAA,CAAC,GAAGD,IAAS,CAAC;AAIvB,QAAMI,IAAU,CAAC;AAGjB,WAASD,IAAI,GAAGA,IAAIF,GAAUE,KAAK;AAEjC,UAAME,IAAQ,KAAK,MAAMF,KAAKH,IAAS,MAAMC,IAAW,EAAE;AAC1D,IAAAG,EAAQ,KAAKC,CAAK;AAAA,EAAA;AAIb,SAAAD;AACT;"}
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["export function getDistributedIndices(length, numTicks) {\n  // Handle edge cases\n  if (numTicks <= 0) return [];\n\n  // If numTicks >= length, return all indices\n  if (numTicks >= length) {\n    return Array.from({ length }, (_, i) => i);\n  }\n\n  // Special case: if numTicks is 1, return only the middle index\n  if (numTicks === 1) {\n    return [Math.floor((length - 1) / 2)];\n  }\n\n  // For 2 ticks, just return first and last\n  if (numTicks === 2) {\n    return [0, length - 1];\n  }\n\n  // For 3 or more ticks, we need to ensure perfectly even distribution\n  const indices = [];\n\n  // We'll manually calculate the indices to ensure perfect distribution\n  for (let i = 0; i < numTicks; i++) {\n    // This formula ensures perfect distribution of indices\n    const index = Math.round(i * (length - 1) / (numTicks - 1));\n    indices.push(index);\n  }\n\n  // No need to filter duplicates as our formula ensures unique indices\n  return indices;\n}"],"names":["getDistributedIndices","length","numTicks","_","i","indices","index"],"mappings":"AAAgB,SAAAA,EAAsBC,GAAQC,GAAU;AAElD,MAAAA,KAAY,EAAG,QAAO,CAAC;AAG3B,MAAIA,KAAYD;AACP,WAAA,MAAM,KAAK,EAAE,QAAAA,KAAU,CAACE,GAAGC,MAAMA,CAAC;AAI3C,MAAIF,MAAa;AACf,WAAO,CAAC,KAAK,OAAOD,IAAS,KAAK,CAAC,CAAC;AAItC,MAAIC,MAAa;AACR,WAAA,CAAC,GAAGD,IAAS,CAAC;AAIvB,QAAMI,IAAU,CAAC;AAGjB,WAASD,IAAI,GAAGA,IAAIF,GAAUE,KAAK;AAEjC,UAAME,IAAQ,KAAK,MAAMF,KAAKH,IAAS,MAAMC,IAAW,EAAE;AAC1D,IAAAG,EAAQ,KAAKC,CAAK;AAAA,EAAA;AAIb,SAAAD;AACT;"}

package/package.json

@@ -1,14 +1,26 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.0-beta.2-internal-15",
+  "version": "0.1.0-beta.2-internal-16",
   "license": "MIT",
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./*/dist/index.d.ts",
+      "require": "./*/dist/index.cjs",
+      "import": "./*/dist/index.js"
+    }
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typings": "./dist/index.d.ts",
+  "typings": "./index.d.ts",
   "type": "module",
   "sideEffects": false,
   "scripts": {