@slexn/codecenter-ui 1.0.0

package/src/components/ui/contribution-graph/ContributionGraph.vue

@@ -0,0 +1,719 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+
+export type ContributionGraphSize = "default" | "lg" | "sm"
+export type ContributionGraphWeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+export interface ContributionGraphItem {
+  count: number
+  date: Date | string
+  label?: string
+}
+
+export interface ContributionGraphDay {
+  count: number
+  date: string
+  day: number
+  label: string
+  level: number
+  outside: boolean
+  row: number
+  weekday: number
+}
+
+export interface ContributionGraphSelectPayload extends ContributionGraphDay {
+  item?: ContributionGraphItem
+}
+
+export interface ContributionGraphYearSelectPayload {
+  endDate: string
+  startDate: string
+  year: number
+}
+
+interface NormalizedContributionItem extends ContributionGraphItem {
+  count: number
+  date: string
+}
+
+interface ContributionGraphProps {
+  activeLabel?: string
+  class?: HTMLAttributes["class"]
+  description?: string
+  emptyLabel?: string
+  endDate?: Date | string
+  fitWidth?: boolean
+  gridClass?: HTMLAttributes["class"]
+  items?: ContributionGraphItem[]
+  legendLabel?: string
+  lessLabel?: string
+  locale?: string
+  maxCount?: number
+  modelValue?: string
+  moreLabel?: string
+  showLegend?: boolean
+  showMonthLabels?: boolean
+  showSummary?: boolean
+  showWeekdayLabels?: boolean
+  showYearSelector?: boolean
+  size?: ContributionGraphSize
+  startDate?: Date | string
+  summary?: string
+  title?: string
+  totalLabel?: string
+  weekStart?: ContributionGraphWeekStart
+  weeks?: number
+  year?: number | string
+  yearOptions?: Array<number | string>
+  yearSelectorLabel?: string
+}
+
+const props = withDefaults(defineProps<ContributionGraphProps>(), {
+  activeLabel: "active days",
+  emptyLabel: "No contributions",
+  fitWidth: true,
+  legendLabel: "Contribution intensity",
+  lessLabel: "Less",
+  moreLabel: "More",
+  showLegend: true,
+  showMonthLabels: true,
+  showSummary: true,
+  showWeekdayLabels: false,
+  showYearSelector: true,
+  size: "default",
+  totalLabel: "contributions",
+  weekStart: 0,
+  yearSelectorLabel: "Contribution years",
+})
+
+const emit = defineEmits<{
+  "select": [day: ContributionGraphSelectPayload]
+  "update:modelValue": [date: string]
+  "update:year": [year: number]
+  "year-change": [payload: ContributionGraphYearSelectPayload]
+}>()
+
+const dayMs = 24 * 60 * 60 * 1000
+const graphViewport = ref<HTMLElement | null>(null)
+const graphWidth = ref<number | null>(null)
+const internalYear = ref<number | null>(null)
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  const element = graphViewport.value
+
+  if (!element || typeof ResizeObserver === "undefined") return
+
+  graphWidth.value = element.clientWidth
+  resizeObserver = new ResizeObserver((entries) => {
+    graphWidth.value = Math.round(entries[0]?.contentRect.width ?? element.clientWidth)
+  })
+  resizeObserver.observe(element)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+
+const dateFormatter = computed(() =>
+  new Intl.DateTimeFormat(props.locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }),
+)
+const monthFormatter = computed(() =>
+  new Intl.DateTimeFormat(props.locale, {
+    month: "short",
+  }),
+)
+const weekdayFormatter = computed(() =>
+  new Intl.DateTimeFormat(props.locale, {
+    weekday: "short",
+  }),
+)
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(props.locale, {
+    maximumFractionDigits: 0,
+  }),
+)
+const baseEndDate = computed(() => stripTime(parseDate(props.endDate) ?? new Date()))
+const selectedYear = computed(() =>
+  normalizeYear(props.year) ?? internalYear.value ?? baseEndDate.value.getFullYear(),
+)
+
+const range = computed(() => {
+  if (props.showYearSelector) {
+    return getContributionYearRange(selectedYear.value)
+  }
+
+  const rawEnd = baseEndDate.value
+  const defaultStart = props.weeks
+    ? addDays(rawEnd, -(Math.max(1, Math.trunc(props.weeks)) * 7) + 1)
+    : getOneYearStart(rawEnd)
+  const parsedStart = parseDate(props.startDate)
+  const rawStart = stripTime(parsedStart ?? defaultStart)
+
+  if (rawStart <= rawEnd) {
+    return {
+      end: rawEnd,
+      start: rawStart,
+    }
+  }
+
+  return {
+    end: rawStart,
+    start: rawEnd,
+  }
+})
+
+const normalizedItems = computed(() => {
+  const items = new Map<string, NormalizedContributionItem>()
+
+  for (const item of props.items ?? []) {
+    const date = parseDate(item.date)
+
+    if (!date) continue
+
+    const key = formatLocalDate(date)
+    const existing = items.get(key)
+    const count = normalizeCount(item.count)
+
+    items.set(key, {
+      ...item,
+      count: (existing?.count ?? 0) + count,
+      date: key,
+      label: item.label ?? existing?.label,
+    })
+  }
+
+  return items
+})
+
+const maxCount = computed(() => {
+  if (props.maxCount !== undefined) return Math.max(normalizeCount(props.maxCount), 0)
+
+  return Math.max(
+    0,
+    ...Array.from(normalizedItems.value.values(), (item) => item.count),
+  )
+})
+
+const days = computed<ContributionGraphDay[]>(() => {
+  const totalDays = differenceInDays(range.value.start, range.value.end) + 1
+
+  return Array.from({ length: totalDays }, (_, index) => {
+    const date = addDays(range.value.start, index)
+    const key = formatLocalDate(date)
+    const item = normalizedItems.value.get(key)
+    const count = item?.count ?? 0
+    const level = getContributionLevel(count)
+
+    return {
+      count,
+      date: key,
+      day: date.getDate(),
+      label: item?.label ?? formatCellLabel(date, count),
+      level,
+      outside: false,
+      row: getWeekdayRow(date, props.weekStart),
+      weekday: date.getDay(),
+    }
+  })
+})
+
+const calendarWeeks = computed(() => {
+  const grouped: ContributionGraphDay[][] = []
+  const weekMap = new Map<string, ContributionGraphDay[]>()
+
+  for (const day of days.value) {
+    const date = parseDate(day.date)
+
+    if (!date) continue
+
+    const key = formatLocalDate(startOfWeek(date, props.weekStart))
+    let week = weekMap.get(key)
+
+    if (!week) {
+      week = []
+      weekMap.set(key, week)
+      grouped.push(week)
+    }
+
+    week.push(day)
+  }
+
+  return grouped
+})
+
+const weekCount = computed(() => calendarWeeks.value.length)
+const totalCount = computed(() =>
+  days.value.reduce((total, day) => total + day.count, 0),
+)
+const activeDays = computed(() =>
+  days.value.filter((day) => day.count > 0).length,
+)
+const availableYears = computed(() => {
+  const configuredYears = props.yearOptions
+    ?.map((year) => normalizeYear(year))
+    .filter((year): year is number => year !== null)
+
+  if (configuredYears?.length) {
+    const years = new Set(configuredYears)
+    years.add(selectedYear.value)
+
+    return Array.from(years).sort((a, b) => b - a)
+  }
+
+  const years = new Set<number>([
+    baseEndDate.value.getFullYear(),
+    selectedYear.value,
+  ])
+
+  for (const item of normalizedItems.value.values()) {
+    const year = normalizeYear(item.date.slice(0, 4))
+
+    if (year !== null) years.add(year)
+  }
+
+  return Array.from(years).sort((a, b) => b - a)
+})
+const hasYearSelector = computed(() =>
+  props.showYearSelector && availableYears.value.length > 0,
+)
+const formattedSummary = computed(() => {
+  if (props.summary) return props.summary
+
+  return `${numberFormatter.value.format(totalCount.value)} ${props.totalLabel} · ${numberFormatter.value.format(activeDays.value)} ${props.activeLabel}`
+})
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || props.showSummary),
+)
+
+const monthLabelInterval = computed(() => {
+  if (!props.fitWidth || graphWidth.value === null) return 1
+  if (graphWidth.value < 360) return 4
+  if (graphWidth.value < 520) return 3
+  if (graphWidth.value < 680) return 2
+
+  return 1
+})
+
+const monthLabels = computed(() => {
+  const labels: Array<{ column: number, key: string, label: string }> = []
+  let lastKey = ""
+
+  calendarWeeks.value.forEach((week, index) => {
+    const firstMonthDay =
+      week.find((day) => !day.outside && parseDate(day.date)?.getDate() === 1) ??
+      (index === 0 ? week.find((day) => !day.outside) : undefined)
+
+    if (!firstMonthDay) return
+
+    const date = parseDate(firstMonthDay.date)
+
+    if (!date) return
+
+    const key = `${date.getFullYear()}-${date.getMonth()}`
+
+    if (key === lastKey) return
+
+    labels.push({
+      column: index + 1,
+      key,
+      label: monthFormatter.value.format(date),
+    })
+    lastKey = key
+  })
+
+  return labels.map((label, index) => ({
+    ...label,
+    align: index === labels.length - 1 ? "end" : "start",
+    span: (labels[index + 1]?.column ?? weekCount.value + 1) - label.column,
+    visible:
+      monthLabelInterval.value <= 1 ||
+      labels.length <= 6 ||
+      index === 0 ||
+      index === labels.length - 1 ||
+      index % monthLabelInterval.value === 0,
+  }))
+})
+
+const weekdayLabels = computed(() =>
+  Array.from({ length: 7 }, (_, index) => {
+    const weekday = (props.weekStart + index) % 7
+    const labelDate = new Date(2024, 0, 7 + weekday)
+    const shouldShow = weekday === 1 || weekday === 3 || weekday === 5
+
+    return {
+      key: weekday,
+      label: shouldShow ? weekdayFormatter.value.format(labelDate) : "",
+    }
+  }),
+)
+
+const graphStyle = computed<CSSProperties>(() => ({
+  gridTemplateColumns: props.fitWidth
+    ? `repeat(${weekCount.value}, minmax(0, 1fr))`
+    : `repeat(${weekCount.value}, var(--contribution-graph-cell-size))`,
+}))
+
+const rootStyle = computed<CSSProperties>(() => ({
+  "--contribution-graph-cell-size": getCellSize(props.size),
+  "--contribution-graph-gap": props.fitWidth ? "0.125rem" : "0.25rem",
+} as CSSProperties))
+
+function normalizeCount(value: number) {
+  if (!Number.isFinite(value)) return 0
+
+  return Math.max(0, Math.round(value))
+}
+
+function normalizeYear(value?: number | string | null) {
+  const year = typeof value === "string" ? Number(value) : value
+
+  if (typeof year !== "number" || !Number.isFinite(year)) return null
+
+  return Math.trunc(year)
+}
+
+function getContributionLevel(count: number) {
+  if (count <= 0 || maxCount.value <= 0) return 0
+
+  return Math.max(1, Math.min(4, Math.ceil((count / maxCount.value) * 4)))
+}
+
+function getCellSize(size: ContributionGraphSize) {
+  if (size === "sm") return "0.625rem"
+  if (size === "lg") return "0.875rem"
+
+  return "0.75rem"
+}
+
+function getOneYearStart(endDate: Date) {
+  const start = new Date(endDate)
+  start.setFullYear(start.getFullYear() - 1)
+
+  return addDays(start, 1)
+}
+
+function getContributionYearRange(year: number) {
+  const end = year === baseEndDate.value.getFullYear()
+    ? baseEndDate.value
+    : new Date(year, 11, 31)
+
+  return {
+    end,
+    start: getOneYearStart(end),
+  }
+}
+
+function parseDate(value?: Date | string | null) {
+  if (!value) return null
+
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return null
+
+    return stripTime(value)
+  }
+
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
+
+  if (!match) return null
+
+  const [, year, month, day] = match
+  const date = new Date(Number(year), Number(month) - 1, Number(day))
+
+  if (Number.isNaN(date.getTime())) return null
+
+  return stripTime(date)
+}
+
+function stripTime(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+function addDays(date: Date, amount: number) {
+  const nextDate = new Date(date)
+  nextDate.setDate(nextDate.getDate() + amount)
+
+  return nextDate
+}
+
+function startOfWeek(date: Date, weekStart: ContributionGraphWeekStart) {
+  const day = date.getDay()
+  const diff = (day - weekStart + 7) % 7
+
+  return addDays(date, -diff)
+}
+
+function getWeekdayRow(date: Date, weekStart: ContributionGraphWeekStart) {
+  return ((date.getDay() - weekStart + 7) % 7) + 1
+}
+
+function differenceInDays(start: Date, end: Date) {
+  return Math.round((stripTime(end).getTime() - stripTime(start).getTime()) / dayMs)
+}
+
+function isDateInRange(date: Date, start: Date, end: Date) {
+  return date >= start && date <= end
+}
+
+function formatLocalDate(date: Date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+
+  return `${year}-${month}-${day}`
+}
+
+function formatCellLabel(date: Date, count: number) {
+  const formattedDate = dateFormatter.value.format(date)
+
+  if (count <= 0) return `${props.emptyLabel} on ${formattedDate}`
+
+  return `${numberFormatter.value.format(count)} ${props.totalLabel} on ${formattedDate}`
+}
+
+function handleSelect(day: ContributionGraphDay) {
+  if (day.outside) return
+
+  const item = normalizedItems.value.get(day.date)
+
+  emit("update:modelValue", day.date)
+  emit("select", {
+    ...day,
+    item,
+  })
+}
+
+function handleYearSelect(year: number) {
+  if (year === selectedYear.value) return
+
+  internalYear.value = year
+
+  const nextRange = getContributionYearRange(year)
+  const selectedDate = parseDate(props.modelValue)
+
+  emit("update:year", year)
+  emit("year-change", {
+    endDate: formatLocalDate(nextRange.end),
+    startDate: formatLocalDate(nextRange.start),
+    year,
+  })
+
+  if (!selectedDate || !isDateInRange(selectedDate, nextRange.start, nextRange.end)) {
+    emit("update:modelValue", formatLocalDate(nextRange.end))
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="contribution-graph"
+    :class="cn('flex min-w-0 flex-col gap-4 text-sm', props.class)"
+    :style="rootStyle"
+  >
+    <div
+      v-if="hasHeader"
+      data-slot="contribution-graph-header"
+      class="flex flex-wrap items-end justify-between gap-3"
+    >
+      <div v-if="props.title || props.description" class="flex min-w-0 flex-col gap-1">
+        <h3
+          v-if="props.title"
+          data-slot="contribution-graph-title"
+          class="truncate text-base font-semibold leading-none"
+        >
+          {{ props.title }}
+        </h3>
+        <p
+          v-if="props.description"
+          data-slot="contribution-graph-description"
+          class="text-sm text-muted-foreground"
+        >
+          {{ props.description }}
+        </p>
+      </div>
+
+      <p
+        v-if="props.showSummary"
+        data-slot="contribution-graph-summary"
+        class="shrink-0 text-sm font-medium text-muted-foreground"
+      >
+        {{ formattedSummary }}
+      </p>
+    </div>
+
+    <div
+      data-slot="contribution-graph-body"
+      :class="cn('flex min-w-0 flex-col gap-4', hasYearSelector && 'md:grid md:grid-cols-[minmax(0,1fr)_4.5rem] md:items-start')"
+    >
+      <div data-slot="contribution-graph-main" class="flex min-w-0 flex-col gap-4">
+        <TooltipProvider>
+          <div
+            data-slot="contribution-graph-scroll"
+            ref="graphViewport"
+            :class="cn('min-w-0 pb-1', props.fitWidth ? 'overflow-visible' : 'overflow-x-auto')"
+          >
+            <div
+              data-slot="contribution-graph-layout"
+              :class="
+                cn(
+                  'gap-x-2 gap-y-1',
+                  props.fitWidth ? 'grid w-full min-w-0' : 'inline-grid min-w-max',
+                  props.showWeekdayLabels ? 'grid-cols-[2rem_minmax(0,1fr)]' : 'grid-cols-1',
+                  props.gridClass,
+                )
+              "
+            >
+              <div
+                v-if="props.showWeekdayLabels && props.showMonthLabels"
+                aria-hidden="true"
+              />
+
+              <div
+                v-if="props.showMonthLabels"
+                data-slot="contribution-graph-months"
+                class="grid min-h-4 gap-[var(--contribution-graph-gap)] overflow-visible text-xs text-muted-foreground"
+                :style="graphStyle"
+              >
+                <span
+                  v-for="month in monthLabels"
+                  :key="month.key"
+                  v-show="month.visible"
+                  class="whitespace-nowrap leading-none"
+                  :style="{
+                    gridColumn: `${month.column} / span ${month.span}`,
+                    justifySelf: month.align,
+                  }"
+                >
+                  {{ month.label }}
+                </span>
+              </div>
+
+              <div
+                v-if="props.showWeekdayLabels"
+                data-slot="contribution-graph-weekdays"
+                class="grid grid-rows-7 gap-1 py-px text-right text-xs leading-none text-muted-foreground"
+              >
+                <span
+                  v-for="weekday in weekdayLabels"
+                  :key="weekday.key"
+                  class="flex h-[var(--contribution-graph-cell-size)] items-center justify-end"
+                >
+                  {{ weekday.label }}
+                </span>
+              </div>
+
+              <div
+                data-slot="contribution-graph-grid"
+                :class="
+                  cn(
+                    'grid gap-[var(--contribution-graph-gap)]',
+                    props.fitWidth ? 'w-full min-w-0' : 'min-w-max',
+                  )
+                "
+                role="grid"
+                :aria-label="props.title ?? 'Contribution graph'"
+                :style="graphStyle"
+              >
+                <div
+                  v-for="(week, weekIndex) in calendarWeeks"
+                  :key="weekIndex"
+                  data-slot="contribution-graph-week"
+                  class="grid min-w-0 grid-rows-7 gap-[var(--contribution-graph-gap)]"
+                  role="row"
+                >
+                  <template
+                    v-for="contributionDay in week"
+                    :key="contributionDay.date"
+                  >
+                    <Tooltip>
+                      <TooltipTrigger as-child>
+                        <button
+                          data-slot="contribution-graph-cell"
+                          type="button"
+                          role="gridcell"
+                          :aria-label="contributionDay.label"
+                          :aria-selected="props.modelValue === contributionDay.date"
+                          :data-level="contributionDay.level"
+                          :data-outside="contributionDay.outside ? '' : undefined"
+                          :disabled="contributionDay.outside"
+                          :style="{ gridRow: contributionDay.row }"
+                          :class="
+                            cn(
+                              'border border-border/60 bg-[var(--contribution-graph-level-0)] outline-none transition-[background-color,border-color,box-shadow,opacity,transform] hover:border-foreground/30 hover:ring-2 hover:ring-ring/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none data-[outside]:opacity-30 data-[level=1]:bg-[var(--contribution-graph-level-1)] data-[level=2]:bg-[var(--contribution-graph-level-2)] data-[level=3]:bg-[var(--contribution-graph-level-3)] data-[level=4]:bg-[var(--contribution-graph-level-4)] aria-selected:border-foreground aria-selected:ring-2 aria-selected:ring-ring/40',
+                              props.fitWidth
+                                ? 'aspect-square w-full min-w-0 rounded-[2px]'
+                                : 'size-[var(--contribution-graph-cell-size)] rounded-[3px]',
+                              contributionDay.count > 0 && 'hover:-translate-y-px',
+                            )
+                          "
+                          @click="handleSelect(contributionDay)"
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {{ contributionDay.label }}
+                      </TooltipContent>
+                    </Tooltip>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+        </TooltipProvider>
+
+        <div
+          v-if="props.showLegend"
+          data-slot="contribution-graph-legend"
+          class="flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground"
+          :aria-label="props.legendLabel"
+        >
+          <span>{{ props.lessLabel }}</span>
+          <span
+            v-for="level in [0, 1, 2, 3, 4]"
+            :key="level"
+            data-slot="contribution-graph-legend-cell"
+            :data-level="level"
+            class="size-[var(--contribution-graph-cell-size)] rounded-[3px] border border-border/60 bg-[var(--contribution-graph-level-0)] data-[level=1]:bg-[var(--contribution-graph-level-1)] data-[level=2]:bg-[var(--contribution-graph-level-2)] data-[level=3]:bg-[var(--contribution-graph-level-3)] data-[level=4]:bg-[var(--contribution-graph-level-4)]"
+          />
+          <span>{{ props.moreLabel }}</span>
+        </div>
+      </div>
+
+      <nav
+        v-if="hasYearSelector"
+        data-slot="contribution-graph-years"
+        class="order-first flex min-w-0 gap-1 overflow-x-auto pb-1 md:order-none md:flex-col md:overflow-visible md:pb-0"
+        :aria-label="props.yearSelectorLabel"
+      >
+        <button
+          v-for="year in availableYears"
+          :key="year"
+          data-slot="contribution-graph-year"
+          type="button"
+          :aria-current="year === selectedYear ? 'date' : undefined"
+          :aria-pressed="year === selectedYear"
+          :data-state="year === selectedYear ? 'active' : 'inactive'"
+          :class="
+            cn(
+              'inline-flex h-8 shrink-0 items-center justify-center rounded-md px-3 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground md:w-full',
+            )
+          "
+          @click="handleYearSelect(year)"
+        >
+          {{ year }}
+        </button>
+      </nav>
+    </div>
+  </div>
+</template>