💰 Profit Calculator

A modern, SaaS-style profit calculator WordPress plugin — with live projections, animated counters, and a beautiful Chart.js dashboard. Drop it anywhere with a single shortcode.

---

✨ Features at a Glance

Feature	Details
📊 Live Chart	Interactive Chart.js line chart — Total Sales vs Gross Profit
🔢 Animated Counters	Smooth ease-out cubic animation on every value update
💱 Multi-Currency	9 currencies: USD, EUR, GBP, INR, JPY, AUD, CAD, AED, SAR
📅 Duration Selector	Switch between 6, 12, or 24-month projections instantly
📈 Compound Growth	Monthly growth rate applied with exponential compounding
🔒 Input Validation	Real-time error highlighting with boundary checks
📱 Fully Responsive	Mobile-first, adapts gracefully from 400px to 4K
🧩 Shortcode-Ready	Single line [profit_calculator] drops it anywhere
⚡ Zero jQuery	Pure vanilla JS — no bloat, no dependencies beyond Chart.js

---

🚀 Quick Start

1. Install the Plugin

Option A — Upload via WordPress Admin

1. Go to Plugins → Add New → Upload Plugin
2. Choose profit-calculator-pro.zip
3. Click Install Now, then Activate

Option B — Manual Upload via FTP

wp-content/
└── plugins/
    └── profit-calculator-pro/
        ├── profit-calculator-pro.php
        └── assets/
            ├── css/
            │   └── profit-calculator.css
            └── js/
                └── profit-calculator.js

2. Add the Shortcode

Paste this shortcode into any page, post, or widget:

[profit_calculator]

With a custom currency:

[profit_calculator currency="€"]

That's it — the calculator renders automatically. 🎉

---

🖥️ Preview

┌─────────────────────────────┬────────────────────────────────────────┐
│  🖥  Calculator Inputs       │  Profit Projections          24 Months▾│
│─────────────────────────────│────────────────────────────────────────│
│  Avg. Order Value           │  ┌──────────┐ ┌──────────┐ ┌────────┐ │
│  $ [    120.00           ]  │  │ $216.00K │ │ $54.00K  │ │$18.00K │ │
│                             │  │TOTAL     │ │GROSS     │ │DELIVERY│ │
│  Commission per Order (%)   │  │SALES     │ │PROFIT    │ │FEE     │ │
│  [  25  ] %                 │  └──────────┘ └──────────┘ └────────┘ │
│                             │                                        │
│  Avg. Daily Orders          │  ▲ $25K ╭─────────────────────────╮   │
│  [  50  ] /day              │        ╭╯  Total Sales             │   │
│                             │  ▲ $10K│       ╭───────────────────╯   │
│  Delivery Fee per Order     │       ╭╯  Gross Profit                  │
│  $ [  5.00              ]   │  ▲ $0 └─────────────────────────────   │
│                             │       M1  M4  M8  M12 M16 M20  M24    │
│  Monthly Growth Rate (%)    │                                        │
│  [   5  ] %                 │                                        │
│                             │                                        │
│  Currency    [ $ USD      ] │                                        │
└─────────────────────────────┴────────────────────────────────────────┘

---

⚙️ Calculator Inputs

Input	Default	Description
Avg. Order Value	$120.00	Average revenue generated per single order
Commission per Order	25%	Your margin or commission rate on each order (max 100%)
Avg. Daily Orders	50	Number of orders received per day on average
Delivery / Service Fee	$5.00	Fee charged per order for delivery or service
Monthly Growth Rate	5%	Compound monthly growth applied to order volume
Currency	$ USD	Symbol displayed throughout the calculator
Duration	24 Months	Projection window: 6, 12, or 24 months

---

📐 How the Math Works

The calculator uses compound growth applied monthly to your daily order volume:

Monthly Orders  = Daily Orders × 30 × (1 + growthRate)^(month - 1)

Monthly Sales   = Monthly Orders × Avg. Order Value
Monthly Profit  = Monthly Sales  × (Commission% / 100)
Monthly Delivery= Monthly Orders × Delivery Fee

Total Sales     = Σ Monthly Sales    (over N months)
Gross Profit    = Σ Monthly Profit   (over N months)
Total Delivery  = Σ Monthly Delivery (over N months)

All values update instantly as you type — no submit button needed.

---

💱 Supported Currencies

Symbol	Currency
$	USD – US Dollar
€	EUR – Euro
£	GBP – British Pound
₹	INR – Indian Rupee
¥	JPY – Japanese Yen
A$	AUD – Australian Dollar
C$	CAD – Canadian Dollar
AED	UAE Dirham
SAR	Saudi Riyal

---

📁 File Structure

profit-calculator-pro/
├── profit-calculator-pro.php       ← Plugin bootstrap, shortcode, asset loader
└── assets/
    ├── css/
    │   └── profit-calculator.css   ← All styles (scoped to .pcp-wrap)
    └── js/
        └── profit-calculator.js    ← Calculator logic + Chart.js integration

