@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

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

@@ -1,170 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-// 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

@@ -1,48 +0,0 @@
-.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

@@ -1,189 +0,0 @@
-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>
-  `;
-};