nuxt-ui-tools 1.0.0 → 1.1.0

package/dist/runtime/dashboard/components/charts/unovis/dashboard-xy-chart.vue

@@ -0,0 +1,190 @@
+<script setup>
+import VisAxis from "@unovis/vue/components/axis";
+import VisCrosshair from "@unovis/vue/components/crosshair";
+import VisGroupedBar from "@unovis/vue/components/grouped-bar";
+import VisPlotband from "@unovis/vue/components/plotband";
+import VisStackedBar from "@unovis/vue/components/stacked-bar";
+import VisTooltip from "@unovis/vue/components/tooltip";
+import VisXYContainer from "@unovis/vue/containers/xy-container";
+import { usePreferredReducedMotion } from "@vueuse/core";
+import { computed } from "vue";
+import { renderDashboardChartTooltip } from "../../../utils/chart-frame";
+import DashboardXyMarks from "./dashboard-xy-marks.vue";
+import { resolveDashboardXyLayer } from "./xy-layers";
+const props = defineProps({
+  frame: { type: Object, required: true },
+  height: { type: Number, required: true },
+  selectable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["select"]);
+function select(event) {
+  const box = event.currentTarget;
+  if (!props.selectable || !(box instanceof HTMLElement)) return;
+  const rect = box.getBoundingClientRect();
+  const start = margin.value.left + (padding.value.left ?? 0);
+  const width = rect.width - start - margin.value.right - (padding.value.right ?? 0);
+  if (width <= 0) return;
+  const [from, to] = props.frame.xDomain;
+  const index = Math.round(from + (event.clientX - rect.left - start) / width * (to - from));
+  if (index >= 0 && index < props.frame.data.length) emit("select", index);
+}
+const reducedMotion = usePreferredReducedMotion();
+const duration = computed(() => reducedMotion.value === "reduce" ? 0 : 450);
+const left = computed(() => resolveDashboardXyLayer(props.frame, "left"));
+const right = computed(() => resolveDashboardXyLayer(props.frame, "right"));
+const hasBars = computed(() => left.value.bars.count > 0);
+const margin = computed(() => ({
+  bottom: 24,
+  left: 46,
+  right: props.frame.right ? 46 : 8,
+  top: 10
+}));
+const padding = computed(
+  () => hasBars.value ? {} : { left: 8, right: props.frame.right ? 6 : 16 }
+);
+const barGeometry = computed(() => {
+  const count = Math.max(1, left.value.bars.count);
+  const points = Math.max(2, props.frame.data.length);
+  const slots = (points + 1) / points;
+  if (props.frame.stacked) return { barMaxWidth: 24, barPadding: 1 - Math.min(0.9, 0.34 * slots) };
+  const dense = count > 2;
+  const width = dense ? 12 : 16;
+  const gap = dense ? 2 : 1;
+  return {
+    barPadding: count > 1 ? gap / (width + gap) : 0,
+    groupMaxWidth: count * (width + gap),
+    groupPadding: 1 - Math.min(0.9, (dense ? 0.16 : 0.26) * count * slots)
+  };
+});
+const tickValues = computed(() => props.frame.labels.map((_, index) => index));
+const x = (datum) => datum.index;
+const formatX = (value) => value instanceof Date ? "" : props.frame.labels[value] ?? "";
+const formatAxis = (axis) => (value) => value instanceof Date || !axis ? "" : axis.format(value);
+const formatLeft = computed(() => formatAxis(props.frame.left));
+const formatRight = computed(() => formatAxis(props.frame.right));
+const tooltip = (datum) => renderDashboardChartTooltip(props.frame, datum);
+const crosshair = { hideWhenFarFromPointer: false, template: tooltip };
+const bands = computed(() => hasBars.value ? [] : props.frame.selection);
+const bandColor = "color-mix(in oklab, var(--ui-primary) 9%, transparent)";
+function labelStyle(label) {
+  const start = margin.value.left + (padding.value.left ?? 0);
+  const end = margin.value.right + (padding.value.right ?? 0);
+  const [from, to] = props.frame.xDomain;
+  const [min, max] = props.frame.left.domain;
+  const fraction = to === from ? 0.5 : (label.index - from) / (to - from);
+  const plot = props.height - margin.value.top - margin.value.bottom;
+  const ratio = max === min ? 0 : (label.value - min) / (max - min);
+  return {
+    left: `calc(${start}px + (100% - ${start + end}px) * ${fraction})`,
+    top: `${margin.value.top + plot * (1 - ratio)}px`,
+    transform: label.value < 0 ? "translate(-50%, 4px)" : "translate(-50%, calc(-100% - 4px))"
+  };
+}
+</script>
+
+<template>
+  <div
+    class="nut-dash-chart relative w-full"
+    :class="[hasBars && 'nut-dash-chart--bars', selectable && 'cursor-pointer']"
+    :style="{ height: `${height}px` }"
+    @click="select"
+  >
+    <VisXYContainer
+      :height="height"
+      :margin="margin"
+      :padding="padding"
+      :auto-margin="false"
+      :x-domain="frame.xDomain"
+      :y-domain="frame.left.domain"
+      :duration="duration"
+    >
+      <VisPlotband
+        v-for="index in bands"
+        :key="`band-${index}`"
+        axis="x"
+        :from="index - 0.5"
+        :to="index + 0.5"
+        :color="bandColor"
+      />
+      <VisStackedBar
+        v-if="frame.stacked && hasBars"
+        :data="frame.data"
+        :x="x"
+        :y="left.bars.y"
+        :color="left.bars.color"
+        :bar-padding="barGeometry.barPadding"
+        :bar-max-width="barGeometry.barMaxWidth"
+        :rounded-corners="2"
+      />
+      <VisGroupedBar
+        v-else-if="hasBars"
+        :data="frame.data"
+        :x="x"
+        :y="left.bars.y"
+        :color="left.bars.color"
+        :group-padding="barGeometry.groupPadding"
+        :group-max-width="barGeometry.groupMaxWidth"
+        :bar-padding="barGeometry.barPadding"
+        :bar-min-height="0"
+        :rounded-corners="2"
+      />
+      <DashboardXyMarks :layer="left" :data="frame.data" />
+      <VisAxis
+        type="x"
+        :tick-format="formatX"
+        :tick-values="tickValues"
+        :num-ticks="tickValues.length"
+        :grid-line="false"
+        :tick-line="false"
+        :domain-line="false"
+        :tick-text-hide-overlapping="true"
+      />
+      <VisAxis
+        type="y"
+        :tick-format="formatLeft"
+        :tick-values="frame.left.ticks"
+        :tick-line="false"
+        :domain-line="false"
+      />
+      <VisCrosshair :data="frame.data" v-bind="crosshair" />
+      <VisTooltip />
+    </VisXYContainer>
+
+    <!-- Secondary axis: a second container over the first, sharing its x domain and margins. -->
+    <VisXYContainer
+      v-if="frame.right"
+      class="pointer-events-none !absolute inset-0"
+      :height="height"
+      :margin="margin"
+      :padding="padding"
+      :auto-margin="false"
+      :x-domain="frame.xDomain"
+      :y-domain="frame.right.domain"
+      :duration="duration"
+    >
+      <DashboardXyMarks :layer="right" :data="frame.data" />
+      <VisAxis
+        type="y"
+        position="right"
+        :tick-format="formatRight"
+        :tick-values="frame.right.ticks"
+        :tick-text-color="right.lineColor"
+        :grid-line="false"
+        :tick-line="false"
+        :domain-line="false"
+      />
+    </VisXYContainer>
+
+    <span
+      v-for="label in frame.valueLabels"
+      :key="`label-${label.index}`"
+      aria-hidden="true"
+      class="pointer-events-none absolute text-[10.5px] leading-none whitespace-nowrap tabular-nums"
+      :class="label.strong ? 'font-semibold text-highlighted' : 'text-muted'"
+      :style="labelStyle(label)"
+      data-value-label
+    >
+      {{ label.text }}
+    </span>
+  </div>
+</template>

package/dist/runtime/dashboard/components/charts/unovis/dashboard-xy-chart.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardChartFrame } from '../../../types/index.js';
+type __VLS_Props = {
+    frame: DashboardChartFrame;
+    height: number;
+    /** A click selects the x position under the pointer. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/dashboard/components/charts/unovis/dashboard-xy-marks.d.vue.ts

@@ -0,0 +1,13 @@
+import type { DashboardChartDatum } from '../../../types/index.js';
+import type { DashboardXyLayer } from './xy-layers.js';
+/**
+ * Line-side marks of one value axis: area fills, dashed comparison lines, solid lines, their point
+ * markers, and reference lines. Rendered inside a `VisXYContainer`, which registers them.
+ */
+type __VLS_Props = {
+    layer: DashboardXyLayer;
+    data: DashboardChartDatum[];
+};
+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/dashboard/components/charts/unovis/dashboard-xy-marks.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { CurveType } from "@unovis/ts";
+import VisArea from "@unovis/vue/components/area";
+import VisLine from "@unovis/vue/components/line";
+import VisPlotline from "@unovis/vue/components/plotline";
+import VisScatter from "@unovis/vue/components/scatter";
+defineProps({
+  layer: { type: Object, required: true },
+  data: { type: Array, required: true }
+});
+const x = (datum) => datum.index;
+const dash = () => [4, 5];
+const surface = () => "var(--ui-bg)";
+</script>
+
+<template>
+  <VisArea
+    v-for="area in layer.areas"
+    :key="`area-${area.key}`"
+    :data="area.data"
+    :x="x"
+    :y="area.y"
+    :color="area.color"
+    :opacity="area.opacity"
+    :curve-type="CurveType.MonotoneX"
+  />
+  <VisLine
+    v-if="layer.dashed.count"
+    :data="data"
+    :x="x"
+    :y="layer.dashed.y"
+    :color="layer.dashed.color"
+    :line-dash-array="dash"
+    :line-width="1.5"
+    :curve-type="CurveType.MonotoneX"
+  />
+  <VisLine
+    v-if="layer.solid.count"
+    :data="data"
+    :x="x"
+    :y="layer.solid.y"
+    :color="layer.solid.color"
+    :line-width="2"
+    :curve-type="CurveType.MonotoneX"
+  />
+  <VisScatter
+    v-for="dots in layer.dots"
+    :key="`dots-${dots.key}`"
+    :data="dots.data"
+    :x="x"
+    :y="dots.y"
+    :size="5.2"
+    :color="surface"
+    :stroke-color="dots.stroke"
+    :stroke-width="1.6"
+  />
+  <VisPlotline
+    v-for="reference in layer.references"
+    :key="reference.key"
+    axis="y"
+    :value="reference.value"
+    :line-style="[2, 4]"
+    :line-width="1"
+    color="var(--nut-dash-ref)"
+    :label-text="reference.text"
+    :label-position="reference.position"
+    :label-offset-x="4"
+    :label-offset-y="7"
+    label-color="var(--nut-dash-ref-label)"
+    :label-size="10"
+  />
+</template>

package/dist/runtime/dashboard/components/charts/unovis/dashboard-xy-marks.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DashboardChartDatum } from '../../../types/index.js';
+import type { DashboardXyLayer } from './xy-layers.js';
+/**
+ * Line-side marks of one value axis: area fills, dashed comparison lines, solid lines, their point
+ * markers, and reference lines. Rendered inside a `VisXYContainer`, which registers them.
+ */
+type __VLS_Props = {
+    layer: DashboardXyLayer;
+    data: DashboardChartDatum[];
+};
+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/dashboard/components/charts/unovis/xy-layers.d.ts

