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

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

@@ -0,0 +1,165 @@
+<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"
+        :triggers="barTooltipTriggers"
+      />
+      <VisGroupedBar
+        :x="xAccessor"
+        :y="yAccessors"
+        :color="colors"
+        :rounded-corners="4"
+        :bar-padding="0.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,
+  VisGroupedBar,
+  VisAxis,
+  VisTooltip,
+  VisGroupedBarSelectors,
+} 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 barTooltipTriggers = computed(() => ({
+  [VisGroupedBarSelectors.bar]: (
+    datum: T,
+    seriesIndex: number,
+  ): string | null | undefined => {
+    if (!props.yKeys.length || seriesIndex < 0) {
+      return null;
+    }
+
+    const normalizedSeriesIndex = seriesIndex % props.yKeys.length;
+    const seriesKey = props.yKeys[normalizedSeriesIndex];
+    if (!seriesKey) {
+      return null;
+    }
+
+    const { label, color } = resolveSeriesMeta({
+      config: props.config,
+      key: String(seriesKey),
+      index: normalizedSeriesIndex,
+      fallbackLabel: String(seriesKey),
+    });
+
+    return buildChartTooltipHtml({
+      title: formatAxisValue(datum[props.xKey], props.xTickFormat),
+      items: [
+        {
+          label,
+          color,
+          value: formatNumericValue(datum[seriesKey], props.yTickFormat),
+        },
+      ],
+    });
+  },
+}));
+</script>

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