@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.4

package/shared/components/dashboard-charts/chart-utils.ts

@@ -0,0 +1,189 @@
+import type { ChartConfig } from "./types";
+
+export type ChartRangeValue = number | string | Date;
+
+export interface ChartTooltipItem {
+  label: string;
+  value: string | number;
+  color: string;
+}
+
+interface BuildChartTooltipOptions {
+  title?: string;
+  items: ChartTooltipItem[];
+}
+
+interface ResolveSeriesMetaOptions {
+  config: ChartConfig;
+  key?: string;
+  index?: number;
+  fallbackLabel?: string;
+}
+
+const DEFAULT_COLOR = "var(--primary-500)";
+const FALLBACK_TEXT = "-";
+
+const escapeMap: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  "\"": "&quot;",
+  "'": "&#39;",
+};
+
+export const escapeHtml = (value: string | number | null | undefined): string => {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  return String(value).replace(/[&<>"']/g, (char) => escapeMap[char] ?? char);
+};
+
+export const normalizeRangeValue = (value: unknown): number | undefined => {
+  if (value instanceof Date) {
+    const timestamp = value.getTime();
+    return Number.isFinite(timestamp) ? timestamp : undefined;
+  }
+
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : undefined;
+  }
+
+  if (typeof value === "string") {
+    const numericValue = Number(value);
+    if (Number.isFinite(numericValue)) {
+      return numericValue;
+    }
+
+    const timestamp = Date.parse(value);
+    if (Number.isFinite(timestamp)) {
+      return timestamp;
+    }
+  }
+
+  return undefined;
+};
+
+export const filterDataByRange = <T>(
+  data: T[],
+  accessor: (datum: T) => unknown,
+  rangeStart?: ChartRangeValue,
+  rangeEnd?: ChartRangeValue,
+): T[] => {
+  const start = normalizeRangeValue(rangeStart);
+  const end = normalizeRangeValue(rangeEnd);
+
+  if (start === undefined && end === undefined) {
+    return data;
+  }
+
+  const min = start !== undefined && end !== undefined ? Math.min(start, end) : start;
+  const max = start !== undefined && end !== undefined ? Math.max(start, end) : end;
+
+  return data.filter((datum) => {
+    const comparable = normalizeRangeValue(accessor(datum));
+    if (comparable === undefined) {
+      return true;
+    }
+
+    if (min !== undefined && comparable < min) {
+      return false;
+    }
+
+    if (max !== undefined && comparable > max) {
+      return false;
+    }
+
+    return true;
+  });
+};
+
+export const formatAxisValue = (
+  value: unknown,
+  formatter?: (value: number | Date) => string,
+): string => {
+  if (formatter) {
+    if (typeof value === "number" || value instanceof Date) {
+      return formatter(value);
+    }
+
+    const comparable = normalizeRangeValue(value);
+    if (comparable !== undefined) {
+      return formatter(comparable);
+    }
+  }
+
+  if (value === null || value === undefined) {
+    return FALLBACK_TEXT;
+  }
+
+  return String(value);
+};
+
+export const formatNumericValue = (
+  value: unknown,
+  formatter?: (value: number) => string,
+): string => {
+  const numericValue = typeof value === "number" ? value : Number(value);
+
+  if (!Number.isFinite(numericValue)) {
+    return FALLBACK_TEXT;
+  }
+
+  if (formatter) {
+    return formatter(numericValue);
+  }
+
+  return numericValue.toLocaleString();
+};
+
+export const resolveSeriesMeta = ({
+  config,
+  key,
+  index,
+  fallbackLabel,
+}: ResolveSeriesMetaOptions): { label: string; color: string } => {
+  const configKeys = Object.keys(config);
+  const keyItem = key ? config[key] : undefined;
+  const indexItem =
+    typeof index === "number" && Number.isFinite(index) && configKeys[index]
+      ? config[configKeys[index]]
+      : undefined;
+  const item = keyItem ?? indexItem;
+
+  return {
+    label: item?.label ?? fallbackLabel ?? key ?? "Series",
+    color: item?.color ?? DEFAULT_COLOR,
+  };
+};
+
+export const buildChartTooltipHtml = ({
+  title,
+  items,
+}: BuildChartTooltipOptions): string | undefined => {
+  if (!items.length) {
+    return undefined;
+  }
+
+  const titleMarkup = title
+    ? `<div class="dashboard-chart-tooltip__title">${escapeHtml(title)}</div>`
+    : "";
+
+  const itemsMarkup = items
+    .map(
+      (item) => `
+        <div class="dashboard-chart-tooltip__item">
+          <span class="dashboard-chart-tooltip__indicator" style="background: ${escapeHtml(item.color)}"></span>
+          <span class="dashboard-chart-tooltip__label">${escapeHtml(item.label)}</span>
+          <span class="dashboard-chart-tooltip__value">${escapeHtml(item.value)}</span>
+        </div>
+      `,
+    )
+    .join("");
+
+  return `
+    <div class="dashboard-chart-tooltip">
+      ${titleMarkup}
+      <div class="dashboard-chart-tooltip__items">${itemsMarkup}</div>
+    </div>
+  `;
+};

package/shared/components/dashboard-charts/dashboard-charts.stories.ts

@@ -0,0 +1,393 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import DashboardLineChart from "./DashboardLineChart.vue";
+import DashboardBarChart from "./DashboardBarChart.vue";
+import DashboardDonutChart from "./DashboardDonutChart.vue";
+import DashboardWidgetCard from "@shared/components/dashboard-widget-card/dashboard-widget-card.vue";
+import DashboardStatItem from "@shared/components/dashboard-widget-card/dashboard-stat-item.vue";
+import type { ChartConfig } from "./types";
+
+// --- Sample data ---
+
+const revenueData = [
+  { month: 0, revenue: 4200, orders: 120 },
+  { month: 1, revenue: 5100, orders: 145 },
+  { month: 2, revenue: 4800, orders: 132 },
+  { month: 3, revenue: 6200, orders: 178 },
+  { month: 4, revenue: 5900, orders: 165 },
+  { month: 5, revenue: 7100, orders: 198 },
+  { month: 6, revenue: 6800, orders: 184 },
+  { month: 7, revenue: 7600, orders: 210 },
+  { month: 8, revenue: 8200, orders: 221 },
+  { month: 9, revenue: 7900, orders: 207 },
+  { month: 10, revenue: 8600, orders: 236 },
+  { month: 11, revenue: 9400, orders: 258 },
+];
+
+const monthLabels = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+const salesByCategory = [
+  { category: 0, electronics: 12000, clothing: 8500, home: 5200 },
+  { category: 1, electronics: 14000, clothing: 9200, home: 6100 },
+  { category: 2, electronics: 11000, clothing: 10500, home: 7300 },
+  { category: 3, electronics: 15500, clothing: 8800, home: 5800 },
+];
+
+const categoryLabels = ["Q1", "Q2", "Q3", "Q4"];
+
+const channelTrendData = [
+  { month: 0, marketplace: 1600, direct: 1100, b2b: 700 },
+  { month: 1, marketplace: 1700, direct: 1200, b2b: 760 },
+  { month: 2, marketplace: 1650, direct: 1160, b2b: 740 },
+  { month: 3, marketplace: 1950, direct: 1300, b2b: 820 },
+  { month: 4, marketplace: 1860, direct: 1260, b2b: 790 },
+  { month: 5, marketplace: 2100, direct: 1400, b2b: 910 },
+  { month: 6, marketplace: 2020, direct: 1370, b2b: 880 },
+  { month: 7, marketplace: 2260, direct: 1520, b2b: 990 },
+  { month: 8, marketplace: 2340, direct: 1600, b2b: 1030 },
+  { month: 9, marketplace: 2210, direct: 1540, b2b: 980 },
+  { month: 10, marketplace: 2420, direct: 1660, b2b: 1090 },
+  { month: 11, marketplace: 2580, direct: 1740, b2b: 1150 },
+];
+
+const statusData = [
+  { label: "Published", value: 142 },
+  { label: "Pending", value: 38 },
+  { label: "Draft", value: 15 },
+  { label: "Archived", value: 7 },
+];
+
+// --- Configs ---
+
+const revenueConfig: ChartConfig = {
+  revenue: { label: "Revenue ($)", color: "var(--primary-500)" },
+  orders: { label: "Orders", color: "var(--success-500)" },
+};
+
+const salesConfig: ChartConfig = {
+  electronics: { label: "Electronics", color: "var(--primary-500)" },
+  clothing: { label: "Clothing", color: "var(--success-500)" },
+  home: { label: "Home & Garden", color: "var(--warning-500)" },
+};
+
+const channelTrendConfig: ChartConfig = {
+  marketplace: { label: "Marketplace", color: "var(--primary-500)" },
+  direct: { label: "Direct", color: "var(--success-500)" },
+  b2b: { label: "B2B", color: "var(--warning-500)" },
+};
+
+const statusConfig: ChartConfig = {
+  published: { label: "Published", color: "var(--success-500)" },
+  pending: { label: "Pending", color: "var(--warning-500)" },
+  draft: { label: "Draft", color: "var(--primary-300)" },
+  archived: { label: "Archived", color: "var(--neutrals-400)" },
+};
+
+const periodOptions = [
+  { id: "3m", label: "3M", size: 3 },
+  { id: "6m", label: "6M", size: 6 },
+  { id: "12m", label: "12M", size: 12 },
+  { id: "all", label: "ALL", size: null },
+] as const;
+
+type PeriodOption = (typeof periodOptions)[number]["id"];
+
+// --- Stories ---
+
+const meta = {
+  title: "Shared/DashboardCharts",
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      template: `
+        <div class="tw-w-[600px] tw-p-6 tw-bg-[var(--neutrals-100)]">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Dashboard chart components built on Unovis with hover tooltips and optional range filtering for time-based datasets.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Line chart showing revenue trend over time */
+export const LineChart: Story = {
+  render: () => ({
+    components: { DashboardLineChart, DashboardWidgetCard, DashboardStatItem },
+    setup() {
+      return { revenueData, revenueConfig, monthLabels };
+    },
+    template: `
+      <DashboardWidgetCard header="Revenue Trend" icon="material-trending_up">
+        <template #stats>
+          <DashboardStatItem value="$83,800" label="Total revenue" />
+          <DashboardStatItem value="+18%" label="vs last period" variant="success" />
+        </template>
+        <template #content>
+          <div class="tw-px-4 tw-py-3" style="height: 400px;">
+            <DashboardLineChart
+              :data="revenueData"
+              :config="revenueConfig"
+              x-key="month"
+              :y-keys="['revenue']"
+              :x-tick-format="(v) => monthLabels[v] ?? v"
+              :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'"
+              :num-x-ticks="6"
+            />
+          </div>
+        </template>
+      </DashboardWidgetCard>
+    `,
+  }),
+};
+
+/** Multi-line chart with two data series */
+export const MultiLineChart: Story = {
+  render: () => ({
+    components: { DashboardLineChart, DashboardWidgetCard },
+    setup() {
+      return { revenueData, revenueConfig, monthLabels };
+    },
+    template: `
+      <DashboardWidgetCard header="Revenue & Orders" icon="material-analytics">
+        <template #content>
+          <div class="tw-px-4 tw-py-3" style="height: 400px;">
+            <DashboardLineChart
+              :data="revenueData"
+              :config="revenueConfig"
+              x-key="month"
+              :y-keys="['revenue', 'orders']"
+              :x-tick-format="(v) => monthLabels[v] ?? v"
+              :num-x-ticks="6"
+            />
+          </div>
+        </template>
+      </DashboardWidgetCard>
+    `,
+  }),
+};
+
+/** Grouped bar chart showing quarterly sales by category */
+export const BarChart: Story = {
+  render: () => ({
+    components: { DashboardBarChart, DashboardWidgetCard },
+    setup() {
+      return { salesByCategory, salesConfig, categoryLabels };
+    },
+    template: `
+      <DashboardWidgetCard header="Sales by Category" icon="material-bar_chart">
+        <template #content>
+          <div class="tw-px-4 tw-py-3" style="height: 400px;">
+            <DashboardBarChart
+              :data="salesByCategory"
+              :config="salesConfig"
+              x-key="category"
+              :y-keys="['electronics', 'clothing', 'home']"
+              :x-tick-format="(v) => categoryLabels[v] ?? v"
+              :y-tick-format="(v) => '$' + (v / 1000).toFixed(0) + 'k'"
+            />
+          </div>
+        </template>
+      </DashboardWidgetCard>
+    `,
+  }),
+};
+
+/** Donut chart showing product status distribution */
+export const DonutChart: Story = {
+  render: () => ({
+    components: { DashboardDonutChart, DashboardWidgetCard, DashboardStatItem },
+    setup() {
+      const total = statusData.reduce((sum, d) => sum + d.value, 0);
+      return { statusData, statusConfig, total };
+    },
+    template: `
+      <DashboardWidgetCard header="Product Status" icon="lucide-package-open">
+        <template #stats>
+          <DashboardStatItem :value="total" label="Total products" />
+        </template>
+        <template #content>
+          <div class="tw-px-4 tw-py-3" style="height: 400px;">
+            <DashboardDonutChart
+              :data="statusData"
+              :config="statusConfig"
+              value-key="value"
+              :central-label="String(total)"
+              central-sub-label="Products"
+            />
+          </div>
+        </template>
+      </DashboardWidgetCard>
+    `,
+  }),
+};
+
+/** Compact donut without legend — for small widgets */
+export const DonutCompact: Story = {
+  render: () => ({
+    components: { DashboardDonutChart },
+    setup() {
+      return { statusData, statusConfig };
+    },
+    template: `
+      <div style="width: 200px; height: 400px;">
+        <DashboardDonutChart
+          :data="statusData"
+          :config="statusConfig"
+          value-key="value"
+          :show-legend="false"
+          :show-tooltip="false"
+          :arc-width="40"
+        />
+      </div>
+    `,
+  }),
+};
+
+/** Interactive example: hover tooltips + selectable period */
+export const InteractiveRangeAndTooltips: Story = {
+  render: () => ({
+    components: { DashboardLineChart, DashboardBarChart, DashboardDonutChart, DashboardWidgetCard },
+    setup() {
+      const selectedPeriod = ref<PeriodOption>("6m");
+      const tooltipEnabled = ref(true);
+
+      const maxMonth = computed(() => revenueData[revenueData.length - 1]?.month ?? 0);
+
+      const rangeStart = computed(() => {
+        const option = periodOptions.find(({ id }) => id === selectedPeriod.value);
+        if (!option || option.size === null) {
+          return undefined;
+        }
+        return Math.max(0, maxMonth.value - (option.size - 1));
+      });
+
+      const rangeLabel = computed(
+        () =>
+          periodOptions.find(({ id }) => id === selectedPeriod.value)?.label ?? "ALL",
+      );
+
+      const totalProducts = statusData.reduce((sum, item) => sum + item.value, 0);
+
+      return {
+        revenueData,
+        revenueConfig,
+        channelTrendData,
+        channelTrendConfig,
+        statusData,
+        statusConfig,
+        monthLabels,
+        periodOptions,
+        selectedPeriod,
+        tooltipEnabled,
+        rangeStart,
+        rangeEnd: maxMonth,
+        rangeLabel,
+        totalProducts,
+      };
+    },
+    template: `
+      <div class="tw-flex tw-flex-col tw-gap-4">
+        <div class="tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-gap-3 tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-3">
+          <div class="tw-inline-flex tw-overflow-hidden tw-rounded-md tw-border tw-border-solid tw-border-neutrals-200">
+            <button
+              v-for="option in periodOptions"
+              :key="option.id"
+              class="tw-border-0 tw-bg-transparent tw-px-3 tw-py-1.5 tw-text-xs tw-font-semibold tw-transition-colors"
+              :class="selectedPeriod === option.id
+                ? 'tw-bg-[var(--primary-500)] tw-text-additional-50'
+                : 'tw-text-neutrals-600 hover:tw-bg-neutrals-100'"
+              @click="selectedPeriod = option.id"
+            >
+              {{ option.label }}
+            </button>
+          </div>
+
+          <label class="tw-inline-flex tw-items-center tw-gap-2 tw-text-xs tw-font-medium tw-text-neutrals-700">
+            <input
+              v-model="tooltipEnabled"
+              type="checkbox"
+              class="tw-h-4 tw-w-4 tw-cursor-pointer tw-rounded tw-border tw-border-solid tw-border-neutrals-300"
+            >
+            Hover tooltip
+          </label>
+        </div>
+
+        <DashboardWidgetCard :header="'Revenue by Period (' + rangeLabel + ')'" icon="material-timeline">
+          <template #content>
+            <div class="tw-px-4 tw-py-3" style="height: 340px;">
+              <DashboardLineChart
+                :data="revenueData"
+                :config="revenueConfig"
+                x-key="month"
+                :y-keys="['revenue', 'orders']"
+                :show-tooltip="tooltipEnabled"
+                :range-start="rangeStart"
+                :range-end="rangeEnd"
+                :x-tick-format="(v) => monthLabels[v] ?? v"
+                :y-tick-format="(v) => '$' + (v / 1000).toFixed(1) + 'k'"
+                :num-x-ticks="6"
+              />
+            </div>
+          </template>
+        </DashboardWidgetCard>
+
+        <DashboardWidgetCard :header="'Channel Performance (' + rangeLabel + ')'" icon="material-stacked_bar_chart">
+          <template #content>
+            <div class="tw-px-4 tw-py-3" style="height: 340px;">
+              <DashboardBarChart
+                :data="channelTrendData"
+                :config="channelTrendConfig"
+                x-key="month"
+                :y-keys="['marketplace', 'direct', 'b2b']"
+                :show-tooltip="tooltipEnabled"
+                :range-start="rangeStart"
+                :range-end="rangeEnd"
+                :x-tick-format="(v) => monthLabels[v] ?? v"
+                :y-tick-format="(v) => '$' + (v / 1000).toFixed(1) + 'k'"
+                :num-x-ticks="6"
+              />
+            </div>
+          </template>
+        </DashboardWidgetCard>
+
+        <DashboardWidgetCard header="Status Breakdown" icon="material-donut_large">
+          <template #content>
+            <div class="tw-px-4 tw-py-3" style="height: 320px;">
+              <DashboardDonutChart
+                :data="statusData"
+                :config="statusConfig"
+                value-key="value"
+                :show-tooltip="tooltipEnabled"
+                :central-label="String(totalProducts)"
+                central-sub-label="Products"
+              />
+            </div>
+          </template>
+        </DashboardWidgetCard>
+      </div>
+    `,
+  }),
+};

package/shared/components/dashboard-charts/index.ts

@@ -0,0 +1,7 @@
+export { default as ChartContainer } from "./ChartContainer.vue";
+export { default as ChartTooltip } from "./ChartTooltip.vue";
+export { default as ChartLegend } from "./ChartLegend.vue";
+export { default as DashboardLineChart } from "./DashboardLineChart.vue";
+export { default as DashboardBarChart } from "./DashboardBarChart.vue";
+export { default as DashboardDonutChart } from "./DashboardDonutChart.vue";
+export type { ChartConfig, ChartConfigItem } from "./types";

package/shared/components/dashboard-charts/types.ts

@@ -0,0 +1,7 @@
+export interface ChartConfigItem {
+  label: string;
+  color: string;
+  icon?: string;
+}
+
+export type ChartConfig = Record<string, ChartConfigItem>;

package/shared/components/dashboard-widget-card/dashboard-feed-list.vue

@@ -0,0 +1,12 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<template>
+  <div class="tw-divide-y tw-divide-[var(--neutrals-200)]">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  default: (props: any) => any;
+}>();
+</script>

package/shared/components/dashboard-widget-card/dashboard-feed-row.vue

@@ -0,0 +1,28 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<template>
+  <div
+    class="dashboard-feed-row"
+    @click="$emit('click')"
+  >
+    <div class="tw-flex tw-items-center tw-gap-2.5 tw-min-w-0">
+      <slot />
+    </div>
+    <div
+      v-if="$slots.trailing"
+      class="tw-flex tw-items-center tw-gap-3 tw-flex-shrink-0 tw-ml-3"
+    >
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  click: [];
+}>();
+
+defineSlots<{
+  default: (props: any) => any;
+  trailing: (props: any) => any;
+}>();
+</script>

package/shared/components/dashboard-widget-card/dashboard-stat-item.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import DashboardStatItem from "@shared/components/dashboard-widget-card/dashboard-stat-item.vue";
+
+describe("DashboardStatItem", () => {
+  it("renders value and label", () => {
+    const wrapper = mount(DashboardStatItem, {
+      props: { value: 142, label: "Total" },
+    });
+    expect(wrapper.text()).toContain("142");
+    expect(wrapper.text()).toContain("Total");
+  });
+
+  it("renders string value", () => {
+    const wrapper = mount(DashboardStatItem, {
+      props: { value: "$1,234", label: "Revenue" },
+    });
+    expect(wrapper.text()).toContain("$1,234");
+  });
+
+  it("applies variant class for warning", () => {
+    const wrapper = mount(DashboardStatItem, {
+      props: { value: 14, label: "Pending", variant: "warning" },
+    });
+    expect(wrapper.find(".dashboard-stat-item__value").classes()).toContain(
+      "dashboard-stat-item__value--warning",
+    );
+  });
+
+  it("applies default variant when no variant prop", () => {
+    const wrapper = mount(DashboardStatItem, {
+      props: { value: 8, label: "Today" },
+    });
+    expect(wrapper.find(".dashboard-stat-item__value").classes()).not.toContain(
+      "dashboard-stat-item__value--warning",
+    );
+  });
+});