feat(front): add card and chart components for enhanced UI and data visualization

front/assets/css/main.css

@@ -130,4 +130,21 @@
   float: left;
   height: 0;
   pointer-events: none;
+}
+
+@layer base {
+  :root {
+    /* ... */
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+
+    --vis-primary-color: var(--primary);
+    /* change to any hsl value you want */
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
 }

front/components/ui/card/Card.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

front/components/ui/card/CardAction.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

front/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>

front/components/ui/card/CardDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

front/components/ui/card/CardFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

front/components/ui/card/CardHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

front/components/ui/card/CardTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>

front/components/ui/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";

front/components/ui/chart-area/AreaChart.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BaseChartProps } from ".";
+import { type BulletLegendItemInterface, CurveType } from "@unovis/ts";
+import { Area, Axis, Line } from "@unovis/ts";
+import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
+import { useMounted } from "@vueuse/core";
+import { useId } from "reka-ui";
+import { type Component, computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { ChartCrosshair, ChartLegend, defaultColors } from "../chart";
+
+const props = withDefaults(
+  defineProps<
+    BaseChartProps<T> & {
+      /**
+       * Render custom tooltip component.
+       */
+      customTooltip?: Component;
+      /**
+       * Type of curve
+       */
+      curveType?: CurveType;
+      /**
+       * Controls the visibility of gradient.
+       * @default true
+       */
+      showGradiant?: boolean;
+    }
+  >(),
+  {
+    curveType: CurveType.MonotoneX,
+    filterOpacity: 0.2,
+    margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+    showXAxis: true,
+    showYAxis: true,
+    showTooltip: true,
+    showLegend: true,
+    showGridLine: true,
+    showGradiant: true,
+  },
+);
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number];
+}>();
+
+type KeyOfT = Extract<keyof T, string>;
+type Data = (typeof props.data)[number];
+
+const chartRef = useId();
+
+const index = computed(() => props.index as KeyOfT);
+const colors = computed(() =>
+  props.colors?.length ? props.colors : defaultColors(props.categories.length),
+);
+
+const legendItems = ref<BulletLegendItemInterface[]>(
+  props.categories.map((category, i) => ({
+    name: category,
+    color: colors.value[i],
+    inactive: false,
+  })),
+);
+
+const isMounted = useMounted();
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits("legendItemClick", d, i);
+}
+</script>
+
+<template>
+  <div
+    :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')"
+  >
+    <ChartLegend
+      v-if="showLegend"
+      v-model:items="legendItems"
+      @legend-item-click="handleLegendItemClick"
+    />
+
+    <VisXYContainer
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+    >
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient
+            v-for="(color, i) in colors"
+            :id="`${chartRef}-color-${i}`"
+            :key="i"
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <template v-if="showGradiant">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair
+        v-if="showTooltip"
+        :colors="colors"
+        :items="legendItems"
+        :index="index"
+        :custom-tooltip="customTooltip"
+      />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#${chartRef}-color-${i})`,
+            },
+          }"
+          :opacity="
+            legendItems.find((item) => item.name === category)?.inactive
+              ? filterOpacity
+              : 1
+          "
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find((item) => item.name === category)
+                ?.inactive
+                ? filterOpacity
+                : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>

front/components/ui/chart-area/index.ts

@@ -0,0 +1,74 @@
+export { default as AreaChart } from "./AreaChart.vue";
+
+import type { Spacing } from "@unovis/ts";
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[];
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[];
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>;
+  /**
+   * Change the default colors.
+   */
+  colors?: string[];
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing;
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number;
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (
+    tick: number | Date,
+    i: number,
+    ticks: number[] | Date[],
+  ) => string;
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (
+    tick: number | Date,
+    i: number,
+    ticks: number[] | Date[],
+  ) => string;
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean;
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean;
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean;
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean;
+}