Key Constants (PHP)

PCP_VERSION      // Cache-busting version (uses time() in dev)
PCP_PLUGIN_DIR   // Absolute server path to plugin folder
PCP_PLUGIN_URL   // Public URL to plugin folder

---

🔧 Developer Notes

Shortcode Parameters

[profit_calculator currency="€"]

Attribute	Default	Type	Description
currency	$	string	Currency symbol shown in inputs and stat cards

Overriding the Currency Filter

You can override the currency symbol programmatically via the pcp_currency_symbol filter:

add_filter( 'pcp_currency_symbol', function( $symbol ) {
    return '€';
} );

Assets Are Conditionally Loaded

CSS and JS are only enqueued when the shortcode is present on the page — your site's performance is not affected on pages without the calculator.

// Triggered inside pcp_render_shortcode(), not globally
pcp_enqueue_assets();

JavaScript Architecture

The JS is a self-contained IIFE module — no global pollution, no jQuery required.

ProfitCalculator
├── init(root)          — bootstraps DOM refs, chart, events
├── bindEvents()        — attaches input/change listeners
├── onInputChange(e)    — debounced handler (80ms)
├── validateField(el)   — inline validation with error state
├── getInputs()         — reads + sanitises all values
├── calculate(inputs)   — core math, returns arrays for chart
├── update()            — orchestrates counters + chart refresh
├── animateCounter()    — requestAnimationFrame ease-out animation
├── formatCurrency()    — smart B/M/K formatting with symbol
├── formatAxisValue()   — Y-axis tick label formatter
├── initChart()         — Chart.js initialisation
├── chartOptions()      — full Chart.js options object
└── updateChart()       — pushes new data, triggers re-render

CSS Scope

All styles are scoped under .pcp-wrap to prevent conflicts with your theme:

.pcp-wrap { /* CSS custom properties declared here */ }
.pcp-wrap * { box-sizing: border-box; }

---

📱 Responsive Breakpoints

Breakpoint	Behaviour
> 1100px	Two-column layout: 360px inputs + fluid results
900–1100px	Narrower inputs column: 300px
< 900px	Single-column stacked layout, inputs panel un-sticks
< 640px	Cards stack vertically, duration select goes full-width
< 400px	Stat card values shrink to 17px for compact display

---

🧪 Validation Rules

Field	Rule
All numeric fields	Must be ≥ 0 and a valid number
Commission (%)	Must be ≤ 100
Invalid state	Red border + box-shadow highlight applied via .pcp-input--error

---

📦 Dependencies

Library	Version	How It's Loaded
Chart.js	4.4.0	CDN via wp_enqueue_script
DM Sans	—	Google Fonts @import in CSS
DM Mono	—	Google Fonts @import in CSS

No jQuery. No other dependencies.

---

🛠️ Requirements

Requirement	Minimum
WordPress	5.5+
PHP	7.4+
Browser	Any modern browser (Chrome, Firefox, Safari, Edge)

---

🔐 Security

• All shortcode attributes are passed through shortcode_atts() with defined defaults
• Output is escaped with esc_attr() and esc_html() before rendering
• Plugin aborts immediately if accessed outside WordPress (ABSPATH check)

if ( ! defined( 'ABSPATH' ) ) {
    exit; // No direct access
}

---

❓ FAQ

Q: Can I use the shortcode more than once on the same page?
A: The calculator targets a single #pcp-root element. For multiple instances, reach out for a custom build.

Q: Will this slow down my site?
A: No. Assets are only enqueued on pages that contain the shortcode, and Chart.js is loaded from a fast CDN.

Q: Can I change the default values?
A: Default values (120 order value, 25% commission, 50 daily orders, etc.) are set in the HTML rendered by the shortcode. You can modify profit-calculator-pro.php to change them.

Q: Does it work with page builders?
A: Yes — paste [profit_calculator] into any shortcode block in Elementor, Divi, Beaver Builder, or the default Gutenberg editor.

Q: Can I change the chart colors?
A: Yes. In profit-calculator.js, find the datasets array inside initChart() and update the borderColor and backgroundColor values.

---

📜 License

Licensed under the GPL-2.0+ license.
You are free to use, modify, and distribute this plugin in accordance with the terms of the GPL.

---

👤 Author

Muhammad Hussain Mehrani
🌐 ninjascode.com

Powered by Enatega — Open-source food delivery solution.

---

📝 Changelog

v1.0.0 — Initial Release

• SaaS-style two-panel layout (inputs + results)
• Live Chart.js line chart with animated transitions
• Animated stat card counters (ease-out cubic)
• 9 currency options with dynamic symbol updates
• 6 / 12 / 24-month duration selector
• Compound monthly growth rate calculation
• Real-time input validation
• Fully responsive design (mobile → 4K)
• Zero jQuery dependency
• Assets conditionally loaded via shortcode detection

---

Built with ❤️ by NinjasCode · Powered by Enatega