Awesome What-If KPI

An interactive React component for what-if scenario analysis with sliders, KPIs, and projection charts. Perfect for financial modeling, business planning, and data-driven decision making.

Features

• Interactive Sliders: Adjust variables with real-time KPI calculations
• Multiple Scenarios: Predefined optimistic/pessimistic/base cases
• Dynamic Charts: 12-month projection charts with Recharts
• Responsive Design: Works on desktop and mobile
• Dark/Light Themes: Automatic theme detection
• Formula Evaluation: Safe JavaScript formula execution
• Currency Support: Multi-currency and locale formatting

Installation

npm install awesome-what-if-kpi

Usage

import AwesomeWhatIfKPI from 'awesome-what-if-kpi';

function App() {
  const data = {
    title: "Revenue Planning Model",
    description: "Q4 2025 — Financial Scenario Analysis",
    currency: "USD",
    locale: "en-US",
    theme: "dark",
    scenarios: [
      { id: "base", label: "Base Case", color: "#6366f1" },
      { id: "optimistic", label: "Optimistic", color: "#10b981" },
      { id: "pessimistic", label: "Pessimistic", color: "#f43f5e" }
    ],
    sliders: [
      {
        id: "price",
        label: "Unit Price",
        unit: "$",
        unitPosition: "prefix",
        min: 50,
        max: 300,
        step: 5,
        values: { base: 150, optimistic: 200, pessimistic: 90 },
        format: "currency"
      },
      {
        id: "volume",
        label: "Sales Volume",
        unit: "units",
        unitPosition: "suffix",
        min: 1000,
        max: 50000,
        step: 500,
        values: { base: 10000, optimistic: 15000, pessimistic: 5000 },
        format: "number"
      }
    ],
    kpis: [
      {
        id: "revenue",
        label: "Revenue",
        formula: "price * volume",
        format: "currency"
      },
      {
        id: "margin",
        label: "Profit Margin",
        formula: "(price - 100) / price * 100",
        format: "percent"
      }
    ],
    chart: {
      type: "projection",
      months: 12,
      label: "12-Month Revenue Projection"
    }
  };

  return <AwesomeWhatIfKPI data={data} />;
}

Examples

1. Supply Chain Optimization

import supplyChainData from 'awesome-what-if-kpi/supply-chain-data';

<AwesomeWhatIfKPI data={supplyChainData} />

2. HR Planning Model

import hrData from 'awesome-what-if-kpi/hr-planning-data';

<AwesomeWhatIfKPI data={hrData} />

3. Financial Scenario Analysis

import financialData from 'awesome-what-if-kpi/sample-data';

<AwesomeWhatIfKPI data={financialData} />

4. Using Named Exports (Bundled JSON)

import AwesomeWhatIfKPI, { supplyChainData } from 'awesome-what-if-kpi';

<AwesomeWhatIfKPI data={supplyChainData} />

Data Format

The component accepts data in two formats:

Full Config Object

{
  "title": "Model Title",
  "description": "Model description",
  "currency": "USD",
  "locale": "en-US",
  "theme": "dark",
  "scenarios": [...],
  "sliders": [...],
  "kpis": [...],
  "chart": {...}
}

Array Format (Simplified)

[
  {
    "id": "variable1",
    "label": "Variable 1",
    "min": 0,
    "max": 100,
    "value": 50,
    "kpis": [
      {
        "id": "kpi1",
        "label": "KPI 1",
        "formula": "variable1 * 2"
      }
    ]
  }
]

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | data | Array\|Object\|string | Yes | Configuration data (inline object/array or URL to JSON) |

Dependencies

• React 16.8+

Recharts is bundled with this package, so consumers do not need to install it separately.

License

MIT