front/components/ui/chart/ChartCrosshair.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { omit } from "@unovis/ts";
+import { VisCrosshair, VisTooltip } from "@unovis/vue";
+import { type Component, createApp } from "vue";
+import { ChartTooltip } from ".";
+
+const props = withDefaults(
+  defineProps<{
+    colors: string[];
+    index: string;
+    items: BulletLegendItemInterface[];
+    customTooltip?: Component;
+  }>(),
+  {
+    colors: () => [],
+  },
+);
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d);
+  } else {
+    const componentDiv = document.createElement("div");
+    const omittedData = Object.entries(omit(d, [props.index])).map(
+      ([key, value]) => {
+        const legendReference = props.items.find((i) => i.name === key);
+        return { ...legendReference, value };
+      },
+    );
+    const TooltipComponent = props.customTooltip ?? ChartTooltip;
+    createApp(TooltipComponent, {
+      title: d[props.index].toString(),
+      data: omittedData,
+    }).mount(componentDiv);
+    wm.set(d, componentDiv.innerHTML);
+    return componentDiv.innerHTML;
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? "transparent";
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>

front/components/ui/chart/ChartLegend.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { BulletLegend } from "@unovis/ts";
+import { VisBulletLegend } from "@unovis/vue";
+import { nextTick, onMounted, ref } from "vue";
+import { buttonVariants } from "../button";
+
+const props = withDefaults(
+  defineProps<{ items: BulletLegendItemInterface[] }>(),
+  {
+    items: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number];
+  "update:items": [payload: BulletLegendItemInterface[]];
+}>();
+
+const elRef = ref<HTMLElement>();
+
+function keepStyling() {
+  const selector = `.${BulletLegend.selectors.item}`;
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector);
+    const classes = buttonVariants({ variant: "ghost", size: "sm" }).split(" ");
+    elements?.forEach((el) =>
+      el.classList.add(...classes, "!inline-flex", "!mr-2"),
+    );
+  });
+}
+
+onMounted(() => {
+  keepStyling();
+});
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits("legendItemClick", d, i);
+  const isBulletActive = !props.items[i].inactive;
+  const isFilterApplied = props.items.some((i) => i.inactive);
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits(
+      "update:items",
+      props.items.map((item) => ({ ...item, inactive: false })),
+    );
+  } else {
+    // apply selection, set other item as inactive
+    emits(
+      "update:items",
+      props.items.map((item) =>
+        item.name === d.name
+          ? { ...d, inactive: false }
+          : { ...item, inactive: true },
+      ),
+    );
+  }
+  keepStyling();
+}
+</script>
+
+<template>
+  <div
+    ref="elRef"
+    class="w-max"
+    :style="{
+      '--vis-legend-bullet-size': '16px',
+    }"
+  >
+    <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />
+  </div>
+</template>

front/components/ui/chart/ChartSingleTooltip.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts";
+import { omit } from "@unovis/ts";
+import { VisTooltip } from "@unovis/vue";
+import { type Component, createApp } from "vue";
+import { ChartTooltip } from ".";
+
+const props = defineProps<{
+  selector: string;
+  index: string;
+  items?: BulletLegendItemInterface[];
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;
+  customTooltip?: Component;
+}>();
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap();
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  const valueFormatter = props.valueFormatter ?? ((tick: number) => `${tick}`);
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d);
+    } else {
+      const componentDiv = document.createElement("div");
+      const omittedData = Object.entries(omit(d, [props.index])).map(
+        ([key, value]) => {
+          const legendReference = props.items?.find((i) => i.name === key);
+          return { ...legendReference, value: valueFormatter(value) };
+        },
+      );
+      const TooltipComponent = props.customTooltip ?? ChartTooltip;
+      createApp(TooltipComponent, {
+        title: d[props.index],
+        data: omittedData,
+      }).mount(componentDiv);
+      wm.set(d, componentDiv.innerHTML);
+      return componentDiv.innerHTML;
+    }
+  } else {
+    const data = d.data;
+
+    if (wm.has(data)) {
+      return wm.get(data);
+    } else {
+      const style = getComputedStyle(elements[i]);
+      const omittedData = [
+        {
+          name: data.name,
+          value: valueFormatter(data[props.index]),
+          color: style.fill,
+        },
+      ];
+      const componentDiv = document.createElement("div");
+      const TooltipComponent = props.customTooltip ?? ChartTooltip;
+      createApp(TooltipComponent, {
+        title: d[props.index],
+        data: omittedData,
+      }).mount(componentDiv);
+      wm.set(d, componentDiv.innerHTML);
+      return componentDiv.innerHTML;
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20"
+    :vertical-shift="20"
+    :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>

front/components/ui/chart/ChartTooltip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from "../card";
+
+defineProps<{
+  title?: string;
+  data: {
+    name: string;
+    color: string;
+    value: any;
+  }[];
+}>();
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="p-3 border-b">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="w-2.5 h-2.5 mr-2">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>

front/components/ui/chart/index.ts

@@ -0,0 +1,21 @@
+export { default as ChartCrosshair } from "./ChartCrosshair.vue";
+export { default as ChartLegend } from "./ChartLegend.vue";
+export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue";
+export { default as ChartTooltip } from "./ChartTooltip.vue";
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2);
+  const remainder = count % 2;
+
+  const primaryCount = quotient + remainder;
+  const secondaryCount = quotient;
+  return [
+    ...Array.from(new Array(primaryCount).keys()).map(
+      (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`,
+    ),
+    ...Array.from(new Array(secondaryCount).keys()).map(
+      (i) =>
+        `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`,
+    ),
+  ];
+}