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

package/shared/components/common/popup/vc-popup-base.vue

@@ -0,0 +1,133 @@
+<template>
+  <VcPopup
+    :variant="variant"
+    :is-mobile-fullscreen="isMobileFullscreen"
+    :title="title"
+    :closable="closable"
+    @close="$emit('close')"
+  >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+
+    <template #content>
+      <slot />
+    </template>
+
+    <template #footer="{ close }">
+      <slot
+        name="footer"
+        :close="close"
+        :confirm="() => handleConfirm(close)"
+      >
+        <div
+          class="vc-popup-base__actions"
+          :class="{
+            'vc-popup-base__actions--confirm': mode === 'confirm',
+            'vc-popup-base__actions--single': mode === 'acknowledge',
+          }"
+        >
+          <template v-if="mode === 'confirm'">
+            <VcButton
+              :text="confirmAsText"
+              class="vc-popup-base__confirm"
+              @click="handleConfirm(close)"
+            >
+              {{ confirmLabel }}
+            </VcButton>
+            <VcButton @click="close">{{ cancelLabel }}</VcButton>
+          </template>
+          <VcButton
+            v-else
+            class="vc-popup-base__single"
+            @click="close"
+          >
+            {{ actionLabel }}
+          </VcButton>
+        </div>
+      </slot>
+    </template>
+  </VcPopup>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import VcPopup, { type PopupVariant } from "@ui/components/organisms/vc-popup/vc-popup.vue";
+
+export interface Props {
+  title?: string;
+  variant?: PopupVariant;
+  mode?: "acknowledge" | "confirm";
+  actionLabel?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmAsText?: boolean;
+  closable?: boolean;
+  isMobileFullscreen?: boolean;
+  closeOnConfirm?: boolean;
+}
+
+export interface Emits {
+  (event: "close"): void;
+  (event: "confirm"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  mode: "acknowledge",
+  actionLabel: "",
+  confirmLabel: "",
+  cancelLabel: "",
+  confirmAsText: false,
+  closable: true,
+  isMobileFullscreen: true,
+  closeOnConfirm: false,
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  header: (props: any) => any;
+  default: (props: any) => any;
+  footer: (props: { close: () => void; confirm: () => void }) => any;
+}>();
+
+function handleConfirm(close: () => void): void {
+  emit("confirm");
+
+  if (props.closeOnConfirm) {
+    close();
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  // Deprecated alias: --confirm-button-color
+  --popup-base-confirm-color: var(--confirm-button-color, var(--secondary-700));
+}
+
+.vc-popup-base {
+  &__actions {
+    @apply tw-flex tw-flex-auto tw-justify-end;
+
+    &--confirm {
+      @apply tw-gap-6;
+    }
+
+    &--single {
+      @apply tw-gap-0;
+    }
+  }
+
+  &__single {
+    @apply tw-ml-auto;
+  }
+
+  &__confirm {
+    color: var(--popup-base-confirm-color) !important;
+  }
+}
+</style>

package/shared/components/common/popup/vc-popup-error.vue

@@ -1,7 +1,8 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="error"
-    is-mobile-fullscreen
+    mode="acknowledge"
+    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
     :title="title"
     @close="$emit('close')"
   >
@@ -11,24 +12,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end">
-        <VcButton
-          class="tw-ml-auto"
-          @click="close"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.OK") }}</VcButton
-        >
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -47,9 +36,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

package/shared/components/common/popup/vc-popup-info.vue

@@ -1,7 +1,8 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="info"
-    is-mobile-fullscreen
+    mode="acknowledge"
+    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
     :title="title"
     @close="$emit('close')"
   >
@@ -11,24 +12,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end">
-        <VcButton
-          class="tw-ml-auto"
-          @click="close"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.OK") }}</VcButton
-        >
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -47,9 +36,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

package/shared/components/common/popup/vc-popup-warning.vue

@@ -1,9 +1,13 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="warning"
-    is-mobile-fullscreen
+    mode="confirm"
+    :confirm-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM')"
+    :cancel-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CANCEL')"
+    confirm-as-text
     :title="title"
     @close="$emit('close')"
+    @confirm="$emit('confirm')"
   >
     <template
       v-if="$slots.header"
@@ -11,26 +15,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end tw-gap-6">
-        <VcButton
-          text
-          class="!tw-text-[var(--confirm-button-color)]"
-          @click="$emit('confirm')"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM") }}</VcButton
-        >
-        <VcButton @click="close">{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CANCEL") }}</VcButton>
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -50,9 +40,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

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

@@ -0,0 +1,54 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<template>
+  <div
+    ref="containerRef"
+    class="dashboard-chart-container"
+    :style="cssVars"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ChartConfig } from "./types";
+
+export interface Props {
+  config: ChartConfig;
+}
+
+const props = defineProps<Props>();
+
+const containerRef = ref<HTMLElement>();
+
+const cssVars = computed(() => {
+  const vars: Record<string, string> = {};
+  const keys = Object.keys(props.config);
+  keys.forEach((key, index) => {
+    const item = props.config[key];
+    if (item.color) {
+      vars[`--vis-color${index}`] = item.color;
+    }
+  });
+  return vars;
+});
+
+defineSlots<{
+  default: (props: any) => any;
+}>();
+</script>
+
+<style lang="scss">
+@use "./chart-theme";
+
+.dashboard-chart-container {
+  @apply tw-w-full tw-h-full tw-min-h-0;
+
+  // Force Unovis host tooltip container to stay transparent.
+  --vis-tooltip-padding: 0;
+  --vis-tooltip-border-color: transparent;
+  --vis-tooltip-background-color: transparent;
+  --vis-tooltip-box-shadow: none;
+  --vis-tooltip-backdrop-filter: none;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="dashboard-chart-legend">
+    <div
+      v-for="(item, key) in config"
+      :key="key"
+      class="dashboard-chart-legend__item"
+    >
+      <span
+        class="dashboard-chart-legend__indicator"
+        :style="{ background: item.color }"
+      />
+      <span class="dashboard-chart-legend__label">{{ item.label }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartConfig } from "./types";
+
+export interface Props {
+  config: ChartConfig;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+.dashboard-chart-legend {
+  @apply tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-gap-x-4 tw-gap-y-1 tw-px-3 tw-py-2;
+
+  &__item {
+    @apply tw-flex tw-items-center tw-gap-1.5 tw-text-xs;
+    color: var(--neutrals-600);
+  }
+
+  &__indicator {
+    @apply tw-w-2 tw-h-2 tw-rounded-full tw-flex-shrink-0;
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="dashboard-chart-tooltip">
+    <div
+      v-if="title"
+      class="dashboard-chart-tooltip__title"
+    >
+      {{ title }}
+    </div>
+    <div class="dashboard-chart-tooltip__items">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="dashboard-chart-tooltip__item"
+      >
+        <span
+          class="dashboard-chart-tooltip__indicator"
+          :style="{ background: item.color }"
+        />
+        <span class="dashboard-chart-tooltip__label">{{ item.label }}</span>
+        <span class="dashboard-chart-tooltip__value">{{ item.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface TooltipItem {
+  label: string;
+  value: string | number;
+  color: string;
+}
+
+export interface Props {
+  title?: string;
+  items: TooltipItem[];
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+@use "./chart-tooltip";
+</style>

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>