chore: wip

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -128,20 +128,22 @@ watch(() => $route.path, (n) => {
               :key="link.name"
               as="a"
               :href="link.href" target="_blank"
-              :variant="'ghost'" :size="'icon'"
+              :variant="'ghost'"
+              :size="'sm'"
             >
-              <component :is="link.icon" class="w-[20px] h-[20px]" />
+              <component :is="link.icon" />
             </Button>
 
             <Button
               class="flex items-center justify-center"
               aria-label="Toggle dark mode"
               :variant="'ghost'"
-              :size="'icon'" @click="toggleDark()"
+              :size="'sm'"
+              @click="toggleDark()"
             >
               <component
                 :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                class="w-[20px] h-[20px] text-foreground"
+                class="text-foreground"
               />
             </Button>
           </div>

apps/www/src/examples/dashboard/components/Overview.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
-import { Area } from '@unovis/ts'
 
-type Data = typeof data[number]
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },
   { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },
@@ -20,49 +18,5 @@ const data = [
 </script>
 
 <template>
-  <VisXYContainer height="350px" :margin="{ left: 20, right: 20 }" :data="data">
+  <BarChart :data="data" :categories="['total']" :index="'name'" />
-    <svg width="0" height="0">
-      <defs>
-        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="5%" stop-color="hsl(var(--primary))" stop-opacity="0.6" />
-          <stop offset="95%" stop-color="hsl(var(--primary))" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-
-    <VisArea
-      :x="(d: Data, i: number) => i"
-      :y="(d: Data) => d.total"
-      color="auto"
-      :attributes="{
-        [Area.selectors.area]: {
-          fill: 'url(#colorUv)',
-        },
-      }"
-      :rounded-corners="4"
-      :bar-padding="0.15"
-    />
-    <VisLine
-      :x="(d: Data, i: number) => i"
-      :y="(d: Data) => d.total"
-      color="hsl(var(--primary))"
-    />
-    <VisAxis
-      type="x"
-      :num-ticks="data.length"
-      :tick-format="(index: number) => data[index]?.name"
-      :grid-line="false"
-      :tick-line="false"
-      tick-text-color="hsl(var(--muted-foreground))"
-    />
-    <VisAxis
-      type="y"
-      :num-ticks="data.length"
-      :tick-format="(index: number) => data[index]?.name"
-      :grid-line="false"
-      :tick-line="false"
-      :domain-line="false"
-      tick-text-color="hsl(var(--muted-foreground))"
-    />
-  </VisXYContainer>
 </template>

apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Record<string, any>">
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
@@ -8,7 +8,7 @@ import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-y
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<{
-  data: any[]
+  data: T[]
   categories: string[]
   index: string
   colors?: string[]
@@ -32,8 +32,6 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
-type Data = typeof props.data[number]
-
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
   name: category,
   color: props.colors[i],
@@ -58,14 +56,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
       <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
 
       <VisBarComponent
-        :x="(d: Data, i: number) => i"
+        :x="(d: T, i: number) => i"
-        :y="categories.map(category => (d: Data) => d[category]) "
+        :y="categories.map(category => (d: T) => d[category]) "
         :color="colors"
         :rounded-corners="4"
         :bar-padding="0.1"
         :attributes="{
           [selectorsBar]: {
-            opacity: (d: Data, i:number) => {
+            opacity: (d: T, i:number) => {
               const pos = i % categories.length
               return legendItems[pos]?.inactive ? filterOpacity : 1
             },
@@ -98,14 +96,3 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
     </VisXYContainer>
   </div>
 </template>
-
-<style>
-:root {
-  --vis-tooltip-background-color: none;
-  --vis-tooltip-border-color: none;
-  --vis-tooltip-text-color: none;
-  --vis-tooltip-shadow-color: none;
-  --vis-tooltip-backdrop-filter: none;
-  --vis-tooltip-padding: none;
-}
-</style>

apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue

@@ -38,3 +38,14 @@ defineProps<{
     </CardContent>
   </Card>
 </template>
+
+<style>
+:root {
+  --vis-tooltip-background-color: none;
+  --vis-tooltip-border-color: none;
+  --vis-tooltip-text-color: none;
+  --vis-tooltip-shadow-color: none;
+  --vis-tooltip-backdrop-filter: none;
+  --vis-tooltip-padding: none;
+}
+</style>