@youcan/celeste 0.9.3 → 0.10.0

package/src/components/chart/bar-chart.vue

@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import type { Tooltip } from '@unovis/ts';
+import type { ChartLegendItem } from './chart-legend.vue';
+import type { ChartTable } from './chart-plot.vue';
+import type { ChartFormat } from '@/utils/chart';
+import { GroupedBar, Position, StackedBar } from '@unovis/ts';
+import { VisAxis, VisCrosshair, VisGroupedBar, VisStackedBar, VisTooltip, VisXYContainer } from '@unovis/vue';
+import { useElementSize, useTextDirection } from '@vueuse/core';
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { useChartMotion } from '@/composables/use-chart-motion';
+import { useLocale } from '@/composables/use-locale';
+import { chartColor, formatCompact, formatNumber, niceTicks } from '@/utils/chart';
+import ChartLegend from './chart-legend.vue';
+import ChartPlot from './chart-plot.vue';
+import { chartTooltip } from './chart-tooltip';
+
+export type BarDatum = Record<string, any>;
+
+export interface BarSeries {
+  key: string;
+  name: string;
+  color?: string;
+  muted?: boolean;
+}
+
+export interface BarChartProps {
+  data: BarDatum[];
+  series: BarSeries[];
+  category: string;
+  layout?: 'stacked' | 'grouped';
+  dense?: boolean;
+  size?: 'default' | 'compact';
+  state?: 'ready' | 'loading' | 'empty' | 'error';
+  title?: string;
+  description?: string;
+  format?: ChartFormat;
+  tickFormat?: ChartFormat;
+  ticks?: number;
+  radius?: number;
+  legend?: 'inline' | 'chip' | 'table' | 'none';
+  total?: boolean;
+  totalLabel?: string;
+  ariaLabel?: string;
+  tableVisible?: boolean;
+}
+
+const props = withDefaults(defineProps<BarChartProps>(), {
+  layout: 'stacked',
+  format: formatNumber,
+  tickFormat: formatCompact,
+  ticks: 4,
+  radius: 5,
+  total: true,
+  totalLabel: 'Total',
+});
+const CATEGORY_PADDING = 0.4;
+const DENSE_PADDING = 0.32;
+const DENSE_TICKS = 3;
+const DENSE_LABELS = 7;
+const TOOLTIP_MAX_WIDTH = 280;
+const TOOLTIP_GAP = 8;
+const MARGIN = { top: 16 };
+const EPSILON = 1e-6;
+
+const hidden = ref<string[]>([]);
+const hovered = ref<number>();
+const band = ref({ left: 0, width: 0, height: 0 });
+const bandEl = useTemplateRef<HTMLElement>('bandEl');
+const tip = useTemplateRef<{ component: Tooltip }>('tip');
+const duration = useChartMotion('bar');
+const locale = useLocale();
+const direction = useTextDirection({ observe: true });
+
+const plotEl = computed(() => bandEl.value?.parentElement ?? null);
+const { width: plotWidth } = useElementSize(plotEl);
+
+const rtl = computed(() => direction.value === 'rtl');
+const rows = computed(() => rtl.value ? [...props.data].reverse() : props.data);
+const visible = computed(() => props.series.filter(s => !hidden.value.includes(s.key)));
+const legendVariant = computed(() => props.legend
+  ?? (props.series.length > 1 && !props.dense ? 'inline' : 'none'));
+const stacked = computed(() => props.dense || props.layout === 'stacked');
+const bars = computed(() => stacked.value ? StackedBar : GroupedBar);
+const barSelector = computed(() => bars.value.selectors.bar);
+
+const colors = computed(() => new Map(
+  props.series.map((s, i) => [s.key, s.color ?? (s.muted ? 'var(--chart-muted)' : chartColor(i))]),
+));
+
+function x(_: BarDatum, i: number) {
+  return i;
+}
+
+function label(d: BarDatum) {
+  return String(d[props.category]);
+}
+
+function valueOf(d: BarDatum, key: string) {
+  return Number(d[key]) || 0;
+}
+
+function totalOf(d: BarDatum) {
+  return visible.value.reduce((sum, s) => sum + valueOf(d, s.key), 0);
+}
+
+function row(d: BarDatum) {
+  return d.datum ?? d;
+}
+
+function isHidden(d: BarDatum, i: number) {
+  return hidden.value.includes(props.series[d.stackIndex ?? i % props.series.length].key);
+}
+
+const formatValue = computed(() => (v: number) => props.format(v, locale.value));
+const formatTick = computed(() => (v: number) => props.tickFormat(v, locale.value));
+
+const y = computed(() => props.dense
+  ? [totalOf]
+  : props.series.map(s => hidden.value.includes(s.key)
+      ? () => EPSILON
+      : (d: BarDatum) => valueOf(d, s.key)));
+
+const color = computed(() => {
+  const map = colors.value;
+
+  if (props.dense)
+    return () => chartColor(0);
+
+  return (d: BarDatum, i: number) => {
+    const { key } = props.series[i];
+
+    return d[key] ? map.get(key)! : 'var(--chart-zero)';
+  };
+});
+
+const barWidth = computed(() => plotWidth.value / Math.max(rows.value.length, 1) * (1 - DENSE_PADDING));
+const radius = computed(() => {
+  if (!props.dense)
+    return props.radius;
+
+  if (barWidth.value < 4)
+    return 0;
+
+  return barWidth.value < 6 ? 1 : Math.min(2, props.radius);
+});
+
+const categoryTicks = computed(() => {
+  const stride = props.dense ? Math.ceil(rows.value.length / DENSE_LABELS) : 1;
+
+  return rows.value.map((_, i) => i).filter(i => i % stride === 0);
+});
+
+const peak = computed(() => Math.max(0, ...rows.value.map(d => props.layout === 'stacked'
+  ? totalOf(d)
+  : Math.max(...visible.value.map(s => valueOf(d, s.key))))));
+
+const tickValues = computed(() => niceTicks(peak.value, props.dense ? DENSE_TICKS : props.ticks));
+const valueDomain = computed<[number, number]>(() => [0, tickValues.value[tickValues.value.length - 1]]);
+
+const legendItems = computed<ChartLegendItem[]>(() => props.series.map(s => ({
+  key: s.key,
+  name: s.name,
+  color: colors.value.get(s.key)!,
+  value: legendVariant.value === 'table'
+    ? formatValue.value(props.data.reduce((sum, d) => sum + valueOf(d, s.key), 0))
+    : undefined,
+})));
+
+const table = computed<ChartTable>(() => ({
+  head: [props.category, ...props.series.map(s => s.name)],
+  rows: props.data.map(d => [label(d), ...props.series.map(s => formatValue.value(valueOf(d, s.key)))]),
+}));
+
+const ariaLabel = computed(() => props.ariaLabel ?? [
+  `${props.layout} bar chart of`,
+  props.series.map(s => s.name).join(', '),
+  `by ${props.category}, ${props.data.length} bars,`,
+  `from ${label(props.data[0])} to ${label(props.data[props.data.length - 1])}`,
+].join(' '));
+
+function tooltipFor(d: BarDatum) {
+  return chartTooltip({
+    title: label(row(d)),
+    rows: visible.value.map(s => ({
+      name: s.name,
+      value: formatValue.value(valueOf(row(d), s.key)),
+      color: colors.value.get(s.key),
+    })),
+    total: props.total && visible.value.length > 1
+      ? { name: props.totalLabel, value: formatValue.value(totalOf(row(d))) }
+      : undefined,
+  });
+}
+
+const triggers = computed(() => props.dense ? {} : { [barSelector.value]: tooltipFor });
+
+function onEnter(d: BarDatum & { index?: number }, event: MouseEvent) {
+  hovered.value = d.index ?? rows.value.indexOf(d);
+
+  const bar = event.target as Element;
+  const group = bar.parentElement!.getBoundingClientRect();
+  const host = bandEl.value!.parentElement!.getBoundingClientRect();
+  const pad = group.width * CATEGORY_PADDING / (1 - CATEGORY_PADDING) / 2;
+
+  band.value = {
+    left: group.left - host.left - pad,
+    width: group.width + pad * 2,
+    height: group.bottom - host.top,
+  };
+
+  const tooltip = tip.value?.component;
+  const width = tooltip?.element.offsetWidth || TOOLTIP_MAX_WIDTH;
+  const fits = host.right - bar.getBoundingClientRect().right > width + TOOLTIP_GAP;
+
+  tooltip?.overrideHorizontalPlacement(fits ? Position.Right : Position.Left);
+}
+
+const events = computed(() => props.dense
+  ? {}
+  : {
+      [barSelector.value]: {
+        mouseover: onEnter,
+        mouseleave: () => hovered.value = undefined,
+      },
+    });
+
+watch(hovered, (i) => {
+  if (!props.dense)
+    return;
+
+  plotEl.value?.querySelectorAll('[data-bar]')
+    .forEach((el, k) => el.toggleAttribute('data-dim', i !== undefined && k !== i));
+});
+
+const attributes = computed(() => ({
+  [barSelector.value]: {
+    'data-bar': true,
+    ...(!stacked.value && { 'data-hidden': isHidden }),
+  },
+  ...(stacked.value && { [StackedBar.selectors.barGroup]: { 'data-bar-group': true } }),
+}));
+</script>
+
+<template>
+  <ChartPlot
+    class="celeste-bar-chart"
+    v-bind="{ ariaLabel }"
+    :size="size"
+    :state="state"
+    :title="title"
+    :description="description"
+    :table="table"
+    :table-visible="tableVisible"
+    :data-hovering="(!dense && hovered !== undefined) || undefined"
+    :style="{ '--chart-bar-radius': `${radius}px` }"
+  >
+    <div
+      ref="bandEl"
+      class="celeste-bar-chart-band"
+      :style="{ left: `${band.left}px`, width: `${band.width}px`, height: `${band.height}px` }"
+    />
+
+    <VisXYContainer
+      :data="rows"
+      :duration="duration"
+      :y-domain="valueDomain"
+      :margin="MARGIN"
+      height="100%"
+    >
+      <VisStackedBar
+        v-if="stacked"
+        :x="x"
+        :y="y"
+        :color="color"
+        :rounded-corners="dense ? radius : false"
+        :bar-padding="dense ? DENSE_PADDING : CATEGORY_PADDING"
+        :events="events"
+        :attributes="attributes"
+      />
+      <VisGroupedBar
+        v-else
+        :x="x"
+        :y="y"
+        :color="color"
+        :rounded-corners="radius"
+        :group-padding="CATEGORY_PADDING"
+        :bar-padding="0.1"
+        :bar-min-height="2"
+        :events="events"
+        :attributes="attributes"
+      />
+
+      <VisAxis
+        type="x"
+        :grid-line="false"
+        :tick-line="false"
+        :domain-line="false"
+        :tick-values="categoryTicks"
+        :tick-format="(i: number) => label(rows[i])"
+        :tick-text-hide-overlapping="true"
+      />
+      <VisAxis
+        type="y"
+        :position="rtl ? Position.Right : Position.Left"
+        :tick-line="false"
+        :domain-line="false"
+        :tick-values="tickValues"
+        :tick-format="formatTick"
+      />
+
+      <!-- eslint-disable vue/attribute-hyphenation VisCrosshair declares no props, so kebab keys never reach its config -->
+      <VisCrosshair
+        v-if="dense"
+        :x="x"
+        :y="y"
+        :template="tooltipFor"
+        :getCircles="() => []"
+        :onCrosshairMove="(_: unknown, __: unknown, i?: number) => hovered = i"
+      />
+
+      <VisTooltip
+        ref="tip"
+        :triggers="triggers"
+        :follow-cursor="false"
+        :vertical-placement="dense ? Position.Top : Position.Center"
+        :horizontal-shift="TOOLTIP_GAP"
+        :class-name="dense ? 'celeste-bar-chart-tip-dense' : undefined"
+      />
+    </VisXYContainer>
+
+    <template #footer>
+      <ChartLegend
+        v-if="legendVariant !== 'none'"
+        v-model="hidden"
+        :items="legendItems"
+        :variant="legendVariant"
+      />
+    </template>
+  </ChartPlot>
+</template>
+
+<style lang="scss">
+.celeste-bar-chart {
+  .celeste-bar-chart-band {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+    background: var(--chart-track);
+  }
+
+  &[data-hovering] .celeste-bar-chart-band {
+    opacity: 1;
+  }
+
+  .celeste-bar-chart-tip-dense .celeste-chart-tooltip {
+    width: 168px;
+    min-width: 0;
+  }
+
+  [data-bar][data-dim] {
+    transition: opacity var(--animation-fast) ease-out;
+    opacity: 0.4;
+  }
+
+  [data-bar-group] {
+    clip-path: inset(0 round var(--chart-bar-radius) var(--chart-bar-radius) 0 0);
+  }
+
+  &[data-hovering] [data-bar] {
+    transition: opacity var(--animation-fast) ease-out;
+    opacity: 0.4;
+  }
+
+  &[data-hovering] g:hover > [data-bar] {
+    opacity: 1;
+  }
+
+  [data-bar][data-hidden='true'] {
+    transition: opacity var(--animation-fast) ease-out;
+    opacity: 0;
+  }
+}
+</style>

