@omniviewdev/ui 0.1.0

package/dist/charts/types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { SemanticColor, ComponentSize } from '../types';
+/** A time-stamped data point */
+export interface TimeSeriesPoint {
+    timestamp: number;
+    value: number;
+}
+/** A named series */
+export interface TimeSeriesDef {
+    id: string;
+    label: string;
+    data: TimeSeriesPoint[];
+    color?: SemanticColor | string;
+    area?: boolean;
+    lineStyle?: 'solid' | 'dashed' | 'dotted';
+}
+/** Categorical data item for bar/pie */
+export interface CategoricalDatum {
+    id: string;
+    label: string;
+    value: number;
+    color?: SemanticColor | string;
+}
+/** Vertical event marker at a specific timestamp (Lens-style) */
+export interface ChartEventMarker {
+    /** Epoch ms or Date — position on the x-axis */
+    timestamp: number | Date;
+    /** Short label shown above the caret (e.g. "Deploy", "Restart") */
+    label?: string;
+    /** Semantic color or CSS color. Default: 'muted' */
+    color?: SemanticColor | string;
+    /** Line style. Default: 'dashed' */
+    lineStyle?: 'solid' | 'dashed';
+    /** Tooltip content shown on hover. Pass any ReactNode. */
+    tooltip?: ReactNode;
+}
+/** Horizontal reference/threshold line */
+export interface ChartAnnotation {
+    value: number;
+    label?: string;
+    color?: SemanticColor | string;
+    lineStyle?: 'solid' | 'dashed';
+}
+/** Built-in value format presets (domain-agnostic) */
+export type MetricFormat = 'bytes' | 'percent' | 'duration' | 'rate' | 'si' | 'number';
+/** Time range */
+export interface ChartTimeRange {
+    from: Date;
+    to: Date;
+}
+/** Auto-refresh intervals */
+export type RefreshInterval = 0 | 5000 | 10000 | 15000 | 30000 | 60000;
+/** Common props shared by all chart wrappers */
+export interface BaseChartProps {
+    size?: ComponentSize;
+    height?: number;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    skipAnimation?: boolean;
+    /** Custom unit suffix appended to formatted values (e.g., "MiB", "req/s") */
+    unit?: string;
+    /** Full custom value formatter, overrides valueFormat + unit */
+    valueFormatter?: (value: number | null) => string;
+    sx?: SxProps<Theme>;
+}

package/dist/charts/useChartTheme.d.ts

@@ -0,0 +1,13 @@
+export interface ChartTheme {
+    axisLineColor: string;
+    gridColor: string;
+    tooltipBg: string;
+    tooltipFg: string;
+    fontFamily: string;
+    fontSize: number;
+    areaOpacity: number;
+}
+/** Flush cached token values (call on theme change). */
+export declare function clearTokenCache(): void;
+/** Returns chart axis/grid/tooltip styling derived from --ov-* tokens. */
+export declare function useChartTheme(): ChartTheme;

