bullet-chart-react
Version:
2 lines • 18.1 kB
JavaScript
/*! For license information please see index.js.LICENSE.txt */
!function(){"use strict";var e={586:function(e,t,n){var l=n(645),i=n.n(l)()((function(e){return e[1]}));i.push([e.id,'.bullet-chart{width:100%;background-color:transparent;box-sizing:border-box}.bullet-chart-body{background-color:#f2f3f5;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;margin:0 -0.5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.bullet-chart-body:hover{opacity:.8}.bullet-chart-body .bullet-chart-bg-bar{position:absolute;z-index:1;left:0;transition:width .5s linear}.bullet-chart-body .bullet-chart-main-bar{position:absolute;z-index:2;left:0;transition:width .5s linear}.bullet-chart-body .bullet-chart-mark-line{position:absolute;z-index:3;left:0;width:2px;transform:translateX(-2px);transition:left .5s linear}.bullet-chart-x-axis{background-color:transparent;display:flex;position:relative;height:28px;margin:0;padding:0}.bullet-chart-x-axis::before{content:"";position:absolute;left:-0.5px;top:0px;width:1px;height:5px;background-color:#d7d7d7;box-sizing:border-box}.bullet-chart-x-axis::after{content:attr(data-bullet-chart-x-axis-after);position:absolute;top:10px;left:0px;transform:translateX(-50%);font-weight:400;font-size:14px;line-height:18px;color:rgba(0,0,0,.45)}.bullet-chart-x-axis-item{flex:1;list-style:none;height:100%;position:relative}.bullet-chart-x-axis-item::after{content:"";position:absolute;right:-0.5px;top:0px;width:1px;height:5px;background-color:#d7d7d7;box-sizing:border-box}.bullet-chart-x-axis-item-label{position:absolute;top:10px;right:0px;transform:translateX(50%);font-weight:400;font-size:14px;line-height:18px;color:rgba(0,0,0,.45)}.bullet-chart-bubble-tip-container{width:0;height:0;margin:0;padding:0}.bullet-chart-bubble-tip-container .bullet-chart-tooltip-box{position:fixed;z-index:99;transition:all .1s ease-out;pointer-events:none;background-color:#fff;box-shadow:0 9px 28px rgba(0,0,0,.16);opacity:.95;border-radius:4px;border:none;box-sizing:border-box}',""]),t.Z=i},645:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,l){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(l)for(var o=0;o<this.length;o++){var r=this[o][0];null!=r&&(i[r]=!0)}for(var a=0;a<e.length;a++){var u=[].concat(e[a]);l&&i[u[0]]||(n&&(u[2]?u[2]="".concat(n," and ").concat(u[2]):u[2]=n),t.push(u))}},t}},251:function(e,t,n){var l=n(974),i=Symbol.for("react.element"),o=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),r=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,n){var l,u={},d=null,c=null;for(l in void 0!==n&&(d=""+n),void 0!==t.key&&(d=""+t.key),void 0!==t.ref&&(c=t.ref),t)o.call(t,l)&&!a.hasOwnProperty(l)&&(u[l]=t[l]);if(e&&e.defaultProps)for(l in t=e.defaultProps)void 0===u[l]&&(u[l]=t[l]);return{$$typeof:i,type:e,key:d,ref:c,props:u,_owner:r.current}}t.jsx=u,t.jsxs=u},893:function(e,t,n){e.exports=n(251)},379:function(e,t,n){var l,i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),o=[];function r(e){for(var t=-1,n=0;n<o.length;n++)if(o[n].identifier===e){t=n;break}return t}function a(e,t){for(var n={},l=[],i=0;i<e.length;i++){var a=e[i],u=t.base?a[0]+t.base:a[0],d=n[u]||0,c="".concat(u," ").concat(d);n[u]=d+1;var v=r(c),s={css:a[1],media:a[2],sourceMap:a[3]};-1!==v?(o[v].references++,o[v].updater(s)):o.push({identifier:c,updater:b(s,t),references:1}),l.push(c)}return l}function u(e){var t=document.createElement("style"),l=e.attributes||{};if(void 0===l.nonce){var o=n.nc;o&&(l.nonce=o)}if(Object.keys(l).forEach((function(e){t.setAttribute(e,l[e])})),"function"==typeof e.insert)e.insert(t);else{var r=i(e.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}return t}var d,c=(d=[],function(e,t){return d[e]=t,d.filter(Boolean).join("\n")});function v(e,t,n,l){var i=n?"":l.media?"@media ".concat(l.media," {").concat(l.css,"}"):l.css;if(e.styleSheet)e.styleSheet.cssText=c(t,i);else{var o=document.createTextNode(i),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(o,r[t]):e.appendChild(o)}}function s(e,t,n){var l=n.css,i=n.media,o=n.sourceMap;if(i?e.setAttribute("media",i):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(l+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=l;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(l))}}var f=null,h=0;function b(e,t){var n,l,i;if(t.singleton){var o=h++;n=f||(f=u(t)),l=v.bind(null,n,o,!1),i=v.bind(null,n,o,!0)}else n=u(t),l=s.bind(null,n,t),i=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return l(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;l(e=t)}else i()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===l&&(l=Boolean(window&&document&&document.all&&!window.atob)),l));var n=a(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var l=0;l<n.length;l++){var i=r(n[l]);o[i].references--}for(var u=a(e,t),d=0;d<n.length;d++){var c=r(n[d]);0===o[c].references&&(o[c].updater(),o.splice(c,1))}n=u}}}},974:function(e){e.exports=require("react")}},t={};function n(l){var i=t[l];if(void 0!==i)return i.exports;var o=t[l]={id:l,exports:{}};return e[l](o,o.exports,n),o.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var l={};!function(){n.r(l),n.d(l,{default:function(){return x}});var e=n(893),t=n(974),i=require("react-dom");function o(e){var n=e.state,l=e.options,i=(0,t.useState)(null),o=i[0],r=i[1],a=(0,t.useRef)({timer:null}).current;return(0,t.useEffect)((function(){(null==a?void 0:a.timer)||(a.timer=setTimeout((function(){r(n),a.timer&&clearTimeout(a.timer),a.timer=null}),null==l?void 0:l.wait))}),[n,null==l?void 0:l.wait]),o}o.defaultProps={state:null,options:{wait:0}};var r=o,a=function(e,t,n){if(n||2===arguments.length)for(var l,i=0,o=t.length;i<o;i++)!l&&i in t||(l||(l=Array.prototype.slice.call(t,0,i)),l[i]=t[i]);return e.concat(l||Array.prototype.slice.call(t))},u="_entranceValue",d=["K","M","B","T"];function c(e,t){var n,l;if(!e||"[object Function]"!==Object.prototype.toString.call(null==e?void 0:e.func))return String(t);var i=Array.isArray(null==e?void 0:e.params)&&(null===(n=null==e?void 0:e.params)||void 0===n?void 0:n.length)?function(e,t){var n=!1,l=null==e?void 0:e.map((function(e){return e===u?(n=!0,t):e}));return n?l:a([t],e,!0)}(null==e?void 0:e.params,t):[t];return null===(l=null==e?void 0:e.func)||void 0===l?void 0:l.call.apply(l,a([e],i,!1))}var v=function(e,t,n){void 0===n&&(n=1);var l=e/(t*n);return l<10?(null===Math||void 0===Math?void 0:Math.ceil(l))*t*n:l%10==0?e:10*(null===Math||void 0===Math?void 0:Math.ceil((null===Math||void 0===Math?void 0:Math.floor(l))/10))*t*n},s=function(e,t,n,l){return e?t:f(t,n,!0,l)},f=function(e,t,n,l){var i,o,r;void 0===n&&(n=!0);var a=e,u=e,f=n?null===(i=c(l,e))||void 0===i?void 0:i.slice(-1):e;if(!0===(null==d?void 0:d.includes(String(f)))){var h=null==d?void 0:d.indexOf(String(f));u=v(e,t,Math.pow(10,3*(h+1))),a=s((null===(o=c(l,u))||void 0===o?void 0:o.slice(-1))===f,u,t,l)}else u=v(e,t),a=s(!(null==d?void 0:d.includes(null===(r=c(l,u))||void 0===r?void 0:r.slice(-1))),u,t,l);return a},h=n(379),b=n.n(h),p=n(586),m=(b()(p.Z,{insert:"head",singleton:!1}),p.Z.locals,function(){return m=Object.assign||function(e){for(var t,n=1,l=arguments.length;n<l;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},m.apply(this,arguments)});function g(n){var l,o,a,u,v,s,h,b,p,g,x,y,M,w,S=n.className,k=n.style,B=n.tooltipClassName,N=n.tooltipStyle,L=n.splitCount,j=n.option,C=n.formatNumber,P=n.minPercentage,O=n.tooltipData,E=n.tooltipFormatter,T=n.isTooltipHalfAdaptPosition,_=n.isLabelKeepInteger,W=n.isCenterZeroLabel,A=(0,t.useState)(!1),R=A[0],z=A[1],F=(0,t.useState)(0),I=F[0],H=F[1],D=(0,t.useState)(!1),q=D[0],X=D[1],Z=(0,t.useState)(!1),U=Z[0],K=Z[1],Y=(0,t.useState)(0),$=Y[0],J=Y[1],V=(0,t.useState)(0),G=V[0],Q=V[1],ee=r({state:$,options:{wait:50}}),te=r({state:G,options:{wait:50}}),ne=(0,t.useState)(0),le=ne[0],ie=ne[1],oe=(0,t.useState)(0),re=oe[0],ae=oe[1],ue=(0,t.useState)(0),de=ue[0],ce=ue[1],ve=(0,t.useState)(0),se=ve[0],fe=ve[1],he=(0,t.useRef)(null),be=(0,t.useRef)(null),pe=(0,t.useRef)(null),me=(0,t.useMemo)((function(){return W?L%2==0?L:L+1:L||5}),[L,W,I,q]),ge=(0,t.useMemo)((function(){var e,t,n,l,i,o=String(null===(e=null==j?void 0:j.bgBar)||void 0===e?void 0:e.value),r=String(null===(t=null==j?void 0:j.mainBar)||void 0===t?void 0:t.value),a=String(null===(n=null==j?void 0:j.markLine)||void 0===n?void 0:n.value),u=[o,r,a],d=[Number(o)||0,Number(r)||0,Number(a)||0],c=null===Math||void 0===Math?void 0:Math.max.apply(Math,d),v=null===(l=String(c))||void 0===l?void 0:l.includes("-"),s=0;if(null===(i=null==u?void 0:u.join(""))||void 0===i?void 0:i.includes("-")){for(var h=0,b=0;b<(null==d?void 0:d.length);b++){var p=null==d?void 0:d[b];h=p<h?p:h}s=null===Math||void 0===Math?void 0:Math.abs(h);var m=v||0===c;X(m),c=W?c>=s?2*c:2*s:m?s:c+s}else W&&(c*=2);var g=f(c*(W||s&&!v?1+1/me*2:1+1/me),me,!0,C);return s&&H(s/g),g}),[me,W,null===(l=null==j?void 0:j.bgBar)||void 0===l?void 0:l.value,null===(o=null==j?void 0:j.mainBar)||void 0===o?void 0:o.value,null===(a=null==j?void 0:j.markLine)||void 0===a?void 0:a.value,null==C?void 0:C.func,null==C?void 0:C.params]),xe=(0,t.useMemo)((function(){if(W)return Math.ceil(me/2)+1;var e;return(e=0===I?1:I>0&&I<1/me?2:1===I||q?me+1:2+(null===Math||void 0===Math?void 0:Math.floor(I/(1/me))))>0?e:1}),[I,me,W,q]),ye=(0,t.useMemo)((function(){var e,t,n,l,i,o=[],r=null===(t=null===(e=c(C,ge/me))||void 0===e?void 0:e.split("."))||void 0===t?void 0:t[0];(null==d?void 0:d.includes(r.slice(-1)))&&(r=r.slice(0,-1));for(var a=c(C,ge),u=null==a?void 0:a.slice(-1),v=null==d?void 0:d.includes(u),s=(null===(l=null===(n=null==a?void 0:a.split("."))||void 0===n?void 0:n[1])||void 0===l?void 0:l.length)-(v?1:0),f=0;f<=me;f++){var h=c(C,ge*f/me);h=_?null===(i=null==h?void 0:h.split("."))||void 0===i?void 0:i[0]:v?null==h?void 0:h.slice(0,-1):h,(null==d?void 0:d.includes(h.slice(-1)))&&(h=h.slice(0,-1)),xe>1&&(h=Number(h)-Number(r)*(xe-1),!_&&s>0&&(h=String(h)+"."+String(Math.pow(10,s)).slice(1))),v&&0!==Number(h)&&(h+=u),o.push(String(0===Number(h)?"0":h))}return o}),[ge,xe,_,me,null==C?void 0:C.func,null==C?void 0:C.params]),Me=(0,t.useMemo)((function(){var e,t,n,l,i,o,r,a,u;return{bgBar:{color:(null===(e=null==j?void 0:j.bgBar)||void 0===e?void 0:e.color)||"#D4E8FF",barWidth:(null===(t=null==j?void 0:j.bgBar)||void 0===t?void 0:t.barWidth)||44,value:Number(null===(n=null==j?void 0:j.bgBar)||void 0===n?void 0:n.value)||0},mainBar:{color:(null===(l=null==j?void 0:j.mainBar)||void 0===l?void 0:l.color)||"#5086F3",barWidth:(null===(i=null==j?void 0:j.mainBar)||void 0===i?void 0:i.barWidth)||24,value:Number(null===(o=null==j?void 0:j.mainBar)||void 0===o?void 0:o.value)||0},markLine:{color:(null===(r=null==j?void 0:j.markLine)||void 0===r?void 0:r.color)||"#6A7597",barWidth:(null===(a=null==j?void 0:j.markLine)||void 0===a?void 0:a.barWidth)||44,value:Number(null===(u=null==j?void 0:j.markLine)||void 0===u?void 0:u.value)||0}}}),[j]),we=(0,t.useMemo)((function(){var e,t,n;if(!T)return!1;var l=((null===(t=null===(e=null==be?void 0:be.current)||void 0===e?void 0:e.getBoundingClientRect())||void 0===t?void 0:t.left)||0)+((null===(n=null==be?void 0:be.current)||void 0===n?void 0:n.clientWidth)||0)/2;return $>l}),[T,ee,te]),Se=(0,t.useMemo)((function(){var e,t,n,l,i,o,r={bgBar:{widthPercent:0,left:0},mainBar:{widthPercent:0,left:0},markLine:{widthPercent:0,left:0}};if(ge>0){var a=(null===Math||void 0===Math?void 0:Math.abs(null===(e=null==Me?void 0:Me.bgBar)||void 0===e?void 0:e.value))||0,u=(null===Math||void 0===Math?void 0:Math.abs(null===(t=null==Me?void 0:Me.mainBar)||void 0===t?void 0:t.value))||0,d=(null===Math||void 0===Math?void 0:Math.abs(null===(n=null==Me?void 0:Me.markLine)||void 0===n?void 0:n.value))||0,c=(null===(l=null==Me?void 0:Me.bgBar)||void 0===l?void 0:l.value)<0?"-":"",v=(null===(i=null==Me?void 0:Me.mainBar)||void 0===i?void 0:i.value)<0?"-":"",s=(null===(o=null==Me?void 0:Me.markLine)||void 0===o?void 0:o.value)<0?"-":"",f=(null===Math||void 0===Math?void 0:Math.round(a/ge*1e4))/100,h=(null===Math||void 0===Math?void 0:Math.round(u/ge*1e4))/100,b=(null===Math||void 0===Math?void 0:Math.round(d/ge*1e4))/100,p=100/me*(xe-1);r.bgBar.widthPercent=f<P?P:f,r.mainBar.widthPercent=h<P?P:h,r.markLine.widthPercent=b<P?P:b,xe>1?(r.bgBar.left=c?p-r.bgBar.widthPercent:p,r.mainBar.left=v?p-r.mainBar.widthPercent:p,r.markLine.left=s?p-r.markLine.widthPercent:p+r.markLine.widthPercent):r.markLine.left=r.markLine.widthPercent}return r}),[ge,me,xe,P,null===(u=null==Me?void 0:Me.bgBar)||void 0===u?void 0:u.value,null===(v=null==Me?void 0:Me.mainBar)||void 0===v?void 0:v.value,null===(s=null==Me?void 0:Me.markLine)||void 0===s?void 0:s.value]),ke=Se.bgBar,Be=Se.mainBar,Ne=Se.markLine,Le=(0,t.useCallback)((function(e){K(!0),J((null==e?void 0:e.clientX)||0),Q((null==e?void 0:e.clientY)||0)}),[]),je=(0,t.useCallback)((function(e){K(!1)}),[]),Ce=(0,t.useCallback)((function(e){J((null==e?void 0:e.clientX)||0),Q((null==e?void 0:e.clientY)||0)}),[]);return(0,t.useEffect)((function(){var e,t,n,l;U?(ce(we?$-30-((null===(e=null==pe?void 0:pe.current)||void 0===e?void 0:e.clientWidth)||0):$+30),fe(G-((null===(t=null==pe?void 0:pe.current)||void 0===t?void 0:t.clientHeight)||0)/2)):(de||ce("calc(50% - ".concat(((null===(n=null==pe?void 0:pe.current)||void 0===n?void 0:n.clientWidth)||0)/2,"px)")),se||fe("calc(50% - ".concat(((null===(l=null==pe?void 0:pe.current)||void 0===l?void 0:l.clientHeight)||0)/2,"px)")))}),[U,we,ee,te]),(0,t.useEffect)((function(){if(!document.querySelector(".bullet-chart-bubble-tip-container")){var e=document.createElement("section");e.className="bullet-chart-bubble-tip-container",document.body.appendChild(e)}z(!0)}),[]),(0,t.useEffect)((function(){var e;(null==he?void 0:he.current)&&(null===(e=null==he?void 0:he.current)||void 0===e||e.setAttribute("data-bullet-chart-x-axis-after",(null==ye?void 0:ye[0])||"-"))}),[null==ye?void 0:ye[0]]),(0,t.useEffect)((function(){var e=(null==ye?void 0:ye[0])||"-",t=(null==ye?void 0:ye[(null==ye?void 0:ye.length)-1])||"-",n=document.createElement("li");n.className="bullet-chart-x-axis-item",n.style.cssText="position:absolute;visibility:hidden;";var l=document.createElement("span");l.className="bullet-chart-x-axis-item-label",l.style.cssText="position:absolute;visibility:hidden;";var i=setInterval((function(){if(null==he?void 0:he.current){l.innerHTML=e,n.appendChild(l),he.current.appendChild(n);var o=l.offsetWidth||0;ie(o/2),l.innerHTML=t;var r=l.offsetWidth||0;ae(r/2),n.removeChild(l),he.current.removeChild(n),clearInterval(i)}}),100)}),[null==ye?void 0:ye[0],null==ye?void 0:ye[(null==ye?void 0:ye.length)-1]]),(0,e.jsxs)("section",m({className:"bullet-chart ".concat(S),style:m(m({},k),{padding:"0 ".concat(re,"px 0 ").concat(le,"px")})},{children:[(0,e.jsxs)("section",m({ref:be,className:"bullet-chart-body",style:{height:null===(h=null==Me?void 0:Me.bgBar)||void 0===h?void 0:h.barWidth},onMouseEnter:Le,onMouseLeave:je,onMouseMove:Ce},{children:[(0,e.jsx)("section",{className:"bullet-chart-bg-bar",style:{backgroundColor:null===(b=null==Me?void 0:Me.bgBar)||void 0===b?void 0:b.color,width:"".concat(null==ke?void 0:ke.widthPercent,"%"),left:"".concat(null==ke?void 0:ke.left,"%"),height:null===(p=null==Me?void 0:Me.bgBar)||void 0===p?void 0:p.barWidth}}),(0,e.jsx)("section",{className:"bullet-chart-main-bar",style:{backgroundColor:null===(g=null==Me?void 0:Me.mainBar)||void 0===g?void 0:g.color,width:"".concat(Be.widthPercent,"%"),left:"".concat(Be.left,"%"),height:null===(x=null==Me?void 0:Me.mainBar)||void 0===x?void 0:x.barWidth}}),(0,e.jsx)("section",{className:"bullet-chart-mark-line",style:{backgroundColor:null===(y=null==Me?void 0:Me.markLine)||void 0===y?void 0:y.color,left:"".concat(null==Ne?void 0:Ne.left,"%"),height:null===(M=null==Me?void 0:Me.markLine)||void 0===M?void 0:M.barWidth}})]})),(0,e.jsx)("ul",m({ref:he,"data-bullet-chart-x-axis-after":"",className:"bullet-chart-x-axis"},{children:0!==ge&&(null===(w=null==ye?void 0:ye.slice(1))||void 0===w?void 0:w.map((function(t){return(0,e.jsx)("li",m({className:"bullet-chart-x-axis-item"},{children:(0,e.jsx)("span",m({className:"bullet-chart-x-axis-item-label"},{children:t||"-"}))}),t)})))})),R&&(0,i.createPortal)((0,e.jsx)("section",m({ref:pe,className:"bullet-chart-tooltip-box ".concat(B),style:m(m({},N),{display:U?"block":"none",left:de,top:se})},{children:"[object Function]"===Object.prototype.toString.call(E)?null==E?void 0:E(O):null})),document.querySelector(".bullet-chart-bubble-tip-container"))]}))}g.defaultProps={className:"",style:{},tooltipClassName:"",tooltipStyle:{},splitCount:5,option:{},formatNumber:null,minPercentage:.5,tooltipData:null,tooltipFormatter:null,isTooltipHalfAdaptPosition:!1,isLabelKeepInteger:!0,isCenterZeroLabel:!1};var x=(0,t.memo)(g)}(),module.exports=l}();