vue-chrts 0.0.114 → 0.0.115

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/auto-imports.d.ts

@@ -0,0 +1,58 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const avatarGroupInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useAvatarGroup.js')['avatarGroupInjectionKey']
+  const buttonGroupInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useButtonGroup.js')['buttonGroupInjectionKey']
+  const defineLocale: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineLocale.js')['defineLocale']
+  const defineShortcuts: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.js')['defineShortcuts']
+  const extendDevtoolsMeta: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.js')['extendDevtoolsMeta']
+  const extractShortcuts: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.js')['extractShortcuts']
+  const formBusInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formBusInjectionKey']
+  const formFieldInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formFieldInjectionKey']
+  const formInputsInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formInputsInjectionKey']
+  const formLoadingInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formLoadingInjectionKey']
+  const formOptionsInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['formOptionsInjectionKey']
+  const inputIdInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['inputIdInjectionKey']
+  const kbdKeysMap: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.js')['kbdKeysMap']
+  const localeContextInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useLocale.js')['localeContextInjectionKey']
+  const modalInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.js')['modalInjectionKey']
+  const slideoverInjectionKey: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.js')['slideoverInjectionKey']
+  const useAvatarGroup: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useAvatarGroup.js')['useAvatarGroup']
+  const useButtonGroup: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useButtonGroup.js')['useButtonGroup']
+  const useComponentIcons: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.js')['useComponentIcons']
+  const useFormField: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useFormField.js')['useFormField']
+  const useKbd: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.js')['useKbd']
+  const useLocale: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useLocale.js')['useLocale']
+  const useModal: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.js')['useModal']
+  const useSlideover: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.js')['useSlideover']
+  const useToast: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.js')['useToast']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { ShortcutConfig, ShortcutsConfig, ShortcutsOptions } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d')
+  // @ts-ignore
+  export type { DevtoolsMeta } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/extendDevtoolsMeta.d')
+  // @ts-ignore
+  export type { UseComponentIconsProps } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.d')
+  // @ts-ignore
+  export type { KbdKey, KbdKeySpecific } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useKbd.d')
+  // @ts-ignore
+  export type { ModalState } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useModal.d')
+  // @ts-ignore
+  export type { SlideoverState } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useSlideover.d')
+  // @ts-ignore
+  export type { Toast } from './node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d'
+  import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d')
+}

package/components.d.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Area: typeof import('./src/components/Base/Area.vue')['default']
+    AreaChart: typeof import('./src/components/Pages/AreaChart.vue')['default']
+    AreaChartPage: typeof import('./src/components/Pages/AreaChartPage.vue')['default']
+    AreaStacked: typeof import('./src/components/Base/AreaStacked.vue')['default']
+    Bar: typeof import('./src/components/Base/Bar.vue')['default']
+    BarChart: typeof import('./src/components/BarChart.vue')['default']
+    BarChartPage: typeof import('./src/components/Pages/BarChartPage.vue')['default']
+    Button: typeof import('./src/components/Elements/Button.vue')['default']
+    Card: typeof import('./src/components/Elements/Card.vue')['default']
+    copy: typeof import('./src/components/Pages/LineChartPage copy.vue')['default']
+    Crosshair: typeof import('./src/components/Base/Crosshair.vue')['default']
+    Donut: typeof import('./src/components/Base/Donut.vue')['default']
+    DonutChart: typeof import('./src/components/DonutChart.vue')['default']
+    DonutChartPage: typeof import('./src/components/Pages/DonutChartPage.vue')['default']
+    Homepage: typeof import('./src/components/Homepage.vue')['default']
+    Index: typeof import('./src/components/Base/Line/Index.vue')['default']
+    Line: typeof import('./src/components/Base/Line/Line.vue')['default']
+    LineChartPage: typeof import('./src/components/Pages/LineChartPage.vue')['default']
+    Logo: typeof import('./src/components/Logo.vue')['default']
+    Overview: typeof import('./src/components/Overview.vue')['default']
+    Progress: typeof import('./src/components/Base/Progress.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Status: typeof import('./src/components/Base/Status.vue')['default']
+    Table: typeof import('./src/components/Elements/Table/Table.vue')['default']
+    TablePage: typeof import('./src/components/Pages/TablePage.vue')['default']
+    Test3d: typeof import('./src/components/Test3d.vue')['default']
+    Tooltip: typeof import('./src/components/Base/Tooltip.vue')['default']
+    UApp: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/App.vue')['default']
+    UAvatar: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue')['default']
+    UButton: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default']
+    UCard: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
+    UIcon: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']
+    ULinkBase: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/LinkBase.vue')['default']
+    UTable: typeof import('./node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.12_@babel+parser@7.26.8_embla-carousel@8.5.2_radix-vue@1.9.13_vue@3.5.13_x422h3vsgrgcvkoya6nlnhdf5i/node_modules/@nuxt/ui/dist/runtime/components/Table.vue')['default']
+  }
+}

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body class="bg-white dark:bg-background">
+    <div id="app">
+    </div>
+    <script type="module" src="/src-demo/index.ts"></script>
+  </body>
+</html>

package/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/export
+export * from './dist/index.js'

package/package.json

@@ -1,12 +1,9 @@
 {
   "name": "vue-chrts",
   "type": "module",
-  "version": "0.0.114",
+  "version": "0.0.115",
   "license": "MIT",
   "sideEffects": false,
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": {
       "types": "./index.d.ts",

package/src/components/Area/AreaChart.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts" generic="T">
+import { computed, createApp } from "vue";
+import type { BulletLegendItemInterface, NumericAccessor } from "@unovis/ts";
+import { CurveType, Position } from "@unovis/ts";
+import {
+  VisArea,
+  VisAxis,
+  VisBulletLegend,
+  VisCrosshair,
+  VisLine,
+  VisTooltip,
+  VisXYContainer,
+} from "@unovis/vue";
+
+import Tooltip from "./../Tooltip.vue";
+import { PaginationPosition } from "../..";
+
+export type AreaChartProps<T> = {
+    data: T[];
+    height: number;
+    xLabel?: string;
+    yLabel?: string;
+    categories: Record<string, BulletLegendItemInterface>;
+    xFormatter: (i: number, idx: number) => string;
+    yFormatter?: (i: number, idx?: number) => string | number;
+    curveType?: CurveType;
+    xNumTicks?: number;
+    yNumTicks?: number;
+    hideLegend?: boolean;
+    hideTooltip?: boolean;
+    gridLineX?: boolean;
+    domainLineX?: boolean;
+    gridLineY?: boolean;
+    domainLineY?: boolean;
+    paginationPoisition?: PaginationPosition;
+  }
+
+const props = withDefaults(
+  defineProps<AreaChartProps<T>>(),
+  {
+    xNumTicks: (props) =>
+      props.data.length > 24 ? 24 / 4 : props.data.length - 1,
+    yNumTicks: (props) =>
+      props.data.length > 24 ? 24 / 4 : props.data.length - 1,
+  }
+);
+
+const colors = Object.values(props.categories).map((c) => c.color);
+
+const generateTooltip = computed(() => (d: T) => {
+  const app = createApp(Tooltip, {
+    data: d,
+    categories: props.categories,
+  });
+
+  const container = document.createElement("div");
+  app.mount(container);
+
+  const html = container.innerHTML;
+  app.unmount();
+
+  return html;
+});
+
+function accessors(id: string): { y: NumericAccessor<T>; color: string } {
+  return {
+    y: (d: T) => Number(d[id as keyof typeof d]),
+    color: props.categories[id]?.color ?? "#3b82f6",
+  };
+}
+
+const svgDefs = colors
+  .map(
+    (color, index) => `
+  <linearGradient id="gradient${index}-${color}" gradientTransform="rotate(90)">
+    <stop offset="0%" stop-color="${color}" stop-opacity="1" />
+    <stop offset="100%" stop-color="${color}" stop-opacity="0" />
+  </linearGradient>
+`
+  )
+  .join("");
+</script>
+
+<template>
+  <div
+    class="flex flex-col space-y-4"
+    :class="{
+      'flex-col-reverse': props.paginationPoisition === 'top',
+    }"
+  >
+    <VisXYContainer :data="data" :height="height" :svg-defs="svgDefs">
+      <VisTooltip
+        v-if="!hideTooltip"
+        :horizontal-placement="Position.Right"
+        :vertical-placement="Position.Top"
+      />
+      <template v-for="(i, iKey) in Object.keys(props.categories)" :key="iKey">
+        <VisArea
+          :x="(_: T, i: number) => i"
+          v-bind="accessors(i)"
+          :color="`url(#gradient${iKey}-${colors[iKey]})`"
+          :opacity="0.5"
+          :curve-type="curveType ?? CurveType.MonotoneX"
+        />
+        <VisLine
+          :x="(_: any, i: number) => i"
+          :y="(d: T) => d[i as keyof typeof d]"
+          :color="colors[iKey]"
+          :curve-type="curveType ?? CurveType.MonotoneX"
+        />
+      </template>
+
+      <VisAxis
+        type="x"
+        :tick-format="xFormatter"
+        :num-ticks="xNumTicks"
+        :label="xLabel"
+        :grid-line="gridLineX"
+        :domain-line="domainLineX"
+        :tick-line="!!gridLineX"
+      />
+      <VisAxis
+        type="y"
+        :num-ticks="yNumTicks ?? data.length"
+        :tick-format="yFormatter"
+        :label="yLabel"
+        :grid-line="gridLineY"
+        :domain-line="domainLineY"
+        :tick-line="!!gridLineY"
+      />
+      <VisCrosshair
+        v-if="!hideTooltip"
+        color="#666"
+        :template="generateTooltip"
+      />
+    </VisXYContainer>
+    <div v-if="!hideLegend" class="flex items center justify-end">
+      <VisBulletLegend :items="Object.values(categories)" />
+    </div>
+  </div>
+</template>

