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