@@ -0,0 +1,43 @@
+import type { DashboardChartDatum, DashboardChartFrame } from '../../../types/index.js';
+type DashboardXyAccessor = (datum: DashboardChartDatum) => number | undefined;
+/**
+ * Series drawn by one unovis component: one accessor and one color per series. unovis calls the
+ * color accessor with a datum (bars) or the whole data array (lines), then the series index.
+ */
+export interface DashboardXySeriesSet {
+    count: number;
+    y: DashboardXyAccessor[];
+    color: (datum: DashboardChartDatum | DashboardChartDatum[], index: number) => string;
+}
+/** Marks of one series drawn from its defined points only (areas, point markers). */
+export interface DashboardXyPointMark {
+    key: string;
+    color: string;
+    data: DashboardChartDatum[];
+    y: DashboardXyAccessor;
+}
+/** Everything drawn against one value axis, resolved once per frame. */
+export interface DashboardXyLayer {
+    bars: DashboardXySeriesSet;
+    solid: DashboardXySeriesSet;
+    dashed: DashboardXySeriesSet;
+    /** Area fills; comparison (dashed) areas are fainter. */
+    areas: (DashboardXyPointMark & {
+        opacity: number;
+    })[];
+    /** Point markers of solid line and area series. */
+    dots: (DashboardXyPointMark & {
+        stroke: () => string;
+    })[];
+    references: {
+        key: string;
+        value: number;
+        text: string;
+        position: 'top-left' | 'top-right';
+    }[];
+    /** Color of the axis' first line series (the right axis labels take it). */
+    lineColor: string | null;
+}
+/** Splits the frame's series of one axis into the unovis components that draw them. */
+export declare function resolveDashboardXyLayer(frame: DashboardChartFrame, axis: 'left' | 'right'): DashboardXyLayer;
+export {};

