import React from "react"; import { defineInfigure } from "@infigure/sdk"; const n=(v,d=0)=>Number.isFinite(Number(v))?Number(v):d; function KpiDeltaSparkline({api,data,width,height}){const rows=Array.isArray(data)?data:[];const first=rows[0]||{};const values=rows.map(r=>n(r.trend??r.value)).filter(Number.isFinite);const min=Math.min(...values,0),max=Math.max(...values,1),w=Math.max(1,width),h=Math.max(1,height);const points=values.map((v,i)=>`${(i/Math.max(1,values.length-1))*w},${h-24-((v-min)/Math.max(1,max-min))*(h-48)}`).join(" "),delta=n(first.delta,0);return

{first.label??"Metric"}

{first.value??"—"}=0?"#86EFAC":"#FDA4AF"}}>{delta>=0?"+":""}{delta}%

} export default defineInfigure(KpiDeltaSparkline,{label:"KPI with Delta + Sparkline",bindings:[{id:"label",label:"Label",path:"data.label",required:false,kind:"field",cardinality:"one"},{id:"value",label:"Value",path:"data.value",required:true,kind:"field",cardinality:"one"},{id:"delta",label:"Delta",path:"data.delta",required:false,kind:"field",cardinality:"one"},{id:"trend",label:"Trend",path:"data.trend",required:false,kind:"field",cardinality:"many"}]});