Dashboard Kpis

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface HTMLElementTagNameMap {
    'uip-dashboard-kpis': UipDashboardKpis
  }
}

Files installed (1)

• src/uip/blocks/dashboard-kpis/dashboard-kpis.ts5 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { TrendingDown, TrendingUp } from 'lucide'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  import { icon } from '../../lib/icon'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/card/card'
  import '../../components/charts/sparkline'
  import '../../components/kpi-grid/kpi-grid'
  
  const headcount = [108, 112, 115, 119, 121, 122, 124]
  const openRoles = [18, 16, 17, 15, 14, 13, 12]
  const timeToFill = [42, 40, 38, 39, 36, 34, 32]
  const attrition = [8.4, 8.1, 8.6, 8.2, 7.9, 8.0, 7.6]
  
  /**
   * <uip-dashboard-kpis> — the registry DashboardKpis block as a web component.
   *
   * Class strings, tile copy, and sparkline datasets are React's verbatim. Each
   * tile spells out its label, number, signed trend, and sparkline inline (per
   * the primitive-vs-block rule). No props, no events.
   */
  export class UipDashboardKpis extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'dashboard-kpis')
    }
  
    render() {
      return html`
        <uip-kpi-grid data-slot="dashboard-kpis">
          <uip-card class="flex flex-col justify-between">
            <uip-card-header class="flex flex-row items-start justify-between pb-2">
              <uip-card-title class="text-muted-foreground text-xs font-medium tracking-widest uppercase"
                >Headcount</uip-card-title
              >
              <span class="bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium">
                ${icon(TrendingUp, 'trending-up', 'size-3')} +12
              </span>
            </uip-card-header>
            <uip-card-content class="space-y-3">
              <p class="text-2xl font-semibold tracking-tight tabular-nums">124</p>
              <uip-sparkline .data=${headcount} height="36" aria-label="Headcount trend"></uip-sparkline>
            </uip-card-content>
          </uip-card>
  
          <uip-card class="flex flex-col justify-between">
            <uip-card-header class="flex flex-row items-start justify-between pb-2">
              <uip-card-title class="text-muted-foreground text-xs font-medium tracking-widest uppercase"
                >Open roles</uip-card-title
              >
              <span class="bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium">
                ${icon(TrendingDown, 'trending-down', 'size-3')} −6
              </span>
            </uip-card-header>
            <uip-card-content class="space-y-3">
              <p class="text-2xl font-semibold tracking-tight tabular-nums">12</p>
              <uip-sparkline .data=${openRoles} height="36" aria-label="Open roles trend"></uip-sparkline>
            </uip-card-content>
          </uip-card>
  
          <uip-card class="flex flex-col justify-between">
            <uip-card-header class="flex flex-row items-start justify-between pb-2">
              <uip-card-title class="text-muted-foreground text-xs font-medium tracking-widest uppercase"
                >Time to fill</uip-card-title
              >
              <span class="bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium">
                ${icon(TrendingDown, 'trending-down', 'size-3')} −10d
              </span>
            </uip-card-header>
            <uip-card-content class="space-y-3">
              <p class="text-2xl font-semibold tracking-tight tabular-nums">32d</p>
              <uip-sparkline .data=${timeToFill} height="36" aria-label="Time to fill trend"></uip-sparkline>
            </uip-card-content>
          </uip-card>
  
          <uip-card class="flex flex-col justify-between">
            <uip-card-header class="flex flex-row items-start justify-between pb-2">
              <uip-card-title class="text-muted-foreground text-xs font-medium tracking-widest uppercase"
                >Attrition</uip-card-title
              >
              <span class="bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium">
                ${icon(TrendingDown, 'trending-down', 'size-3')} −0.8pt
              </span>
            </uip-card-header>
            <uip-card-content class="space-y-3">
              <p class="text-2xl font-semibold tracking-tight tabular-nums">7.6%</p>
              <uip-sparkline .data=${attrition} height="36" aria-label="Attrition trend"></uip-sparkline>
            </uip-card-content>
          </uip-card>
        </uip-kpi-grid>
      `
    }
  }
  
  customElements.get('uip-dashboard-kpis') || customElements.define('uip-dashboard-kpis', UipDashboardKpis)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-dashboard-kpis': UipDashboardKpis
    }
  }
  

Raw manifest:https://uipkge.dev/r/lit/dashboard-kpis.json