@nivo/legends
Version:
legend components for nivo dataviz library
3 lines (2 loc) • 16.2 kB
JavaScript
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{scaleLinear as i}from"d3-scale";import{getValueFormatter as n,degreesToRadians as o}from"@nivo/core";import{computeContinuousColorScaleColorStops as r}from"@nivo/colors";import*as l from"react";import{Fragment as a,useState as c,useCallback as s,useMemo as d}from"react";import{useTheme as h}from"@nivo/theming";import{Text as g,setCanvasFont as m,drawCanvasText as f}from"@nivo/text";var v=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l=e.opacity,a=void 0===l?1:l,c=e.borderWidth,s=void 0===c?0:c,d=e.borderColor;return t("circle",{r:o/2,cx:i+o/2,cy:n+o/2,fill:r,opacity:a,strokeWidth:s,stroke:void 0===d?"transparent":d,style:{pointerEvents:"none"}})},u=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l=e.opacity,a=void 0===l?1:l,c=e.borderWidth,s=void 0===c?0:c,d=e.borderColor;return t("g",{transform:"translate("+i+","+n+")",children:t("path",{d:"\n M"+o/2+" 0\n L"+.8*o+" "+o/2+"\n L"+o/2+" "+o+"\n L"+.2*o+" "+o/2+"\n L"+o/2+" 0\n ",fill:r,opacity:a,strokeWidth:s,stroke:void 0===d?"transparent":d,style:{pointerEvents:"none"}})})},p=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l=e.opacity,a=void 0===l?1:l,c=e.borderWidth,s=void 0===c?0:c,d=e.borderColor;return t("rect",{x:i,y:n,fill:r,opacity:a,strokeWidth:s,stroke:void 0===d?"transparent":d,width:o,height:o,style:{pointerEvents:"none"}})},y=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l=e.opacity,a=void 0===l?1:l,c=e.borderWidth,s=void 0===c?0:c,d=e.borderColor;return t("g",{transform:"translate("+i+","+n+")",children:t("path",{d:"\n M"+o/2+" 0\n L"+o+" "+o+"\n L0 "+o+"\n L"+o/2+" 0\n ",fill:r,opacity:a,strokeWidth:s,stroke:void 0===d?"transparent":d,style:{pointerEvents:"none"}})})};function b(){return b=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)({}).hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},b.apply(null,arguments)}var k={translateX:0,translateY:0,padding:0,itemsSpacing:0,itemDirection:"left-to-right",justify:!1,symbolShape:"square",symbolSize:16,symbolSpacing:8},x={length:200,thickness:16,direction:"row",tickPosition:"after",tickSize:4,tickSpacing:3,tickOverlap:!1,tickFormat:function(t){return""+t},titleAlign:"start",titleOffset:4},S={top:0,right:0,bottom:0,left:0},A=function(t){var e,i=t.direction,n=t.itemsSpacing,o=t.padding,r=t.itemCount,l=t.itemWidth,a=t.itemHeight;if("number"!=typeof o&&("object"!=typeof(e=o)||Array.isArray(e)||null===e))throw new Error("Invalid property padding, must be one of: number, object");var c="number"==typeof o?{top:o,right:o,bottom:o,left:o}:b({},S,o),s=c.left+c.right,d=c.top+c.bottom,h=l+s,g=a+d,m=(r-1)*n;return"row"===i?h=l*r+m+s:"column"===i&&(g=a*r+m+d),{width:h,height:g,padding:c}},C=function(t){var e=t.anchor,i=t.translateX,n=t.translateY,o=t.containerWidth,r=t.containerHeight,l=t.width,a=t.height,c=i,s=n;switch(e){case"top":c+=(o-l)/2;break;case"top-right":c+=o-l;break;case"right":c+=o-l,s+=(r-a)/2;break;case"bottom-right":c+=o-l,s+=r-a;break;case"bottom":c+=(o-l)/2,s+=r-a;break;case"bottom-left":s+=r-a;break;case"left":s+=(r-a)/2;break;case"center":c+=(o-l)/2,s+=(r-a)/2}return{x:c,y:s}},z=function(t){var e,i,n,o,r,l,a=t.direction,c=t.justify,s=t.symbolSize,d=t.symbolSpacing,h=t.width,g=t.height;switch(a){case"left-to-right":e=0,i=(g-s)/2,o=g/2,l="central",c?(n=h,r="end"):(n=s+d,r="start");break;case"right-to-left":e=h-s,i=(g-s)/2,o=g/2,l="central",c?(n=0,r="start"):(n=h-s-d,r="end");break;case"top-to-bottom":e=(h-s)/2,i=0,n=h/2,r="middle",c?(o=g,l="alphabetic"):(o=s+d,l="text-before-edge");break;case"bottom-to-top":e=(h-s)/2,i=g-s,n=h/2,r="middle",c?(o=0,l="text-before-edge"):(o=g-s-d,l="alphabetic")}return{symbolX:e,symbolY:i,labelX:n,labelY:o,labelAnchor:r,labelAlignment:l}},W=function(t){var e,o=t.scale,l=t.ticks,a=t.length,c=void 0===a?x.length:a,s=t.thickness,d=void 0===s?x.thickness:s,h=t.direction,g=void 0===h?x.direction:h,m=t.tickPosition,f=void 0===m?x.tickPosition:m,v=t.tickSize,u=void 0===v?x.tickSize:v,p=t.tickSpacing,y=void 0===p?x.tickSpacing:p,b=t.tickOverlap,k=void 0===b?x.tickOverlap:b,S=t.tickFormat,A=void 0===S?x.tickFormat:S,C=t.title,z=t.titleAlign,W=void 0===z?x.titleAlign:z,w=t.titleOffset,X=void 0===w?x.titleOffset:w,Y="column"===g?[].concat(o.domain()).reverse():o.domain(),O=i().domain(Y);2===Y.length?O.range([0,c]):3===Y.length&&O.range([0,c/2,c]),e="thresholds"in o?[Y[0]].concat(o.thresholds(),[Y[1]]):Array.isArray(l)?l:o.ticks(l);var B,H,E,j,L,M,P=r(o,32),F=n(A),T=[],V=0,D=0;if("row"===g){var R,q,G;B=c,H=d,D=1;var I;L=0,E="start"===W?0:"middle"===W?c/2:c,"before"===f?(R=-u,q=k?d:0,G=-u-y,I="alphabetic",j=d+X,M="hanging"):(R=k?0:d,G=(q=d+u)+y,I="hanging",j=-X,M="alphabetic"),e.forEach((function(t){var e=O(t);T.push({x1:e,y1:R,x2:e,y2:q,text:F(t),textX:e,textY:G,textHorizontalAlign:"middle",textVerticalAlign:I})}))}else{var _,J,K,N;B=d,H=c,V=1;L=-90,j="start"===W?c:"middle"===W?c/2:0,"before"===f?(J=k?d:0,K=(_=-u)-y,N="end",E=d+X,M="hanging"):(_=k?0:d,K=(J=d+u)+y,N="start",E=-X,M="alphabetic"),e.forEach((function(t){var e=O(t);T.push({x1:_,y1:e,x2:J,y2:e,text:F(t),textX:K,textY:e,textHorizontalAlign:N,textVerticalAlign:"central"})}))}return{width:B,height:H,gradientX1:0,gradientY1:V,gradientX2:D,gradientY2:0,colorStops:P,ticks:T,titleText:C,titleX:E,titleY:j,titleRotation:L,titleHorizontalAlign:W,titleVerticalAlign:M}},w=function(i){var n=i.scale,o=i.ticks,r=i.length,l=void 0===r?x.length:r,c=i.thickness,s=void 0===c?x.thickness:c,d=i.direction,m=void 0===d?x.direction:d,f=i.tickPosition,v=void 0===f?x.tickPosition:f,u=i.tickSize,p=void 0===u?x.tickSize:u,y=i.tickSpacing,b=void 0===y?x.tickSpacing:y,k=i.tickOverlap,S=void 0===k?x.tickOverlap:k,A=i.tickFormat,C=void 0===A?x.tickFormat:A,z=i.title,w=i.titleAlign,X=void 0===w?x.titleAlign:w,Y=i.titleOffset,O=W({scale:n,ticks:o,length:l,thickness:s,direction:m,tickPosition:v,tickSize:p,tickSpacing:b,tickOverlap:S,tickFormat:C,title:z,titleAlign:X,titleOffset:void 0===Y?x.titleOffset:Y}),B=O.width,H=O.height,E=O.gradientX1,j=O.gradientY1,L=O.gradientX2,M=O.gradientY2,P=O.ticks,F=O.colorStops,T=O.titleText,V=O.titleX,D=O.titleY,R=O.titleRotation,q=O.titleVerticalAlign,G=O.titleHorizontalAlign,I=h(),_="ContinuousColorsLegendSvgGradient."+m+"."+F.map((function(t){return t.stopColor.replace(/[(),\s]/g,"")+"."+t.offset})).join("_");return e("g",{children:[t("defs",{children:t("linearGradient",{id:_,x1:E,y1:j,x2:L,y2:M,children:F.map((function(e){return t("stop",{offset:e.offset,stopColor:e.stopColor},e.key)}))})}),T&&t("text",{transform:"translate("+V+", "+D+") rotate("+R+")",textAnchor:G,dominantBaseline:q,style:I.legends.title.text,children:T}),t("rect",{width:B,height:H,fill:"url(#"+_}),P.map((function(i,n){return e(a,{children:[t("line",{x1:i.x1,y1:i.y1,x2:i.x2,y2:i.y2,style:I.legends.ticks.line}),t(g,{x:i.textX,y:i.textY,textAnchor:i.textHorizontalAlign,dominantBaseline:i.textVerticalAlign,style:I.legends.ticks.text,children:i.text})]},n)}))]})},X=["containerWidth","containerHeight","anchor","translateX","translateY","length","thickness","direction"],Y=function(e){var i,n,o=e.containerWidth,r=e.containerHeight,l=e.anchor,a=e.translateX,c=void 0===a?0:a,s=e.translateY,d=void 0===s?0:s,h=e.length,g=void 0===h?x.length:h,m=e.thickness,f=void 0===m?x.thickness:m,v=e.direction,u=void 0===v?x.direction:v,p=function(t,e){if(null==t)return{};var i={};for(var n in t)if({}.hasOwnProperty.call(t,n)){if(-1!==e.indexOf(n))continue;i[n]=t[n]}return i}(e,X);"row"===u?(i=g,n=f):(i=f,n=g);var y=C({anchor:l,translateX:c,translateY:d,containerWidth:o,containerHeight:r,width:i,height:n}),k=y.x,S=y.y;return t("g",{transform:"translate("+k+", "+S+")",children:t(w,b({length:g,thickness:f,direction:u},p))})},O={circle:v,diamond:u,square:p,triangle:y},B=function(i){var n,o,r,a,d,m,f,v,u,p,y,x=i.x,S=i.y,A=i.width,C=i.height,W=i.data,w=i.direction,X=void 0===w?k.itemDirection:w,Y=i.justify,B=void 0===Y?k.justify:Y,H=i.textColor,E=i.background,j=void 0===E?"transparent":E,L=i.opacity,M=void 0===L?1:L,P=i.symbolShape,F=void 0===P?k.symbolShape:P,T=i.symbolSize,V=void 0===T?k.symbolSize:T,D=i.symbolSpacing,R=void 0===D?k.symbolSpacing:D,q=i.symbolBorderWidth,G=void 0===q?0:q,I=i.symbolBorderColor,_=void 0===I?"transparent":I,J=i.onClick,K=i.onMouseEnter,N=i.onMouseLeave,Q=i.toggleSerie,U=i.effects,Z=c({}),$=Z[0],tt=Z[1],et=h(),it=s((function(t){if(U){var e=U.filter((function(t){return"hover"===t.on})).reduce((function(t,e){return b({},t,e.style)}),{});tt(e)}null==K||K(W,t)}),[K,W,U]),nt=s((function(t){if(U){var e=U.filter((function(t){return"hover"!==t.on})).reduce((function(t,e){return b({},t,e.style)}),{});tt(e)}null==N||N(W,t)}),[N,W,U]),ot=z({direction:X,justify:B,symbolSize:null!=(n=$.symbolSize)?n:V,symbolSpacing:R,width:A,height:C}),rt=ot.symbolX,lt=ot.symbolY,at=ot.labelX,ct=ot.labelY,st=ot.labelAnchor,dt=ot.labelAlignment,ht=[J,K,N,Q].some((function(t){return void 0!==t})),gt="function"==typeof F?F:O[F];return e("g",{transform:"translate("+x+","+S+")",style:{opacity:null!=(o=$.itemOpacity)?o:M},children:[t("rect",{width:A,height:C,fill:null!=(r=$.itemBackground)?r:j,style:{cursor:ht?"pointer":"auto"},onClick:function(t){null==J||J(W,t),null==Q||Q(W.id)},onMouseEnter:it,onMouseLeave:nt}),l.createElement(gt,b({id:W.id,x:rt,y:lt,size:null!=(a=$.symbolSize)?a:V,fill:null!=(d=null!=(m=W.fill)?m:W.color)?d:"black",borderWidth:null!=(f=$.symbolBorderWidth)?f:G,borderColor:null!=(v=$.symbolBorderColor)?v:_},W.hidden?et.legends.hidden.symbol:void 0)),t(g,{textAnchor:st,style:b({},et.legends.text,{fill:null!=(u=null!=(p=null!=(y=$.itemTextColor)?y:H)?p:et.legends.text.fill)?u:"black",dominantBaseline:dt,pointerEvents:"none",userSelect:"none"},W.hidden?et.legends.hidden.text:void 0),x:at,y:ct,children:W.label})]})},H=function(e){var i=e.data,n=e.x,o=e.y,r=e.direction,l=e.padding,a=void 0===l?k.padding:l,c=e.justify,s=e.effects,d=e.itemWidth,h=e.itemHeight,g=e.itemDirection,m=void 0===g?k.itemDirection:g,f=e.itemsSpacing,v=void 0===f?k.itemsSpacing:f,u=e.itemTextColor,p=e.itemBackground,y=void 0===p?"transparent":p,b=e.itemOpacity,x=void 0===b?1:b,S=e.symbolShape,C=e.symbolSize,z=e.symbolSpacing,W=e.symbolBorderWidth,w=e.symbolBorderColor,X=e.onClick,Y=e.onMouseEnter,O=e.onMouseLeave,H=e.toggleSerie,E=A({itemCount:i.length,itemWidth:d,itemHeight:h,itemsSpacing:v,direction:r,padding:a}).padding,j="row"===r?d+v:0,L="column"===r?h+v:0;return t("g",{transform:"translate("+n+","+o+")",children:i.map((function(e,i){return t(B,{data:e,x:i*j+E.left,y:i*L+E.top,width:d,height:h,direction:m,justify:c,effects:s,textColor:u,background:y,opacity:x,symbolShape:S,symbolSize:C,symbolSpacing:z,symbolBorderWidth:W,symbolBorderColor:w,onClick:X,onMouseEnter:Y,onMouseLeave:O,toggleSerie:H},i)}))})},E=function(e){var i=e.data,n=e.containerWidth,o=e.containerHeight,r=e.translateX,l=void 0===r?k.translateX:r,a=e.translateY,c=void 0===a?k.translateY:a,s=e.anchor,d=e.direction,h=e.padding,g=void 0===h?k.padding:h,m=e.justify,f=e.itemsSpacing,v=void 0===f?k.itemsSpacing:f,u=e.itemWidth,p=e.itemHeight,y=e.itemDirection,b=e.itemTextColor,x=e.itemBackground,S=e.itemOpacity,z=e.symbolShape,W=e.symbolSize,w=e.symbolSpacing,X=e.symbolBorderWidth,Y=e.symbolBorderColor,O=e.onClick,B=e.onMouseEnter,E=e.onMouseLeave,j=e.toggleSerie,L=e.effects,M=A({itemCount:i.length,itemsSpacing:v,itemWidth:u,itemHeight:p,direction:d,padding:g}),P=M.width,F=M.height,T=C({anchor:s,translateX:l,translateY:c,containerWidth:n,containerHeight:o,width:P,height:F}),V=T.x,D=T.y;return t(H,{data:i,x:V,y:D,direction:d,padding:g,justify:m,effects:L,itemsSpacing:v,itemWidth:u,itemHeight:p,itemDirection:y,itemTextColor:b,itemBackground:x,itemOpacity:S,symbolShape:z,symbolSize:W,symbolSpacing:w,symbolBorderWidth:X,symbolBorderColor:Y,onClick:O,onMouseEnter:B,onMouseLeave:E,toggleSerie:"boolean"==typeof j?void 0:j})},j={start:"left",middle:"center",end:"right"},L=function(t,e){var i=e.data,n=e.containerWidth,o=e.containerHeight,r=e.translateX,l=void 0===r?0:r,a=e.translateY,c=void 0===a?0:a,s=e.anchor,d=e.direction,h=e.padding,g=void 0===h?0:h,v=e.justify,u=void 0!==v&&v,p=e.itemsSpacing,y=void 0===p?0:p,k=e.itemWidth,x=e.itemHeight,S=e.itemDirection,W=void 0===S?"left-to-right":S,w=e.itemTextColor,X=e.symbolSize,Y=void 0===X?16:X,O=e.symbolSpacing,B=void 0===O?8:O,H=e.theme,E=A({itemCount:i.length,itemWidth:k,itemHeight:x,itemsSpacing:y,direction:d,padding:g}),L=E.width,M=E.height,P=E.padding,F=C({anchor:s,translateX:l,translateY:c,containerWidth:n,containerHeight:o,width:L,height:M}),T=F.x,V=F.y,D="row"===d?k+y:0,R="column"===d?x+y:0;t.save(),t.translate(T,V),m(t,H.legends.text),i.forEach((function(e,i){var n,o=i*D+P.left,r=i*R+P.top,l=z({direction:W,justify:u,symbolSize:Y,symbolSpacing:B,width:k,height:x}),a=l.symbolX,c=l.symbolY,s=l.labelX,d=l.labelY,h=l.labelAnchor,g=l.labelAlignment;t.fillStyle=null!=(n=e.color)?n:"black",t.fillRect(o+a,r+c,Y,Y),t.textAlign=j[h],"central"===g&&(t.textBaseline="middle"),f(t,b({},H.legends.text,{fill:null!=w?w:H.legends.text.fill}),String(e.label),o+s,r+d)})),t.restore()},M=function(t,e){var i,n=e.containerWidth,r=e.containerHeight,l=e.anchor,a=e.translateX,c=void 0===a?0:a,s=e.translateY,d=void 0===s?0:s,h=e.scale,g=e.length,v=void 0===g?x.length:g,u=e.thickness,p=void 0===u?x.thickness:u,y=e.direction,b=void 0===y?x.direction:y,k=e.ticks,S=e.tickPosition,A=void 0===S?x.tickPosition:S,z=e.tickSize,w=void 0===z?x.tickSize:z,X=e.tickSpacing,Y=void 0===X?x.tickSpacing:X,O=e.tickOverlap,B=void 0===O?x.tickOverlap:O,H=e.tickFormat,E=void 0===H?x.tickFormat:H,j=e.title,L=e.titleAlign,M=void 0===L?x.titleAlign:L,P=e.titleOffset,F=void 0===P?x.titleOffset:P,T=e.theme,V=W({scale:h,ticks:k,length:v,thickness:p,direction:b,tickPosition:A,tickSize:w,tickSpacing:Y,tickOverlap:B,tickFormat:E,title:j,titleAlign:M,titleOffset:F}),D=V.width,R=V.height,q=V.gradientX1,G=V.gradientY1,I=V.gradientX2,_=V.gradientY2,J=V.colorStops,K=V.ticks,N=V.titleText,Q=V.titleX,U=V.titleY,Z=V.titleRotation,$=V.titleVerticalAlign,tt=V.titleHorizontalAlign,et=C({anchor:l,translateX:c,translateY:d,containerWidth:n,containerHeight:r,width:D,height:R}),it=et.x,nt=et.y,ot={font:t.font,textAlign:t.textAlign,textBaseline:t.textBaseline};t.save(),t.translate(it,nt);var rt=t.createLinearGradient(q*D,G*R,I*D,_*R);J.forEach((function(t){rt.addColorStop(t.offset,t.stopColor)})),t.fillStyle=rt,t.fillRect(0,0,D,R),m(t,T.legends.ticks.text);var lt=null!=(i=T.legends.ticks.line.strokeWidth)?i:0,at="string"!=typeof lt&<>0;K.forEach((function(e){at&&(t.lineWidth=lt,T.axis.ticks.line.stroke&&(t.strokeStyle=T.axis.ticks.line.stroke),t.lineCap="square",t.beginPath(),t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.stroke()),t.textAlign="middle"===e.textHorizontalAlign?"center":e.textHorizontalAlign,t.textBaseline="central"===e.textVerticalAlign?"middle":e.textVerticalAlign,f(t,T.legends.ticks.text,e.text,e.textX,e.textY)})),N&&(t.save(),t.translate(Q,U),t.rotate(o(Z)),m(t,T.legends.title.text),t.textAlign="middle"===tt?"center":tt,t.textBaseline=$,f(t,T.legends.title.text,N),t.restore()),t.restore(),t.font=ot.font,t.textAlign=ot.textAlign,t.textBaseline=ot.textBaseline},P=function(t){var e=t.scale,i=t.domain,n=t.reverse,o=void 0!==n&&n,r=t.valueFormat,l=void 0===r?function(t){return t}:r,a=t.separator,c=void 0===a?" - ":a;return d((function(){var t=(null!=i?i:e.range()).map((function(t,i){var n=e.invertExtent(t),o=n[0],r=n[1];return{id:t,index:i,extent:[o,r],label:""+l(o)+c+l(r),value:e(o),color:t}}));return o&&t.reverse(),t}),[i,e,o,c,l])};export{Y as AnchoredContinuousColorsLegendSvg,E as BoxLegendSvg,w as ContinuousColorsLegendSvg,H as LegendSvg,B as LegendSvgItem,v as SymbolCircle,u as SymbolDiamond,p as SymbolSquare,y as SymbolTriangle,W as computeContinuousColorsLegend,A as computeDimensions,z as computeItemLayout,C as computePositionFromAnchor,x as continuousColorsLegendDefaults,k as legendDefaults,M as renderContinuousColorLegendToCanvas,L as renderLegendToCanvas,P as useQuantizeColorScaleLegendData};
//# sourceMappingURL=nivo-legends.mjs.map