npm - awesome-speedometer-gauge - Versions diffs - 0.1.0 - Mend

awesome-speedometer-gauge 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +368 -0
package/dist/cjs/awesome-speedometer-gauge.css +1 -0
package/dist/cjs/gauge-data.json +12 -0
package/dist/cjs/index.js +1 -0
package/dist/cjs/vite.svg +1 -0
package/dist/esm/awesome-speedometer-gauge.css +1 -0
package/dist/esm/gauge-data.json +12 -0
package/dist/esm/index.js +754 -0
package/dist/esm/vite.svg +1 -0
package/dist/style.css +32 -0
package/package.json +53 -0

package/README.md ADDED Viewed

@@ -0,0 +1,368 @@
+# awesome-speedometer-gauge
+A fully-featured **React KPI speedometer gauge** component. Five visual modes, animated needle/arc, threshold colour bands, dark/light/purple themes, optional live data fetching, tooltip, target marker, and a real-time flash effect — all in a single self-contained card widget.
+---
+## Features
+- **5 gauge modes** — `standard` (half-dial with needle), `semicircle` (wide arc), `full` (360° dial), `arc` (270° gradient arc), `multiband` (coloured bands with dot marker)
+- **Animated transitions** — smooth eased needle/arc animation on value changes via `requestAnimationFrame`
+- **Real-time mode** — fast 220ms transitions + a flash effect when the value crosses a threshold band
+- **Threshold colour bands** — supply any number of `{ value, color }` breakpoints; defaults to poor/warning/good traffic-light colours
+- **Target marker** — optional secondary marker at a target value with its own colour
+- **Three built-in themes** — `light`, `dark`, `purple`; all colours driven by CSS custom properties so you can override anything
+- **Tooltip** — hover to reveal value, target, min, and max in a clean floating chip
+- **Live data fetching** — pass an `apiEndpoint` URL and the component fetches, normalises, and merges JSON automatically
+- **`data` prop shortcut** — pass a plain object or array directly to skip the fetch
+- **CSS Module styles** — scoped styles with no global pollution; `style.css` is the only thing you need to import
+- **ESM + CJS dual build** — works in Vite, Next.js, CRA, and any modern bundler
+- **Zero runtime dependencies** beyond React
+---
+## Installation
+```bash
+npm install awesome-speedometer-gauge
+# or
+yarn add awesome-speedometer-gauge
+# or
+pnpm add awesome-speedometer-gauge
+```
+> **Peer dependencies** — React ≥ 18 and ReactDOM ≥ 18 must already be installed.
+---
+## Importing Styles
+Import the stylesheet **once** at your app root:
+```js
+import 'awesome-speedometer-gauge/style.css';
+```
+For the full typographic effect, load this Google Font in your `index.html` `<head>`:
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+```
+> Falls back to `"Segoe UI"` / `system-ui` without the font.
+---
+## Quick Start
+```jsx
+import { AwesomeSpeedometerGauge } from 'awesome-speedometer-gauge';
+import 'awesome-speedometer-gauge/style.css';
+export default function App() {
+  return (
+    <AwesomeSpeedometerGauge
+      title="Server CPU"
+      value={72}
+      min={0}
+      max={100}
+      units="%"
+    />
+  );
+}
+```
+---
+## Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `type` | `'standard' \| 'semicircle' \| 'full' \| 'arc' \| 'multiband'` | `'standard'` | Visual mode of the gauge. |
+| `value` | `number` | — | Current value. Clamped to `[min, max]`. Can also come from `data` or `apiEndpoint`. |
+| `min` | `number` | `0` | Minimum scale value. |
+| `max` | `number` | `100` | Maximum scale value. |
+| `target` | `number` | — | Optional target/goal value. Shown as a separate marker when `showTarget` is true. |
+| `thresholds` | `Threshold[]` | auto | Array of `{ value, color, label? }` breakpoints sorted ascending. Defaults to 60/80/100 traffic-light bands. |
+| `showTicks` | `boolean` | `true` | Show tick marks on the gauge arc. |
+| `showValue` | `boolean` | `true` | Show the current value label inside the gauge SVG. |
+| `showTarget` | `boolean` | `false` | Show the target marker and include target in the value label. |
+| `animated` | `boolean` | `true` | Animate value changes with a 500ms eased transition. |
+| `realtime` | `boolean` | `false` | Use a faster 220ms transition and flash the card when the threshold band changes. |
+| `size` | `number` | `220` | SVG canvas size in px (width and height). |
+| `thickness` | `number` | `18` | Arc stroke thickness in px. |
+| `startAngle` | `number` | mode default | Arc start angle in degrees. Each mode has a sensible default. |
+| `endAngle` | `number` | mode default | Arc end angle in degrees. |
+| `units` | `string` | `''` | Unit label appended to the value (e.g. `'%'`, `'rpm'`, `'°C'`). |
+| `title` | `string` | `'KPI Gauge'` | Card heading. |
+| `subtitle` | `string` | `''` | Optional secondary line below the title. |
+| `theme` | `'light' \| 'dark' \| 'purple'` | `'light'` | Built-in colour theme. |
+| `data` | `object \| array` | — | Inline data object (or array whose first element is used). Merged with and overridden by direct props. |
+| `apiEndpoint` | `string` | `'/gauge-data.json'` | URL to fetch gauge data from. Only used when `data` is not provided. |
+| `className` | `string` | — | Additional CSS class on the root card element. |
+| `style` | `object` | — | Inline styles on the root card element. |
+| `onClick` | `(value: number) => void` | — | Called with the current value when the card is clicked. |
+### `Threshold` object
+```js
+{ value: 60, color: '#ef4444' },   // 0–60  → red
+{ value: 80, color: '#f59e0b' },   // 60–80 → amber
+{ value: 100, color: '#22c55e' },  // 80–100 → green
+```
+---
+## Examples
+### Example 1 — All five modes side by side
+```jsx
+import { AwesomeSpeedometerGauge } from 'awesome-speedometer-gauge';
+import 'awesome-speedometer-gauge/style.css';
+var thresholds = [
+  { value: 40, color: '#ef4444' },
+  { value: 70, color: '#f59e0b' },
+  { value: 100, color: '#22c55e' },
+];
+var modes = ['standard', 'semicircle', 'full', 'arc', 'multiband'];
+export default function AllModesDemo() {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, padding: 32, background: '#f1f5f9' }}>
+      {modes.map(function(mode) {
+        return (
+          <AwesomeSpeedometerGauge
+            key={mode}
+            type={mode}
+            title={mode.charAt(0).toUpperCase() + mode.slice(1)}
+            subtitle="CPU Usage"
+            value={63}
+            min={0}
+            max={100}
+            units="%"
+            thresholds={thresholds}
+            size={200}
+          />
+        );
+      })}
+    </div>
+  );
+}
+```
+---
+### Example 2 — Dark theme, real-time updates, target marker
+Simulates a live-updating gauge that flashes when the value crosses a threshold band.
+```jsx
+import { useState, useEffect } from 'react';
+import { AwesomeSpeedometerGauge } from 'awesome-speedometer-gauge';
+import 'awesome-speedometer-gauge/style.css';
+var thresholds = [
+  { value: 50,  color: '#22c55e' },
+  { value: 80,  color: '#f59e0b' },
+  { value: 100, color: '#ef4444' },
+];
+export default function RealtimeDemo() {
+  var [rpm, setRpm] = useState(3200);
+  useEffect(function() {
+    var id = setInterval(function() {
+      setRpm(function(prev) {
+        var delta = (Math.random() - 0.48) * 400;
+        return Math.round(Math.max(0, Math.min(8000, prev + delta)));
+      });
+    }, 1200);
+    return function() { clearInterval(id); };
+  }, []);
+  return (
+    <div style={{ padding: 40, background: '#0b1220', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <AwesomeSpeedometerGauge
+        type="standard"
+        theme="dark"
+        title="Engine RPM"
+        subtitle="Live telemetry"
+        value={rpm}
+        min={0}
+        max={8000}
+        units="rpm"
+        target={4500}
+        showTarget={true}
+        thresholds={thresholds}
+        realtime={true}
+        size={240}
+        thickness={20}
+      />
+    </div>
+  );
+}
+```
+---
+### Example 3 — Dashboard grid with `onClick`, custom thresholds, and mixed themes
+```jsx
+import { useState } from 'react';
+import { AwesomeSpeedometerGauge } from 'awesome-speedometer-gauge';
+import 'awesome-speedometer-gauge/style.css';
+var kpis = [
+  {
+    type: 'arc',      theme: 'light',  title: 'Conversion Rate', subtitle: 'Last 30 days',
+    value: 4.7, min: 0, max: 10, units: '%', target: 5,  showTarget: true,
+    thresholds: [{ value: 3, color: '#ef4444' }, { value: 6, color: '#f59e0b' }, { value: 10, color: '#22c55e' }],
+  },
+  {
+    type: 'multiband', theme: 'dark',  title: 'Memory Usage',    subtitle: 'App server',
+    value: 71, min: 0, max: 100, units: '%',
+    thresholds: [{ value: 50, color: '#22c55e' }, { value: 80, color: '#f59e0b' }, { value: 100, color: '#ef4444' }],
+  },
+  {
+    type: 'semicircle', theme: 'purple', title: 'NPS Score',     subtitle: 'Q2 2025',
+    value: 58, min: -100, max: 100, target: 50, showTarget: true,
+    thresholds: [{ value: 0, color: '#ef4444' }, { value: 50, color: '#f59e0b' }, { value: 100, color: '#22c55e' }],
+  },
+  {
+    type: 'full',    theme: 'dark',  title: 'Disk I/O',        subtitle: 'Primary volume',
+    value: 340, min: 0, max: 500, units: 'MB/s',
+    thresholds: [{ value: 200, color: '#22c55e' }, { value: 400, color: '#f59e0b' }, { value: 500, color: '#ef4444' }],
+  },
+];
+var overlayStyle = {
+  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100,
+};
+var popupStyle = {
+  background: '#fff', borderRadius: 16, padding: '32px 40px',
+  fontFamily: 'sans-serif', minWidth: 260, textAlign: 'center',
+  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+};
+export default function DashboardDemo() {
+  var [clicked, setClicked] = useState(null);
+  return (
+    <div style={{ padding: 32, background: '#f1f5f9', minHeight: '100vh' }}>
+      <h2 style={{ fontFamily: 'sans-serif', marginBottom: 24, color: '#0f172a' }}>KPI Dashboard</h2>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 20 }}>
+        {kpis.map(function(kpi, i) {
+          return (
+            <AwesomeSpeedometerGauge
+              key={i}
+              type={kpi.type}
+              theme={kpi.theme}
+              title={kpi.title}
+              subtitle={kpi.subtitle}
+              value={kpi.value}
+              min={kpi.min}
+              max={kpi.max}
+              units={kpi.units}
+              target={kpi.target}
+              showTarget={kpi.showTarget}
+              thresholds={kpi.thresholds}
+              animated={true}
+              size={210}
+              onClick={function(val) { setClicked({ title: kpi.title, value: val, units: kpi.units || '' }); }}
+            />
+          );
+        })}
+      </div>
+      {clicked && (
+        <div style={overlayStyle} onClick={function() { setClicked(null); }}>
+          <div style={popupStyle} onClick={function(e) { e.stopPropagation(); }}>
+            <div style={{ fontSize: 13, color: '#64748b', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
+              {clicked.title}
+            </div>
+            <div style={{ fontSize: 52, fontWeight: 700, color: '#0f172a' }}>
+              {clicked.value}{clicked.units}
+            </div>
+            <button
+              onClick={function() { setClicked(null); }}
+              style={{ marginTop: 20, padding: '8px 24px', borderRadius: 8, border: 'none', background: '#0f172a', color: '#fff', cursor: 'pointer', fontSize: 13 }}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+---
+> **Note:** `AwesomeSpeedometerGauge.module.css` is bundled directly into `dist/esm/index.js` and `dist/cjs/index.js` by Vite's CSS Modules pipeline. You do **not** need to import it separately — only `style.css` needs an explicit import in your app.
+## CSS Custom Properties
+All colours in the gauge are driven by CSS variables set on the `.gaugeCard` root element. Override them per-instance with the `style` prop or globally in your own CSS:
+```css
+.my-gauge {
+  --gauge-progress:      #6366f1;   /* filled arc colour */
+  --gauge-track:         #e2e8f0;   /* background arc */
+  --gauge-needle:        #1e293b;   /* needle / dot marker */
+  --gauge-target:        #f59e0b;   /* target marker */
+  --gauge-range-poor:    #ef4444;
+  --gauge-range-warning: #f59e0b;
+  --gauge-range-good:    #22c55e;
+  --gauge-text:          #0f172a;
+  --gauge-text-muted:    #64748b;
+  --gauge-tick:          #cbd5e1;
+  --gauge-surface:       #ffffff;
+  --gauge-bg:            #f6f7f9;
+}
+```
+Pass the class via the `className` prop:
+```jsx
+<AwesomeSpeedometerGauge className="my-gauge" value={55} />
+```
+---
+## Live Data Fetching
+When `data` is not provided, the component fetches from `apiEndpoint`. The endpoint should return JSON matching the prop shape:
+```json
+{
+  "value": 73,
+  "min": 0,
+  "max": 100,
+  "target": 80,
+  "units": "%",
+  "type": "standard",
+  "thresholds": [
+    { "value": 50, "color": "#ef4444" },
+    { "value": 75, "color": "#f59e0b" },
+    { "value": 100, "color": "#22c55e" }
+  ]
+}
+```
+An array response is also accepted — the first element is used. Direct props always override fetched values.
+## 📄 License
+MIT

package/dist/cjs/awesome-speedometer-gauge.css ADDED Viewed

@@ -0,0 +1 @@

+ ._gaugeCard_6w996_1{--gauge-bg: #f6f7f9;--gauge-surface: #ffffff;--gauge-text: #0f172a;--gauge-text-muted: #64748b;--gauge-tick: #cbd5f5;--gauge-track: #e2e8f0;--gauge-progress: #22c55e;--gauge-needle: #0f172a;--gauge-target: #f59e0b;--gauge-range-poor: #ef4444;--gauge-range-warning: #f59e0b;--gauge-range-good: #22c55e;background:var(--gauge-surface);border-radius:18px;padding:18px 20px;box-shadow:0 12px 30px #0f172a14,0 0 18px color-mix(in srgb,var(--gauge-active) 35%,transparent);display:grid;gap:12px;font-family:"Source Sans 3",Segoe UI,system-ui,sans-serif;color:var(--gauge-text);position:relative;overflow:hidden}._gaugeCard_6w996_1:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:14px;background:#0f172aeb;color:#f8fafc;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:500;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:2}._gaugeCard_6w996_1[data-tooltip-open=true]:after{opacity:1;transform:translate(-50%)}._gaugeCard_6w996_1:hover{box-shadow:0 14px 34px #0f172a1a,0 0 28px color-mix(in srgb,var(--gauge-active) 50%,transparent)}._light_6w996_58{--gauge-bg: #f5f6fa;--gauge-surface: #ffffff;--gauge-text: #0f172a;--gauge-text-muted: #64748b;--gauge-tick: #cbd5f5;--gauge-track: #e2e8f0}._dark_6w996_67{--gauge-bg: #0b1220;--gauge-surface: #111827;--gauge-text: #e2e8f0;--gauge-text-muted: #94a3b8;--gauge-tick: #334155;--gauge-track: #1f2937;--gauge-needle: #e2e8f0}._purple_6w996_77{--gauge-bg: #1b1035;--gauge-surface: #221344;--gauge-text: #f8fafc;--gauge-text-muted: #cbd5f5;--gauge-tick: #4c1d95;--gauge-track: #312e81;--gauge-needle: #f8fafc}._dark_6w996_67._gaugeCard_6w996_1:after{background:#0f172af2}._purple_6w996_77._gaugeCard_6w996_1:after{background:#2c1454f2}._header_6w996_95{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}._title_6w996_102{font-size:16px;font-weight:600;letter-spacing:.2px}._subtitle_6w996_108{font-size:12px;color:var(--gauge-text-muted);margin-top:4px}._meta_6w996_114{text-align:right;font-size:20px;font-weight:700;color:var(--gauge-active);display:flex;align-items:baseline;gap:6px}._units_6w996_124{font-size:12px;font-weight:500;color:var(--gauge-text-muted)}._body_6w996_130{background:radial-gradient(circle at 50% 0%,var(--gauge-bg),transparent 65%);border-radius:16px;padding:8px 0 12px;display:grid;place-items:center}._gaugeStage_6w996_138{display:grid;place-items:center}._state_6w996_143{font-size:12px;color:var(--gauge-text-muted);padding:12px 0}._flash_6w996_149{animation:_gauge-flash_6w996_1 .3s ease-in-out}@keyframes _gauge-flash_6w996_1{0%{box-shadow:0 0 #22c55e00}50%{box-shadow:0 0 18px #22c55e59}to{box-shadow:0 0 #22c55e00}}._gaugeCard_6w996_1 svg text{font-family:"Source Sans 3",Segoe UI,system-ui,sans-serif;fill:var(--gauge-text)}._gaugeCard_6w996_1 svg ._gauge-value_6w996_170 text{fill:var(--gauge-text)}._gaugeCard_6w996_1 svg ._gauge-ticks_6w996_174 text{fill:var(--gauge-text-muted)}

package/dist/cjs/gauge-data.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "value": 72,
+  "min": 0,
+  "max": 100,
+  "target": 85,
+  "units": "%",
+  "thresholds": [
+    { "value": 60, "color": "var(--gauge-range-poor)", "label": "Poor" },
+    { "value": 80, "color": "var(--gauge-range-warning)", "label": "Average" },
+    { "value": 100, "color": "var(--gauge-range-good)", "label": "Good" }
+  ]
+}

package/dist/cjs/index.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("react"),je="_gaugeCard_6w996_1",Ae="_light_6w996_58",pe="_dark_6w996_67",be="_purple_6w996_77",_e="_header_6w996_95",we="_title_6w996_102",Me="_subtitle_6w996_108",ke="_meta_6w996_114",$e="_units_6w996_124",Ne="_body_6w996_130",Re="_gaugeStage_6w996_138",ze="_state_6w996_143",Se="_flash_6w996_149",p={gaugeCard:je,light:Ae,dark:pe,purple:be,header:_e,title:we,subtitle:Me,meta:ke,units:$e,body:Ne,gaugeStage:Re,state:ze,flash:Se,"gauge-flash":"_gauge-flash_6w996_1","gauge-value":"_gauge-value_6w996_170","gauge-ticks":"_gauge-ticks_6w996_174"},k=(e,t,a,o)=>{const r=(o-90)*(Math.PI/180);return{x:e+a*Math.cos(r),y:t+a*Math.sin(r)}},ee=(e,t,a,o,r)=>{const l=k(e,t,a,r),d=k(e,t,a,o),x=Math.abs(r-o)<=180?"0":"1";return["M",l.x,l.y,"A",a,a,0,x,0,d.x,d.y].join(" ")};function Te({cx:e,cy:t,radius:a,startAngle:o,endAngle:r,color:l,thickness:d}){const x=ee(e,t,a,o,r);return n.jsx("path",{d:x,fill:"none",stroke:l,strokeWidth:d,strokeLinecap:"round"})}const F=m.memo(Te);function Ve({cx:e,cy:t,radius:a,angle:o,color:r,width:l=3}){const d=k(e,t,a,o),x=k(e,t,10,o-90),f=k(e,t,10,o+90);return n.jsxs("g",{className:"gauge-needle","aria-hidden":"true",children:[n.jsx("path",{d:`M ${x.x} ${x.y} L ${d.x} ${d.y} L ${f.x} ${f.y} Z`,fill:r}),n.jsx("circle",{cx:e,cy:t,r:l*2,fill:r})]})}const de=m.memo(Ve);function Fe({ticks:e,color:t,labelColor:a,showLabels:o}){return n.jsx("g",{className:"gauge-ticks","aria-hidden":"true",children:e.map(r=>n.jsxs("g",{children:[n.jsx("line",{x1:r.outer.x,y1:r.outer.y,x2:r.inner.x,y2:r.inner.y,stroke:t,strokeWidth:"2"}),o&&n.jsx("text",{x:r.label.x,y:r.label.y,textAnchor:"middle",dominantBaseline:"middle",fill:a,fontSize:"10",children:Math.round(r.value)})]},r.value))})}const he=m.memo(Fe);function Ce({cx:e,cy:t,value:a,target:o,units:r,showTarget:l}){return n.jsxs("g",{className:"gauge-value","aria-hidden":"true",children:[n.jsxs("text",{x:e,y:t,textAnchor:"middle",dominantBaseline:"middle",fontSize:"20",children:[a,r?` ${r}`:""]}),l&&typeof o=="number"&&n.jsxs("text",{x:e,y:t+22,textAnchor:"middle",dominantBaseline:"middle",fontSize:"11",children:["Target ",o]})]})}const D=m.memo(Ce);function Ge({cx:e,cy:t,radius:a,angle:o,color:r}){const l=k(e,t,a,o);return n.jsx("circle",{cx:l.x,cy:l.y,r:"3",fill:r})}const te=m.memo(Ge),se=(e,t,a)=>Math.min(Math.max(e,t),a),me=(e,t,a)=>e+(t-e)*a,xe=(e,t,a)=>a===t?0:(e-t)/(a-t),R=(e,t,a,o,r)=>{const l=se(e,t,a),d=xe(l,t,a);return me(o,r,d)},Le=(e,t,a)=>{if(!Array.isArray(t)||t.length===0)return a;const o=[...t].filter(l=>typeof(l==null?void 0:l.value)=="number").sort((l,d)=>l.value-d.value),r=o.find(l=>e<=l.value)||o[o.length-1];return(r==null?void 0:r.color)||a},fe=(e,t,a)=>!Array.isArray(e)||e.length===0?[{value:t+(a-t)*.6,color:"var(--gauge-range-poor)"},{value:t+(a-t)*.8,color:"var(--gauge-range-warning)"},{value:a,color:"var(--gauge-range-good)"}]:e.map(o=>({value:typeof o.value=="number"?o.value:a,color:o.color||"var(--gauge-range-good)",label:o.label||""}));function I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:f=5,arcPadding:y=0}){return m.useMemo(()=>{const c=Number.isFinite(t)?t:0,s=Number.isFinite(a)?a:100,g=Number.isFinite(e)?e:c,u=se(g,c,s),v=Number.isFinite(o)?o:-90,j=Number.isFinite(r)?r:90,$=Number.isFinite(l)?l:200,z=Number.isFinite(d)?d:18,b=$/2,_=$/2,N=$/2,C=N-z,G=(N+C)/2,L=R(u,c,s,v,j),O=fe(x,c,s);let P=c;const K=O.map(S=>{const w=P,M=S.value;return P=M,{...S,startValue:w,endValue:M,startAngle:R(w,c,s,v,j),endAngle:R(M,c,s,v,j)}}),W=f>1?(s-c)/(f-1):0,B=Array.from({length:f},(S,w)=>{const M=c+W*w,i=R(M,c,s,v,j),Q=k(b,_,N-y,i),U=k(b,_,N-y-10,i),X=k(b,_,C-18,i);return{value:M,angle:i,outer:Q,inner:U,label:X}}),Z=ee(b,_,G,v,j),H=xe(u,c,s),E=R(u,c,s,v,j),J=ee(b,_,G,v,E);return{cx:b,cy:_,outerRadius:N,innerRadius:C,midRadius:G,value:u,valueAngle:L,startAngle:v,endAngle:j,arcPath:Z,progressPath:J,progressAngle:E,valueProgress:H,ranges:K,ticks:B,size:$,thickness:z}},[e,t,a,o,r,l,d,x,f,y])}function Pe({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,showTicks:f,showValue:y,showTarget:c,target:s,units:g}){const u=I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:6,arcPadding:2}),v=typeof s=="number"?R(s,u.min,u.max,u.startAngle,u.endAngle):null;return n.jsxs("svg",{width:u.size,height:u.size,viewBox:`0 0 ${u.size} ${u.size}`,children:[n.jsx("g",{className:"gauge-ranges",children:u.ranges.map(j=>n.jsx(F,{cx:u.cx,cy:u.cy,radius:u.midRadius,startAngle:j.startAngle,endAngle:j.endAngle,color:j.color,thickness:u.thickness},j.endValue))}),f&&n.jsx(he,{ticks:u.ticks,color:"var(--gauge-tick)",labelColor:"var(--gauge-text-muted)",showLabels:!0}),typeof v=="number"&&c&&n.jsx(te,{cx:u.cx,cy:u.cy,radius:u.outerRadius-4,angle:v,color:"var(--gauge-target)"}),n.jsx(de,{cx:u.cx,cy:u.cy,radius:u.innerRadius-4,angle:u.valueAngle,color:"var(--gauge-needle)"}),y&&n.jsx(D,{cx:u.cx,cy:u.cy+28,value:Math.round(u.value),target:s,units:g,showTarget:c})]})}const Be=m.memo(Pe);function Ee({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,showTicks:f,showValue:y,units:c}){const s=I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:4,arcPadding:4});return n.jsxs("svg",{width:s.size,height:s.size/1.2,viewBox:`0 0 ${s.size} ${s.size}`,children:[n.jsx("g",{className:"gauge-ranges",children:s.ranges.map(g=>n.jsx(F,{cx:s.cx,cy:s.cy,radius:s.midRadius,startAngle:g.startAngle,endAngle:g.endAngle,color:g.color,thickness:s.thickness},g.endValue))}),f&&n.jsx(he,{ticks:s.ticks,color:"var(--gauge-tick)",labelColor:"var(--gauge-text-muted)",showLabels:!1}),y&&n.jsx(D,{cx:s.cx,cy:s.cy+14,value:Math.round(s.value),units:c,showTarget:!1})]})}const qe=m.memo(Ee);function De({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,showValue:f,units:y}){const c=I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:8,arcPadding:0});return n.jsxs("svg",{width:c.size,height:c.size,viewBox:`0 0 ${c.size} ${c.size}`,children:[n.jsx("g",{className:"gauge-ranges",children:c.ranges.map(s=>n.jsx(F,{cx:c.cx,cy:c.cy,radius:c.midRadius,startAngle:s.startAngle,endAngle:s.endAngle,color:s.color,thickness:c.thickness},s.endValue))}),n.jsx(de,{cx:c.cx,cy:c.cy,radius:c.innerRadius-2,angle:c.valueAngle,color:"var(--gauge-needle)"}),f&&n.jsx(D,{cx:c.cx,cy:c.cy+24,value:Math.round(c.value),units:y,showTarget:!1})]})}const Ie=m.memo(De);function Oe({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,showValue:f,units:y,gradientId:c}){const s=I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:0,arcPadding:0});return n.jsxs("svg",{width:s.size,height:s.size,viewBox:`0 0 ${s.size} ${s.size}`,children:[c&&n.jsx("defs",{children:n.jsxs("linearGradient",{id:c,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[n.jsx("stop",{offset:"0%",stopColor:"var(--gauge-range-poor)"}),n.jsx("stop",{offset:"55%",stopColor:"var(--gauge-range-warning)"}),n.jsx("stop",{offset:"100%",stopColor:"var(--gauge-range-good)"})]})}),n.jsx(F,{cx:s.cx,cy:s.cy,radius:s.midRadius,startAngle:s.startAngle,endAngle:s.endAngle,color:"var(--gauge-track)",thickness:s.thickness}),n.jsx(F,{cx:s.cx,cy:s.cy,radius:s.midRadius,startAngle:s.startAngle,endAngle:s.progressAngle,color:c?`url(#${c})`:"var(--gauge-progress)",thickness:s.thickness}),f&&n.jsx(D,{cx:s.cx,cy:s.cy+8,value:Math.round(s.value),units:y,showTarget:!1})]})}const Ke=m.memo(Oe);function We({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,showValue:f,units:y,target:c,showTarget:s}){const g=I({value:e,min:t,max:a,startAngle:o,endAngle:r,size:l,thickness:d,thresholds:x,tickCount:0,arcPadding:0}),u=typeof c=="number"?R(c,g.min,g.max,g.startAngle,g.endAngle):null;return n.jsxs("svg",{width:g.size,height:g.size,viewBox:`0 0 ${g.size} ${g.size}`,children:[n.jsx("g",{className:"gauge-ranges",children:g.ranges.map(v=>n.jsx(F,{cx:g.cx,cy:g.cy,radius:g.midRadius,startAngle:v.startAngle,endAngle:v.endAngle,color:v.color,thickness:g.thickness},v.endValue))}),n.jsx(te,{cx:g.cx,cy:g.cy,radius:g.outerRadius-4,angle:g.valueAngle,color:"var(--gauge-needle)"}),s&&typeof u=="number"&&n.jsx(te,{cx:g.cx,cy:g.cy,radius:g.outerRadius-4,angle:u,color:"var(--gauge-target)"}),f&&n.jsx(D,{cx:g.cx,cy:g.cy+8,value:Math.round(g.value),units:y,target:c,showTarget:s})]})}const Ze=m.memo(We),ie=()=>typeof performance<"u"?performance.now():Date.now();function He(e,{enabled:t,duration:a=500,easing:o}={}){const r=m.useRef(null),l=m.useRef(0),d=m.useRef(e),[x,f]=m.useState(e);return m.useEffect(()=>{if(!t)return f(e),d.current=e,()=>{};const y=d.current,c=ie();l.current=c;const s=typeof o=="function"?o:u=>1-Math.pow(1-u,3),g=()=>{const u=Math.min(1,(ie()-c)/a),v=me(y,e,s(u));f(v),u<1?r.current=requestAnimationFrame(g):d.current=e};return r.current=requestAnimationFrame(g),()=>{r.current&&cancelAnimationFrame(r.current)}},[e,t,a,o]),x}const Je=(...e)=>e.filter(Boolean).join(" "),Qe=null,ue={standard:{start:-90,end:90},semicircle:{start:-110,end:110},full:{start:0,end:360},arc:{start:-225,end:45},multiband:{start:-120,end:120}},ge=e=>e?Array.isArray(e)?e[0]||null:Array.isArray(e.data)?e.data[0]||null:typeof e=="object"?e:null:null,A=(e,t)=>e!==void 0?e:t,Ue=(e,t,a,o)=>{const r=fe(t,a,o);for(let l=0;l<r.length;l+=1)if(e<=r[l].value)return l;return r.length-1};function Xe({type:e="standard",value:t,min:a,max:o,target:r,thresholds:l,showTicks:d=!0,showValue:x=!0,showTarget:f=!1,animated:y=!0,realtime:c=!1,size:s=220,thickness:g=18,startAngle:u,endAngle:v,units:j="",data:$=Qe,apiEndpoint:z="/gauge-data.json",title:b="KPI Gauge",subtitle:_="",theme:N="light",className:C,style:G,onClick:L}){const[O,P]=m.useState(null),[K,W]=m.useState(!1),[B,Z]=m.useState(""),[H,E]=m.useState(!1),[J,S]=m.useState(!1),w=m.useRef(null),M=m.useCallback(async()=>{if(z){W(!0),Z("");try{const h=await fetch(z);if(!h.ok)throw new Error(`Request failed: ${h.status}`);const V=await h.json();P(ge(V))}catch(h){Z("Failed to load gauge data."),console.error("Failed to load gauge data",h)}finally{W(!1)}}},[z]);m.useEffect(()=>{if($){P(ge($));return}M()},[$,M]);const i=m.useMemo(()=>{const h=O||{},V=String(e||h.type||"standard").toLowerCase(),ne=ue[V]||ue.standard,ae=A(a,h.min),re=A(o,h.max),Y=Number.isFinite(ae)?ae:0,oe=Number.isFinite(re)?re:100,ce=A(t,h.value),ve=Number.isFinite(ce)?ce:Y,le=A(r,h.target),ye=Number.isFinite(le)?le:null;return{type:V,value:se(ve,Y,oe),min:Y,max:oe,target:ye,thresholds:A(l,h.thresholds),showTicks:A(d,h.showTicks??d),showValue:A(x,h.showValue??x),showTarget:A(f,h.showTarget??f),size:A(s,h.size??s),thickness:A(g,h.thickness??g),units:A(j,h.units??j),startAngle:A(u,h.startAngle??ne.start),endAngle:A(v,h.endAngle??ne.end)}},[O,e,a,o,t,r,l,d,x,f,s,g,j,u,v]),Q=He(i.value,{enabled:y||c,duration:c?220:500});m.useEffect(()=>{if(!c)return;const h=Ue(i.value,i.thresholds,i.min,i.max);if(w.current===null){w.current=h;return}if(w.current!==h){w.current=h,E(!0);const V=setTimeout(()=>E(!1),300);return()=>clearTimeout(V)}},[c,i.value,i.thresholds,i.min,i.max]);const U=Le(i.value,i.thresholds,"var(--gauge-range-good)"),X=m.useMemo(()=>{const h=[`Value: ${Math.round(i.value)}${i.units?` ${i.units}`:""}`,`Min: ${i.min}`,`Max: ${i.max}`];return typeof i.target=="number"&&h.splice(1,0,`Target: ${i.target}`),h.join(" • ")},[i.value,i.units,i.min,i.max,i.target]),q={value:Q,min:i.min,max:i.max,startAngle:i.startAngle,endAngle:i.endAngle,size:i.size,thickness:i.thickness,thresholds:i.thresholds,showTicks:i.showTicks,showValue:i.showValue,showTarget:i.showTarget,target:i.target,units:i.units},T=i.type;return n.jsxs("section",{className:Je(p.gaugeCard,p[N],H&&p.flash,C),style:{...G,"--gauge-active":U},onClick:()=>L==null?void 0:L(i.value),onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),role:"figure","aria-label":b,"data-tooltip":X,"data-tooltip-open":J?"true":"false",children:[n.jsxs("header",{className:p.header,children:[n.jsxs("div",{children:[n.jsx("div",{className:p.title,children:b}),_&&n.jsx("div",{className:p.subtitle,children:_})]}),n.jsxs("div",{className:p.meta,children:[n.jsx("span",{children:Math.round(i.value)}),i.units&&n.jsx("span",{className:p.units,children:i.units})]})]}),n.jsxs("div",{className:p.body,children:[K&&n.jsx("div",{className:p.state,children:"Loading KPI..."}),B&&n.jsx("div",{className:p.state,children:B}),!K&&!B&&n.jsxs("div",{className:p.gaugeStage,children:[T==="semicircle"&&n.jsx(qe,{...q}),T==="full"&&n.jsx(Ie,{...q}),T==="arc"&&n.jsx(Ke,{...q,gradientId:"gaugeGradient"}),T==="multiband"&&n.jsx(Ze,{...q}),(T==="standard"||!T)&&n.jsx(Be,{...q})]})]})]})}exports.AwesomeSpeedometerGauge=Xe;