package/src/components/chart/chart-card.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import Badge from '../badge/badge.vue';
+
+export interface ChartCardProps {
+  title: string;
+  value?: string;
+  caption?: string;
+  delta?: { value: string; direction: 'up' | 'down' };
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<ChartCardProps>();
+</script>
+
+<template>
+  <section :class="clsx('celeste-chart-card', props.class)">
+    <header class="celeste-chart-card-header">
+      <div class="celeste-chart-card-heading">
+        <span class="celeste-chart-card-title">{{ title }}</span>
+        <div v-if="value" class="celeste-chart-card-kpi">
+          <span class="celeste-chart-card-value">{{ value }}</span>
+          <Badge
+            v-if="delta"
+            type="leading-icon"
+            variant="lighter"
+            size="sm"
+            :state="delta.direction === 'up' ? 'success' : 'error'"
+            :icon="`i-celeste-arrow-${delta.direction}-line`"
+            :label="delta.value"
+          />
+        </div>
+        <span v-if="caption" class="celeste-chart-card-caption">{{ caption }}</span>
+      </div>
+
+      <div v-if="$slots.toolbar" class="celeste-chart-card-toolbar">
+        <slot name="toolbar" />
+      </div>
+    </header>
+
+    <slot />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.celeste-chart-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+  padding: var(--spacing-20);
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-16);
+  background: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  gap: var(--spacing-16);
+
+  .celeste-chart-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-20);
+  }
+
+  .celeste-chart-card-heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-6);
+  }
+
+  .celeste-chart-card-title {
+    color: var(--color-text-strong-950);
+    font: var(--label-sm);
+  }
+
+  .celeste-chart-card-kpi {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-10);
+  }
+
+  .celeste-chart-card-value {
+    color: var(--color-text-strong-950);
+    font: var(--title-h4-title);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .celeste-chart-card-caption {
+    color: var(--color-text-soft-400);
+    font: var(--paragraph-xs);
+  }
+
+  .celeste-chart-card-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+  }
+}
+</style>

