/* ============================================================ dataviz.jsx — hooks, icons, charts, counters, India map Exposes components on window for other babel scripts. ============================================================ */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- hooks ---------- */ function useInView(opts) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const inView = () => { const r = el.getBoundingClientRect(); return r.top < (window.innerHeight || 800) * 0.92 && r.bottom > 0; }; if (inView()) { setSeen(true); return; } // already visible on mount let done = false; const reveal = () => { if (done) return; done = true; setSeen(true); cleanup(); }; const onScroll = () => { if (inView()) reveal(); }; // works even if IO is frame-paused const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) reveal(); }, { threshold: 0.12, ...(opts || {}) }); io.observe(el); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll, { passive: true }); function cleanup() { io.disconnect(); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); } return cleanup; }, []); return [ref, seen]; } function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) { const [ref, seen] = useInView(); const Tag = as; return ( {children} ); } /* count-up that triggers when in view */ function useCountUp(target, { dur = 1400, decimals = 0, start = 0 } = {}) { const [ref, seen] = useInView(); const [val, setVal] = useState(start); useEffect(() => { if (!seen) return; let raf, t0, done = false; const finish = () => { if (!done) { done = true; setVal(target); } }; const tick = (t) => { if (!t0) t0 = t; const p = Math.min((t - t0) / dur, 1); const eased = 1 - Math.pow(1 - p, 3); setVal(start + (target - start) * eased); if (p < 1) raf = requestAnimationFrame(tick); else done = true; }; raf = requestAnimationFrame(tick); // guarantee the end state even if rAF is paused (unfocused/background load) const fallback = setTimeout(finish, dur + 250); return () => { cancelAnimationFrame(raf); clearTimeout(fallback); }; }, [seen, target]); const formatted = useMemo(() => { const n = decimals ? val.toFixed(decimals) : Math.round(val); return Number(n).toLocaleString("en-IN", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }); }, [val]); return [ref, formatted]; } /* company figures: FIG is defined globally in figures.js */ /* ---------- icon set (stroke, 1.6) ---------- */ const I = { segSteel: (p) => , segHospital: (p) => , segGraphite: (p) => , segScooter: (p) => , segFlask: (p) => , segPipes: (p) => , segWoven: (p) => , segCement: (p) => , segDiamond: (p) => , factory: (p) => , trendUp: (p) => , gauge: (p) => , handshake: (p) => , leaf: (p) => , arrow: (p) => , arrowUR: (p) => , check: (p) => , x: (p) => , plus: (p) => , search: (p) => , sun: (p) => , moon: (p) => , doc: (p) => , download: (p) => , bolt: (p) => , shield: (p) => , battery: (p) => , wind: (p) => , bell: (p) => , pin: (p) => , menu: (p) => , compass: (p) => , arrowDown: (p) => , link: (p) => , award: (p) => , linkedin: (p) => , instagram: (p) => , twitterx: (p) => , }; /* ---------- shared form validators ---------- */ const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test((v || "").trim()); const isPhone = (v) => /^\+?\d{10,13}$/.test((v || "").replace(/[\s\-()]/g, "")); const isFilled = (v) => !!(v && String(v).trim().length); /* logo mark — abstract "I" + sun/wind motif */ function LogoMark({ size = 30 }) { return ( ); } /* ---------- sparkline ---------- */ function Sparkline({ data, w = 320, h = 60, color = "#6D4AFF", fill = true }) { const max = Math.max(...data), min = Math.min(...data); const pts = data.map((d, i) => [ (i/(data.length-1))*w, h - ((d-min)/(max-min || 1))*(h-8) - 4 ]); const line = pts.map((p,i)=> (i?"L":"M")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" "); const area = `${line} L ${w} ${h} L 0 ${h} Z`; const id = useMemo(()=>"sg"+Math.random().toString(36).slice(2,7),[]); return ( {fill && } ); } /* ---------- live MW counter (homepage card) ---------- */ function LiveCounter() { const [mw, setMw] = useState(42.8); const [ago, setAgo] = useState(12); const [pulse, setPulse] = useState(false); const [curve, setCurve] = useState(() => { // a day generation curve, ramps up midday return Array.from({length: 32}, (_,i) => { const x = i/31; const bell = Math.exp(-Math.pow((x-0.52)*3.1,2)); return +(bell*44 + Math.random()*3).toFixed(1); }); }); const [co2Ref, co2] = useCountUp(184500, { dur: 1800 }); useEffect(() => { const id = setInterval(() => { setMw(v => { const nv = Math.max(38, Math.min(47, v + (Math.random()-0.45)*1.4)); return +nv.toFixed(1); }); setAgo(0); setPulse(true); setTimeout(()=>setPulse(false), 700); }, 4200); const id2 = setInterval(()=> setAgo(a => a+1), 1000); return () => { clearInterval(id); clearInterval(id2); }; }, []); const wind = (mw * 0.42), solar = (mw * 0.58), bess = 68; return (
Live · 33 plants Energy Intelligence Platform
{mw.toFixed(1)}MW
being generated right now across 33 hybrid plants
{[ { k:"Wind", v:wind.toFixed(1)+" MW", pct:42, c:"#3E92DD" }, { k:"Solar", v:solar.toFixed(1)+" MW", pct:58, c:"#F5B81C" }, { k:"Storage", v:bess+"%", pct:bess, c:"#5DCAA5" }, ].map((s,i)=>(
{s.k}{s.v}
))}
{co2}tCO₂e
carbon avoided this year · ≈ 1.4M trees
Updated {ago === 0 ? "just now" : ago + "s ago"} Open live platform {I.arrow({width:14,height:14})}
); } /* fix: co2 ref attach */ LiveCounter.displayName = "LiveCounter"; /* ---------- cost curve chart (prop-driven, animates on recalc) ---------- */ function CostCurveChart({ gridStart = 7.0, gridEnd = 9.8, target = 3.2, saveLabel = null }) { const [ref, seen] = useInView(); const w = 560, h = 320, pad = { l: 46, r: 22, t: 28, b: 40 }; const years = [0,1,2,3,4,5]; // grid tariff climbs from now → yr5; Integrum drops to target by yr1 then eases lower const before = years.map(i => +(gridStart + (gridEnd - gridStart) * (i / 5)).toFixed(2)); const after = years.map(i => i === 0 ? +gridStart.toFixed(2) : +(target + (gridStart - target) * Math.max(0, (1 - i)) * 0 + (i === 1 ? 0.9 : i === 2 ? 0.4 : i === 3 ? 0.2 : i === 4 ? 0.1 : 0)).toFixed(2)); const maxY = Math.max(10, Math.ceil(gridEnd + 1)), minY = 0; const X = (i)=> pad.l + (i/5)*(w-pad.l-pad.r); const Y = (v)=> pad.t + (1-(v-minY)/(maxY-minY))*(h-pad.t-pad.b); const path = (arr)=> arr.map((v,i)=>(i?"L":"M")+X(i).toFixed(1)+" "+Y(v).toFixed(1)).join(" "); const gap = `${path(before)} L ${X(5)} ${Y(after[5])} ${after.slice().reverse().map((v,i)=>"L "+X(5-i)+" "+Y(v)).join(" ")} Z`; const dash = seen ? 0 : 1600; const ticks = []; for (let v=0; v<=maxY; v+=2) ticks.push(v); return ( {ticks.map(v=>( ₹{v} ))} {years.map(i=>( ))} {years.map(i=>( {i===0?"Now":"Yr "+i} ))} {saveLabel && {saveLabel}} Your savings zone {/* grid tariff (rising cost) */} Grid: ₹{gridEnd.toFixed(1)} {/* Integrum tariff (falling) */} {after.map((v,i)=>())} Integrum: ₹{target.toFixed(1)} ); } /* ---------- 24h generation area (dashboard) ---------- */ function GenerationChart({ color = "#18A0B8" }) { const data = useMemo(()=> Array.from({length:48},(_,i)=>{ const x=i/47; const bell=Math.exp(-Math.pow((x-0.5)*3.3,2)); return +(bell*5.4 + Math.random()*0.3).toFixed(2); }),[]); const w=600,h=200,pad=28; const max=6; const X=(i)=>pad+(i/(data.length-1))*(w-pad*1.4); const Y=(v)=>h-24-(v/max)*(h-44); const line=data.map((v,i)=>(i?"L":"M")+X(i).toFixed(1)+" "+Y(v).toFixed(1)).join(" "); const area=`${line} L ${X(data.length-1)} ${h-24} L ${X(0)} ${h-24} Z`; return ( {[0,2,4,6].map(v=>( {v}))} {["00","06","12","18","24"].map((t,i)=>({t}:00))} ); } /* ---------- India map — correct external boundary, embedded (india-geo.js) ---------- */ const INDIA_W = 400, INDIA_H = 460; const INDIA_VB = `0 0 ${INDIA_W} ${INDIA_H}`; /* project sites by real coordinates — projected with the same projection as the outline */ const PROJECT_REGIONS = [ { name: "Gujarat", lng: 71.5, lat: 22.6, n: 7, color: "#E0A100", glow: "#F0C000", off: [[16,-12],[-12,10],[8,20]] }, { name: "Maharashtra", lng: 75.4, lat: 19.4, n: 7, color: "#005B96", glow: "#5FE0B5", off: [[14,-10],[-10,12],[6,18]] }, { name: "Karnataka", lng: 76.2, lat: 14.8, n: 25, color: "#0A6FB0", glow: "#4AA8E8", off: [[14,-10],[-10,12],[6,20]] }, { name: "Tamil Nadu", lng: 78.3, lat: 11.0, status: "development", color: "#1D9E75", glow: "#C084FC", off: [[10,-9],[-8,11]] }, ]; let _indiaGeoCache = null; function useIndiaGeo() { const [geo, setGeo] = useState(_indiaGeoCache); useEffect(()=>{ if (_indiaGeoCache) { setGeo(_indiaGeoCache); return; } let alive = true; (async ()=>{ try { if (!window.d3 || !window.INDIA_GEO) return; // Embedded, correct external boundary (india-geo.js) — no CDN fetch, // no dependency on a low-resolution generic world atlas. See that // file's header for provenance. const india = window.INDIA_GEO; const proj = window.d3.geoMercator().fitExtent([[10,10],[INDIA_W-10,INDIA_H-10]], india); const d = window.d3.geoPath(proj)(india); const pins = PROJECT_REGIONS.map(r=>{ const [x,y] = proj([r.lng, r.lat]); return { ...r, x, y }; }); // Dot matrix sampled from the REAL outline: a grid point is kept only // when it falls inside the country path, so the dotted silhouette is // still true geography rather than a drawn approximation. const dots = []; try { const step = 7.2; const cv = document.createElement("canvas"); cv.width = INDIA_W; cv.height = INDIA_H; const ctx = cv.getContext("2d"); const p2d = new Path2D(d); for (let y = 6; y < INDIA_H - 4; y += step) { for (let x = 6; x < INDIA_W - 4; x += step) { if (ctx.isPointInPath(p2d, x, y)) dots.push([x, y]); } } } catch (e) {} _indiaGeoCache = { d, pins, dots }; if (alive) setGeo(_indiaGeoCache); } catch (e) { /* map stays empty rather than showing wrong geography */ } })(); return ()=>{ alive = false; }; },[]); return geo; } function IndiaMap({ height = 380, interactive = true }) { const [hover, setHover] = useState(null); const geo = useIndiaGeo(); const pins = geo ? geo.pins : []; return (
{geo && } {pins.map(r=>( ))} {pins.map(r=>( interactive && setHover(r.name)} onMouseLeave={()=> interactive && setHover(null)}> {r.off.map((o,j)=>())} ))} {hover && (()=>{ const r=pins.find(x=>x.name===hover); return
{r.name}
{r.status==="development" ? "Under development" : `${r.n} projects`}
; })()}
); } /* ---------- DARK projects map — real India outline (client reference layout) ---------- */ function ProjectsMapDark({ height = 420 }) { const [hover, setHover] = useState(null); const geo = useIndiaGeo(); const regions = (geo ? geo.pins : []).map(r => ({ ...r, glow: r.glow || r.color || "#5FE0B5" })); return (
{regions.map((rg, i) => ())} {/* soft halos read through the translucent landmass */} {regions.map((rg, i) => ( ))} {/* the outline itself — one continuous stroke, as in the reference */} {geo && ( )} {regions.map((rg) => { const on = hover === rg.name; return ( setHover(rg.name)} onMouseLeave={() => setHover(null)} style={{ cursor: "pointer" }}> {rg.off.map((o,j)=>( ))} ); })} {hover && (() => { const r = regions.find(x => x.name === hover); return
{r.name}
{r.status==="development" ? "Under development" : `${r.n} projects`}
; })()}
); } /* ---------- donut / revenue mix ---------- */ function Donut({ segments, size = 150, thickness = 22, center }) { const r = (size - thickness)/2; const c = 2*Math.PI*r; let off = 0; return ( {segments.map((s,i)=>{ const len=(s.v/100)*c; const el= ; off+=len; return el; })} {center && {center}} ); } /* ---------- bess ring ---------- */ function BessRing({ pct = 68, size = 96 }) { const r=(size-14)/2, c=2*Math.PI*r; return ( {pct}% ); } /* ---------- energy imagery (hotlinked, navy-overlaid for legibility) ---------- */ const U = (id, w = 1600, q = 72) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=${q}`; const IMG = { solarAerial: U("1509391366360-2e959784a276"), wind: U("1466611653911-95081537e5b7"), solarClose: U("1508514177221-188b1cf16e9d"), windSingle: U("1548337138-e87d889cc369"), storage: U("1610028290816-5d937a395a49"), team: U("1559302504-64aae6ca6b6d"), windField: U("1497435334941-8c899ee9e8e9"), industrial: U("1581092160562-40aa08e78837"), steelPlant: "assets/steel-plant.jpeg", powerMarkets: "assets/power-markets-hybrid.png", commercialSolar: U("1613665813446-82a78c468a1d"), heroField: U("1548337138-e87d889cc369"), meadow: U("1466611653911-95081537e5b7"), }; // absolutely-positioned photo layer with overlay; drop inside a position:relative parent function PhotoBG({ src, overlay, pos = "center", style }) { const ov = overlay || "linear-gradient(180deg, rgba(8,23,42,.82), rgba(8,23,42,.93))"; return (