UNPKG

@nivo/funnel

Version:
3 lines (2 loc) 14.4 kB
import{useMemo as r,useState as e,createElement as t,forwardRef as o,Fragment as n}from"react";import{motionDefaultProps as a,useValueFormatter as i,useMotionConfig as s,useAnimatedPath as l,Container as p,useDimensions as d,SvgWrapper as u,ResponsiveWrapper as f}from"@nivo/core";import{area as c,curveBasis as h,curveLinear as v,line as y}from"d3-shape";import{scaleLinear as b,scaleOrdinal as x}from"d3-scale";import{useOrdinalColorScale as m,useInheritedColor as g}from"@nivo/colors";import{useTheme as S}from"@nivo/theming";import{useAnnotations as P,Annotation as C}from"@nivo/annotations";import{BasicTooltip as O,useTooltip as M}from"@nivo/tooltip";import{jsx as w,jsxs as I,Fragment as L}from"react/jsx-runtime";import W from"lodash/isPlainObject.js";import B from"lodash/get.js";import{useSpring as E,animated as z}from"@react-spring/web";import{Text as G}from"@nivo/text";function k(){return k=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)({}).hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r},k.apply(null,arguments)}function A(r,e){if(null==r)return{};var t={};for(var o in r)if({}.hasOwnProperty.call(r,o)){if(-1!==e.indexOf(o))continue;t[o]=r[o]}return t}var R={layers:["separators","parts","labels","annotations"],direction:"vertical",interpolation:"smooth",spacing:0,shapeBlending:.66,colors:{scheme:"nivo"},size:void 0,fillOpacity:1,borderWidth:6,borderColor:{from:"color"},borderOpacity:.66,enableLabel:!0,labelColor:{theme:"background"},enableBeforeSeparators:!0,beforeSeparatorLength:0,beforeSeparatorOffset:0,enableAfterSeparators:!0,afterSeparatorLength:0,afterSeparatorOffset:0,annotations:[],isInteractive:!0,currentPartSizeExtension:0,role:"img",animate:a.animate,motionConfig:a.config},j=function(r){var e=r.part;return w(O,{id:e.data.label,value:e.formattedValue,color:e.color,enableChip:!0})},F=function(r,e){var t=c();return"vertical"===e?t.curve("smooth"===r?h:v).x0((function(r){return r.x0})).x1((function(r){return r.x1})).y((function(r){return r.y})):t.curve("smooth"===r?h:v).y0((function(r){return r.y0})).y1((function(r){return r.y1})).x((function(r){return r.x})),[t,y().defined((function(r){return null!==r})).x((function(r){return r.x})).y((function(r){return r.y})).curve("smooth"===r?h:v)]},T=function(r){var e,t,o=r.data,n=r.direction,a=r.width,i=r.height,s=r.spacing;"vertical"===n?(e=i,t=a):(e=a,t=i);var l=(e-s*(o.length-1))/o.length,p=function(r){return s*r+l*r};p.bandwidth=l;var d=o.map((function(r){return r.value}));return[p,b().domain([0,Math.max.apply(Math,d)]).range([0,t])]},H=function(r){var e=r.parts,t=r.direction,o=r.width,n=r.height,a=r.spacing,i=r.enableBeforeSeparators,s=r.beforeSeparatorOffset,l=r.enableAfterSeparators,p=r.afterSeparatorOffset,d=[],u=[],f=e[e.length-1];if("vertical"===t){e.forEach((function(r){var e=r.y0-a/2;i&&d.push({partId:r.data.id,x0:0,x1:r.x0-s,y0:e,y1:e}),l&&u.push({partId:r.data.id,x0:r.x1+p,x1:o,y0:e,y1:e})}));var c=f.y1;i&&d.push(k({},d[d.length-1],{partId:"none",y0:c,y1:c})),l&&u.push(k({},u[u.length-1],{partId:"none",y0:c,y1:c}))}else if("horizontal"===t){e.forEach((function(r){var e=r.x0-a/2;d.push({partId:r.data.id,x0:e,x1:e,y0:0,y1:r.y0-s}),u.push({partId:r.data.id,x0:e,x1:e,y0:r.y1+p,y1:n})}));var h=f.x1;d.push(k({},d[d.length-1],{partId:"none",x0:h,x1:h})),u.push(k({},u[u.length-1],{partId:"none",x0:h,x1:h}))}return[d,u]},D=function(r){var e=r.parts,o=r.setCurrentPartId,n=r.isInteractive,a=r.onMouseEnter,i=r.onMouseLeave,s=r.onMouseMove,l=r.onClick,p=r.showTooltipFromEvent,d=r.hideTooltip,u=r.tooltip,f=void 0===u?j:u;return n?e.map((function(r){return k({},r,{onMouseEnter:function(e){o(r.data.id),p(t(f,{part:r}),e),null==a||a(r,e)},onMouseLeave:function(e){o(null),d(),null==i||i(r,e)},onMouseMove:function(e){p(t(f,{part:r}),e),null==s||s(r,e)},onClick:void 0!==l?function(e){l(r,e)}:void 0})})):e},V=function(r,e){if("function"==typeof r)return r;if(Array.isArray(r)){var t=x(r);return function(r){return Number(t(String(r.id)))}}if(W(r)){if(function(r){return void 0!==r.datum}(r))return function(e){var t=B(e,r.datum);return"number"==typeof t?t:0};throw new Error("Invalid size, when using an object, you should specify a 'datum' property")}return function(r){return e(r.value)}},N=function(e,t){return r((function(){return V(e,t)}),[e,t])},q=function(t){var o,n,a=t.data,s=t.width,l=t.height,p=t.direction,d=void 0===p?R.direction:p,u=t.interpolation,f=void 0===u?R.interpolation:u,c=t.spacing,h=void 0===c?R.spacing:c,v=t.shapeBlending,y=void 0===v?R.shapeBlending:v,b=t.valueFormat,x=t.colors,P=void 0===x?R.colors:x,C=t.size,O=void 0===C?R.size:C,w=t.fillOpacity,I=void 0===w?R.fillOpacity:w,L=t.borderWidth,W=void 0===L?R.borderWidth:L,B=t.borderColor,E=void 0===B?R.borderColor:B,z=t.borderOpacity,G=void 0===z?R.borderOpacity:z,A=t.labelColor,j=void 0===A?R.labelColor:A,V=t.enableBeforeSeparators,q=void 0===V?R.enableBeforeSeparators:V,J=t.beforeSeparatorLength,K=void 0===J?R.beforeSeparatorLength:J,Q=t.beforeSeparatorOffset,U=void 0===Q?R.beforeSeparatorOffset:Q,X=t.enableAfterSeparators,Y=void 0===X?R.enableAfterSeparators:X,Z=t.afterSeparatorLength,$=void 0===Z?R.afterSeparatorLength:Z,_=t.afterSeparatorOffset,rr=void 0===_?R.afterSeparatorOffset:_,er=t.isInteractive,tr=void 0===er?R.isInteractive:er,or=t.currentPartSizeExtension,nr=void 0===or?R.currentPartSizeExtension:or,ar=t.currentBorderWidth,ir=t.onMouseEnter,sr=t.onMouseMove,lr=t.onMouseLeave,pr=t.onClick,dr=t.tooltip,ur=S(),fr=m(P,"id"),cr=g(E,ur),hr=g(j,ur),vr=i(b),yr=r((function(){return F(f,d)}),[f,d]),br=yr[0],xr=yr[1],mr=q?K+U:0,gr=Y?$+rr:0;"vertical"===d?(o=s-mr-gr,n=l):(o=s,n=l-mr-gr);var Sr=r((function(){return T({data:a,direction:d,width:o,height:n,spacing:h})}),[a,d,o,n,h]),Pr=Sr[0],Cr=Sr[1],Or=N(O,Cr),Mr=e(null),wr=Mr[0],Ir=Mr[1],Lr=r((function(){var r=a.map((function(r,e){var t,a,i,s,l=r.id===wr,p=Or(r);"vertical"===d?(t=p,a=Pr.bandwidth,s=mr+.5*(o-t),i=Pr(e)):(t=Pr.bandwidth,a=p,s=Pr(e),i=mr+.5*(n-a));var u=s+t,f=s+.5*t,c=i+a,h=i+.5*a,v={data:r,width:t,height:a,color:fr(r),fillOpacity:I,borderWidth:l&&void 0!==ar?ar:W,borderOpacity:G,formattedValue:vr(r.value),isCurrent:l,x:f,x0:s,x1:u,y:h,y0:i,y1:c,borderColor:"",labelColor:"",points:[],areaPoints:[],borderPoints:[]};return v.borderColor=cr(v),v.labelColor=hr(v),v})),e=y/2;return r.forEach((function(t,o){var n=r[o+1];if("vertical"===d){t.points.push({x:t.x0,y:t.y0}),t.points.push({x:t.x1,y:t.y0}),n?(t.points.push({x:n.x1,y:t.y1}),t.points.push({x:n.x0,y:t.y1})):(t.points.push({x:t.points[1].x,y:t.y1}),t.points.push({x:t.points[0].x,y:t.y1})),t.isCurrent&&(t.points[0].x-=nr,t.points[1].x+=nr,t.points[2].x+=nr,t.points[3].x-=nr),t.areaPoints=[{x:0,x0:t.points[0].x,x1:t.points[1].x,y:t.y0,y0:0,y1:0}],t.areaPoints.push(k({},t.areaPoints[0],{y:t.y0+t.height*e}));var a={x:0,x0:t.points[3].x,x1:t.points[2].x,y:t.y1,y0:0,y1:0};t.areaPoints.push(k({},a,{y:t.y1-t.height*e})),t.areaPoints.push(a),[0,1,2,3].map((function(r){t.borderPoints.push({x:t.areaPoints[r].x0,y:t.areaPoints[r].y})})),t.borderPoints.push(null),[3,2,1,0].map((function(r){t.borderPoints.push({x:t.areaPoints[r].x1,y:t.areaPoints[r].y})}))}else{t.points.push({x:t.x0,y:t.y0}),n?(t.points.push({x:t.x1,y:n.y0}),t.points.push({x:t.x1,y:n.y1})):(t.points.push({x:t.x1,y:t.y0}),t.points.push({x:t.x1,y:t.y1})),t.points.push({x:t.x0,y:t.y1}),t.isCurrent&&(t.points[0].y-=nr,t.points[1].y-=nr,t.points[2].y+=nr,t.points[3].y+=nr),t.areaPoints=[{x:t.x0,x0:0,x1:0,y:0,y0:t.points[0].y,y1:t.points[3].y}],t.areaPoints.push(k({},t.areaPoints[0],{x:t.x0+t.width*e}));var i={x:t.x1,x0:0,x1:0,y:0,y0:t.points[1].y,y1:t.points[2].y};t.areaPoints.push(k({},i,{x:t.x1-t.width*e})),t.areaPoints.push(i),[0,1,2,3].map((function(r){t.borderPoints.push({x:t.areaPoints[r].x,y:t.areaPoints[r].y0})})),t.borderPoints.push(null),[3,2,1,0].map((function(r){t.borderPoints.push({x:t.areaPoints[r].x,y:t.areaPoints[r].y1})}))}})),r}),[a,d,Pr,o,n,mr,y,fr,vr,cr,hr,wr,G,W,ar,nr,I,Or]),Wr=M(),Br=Wr.showTooltipFromEvent,Er=Wr.hideTooltip,zr=r((function(){return D({parts:Lr,setCurrentPartId:Ir,isInteractive:tr,onMouseEnter:ir,onMouseLeave:lr,onMouseMove:sr,onClick:pr,showTooltipFromEvent:Br,hideTooltip:Er,tooltip:dr})}),[Lr,Ir,tr,ir,lr,sr,pr,Br,Er,dr]),Gr=r((function(){return H({parts:Lr,direction:d,width:s,height:l,spacing:h,enableBeforeSeparators:q,beforeSeparatorOffset:U,enableAfterSeparators:Y,afterSeparatorOffset:rr})}),[Lr,d,s,l,h,q,U,Y,rr]),kr=Gr[0],Ar=Gr[1],Rr=r((function(){return{width:s,height:l,parts:zr,areaGenerator:br,borderGenerator:xr,beforeSeparators:kr,afterSeparators:Ar,setCurrentPartId:Ir}}),[s,l,zr,br,xr,kr,Ar,Ir]);return{parts:zr,areaGenerator:br,borderGenerator:xr,beforeSeparators:kr,afterSeparators:Ar,setCurrentPartId:Ir,currentPartId:wr,customLayerProps:Rr}},J=function(r,e){return P({data:r,annotations:e,getPosition:function(r){return{x:r.x,y:r.y}},getDimensions:function(r){var e=r.width,t=r.height;return{size:Math.max(e,t),width:e,height:t}}})},K=function(r){var e=r.part,t=r.areaGenerator,o=r.borderGenerator,n=s(),a=n.animate,i=n.config,p=l(t(e.areaPoints)),d=l(o(e.borderPoints)),u=E({areaColor:e.color,borderWidth:e.borderWidth,borderColor:e.borderColor,config:i,immediate:!a});return I(L,{children:[e.borderWidth>0&&w(z.path,{d:d,stroke:u.borderColor,strokeWidth:u.borderWidth,strokeOpacity:e.borderOpacity,fill:"none"}),w(z.path,{d:p,fill:u.areaColor,fillOpacity:e.fillOpacity,onMouseEnter:e.onMouseEnter,onMouseLeave:e.onMouseLeave,onMouseMove:e.onMouseMove,onClick:e.onClick})]})},Q=function(r){var e=r.parts,t=r.areaGenerator,o=r.borderGenerator;return w(L,{children:e.map((function(r){return w(K,{part:r,areaGenerator:t,borderGenerator:o},r.data.id)}))})},U=function(r){var e=r.part,t=S(),o=s(),n=o.animate,a=o.config,i=E({transform:"translate("+e.x+", "+e.y+")",color:e.labelColor,config:a,immediate:!n});return w(z.g,{transform:i.transform,children:w(G,{textAnchor:"middle",dominantBaseline:"central",style:k({},t.labels.text,{fill:i.color,pointerEvents:"none"}),children:e.formattedValue})})},X=function(r){var e=r.parts;return w(L,{children:e.map((function(r){return w(U,{part:r},r.data.id)}))})},Y=function(r){var e=r.separator,t=S(),o=s(),n=o.animate,a=o.config,i=E({x1:e.x0,x2:e.x1,y1:e.y0,y2:e.y1,config:a,immediate:!n});return w(z.line,k({x1:i.x1,x2:i.x2,y1:i.y1,y2:i.y2,fill:"none"},t.grid.line))},Z=function(r){var e=r.beforeSeparators,t=r.afterSeparators;return I(L,{children:[e.map((function(r){return w(Y,{separator:r},r.partId)})),t.map((function(r){return w(Y,{separator:r},r.partId)}))]})},$=function(r){var e=r.parts,t=r.annotations,o=J(e,t);return w(L,{children:o.map((function(r,e){return w(C,k({},r),e)}))})},_=["isInteractive","animate","motionConfig","theme","renderWrapper"],rr=function(r){var e=r.data,o=r.width,a=r.height,i=r.margin,s=r.direction,l=void 0===s?R.direction:s,p=r.interpolation,f=void 0===p?R.interpolation:p,c=r.spacing,h=void 0===c?R.spacing:c,v=r.shapeBlending,y=void 0===v?R.shapeBlending:v,b=r.valueFormat,x=r.colors,m=void 0===x?R.colors:x,g=r.size,S=void 0===g?R.size:g,P=r.fillOpacity,C=void 0===P?R.fillOpacity:P,O=r.borderWidth,M=void 0===O?R.borderWidth:O,I=r.borderColor,L=void 0===I?R.borderColor:I,W=r.borderOpacity,B=void 0===W?R.borderOpacity:W,E=r.enableLabel,z=void 0===E?R.enableLabel:E,G=r.labelColor,k=void 0===G?R.labelColor:G,A=r.enableBeforeSeparators,j=void 0===A?R.enableBeforeSeparators:A,F=r.beforeSeparatorLength,T=void 0===F?R.beforeSeparatorLength:F,H=r.beforeSeparatorOffset,D=void 0===H?R.beforeSeparatorOffset:H,V=r.enableAfterSeparators,N=void 0===V?R.enableAfterSeparators:V,J=r.afterSeparatorLength,K=void 0===J?R.afterSeparatorLength:J,U=r.afterSeparatorOffset,Y=void 0===U?R.afterSeparatorOffset:U,_=r.layers,rr=void 0===_?R.layers:_,er=r.annotations,tr=void 0===er?R.annotations:er,or=r.isInteractive,nr=void 0===or?R.isInteractive:or,ar=r.currentPartSizeExtension,ir=void 0===ar?R.currentPartSizeExtension:ar,sr=r.currentBorderWidth,lr=r.onMouseEnter,pr=r.onMouseMove,dr=r.onMouseLeave,ur=r.onClick,fr=r.tooltip,cr=r.role,hr=void 0===cr?R.role:cr,vr=r.ariaLabel,yr=r.ariaLabelledBy,br=r.ariaDescribedBy,xr=r.forwardedRef,mr=d(o,a,i),gr=mr.margin,Sr=mr.innerWidth,Pr=mr.innerHeight,Cr=mr.outerWidth,Or=mr.outerHeight,Mr=q({data:e,width:Sr,height:Pr,direction:l,interpolation:f,spacing:h,shapeBlending:y,valueFormat:b,colors:m,size:S,fillOpacity:C,borderWidth:M,borderColor:L,borderOpacity:B,labelColor:k,enableBeforeSeparators:j,beforeSeparatorLength:T,beforeSeparatorOffset:D,enableAfterSeparators:N,afterSeparatorLength:K,afterSeparatorOffset:Y,isInteractive:nr,currentPartSizeExtension:ir,currentBorderWidth:sr,onMouseEnter:lr,onMouseMove:pr,onMouseLeave:dr,onClick:ur,tooltip:fr}),wr=Mr.areaGenerator,Ir=Mr.borderGenerator,Lr=Mr.parts,Wr=Mr.beforeSeparators,Br=Mr.afterSeparators,Er=Mr.customLayerProps,zr={separators:null,parts:null,annotations:null,labels:null};return rr.includes("separators")&&(zr.separators=w(Z,{beforeSeparators:Wr,afterSeparators:Br},"separators")),rr.includes("parts")&&(zr.parts=w(Q,{parts:Lr,areaGenerator:wr,borderGenerator:Ir},"parts")),null!=rr&&rr.includes("annotations")&&(zr.annotations=w($,{parts:Lr,annotations:tr},"annotations")),rr.includes("labels")&&z&&(zr.labels=w(X,{parts:Lr},"labels")),w(u,{width:Cr,height:Or,margin:gr,role:hr,ariaLabel:vr,ariaLabelledBy:yr,ariaDescribedBy:br,ref:xr,children:rr.map((function(r,e){var o;return"function"==typeof r?w(n,{children:t(r,Er)},e):null!=(o=null==zr?void 0:zr[r])?o:null}))})},er=o((function(r,e){var t=r.isInteractive,o=void 0===t?R.isInteractive:t,n=r.animate,a=void 0===n?R.animate:n,i=r.motionConfig,s=void 0===i?R.motionConfig:i,l=r.theme,d=r.renderWrapper,u=A(r,_);return w(p,{animate:a,isInteractive:o,motionConfig:s,renderWrapper:d,theme:l,children:w(rr,k({isInteractive:o},u,{forwardedRef:e}))})})),tr=["defaultWidth","defaultHeight","onResize","debounceResize"],or=o((function(r,e){var t=r.defaultWidth,o=r.defaultHeight,n=r.onResize,a=r.debounceResize,i=A(r,tr);return w(f,{defaultWidth:t,defaultHeight:o,onResize:n,debounceResize:a,children:function(r){var t=r.width,o=r.height;return w(er,k({width:t,height:o},i,{ref:e}))}})}));export{er as Funnel,or as ResponsiveFunnel,D as computePartsHandlers,T as computeScales,H as computeSeparators,F as computeShapeGenerators,V as getSizeGenerator,R as svgDefaultProps,q as useFunnel,J as useFunnelAnnotations,N as useSize}; //# sourceMappingURL=nivo-funnel.mjs.map