UNPKG

@nivo/radar

Version:
3 lines (2 loc) 12.5 kB
import{useMemo as e,createElement as r,memo as t,useState as n,useCallback as o,forwardRef as i,Fragment as a}from"react";import{useMotionConfig as l,useAnimatedPath as d,positionFromAngle as u,radiansToDegrees as c,usePropertyAccessor as s,DotsItem as f,useValueFormatter as m,degreesToRadians as g,bindDefs as v,useCurveInterpolation as y,Container as h,useDimensions as p,SvgWrapper as b,ResponsiveWrapper as x}from"@nivo/core";import{BoxLegendSvg as k}from"@nivo/legends";import{useSpring as B,animated as L,useSprings as S,to as C}from"@react-spring/web";import{lineRadial as O,curveLinearClosed as W,arc as I}from"d3-shape";import{useTheme as M}from"@nivo/theming";import{useInheritedColor as K,getInheritedColorGenerator as V,useOrdinalColorScale as D}from"@nivo/colors";import{jsx as w,Fragment as Y,jsxs as z}from"react/jsx-runtime";import{useTooltip as A,Chip as F,TableTooltip as R}from"@nivo/tooltip";import{Text as P}from"@nivo/text";import{scaleLinear as X}from"d3-scale";function H(){return H=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},H.apply(null,arguments)}function T(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}var j=function(r){var t,n=r.data,o=r.item,i=r.colorByKey,a=r.fillByKey,u=r.radiusScale,c=r.rotation,s=r.angleStep,f=r.curveFactory,m=r.borderWidth,g=r.borderColor,v=r.fillOpacity,y=r.blendMode,h=M(),p=K(g,h),b=e((function(){return O().radius((function(e){return u(e)})).angle((function(e,r){return c+r*s})).curve(f)}),[u,c,s,f]),x=l(),k=x.animate,S=x.config,C=d(b(n.map((function(e){return e[o]})))),W=B({fill:i[o],stroke:p({key:o,color:i[o]}),config:S,immediate:!k}),I=null!=(t=a[o])?t:W.fill;return w(L.path,{d:C,fill:I,fillOpacity:v,stroke:W.stroke,strokeWidth:m,style:{mixBlendMode:y}},o)},E=function(e){var t=e.radius,n=e.angles,o=e.indices,i=e.label,a=e.labelOffset,d=l(),s=d.animate,f=d.config,m=o.map((function(e,r){var o,i,l=u(n[r],t+a),d=(o=n[r],(i=c(o)+90)<=10||i>=350||i>=170&&i<=190?"middle":i>180?"end":"start");return H({id:e,angle:c(n[r]),anchor:d},l)})),g=S(m.length,m.map((function(e){return{transform:"translate("+e.x+", "+e.y+")",config:f,immediate:!s}})));return w(Y,{children:g.map((function(e,t){var n=m[t];return r(i,{key:n.id,id:n.id,anchor:n.anchor,angle:n.angle,x:n.x,y:n.y,animated:e})}))})},G=["shape"],q=t((function(e){var r=e.radius,t=M(),n=l(),o=n.animate,i=n.config,a=B({radius:r,config:i,immediate:!o});return w(L.circle,H({fill:"none",r:C(a.radius,(function(e){return Math.max(e,0)}))},t.grid.line))})),J=function(r){var t=r.radius,n=r.rotation,o=r.angleStep,i=r.dataLength,a=M(),l=e((function(){return O().angle((function(e){return n+e*o})).radius(t).curve(W)}),[n,o,t]),u=Array.from({length:i},(function(e,r){return r})),c=d(l(u));return w(L.path,H({fill:"none",d:c},a.grid.line))},N=function(e){var r=e.shape,t=T(e,G);return"circular"===r?w(q,{radius:t.radius}):w(J,H({},t))},Q=function(r){var t=r.indices,n=r.levels,o=r.shape,i=r.radius,a=r.rotation,l=r.angleStep,d=r.label,c=r.labelOffset,s=M(),f=e((function(){return{radii:Array.from({length:n}).map((function(e,r){return i/n*(r+1)})).reverse(),angles:Array.from({length:t.length}).map((function(e,r){return a+r*l-Math.PI/2}))}}),[t,n,i,a,l]),m=f.radii,g=f.angles;return z(Y,{children:[g.map((function(e,r){var t=u(e,i);return w("line",H({x1:0,y1:0,x2:t.x,y2:t.y},s.grid.line),"axis."+r)})),m.map((function(e,r){return w(N,{shape:o,radius:e,rotation:a,angleStep:l,dataLength:t.length},"level."+r)})),w(E,{radius:i,angles:g,indices:t,labelOffset:c,label:d})]})},U=function(t){var i=t.datum,a=t.keys,l=t.index,d=t.formatValue,c=t.colorByKey,s=t.radius,f=t.startAngle,m=t.endAngle,g=t.arcGenerator,v=t.tooltip,y=t.onClick,h=n(!1),p=h[0],b=h[1],x=M(),k=A(),B=k.showTooltipFromEvent,L=k.hideTooltip,S=o((function(e){return null==y?void 0:y(i,e)}),[y,i]),C=e((function(){var e=a.map((function(e){return{color:c[e],id:e,value:i[e],formattedValue:d(i[e],e)}}));return e.sort((function(e,r){return e.value-r.value})),e.reverse(),e}),[i,a,d,c]),O=o((function(e){b(!0),B(r(v,{index:l,data:C}),e)}),[B,v,l,C]),W=o((function(){b(!1),L()}),[L,b]),I=e((function(){var e=u(f+.5*(m-f)-Math.PI/2,s);return{path:g({startAngle:f,endAngle:m}),tipX:e.x,tipY:e.y}}),[f,m,s,g]),K=I.path,V=I.tipX,D=I.tipY;return z(Y,{children:[p&&w("line",{x1:0,y1:0,x2:V,y2:D,style:x.crosshair.line}),w("path",{d:K,fill:"#F00",fillOpacity:0,onMouseEnter:O,onMouseMove:O,onMouseLeave:W,onClick:S})]})},Z=function(e){var r=e.data,t=e.keys,n=e.getIndex,o=e.formatValue,i=e.colorByKey,a=e.radius,l=e.rotation,d=e.angleStep,u=e.tooltip,c=e.onClick,s=I().outerRadius(a).innerRadius(0),f=l-.5*d;return w(Y,{children:r.map((function(e){var r=n(e),l=f;return f+=d,w(U,{datum:e,keys:t,index:r,formatValue:o,colorByKey:i,startAngle:l,endAngle:l+d,radius:a,arcGenerator:s,tooltip:u,onClick:c},r)}))})},$=function(r){var t=r.data,n=r.keys,o=r.getIndex,i=r.colorByKey,a=r.radiusScale,l=r.rotation,d=r.angleStep,c=r.symbol,m=r.size,g=void 0===m?6:m,v=r.color,y=void 0===v?{from:"color"}:v,h=r.borderWidth,p=void 0===h?0:h,b=r.borderColor,x=void 0===b?{from:"color"}:b,k=r.enableLabel,B=void 0!==k&&k,L=r.label,S=void 0===L?"value":L,C=r.formatValue,O=r.labelYOffset,W=M(),I=V(y,W),K=V(x,W),D=s(S),z=e((function(){return t.reduce((function(e,r,t){var c=o(r);return n.forEach((function(n){var o=r[n],s={index:c,key:n,value:o,formattedValue:C(o,n),color:i[n]};e.push({key:n+"."+c,label:B?D(s):void 0,style:H({fill:I(s),stroke:K(s)},u(l+d*t-Math.PI/2,a(r[n]))),data:s})})),e}),[])}),[t,n,o,i,B,D,C,I,K,l,d,a]);return w(Y,{children:z.map((function(e){return w(f,{x:e.style.x,y:e.style.y,symbol:c,size:g,color:e.style.fill,borderWidth:p,borderColor:e.style.stroke,label:e.label,labelYOffset:O,datum:e.data},e.key)}))})},_={layers:["grid","layers","slices","dots","legends"],maxValue:"auto",rotation:0,curve:"linearClosed",borderWidth:2,borderColor:{from:"color"},gridLevels:5,gridShape:"circular",gridLabelOffset:16,gridLabel:function(e){var r=e.id,t=e.anchor,n=e.animated,o=M();return w(L.g,{transform:n.transform,children:w(P,{style:o.axis.ticks.text,dominantBaseline:"central",textAnchor:t,children:r})})},enableDots:!0,dotSize:6,dotColor:{from:"color"},dotBorderWidth:0,dotBorderColor:{from:"color"},enableDotLabel:!1,dotLabel:"formattedValue",dotLabelYOffset:-12,colors:{scheme:"nivo"},fillOpacity:.25,blendMode:"normal",isInteractive:!0,sliceTooltip:function(r){var t=r.index,n=r.data,o=e((function(){return n.map((function(e){return[w(F,{color:e.color},e.id),e.id,e.formattedValue]}))}),[n]);return w(R,{title:w("strong",{children:t}),rows:o})},legends:[],role:"img",animate:!0,motionConfig:"gentle",defs:[],fill:[]},ee=["data"],re=["isInteractive","animate","motionConfig","theme","renderWrapper"],te=function(t){var n=t.data,o=t.keys,i=t.indexBy,l=t.layers,d=void 0===l?_.layers:l,u=t.rotation,c=void 0===u?_.rotation:u,f=t.maxValue,h=void 0===f?_.maxValue:f,x=t.valueFormat,B=t.curve,L=void 0===B?_.curve:B,S=t.margin,C=t.width,O=t.height,W=t.borderWidth,I=void 0===W?_.borderWidth:W,M=t.borderColor,K=void 0===M?_.borderColor:M,V=t.gridLevels,Y=void 0===V?_.gridLevels:V,z=t.gridShape,A=void 0===z?_.gridShape:z,F=t.gridLabel,R=void 0===F?_.gridLabel:F,P=t.gridLabelOffset,E=void 0===P?_.gridLabelOffset:P,G=t.enableDots,q=void 0===G?_.enableDots:G,J=t.dotSymbol,N=t.dotSize,U=void 0===N?_.dotSize:N,re=t.dotColor,te=void 0===re?_.dotColor:re,ne=t.dotBorderWidth,oe=void 0===ne?_.dotBorderWidth:ne,ie=t.dotBorderColor,ae=void 0===ie?_.dotBorderColor:ie,le=t.enableDotLabel,de=void 0===le?_.enableDotLabel:le,ue=t.dotLabel,ce=void 0===ue?_.dotLabel:ue,se=t.dotLabelYOffset,fe=void 0===se?_.dotLabelYOffset:se,me=t.colors,ge=void 0===me?_.colors:me,ve=t.fillOpacity,ye=void 0===ve?_.fillOpacity:ve,he=t.blendMode,pe=void 0===he?_.blendMode:he,be=t.isInteractive,xe=void 0===be?_.isInteractive:be,ke=t.sliceTooltip,Be=void 0===ke?_.sliceTooltip:ke,Le=t.legends,Se=void 0===Le?_.legends:Le,Ce=t.role,Oe=t.ariaLabel,We=t.ariaLabelledBy,Ie=t.ariaDescribedBy,Me=t.defs,Ke=void 0===Me?_.defs:Me,Ve=t.fill,De=void 0===Ve?_.fill:Ve,we=t.onClick,Ye=t.forwardedRef,ze=p(C,O,S),Ae=ze.margin,Fe=ze.innerWidth,Re=ze.innerHeight,Pe=ze.outerWidth,Xe=ze.outerHeight,He=function(r){var t=r.data,n=r.keys,o=r.indexBy,i=r.rotationDegrees,a=r.maxValue,l=r.valueFormat,d=r.curve,u=r.width,c=r.height,f=r.colors,h=void 0===f?_.colors:f,p=r.legends,b=r.defs,x=r.fill,k=s(o),B=e((function(){return t.map(k)}),[t,k]),L=m(l),S=g(i),C=D(h,"key"),O=e((function(){return n.reduce((function(e,r,t){return e[r]=C({key:r,index:t}),e}),{})}),[n,C]),W=e((function(){var e=n.map((function(e){return{key:e,color:O[e],data:t,fill:null}})),r=v(b,e,x),o=e.reduce((function(e,r){var t=r.key,n=r.fill;return e[t]=n,e}),{});return{boundDefs:r,fillByKey:o}}),[n,t,b,x,O]),I=W.boundDefs,M=W.fillByKey,K=e((function(){var e=t.reduce((function(e,r){return[].concat(e,n.map((function(e){return r[e]})))}),[]),r="auto"!==a?a:Math.max.apply(Math,e),o=Math.min(u,c)/2;return{radius:o,radiusScale:X().range([0,o]).domain([0,r]),centerX:u/2,centerY:c/2,angleStep:2*Math.PI/t.length}}),[n,t,a,u,c]),V=K.radius,w=K.radiusScale,Y=K.centerX,z=K.centerY,A=K.angleStep,F=y(d),R=e((function(){return{data:t,keys:n,indices:B,colorByKey:O,centerX:Y,centerY:z,radiusScale:w,angleStep:A}}),[t,n,B,O,Y,z,w,A]),P=e((function(){return n.map((function(e){return{id:e,label:e,color:O[e]}}))}),[n,O]),j=e((function(){return p.map((function(e){var r=e.data,t=T(e,ee),n=null==r?void 0:r.map((function(e){return H({},P.find((function(r){return r.id===e.id}))||{},e)}));return H({},t,{data:n||P})}))}),[p,P]);return{getIndex:k,indices:B,formatValue:L,colorByKey:O,fillByKey:M,boundDefs:I,rotation:S,radius:V,radiusScale:w,centerX:Y,centerY:z,angleStep:A,curveFactory:F,legendData:P,boundLegends:j,customLayerProps:R}}({data:n,keys:o,indexBy:i,rotationDegrees:c,maxValue:h,valueFormat:x,curve:L,width:Fe,height:Re,colors:ge,legends:Se,defs:Ke,fill:De}),Te=He.getIndex,je=He.indices,Ee=He.formatValue,Ge=He.colorByKey,qe=He.fillByKey,Je=He.boundDefs,Ne=He.rotation,Qe=He.radius,Ue=He.radiusScale,Ze=He.centerX,$e=He.centerY,_e=He.angleStep,er=He.curveFactory,rr=He.boundLegends,tr=He.customLayerProps,nr={grid:null,layers:null,slices:null,dots:null,legends:null};return d.includes("grid")&&(nr.grid=w("g",{transform:"translate("+Ze+", "+$e+")",children:w(Q,{levels:Y,shape:A,radius:Qe,rotation:Ne,angleStep:_e,indices:je,label:R,labelOffset:E})},"grid")),d.includes("layers")&&(nr.layers=w("g",{transform:"translate("+Ze+", "+$e+")",children:o.map((function(e){return w(j,{data:n,item:e,colorByKey:Ge,fillByKey:qe,radiusScale:Ue,rotation:Ne,angleStep:_e,curveFactory:er,borderWidth:I,borderColor:K,fillOpacity:ye,blendMode:pe},e)}))},"layers")),d.includes("slices")&&xe&&(nr.slices=w("g",{transform:"translate("+Ze+", "+$e+")",children:w(Z,{data:n,keys:o,getIndex:Te,formatValue:Ee,colorByKey:Ge,radius:Qe,rotation:Ne,angleStep:_e,tooltip:Be,onClick:we})},"slices")),d.includes("dots")&&q&&(nr.dots=w("g",{transform:"translate("+Ze+", "+$e+")",children:w($,{data:n,keys:o,getIndex:Te,radiusScale:Ue,rotation:Ne,angleStep:_e,symbol:J,size:U,colorByKey:Ge,color:te,borderWidth:oe,borderColor:ae,enableLabel:de,label:ce,formatValue:Ee,labelYOffset:fe})},"dots")),d.includes("legends")&&(nr.legends=w(a,{children:rr.map((function(e,r){return w(k,H({},e,{containerWidth:C,containerHeight:O}),r)}))},"legends")),w(b,{defs:Je,width:Pe,height:Xe,margin:Ae,role:Ce,ariaLabel:Oe,ariaLabelledBy:We,ariaDescribedBy:Ie,ref:Ye,children:d.map((function(e,t){var n;return"function"==typeof e?w(a,{children:r(e,tr)},t):null!=(n=null==nr?void 0:nr[e])?n:null}))})},ne=i((function(e,r){var t=e.isInteractive,n=void 0===t?_.isInteractive:t,o=e.animate,i=void 0===o?_.animate:o,a=e.motionConfig,l=void 0===a?_.motionConfig:a,d=e.theme,u=e.renderWrapper,c=T(e,re);return w(h,{animate:i,isInteractive:n,motionConfig:l,renderWrapper:u,theme:d,children:w(te,H({isInteractive:n},c,{forwardedRef:r}))})})),oe=["defaultWidth","defaultHeight","onResize","debounceResize"],ie=i((function(e,r){var t=e.defaultWidth,n=e.defaultHeight,o=e.onResize,i=e.debounceResize,a=T(e,oe);return w(x,{defaultWidth:t,defaultHeight:n,onResize:o,debounceResize:i,children:function(e){var t=e.width,n=e.height;return w(ne,H({},a,{width:t,height:n,ref:r}))}})}));export{ne as Radar,$ as RadarDots,ie as ResponsiveRadar,_ as svgDefaultProps}; //# sourceMappingURL=nivo-radar.mjs.map