kpi-ui-components

v1.4.0

Published

9 months ago

A React component library for KPI widgets using Tailwind CSS.

0High
0Medium
0Low

grshsbie

KPI-UI-Components Package Documentation

Introduction

This is my first NPM package, kpi-ui-components, designed to simplify the visualization of key performance indicators (KPIs) in React applications. 📊 The package is built to support React 18 and React DOM 18. 💪 In this initial version, the focus is on providing accurate KPI formula definitions and basic display cards, with future plans to develop a comprehensive UI kit based on user feedback that can integrate seamlessly with any CRM and data center structure. 🚀

Installation

To install the package, run the following command:

npm i kpi-ui-components

Tailwind Configuration

After installing the package, update your tailwind.config.ts file to include:

module.exports = {
  content: [
    "./node_modules/kpi-ui-components/**/*.js",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Supported KPIs

This package is a growing collection of KPI components, and in the future, all related sections will be included within it. Currently, the package provides components for displaying the following KPIs:

Lead Conversion Rate – The percentage of leads that convert into customers.
- Formula: (Number of Converted Leads / Total Number of Leads) × 100
- Values:
  - Number of Converted Leads: Count of leads that became paying customers
  - Total Number of Leads: Total count of all leads in the pipeline
- Example: If 50 leads convert out of 500 total leads, conversion rate is (50/500) × 100 = 10%
- Applications:
  - Measuring marketing and sales funnel effectiveness
  - Evaluating lead quality and qualification processes
  - Benchmarking sales team performance
  - Identifying bottlenecks in the conversion process
  - Forecasting future customer acquisition
Customer Acquisition Cost (CAC) – The total cost of acquiring a new customer.
- Formula: Total Sales & Marketing Costs / Number of New Customers Acquired
- Values:
  - Total Sales & Marketing Costs: Sum of all sales and marketing expenses including salaries, advertising, tools/software, events, etc.
  - Number of New Customers Acquired: Total count of new customers gained during the measured period
- Example: If marketing costs $100,000 and brings in 200 new customers, CAC is $100,000/200 = $500 per customer
- Applications:
  - Evaluating marketing campaign efficiency
  - Determining appropriate customer pricing
  - Analyzing profitability per customer
  - Optimizing marketing budget allocation
  - Comparing acquisition channels effectiveness
Customer Lifetime Value (CLV) – The estimated revenue a business earns from a customer during their lifetime.
- Formula: Average Purchase Value × Average Purchase Frequency × Average Customer Lifespan
- Values:
  - Average Purchase Value: Average amount spent by customer per transaction
  - Average Purchase Frequency: Average number of purchases in a specific time period
  - Average Customer Lifespan: Average duration of customer relationship in years
- Example: If a customer spends $100 per purchase, buys 4 times per year, for 3 years, CLV is $100 × 4 × 3 = $1,200
- Applications:
  - Determining customer acquisition budget
  - Segmenting customers by value
  - Prioritizing customer retention efforts
  - Planning long-term revenue strategies
  - Identifying high-value customer profiles
Net Promoter Score (NPS) – Measures customer loyalty based on survey responses.
- Formula: % of Promoters - % of Detractors
- Values:
  - Promoters: Customers who rate 9-10 on a 0-10 scale (loyal enthusiasts)
  - Passives: Customers who rate 7-8 (satisfied but not enthusiastic)
  - Detractors: Customers who rate 0-6 (unhappy customers)
- Example: If 60% are Promoters, 20% Passives, and 20% Detractors, NPS is 60% - 20% = 40
- Applications:
  - Predicting business growth and customer referrals
  - Benchmarking against industry standards
  - Identifying areas needing customer experience improvement
  - Segmenting customers for targeted retention strategies
  - Measuring the impact of customer service initiatives
Customer Satisfaction Score (CSAT) – Measures customer satisfaction based on survey responses.
- Formula: (Number of Satisfied Customers / Total Number of Survey Responses) × 100
- Values:
  - Number of Satisfied Customers: Customers who rate satisfaction 4 or 5 on a 5-point scale
  - Total Survey Responses: All survey responses received in the period
- Example: If 75 customers rate 4-5 out of 100 total responses, CSAT is (75/100) × 100 = 75%
- Applications:
  - Tracking overall customer experience
  - Identifying areas for service improvement
  - Measuring impact of customer initiatives
  - Benchmarking against competitors
  - Predicting customer retention
Churn Rate – The percentage of customers who stop using a product over time.
- Formula: (Number of Lost Customers / Total Customers at Start) × 100
- Values:
  - Number of Lost Customers: Customers who cancelled in the period
  - Total Customers at Start: Customer count at period start
- Example: If 10 customers leave out of 200 total customers, churn rate is (10/200) × 100 = 5%
- Applications:
  - Predicting revenue impact
  - Identifying at-risk segments
  - Optimizing retention strategies
  - Measuring customer satisfaction
  - Evaluating product-market fit
Retention Rate – The percentage of customers retained over a period.
- Formula: (Number of Customers at End - New Customers) / Customers at Start × 100
- Values:
  - Customers at End: Total customers at period end
  - New Customers: New customers acquired in period
  - Customers at Start: Total customers at period start
- Example: If 180 customers remain from 200 start, retention is (180/200) × 100 = 90%
- Applications:
  - Measuring customer loyalty
  - Forecasting future revenue
  - Evaluating customer success efforts
  - Analyzing product stickiness
  - Planning growth strategies
Average Revenue Per Account (ARPA) – Revenue generated per customer account.
- Formula: Total Revenue / Total Number of Accounts
- Values:
  - Total Revenue: Revenue generated in period
  - Total Number of Accounts: Active customers in period
- Example: $100,000 revenue from 50 accounts equals ARPA of $2,000
- Applications:
  - Pricing strategy development
  - Customer segmentation
  - Revenue forecasting
  - Growth planning
  - Product packaging decisions
Monthly Recurring Revenue (MRR) – The predictable revenue a company earns monthly.
- Formula: Sum of All Monthly Subscription Values
- Values:
  - Monthly Subscription Values: Recurring monthly charges per customer
  - Active Subscriptions: Count of paying customers
- Example: 100 customers at $50/month equals $5,000 MRR
- Applications:
  - Cash flow forecasting
  - Business valuation
  - Growth rate tracking
  - Financial planning
  - Investor reporting
Annual Recurring Revenue (ARR) – The predictable revenue a company earns yearly.
- Formula: MRR × 12
- Values:
  - Monthly Recurring Revenue: Total monthly subscription revenue
  - Annual Multiplier: 12 months
- Example: $5,000 MRR × 12 = $60,000 ARR
- Applications:
  - Long-term planning
  - Company valuation
  - Market positioning
  - Investment decisions
  - Growth benchmarking
Sales Growth – Measures the increase in sales over a period.
- Formula: ((Current Period Sales - Previous Period Sales) / Previous Period Sales) × 100
- Values:
  - Current Period Sales: Sales revenue in current period
  - Previous Period Sales: Sales revenue in previous period
- Example: Current sales $120K, previous $100K = ((120K-100K)/100K) × 100 = 20% growth
- Applications:
  - Performance tracking
  - Market share analysis
  - Strategy evaluation
  - Resource planning
  - Competitive analysis
Pipeline Value – The total value of active sales opportunities.
- Formula: Sum of All Opportunity Values × Probability of Closing
- Values:
  - Opportunity Values: Potential revenue of each deal
  - Probability: Likelihood of closing each deal
- Example: $200K in opportunities at 50% probability = $100K pipeline value
- Applications:
  - Revenue forecasting
  - Resource allocation
  - Sales planning
  - Goal setting
  - Performance tracking
Average Deal Size – The average revenue per closed deal.
- Formula: Total Revenue from Closed Deals / Number of Closed Deals
- Values:
  - Total Revenue: Sum of all closed deal values
  - Number of Deals: Count of closed deals
- Example: $100K revenue from 10 deals = $10K average deal size
- Applications:
  - Sales strategy planning
  - Territory planning
  - Commission structuring
  - Resource allocation
  - Market targeting
Win-Loss Ratio – The percentage of deals won versus lost.
- Formula: (Number of Won Deals / Total Number of Closed Deals) × 100
- Values:
  - Won Deals: Number of successfully closed deals
  - Total Closed Deals: All deals with final decision
- Example: 60 won deals out of 100 total = 60% win-loss ratio
- Applications:
  - Sales effectiveness
  - Process improvement
  - Training needs
  - Competitive analysis
  - Strategy refinement
Quota Attainment – The percentage of sales quota achieved.
- Formula: (Actual Sales / Sales Quota) × 100
- Values:
  - Actual Sales: Revenue generated
  - Sales Quota: Target revenue goal
- Example: $80K sales against $100K quota = 80% attainment
- Applications:
  - Performance evaluation
  - Compensation planning
  - Goal setting
  - Resource planning
  - Team motivation
Sales Cycle Length – Average time to close a deal.
- Formula: Sum of All Deal Durations / Number of Deals
- Values:
  - Deal Durations: Days from opportunity creation to close
  - Number of Deals: Total closed deals
- Example: 300 total days for 10 deals = 30 day average cycle
- Applications:
  - Process optimization
  - Resource planning
  - Forecasting accuracy
  - Training focus
  - Strategy development
Time to First Response – Response time to customer inquiries.
- Formula: Average Time Between Inquiry Receipt and First Response
- Values:
  - Receipt Time: When inquiry is received
  - Response Time: When first response is sent
- Example: 30 minute average response time across all inquiries
- Applications:
  - Service quality
  - Resource planning
  - SLA compliance
  - Team performance
  - Customer satisfaction
First Contact Resolution (FCR) – Issues resolved in first interaction.
- Formula: (Issues Resolved in First Contact / Total Issues) × 100
- Values:
  - First Contact Resolutions: Issues solved immediately
  - Total Issues: All customer issues received
- Example: 80 issues resolved first time out of 100 = 80% FCR
- Applications:
  - Service efficiency
  - Cost reduction
  - Customer satisfaction
  - Training needs
  - Process improvement
Case Resolution Time – Average time to resolve customer cases.
- Formula: Total Resolution Time / Number of Cases
- Values:
  - Resolution Time: Time from case open to close
  - Number of Cases: Total resolved cases
- Example: 1000 hours for 100 cases = 10 hour average resolution
- Applications:
  - Service efficiency
  - Resource planning
  - Customer satisfaction
  - Process improvement
  - Team performance
Customer Effort Score (CES) – Effort required to resolve issues.
- Formula: Sum of Effort Scores / Number of Responses
- Values:
  - Effort Scores: Customer ratings of effort required
  - Number of Responses: Total survey responses
- Example: Average score of 2 on 1-5 scale (1 being easiest)
- Applications:
  - Experience optimization
  - Process improvement
  - Service design
  - Training focus
  - Customer satisfaction
Upsell/Cross-Sell Rate – Additional purchases from existing customers.
- Formula: (Number of Additional Sales / Total Customer Base) × 100
- Values:
  - Additional Sales: Upsell/cross-sell transactions
  - Total Customer Base: Active customers
- Example: 30 additional sales to 100 customers = 30% rate
- Applications:
  - Revenue growth
  - Customer value
  - Product strategy
  - Sales targeting
  - Marketing focus
Campaign ROI – Return on marketing investment.
- Formula: ((Campaign Revenue - Campaign Cost) / Campaign Cost) × 100
- Values:
  - Campaign Revenue: Revenue attributed to campaign
  - Campaign Cost: Total campaign expenses
- Example: $15K revenue - $10K cost = 50% ROI
- Applications:
  - Budget allocation
  - Strategy effectiveness
  - Channel optimization
  - Planning future campaigns
  - Resource allocation
Forecast Accuracy – Accuracy of predictions versus actual results.
- Formula: (1 - |Actual - Forecast| / Actual) × 100
- Values:
  - Actual Results: Real outcomes
  - Forecast: Predicted outcomes
- Example: Forecast $100K, Actual $90K = 90% accuracy
- Applications:
  - Planning improvement
  - Resource allocation
  - Risk management
  - Goal setting
  - Process refinement
Customer Engagement Score – Measure of customer interaction.
- Formula: Weighted Sum of Engagement Activities / Total Possible Score
- Values:
  - Engagement Activities: Product usage, interaction frequency
  - Activity Weights: Importance of each activity
- Example: Score of 80 out of 100 possible points
- Applications:
  - Product adoption
  - Churn prediction
  - Feature planning
  - Customer success
  - Marketing targeting
Customer Health Score – Indicator of customer relationship strength.
- Formula: Weighted Average of Health Metrics
- Values:
  - Health Metrics: Usage, support, satisfaction
  - Metric Weights: Importance of each metric
- Example: Score of 85 out of 100 indicates healthy relationship
- Applications:
  - Churn prevention
  - Account management
  - Resource allocation
  - Success planning
  - Risk management
Customer Onboarding Completion – Measures the success rate of customer onboarding.
- Formula: (Number of Completed Onboarding Steps / Total Onboarding Steps) × 100
- Values:
  - Completed Steps: Number of onboarding milestones achieved
  - Total Steps: All required onboarding activities
- Example: If customers complete 8 out of 10 onboarding steps, completion rate is (8/10) × 100 = 80%
- Applications:
  - Identifying onboarding bottlenecks
  - Improving user adoption
  - Optimizing training materials
  - Reducing time-to-value
  - Predicting customer success
Employee Satisfaction Score (ESAT) – Measures employee happiness and engagement.
- Formula: (Number of Satisfied Employees / Total Number of Responses) × 100
- Values:
  - Satisfied Employees: Employees rating satisfaction 4-5 on 5-point scale
  - Total Responses: All survey responses received
- Example: If 80 employees rate 4-5 out of 100 responses, ESAT is (80/100) × 100 = 80%
- Applications:
  - Tracking workplace morale
  - Predicting turnover risk
  - Identifying improvement areas
  - Measuring management effectiveness
  - Planning retention strategies
Demo-to-Deal Conversion – The percentage of product demos that convert into closed deals.
- Formula: (Number of Closed Deals / Total Number of Demos) × 100
- Values:
  - Closed Deals: Number of demos that resulted in sales
  - Total Demos: All product demonstrations conducted
- Example: If 30 demos out of 100 convert to deals, conversion rate is (30/100) × 100 = 30%
- Applications:
  - Evaluating demo effectiveness
  - Optimizing sales process
  - Training sales team
  - Resource allocation
  - Revenue forecasting
Website Conversion Rate - The percentage of website visitors who take a desired action.
- Formula: (Number of Conversions / Total Number of Visitors) × 100
- Values:
  - Number of Conversions: Visitors who completed desired actions (purchases, signups, etc.)
  - Total Number of Visitors: All website visitors in the measured period
- Example: If 500 visitors convert out of 10,000 total visitors, conversion rate is (500/10,000) × 100 = 5%
- Applications:
  - Measuring website effectiveness
  - Optimizing user experience
  - Evaluating content strategy
  - A/B testing validation
  - Marketing campaign assessment
Referral Rate - The percentage of new customers acquired through referrals from existing customers.
- Formula: (Number of Referral Customers / Total New Customers) × 100
- Values:
  - Number of Referral Customers: New customers acquired through referrals
  - Total New Customers: All new customers in the measured period
- Example: If 20 new customers came from referrals out of 100 total new customers, referral rate is (20/100) × 100 = 20%
- Applications:
  - Evaluating customer advocacy
  - Measuring word-of-mouth marketing
  - Optimizing referral programs
  - Customer satisfaction assessment
  - Cost-effective acquisition strategy
Net Retention Rate (NRR) - The revenue growth from existing customers, factoring in churn and expansion.
- Formula: ((End Revenue - New Revenue) / Starting Revenue) × 100
- Values:
  - End Revenue: Total revenue at period end
  - New Revenue: Revenue from new customers in period
  - Starting Revenue: Total revenue at period start
- Example: If starting revenue was $100K, ended at $120K with $10K from new customers, NRR is ((120K-10K)/100K) × 100 = 110%
- Applications:
  - Measuring customer success
  - Evaluating product stickiness
  - Forecasting growth
  - Assessing customer expansion
  - Monitoring customer health
Average Handling Time (AHT) - The average duration of customer support interactions.
- Formula: Total Time Spent Handling Cases / Total Number of Cases
- Values:
  - Total Time: Sum of all case handling durations
  - Total Cases: Number of cases handled
- Example: If 1000 minutes spent on 100 cases, AHT is 1000/100 = 10 minutes per case
- Applications:
  - Measuring support efficiency
  - Resource planning
  - Training effectiveness
  - Process optimization
  - Service level management

Coming Soon 🔜

We will soon be publishing detailed explanations on how to obtain and calculate each variable for all KPIs on our website! 📊 This will include step-by-step guides, data collection methods, and best practices to help everyone implement and use these KPIs effectively in their organizations. 📈 Stay tuned for these valuable resources that will help you master KPI tracking and analysis! ⭐️

Conclusion

This package is built to streamline KPI visualization in React applications. As my first NPM package, I highly appreciate any feedback, suggestions, or ideas for improvement. Feel free to share your thoughts at [email protected]. Your insights will help shape the future of this package! 🚀

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme