vue-chrts 0.0.134 → 0.0.135

package/components.d.ts

@@ -1,46 +0,0 @@
-/* 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

@@ -1,14 +0,0 @@
-<!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

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

package/src/components/Area/AreaChart.vue

@@ -1,141 +0,0 @@
-<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

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

package/src/components/AreaStacked/AreaStackedChart.vue

@@ -1,51 +0,0 @@
-<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/src/components/Bar/BarChart.vue

@@ -1,130 +0,0 @@
-<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

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

package/src/components/Crosshair/Crosshair.vue

@@ -1,46 +0,0 @@
-<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

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

package/src/components/Donut/DonutChart.vue

@@ -1,71 +0,0 @@
-<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

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

package/src/components/Line/LineChart.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts" generic="T">
-import { computed, createApp } from "vue";
-
-import { CurveType, BulletLegendItemInterface, Position } from "@unovis/ts";
-
-import Tooltip from "./../Tooltip.vue";
-import { PaginationPosition } from "../..";
-
-import {
-  VisAxis,
-  VisBulletLegend,
-  VisCrosshair,
-  VisLine,
-  VisXYContainer,
-  VisTooltip,
-} from "@unovis/vue";
-
-export type LineChartProps<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;
-  curveType?: CurveType;
-  yNumTicks?: number;
-  xNumTicks?: number;
-  paginationPosition?: PaginationPosition;
-};
-
-const props = defineProps<LineChartProps<T>>();
-
-const color = (key: number) => Object.values(props.categories)[key].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;
-});
-</script>
-
-<template>
-  <div
-    class="space-y-4 flex flex-col"
-    :class="{
-      'flex-col-reverse': props.paginationPosition === 'top',
-    }"
-  >
-    <VisXYContainer :data="data" :height="height">
-      <VisTooltip
-        :horizontal-placement="Position.Right"
-        :vertical-placement="Position.Top"
-      />
-      <template v-for="(i, iKey) in Object.keys(props.categories)" :key="iKey">
-        <VisLine
-          :x="(_: any, i: number) => i"
-          :y="(d: T) => d[i as keyof typeof d]"
-          :color="color(iKey)"
-          :curve-type="curveType ?? CurveType.MonotoneX"
-        />
-      </template>
-      <VisAxis
-        type="x"
-        :tick-format="xFormatter"
-        :num-ticks="xNumTicks ?? 4"
-        :label="xLabel"
-        :label-margin="8"
-        :domain-line="false"
-        :grid-line="false"
-      />
-      <VisAxis
-        type="y"
-        :num-ticks="yNumTicks ?? 4"
-        :tick-format="yFormatter"
-        :label="yLabel"
-        :domain-line="false"
-      />
-      <VisCrosshair color="#666" :template="generateTooltip" />
-    </VisXYContainer>
-    <div class="flex items center justify-end">
-      <VisBulletLegend :items="Object.values(categories)" />
-    </div>
-  </div>
-</template>

package/src/components/Line/index.ts

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

package/src/components/Tooltip.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="flex flex-col">
-      <template v-for="[key, value] in Object.entries(data)" :key="key">
-        <div class="flex items-center mr-2 mt-2">
-          <!-- <span class="w-3 h-3 rounded-full bg-[#10b981] mr-2"></span> -->
-          <span class="font-semibold capitalize text-white/75">{{ key }}:</span>
-        </div>
-        <span class="font-normal">{{ value }}</span>
-      </template>
-    </div>
-  </template>
-  
-  <script lang="ts" setup generic="T">
-  const props = defineProps<{
-    data: T;
-  }>();
-  </script>

package/src/components.ts

@@ -1,6 +0,0 @@
-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/src/index.ts

@@ -1,6 +0,0 @@
-export * from "./components";
-
-export enum PaginationPosition {
-  Top = "top",
-  Bottom = "bottom",
-}

package/src/shims-vue.d.ts

@@ -1 +0,0 @@
-declare module '*.vue';

package/src-demo/AdminTemplate.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="py-8 px-16">
-        123123
-    </div>
-</template>