UNPKG

@nivo/legends

Version:

legend components for nivo dataviz library

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