@vc-shell/framework 1.2.4-beta.3 → 1.2.4-beta.5

package/shared/components/dashboard-charts/DashboardDonutChart.vue

@@ -0,0 +1,137 @@
+<template>
+  <ChartContainer :config="config">
+    <VisSingleContainer
+      :data="data"
+      :height="height"
+    >
+      <VisDonut
+        :value="valueAccessor"
+        :color="colorAccessor"
+        :arc-width="arcWidth"
+        :corner-radius="cornerRadius"
+        :pad-angle="0.02"
+        :central-label="centralLabel"
+        :central-sub-label="centralSubLabel"
+      />
+      <VisTooltip
+        v-if="showTooltip"
+        :allow-hover="true"
+        class-name="dashboard-chart-tooltip-host"
+        :vertical-shift="8"
+        :triggers="donutTooltipTriggers"
+      />
+    </VisSingleContainer>
+    <ChartLegend
+      v-if="showLegend"
+      :config="config"
+    />
+  </ChartContainer>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { computed } from "vue";
+import {
+  VisSingleContainer,
+  VisDonut,
+  VisTooltip,
+  VisDonutSelectors,
+} from "@unovis/vue";
+import ChartContainer from "./ChartContainer.vue";
+import ChartLegend from "./ChartLegend.vue";
+import type { ChartConfig } from "./types";
+import {
+  buildChartTooltipHtml,
+  formatNumericValue,
+  resolveSeriesMeta,
+} from "./chart-utils";
+
+interface DonutSegmentDatum {
+  data: T;
+  index: number;
+  value: number;
+}
+
+const props = withDefaults(defineProps<{
+  data: T[];
+  config: ChartConfig;
+  valueKey: keyof T;
+  colorKey?: keyof T;
+  height?: number;
+  arcWidth?: number;
+  cornerRadius?: number;
+  showTooltip?: boolean;
+  showLegend?: boolean;
+  centralLabel?: string;
+  centralSubLabel?: string;
+  valueFormat?: (value: number) => string;
+}>(), {
+  colorKey: undefined,
+  height: undefined,
+  arcWidth: 60,
+  cornerRadius: 4,
+  showTooltip: true,
+  showLegend: true,
+  centralLabel: undefined,
+  centralSubLabel: undefined,
+  valueFormat: undefined,
+});
+
+const valueAccessor = (d: T) => d[props.valueKey] as number;
+const configKeys = computed(() => Object.keys(props.config));
+
+const colorAccessor = (d: T, index: number) => {
+  if (props.colorKey && d[props.colorKey]) {
+    return d[props.colorKey] as string;
+  }
+  return configKeys.value[index]
+    ? props.config[configKeys.value[index]].color
+    : undefined;
+};
+
+const getSegmentLabel = (datum: T, index: number): string => {
+  const datumLabel = (datum as Record<string, unknown>).label;
+  if (typeof datumLabel === "string" && datumLabel.trim()) {
+    return datumLabel;
+  }
+
+  const configKey = configKeys.value[index];
+  if (configKey) {
+    return props.config[configKey]?.label ?? configKey;
+  }
+
+  return `Segment ${index + 1}`;
+};
+
+const donutTooltipTriggers = computed(() => ({
+  [VisDonutSelectors.segment]: (
+    segmentDatum: DonutSegmentDatum,
+  ): string | undefined => {
+    if (!segmentDatum?.data) {
+      return undefined;
+    }
+
+    const index = segmentDatum.index ?? 0;
+    const label = getSegmentLabel(segmentDatum.data, index);
+    const configKey = configKeys.value[index];
+    const { color } = resolveSeriesMeta({
+      config: props.config,
+      key: configKey,
+      index,
+      fallbackLabel: label,
+    });
+
+    return buildChartTooltipHtml({
+      items: [
+        {
+          label,
+          color: colorAccessor(segmentDatum.data, index) ?? color,
+          value: formatNumericValue(
+            segmentDatum.value ?? segmentDatum.data[props.valueKey],
+            props.valueFormat,
+          ),
+        },
+      ],
+    });
+  },
+}));
+</script>

package/shared/components/dashboard-charts/DashboardLineChart.vue

