extended-33

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Card, CardContent, CardHeader, CardTitle } from "@/registry/default/ui/card";
4import {
5  DropdownMenu,
6  DropdownMenuContent,
7  DropdownMenuItem,
8  DropdownMenuSeparator,
9  DropdownMenuTrigger,
10} from "@/registry/default/ui/dropdown-menu";
11import {
12  LucideMoreVertical,
13  LucidePin,
14  LucideSettings,
15  LucideShare2,
16  LucideShieldCheck,
17  LucideTriangleAlert,
18} from "lucide-vue-next";
19import { ref } from "vue";
20 
21const bars = [6, 6, 5, 5, 4, 4, 3, 0];
22const maxBars = Math.max(...bars);
23 
24const barInsights = [
25  {
26    date: "24 Feb 2025",
27    growth: 8.2,
28    direction: "up",
29    note: "Feature launch week. Strong adoption spike.",
30  },
31  {
32    date: "08 Mar 2025",
33    growth: 7.5,
34    direction: "up",
35    note: "Onboarding improvements led to a 7.5% boost in adoption.",
36  },
37  {
38    date: "15 Mar 2025",
39    growth: 2.1,
40    direction: "up",
41    note: "Steady growth as more teams enabled the feature.",
42  },
43  {
44    date: "22 Apr 2025",
45    growth: 0.0,
46    direction: "neutral",
47    note: "Temporary plateau after a minor bug was reported.",
48  },
49  {
50    date: "29 May 2025",
51    growth: 0.0,
52    direction: "neutral",
53    note: "Seasonal dip, many users on vacation.",
54  },
55  {
56    date: "06 Jun 2025",
57    growth: 0.0,
58    direction: "neutral",
59    note: "No significant change, awaiting next release.",
60  },
61  {
62    date: "13 Jul 2025",
63    growth: 1.4,
64    direction: "up",
65    note: "Beta feature feedback positive, slight increase.",
66  },
67  {
68    date: "20 Jul 2025",
69    growth: 0.0,
70    direction: "neutral",
71    note: "Stable week, engagement holding steady.",
72  },
73] as const;
74 
75const barRefs = ref<(HTMLDivElement | null)[]>([]);
76 
77function getBarColor(direction: string, j: number, height: number) {
78  if (height === 0) return "bg-muted";
79 
80  // Even color progression from intense to neutral
81  const barColors = [
82    "bg-indigo-600",
83    "bg-indigo-500",
84    "bg-indigo-400",
85    "bg-indigo-300",
86    "bg-indigo-200",
87    "bg-indigo-100",
88  ];
89  return j < height ? barColors[j] : "bg-muted";
90}
91</script>
92 
93<template>
94  <div class="*:not-first:mt-2">
95    <Card class="mx-auto w-full max-w-sm">
96      <CardHeader class="flex min-h-auto items-center justify-between border-0">
97        <CardTitle class="flex flex-col items-start gap-0.5">
98          <div class="text-foreground text-lg leading-none font-semibold">Feature Adoption</div>
99// … truncated