billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
14 lines (13 loc) • 17.2 kB
JavaScript
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 4.0.3
* @requires billboard.js
* @summary billboard.js plugin
*/(function(u,h){typeof exports=="object"&&typeof module=="object"?module.exports=h():typeof define=="function"&&define.amd?define("bb",[],h):typeof exports=="object"?exports.bb=h():(u.bb=u.bb||{},u.bb.plugin=u.bb.plugin||{},u.bb.plugin.sparkline=h())})(this,function(){return(function(){"use strict";var d={};(function(){d.d=function(e,t){if(Array.isArray(t))for(var n=0;n<t.length;){var r=t[n++],i=t[n++];d.o(e,r)?i===0&&n++:i===0?Object.defineProperty(e,r,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,r,{enumerable:!0,get:i})}else for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}})(),(function(){d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}})();var u={};d.d(u,{default:function(){return H}});var h=Object.defineProperty,T=Object.getOwnPropertySymbols,k=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,A=(e,t,n)=>t in e?h(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,c=(e,t)=>{for(var n in t||(t={}))k.call(t,n)&&A(e,n,t[n]);if(T)for(var n of T(t))X.call(t,n)&&A(e,n,t[n]);return e};const w={button:"bb-button",chart:"bb-chart",empty:"bb-empty",main:"bb-main",target:"bb-target",EXPANDED:"_expanded_",dummy:"_dummy_"},U={arc:"bb-arc",arcLabelLine:"bb-arc-label-line",arcLabelLineText:"bb-arc-label-line-text",arcRange:"bb-arc-range",arcs:"bb-arcs",chartArc:"bb-chart-arc",chartArcs:"bb-chart-arcs",chartArcsBackground:"bb-chart-arcs-background",chartArcsTitle:"bb-chart-arcs-title",needle:"bb-needle"},Y={area:"bb-area",areas:"bb-areas"},V={axis:"bb-axis",axisX:"bb-axis-x",axisXLabel:"bb-axis-x-label",axisY:"bb-axis-y",axisY2:"bb-axis-y2",axisY2Label:"bb-axis-y2-label",axisYLabel:"bb-axis-y-label",axisXTooltip:"bb-axis-x-tooltip",axisYTooltip:"bb-axis-y-tooltip",axisY2Tooltip:"bb-axis-y2-tooltip",axisTooltipX:"bb-axis-tooltip-x",axisTooltipY:"bb-axis-tooltip-y"},G={bar:"bb-bar",bars:"bb-bars",chartBar:"bb-chart-bar",chartBars:"bb-chart-bars",barConnectLine:"bb-bar-connectLine"},z={candlestick:"bb-candlestick",candlesticks:"bb-candlesticks",chartCandlestick:"bb-chart-candlestick",chartCandlesticks:"bb-chart-candlesticks",valueDown:"bb-value-down",valueUp:"bb-value-up"},W={chartCircles:"bb-chart-circles",circle:"bb-circle",circles:"bb-circles"},K={colorPattern:"bb-color-pattern",colorScale:"bb-colorscale"},Z={dragarea:"bb-dragarea",INCLUDED:"_included_"},J={funnel:"bb-funnel",chartFunnel:"bb-chart-funnel",chartFunnels:"bb-chart-funnels",funnelBackground:"bb-funnel-background"},Q={chartArcsGaugeMax:"bb-chart-arcs-gauge-max",chartArcsGaugeMin:"bb-chart-arcs-gauge-min",chartArcsGaugeUnit:"bb-chart-arcs-gauge-unit",chartArcsGaugeTitle:"bb-chart-arcs-gauge-title",gaugeValue:"bb-gauge-value"},ee={legend:"bb-legend",legendBackground:"bb-legend-background",legendItem:"bb-legend-item",legendItemEvent:"bb-legend-item-event",legendItemHidden:"bb-legend-item-hidden",legendItemPoint:"bb-legend-item-point",legendItemTile:"bb-legend-item-tile"},te={chartLine:"bb-chart-line",chartLines:"bb-chart-lines",line:"bb-line",lines:"bb-lines"},ne={eventRect:"bb-event-rect",eventRects:"bb-event-rects",eventRectsMultiple:"bb-event-rects-multiple",eventRectsSingle:"bb-event-rects-single"},re={focused:"bb-focused",defocused:"bb-defocused",legendItemFocused:"bb-legend-item-focused",xgridFocus:"bb-xgrid-focus",ygridFocus:"bb-ygrid-focus"},ie={grid:"bb-grid",gridLines:"bb-grid-lines",xgrid:"bb-xgrid",xgridLine:"bb-xgrid-line",xgridLines:"bb-xgrid-lines",xgrids:"bb-xgrids",ygrid:"bb-ygrid",ygridLine:"bb-ygrid-line",ygridLines:"bb-ygrid-lines",ygrids:"bb-ygrids"},oe={level:"bb-level",levels:"bb-levels"},se={chartRadar:"bb-chart-radar",chartRadars:"bb-chart-radars"},ce={region:"bb-region",regions:"bb-regions"},le={selectedCircle:"bb-selected-circle",selectedCircles:"bb-selected-circles",SELECTED:"_selected_"},ae={shape:"bb-shape",shapes:"bb-shapes"},ue={brush:"bb-brush",subchart:"bb-subchart"},be={chartText:"bb-chart-text",chartTexts:"bb-chart-texts",text:"bb-text",texts:"bb-texts",title:"bb-title",textBorderRect:"bb-text-border",textLabelImage:"bb-text-label-image",TextOverlapping:"text-overlapping"},fe={tooltip:"bb-tooltip",tooltipContainer:"bb-tooltip-container",tooltipName:"bb-tooltip-name"},de={treemap:"bb-treemap",chartTreemap:"bb-chart-treemap",chartTreemaps:"bb-chart-treemaps"},he={buttonZoomReset:"bb-zoom-reset",zoomBrush:"bb-zoom-brush"};var Ke=c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c({},w),U),Y),V),G),z),W),K),Z),Q),ee),te),ne),re),J),ie),oe),se),ce),le),ae),ue),be),fe),de),he);function pe(){return typeof globalThis=="object"&&globalThis!==null&&globalThis.Object===Object&&globalThis||typeof self=="object"&&self!==null&&self.Object===Object&&self||Function("return this")()}function ge(e){const t=typeof(e==null?void 0:e.requestAnimationFrame)=="function"&&typeof(e==null?void 0:e.cancelAnimationFrame)=="function",n=typeof(e==null?void 0:e.requestIdleCallback)=="function"&&typeof(e==null?void 0:e.cancelIdleCallback)=="function",r=o=>setTimeout(o,1),i=o=>clearTimeout(o);return[t?e.requestAnimationFrame:r,t?e.cancelAnimationFrame:i,n?e.requestIdleCallback:r,n?e.cancelIdleCallback:i]}const g=pe(),me=g==null?void 0:g.document,[Ze,Je,Qe,et]=ge(g),tt=e=>e||e===0,nt=e=>typeof e=="function",ve=e=>typeof e=="string",ye=e=>typeof e=="number",_e=e=>typeof e=="undefined",xe=e=>typeof e!="undefined",rt=e=>typeof e=="boolean",it=e=>Math.ceil(e/10)*10,ot=e=>Math.ceil(e)+.5,st=e=>e[1]-e[0],v=e=>typeof e=="object",$e=e=>{for(const t in e)return!1;return!0},Ee=e=>_e(e)||e===null||ve(e)&&e.length===0||v(e)&&!(e instanceof Date)&&$e(e)||ye(e)&&isNaN(e),ct=e=>!Ee(e),C=e=>Array.isArray(e),y=e=>e&&!(e!=null&&e.nodeType)&&v(e)&&!C(e);var Oe,Te,P,Ae,R,I,we,S,_,Ce=Object.defineProperty,j=Object.getOwnPropertySymbols,Pe=Object.prototype.hasOwnProperty,Re=Object.prototype.propertyIsEnumerable,D=(e,t,n)=>t in e?Ce(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,L=(e,t)=>{for(var n in t||(t={}))Pe.call(t,n)&&D(e,n,t[n]);if(j)for(var n of j(t))Re.call(t,n)&&D(e,n,t[n]);return e};function F(e,t){for(let n=0;n<e.length;n++){const r=e[n];r!==null&&P(r)&&t(r,n)}}function lt(e,t,n){return P(e[t])?e[t]:n}function at(e,t){for(const n in e)if(e[n]===t)return!0;return!1}function ut(e,t,...n){const r=Ae(e);return r&&e.call(t,...n),r}function bt(e,t){let n=0;const r=function(...i){!--n&&t.apply(this,i)};"duration"in e?e.each(()=>++n).on("end",r):(++n,e.call(r))}const ft=e=>e.charAt(0).toUpperCase()+e.slice(1);function dt(e,t="-"){return e.split(t).map((n,r)=>r?n.charAt(0).toUpperCase()+n.slice(1).toLowerCase():n.toLowerCase()).join("")}const ht=e=>[].slice.call(e);function pt(...e){const t=n=>{if(R(n))return n.map(t);if(I(n)&&n.constructor){const r=new n.constructor;for(const i in n)r[i]=t(n[i]);return r}return n};return e.map(n=>t(n)).reduce((n,r)=>L(L({},n),r))}function Ie(e={},t){R(t)&&t.forEach(n=>Ie(e,n));for(const n in t)/^\d+$/.test(n)||n in e||(e[n]=t[n]);return e}function gt(e){const t=e[0]instanceof Date,n=Array.from(new Set(t?e.map(Number):e));return t?n.map(r=>new Date(r)):n}function mt(e){return e&&e.length?e.reduce((t,n)=>t.concat(n)):[]}function x(e,...t){if(!t.length||t.length===1&&!t[0])return e;const n=t.shift();return y(e)&&y(n)&&Object.keys(n).forEach(r=>{if(!/^(__proto__|constructor|prototype)$/i.test(r)){const i=n[r];i instanceof Date?e[r]=new Date(i.getTime()):y(i)?(!e[r]&&(e[r]={}),e[r]=x(e[r],i)):e[r]=C(i)?i.concat():i}}),x(e,...t)}function Se(e,t=!0){let n;return e[0]instanceof Date?n=t?(r,i)=>r-i:(r,i)=>i-r:t&&!e.every(isNaN)?n=(r,i)=>r-i:t||(n=(r,i)=>r>i&&-1||r<i&&1||r===i&&0),e.concat().sort(n)}function vt(e,t){let n=t.filter(r=>we(r));if(n.length)if(S(n[0])){let r=e==="min"?1/0:-1/0;for(const i of n)(e==="min"?i<r:i>r)&&(r=i);n=r}else n[0]instanceof Date&&(n=Se(n,e==="min")[0]);else n=void 0;return n}const yt=(e,t,n=1)=>{const r=[],i=Math.max(0,Math.ceil((t-e)/n))|0;for(let o=0;o<i;o++)r.push(e+o*n);return r};let je=0;function _t(e=!0){const t=++je;return e?String(t):t}function M(e,t,n,r,i){if(n>r)return-1;const o=Math.floor((n+r)/2);let{x:s,w:l=0}=e[o];return i&&(s=e[o].y,l=e[o].h),t>=s&&t<=s+l?o:t<s?M(e,t,n,o-1,i):M(e,t,o+1,r,i)}function xt(e,t){return Te(e.replace(/\{=([^}]+)\}/g,(n,r)=>{var i;return(i=t[r])!=null?i:""}))}function $t(e){var t;let n;if(e instanceof Date)n=e;else if(_(e)){const{config:r,format:i}=this;n=(t=i.dataTime(r.data_xFormat)(e))!=null?t:new Date(e)}else S(e)&&!isNaN(e)&&(n=new Date(+e));return(!n||isNaN(+n))&&console&&console.error&&console.error(`Failed to parse x '${e}' to Date object`),n}function Et(e){if(I(e)&&!_(e)){const s=e;return{top:s.top||0,right:s.right||0,bottom:s.bottom||0,left:s.left||0}}const t=(_(e)?e.trim().split(/\s+/):[e]).map(s=>+s||0),[n,r=n,i=n,o=r]=t;return{top:n,right:r,bottom:i,left:o}}function De(e,t){t()===!1?Oe(()=>De(e,t)):e()}function Ot(e,t=(n=>n)){const n=new Set;return F(e,(r,i)=>{n.add(t(r,i))}),n}function Tt(e,t,n=(r=>r)){const r=new Map;return F(e,(i,o)=>{r.set(t(i,o),n(i,o))}),r}var Le,b,$,Fe,Me;const Be=/\s?(bb-)/g,Ne=/\.+/g;function qe(e){return e.replace(Be,".$1").replace(Ne,".")}function B(e,t,n=!1){const r=o=>o[e?"getBoundingClientRect":"getBBox"](),i=e?"rectClient":"rectBBox";return n?r(t):!(i in t)||t.hasAttribute("width")&&t[i].width!==+(t.getAttribute("width")||0)?t[i]=r(t):t[i]}function At(e,t,n=[-1,1],r=!1){if(!(!e||!Me(t)))if(t.indexOf(`
`)===-1)e.text(t);else{const i=[e.text(),t].map(o=>o.replace(/[\s\n]/g,""));if(i[0]!==i[1]){const o=t.split(`
`),s=r?o.length-1:1;e.html(""),o.forEach((l,a)=>{e.append("tspan").attr("x",0).attr("dy",`${a===0?n[0]*s:n[1]}em`).text(l)})}}}function He(e){const{x:t,y:n,width:r,height:i}=ke(e,!0);return[{x:t,y:n+i},{x:t,y:n},{x:t+r,y:n},{x:t+r,y:n+i}]}function wt(e){const{width:t,height:n}=E(e),r=He(e),i=r[0].x,o=Math.min(r[0].y,r[1].y);return{x:i,y:o,width:t,height:n}}function Ct(e,t){var n;const r=e&&((n=e.touches||e.sourceEvent&&e.sourceEvent.touches)==null?void 0:n[0]);let i=[0,0];try{i=Le(r||e,t)}catch(o){}return i.map(o=>isNaN(o)?0:o)}function E(e,t=!1){return B(!0,e,t)}function ke(e,t=!1){return B(!1,e,t)}function Pt(e,t,n){const{rootSelector:r="",sheet:i}=e,o=`${r} ${qe(t)} {${n.join(";")}}`;return i[i.insertRule?"insertRule":"addRule"](o,i.cssRules.length)}function Rt(e){let t=[];return e.forEach(n=>{var r;try{n.cssRules&&n.cssRules.length&&(t=t.concat(Fe(n.cssRules)))}catch(i){(r=b.console)==null||r.warn(`Error while reading rules from ${n.href}: ${String(i)}`)}}),t}function It(e){var t,n,r,i,o,s;return{x:((n=(t=b.pageXOffset)!=null?t:b.scrollX)!=null?n:0)+((r=e.scrollLeft)!=null?r:0),y:((o=(i=b.pageYOffset)!=null?i:b.scrollY)!=null?o:0)+((s=e.scrollTop)!=null?s:0)}}function St(e,t=0,n=0,r=!0){const i=new DOMPoint(t,n),o=e.getScreenCTM(),s=i.matrixTransform(r?o==null?void 0:o.inverse():o);if(r===!1){const l=E(e);s.x-=l.x,s.y-=l.y}return s}function Xe(e){const t=e?e.transform:null,n=t&&t.baseVal;return n&&n.numberOfItems?n.getItem(0).matrix:{a:0,b:0,c:0,d:0,e:0,f:0}}function jt(e,t){var n;const r=(n=e==null?void 0:e.getAttribute)==null?void 0:n.call(e,t);if(r)return parseFloat(r);const i=Xe(e);return t==="x"?i.e:i.f}function Dt(e){const t=e.attr("viewBox");return t?t.trim().split(/[\s,]+/).length===4:!1}function Lt(e,t,n=!1){const r=!!e.node;let i=!1;for(const[o,s]of Object.entries(t))if(i=r?e.style(o)===s:e.style[o]===s,n?!i:i)break;return i}function Ft(){var e,t;return((e=$)==null?void 0:e.hidden)===!1||((t=$)==null?void 0:t.visibilityState)==="visible"}function Mt(e,t){const{DocumentTouch:n,matchMedia:r,navigator:i}=b,o=r==null?void 0:r("(pointer:coarse)").matches;let s=!1;if(t)if(i&&"maxTouchPoints"in i)s=i.maxTouchPoints>0;else if("ontouchmove"in b||n&&$ instanceof n)s=!0;else if(o)s=!0;else{const a=i.userAgent;s=/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(a)||/\b(Android|Windows Phone|iPad|iPod)\b/i.test(a)}return e&&!o&&(r==null?void 0:r("(pointer:fine)").matches)&&"mouse"||s&&"touch"||"mouse"}function Bt(e,t){e.pendingRaf!==null?(b.cancelAnimationFrame(e.pendingRaf),e.pendingRaf=b.requestAnimationFrame(()=>{e.pendingRaf=null,t()})):(e.pendingRaf=b.requestAnimationFrame(()=>{e.pendingRaf=null}),t())}const Nt={mouse:(()=>{const e=()=>({bubbles:!1,cancelable:!1,screenX:0,screenY:0,clientX:0,clientY:0});try{return new MouseEvent("t"),(t,n,r=e())=>{t.dispatchEvent(new MouseEvent(n,r))}}catch(t){return(n,r,i=e())=>{const o=me.createEvent("MouseEvent");o.initMouseEvent(r,i.bubbles,i.cancelable,g,0,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),n.dispatchEvent(o)}}})(),touch:(e,t,n)=>{const r=new Touch(x({identifier:Date.now(),target:e,radiusX:2.5,radiusY:2.5,rotationAngle:10,force:.5},n));e.dispatchEvent(new TouchEvent(t,{cancelable:!0,bubbles:!0,shiftKey:!0,touches:[r],targetTouches:[],changedTouches:[r]}))}};function Ue(e){const t=this.config;let n,r,i;const o=()=>{const s=r.shift();if(s&&n&&v(n)&&s in n)return n=n[s],o();if(!s)return n};Object.keys(t).forEach(s=>{n=e,r=s.split("_"),i=o(),xe(i)&&(t[s]=i)}),this.api&&(this.state.orgConfig=e)}var Ye=Object.defineProperty,Ve=(e,t,n)=>t in e?Ye(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,m=(e,t,n)=>Ve(e,typeof t!="symbol"?t+"":t,n);class N{constructor(t={}){m(this,"$$"),m(this,"options"),m(this,"config"),this.options=t}loadConfig(){Ue.call(this,this.options)}$beforeInit(){}$init(){}$afterInit(){}$redraw(){}$willDestroy(){Object.keys(this).forEach(t=>{this[t]=null,delete this[t]})}}m(N,"version","4.0.3");class Ge{constructor(){return{selector:void 0}}}var ze=Object.defineProperty,We=(e,t,n)=>t in e?ze(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,q=(e,t,n)=>We(e,typeof t!="symbol"?t+"":t,n);class H extends N{constructor(t){return super(t),q(this,"element"),this.config=new Ge,this}$beforeInit(){this.loadConfig(),this.validate(),this.element=[].slice.call(document.querySelectorAll(this.config.selector)),this.overrideInternals(),this.overrideOptions(),this.overHandler=this.overHandler.bind(this),this.moveHandler=this.moveHandler.bind(this),this.outHandler=this.outHandler.bind(this)}validate(){const{$$:t,config:n}=this;let r="";if((!n.selector||!document.querySelector(n.selector))&&(r="No holder elements found from given selector option."),(t.hasType("bubble")||t.hasType("scatter")||t.hasArcType(t.data.targets))&&(r="Contains non supported chart types."),r)throw new Error(`[Sparkline plugin] ${r}`)}overrideInternals(){const{$$:t}=this,{getBarW:n,getIndices:r}=t;t.getIndices=function(i,o,s){return s==="getShapeX"?{}:r.call(this,i,o)},t.getBarW=function(i,o){return n.call(this,i,o,1)}}overrideOptions(){const{config:t}=this.$$;if(t.legend_show=!1,t.resize_auto=!1,t.axis_x_show=!1,t.padding!==!1){const n=r=>Object.keys(r||{}).length>0;n(t.axis_x_padding)&&(t.axis_x_padding={left:15,right:15,unit:"px"}),n(t.axis_y_padding)&&(t.axis_y_padding=5)}t.axis_y_show=!1,t.tooltip_position||(t.tooltip_position=function(n,r,i){const{internal:{state:{event:o}}}=this;let s=o.pageY-i*1.35,l=o.pageX-r/2;return s<0&&(s=0),l<0&&(l=0),{top:s,left:l}})}$init(){var t;const{$$:{$el:n}}=this;n.chart.style("width","0").style("height","0").style("pointer-events","none"),(t=n.tooltip)!=null&&t.node()&&document.body.appendChild(n.tooltip.node())}$afterInit(){const{$$:t}=this;t.$el.svg.attr("style",null).style("width","0").style("height","0"),this.bindEvents(!0)}bindEvents(t=!0){const{$$:{config:n}}=this;if(n.interaction_enabled&&n.tooltip_show){const r=`${t?"add":"remove"}EventListener`;this.element.forEach(i=>{const o=i.querySelector("svg");o[r]("mouseover",this.overHandler),o[r]("mousemove",this.moveHandler),o[r]("mouseout",this.outHandler)})}}overHandler(t){const{$$:n}=this,{state:{eventReceiver:r}}=n;r.rect=E(t.target,!0)}moveHandler(t){var n,r,i,o;const{$$:s}=this,l=s.getDataIndexFromEvent(t),a=(n=s.api.data(t.target.__id))==null?void 0:n[0],f=(r=a==null?void 0:a.values)==null?void 0:r[l];f&&!f.name&&(f.name=f.id),s.state.event=t,(i=s.isPointFocusOnly)!=null&&i.call(s)&&f&&((o=s.showCircleFocus)==null||o.call(s,[f])),s.setExpand(l,a.id,!0),s.showTooltip([f],t.target)}outHandler(t){const{$$:n}=this;n.state.event=t,n.isPointFocusOnly()?n.hideCircleFocus():n.unexpandCircles(),n.hideTooltip()}$redraw(){var t;const{$$:n}=this,{$el:r}=n;let i=this.element;const o=n.api.data(),s=(t=r.chart.html().match(/<svg[^>]*>/))==null?void 0:t[0];if(i.length<o.length){const l=r.chart.node();for(let a=o.length-i.length;a>0;a--)l.parentNode.insertBefore(i[0].cloneNode(),l.nextSibling);this.element=document.querySelectorAll(this.config.selector),i=this.element}o.map(l=>l.id).forEach((l,a)=>{const f=`.${w.target}-${l}`,O=r.main.selectAll(f);let p=i[a].querySelector("svg");p||(i[a].innerHTML=`${s}</svg>`,p=i[a].querySelector("svg"),p.__id=l),p.querySelector(f)||O.style("opacity",null),O.style("fill","none").style("opacity",null),p.innerHTML="",p.appendChild(O.node())})}$willDestroy(){this.bindEvents(!1),this.element.forEach(t=>{t.innerHTML=""})}}return q(H,"version","0.0.1"),u=u.default,u})()});