package/src/components/chart/chart-legend.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+export interface ChartLegendItem {
+  key: string;
+  name: string;
+  color: string;
+  value?: string;
+  delta?: { value: string; direction: 'up' | 'down' };
+}
+
+export interface ChartLegendProps {
+  items: ChartLegendItem[];
+  variant?: 'inline' | 'chip' | 'table';
+  toggle?: boolean;
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<ChartLegendProps>(), {
+  variant: 'inline',
+  toggle: true,
+});
+
+const hidden = defineModel<string[]>({ default: () => [] });
+
+function isHidden(key: string) {
+  return hidden.value.includes(key);
+}
+
+function onToggle(key: string) {
+  hidden.value = isHidden(key)
+    ? hidden.value.filter(k => k !== key)
+    : [...hidden.value, key];
+}
+</script>
+
+<template>
+  <div :class="clsx('celeste-chart-legend', props.class)" :data-variant="variant">
+    <component
+      :is="toggle ? 'button' : 'span'"
+      v-for="item in items"
+      :key="item.key"
+      class="celeste-chart-legend-item"
+      :type="toggle ? 'button' : undefined"
+      :data-hidden="isHidden(item.key) || undefined"
+      :aria-pressed="toggle ? !isHidden(item.key) : undefined"
+      @click="toggle && onToggle(item.key)"
+    >
+      <span
+        class="celeste-chart-legend-swatch"
+        :style="isHidden(item.key) ? undefined : { background: item.color }"
+      />
+      <span class="celeste-chart-legend-name">{{ item.name }}</span>
+      <span v-if="item.value" class="celeste-chart-legend-value">{{ item.value }}</span>
+      <span
+        v-if="item.delta"
+        class="celeste-chart-legend-delta"
+        :data-direction="item.delta.direction"
+      >{{ item.delta.value }}</span>
+    </component>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.celeste-chart-legend {
+  display: flex;
+  padding-top: var(--spacing-14);
+  border-top: 1px solid var(--color-stroke-soft-200);
+  gap: var(--spacing-16);
+
+  .celeste-chart-legend-item {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    transition: color var(--animation-fast) ease-out;
+    border: none;
+    background: none;
+    color: var(--color-text-sub-600);
+    font: var(--label-xs);
+    text-align: start;
+    gap: 7px;
+
+    &[data-hidden] {
+      color: var(--color-text-disabled-300);
+    }
+  }
+
+  button.celeste-chart-legend-item {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-text-strong-950);
+    }
+
+    &:focus-visible {
+      border-radius: var(--radius-4);
+      outline: 2px solid var(--color-primary-alpha-24);
+      outline-offset: 2px;
+    }
+  }
+
+  .celeste-chart-legend-swatch {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    transition: background var(--animation-fast) ease-out;
+    border-radius: 3px;
+    background: var(--color-neutral-300);
+  }
+
+  .celeste-chart-legend-value,
+  .celeste-chart-legend-delta {
+    font: var(--label-xs);
+    font-family: var(--font-families-display);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .celeste-chart-legend-value {
+    color: var(--color-text-strong-950);
+  }
+
+  .celeste-chart-legend-delta {
+    width: 56px;
+    text-align: end;
+
+    &[data-direction='up'] {
+      color: var(--color-state-success-base);
+    }
+
+    &[data-direction='down'] {
+      color: var(--color-state-error-base);
+    }
+  }
+
+  &[data-variant='chip'] {
+    flex-wrap: wrap;
+    gap: var(--spacing-8);
+
+    .celeste-chart-legend-item {
+      padding: 5px 11px;
+      border: 1px solid var(--color-stroke-soft-200);
+      border-radius: var(--radius-full);
+      color: var(--color-text-strong-950);
+
+      &[data-hidden] {
+        background: var(--color-bg-weak-50);
+        color: var(--color-text-disabled-300);
+      }
+    }
+  }
+
+  &[data-variant='table'] {
+    flex-direction: column;
+    gap: var(--spacing-8);
+
+    .celeste-chart-legend-name {
+      flex: 1;
+      color: var(--color-text-sub-600);
+      font: var(--paragraph-xs);
+    }
+  }
+}
+</style>