Add Metric

Skill: Add New Metric

Add a new calculated metric to the VSM dashboard.

Usage

/add-metric <MetricName>

Prerequisites

Create a feature file first using /new-feature that describes:

• What the metric measures
• How it's calculated (from user perspective)
• What values indicate good/warning/critical status

Process

1. Feature file - Define metric behavior in Gherkin
2. Review - Get approval on the metric definition
3. Step definitions - Write failing acceptance tests
4. Implementation - Build the metric

Example Feature File

Feature: Flow Efficiency Metric
  As a team lead
  I want to see flow efficiency percentage
  So that I understand how much time is spent on actual work vs waiting

  Scenario: Display flow efficiency for a value stream
    Given a value stream with the following steps:
      | name        | processTime | leadTime |
      | Development | 60          | 240      |
      | Testing     | 30          | 120      |
      | Deployment  | 10          | 40       |
    When I view the metrics dashboard
    Then I should see flow efficiency of "25%"

  Scenario: Flag low flow efficiency as warning
    Given a value stream with flow efficiency below 15%
    When I view the metrics dashboard
    Then the flow efficiency card should show warning status

  Scenario: Handle empty value stream
    Given an empty value stream map
    When I view the metrics dashboard
    Then flow efficiency should show "N/A"

Implementation Steps

1. Implement calculation logic in src/utils/calculations/{metric}.js
2. Add to the metrics store selector in src/stores/metricsStore.js
3. Create dashboard card in src/components/metrics/{MetricName}Card.jsx
4. Add educational tooltip explaining the metric
5. Write unit tests for the calculation

Calculation Pattern

// src/utils/calculations/{metric}.js

/**
 * Calculate {MetricName} for a value stream map
 * @param {Object} vsm - The value stream map
 * @returns {Object} - The metric result
 */
export function calculate{MetricName}(vsm) {
  if (!vsm.steps || vsm.steps.length === 0) {
    return {
      value: null,
      unit: '%',
      status: 'neutral',
      displayValue: 'N/A'
    };
  }

  // Perform calculation
  const value = /* calculation */;

  // Determine status based on thresholds
  let status;
  if (value > 0.25) {
    status = 'good';
  } else if (value > 0.15) {
    status = 'warning';
  } else {
    status = 'critical';
  }

  return {
    value,
    unit: '%',
    status,
    displayValue: `${(value * 100).toFixed(0)}%`
  };
}

Dashboard Card Pattern

// src/components/metrics/{MetricName}Card.jsx

import PropTypes from 'prop-types';
import { useMetricsStore } from '../../stores/metricsStore';
import MetricTooltip from '../ui/MetricTooltip';

function {MetricName}Card() {
  const metric = useMetricsStore((state) => state.{metricName});

  const statusClasses = {
    good: 'bg-green-50 border-green-200 text-green-800',
    warning: 'bg-amber-50 border-amber-200 text-amber-800',
    critical: 'bg-red-50 border-red-200 text-red-800',
    neutral: 'bg-gray-50 border-gray-200 text-gray-800'
  };

  return (
    <div
      className={`metric-card border rounded-lg p-4 ${statusClasses[metric.status]}`}
      data-testid="{metric-name}-card"
      data-status={metric.status}
    >
      <MetricTooltip term="{MetricName}">
        <h3 className="metric-card__title text-sm font-medium">
          {MetricName}
        </h3>
      </MetricTooltip>
      <div className="metric-card__value text-2xl font-bold">
        {metric.displayValue}
      </div>
    </div>
  );
}

export default {MetricName}Card;

Common VSM Metrics

• Flow Efficiency: Process Time / Lead Time
• Throughput: Items completed per time period
• Cycle Time: End-to-end time for one item
• WIP: Current work in progress count
• Queue Time: Time spent waiting
• Rework Rate: Percentage of items requiring rework
• First Pass Yield: Items passing without rework