package/src/components/Area/index.ts

@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart.vue';

package/src/components/AreaStacked/AreaStackedChart.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts" generic="T">
+import { VisXYContainer, VisAxis, VisArea, VisBulletLegend } from '@unovis/vue'
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts'
+
+export type AreaStackedChartProps<T> = {
+    data: T[];
+    categories: Record<string, BulletLegendItemInterface>;
+  }
+
+const props = defineProps<AreaStackedChartProps<T>>()
+
+const x = (d: any) => {
+  return Number.parseInt(d.time)
+}
+const y = [
+  (d: any) => d.firstTime,
+  (d: any) => d.returning
+]
+</script>
+
+<template>
+  <div class="flex flex-col space-y-4">
+    <VisXYContainer
+      :data="data"
+      :height="200"
+    >
+      <VisArea
+        :x="x"
+        :y="y"
+        :color="Object.values(props.categories).map((i) => i.color) "
+        :curve-type="CurveType.Linear"
+      />
+      <VisAxis
+        type="x"
+        label="Time"
+        :num-ticks="12"
+
+      />
+      <VisAxis
+        type="y"
+        label="Number of visitors"
+        :num-ticks="3"
+      />
+    </VisXYContainer>
+    <div class="flex items center justify-end">
+      <VisBulletLegend
+        :items="Object.values(categories)"
+      />
+    </div>
+  </div>
+</template>

package/{dist/components/AreaStacked/index.d.ts → src/components/AreaStacked/index.ts}

@@ -1 +1 @@
-export { default as AreaStackedChart } from './AreaStackedChart.vue';
+export { default as AreaStackedChart } from './AreaStackedChart.vue';

