Copy

<script setup lang="ts">
import LoaderOverlay from "components/LoaderOverlay.vue";
import { formatLocalNumber } from "utils/formatting";
import { computed } from "vue";

export interface StatBarItem {
  label: string | number;
  count: number;
  labelClass?: string;
  routerLink?: string;
}

const props = defineProps({
  items: {
    type: Array as () => StatBarItem[],
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  noDataText: {
    type: String,
    default: "No data available",
  },
  barMinWidth: {
    type: String,
    default: "4px",
  },
  labelColumnWidth: {
    type: String,
    default: "w-min-content",
  },
  rowClass: {
    type: String,
    default: "text-sm",
  },
  countColumnWidth: {
    type: String,
    default: "w-min-content",
  },
  addTitle: {
    type: Boolean,
    default: false,
  },
});

const maxCount = computed(() => {
  if (props.items.length === 0) return 1;
  return Math.max(...props.items.map((i) => i.count)) || 1;
});
</script>

<template>
  <div class="relative flex-1 overflow-y-auto">
    <LoaderOverlay v-if="loading" />

    <div class="h-full overflow-y-auto pr-2">
      <table class="w-full border-separate border-spacing-y-1">
        <tbody>
          <tr v-for="item in items" :key="item.label" :class="rowClass">
            <td
              :class="[
                labelColumnWidth,
                'text-left align-middle text-stone-300',
                item.labelClass,
              ]"
            >
              <slot name="label" :item="item">
                <div class="truncate" :class="labelColumnWidth">
                  <router-link
                    v-if="item.routerLink"
                    :to="item.routerLink"
                    :title="addTitle ? (item.label as string) : undefined"
                  >
                    {{ item.label }}
                  </router-link>
                  <span
                    v-else
                    :title="addTitle ? (item.label as string) : undefined"
                  >
                    {{ item.label }}
                  </span>
                </div>
              </slot>
            </td>
            <td class="w-full">
              <div
                class="from-secondary-600 to-secondary-300 h-1 rounded-full bg-linear-to-r"
                :style="{
                  width: `${(item.count / maxCount) * 100}%`,
                }"
              ></div>
            </td>
            <td class="text-right">
              {{ formatLocalNumber(item.count) }}
            </td>
          </tr>
          <tr v-if="!items.length && !loading">
            <td colspan="3" class="py-4 text-center text-sm text-stone-500">
              {{ noDataText }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
@reference "src/style.css";

td:nth-child(2) {
  @apply px-4;
}

a {
  @apply hover:text-secondary-400;
}

.router-link-active {
  @apply text-secondary-400 font-semibold;
}
</style>