rimelight-components 1.2.1 → 1.3.1

package/dist/runtime/components/feedback/FeedbackChart.vue

@@ -1,604 +0,0 @@
-<script setup>
-const {} = defineProps({
-  pageAnalytics: { type: Array, required: true }
-});
-const { dateRange } = useDateRange();
-const chartType = ref(`line`);
-const selectedPagePaths = ref([]);
-const showPageSelector = ref(false);
-const pageSearchQuery = ref(``);
-const hasValidData = computed(() => {
-  return props.pageAnalytics && props.pageAnalytics.length > 0 && props.pageAnalytics.some((p) => p && p.total > 0);
-});
-const availablePages = computed(() => {
-  if (!props.pageAnalytics) return [];
-  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.total - a.total).map((page) => ({
-    path: page.path,
-    title: page.lastFeedback?.title || page.path,
-    total: page.total,
-    score: page.averageScore
-  }));
-  if (!pageSearchQuery.value.trim()) {
-    return pages;
-  }
-  const searchTerm = pageSearchQuery.value.toLowerCase().trim();
-  return pages.filter(
-    (page) => page.title.toLowerCase().includes(searchTerm) || page.path.toLowerCase().includes(searchTerm)
-  );
-});
-watch(
-  () => props.pageAnalytics,
-  (analytics) => {
-    if (selectedPagePaths.value.length === 0 && analytics && analytics.length > 0) {
-      const validAnalytics = analytics.filter((p) => p && p.total > 0);
-      if (validAnalytics.length > 0) {
-        const topPages = validAnalytics.sort((a, b) => b.total - a.total).slice(0, Math.min(5, validAnalytics.length));
-        selectedPagePaths.value = topPages.map((p) => p.path);
-      }
-    }
-  },
-  {
-    immediate: true
-  }
-);
-const overallChartData = computed(() => {
-  const data = [];
-  const endDate = dateRange.value.end;
-  const startDate = dateRange.value.start;
-  const daysDiff = Math.ceil(
-    (endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
-  );
-  const dailyScores = {};
-  if (hasValidData.value && props.pageAnalytics) {
-    props.pageAnalytics.forEach((page) => {
-      if (!page || !page.feedback) return;
-      page.feedback.forEach((feedback) => {
-        const feedbackDate = new Date(feedback.createdAt);
-        if (feedbackDate >= startDate && feedbackDate <= endDate) {
-          const dateStr = feedbackDate.toISOString().split(`T`)[0];
-          if (!dailyScores[dateStr]) {
-            dailyScores[dateStr] = [];
-          }
-          const ratingScore = FEEDBACK_OPTIONS.find((opt) => opt.value === feedback.rating)?.score || 0;
-          dailyScores[dateStr].push(ratingScore);
-        }
-      });
-    });
-  }
-  let lastKnownValue = 0;
-  for (let i = daysDiff - 1; i >= 0; i--) {
-    const date = new Date(endDate);
-    date.setDate(date.getDate() - i);
-    const dateStr = date.toISOString().split(`T`)[0];
-    const entry = {
-      date: dateStr,
-      day: date.toLocaleDateString(`en-US`, {
-        month: `short`,
-        day: `numeric`
-      })
-    };
-    if (hasValidData.value && dailyScores[dateStr] && dailyScores[dateStr].length > 0) {
-      const dayAverage = dailyScores[dateStr].reduce((sum, score) => sum + score, 0) / dailyScores[dateStr].length;
-      lastKnownValue = Math.min(4, Number(dayAverage.toFixed(2)));
-    }
-    entry.average = lastKnownValue;
-    data.push(entry);
-  }
-  return data;
-});
-const timeBasedChartData = computed(() => {
-  const data = [];
-  const endDate = dateRange.value.end;
-  const startDate = dateRange.value.start;
-  const daysDiff = Math.ceil(
-    (endDate.getTime() - startDate.getTime()) / (1e3 * 60 * 60 * 24)
-  );
-  if (!hasValidData.value || selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
-    for (let i = daysDiff - 1; i >= 0; i--) {
-      const date = new Date(endDate);
-      date.setDate(date.getDate() - i);
-      data.push({
-        date: date.toISOString().split(`T`)[0],
-        day: date.toLocaleDateString(`en-US`, {
-          month: `short`,
-          day: `numeric`
-        }),
-        placeholder: 0
-      });
-    }
-    return data;
-  }
-  const dailyScores = {};
-  const selectedPages = props.pageAnalytics.filter(
-    (p) => p && selectedPagePaths.value.includes(p.path)
-  );
-  selectedPages.forEach((page) => {
-    if (!page || !page.feedback) return;
-    const pageKey = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
-    page.feedback.forEach((feedback) => {
-      const feedbackDate = new Date(feedback.createdAt);
-      if (feedbackDate >= startDate && feedbackDate <= endDate) {
-        const dateStr = feedbackDate.toISOString().split(`T`)[0];
-        if (!dailyScores[dateStr]) {
-          dailyScores[dateStr] = {};
-        }
-        if (!dailyScores[dateStr][pageKey]) {
-          dailyScores[dateStr][pageKey] = [];
-        }
-        const ratingScore = FEEDBACK_OPTIONS.find((opt) => opt.value === feedback.rating)?.score || 0;
-        dailyScores[dateStr][pageKey].push(ratingScore);
-      }
-    });
-  });
-  const lastKnownValues = {};
-  for (let i = daysDiff - 1; i >= 0; i--) {
-    const date = new Date(endDate);
-    date.setDate(date.getDate() - i);
-    const dateStr = date.toISOString().split(`T`)[0];
-    const entry = {
-      date: dateStr,
-      day: date.toLocaleDateString(`en-US`, {
-        month: `short`,
-        day: `numeric`
-      })
-    };
-    selectedPages.forEach((page) => {
-      if (!page) return;
-      const pageKey = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
-      if (dailyScores[dateStr] && dailyScores[dateStr][pageKey] && dailyScores[dateStr][pageKey].length > 0) {
-        const dayAverage = dailyScores[dateStr][pageKey].reduce((sum, score) => sum + score, 0) / dailyScores[dateStr][pageKey].length;
-        lastKnownValues[pageKey] = Math.min(4, Number(dayAverage.toFixed(2)));
-      }
-      entry[pageKey] = lastKnownValues[pageKey] || 0;
-    });
-    data.push(entry);
-  }
-  return data;
-});
-const comparisonChartData = computed(() => {
-  if (!hasValidData.value || selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
-    return [
-      {
-        page: `No Data`,
-        positive: 0,
-        negative: 0
-      }
-    ];
-  }
-  return props.pageAnalytics.filter((p) => p && selectedPagePaths.value.includes(p.path)).map((page) => {
-    const title = page.lastFeedback?.title || page.path;
-    const shortTitle = title.length > 15 ? title.substring(0, 15) + `...` : title;
-    return {
-      page: shortTitle,
-      positive: page.positive,
-      negative: page.negative
-    };
-  });
-});
-const chartData = computed(() => {
-  if (chartType.value === `compare`) return comparisonChartData.value;
-  if (chartType.value === `overall`) return overallChartData.value;
-  return timeBasedChartData.value;
-});
-const chartCategories = computed(() => {
-  if (!hasValidData.value) {
-    return {
-      placeholder: {
-        name: `No Data Available`,
-        color: `#6b7280`
-      }
-    };
-  }
-  if (chartType.value === `compare`) {
-    return {
-      positive: {
-        name: `Positive`,
-        color: `var(--ui-success)`
-      },
-      negative: {
-        name: `Negative`,
-        color: `var(--ui-error)`
-      }
-    };
-  }
-  if (chartType.value === `overall`) {
-    return {
-      average: {
-        name: `Overall Rating`,
-        color: `#3b82f6`
-      }
-    };
-  }
-  if (selectedPagePaths.value.length === 0 || !props.pageAnalytics) {
-    return {
-      placeholder: {
-        name: `No Pages Selected`,
-        color: `#6b7280`
-      }
-    };
-  }
-  const selectedPages = props.pageAnalytics.filter(
-    (p) => p && selectedPagePaths.value.includes(p.path)
-  );
-  const colors = [
-    `#3b82f6`,
-    `#10b981`,
-    `#f59e0b`,
-    `#ef4444`,
-    `#8b5cf6`,
-    `#06b6d4`,
-    `#84cc16`,
-    `#f97316`
-  ];
-  return selectedPages.reduce(
-    (acc, page, index) => {
-      if (!page) return acc;
-      const key = page.path.split(`/`).pop()?.replace(/[^a-z0-9]/gi, ``) || `page`;
-      const title = page.lastFeedback?.title || page.path;
-      acc[key] = {
-        name: title.length > 25 ? title.substring(0, 25) + `...` : title,
-        color: colors[index % colors.length]
-      };
-      return acc;
-    },
-    {}
-  );
-});
-const xFormatter = (index) => {
-  if (chartType.value === `compare`) {
-    return comparisonChartData.value[index]?.page || ``;
-  }
-  if (chartType.value === `overall`) {
-    return overallChartData.value[index]?.day || ``;
-  }
-  return timeBasedChartData.value[index]?.day || ``;
-};
-const yFormatter = (value) => {
-  if (chartType.value === `compare`) {
-    return Math.round(value).toString();
-  }
-  return value === 0 ? `0` : `${Number(value).toFixed(1)}/4`;
-};
-const dateRangeLabel = computed(() => {
-  if (chartType.value === `compare`) {
-    return `Selected Pages (${selectedPagePaths.value.length})`;
-  }
-  const daysDiff = Math.ceil(
-    (dateRange.value.end.getTime() - dateRange.value.start.getTime()) / (1e3 * 60 * 60 * 24)
-  );
-  if (daysDiff <= 7) return `Last ${daysDiff} days`;
-  if (daysDiff <= 31) return `Last ${daysDiff} days`;
-  if (daysDiff <= 93) return `Last ${Math.round(daysDiff / 30)} months`;
-  if (daysDiff <= 186) return `Last ${Math.round(daysDiff / 30)} months`;
-  return `Last ${Math.round(daysDiff / 365)} year${daysDiff > 730 ? `s` : ``}`;
-});
-const chartTitle = computed(() => {
-  switch (chartType.value) {
-    case `line`:
-      return `Rating Evolution`;
-    case `compare`:
-      return `Page Comparison`;
-    case `overall`:
-      return `Overall Documentation Rating`;
-    default:
-      return `Rating Evolution`;
-  }
-});
-const chartDescription = computed(() => {
-  switch (chartType.value) {
-    case `line`:
-      return `Track selected pages satisfaction over time`;
-    case `compare`:
-      return `Compare feedback distribution across pages`;
-    case `overall`:
-      return `Global documentation satisfaction evolution`;
-    default:
-      return `Track selected pages satisfaction over time`;
-  }
-});
-const chartIcon = computed(() => {
-  switch (chartType.value) {
-    case `line`:
-      return `i-lucide-trending-up`;
-    case `compare`:
-      return `i-lucide-bar-chart-4`;
-    case `overall`:
-      return `i-lucide-activity`;
-    default:
-      return `i-lucide-trending-up`;
-  }
-});
-const availableChartTypes = [
-  {
-    value: `line`,
-    label: `Line`,
-    icon: `i-lucide-trending-up`
-  },
-  {
-    value: `compare`,
-    label: `Compare`,
-    icon: `i-lucide-bar-chart-4`
-  },
-  {
-    value: `overall`,
-    label: `Overall`,
-    icon: `i-lucide-activity`
-  }
-];
-function togglePageSelection(pagePath) {
-  const index = selectedPagePaths.value.indexOf(pagePath);
-  if (index > -1) {
-    selectedPagePaths.value.splice(index, 1);
-  } else {
-    selectedPagePaths.value.push(pagePath);
-  }
-}
-function selectTopPages(count) {
-  if (!props.pageAnalytics) return;
-  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.total - a.total).slice(0, count);
-  selectedPagePaths.value = pages.map((p) => p.path);
-}
-function selectBestRatedPages(count) {
-  if (!props.pageAnalytics) return;
-  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => b.averageScore - a.averageScore).slice(0, count);
-  selectedPagePaths.value = pages.map((p) => p.path);
-}
-function selectWorstPages(count) {
-  if (!props.pageAnalytics) return;
-  const pages = props.pageAnalytics.filter((p) => p && p.total > 0).sort((a, b) => a.averageScore - b.averageScore).slice(0, count);
-  selectedPagePaths.value = pages.map((p) => p.path);
-}
-</script>
-
-<template>
-  <div class="space-y-6">
-    <div
-      class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"
-    >
-      <Motion
-        :key="`header-${chartType}`"
-        :initial="{ opacity: 0, y: 10 }"
-        :animate="{ opacity: 1, y: 0 }"
-        :transition="{ duration: 0.4, ease: 'easeInOut' }"
-        class="flex items-center gap-3"
-      >
-        <UIcon
-          :name="chartIcon"
-          class="size-6 shrink-0 text-primary sm:size-5"
-        />
-        <div class="min-w-0">
-          <h3 class="truncate text-lg font-semibold">
-            {{ chartTitle }}
-          </h3>
-          <p class="text-sm text-muted">
-            {{ chartDescription }}
-          </p>
-        </div>
-      </Motion>
-
-      <div
-        class="flex flex-wrap items-center gap-2 max-sm:flex-row-reverse max-sm:justify-end"
-      >
-        <AnimatePresence mode="wait">
-          <Motion
-            v-if="chartType !== 'overall'"
-            :initial="{ opacity: 0, scale: 0.9 }"
-            :animate="{ opacity: 1, scale: 1 }"
-            :exit="{ opacity: 0, scale: 0.9 }"
-            :transition="{ duration: 0.3 }"
-          >
-            <UChip :text="selectedPagePaths.length" size="3xl">
-              <UButton
-                color="neutral"
-                variant="outline"
-                icon="i-lucide-settings"
-                @click="showPageSelector = true"
-              />
-            </UChip>
-          </Motion>
-        </AnimatePresence>
-
-        <div
-          class="flex items-center gap-1 rounded-lg border border-default p-1"
-        >
-          <UButton
-            v-for="type in availableChartTypes"
-            :key="type.value"
-            :color="chartType === type.value ? 'primary' : 'neutral'"
-            :variant="chartType === type.value ? 'solid' : 'ghost'"
-            size="sm"
-            :icon="type.icon"
-            :label="type.label"
-            @click="chartType = type.value"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="relative mb-8 overflow-hidden rounded-xl">
-      <div class="dot-pattern -top-5 right-0 left-0 h-[300px]" />
-
-      <LineChart
-        v-if="chartType === 'overall'"
-        :data="chartData"
-        :categories="chartCategories"
-        :x-formatter="xFormatter"
-        :y-formatter="yFormatter"
-        :x-label="dateRangeLabel"
-        y-label="Rating (out of 4)"
-        :show-tooltip="true"
-      />
-
-      <LineChart
-        v-else-if="chartType === 'line'"
-        :data="chartData"
-        :categories="chartCategories"
-        :x-formatter="xFormatter"
-        :y-formatter="yFormatter"
-        :x-label="dateRangeLabel"
-        y-label="Rating (out of 4)"
-        :show-tooltip="true"
-        class="min-h-[300px]"
-      />
-
-      <BarChart
-        v-else-if="chartType === 'compare'"
-        :data="chartData"
-        :categories="chartCategories"
-        :y-axis="['positive', 'negative']"
-        :stacked="true"
-        :x-formatter="xFormatter"
-        :y-formatter="yFormatter"
-        :x-label="dateRangeLabel"
-        y-label="Feedback Count"
-        :height="300"
-        :bar-padding="0.2"
-        :y-grid-line="false"
-        class="min-h-[300px]"
-      />
-    </div>
-
-    <div v-if="!hasValidData" class="py-4 text-center">
-      <p class="text-sm text-muted">
-        Chart shows no data - will display real trends once feedback is
-        collected
-      </p>
-    </div>
-
-    <UModal v-model:open="showPageSelector" :ui="{ content: 'max-w-2xl' }">
-      <template #content>
-        <UCard>
-          <template #header>
-            <UButton
-              size="sm"
-              variant="ghost"
-              color="neutral"
-              icon="i-lucide-x"
-              class="absolute top-2 right-2"
-              @click="showPageSelector = false"
-            />
-            <div class="space-y-3">
-              <h3 class="text-lg font-semibold">
-                Select Pages to {{ chartType === "line" ? "Track" : "Compare" }}
-              </h3>
-              <div class="flex flex-wrap items-center gap-2">
-                <span class="text-sm font-medium text-muted"
-                  >Quick select:</span
-                >
-                <UButton
-                  size="sm"
-                  variant="soft"
-                  color="neutral"
-                  label="Best Rated 5"
-                  @click="selectBestRatedPages(5)"
-                />
-                <UButton
-                  size="sm"
-                  variant="soft"
-                  color="neutral"
-                  label="Most Popular 5"
-                  @click="selectTopPages(5)"
-                />
-                <UButton
-                  size="sm"
-                  variant="soft"
-                  color="neutral"
-                  label="Worst Rated 5"
-                  @click="selectWorstPages(5)"
-                />
-                <UButton
-                  size="sm"
-                  variant="soft"
-                  color="neutral"
-                  label="Worst Rated 10"
-                  @click="selectWorstPages(10)"
-                />
-              </div>
-            </div>
-          </template>
-
-          <div class="mb-4">
-            <UInput
-              v-model="pageSearchQuery"
-              placeholder="Search pages..."
-              icon="i-lucide-search"
-              class="w-full"
-              :ui="{ trailing: 'pe-1' }"
-            >
-              <template v-if="pageSearchQuery?.length" #trailing>
-                <UButton
-                  color="neutral"
-                  variant="link"
-                  size="sm"
-                  icon="i-lucide-circle-x"
-                  aria-label="Clear input"
-                  @click="pageSearchQuery = ''"
-                />
-              </template>
-            </UInput>
-          </div>
-
-          <div class="max-h-96 space-y-3 overflow-y-auto">
-            <div
-              v-for="page in availablePages"
-              :key="page.path"
-              class="flex cursor-pointer items-center justify-between rounded-lg border border-default p-3 transition-colors hover:bg-muted/50"
-              :class="{
-  'border-primary/20 bg-primary/5 hover:bg-primary/10': selectedPagePaths.includes(page.path)
-}"
-              @click="togglePageSelection(page.path)"
-            >
-              <div class="flex min-w-0 flex-1 items-center gap-3">
-                <UCheckbox
-                  :model-value="selectedPagePaths.includes(page.path)"
-                  @update:model-value="togglePageSelection(page.path)"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="truncate text-sm font-medium">
-                    {{ page.title }}
-                  </div>
-                  <code class="block truncate text-xs text-muted">{{
-                    page.path
-                  }}</code>
-                </div>
-              </div>
-              <div class="flex shrink-0 items-center gap-2 text-sm sm:gap-4">
-                <div class="text-center">
-                  <div class="font-semibold">
-                    {{ page.total }}
-                  </div>
-                  <div class="text-xs text-muted">resp.</div>
-                </div>
-                <div class="text-center">
-                  <div
-                    class="font-semibold"
-                    :class="
-  page.score >= 3.5 ? 'text-success' : page.score >= 3 ? 'text-warning' : 'text-error'
-"
-                  >
-                    {{ page.score.toFixed(1) }}/4
-                  </div>
-                  <div class="text-xs text-muted">score</div>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="availablePages.length === 0" class="py-8 text-center">
-              <UIcon
-                name="i-lucide-search-x"
-                class="mx-auto mb-2 size-8 text-muted"
-              />
-              <p class="text-sm text-muted">
-                No pages found matching your search
-              </p>
-            </div>
-          </div>
-        </UCard>
-      </template>
-    </UModal>
-  </div>
-</template>
-
-<style>
-:root{--vis-tooltip-background-color:hsla(0,0%,100%,.95)!important;--vis-tooltip-border-color:rgba(0,0,0,.1)!important;--vis-tooltip-text-color:rgba(0,0,0,.9)!important;--vis-tooltip-label-color:rgba(0,0,0,.7)!important;--vis-tooltip-value-color:#000!important;--vis-axis-grid-color:hsla(0,0%,100%,.1)!important;--vis-axis-tick-label-color:var(--ui-text-muted)!important;--vis-axis-label-color:var(--ui-text-toned)!important;--vis-legend-label-color:var(--ui-text-muted)!important;--dot-pattern-color:#111827}.dark{--vis-tooltip-background-color:rgba(15,23,42,.95)!important;--vis-tooltip-border-color:hsla(0,0%,100%,.1)!important;--vis-tooltip-text-color:hsla(0,0%,100%,.9)!important;--vis-tooltip-label-color:hsla(0,0%,100%,.7)!important;--vis-tooltip-value-color:#fff!important;--dot-pattern-color:#9ca3af}.dot-pattern{background-image:radial-gradient(var(--dot-pattern-color) 1px,transparent 1px);background-position:-8.5px -8.5px;background-size:7px 7px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%);opacity:20%;position:absolute}
-</style>

package/dist/runtime/components/feedback/FeedbackChart.vue.d.ts

@@ -1,18 +0,0 @@
-type PageAnalytic = {
-    path: string;
-    total: number;
-    positive: number;
-    negative: number;
-    averageScore: number;
-    positivePercentage: number;
-    feedback: any[];
-    lastFeedback: any;
-    createdAt: Date;
-    updatedAt: Date;
-};
-type __VLS_Props = {
-    pageAnalytics: PageAnalytic[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/feedback/FeedbackDatePicker.d.vue.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;