package/dist/runtime/dashboard/components/charts/unovis/xy-layers.js

@@ -0,0 +1,60 @@
+import { fadeDashboardColor } from "../../../utils/charts.js";
+function accessor(series) {
+  return (datum) => datum.values[series.index];
+}
+function seriesSet(series) {
+  return {
+    color: (_datum, index) => series[index]?.color ?? "var(--nut-dash-s1)",
+    count: series.length,
+    y: series.map(accessor)
+  };
+}
+function barSet(series, emphasis) {
+  const base = seriesSet(series);
+  if (!emphasis) return base;
+  return {
+    ...base,
+    color: (datum, index) => {
+      const color = base.color(datum, index);
+      return Array.isArray(datum) || emphasis[datum.index] ? color : fadeDashboardColor(color);
+    }
+  };
+}
+function definedData(frame, series) {
+  return frame.data.filter((datum) => datum.values[series.index] !== void 0);
+}
+export function resolveDashboardXyLayer(frame, axis) {
+  const series = frame.series.filter((entry) => entry.axis === axis);
+  const lines = series.filter((entry) => entry.type !== "bar");
+  const solid = lines.filter((entry) => !entry.dashed);
+  const scale = axis === "right" ? frame.right : frame.left;
+  return {
+    areas: lines.filter((entry) => entry.type === "area").map((entry) => ({
+      color: entry.color,
+      data: definedData(frame, entry),
+      key: entry.key,
+      opacity: entry.dashed ? 0.06 : 0.14,
+      y: accessor(entry)
+    })),
+    bars: barSet(
+      series.filter((entry) => entry.type === "bar"),
+      frame.emphasis
+    ),
+    dashed: seriesSet(lines.filter((entry) => entry.dashed)),
+    dots: solid.map((entry) => ({
+      color: entry.color,
+      data: definedData(frame, entry),
+      key: entry.key,
+      stroke: () => entry.color,
+      y: accessor(entry)
+    })),
+    lineColor: (solid[0] ?? lines[0])?.color ?? null,
+    references: frame.references.filter((reference) => reference.axis === axis).map((reference, index) => ({
+      key: `${axis}-${index}`,
+      position: reference.position === "start" ? "top-left" : "top-right",
+      text: reference.label || (scale ? scale.format(reference.value) : String(reference.value)),
+      value: reference.value
+    })),
+    solid: seriesSet(solid)
+  };
+}

package/dist/runtime/dashboard/components/dashboard-alerts.d.vue.ts

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAlertAction, DashboardAlertSeverity, DashboardAlertsUi, DashboardBlockBaseProps, DashboardBlockUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        severity: (row: TRow) => DashboardAlertSeverity;
+        /** What needs attention. */
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** Trailing figure (a count, an amount). Numbers go through `format`. */
+        value?: (row: TRow) => LazyTextValue | null | undefined;
+        format?: DashboardValueFormat;
+        /** Icon of the row. Defaults to the severity's icon. */
+        icon?: (row: TRow) => string | undefined;
+        /** Button at the end of the row (a link or a handler). */
+        action?: (row: TRow) => DashboardAlertAction | null | undefined;
+        /** `severity` (default): most severe first, ties in source order. `source`: as received. */
+        order?: "severity" | "source";
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Rows shown as selected (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** More actions of each row: inline icon buttons and a `⋮` menu after its `action`. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button (next to its `action`). */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardAlertsUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};