Analytics Patterns

High-density, institutional-grade data visualization for gated community management. Built for deep telemetry and rapid scanning.

Install
pnpm add @gateflow/components

Data Density

We pack high-signal information into compact, scannable layouts using StatGrid and specialized chart configurations.

Institutional Palette

We use a semantic 5-color palette for data. Color 1 is always the active Accent Profile (Kimchi/Cobalt/Emerald).

Profile Sync

Charts and stats use CSS variables exclusively. When a profile or theme changes, the entire suite updates instantly.

Intelligence Lab

This lab represents the standard "Intelligence Hub" found in Admin and Client dashboards. Test the responsiveness and accent profile synchronization below.

Institutional Assembly

Analytics dashboards in GateFlow are not built from scratch. They are composed using standard primitives from `@gateflow/components` to ensure absolute parity in data density and token synchronization.

1. StatGrid Configuration

StatGrid automatically handles responsive column spans and semantic status variants (primary, success, danger, etc.).

import { StatGrid } from '@gateflow/components';
import { Users, Zap } from 'lucide-react';

export function MyDashboard() {
  return (
    <StatGrid 
      columns={4}
      stats={[
        { 
          label: 'Active Residents', 
          value: '2,842', 
          trend: { value: '+12%', direction: 'up' },
          icon: Users,
          variant: 'primary' 
        },
        { 
          label: 'Live Latency', 
          value: '142ms', 
          trend: { value: '-8ms', direction: 'up' },
          icon: Zap,
          variant: 'info' 
        }
      ]} 
    />
  );
}

2. Data Visualization Sync

GateFlow uses Recharts mapped to CSS variables. Never hardcode hex values in charts.

// Example: Binding a BarChart to the Accent Profile
<Bar 
  dataKey="value" 
  radius={[6, 6, 0, 0]} 
  barSize={40}
>
  {data.map((entry, index) => (
    <Cell 
      key={`cell-${index}`} 
      fill={index === 0 ? "var(--ds-primary-accent)" : "var(--ds-border-bold)"} 
    />
  ))}
</Bar>

Rigor over Rust

By mapping Recharts components to institutional tokens like --ds-primary-accent, we ensure that every dashboard in the GateFlow monorepo remains synchronized with its organization's brand profile even as the platform scales.