Our sprint reviews kept hitting the same wall - endless slides of numbers that didn't quite show the full picture. While the data was solid, we needed a better way to spot patterns in feature adoption and user engagement. The MetricVisualizer component came together as a simple solution to transform these metrics into something teams could actually discuss and act on.

Play around with the visualizer below to see how it adapts to different metrics.

The component turned out more useful than expected. The dark mode support and accessibility features came from real team feedback - you'd be surprised how many people use dark mode in morning standups. We kept the interface simple, focusing on what teams actually need to see during reviews. Adding the trend change value was a last-minute call that ended up being one of its most liked features, especially when tracking feature adoption over weekly sprints.

Usage

Basic Usage

import { MetricVisualizer } from '@/components'
 
<MetricVisualizer 
  MetricType="Feature Adoption"
  Enabled={26}
  Total={54}
/>

Props

interface MetricVisualizerProps {
  Metric?: string;       // The type of metric to display
  Enabled?: number;      // Number of active users
  Total?: number;        // Total number of users
  className?: string;    // Optional styling classes
}

Use Cases

• User adoption rates
• Feature engagement levels
• Growth trends
• Success metrics