@nivo/funnel
Version:
3 lines (2 loc) • 14.7 kB
JavaScript
"use strict";var e=require("react"),r=require("@nivo/core"),t=require("d3-shape"),o=require("d3-scale"),n=require("@nivo/colors"),a=require("@nivo/theming"),i=require("@nivo/annotations"),s=require("@nivo/tooltip"),u=require("react/jsx-runtime"),l=require("lodash/isPlainObject.js"),p=require("lodash/get.js"),d=require("@react-spring/web"),f=require("@nivo/text");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 o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},c.apply(null,arguments)}function h(e,r){if(null==e)return{};var t={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(-1!==r.indexOf(o))continue;t[o]=e[o]}return t}var v={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:r.motionDefaultProps.animate,motionConfig:r.motionDefaultProps.config},x=function(e){var r=e.part;return u.jsx(s.BasicTooltip,{id:r.data.label,value:r.formattedValue,color:r.color,enableChip:!0})},y=function(e,r){var o=t.area();return"vertical"===r?o.curve("smooth"===e?t.curveBasis:t.curveLinear).x0((function(e){return e.x0})).x1((function(e){return e.x1})).y((function(e){return e.y})):o.curve("smooth"===e?t.curveBasis:t.curveLinear).y0((function(e){return e.y0})).y1((function(e){return e.y1})).x((function(e){return e.x})),[o,t.line().defined((function(e){return null!==e})).x((function(e){return e.x})).y((function(e){return e.y})).curve("smooth"===e?t.curveBasis:t.curveLinear)]},b=function(e){var r,t,n=e.data,a=e.direction,i=e.width,s=e.height,u=e.spacing;"vertical"===a?(r=s,t=i):(r=i,t=s);var l=(r-u*(n.length-1))/n.length,p=function(e){return u*e+l*e};p.bandwidth=l;var d=n.map((function(e){return e.value}));return[p,o.scaleLinear().domain([0,Math.max.apply(Math,d)]).range([0,t])]},m=function(e){var r=e.parts,t=e.direction,o=e.width,n=e.height,a=e.spacing,i=e.enableBeforeSeparators,s=e.beforeSeparatorOffset,u=e.enableAfterSeparators,l=e.afterSeparatorOffset,p=[],d=[],f=r[r.length-1];if("vertical"===t){r.forEach((function(e){var r=e.y0-a/2;i&&p.push({partId:e.data.id,x0:0,x1:e.x0-s,y0:r,y1:r}),u&&d.push({partId:e.data.id,x0:e.x1+l,x1:o,y0:r,y1:r})}));var h=f.y1;i&&p.push(c({},p[p.length-1],{partId:"none",y0:h,y1:h})),u&&d.push(c({},d[d.length-1],{partId:"none",y0:h,y1:h}))}else if("horizontal"===t){r.forEach((function(e){var r=e.x0-a/2;p.push({partId:e.data.id,x0:r,x1:r,y0:0,y1:e.y0-s}),d.push({partId:e.data.id,x0:r,x1:r,y0:e.y1+l,y1:n})}));var v=f.x1;p.push(c({},p[p.length-1],{partId:"none",x0:v,x1:v})),d.push(c({},d[d.length-1],{partId:"none",x0:v,x1:v}))}return[p,d]},g=function(r){var t=r.parts,o=r.setCurrentPartId,n=r.isInteractive,a=r.onMouseEnter,i=r.onMouseLeave,s=r.onMouseMove,u=r.onClick,l=r.showTooltipFromEvent,p=r.hideTooltip,d=r.tooltip,f=void 0===d?x:d;return n?t.map((function(r){return c({},r,{onMouseEnter:function(t){o(r.data.id),l(e.createElement(f,{part:r}),t),null==a||a(r,t)},onMouseLeave:function(e){o(null),p(),null==i||i(r,e)},onMouseMove:function(t){l(e.createElement(f,{part:r}),t),null==s||s(r,t)},onClick:void 0!==u?function(e){u(r,e)}:void 0})})):t},S=function(e,r){if("function"==typeof e)return e;if(Array.isArray(e)){var t=o.scaleOrdinal(e);return function(e){return Number(t(String(e.id)))}}if(l(e)){if(function(e){return void 0!==e.datum}(e))return function(r){var t=p(r,e.datum);return"number"==typeof t?t:0};throw new Error("Invalid size, when using an object, you should specify a 'datum' property")}return function(e){return r(e.value)}},P=function(r,t){return e.useMemo((function(){return S(r,t)}),[r,t])},C=function(t){var o,i,u=t.data,l=t.width,p=t.height,d=t.direction,f=void 0===d?v.direction:d,h=t.interpolation,x=void 0===h?v.interpolation:h,S=t.spacing,C=void 0===S?v.spacing:S,M=t.shapeBlending,O=void 0===M?v.shapeBlending:M,j=t.valueFormat,L=t.colors,w=void 0===L?v.colors:L,I=t.size,B=void 0===I?v.size:I,E=t.fillOpacity,W=void 0===E?v.fillOpacity:E,z=t.borderWidth,F=void 0===z?v.borderWidth:z,A=t.borderColor,G=void 0===A?v.borderColor:A,q=t.borderOpacity,k=void 0===q?v.borderOpacity:q,R=t.labelColor,T=void 0===R?v.labelColor:R,D=t.enableBeforeSeparators,H=void 0===D?v.enableBeforeSeparators:D,V=t.beforeSeparatorLength,N=void 0===V?v.beforeSeparatorLength:V,J=t.beforeSeparatorOffset,K=void 0===J?v.beforeSeparatorOffset:J,Q=t.enableAfterSeparators,U=void 0===Q?v.enableAfterSeparators:Q,X=t.afterSeparatorLength,Y=void 0===X?v.afterSeparatorLength:X,Z=t.afterSeparatorOffset,$=void 0===Z?v.afterSeparatorOffset:Z,_=t.isInteractive,ee=void 0===_?v.isInteractive:_,re=t.currentPartSizeExtension,te=void 0===re?v.currentPartSizeExtension:re,oe=t.currentBorderWidth,ne=t.onMouseEnter,ae=t.onMouseMove,ie=t.onMouseLeave,se=t.onClick,ue=t.tooltip,le=a.useTheme(),pe=n.useOrdinalColorScale(w,"id"),de=n.useInheritedColor(G,le),fe=n.useInheritedColor(T,le),ce=r.useValueFormatter(j),he=e.useMemo((function(){return y(x,f)}),[x,f]),ve=he[0],xe=he[1],ye=H?N+K:0,be=U?Y+$:0;"vertical"===f?(o=l-ye-be,i=p):(o=l,i=p-ye-be);var me=e.useMemo((function(){return b({data:u,direction:f,width:o,height:i,spacing:C})}),[u,f,o,i,C]),ge=me[0],Se=me[1],Pe=P(B,Se),Ce=e.useState(null),Me=Ce[0],Oe=Ce[1],je=e.useMemo((function(){var e=u.map((function(e,r){var t,n,a,s,u=e.id===Me,l=Pe(e);"vertical"===f?(t=l,n=ge.bandwidth,s=ye+.5*(o-t),a=ge(r)):(t=ge.bandwidth,n=l,s=ge(r),a=ye+.5*(i-n));var p=s+t,d=s+.5*t,c=a+n,h=a+.5*n,v={data:e,width:t,height:n,color:pe(e),fillOpacity:W,borderWidth:u&&void 0!==oe?oe:F,borderOpacity:k,formattedValue:ce(e.value),isCurrent:u,x:d,x0:s,x1:p,y:h,y0:a,y1:c,borderColor:"",labelColor:"",points:[],areaPoints:[],borderPoints:[]};return v.borderColor=de(v),v.labelColor=fe(v),v})),r=O/2;return e.forEach((function(t,o){var n=e[o+1];if("vertical"===f){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-=te,t.points[1].x+=te,t.points[2].x+=te,t.points[3].x-=te),t.areaPoints=[{x:0,x0:t.points[0].x,x1:t.points[1].x,y:t.y0,y0:0,y1:0}],t.areaPoints.push(c({},t.areaPoints[0],{y:t.y0+t.height*r}));var a={x:0,x0:t.points[3].x,x1:t.points[2].x,y:t.y1,y0:0,y1:0};t.areaPoints.push(c({},a,{y:t.y1-t.height*r})),t.areaPoints.push(a),[0,1,2,3].map((function(e){t.borderPoints.push({x:t.areaPoints[e].x0,y:t.areaPoints[e].y})})),t.borderPoints.push(null),[3,2,1,0].map((function(e){t.borderPoints.push({x:t.areaPoints[e].x1,y:t.areaPoints[e].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-=te,t.points[1].y-=te,t.points[2].y+=te,t.points[3].y+=te),t.areaPoints=[{x:t.x0,x0:0,x1:0,y:0,y0:t.points[0].y,y1:t.points[3].y}],t.areaPoints.push(c({},t.areaPoints[0],{x:t.x0+t.width*r}));var i={x:t.x1,x0:0,x1:0,y:0,y0:t.points[1].y,y1:t.points[2].y};t.areaPoints.push(c({},i,{x:t.x1-t.width*r})),t.areaPoints.push(i),[0,1,2,3].map((function(e){t.borderPoints.push({x:t.areaPoints[e].x,y:t.areaPoints[e].y0})})),t.borderPoints.push(null),[3,2,1,0].map((function(e){t.borderPoints.push({x:t.areaPoints[e].x,y:t.areaPoints[e].y1})}))}})),e}),[u,f,ge,o,i,ye,O,pe,ce,de,fe,Me,k,F,oe,te,W,Pe]),Le=s.useTooltip(),we=Le.showTooltipFromEvent,Ie=Le.hideTooltip,Be=e.useMemo((function(){return g({parts:je,setCurrentPartId:Oe,isInteractive:ee,onMouseEnter:ne,onMouseLeave:ie,onMouseMove:ae,onClick:se,showTooltipFromEvent:we,hideTooltip:Ie,tooltip:ue})}),[je,Oe,ee,ne,ie,ae,se,we,Ie,ue]),Ee=e.useMemo((function(){return m({parts:je,direction:f,width:l,height:p,spacing:C,enableBeforeSeparators:H,beforeSeparatorOffset:K,enableAfterSeparators:U,afterSeparatorOffset:$})}),[je,f,l,p,C,H,K,U,$]),We=Ee[0],ze=Ee[1],Fe=e.useMemo((function(){return{width:l,height:p,parts:Be,areaGenerator:ve,borderGenerator:xe,beforeSeparators:We,afterSeparators:ze,setCurrentPartId:Oe}}),[l,p,Be,ve,xe,We,ze,Oe]);return{parts:Be,areaGenerator:ve,borderGenerator:xe,beforeSeparators:We,afterSeparators:ze,setCurrentPartId:Oe,currentPartId:Me,customLayerProps:Fe}},M=function(e,r){return i.useAnnotations({data:e,annotations:r,getPosition:function(e){return{x:e.x,y:e.y}},getDimensions:function(e){var r=e.width,t=e.height;return{size:Math.max(r,t),width:r,height:t}}})},O=function(e){var t=e.part,o=e.areaGenerator,n=e.borderGenerator,a=r.useMotionConfig(),i=a.animate,s=a.config,l=r.useAnimatedPath(o(t.areaPoints)),p=r.useAnimatedPath(n(t.borderPoints)),f=d.useSpring({areaColor:t.color,borderWidth:t.borderWidth,borderColor:t.borderColor,config:s,immediate:!i});return u.jsxs(u.Fragment,{children:[t.borderWidth>0&&u.jsx(d.animated.path,{d:p,stroke:f.borderColor,strokeWidth:f.borderWidth,strokeOpacity:t.borderOpacity,fill:"none"}),u.jsx(d.animated.path,{d:l,fill:f.areaColor,fillOpacity:t.fillOpacity,onMouseEnter:t.onMouseEnter,onMouseLeave:t.onMouseLeave,onMouseMove:t.onMouseMove,onClick:t.onClick})]})},j=function(e){var r=e.parts,t=e.areaGenerator,o=e.borderGenerator;return u.jsx(u.Fragment,{children:r.map((function(e){return u.jsx(O,{part:e,areaGenerator:t,borderGenerator:o},e.data.id)}))})},L=function(e){var t=e.part,o=a.useTheme(),n=r.useMotionConfig(),i=n.animate,s=n.config,l=d.useSpring({transform:"translate("+t.x+", "+t.y+")",color:t.labelColor,config:s,immediate:!i});return u.jsx(d.animated.g,{transform:l.transform,children:u.jsx(f.Text,{textAnchor:"middle",dominantBaseline:"central",style:c({},o.labels.text,{fill:l.color,pointerEvents:"none"}),children:t.formattedValue})})},w=function(e){var r=e.parts;return u.jsx(u.Fragment,{children:r.map((function(e){return u.jsx(L,{part:e},e.data.id)}))})},I=function(e){var t=e.separator,o=a.useTheme(),n=r.useMotionConfig(),i=n.animate,s=n.config,l=d.useSpring({x1:t.x0,x2:t.x1,y1:t.y0,y2:t.y1,config:s,immediate:!i});return u.jsx(d.animated.line,c({x1:l.x1,x2:l.x2,y1:l.y1,y2:l.y2,fill:"none"},o.grid.line))},B=function(e){var r=e.beforeSeparators,t=e.afterSeparators;return u.jsxs(u.Fragment,{children:[r.map((function(e){return u.jsx(I,{separator:e},e.partId)})),t.map((function(e){return u.jsx(I,{separator:e},e.partId)}))]})},E=function(e){var r=e.parts,t=e.annotations,o=M(r,t);return u.jsx(u.Fragment,{children:o.map((function(e,r){return u.jsx(i.Annotation,c({},e),r)}))})},W=["isInteractive","animate","motionConfig","theme","renderWrapper"],z=function(t){var o=t.data,n=t.width,a=t.height,i=t.margin,s=t.direction,l=void 0===s?v.direction:s,p=t.interpolation,d=void 0===p?v.interpolation:p,f=t.spacing,c=void 0===f?v.spacing:f,h=t.shapeBlending,x=void 0===h?v.shapeBlending:h,y=t.valueFormat,b=t.colors,m=void 0===b?v.colors:b,g=t.size,S=void 0===g?v.size:g,P=t.fillOpacity,M=void 0===P?v.fillOpacity:P,O=t.borderWidth,L=void 0===O?v.borderWidth:O,I=t.borderColor,W=void 0===I?v.borderColor:I,z=t.borderOpacity,F=void 0===z?v.borderOpacity:z,A=t.enableLabel,G=void 0===A?v.enableLabel:A,q=t.labelColor,k=void 0===q?v.labelColor:q,R=t.enableBeforeSeparators,T=void 0===R?v.enableBeforeSeparators:R,D=t.beforeSeparatorLength,H=void 0===D?v.beforeSeparatorLength:D,V=t.beforeSeparatorOffset,N=void 0===V?v.beforeSeparatorOffset:V,J=t.enableAfterSeparators,K=void 0===J?v.enableAfterSeparators:J,Q=t.afterSeparatorLength,U=void 0===Q?v.afterSeparatorLength:Q,X=t.afterSeparatorOffset,Y=void 0===X?v.afterSeparatorOffset:X,Z=t.layers,$=void 0===Z?v.layers:Z,_=t.annotations,ee=void 0===_?v.annotations:_,re=t.isInteractive,te=void 0===re?v.isInteractive:re,oe=t.currentPartSizeExtension,ne=void 0===oe?v.currentPartSizeExtension:oe,ae=t.currentBorderWidth,ie=t.onMouseEnter,se=t.onMouseMove,ue=t.onMouseLeave,le=t.onClick,pe=t.tooltip,de=t.role,fe=void 0===de?v.role:de,ce=t.ariaLabel,he=t.ariaLabelledBy,ve=t.ariaDescribedBy,xe=t.forwardedRef,ye=r.useDimensions(n,a,i),be=ye.margin,me=ye.innerWidth,ge=ye.innerHeight,Se=ye.outerWidth,Pe=ye.outerHeight,Ce=C({data:o,width:me,height:ge,direction:l,interpolation:d,spacing:c,shapeBlending:x,valueFormat:y,colors:m,size:S,fillOpacity:M,borderWidth:L,borderColor:W,borderOpacity:F,labelColor:k,enableBeforeSeparators:T,beforeSeparatorLength:H,beforeSeparatorOffset:N,enableAfterSeparators:K,afterSeparatorLength:U,afterSeparatorOffset:Y,isInteractive:te,currentPartSizeExtension:ne,currentBorderWidth:ae,onMouseEnter:ie,onMouseMove:se,onMouseLeave:ue,onClick:le,tooltip:pe}),Me=Ce.areaGenerator,Oe=Ce.borderGenerator,je=Ce.parts,Le=Ce.beforeSeparators,we=Ce.afterSeparators,Ie=Ce.customLayerProps,Be={separators:null,parts:null,annotations:null,labels:null};return $.includes("separators")&&(Be.separators=u.jsx(B,{beforeSeparators:Le,afterSeparators:we},"separators")),$.includes("parts")&&(Be.parts=u.jsx(j,{parts:je,areaGenerator:Me,borderGenerator:Oe},"parts")),null!=$&&$.includes("annotations")&&(Be.annotations=u.jsx(E,{parts:je,annotations:ee},"annotations")),$.includes("labels")&&G&&(Be.labels=u.jsx(w,{parts:je},"labels")),u.jsx(r.SvgWrapper,{width:Se,height:Pe,margin:be,role:fe,ariaLabel:ce,ariaLabelledBy:he,ariaDescribedBy:ve,ref:xe,children:$.map((function(r,t){var o;return"function"==typeof r?u.jsx(e.Fragment,{children:e.createElement(r,Ie)},t):null!=(o=null==Be?void 0:Be[r])?o:null}))})},F=e.forwardRef((function(e,t){var o=e.isInteractive,n=void 0===o?v.isInteractive:o,a=e.animate,i=void 0===a?v.animate:a,s=e.motionConfig,l=void 0===s?v.motionConfig:s,p=e.theme,d=e.renderWrapper,f=h(e,W);return u.jsx(r.Container,{animate:i,isInteractive:n,motionConfig:l,renderWrapper:d,theme:p,children:u.jsx(z,c({isInteractive:n},f,{forwardedRef:t}))})})),A=["defaultWidth","defaultHeight","onResize","debounceResize"],G=e.forwardRef((function(e,t){var o=e.defaultWidth,n=e.defaultHeight,a=e.onResize,i=e.debounceResize,s=h(e,A);return u.jsx(r.ResponsiveWrapper,{defaultWidth:o,defaultHeight:n,onResize:a,debounceResize:i,children:function(e){var r=e.width,o=e.height;return u.jsx(F,c({width:r,height:o},s,{ref:t}))}})}));exports.Funnel=F,exports.ResponsiveFunnel=G,exports.computePartsHandlers=g,exports.computeScales=b,exports.computeSeparators=m,exports.computeShapeGenerators=y,exports.getSizeGenerator=S,exports.svgDefaultProps=v,exports.useFunnel=C,exports.useFunnelAnnotations=M,exports.useSize=P;
//# sourceMappingURL=nivo-funnel.cjs.js.map