package/dist/cjs/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/esm/awesome-speedometer-gauge.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/esm/gauge-data.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "value": 72,
+  "min": 0,
+  "max": 100,
+  "target": 85,
+  "units": "%",
+  "thresholds": [
+    { "value": 60, "color": "var(--gauge-range-poor)", "label": "Poor" },
+    { "value": 80, "color": "var(--gauge-range-warning)", "label": "Average" },
+    { "value": 100, "color": "var(--gauge-range-good)", "label": "Good" }
+  ]
+}

package/dist/esm/index.js ADDED Viewed

@@ -0,0 +1,754 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import b, { useMemo as ae, useRef as Q, useState as G, useEffect as se, useCallback as ke } from "react";
+const Me = "_gaugeCard_6w996_1", $e = "_light_6w996_58", Ne = "_dark_6w996_67", ze = "_purple_6w996_77", Re = "_header_6w996_95", Te = "_title_6w996_102", Ve = "_subtitle_6w996_108", Fe = "_meta_6w996_114", Ce = "_units_6w996_124", Se = "_body_6w996_130", Ge = "_gaugeStage_6w996_138", Le = "_state_6w996_143", Be = "_flash_6w996_149", _ = {
+  gaugeCard: Me,
+  light: $e,
+  dark: Ne,
+  purple: ze,
+  header: Re,
+  title: Te,
+  subtitle: Ve,
+  meta: Fe,
+  units: Ce,
+  body: Se,
+  gaugeStage: Ge,
+  state: Le,
+  flash: Be,
+  "gauge-flash": "_gauge-flash_6w996_1",
+  "gauge-value": "_gauge-value_6w996_170",
+  "gauge-ticks": "_gauge-ticks_6w996_174"
+}, N = (e, t, a, r) => {
+  const s = (r - 90) * (Math.PI / 180);
+  return {
+    x: e + a * Math.cos(s),
+    y: t + a * Math.sin(s)
+  };
+}, re = (e, t, a, r, s) => {
+  const c = N(e, t, a, s), d = N(e, t, a, r), m = Math.abs(s - r) <= 180 ? "0" : "1";
+  return [
+    "M",
+    c.x,
+    c.y,
+    "A",
+    a,
+    a,
+    0,
+    m,
+    0,
+    d.x,
+    d.y
+  ].join(" ");
+};
+function Pe({ cx: e, cy: t, radius: a, startAngle: r, endAngle: s, color: c, thickness: d }) {
+  const m = re(e, t, a, r, s);
+  return /* @__PURE__ */ i(
+    "path",
+    {
+      d: m,
+      fill: "none",
+      stroke: c,
+      strokeWidth: d,
+      strokeLinecap: "round"
+    }
+  );
+}
+const L = b.memo(Pe);
+function je({ cx: e, cy: t, radius: a, angle: r, color: s, width: c = 3 }) {
+  const d = N(e, t, a, r), m = N(e, t, 10, r - 90), f = N(e, t, 10, r + 90);
+  return /* @__PURE__ */ x("g", { className: "gauge-needle", "aria-hidden": "true", children: [
+    /* @__PURE__ */ i(
+      "path",
+      {
+        d: `M ${m.x} ${m.y} L ${d.x} ${d.y} L ${f.x} ${f.y} Z`,
+        fill: s
+      }
+    ),
+    /* @__PURE__ */ i("circle", { cx: e, cy: t, r: c * 2, fill: s })
+  ] });
+}
+const ye = b.memo(je);
+function De({ ticks: e, color: t, labelColor: a, showLabels: r }) {
+  return /* @__PURE__ */ i("g", { className: "gauge-ticks", "aria-hidden": "true", children: e.map((s) => /* @__PURE__ */ x("g", { children: [
+    /* @__PURE__ */ i(
+      "line",
+      {
+        x1: s.outer.x,
+        y1: s.outer.y,
+        x2: s.inner.x,
+        y2: s.inner.y,
+        stroke: t,
+        strokeWidth: "2"
+      }
+    ),
+    r && /* @__PURE__ */ i(
+      "text",
+      {
+        x: s.label.x,
+        y: s.label.y,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fill: a,
+        fontSize: "10",
+        children: Math.round(s.value)
+      }
+    )
+  ] }, s.value)) });
+}
+const xe = b.memo(De);
+function Ee({ cx: e, cy: t, value: a, target: r, units: s, showTarget: c }) {
+  return /* @__PURE__ */ x("g", { className: "gauge-value", "aria-hidden": "true", children: [
+    /* @__PURE__ */ x(
+      "text",
+      {
+        x: e,
+        y: t,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fontSize: "20",
+        children: [
+          a,
+          s ? ` ${s}` : ""
+        ]
+      }
+    ),
+    c && typeof r == "number" && /* @__PURE__ */ x(
+      "text",
+      {
+        x: e,
+        y: t + 22,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        fontSize: "11",
+        children: [
+          "Target ",
+          r
+        ]
+      }
+    )
+  ] });
+}
+const K = b.memo(Ee);
+function qe({ cx: e, cy: t, radius: a, angle: r, color: s }) {
+  const c = N(e, t, a, r);
+  return /* @__PURE__ */ i("circle", { cx: c.x, cy: c.y, r: "3", fill: s });
+}
+const oe = b.memo(qe), ce = (e, t, a) => Math.min(Math.max(e, t), a), Ae = (e, t, a) => e + (t - e) * a, pe = (e, t, a) => a === t ? 0 : (e - t) / (a - t), T = (e, t, a, r, s) => {
+  const c = ce(e, t, a), d = pe(c, t, a);
+  return Ae(r, s, d);
+}, Ie = (e, t, a) => {
+  if (!Array.isArray(t) || t.length === 0) return a;
+  const r = [...t].filter((c) => typeof (c == null ? void 0 : c.value) == "number").sort((c, d) => c.value - d.value), s = r.find((c) => e <= c.value) || r[r.length - 1];
+  return (s == null ? void 0 : s.color) || a;
+}, _e = (e, t, a) => !Array.isArray(e) || e.length === 0 ? [
+  { value: t + (a - t) * 0.6, color: "var(--gauge-range-poor)" },
+  { value: t + (a - t) * 0.8, color: "var(--gauge-range-warning)" },
+  { value: a, color: "var(--gauge-range-good)" }
+] : e.map((r) => ({
+  value: typeof r.value == "number" ? r.value : a,
+  color: r.color || "var(--gauge-range-good)",
+  label: r.label || ""
+}));
+function O({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  tickCount: f = 5,
+  arcPadding: y = 0
+}) {
+  return ae(() => {
+    const o = Number.isFinite(t) ? t : 0, n = Number.isFinite(a) ? a : 100, g = Number.isFinite(e) ? e : o, u = ce(g, o, n), v = Number.isFinite(r) ? r : -90, A = Number.isFinite(s) ? s : 90, z = Number.isFinite(c) ? c : 200, V = Number.isFinite(d) ? d : 18, w = z / 2, k = z / 2, R = z / 2, B = R - V, P = (R + B) / 2, j = T(u, o, n, v, A), W = _e(m, o, n);
+    let D = o;
+    const Z = W.map((F) => {
+      const M = D, $ = F.value;
+      return D = $, {
+        ...F,
+        startValue: M,
+        endValue: $,
+        startAngle: T(M, o, n, v, A),
+        endAngle: T($, o, n, v, A)
+      };
+    }), H = f > 1 ? (n - o) / (f - 1) : 0, E = Array.from({ length: f }, (F, M) => {
+      const $ = o + H * M, l = T($, o, n, v, A), Y = N(w, k, R - y, l), ee = N(w, k, R - y - 10, l), te = N(w, k, B - 18, l);
+      return { value: $, angle: l, outer: Y, inner: ee, label: te };
+    }), J = re(w, k, P, v, A), U = pe(u, o, n), q = T(u, o, n, v, A), X = re(w, k, P, v, q);
+    return {
+      cx: w,
+      cy: k,
+      outerRadius: R,
+      innerRadius: B,
+      midRadius: P,
+      value: u,
+      valueAngle: j,
+      startAngle: v,
+      endAngle: A,
+      arcPath: J,
+      progressPath: X,
+      progressAngle: q,
+      valueProgress: U,
+      ranges: Z,
+      ticks: E,
+      size: z,
+      thickness: V
+    };
+  }, [
+    e,
+    t,
+    a,
+    r,
+    s,
+    c,
+    d,
+    m,
+    f,
+    y
+  ]);
+}
+function Ke({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  showTicks: f,
+  showValue: y,
+  showTarget: o,
+  target: n,
+  units: g
+}) {
+  const u = O({
+    value: e,
+    min: t,
+    max: a,
+    startAngle: r,
+    endAngle: s,
+    size: c,
+    thickness: d,
+    thresholds: m,
+    tickCount: 6,
+    arcPadding: 2
+  }), v = typeof n == "number" ? T(n, u.min, u.max, u.startAngle, u.endAngle) : null;
+  return /* @__PURE__ */ x("svg", { width: u.size, height: u.size, viewBox: `0 0 ${u.size} ${u.size}`, children: [
+    /* @__PURE__ */ i("g", { className: "gauge-ranges", children: u.ranges.map((A) => /* @__PURE__ */ i(
+      L,
+      {
+        cx: u.cx,
+        cy: u.cy,
+        radius: u.midRadius,
+        startAngle: A.startAngle,
+        endAngle: A.endAngle,
+        color: A.color,
+        thickness: u.thickness
+      },
+      A.endValue
+    )) }),
+    f && /* @__PURE__ */ i(
+      xe,
+      {
+        ticks: u.ticks,
+        color: "var(--gauge-tick)",
+        labelColor: "var(--gauge-text-muted)",
+        showLabels: !0
+      }
+    ),
+    typeof v == "number" && o && /* @__PURE__ */ i(
+      oe,
+      {
+        cx: u.cx,
+        cy: u.cy,
+        radius: u.outerRadius - 4,
+        angle: v,
+        color: "var(--gauge-target)"
+      }
+    ),
+    /* @__PURE__ */ i(
+      ye,
+      {
+        cx: u.cx,
+        cy: u.cy,
+        radius: u.innerRadius - 4,
+        angle: u.valueAngle,
+        color: "var(--gauge-needle)"
+      }
+    ),
+    y && /* @__PURE__ */ i(
+      K,
+      {
+        cx: u.cx,
+        cy: u.cy + 28,
+        value: Math.round(u.value),
+        target: n,
+        units: g,
+        showTarget: o
+      }
+    )
+  ] });
+}
+const Oe = b.memo(Ke);
+function We({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  showTicks: f,
+  showValue: y,
+  units: o
+}) {
+  const n = O({
+    value: e,
+    min: t,
+    max: a,
+    startAngle: r,
+    endAngle: s,
+    size: c,
+    thickness: d,
+    thresholds: m,
+    tickCount: 4,
+    arcPadding: 4
+  });
+  return /* @__PURE__ */ x("svg", { width: n.size, height: n.size / 1.2, viewBox: `0 0 ${n.size} ${n.size}`, children: [
+    /* @__PURE__ */ i("g", { className: "gauge-ranges", children: n.ranges.map((g) => /* @__PURE__ */ i(
+      L,
+      {
+        cx: n.cx,
+        cy: n.cy,
+        radius: n.midRadius,
+        startAngle: g.startAngle,
+        endAngle: g.endAngle,
+        color: g.color,
+        thickness: n.thickness
+      },
+      g.endValue
+    )) }),
+    f && /* @__PURE__ */ i(
+      xe,
+      {
+        ticks: n.ticks,
+        color: "var(--gauge-tick)",
+        labelColor: "var(--gauge-text-muted)",
+        showLabels: !1
+      }
+    ),
+    y && /* @__PURE__ */ i(
+      K,
+      {
+        cx: n.cx,
+        cy: n.cy + 14,
+        value: Math.round(n.value),
+        units: o,
+        showTarget: !1
+      }
+    )
+  ] });
+}
+const Ze = b.memo(We);
+function He({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  showValue: f,
+  units: y
+}) {
+  const o = O({
+    value: e,
+    min: t,
+    max: a,
+    startAngle: r,
+    endAngle: s,
+    size: c,
+    thickness: d,
+    thresholds: m,
+    tickCount: 8,
+    arcPadding: 0
+  });
+  return /* @__PURE__ */ x("svg", { width: o.size, height: o.size, viewBox: `0 0 ${o.size} ${o.size}`, children: [
+    /* @__PURE__ */ i("g", { className: "gauge-ranges", children: o.ranges.map((n) => /* @__PURE__ */ i(
+      L,
+      {
+        cx: o.cx,
+        cy: o.cy,
+        radius: o.midRadius,
+        startAngle: n.startAngle,
+        endAngle: n.endAngle,
+        color: n.color,
+        thickness: o.thickness
+      },
+      n.endValue
+    )) }),
+    /* @__PURE__ */ i(
+      ye,
+      {
+        cx: o.cx,
+        cy: o.cy,
+        radius: o.innerRadius - 2,
+        angle: o.valueAngle,
+        color: "var(--gauge-needle)"
+      }
+    ),
+    f && /* @__PURE__ */ i(
+      K,
+      {
+        cx: o.cx,
+        cy: o.cy + 24,
+        value: Math.round(o.value),
+        units: y,
+        showTarget: !1
+      }
+    )
+  ] });
+}
+const Je = b.memo(He);
+function Qe({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  showValue: f,
+  units: y,
+  gradientId: o
+}) {
+  const n = O({
+    value: e,
+    min: t,
+    max: a,
+    startAngle: r,
+    endAngle: s,
+    size: c,
+    thickness: d,
+    thresholds: m,
+    tickCount: 0,
+    arcPadding: 0
+  });
+  return /* @__PURE__ */ x("svg", { width: n.size, height: n.size, viewBox: `0 0 ${n.size} ${n.size}`, children: [
+    o && /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ x("linearGradient", { id: o, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+      /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "var(--gauge-range-poor)" }),
+      /* @__PURE__ */ i("stop", { offset: "55%", stopColor: "var(--gauge-range-warning)" }),
+      /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "var(--gauge-range-good)" })
+    ] }) }),
+    /* @__PURE__ */ i(
+      L,
+      {
+        cx: n.cx,
+        cy: n.cy,
+        radius: n.midRadius,
+        startAngle: n.startAngle,
+        endAngle: n.endAngle,
+        color: "var(--gauge-track)",
+        thickness: n.thickness
+      }
+    ),
+    /* @__PURE__ */ i(
+      L,
+      {
+        cx: n.cx,
+        cy: n.cy,
+        radius: n.midRadius,
+        startAngle: n.startAngle,
+        endAngle: n.progressAngle,
+        color: o ? `url(#${o})` : "var(--gauge-progress)",
+        thickness: n.thickness
+      }
+    ),
+    f && /* @__PURE__ */ i(
+      K,
+      {
+        cx: n.cx,
+        cy: n.cy + 8,
+        value: Math.round(n.value),
+        units: y,
+        showTarget: !1
+      }
+    )
+  ] });
+}
+const Ue = b.memo(Qe);
+function Xe({
+  value: e,
+  min: t,
+  max: a,
+  startAngle: r,
+  endAngle: s,
+  size: c,
+  thickness: d,
+  thresholds: m,
+  showValue: f,
+  units: y,
+  target: o,
+  showTarget: n
+}) {
+  const g = O({
+    value: e,
+    min: t,
+    max: a,
+    startAngle: r,
+    endAngle: s,
+    size: c,
+    thickness: d,
+    thresholds: m,
+    tickCount: 0,
+    arcPadding: 0
+  }), u = typeof o == "number" ? T(o, g.min, g.max, g.startAngle, g.endAngle) : null;
+  return /* @__PURE__ */ x("svg", { width: g.size, height: g.size, viewBox: `0 0 ${g.size} ${g.size}`, children: [
+    /* @__PURE__ */ i("g", { className: "gauge-ranges", children: g.ranges.map((v) => /* @__PURE__ */ i(
+      L,
+      {
+        cx: g.cx,
+        cy: g.cy,
+        radius: g.midRadius,
+        startAngle: v.startAngle,
+        endAngle: v.endAngle,
+        color: v.color,
+        thickness: g.thickness
+      },
+      v.endValue
+    )) }),
+    /* @__PURE__ */ i(
+      oe,
+      {
+        cx: g.cx,
+        cy: g.cy,
+        radius: g.outerRadius - 4,
+        angle: g.valueAngle,
+        color: "var(--gauge-needle)"
+      }
+    ),
+    n && typeof u == "number" && /* @__PURE__ */ i(
+      oe,
+      {
+        cx: g.cx,
+        cy: g.cy,
+        radius: g.outerRadius - 4,
+        angle: u,
+        color: "var(--gauge-target)"
+      }
+    ),
+    f && /* @__PURE__ */ i(
+      K,
+      {
+        cx: g.cx,
+        cy: g.cy + 8,
+        value: Math.round(g.value),
+        units: y,
+        target: o,
+        showTarget: n
+      }
+    )
+  ] });
+}
+const Ye = b.memo(Xe), me = () => typeof performance < "u" ? performance.now() : Date.now();
+function et(e, { enabled: t, duration: a = 500, easing: r } = {}) {
+  const s = Q(null), c = Q(0), d = Q(e), [m, f] = G(e);
+  return se(() => {
+    if (!t)
+      return f(e), d.current = e, () => {
+      };
+    const y = d.current, o = me();
+    c.current = o;
+    const n = typeof r == "function" ? r : (u) => 1 - Math.pow(1 - u, 3), g = () => {
+      const u = Math.min(1, (me() - o) / a), v = Ae(y, e, n(u));
+      f(v), u < 1 ? s.current = requestAnimationFrame(g) : d.current = e;
+    };
+    return s.current = requestAnimationFrame(g), () => {
+      s.current && cancelAnimationFrame(s.current);
+    };
+  }, [e, t, a, r]), m;
+}
+const tt = (...e) => e.filter(Boolean).join(" "), nt = null, fe = {
+  standard: { start: -90, end: 90 },
+  semicircle: { start: -110, end: 110 },
+  full: { start: 0, end: 360 },
+  arc: { start: -225, end: 45 },
+  multiband: { start: -120, end: 120 }
+}, ve = (e) => e ? Array.isArray(e) ? e[0] || null : Array.isArray(e.data) ? e.data[0] || null : typeof e == "object" ? e : null : null, p = (e, t) => e !== void 0 ? e : t, at = (e, t, a, r) => {
+  const s = _e(t, a, r);
+  for (let c = 0; c < s.length; c += 1)
+    if (e <= s[c].value) return c;
+  return s.length - 1;
+};
+function ot({
+  type: e = "standard",
+  value: t,
+  min: a,
+  max: r,
+  target: s,
+  thresholds: c,
+  showTicks: d = !0,
+  showValue: m = !0,
+  showTarget: f = !1,
+  animated: y = !0,
+  realtime: o = !1,
+  size: n = 220,
+  thickness: g = 18,
+  startAngle: u,
+  endAngle: v,
+  units: A = "",
+  data: z = nt,
+  apiEndpoint: V = "/gauge-data.json",
+  title: w = "KPI Gauge",
+  subtitle: k = "",
+  theme: R = "light",
+  className: B,
+  style: P,
+  onClick: j
+}) {
+  const [W, D] = G(null), [Z, H] = G(!1), [E, J] = G(""), [U, q] = G(!1), [X, F] = G(!1), M = Q(null), $ = ke(async () => {
+    if (V) {
+      H(!0), J("");
+      try {
+        const h = await fetch(V);
+        if (!h.ok)
+          throw new Error(`Request failed: ${h.status}`);
+        const S = await h.json();
+        D(ve(S));
+      } catch (h) {
+        J("Failed to load gauge data."), console.error("Failed to load gauge data", h);
+      } finally {
+        H(!1);
+      }
+    }
+  }, [V]);
+  se(() => {
+    if (z) {
+      D(ve(z));
+      return;
+    }
+    $();
+  }, [z, $]);
+  const l = ae(() => {
+    const h = W || {}, S = String(e || h.type || "standard").toLowerCase(), le = fe[S] || fe.standard, ie = p(a, h.min), ue = p(r, h.max), ne = Number.isFinite(ie) ? ie : 0, ge = Number.isFinite(ue) ? ue : 100, de = p(t, h.value), be = Number.isFinite(de) ? de : ne, he = p(s, h.target), we = Number.isFinite(he) ? he : null;
+    return {
+      type: S,
+      value: ce(be, ne, ge),
+      min: ne,
+      max: ge,
+      target: we,
+      thresholds: p(c, h.thresholds),
+      showTicks: p(d, h.showTicks ?? d),
+      showValue: p(m, h.showValue ?? m),
+      showTarget: p(f, h.showTarget ?? f),
+      size: p(n, h.size ?? n),
+      thickness: p(g, h.thickness ?? g),
+      units: p(A, h.units ?? A),
+      startAngle: p(u, h.startAngle ?? le.start),
+      endAngle: p(v, h.endAngle ?? le.end)
+    };
+  }, [
+    W,
+    e,
+    a,
+    r,
+    t,
+    s,
+    c,
+    d,
+    m,
+    f,
+    n,
+    g,
+    A,
+    u,
+    v
+  ]), Y = et(l.value, {
+    enabled: y || o,
+    duration: o ? 220 : 500
+  });
+  se(() => {
+    if (!o) return;
+    const h = at(l.value, l.thresholds, l.min, l.max);
+    if (M.current === null) {
+      M.current = h;
+      return;
+    }
+    if (M.current !== h) {
+      M.current = h, q(!0);
+      const S = setTimeout(() => q(!1), 300);
+      return () => clearTimeout(S);
+    }
+  }, [o, l.value, l.thresholds, l.min, l.max]);
+  const ee = Ie(
+    l.value,
+    l.thresholds,
+    "var(--gauge-range-good)"
+  ), te = ae(() => {
+    const h = [
+      `Value: ${Math.round(l.value)}${l.units ? ` ${l.units}` : ""}`,
+      `Min: ${l.min}`,
+      `Max: ${l.max}`
+    ];
+    return typeof l.target == "number" && h.splice(1, 0, `Target: ${l.target}`), h.join(" • ");
+  }, [l.value, l.units, l.min, l.max, l.target]), I = {
+    value: Y,
+    min: l.min,
+    max: l.max,
+    startAngle: l.startAngle,
+    endAngle: l.endAngle,
+    size: l.size,
+    thickness: l.thickness,
+    thresholds: l.thresholds,
+    showTicks: l.showTicks,
+    showValue: l.showValue,
+    showTarget: l.showTarget,
+    target: l.target,
+    units: l.units
+  }, C = l.type;
+  return /* @__PURE__ */ x(
+    "section",
+    {
+      className: tt(_.gaugeCard, _[R], U && _.flash, B),
+      style: { ...P, "--gauge-active": ee },
+      onClick: () => j == null ? void 0 : j(l.value),
+      onMouseEnter: () => F(!0),
+      onMouseLeave: () => F(!1),
+      role: "figure",
+      "aria-label": w,
+      "data-tooltip": te,
+      "data-tooltip-open": X ? "true" : "false",
+      children: [
+        /* @__PURE__ */ x("header", { className: _.header, children: [
+          /* @__PURE__ */ x("div", { children: [
+            /* @__PURE__ */ i("div", { className: _.title, children: w }),
+            k && /* @__PURE__ */ i("div", { className: _.subtitle, children: k })
+          ] }),
+          /* @__PURE__ */ x("div", { className: _.meta, children: [
+            /* @__PURE__ */ i("span", { children: Math.round(l.value) }),
+            l.units && /* @__PURE__ */ i("span", { className: _.units, children: l.units })
+          ] })
+        ] }),
+        /* @__PURE__ */ x("div", { className: _.body, children: [
+          Z && /* @__PURE__ */ i("div", { className: _.state, children: "Loading KPI..." }),
+          E && /* @__PURE__ */ i("div", { className: _.state, children: E }),
+          !Z && !E && /* @__PURE__ */ x("div", { className: _.gaugeStage, children: [
+            C === "semicircle" && /* @__PURE__ */ i(Ze, { ...I }),
+            C === "full" && /* @__PURE__ */ i(Je, { ...I }),
+            C === "arc" && /* @__PURE__ */ i(Ue, { ...I, gradientId: "gaugeGradient" }),
+            C === "multiband" && /* @__PURE__ */ i(Ye, { ...I }),
+            (C === "standard" || !C) && /* @__PURE__ */ i(Oe, { ...I })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ot as AwesomeSpeedometerGauge
+};

package/dist/esm/vite.svg ADDED Viewed

@@ -0,0 +1 @@

package/dist/style.css ADDED Viewed

@@ -0,0 +1,32 @@
+:root {
+  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #0f172a;
+  background-color: #f1f5f9;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  font-weight: 500;
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  color: #2563eb;
+}
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+}
+* {
+  box-sizing: border-box;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "name": "awesome-speedometer-gauge",
+  "private": false,
+  "version": "0.1.0",
+  "description": "A fully-featured React KPI speedometer gauge with 5 visual modes (Standard, SemiCircle, FullCircle, Arc, MultiBand), animated needle, threshold colour bands, dark/light/purple themes, and live data fetching.",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "npm run build:esm && npm run build:cjs && npm run build:css",
+    "build:esm": "vite build --mode esm",
+    "build:cjs": "vite build --mode cjs",
+    "build:css": "node -e \"require('fs').copyFileSync('src/style.css','dist/style.css')\"",
+    "dev": "vite",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "gauge",
+    "speedometer",
+    "kpi",
+    "dashboard",
+    "chart",
+    "arc",
+    "needle",
+    "animation",
+    "component"
+  ],
+  "author": "Pravinkumar Dabade",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.5"
+  }
+}