ranui/dist/diagram-WEI45ONY-XvzRFmmY.cjs

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

const T=require("./mermaid-parser.core-DYumW1vq.cjs"),c=require("./chunk-Y2CYZVJY-DPaYLFFP.cjs"),k=require("./src-C9EhKhbk.cjs"),m=require("./chunk-WYO6CB5R-u4mJNOcO.cjs"),y=require("./chunk-ICXQ74PX-BbT9JaEW.cjs"),O=require("./chunk-VAUOI2AC-DfQf5L2_.cjs"),S=require("./chunk-JWPE2WC7-D8EnWK1B.cjs");var x={showLegend:!0,ticks:5,max:null,min:0,graticule:"circle"},f={axes:[],curves:[],options:x},h=structuredClone(f),q=m.defaultConfig_default.radar,D=c.__name(()=>y.cleanAndMerge({...q,...m.getConfig().radar}),"getConfig"),A=c.__name(()=>h.axes,"getAxes"),I=c.__name(()=>h.curves,"getCurves"),R=c.__name(()=>h.options,"getOptions"),E=c.__name(a=>{h.axes=a.map(e=>({name:e.name,label:e.label??e.name}))},"setAxes"),F=c.__name(a=>{h.curves=a.map(e=>({name:e.name,label:e.label??e.name,entries:P(e.entries)}))},"setCurves"),P=c.__name(a=>{if(a[0].axis==null)return a.map(t=>t.value);const e=A();if(e.length===0)throw new Error("Axes must be populated before curves for reference entries");return e.map(t=>{const r=a.find(n=>n.axis?.$refText===t.name);if(r===void 0)throw new Error("Missing entry for axis "+t.label);return r.value})},"computeCurveEntries"),_={getAxes:A,getCurves:I,getOptions:R,setAxes:E,setCurves:F,setOptions:c.__name(a=>{const e=a.reduce((t,r)=>(t[r.name]=r,t),{});h.options={showLegend:e.showLegend?.value??x.showLegend,ticks:e.ticks?.value??x.ticks,max:e.max?.value??x.max,min:e.min?.value??x.min,graticule:e.graticule?.value??x.graticule}},"setOptions"),getConfig:D,clear:c.__name(()=>{m.clear(),h=structuredClone(f)},"clear"),setAccTitle:m.setAccTitle,getAccTitle:m.getAccTitle,setDiagramTitle:m.setDiagramTitle,getDiagramTitle:m.getDiagramTitle,getAccDescription:m.getAccDescription,setAccDescription:m.setAccDescription},W=c.__name(a=>{S.populateCommonDb(a,_);const{axes:e,curves:t,options:r}=a;_.setAxes(e),_.setCurves(t),_.setOptions(r)},"populate"),z={parse:c.__name(async a=>{const e=await T.parse("radar",a);k.log.debug(e),W(e)},"parse")},G=c.__name((a,e,t,r)=>{const n=r.db,o=n.getAxes(),l=n.getCurves(),s=n.getOptions(),i=n.getConfig(),d=n.getDiagramTitle(),u=B(O.selectSvgElement(e),i),g=s.max??Math.max(...l.map($=>Math.max(...$.entries))),p=s.min,v=Math.min(i.width,i.height)/2;Y(u,o,v,s.ticks,s.graticule),V(u,o,v,i),w(u,o,l,p,g,s.graticule,i),L(u,l,s.showLegend,i),u.append("text").attr("class","radarTitle").text(d).attr("x",0).attr("y",-i.height/2-i.marginTop)},"draw"),B=c.__name((a,e)=>{const t=e.width+e.marginLeft+e.marginRight,r=e.height+e.marginTop+e.marginBottom,n={x:e.marginLeft+e.width/2,y:e.marginTop+e.height/2};return m.configureSvgSize(a,r,t,e.useMaxWidth??!0),a.attr("viewBox",`0 0 ${t} ${r}`).attr("overflow","visible"),a.append("g").attr("transform",`translate(${n.x}, ${n.y})`)},"drawFrame"),Y=c.__name((a,e,t,r,n)=>{if(n==="circle")for(let o=0;o<r;o++){const l=t*(o+1)/r;a.append("circle").attr("r",l).attr("class","radarGraticule")}else if(n==="polygon"){const o=e.length;for(let l=0;l<r;l++){const s=t*(l+1)/r,i=e.map((d,u)=>{const g=2*u*Math.PI/o-Math.PI/2;return`${s*Math.cos(g)},${s*Math.sin(g)}`}).join(" ");a.append("polygon").attr("points",i).attr("class","radarGraticule")}}},"drawGraticule"),V=c.__name((a,e,t,r)=>{const n=e.length;for(let o=0;o<n;o++){const l=e[o].label,s=2*o*Math.PI/n-Math.PI/2,i=Math.cos(s),d=Math.sin(s);a.append("line").attr("x1",0).attr("y1",0).attr("x2",t*r.axisScaleFactor*i).attr("y2",t*r.axisScaleFactor*d).attr("class","radarAxisLine");const u=i>.01?"start":i<-.01?"end":"middle",g=d>.01?"hanging":d<-.01?"auto":"central",p=4;a.append("text").text(l).attr("x",t*r.axisLabelFactor*i+p*i).attr("y",t*r.axisLabelFactor*d+p*d).attr("text-anchor",u).attr("dominant-baseline",g).attr("class","radarAxisLabel")}},"drawAxes");function w(a,e,t,r,n,o,l){const s=e.length,i=Math.min(l.width,l.height)/2;t.forEach((d,u)=>{if(d.entries.length!==s)return;const g=d.entries.map((p,v)=>{const $=2*Math.PI*v/s-Math.PI/2,C=b(p,r,n,i);return{x:C*Math.cos($),y:C*Math.sin($)}});o==="circle"?a.append("path").attr("d",M(g,l.curveTension)).attr("class",`radarCurve-${u}`):o==="polygon"&&a.append("polygon").attr("points",g.map(p=>`${p.x},${p.y}`).join(" ")).attr("class",`radarCurve-${u}`)})}c.__name(w,"drawCurves");function b(a,e,t,r){return r*(Math.min(Math.max(a,e),t)-e)/(t-e)}c.__name(b,"relativeRadius");function M(a,e){const t=a.length;let r=`M${a[0].x},${a[0].y}`;for(let n=0;n<t;n++){const o=a[(n-1+t)%t],l=a[n],s=a[(n+1)%t],i=a[(n+2)%t],d={x:l.x+(s.x-o.x)*e,y:l.y+(s.y-o.y)*e},u={x:s.x-(i.x-l.x)*e,y:s.y-(i.y-l.y)*e};r+=` C${d.x},${d.y} ${u.x},${u.y} ${s.x},${s.y}`}return`${r} Z`}c.__name(M,"closedRoundCurve");function L(a,e,t,r){if(!t)return;const n=(r.width/2+r.marginRight)*3/4,o=-(r.height/2+r.marginTop)*3/4,l=20;e.forEach((s,i)=>{const d=a.append("g").attr("transform",`translate(${n}, ${o+i*l})`);d.append("rect").attr("width",12).attr("height",12).attr("class",`radarLegendBox-${i}`),d.append("text").attr("x",16).attr("y",0).attr("class","radarLegendText").text(s.label)})}c.__name(L,"drawLegend");var H={draw:G},X=c.__name((a,e)=>{let t="";for(let r=0;r<a.THEME_COLOR_LIMIT;r++){const n=a[`cScale${r}`];t+=`
		.radarCurve-${r} {
			color: ${n};
			fill: ${n};
			fill-opacity: ${e.curveOpacity};
			stroke: ${n};
			stroke-width: ${e.curveStrokeWidth};
		}
		.radarLegendBox-${r} {
			fill: ${n};
			fill-opacity: ${e.curveOpacity};
			stroke: ${n};
		}
		`}return t},"genIndexStyles"),j=c.__name(a=>{const e=y.cleanAndMerge(m.getThemeVariables3(),m.getConfig().themeVariables);return{themeVariables:e,radarOptions:y.cleanAndMerge(e.radar,a)}},"buildRadarStyleOptions"),J={parser:z,db:_,renderer:H,styles:c.__name(({radar:a}={})=>{const{themeVariables:e,radarOptions:t}=j(a);return`
	.radarTitle {
		font-size: ${e.fontSize};
		color: ${e.titleColor};
		dominant-baseline: hanging;
		text-anchor: middle;
	}
	.radarAxisLine {
		stroke: ${t.axisColor};
		stroke-width: ${t.axisStrokeWidth};
	}
	.radarAxisLabel {
		font-size: ${t.axisLabelFontSize}px;
		color: ${t.axisColor};
	}
	.radarGraticule {
		fill: ${t.graticuleColor};
		fill-opacity: ${t.graticuleOpacity};
		stroke: ${t.graticuleColor};
		stroke-width: ${t.graticuleStrokeWidth};
	}
	.radarLegendText {
		text-anchor: start;
		font-size: ${t.legendFontSize}px;
		dominant-baseline: hanging;
	}
	${X(e,t)}
	`},"styles")};exports.diagram=J;