@@ -0,0 +1,170 @@
+<template>
+  <ChartContainer :config="config">
+    <VisXYContainer
+      :data="filteredData"
+      :height="height"
+      :margin="margin"
+    >
+      <VisTooltip
+        v-if="showTooltip"
+        :allow-hover="true"
+        class-name="dashboard-chart-tooltip-host"
+        :vertical-shift="8"
+      />
+      <VisCrosshair
+        v-if="showTooltip"
+        :x="xAccessor"
+        :y="yAccessors"
+        :color="colors"
+        :template="crosshairTooltipTemplate"
+      />
+      <VisLine
+        v-for="(accessor, index) in yAccessors"
+        :key="index"
+        :x="xAccessor"
+        :y="accessor"
+        :color="colors[index]"
+        curve-type="monotoneX"
+        :line-width="2"
+      />
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-line="false"
+        :domain-line="false"
+        :grid-line="false"
+        :num-ticks="numXTicks"
+        :tick-format="xTickFormat"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :domain-line="false"
+        :grid-line="showGrid"
+        :num-ticks="numYTicks"
+        :tick-format="yTickFormat"
+      />
+    </VisXYContainer>
+    <ChartLegend
+      v-if="showLegend"
+      :config="config"
+    />
+  </ChartContainer>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { computed } from "vue";
+import { VisXYContainer, VisLine, VisAxis, VisTooltip, VisCrosshair } from "@unovis/vue";
+import ChartContainer from "./ChartContainer.vue";
+import ChartLegend from "./ChartLegend.vue";
+import type { ChartConfig } from "./types";
+import type { ChartRangeValue } from "./chart-utils";
+import {
+  buildChartTooltipHtml,
+  filterDataByRange,
+  formatAxisValue,
+  formatNumericValue,
+  resolveSeriesMeta,
+} from "./chart-utils";
+
+export interface Props<T> {
+  data: T[];
+  config: ChartConfig;
+  xKey: keyof T;
+  yKeys: (keyof T)[];
+  height?: number;
+  showTooltip?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  numXTicks?: number;
+  numYTicks?: number;
+  rangeStart?: ChartRangeValue;
+  rangeEnd?: ChartRangeValue;
+  xTickFormat?: (value: number | Date) => string;
+  yTickFormat?: (value: number) => string;
+}
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  height: undefined,
+  showTooltip: true,
+  showXAxis: true,
+  showYAxis: true,
+  showGrid: true,
+  showLegend: true,
+  numXTicks: undefined,
+  numYTicks: 5,
+  rangeStart: undefined,
+  rangeEnd: undefined,
+  xTickFormat: undefined,
+  yTickFormat: undefined,
+});
+
+const margin = { top: 8, right: 8, bottom: 4, left: 4 };
+
+const xAccessor = (d: T) => d[props.xKey] as number;
+
+const filteredData = computed(() =>
+  filterDataByRange(
+    props.data,
+    (datum) => datum[props.xKey],
+    props.rangeStart,
+    props.rangeEnd,
+  ),
+);
+
+const yAccessors = computed(() =>
+  props.yKeys.map((key) => (d: T) => d[key] as number),
+);
+
+const colors = computed(() =>
+  props.yKeys.map((key, index) =>
+    resolveSeriesMeta({
+      config: props.config,
+      key: String(key),
+      index,
+      fallbackLabel: String(key),
+    }).color,
+  ),
+);
+
+const buildTooltipMarkup = (datum: T): string | undefined =>
+  buildChartTooltipHtml({
+    title: formatAxisValue(datum[props.xKey], props.xTickFormat),
+    items: props.yKeys.map((key, index) => {
+      const { label, color } = resolveSeriesMeta({
+        config: props.config,
+        key: String(key),
+        index,
+        fallbackLabel: String(key),
+      });
+
+      return {
+        label,
+        color,
+        value: formatNumericValue(datum[key], props.yTickFormat),
+      };
+    }),
+  });
+
+const crosshairTooltipTemplate = (
+  datum: T | undefined,
+  _xValue: number | Date,
+  allData: T[],
+  leftNearestDatumIndex?: number,
+): string | undefined => {
+  const activeDatum =
+    datum ??
+    (typeof leftNearestDatumIndex === "number"
+      ? allData[leftNearestDatumIndex]
+      : undefined);
+
+  if (!activeDatum) {
+    return undefined;
+  }
+
+  return buildTooltipMarkup(activeDatum);
+};
+</script>

package/shared/components/dashboard-charts/chart-theme.scss

@@ -0,0 +1,19 @@
+// Map vc-shell design tokens to Unovis CSS variables.
+// Unovis reads --vis-color0..--vis-color9 for data series colors.
+@use "./chart-tooltip";
+
+:root {
+  --vis-color0: var(--primary-500);
+  --vis-color1: var(--success-500);
+  --vis-color2: var(--warning-500);
+  --vis-color3: var(--danger-500);
+  --vis-color4: var(--info-500, #6366f1);
+  --vis-color5: var(--secondary-500, #8b5cf6);
+  --vis-color6: var(--primary-300);
+  --vis-color7: var(--success-300);
+  --vis-color8: var(--warning-300);
+  --vis-color9: var(--danger-300);
+
+  // Unovis default font inherits from body
+  --vis-font-family: inherit;
+}

package/shared/components/dashboard-charts/chart-tooltip.scss

@@ -0,0 +1,48 @@
+.dashboard-chart-tooltip {
+  @apply tw-rounded-lg tw-px-3 tw-py-2 tw-text-xs tw-shadow-lg;
+  background: var(--additional-50, #fff);
+  border: 1px solid var(--neutrals-200, #e5e7eb);
+
+  &__title {
+    @apply tw-font-medium tw-mb-1.5;
+    color: var(--neutrals-950);
+  }
+
+  &__items {
+    @apply tw-flex tw-flex-col tw-gap-1;
+  }
+
+  &__item {
+    @apply tw-flex tw-items-center tw-gap-2;
+  }
+
+  &__indicator {
+    @apply tw-w-2 tw-h-2 tw-rounded-full tw-flex-shrink-0;
+  }
+
+  &__label {
+    color: var(--neutrals-500);
+  }
+
+  &__value {
+    @apply tw-ml-auto tw-font-semibold;
+    color: var(--neutrals-950);
+  }
+}
+
+// Reset Unovis default tooltip container styles.
+// We render fully custom tooltip markup inside this host.
+.dashboard-chart-tooltip-host {
+  --vis-tooltip-padding: 0;
+  --vis-tooltip-border-color: transparent;
+  --vis-tooltip-background-color: transparent;
+  --vis-tooltip-box-shadow: none;
+  --vis-tooltip-backdrop-filter: none;
+
+  @apply tw-p-0;
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}

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>
+  `;
+};