package/dist/charts.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),De=require("@mui/material/styles"),o=require("react/jsx-runtime"),Le=require("react-dom"),j=require("@mui/material/Box"),Te=require("@mui/material/Popper"),xe=require("@mui/x-charts/LineChart"),ie=require("@mui/x-charts/ChartsReferenceLine"),Z=require("@mui/x-charts/hooks"),se=require("react-icons/lu"),le=require("./Skeleton-CfdQWLQM.cjs"),fe=require("./ErrorState-CnIR-1xa.cjs"),Fe=require("@mui/x-charts/BarChart"),Pe=require("@mui/x-charts/PieChart"),qe=require("@mui/x-charts/ScatterChart"),Ee=require("@mui/x-charts/SparkLineChart"),ce=require("@mui/material/Typography"),Be=require("@mui/x-charts/Gauge"),me=require("@mui/material/IconButton"),Ne=require("@mui/material/MenuItem"),He=require("@mui/material/Menu"),Ge=require("./Select-CnRBSc5w.cjs"),ge={primary:"--ov-accent",secondary:"--ov-fg-muted",success:"--ov-success-default",warning:"--ov-warning-default",error:"--ov-danger-default",info:"--ov-info-default",neutral:"--ov-fg-default",accent:"--ov-accent",danger:"--ov-danger-default",muted:"--ov-fg-muted"},Ie=new Set(Object.keys(ge)),ue=new Map;function $(e){const t=ue.get(e);if(t!==void 0)return t;let a;if(Ie.has(e)){const r=ge[e];typeof document<"u"?a=getComputedStyle(document.documentElement).getPropertyValue(r).trim()||`var(${r})`:a=`var(${r})`}else a=e;return ue.set(e,a),a}function We(){ue.clear()}const Ve=["primary","success","warning","info","error","secondary","accent","neutral"];function N(e){return(e&&e.length>0?e:Ve).map($)}const w=new Intl.NumberFormat(void 0,{maximumFractionDigits:1}),Oe=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit"});function pe(e,t){const a=Math.abs(e);return a<1024?`${e} ${t??"B"}`:a<1024**2?`${w.format(e/1024)} ${t??"KiB"}`:a<1024**3?`${w.format(e/1024**2)} ${t??"MiB"}`:a<1024**4?`${w.format(e/1024**3)} ${t??"GiB"}`:`${w.format(e/1024**4)} ${t??"TiB"}`}function ve(e,t){return`${w.format(e)}${t??"%"}`}function ye(e,t){const a=Math.abs(e);return t?`${w.format(e)} ${t}`:a<1e3?`${w.format(e)} ms`:a<6e4?`${w.format(e/1e3)} s`:a<36e5?`${w.format(e/6e4)} m`:`${w.format(e/36e5)} h`}const Y=["","k","M","G","T","P"];function be(e,t){const a=Math.abs(e);let r=0,n=a;for(;n>=1e3&&r<Y.length-1;)n/=1e3,r++;return`${e<0?"-":""}${w.format(n)} ${Y[r]}${t??"/s"}`}function Ce(e,t){const a=Math.abs(e);let r=0,n=a;for(;n>=1e3&&r<Y.length-1;)n/=1e3,r++;const i=e<0?"-":"",s=t?` ${t}`:Y[r]?` ${Y[r]}`:"";return`${i}${w.format(n)}${s}`}function Se(e,t){const a=new Intl.NumberFormat(void 0).format(e);return t?`${a} ${t}`:a}function Re(e){return Oe.format(e)}function B(e,t){const a=(()=>{switch(e){case"bytes":return r=>pe(r,t);case"percent":return r=>ve(r,t);case"duration":return r=>ye(r,t);case"rate":return r=>be(r,t);case"si":return r=>Ce(r,t);case"number":return r=>Se(r,t)}})();return r=>r==null?"–":a(r)}const de=new Map;function R(e,t){if(typeof document>"u")return t;const a=de.get(e);if(a!==void 0)return a;const n=getComputedStyle(document.documentElement).getPropertyValue(e).trim()||t;return de.set(e,n),n}function K(){const e=De.useTheme(),t=e.palette.mode==="dark";return l.useEffect(()=>{de.clear(),We()},[t]),l.useMemo(()=>({axisLineColor:R("--ov-border-default",t?"#3a3a3a":"#d4d4d4"),gridColor:R("--ov-border-subtle",t?"#2a2a2a":"#e8e8e8"),tooltipBg:R("--ov-bg-surface",t?"#1e1e1e":"#ffffff"),tooltipFg:R("--ov-fg-default",t?"#e0e0e0":"#1a1a1a"),fontFamily:R("--ov-font-sans",e.typography.fontFamily??"sans-serif"),fontSize:11,areaOpacity:.15}),[t,e.typography.fontFamily])}function X({loading:e,error:t,onRetry:a,empty:r,width:n,height:i,children:s}){return e?o.jsx(j,{sx:{width:n??"100%",height:i},children:o.jsx(le.Skeleton,{variant:"rectangular",width:"100%",height:i})}):t?o.jsx(j,{sx:{width:n??"100%",height:i,display:"flex",alignItems:"center",justifyContent:"center"},children:o.jsx(fe.ErrorState,{message:t,onRetry:a,variant:"panel"})}):r?o.jsx(j,{sx:{width:n??"100%",height:i,display:"flex",alignItems:"center",justifyContent:"center"},children:o.jsx(fe.EmptyState,{icon:o.jsx(se.LuChartBar,{size:32}),title:"No data",description:"There is no data to display.",size:"sm"})}):o.jsx(o.Fragment,{children:s})}const Ye={xs:120,sm:180,md:260,lg:360,xl:480};function Ke({markers:e}){const t=Z.useXScale(),{top:a}=Z.useDrawingArea(),[r,n]=l.useState(null),i=l.useCallback((c,m)=>{const v=m.currentTarget.getBoundingClientRect();n({index:c,anchor:{getBoundingClientRect:()=>v}})},[]),s=l.useCallback(()=>n(null),[]),d=r!=null?e[r.index]:null;return o.jsxs("g",{children:[e.map((c,m)=>{const v=c.timestamp instanceof Date?c.timestamp:new Date(c.timestamp),x=t(v);if(x==null||isNaN(x))return null;const y=$(c.color??"muted"),f=!!c.tooltip;return o.jsxs("g",{style:f?{cursor:"pointer"}:void 0,onPointerEnter:f?h=>i(m,h):void 0,onPointerLeave:f?s:void 0,children:[f&&o.jsx("rect",{x:x-16,y:a-(c.label?20:12),width:32,height:c.label?20:12,fill:"transparent"}),o.jsx("text",{x,y:a-1,textAnchor:"middle",fill:y,fontSize:8,children:"▼"}),c.label&&o.jsx("text",{x,y:a-9,textAnchor:"middle",fill:y,fontSize:9,fontWeight:500,children:c.label})]},`evt-${m}`)}),r&&d?.tooltip&&Le.createPortal(o.jsx(Te,{open:!0,anchorEl:r.anchor,placement:"top",modifiers:[{name:"offset",options:{offset:[0,6]}}],sx:{zIndex:1500,pointerEvents:"none"},children:o.jsx(j,{sx:{bgcolor:"var(--ov-bg-elevated, #1e1e2e)",color:"var(--ov-fg-default, #cdd6f4)",border:"1px solid var(--ov-border-subtle, #45475a)",borderRadius:"6px",px:1.25,py:.75,fontSize:"0.75rem",lineHeight:1.4,maxWidth:260,boxShadow:"0 4px 12px rgba(0,0,0,0.4)"},children:d.tooltip})}),document.body)]})}function Xe({formatter:e,color:t,position:a="right"}){const r=Z.useYScale(),{left:n,top:i,width:s,height:d}=Z.useDrawingArea(),c=r.ticks?.()??[],m=a==="right",v=m?n+s-4:n+4,x=m?"end":"start";return o.jsx("g",{children:c.map(y=>{const f=r(y);if(f==null||isNaN(f)||f<i-2||f>i+d+2)return null;const h=e(y);return o.jsx("text",{x:v,y:f-4,textAnchor:x,fill:t,fontSize:10,opacity:.7,children:h},y)})})}function he({series:e,timeRange:t,yAxisLabel:a,valueFormat:r="number",unit:n,valueFormatter:i,annotations:s,area:d=!1,grid:c=!0,showLegend:m=!1,showMarks:v=!1,colors:x,yAxisPosition:y="left",xAxisPosition:f="bottom",compact:h=!1,margin:g,yAxisWidth:p,xAxisHeight:A,yAxisInline:k=!1,yAxisInlinePosition:D="right",eventMarkers:b,size:F="md",height:S,loading:C,error:q,onRetry:H,skipAnimation:_=!1,sx:ee}){const L=K(),J=S??Ye[F],G=l.useMemo(()=>N(x),[x]),P=l.useMemo(()=>i??B(r,n),[i,r,n]),I=e.length===0||e.every(u=>u.data.length===0),{xData:te,alignedValues:W}=l.useMemo(()=>{if(e.length===0||e.every(z=>z.data.length===0))return{xData:[],alignedValues:e.map(()=>[])};const u=new Set;for(const z of e)for(const E of z.data)u.add(E.timestamp);const T=Array.from(u).sort((z,E)=>z-E),M=T.map(z=>new Date(z)),ne=e.map(z=>{const E=new Map;for(const U of z.data)E.set(U.timestamp,U.value);return T.map(U=>E.get(U)??null)});return{xData:M,alignedValues:ne}},[e]),V=l.useMemo(()=>e.map((u,T)=>({id:u.id,label:u.label,data:W[T]??[],color:u.color?$(u.color):G[T%G.length],area:u.area??d,showMark:v,valueFormatter:P,...u.lineStyle==="dashed"?{strokeDasharray:"6 3"}:{},...u.lineStyle==="dotted"?{strokeDasharray:"2 2"}:{}})),[e,W,d,v,P,G]),Q=h?{top:4,right:2,bottom:2,left:2}:{top:8,right:8,bottom:8,left:8},re=b?.length?b.some(u=>u.label)?20:10:0,oe={...Q,...g,top:(g?.top??Q.top)+re},O=k?0:p??(h?30:40),ae=A??(h?20:24);return o.jsx(j,{sx:ee,children:o.jsx(X,{loading:C,error:q,onRetry:H,empty:I,height:J,children:o.jsxs(xe.LineChart,{height:J,series:V,xAxis:[{data:te,scaleType:"time",height:ae,position:f,...t&&{min:t.from,max:t.to}}],yAxis:[{label:a,valueFormatter:P,position:y,width:O}],grid:c?{horizontal:!0}:void 0,skipAnimation:_,hideLegend:!m,margin:oe,sx:{"& .MuiChartsAxis-line":h?{display:"none"}:{stroke:L.axisLineColor},"& .MuiChartsAxis-tick":h?{display:"none"}:{stroke:L.axisLineColor},"& .MuiChartsAxis-tickLabel":{fill:L.tooltipFg,fontSize:L.fontSize},...k&&{"& .MuiChartsAxis-left, & .MuiChartsAxis-right":{display:"none"}},"& .MuiChartsGrid-line":{stroke:L.gridColor,opacity:.5},"& .MuiAreaElement-root":{opacity:L.areaOpacity}},children:[s?.map((u,T)=>o.jsx(ie.ChartsReferenceLine,{y:u.value,label:u.label,lineStyle:{stroke:u.color?$(u.color):"var(--ov-fg-muted)",strokeDasharray:u.lineStyle==="dashed"?"6 3":void 0},labelStyle:{fill:L.tooltipFg,fontSize:L.fontSize}},`ann-${T}`)),b?.map((u,T)=>o.jsx(ie.ChartsReferenceLine,{x:u.timestamp instanceof Date?u.timestamp:new Date(u.timestamp),lineStyle:{stroke:$(u.color??"muted"),strokeDasharray:u.lineStyle==="solid"?void 0:"4 3",strokeWidth:1}},`evt-line-${T}`)),b?.length&&o.jsx(Ke,{markers:b}),k&&o.jsx(Xe,{formatter:P,color:L.tooltipFg,position:D})]})})})}he.displayName="TimeSeriesChart";const Je={xs:120,sm:180,md:260,lg:360,xl:480};function Me({data:e,horizontal:t=!1,valueFormat:a="number",unit:r,valueFormatter:n,showLabels:i=!1,colors:s,size:d="md",height:c,loading:m,error:v,onRetry:x,skipAnimation:y=!1,sx:f}){const h=K(),g=c??Je[d],p=l.useMemo(()=>N(s),[s]),A=l.useMemo(()=>n??B(a,r),[n,a,r]),k=e.length===0,D=l.useMemo(()=>e.map((S,C)=>S.color?$(S.color):p[C%p.length]),[e,p]),b=l.useMemo(()=>e.map(S=>S.label),[e]),F=l.useMemo(()=>e.map(S=>S.value),[e]);return o.jsx(j,{sx:f,children:o.jsx(X,{loading:m,error:v,onRetry:x,empty:k,height:g,children:o.jsx(Fe.BarChart,{height:g,layout:t?"horizontal":"vertical",series:[{data:F,valueFormatter:A,label:i?"Value":void 0}],xAxis:t?[{valueFormatter:A}]:[{data:b,scaleType:"band"}],yAxis:t?[{data:b,scaleType:"band"}]:[{valueFormatter:A}],colors:D,skipAnimation:y,hideLegend:!0,sx:{"& .MuiChartsAxis-line":{stroke:h.axisLineColor},"& .MuiChartsAxis-tick":{stroke:h.axisLineColor},"& .MuiChartsAxis-tickLabel":{fill:h.tooltipFg,fontSize:h.fontSize}}})})})}Me.displayName="BarChart";const Qe={xs:120,sm:180,md:260,lg:360,xl:480};function je({data:e,innerRadius:t,showLabels:a=!1,colors:r,size:n="md",height:i,loading:s,error:d,onRetry:c,skipAnimation:m=!1,sx:v}){const x=i??Qe[n],y=l.useMemo(()=>N(r),[r]),f=e.length===0,h=l.useMemo(()=>e.map((g,p)=>({id:g.id,value:g.value,label:g.label,color:g.color?$(g.color):y[p%y.length]})),[e,y]);return o.jsx(j,{sx:v,children:o.jsx(X,{loading:s,error:d,onRetry:c,empty:f,height:x,children:o.jsx(Pe.PieChart,{height:x,series:[{data:h,innerRadius:t??0,arcLabel:a?g=>g.label??"":void 0}],skipAnimation:m})})})}je.displayName="PieChart";const Ue={xs:120,sm:180,md:260,lg:360,xl:480};function ke({series:e,xAxisLabel:t,yAxisLabel:a,xFormat:r="number",yFormat:n="number",colors:i,size:s="md",height:d,loading:c,error:m,onRetry:v,skipAnimation:x=!1,sx:y}){const f=K(),h=d??Ue[s],g=l.useMemo(()=>N(i),[i]),p=e.length===0||e.every(b=>b.data.length===0),A=l.useMemo(()=>B(r),[r]),k=l.useMemo(()=>B(n),[n]),D=l.useMemo(()=>e.map((b,F)=>({id:b.id,label:b.label,data:b.data.map((S,C)=>({x:S.x,y:S.y,id:S.id??C})),color:b.color?$(b.color):g[F%g.length]})),[e,g]);return o.jsx(j,{sx:y,children:o.jsx(X,{loading:c,error:m,onRetry:v,empty:p,height:h,children:o.jsx(qe.ScatterChart,{height:h,series:D,xAxis:[{label:t,valueFormatter:A}],yAxis:[{label:a,valueFormatter:k}],skipAnimation:x,sx:{"& .MuiChartsAxis-line":{stroke:f.axisLineColor},"& .MuiChartsAxis-tick":{stroke:f.axisLineColor},"& .MuiChartsAxis-tickLabel":{fill:f.tooltipFg,fontSize:f.fontSize}}})})})}ke.displayName="ScatterChart";const Ze={top:2,bottom:2,left:2,right:2};function Ae({data:e,plotType:t="line",area:a=!1,color:r="primary",height:n=40,width:i="100%",showTooltip:s=!1,skipAnimation:d=!1}){const c=$(r);return o.jsx(Ee.SparkLineChart,{data:e,plotType:t,area:a,height:n,width:typeof i=="number"?i:void 0,color:c,curve:"natural",margin:Ze,showTooltip:s,skipAnimation:d,sx:typeof i=="string"?{width:i}:void 0})}Ae.displayName="Sparkline";const _e={xs:80,sm:100,md:140,lg:180,xl:220};function et(e,t,a,r){const n=(e-t)/(a-t)*100;return n<r[0]?"success":n<r[1]?"warning":"danger"}function $e({value:e,min:t=0,max:a=100,label:r,unit:n,color:i,thresholds:s=[60,85],size:d="md",loading:c=!1}){const m=_e[d],v=l.useMemo(()=>$(i??et(e,t,a,s)),[i,e,t,a,s]);return c?o.jsxs(j,{sx:{p:2,border:"1px solid var(--ov-border-default)",borderRadius:"8px",bgcolor:"var(--ov-bg-surface)",display:"flex",flexDirection:"column",alignItems:"center",gap:1},children:[o.jsx(le.Skeleton,{variant:"circular",width:m,height:m}),o.jsx(le.Skeleton,{variant:"text",width:"60%"})]}):o.jsxs(j,{sx:{p:2,border:"1px solid var(--ov-border-default)",borderRadius:"8px",bgcolor:"var(--ov-bg-surface)",display:"flex",flexDirection:"column",alignItems:"center",gap:.5},children:[o.jsx(Be.Gauge,{value:e,valueMin:t,valueMax:a,startAngle:-110,endAngle:110,width:m,height:m,sx:{"& .MuiGauge-valueArc":{fill:v},"& .MuiGauge-referenceArc":{fill:"var(--ov-bg-surface-inset)"}},text:n?`${e}${n}`:`${e}`}),o.jsx(ce,{variant:"caption",sx:{fontSize:"0.6875rem",fontWeight:600,color:"var(--ov-fg-muted)",textTransform:"uppercase",letterSpacing:"0.04em",textAlign:"center"},children:r})]})}$e.displayName="GaugeCard";const tt=[{label:"15m",duration:900*1e3},{label:"1h",duration:3600*1e3},{label:"6h",duration:360*60*1e3},{label:"24h",duration:1440*60*1e3},{label:"7d",duration:10080*60*1e3}];function rt(e,t){const a=e.to.getTime()-e.from.getTime();let r=t[0],n=Math.abs(a-r.duration);for(const i of t){const s=Math.abs(a-i.duration);s<n&&(r=i,n=s)}return String(r.duration)}function ze({title:e,icon:t,subtitle:a,series:r,timeRange:n,onTimeRangeChange:i,refreshInterval:s=0,onRefresh:d,valueFormat:c="number",unit:m,valueFormatter:v,annotations:x,eventMarkers:y,area:f=!1,presets:h=tt,colors:g,headerActions:p,toolbar:A,menuItems:k,yAxisPosition:D="none",xAxisPosition:b="none",margin:F,yAxisWidth:S,xAxisHeight:C,yAxisInline:q=!0,yAxisInlinePosition:H,variant:_="default",height:ee=260,loading:L,error:J,onRetry:G}){const P=l.useRef(null),[I,te]=l.useState(s>0),[W,V]=l.useState(null),Q=_==="compact",re=l.useMemo(()=>rt(n,h),[n,h]),oe=l.useMemo(()=>h.map(M=>({value:String(M.duration),label:M.label})),[h]),O=l.useCallback(()=>{P.current&&(clearInterval(P.current),P.current=null)},[]);l.useEffect(()=>(O(),I&&s>0&&d&&(P.current=setInterval(d,s)),O),[I,s,d,O]);const ae=M=>{if(!i)return;const ne=Number(Array.isArray(M)?M[0]:M),z=new Date;i({from:new Date(z.getTime()-ne),to:z})},u=i||A||p||d,T=k&&k.length>0;return o.jsxs(j,{sx:{display:"flex",flexDirection:"column",overflow:"hidden",...Q?{bgcolor:"transparent"}:{bgcolor:"var(--ov-bg-surface)",border:"1px solid var(--ov-border-default)",borderRadius:"8px"}},children:[o.jsxs(j,{sx:{display:"flex",alignItems:"center",gap:.75,px:1,py:.5,minHeight:32},children:[t&&o.jsx(j,{sx:{display:"flex",alignItems:"center",color:"var(--ov-fg-muted)",flexShrink:0},children:t}),o.jsxs(j,{sx:{minWidth:0,flex:1},children:[o.jsx(ce,{variant:"subtitle2",noWrap:!0,sx:{fontWeight:600,color:"var(--ov-fg-default)",fontSize:"0.75rem",lineHeight:1.2},children:e}),a&&o.jsx(ce,{variant:"caption",noWrap:!0,sx:{color:"var(--ov-fg-muted)",fontSize:"0.625rem",lineHeight:1.2,display:"block"},children:a})]}),u&&o.jsxs(j,{sx:{display:"flex",alignItems:"center",gap:.25,flexShrink:0},children:[i&&o.jsx(Ge.Select,{options:oe,value:re,onChange:ae,size:"xs"}),A,p,d&&o.jsx(me,{size:"small",onClick:()=>{s>0?te(M=>!M):d()},sx:{color:I?"var(--ov-accent)":"var(--ov-fg-muted)",p:.25},children:o.jsx(se.LuRefreshCw,{size:12})})]}),T&&o.jsxs(o.Fragment,{children:[o.jsx(me,{size:"small",onClick:M=>V(M.currentTarget),sx:{color:"var(--ov-fg-muted)",p:.25,flexShrink:0},children:o.jsx(se.LuEllipsisVertical,{size:13})}),o.jsx(He,{anchorEl:W,open:!!W,onClose:()=>V(null),anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{bgcolor:"var(--ov-bg-surface)",border:"1px solid var(--ov-border-subtle)",minWidth:140}}},children:k.map(M=>o.jsx(Ne,{onClick:()=>{V(null),M.onClick()},sx:{fontSize:"0.8125rem"},children:M.label},M.label))})]})]}),o.jsx(he,{series:r,timeRange:n,valueFormat:c,unit:m,valueFormatter:v,annotations:x,eventMarkers:y,area:f,colors:g,height:ee,loading:L,error:J,onRetry:G,skipAnimation:!0,yAxisPosition:D,xAxisPosition:b,margin:F,yAxisWidth:S,xAxisHeight:C,yAxisInline:q,yAxisInlinePosition:H,compact:!0,grid:!0})]})}ze.displayName="MetricsPanel";const ot={xs:120,sm:180,md:260,lg:360,xl:480};function we({series:e,capacity:t,timeRange:a,valueFormat:r="number",unit:n,valueFormatter:i,stacked:s=!0,colors:d,yAxisPosition:c="left",size:m="md",height:v,loading:x,error:y,onRetry:f,skipAnimation:h=!1,sx:g}){const p=K(),A=v??ot[m],k=l.useMemo(()=>N(d),[d]),D=l.useMemo(()=>i??B(r,n),[i,r,n]),b=e.length===0||e.every(C=>C.data.length===0),F=l.useMemo(()=>{for(const C of e)if(C.data.length>0)return C.data.map(q=>new Date(q.timestamp));return[]},[e]),S=l.useMemo(()=>e.map((C,q)=>({id:C.id,label:C.label,data:C.data.map(H=>H.value),color:C.color?$(C.color):k[q%k.length],area:!0,showMark:!1,stack:s?"total":void 0,valueFormatter:D})),[e,s,D,k]);return o.jsx(j,{sx:g,children:o.jsx(X,{loading:x,error:y,onRetry:f,empty:b,height:A,children:o.jsx(xe.LineChart,{height:A,series:S,xAxis:[{data:F,scaleType:"time",...a&&{min:a.from,max:a.to}}],yAxis:[{valueFormatter:D,position:c}],grid:{horizontal:!0},skipAnimation:h,hideLegend:!0,sx:{"& .MuiChartsAxis-line":{stroke:p.axisLineColor},"& .MuiChartsAxis-tick":{stroke:p.axisLineColor},"& .MuiChartsAxis-tickLabel":{fill:p.tooltipFg,fontSize:p.fontSize},"& .MuiChartsGrid-line":{stroke:p.gridColor},"& .MuiAreaElement-root":{opacity:p.areaOpacity}},children:t!=null&&o.jsx(ie.ChartsReferenceLine,{y:t,label:"Capacity",lineStyle:{stroke:$("danger"),strokeDasharray:"6 3"},labelStyle:{fill:p.tooltipFg,fontSize:p.fontSize}})})})})}we.displayName="StackedAreaChart";exports.BarChart=Me;exports.GaugeCard=$e;exports.MetricsPanel=ze;exports.PieChart=je;exports.ScatterChart=ke;exports.Sparkline=Ae;exports.StackedAreaChart=we;exports.TimeSeriesChart=he;exports.chartPalette=N;exports.formatBytes=pe;exports.formatDuration=ye;exports.formatNumber=Se;exports.formatPercent=ve;exports.formatRate=be;exports.formatSI=Ce;exports.formatTimeAxisTick=Re;exports.getValueFormatter=B;exports.resolveChartColor=$;exports.useChartTheme=K;