package/src/components/Bar/BarChart.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts" generic="T">
+import { computed, ComputedRef, createApp } from "vue";
+import { BulletLegendItemInterface, GroupedBar, Orientation } from "@unovis/ts";
+
+import {
+  VisAxis,
+  VisBulletLegend,
+  VisGroupedBar,
+  VisStackedBar,
+  VisTooltip,
+  VisXYContainer,
+} from "@unovis/vue";
+
+import Tooltip from "./../Tooltip.vue";
+import { PaginationPosition } from "../..";
+
+export type BarChartProps<T> = {
+    data: T[];
+    stacked?: boolean;
+    height: number;
+    xLabel?: string;
+    yLabel?: string;
+    categories: Record<string, BulletLegendItemInterface>;
+    xFormatter: (i: number, idx?: number) => string | number;
+    yFormatter?: (i: number, idx?: number) => string | number;
+    yNumTicks?: number;
+    xNumTicks?: number;
+    yAxis: (keyof T)[];
+    groupPadding?: number;
+    barPadding?: number;
+    radius?: number;
+    hideLegend?: boolean;
+    orientation?: Orientation;
+    paginationPosition?: PaginationPosition;
+  }
+
+const props = withDefaults(
+  defineProps<BarChartProps<T>>(),
+  {
+    orientation: Orientation.Vertical,
+    paginationPosition: PaginationPosition.Bottom
+  }
+);
+
+const yAxis: ComputedRef<((d: T) => T[keyof T])[]> = computed(() => {
+  return props.yAxis.map((key) => (d: T) => {
+    return d[key];
+  });
+});
+
+const color = (_: T, i: number) => Object.values(props.categories)[i].color;
+
+const generateTooltip = computed(() => (d: T) => {
+  const app = createApp(Tooltip, {
+    data: d,
+    categories: props.categories,
+  });
+
+  const container = document.createElement("div");
+  app.mount(container);
+
+  const html = container.innerHTML;
+  app.unmount();
+
+  return html;
+});
+
+const PaginationPositionTop = computed(() => props.paginationPosition === PaginationPosition.Top)
+</script>
+
+<template>
+  <div
+    class="flex flex-col space-y-4"
+    :class="{'flex-col-reverse' : PaginationPositionTop}"
+  >
+    <VisXYContainer :height="height">
+      <VisTooltip
+        :triggers="{
+          [GroupedBar.selectors.bar]: generateTooltip,
+        }"
+      />
+
+      <VisGroupedBar
+        v-if="!stacked"
+        :data="data"
+        :x="(_: T, i: number) => i"
+        :y="yAxis"
+        :grid-line="false"
+        :domain-line="false"
+        :color="color"
+        :rounded-corners="radius ?? 0"
+        :group-padding="groupPadding ?? 0"
+        :bar-padding="barPadding ?? 0.2"
+        :orientation="orientation ?? Orientation.Vertical"
+      />
+      <VisStackedBar
+        v-else
+        :data="data"
+        :x="(_: T, i: number) => i"
+        :y="yAxis"
+        :grid-line="false"
+        :domain-line="false"
+        :color="color"
+        :rounded-corners="radius ?? 0"
+        :group-padding="groupPadding ?? 0"
+        :bar-padding="barPadding ?? 0.2"
+        :orientation="orientation ?? Orientation.Vertical"
+      />
+      <VisAxis
+        type="x"
+        :label="xLabel"
+        :grid-line="false"
+        :domain-line="false"
+        :tick-format="xFormatter"
+        :num-ticks="xNumTicks"
+        :tick-line="false"
+      />
+      <VisAxis
+        type="y"
+        :label="yLabel"
+        :grid-line="orientation !== Orientation.Horizontal"
+        :domain-line="false"
+        :tick-format="yFormatter"
+      />
+    </VisXYContainer>
+    <div v-if="!hideLegend" class="flex items center justify-end" :class="{'pb-4' : PaginationPositionTop}">
+      <VisBulletLegend :items="Object.values(categories)" />
+    </div>
+  </div>
+</template>

package/src/components/Bar/index.ts

@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart.vue';

package/src/components/Crosshair/Crosshair.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { omit } from '@unovis/ts'
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import { type Component, createApp } from 'vue'
+
+const props = withDefaults(defineProps<{
+  colors: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    if (typeof window !== 'undefined') {
+      const componentDiv = document.createElement('div')
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items.find(i => i.name === key)
+        return { ...legendReference, value }
+      })
+    const TooltipComponent = props.customTooltip ?? VisTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+    }
+
+  }
+}
+
+function color(_: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>

package/src/components/Crosshair/index.ts

@@ -0,0 +1 @@
+export { default as Crosshair } from './Crosshair.vue';

package/src/components/Donut/DonutChart.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Donut } from "@unovis/ts";
+import {
+  VisBulletLegend,
+  VisDonut,
+  VisSingleContainer,
+  VisTooltip,
+} from "@unovis/vue";
+
+export type DonutChartProps = {
+    type?: string;
+    data: number[];
+    height: number;
+    radius: number;
+    hidePagination?: boolean
+    labels: {
+      name: string;
+      color: string;
+    }[];
+  }
+
+const props = defineProps<DonutChartProps>();
+
+const value = (d: number) => d;
+
+const isHalf = props.type === "half";
+
+const tooltip = {
+  [Donut.selectors.segment]: (d: any) => {
+    console.log();
+
+    return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${
+      props.labels[d.index].color
+    } ;'></div>
+        <div>${d.data}</div>
+      </vistooltip>
+    </vissinglecontainer>
+  </div>`;
+  },
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <VisSingleContainer
+      :class="isHalf ? 'mt-24' : ''"
+      :data="data"
+      :height="height"
+      :margin="{}"
+    >
+      <VisTooltip
+        :horizontal-shift="20"
+        :vertical-shift="20"
+        :triggers="tooltip"
+      />
+
+      <VisDonut
+        :value="value"
+        :corner-radius="radius"
+        :color="props.labels.map((l) => l.color)"
+        :angle-range="isHalf ? [-1.5707963267948966, 1.5707963267948966] : []"
+      />
+    </VisSingleContainer>
+
+    <slot />
+  </div>
+
+  <div v-if="!hidePagination" class="flex items-center justify-center mt-4">
+    <VisBulletLegend :items="labels" />
+  </div>
+</template>

package/src/components/Donut/index.ts

@@ -0,0 +1 @@
+export { default as DonutChart } from './DonutChart.vue';