UNPKG

billboard.js

Version:

Re-usable easy interface JavaScript chart library, based on D3 v4+

14 lines (13 loc) 17.3 kB
/*! * 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.1 * @requires billboard.js * @summary billboard.js plugin */(function(f,d){typeof exports=="object"&&typeof module=="object"?module.exports=d(require("d3-selection")):typeof define=="function"&&define.amd?define("bb",["d3-selection"],d):typeof exports=="object"?exports.bb=d(require("d3-selection")):(f.bb=f.bb||{},f.bb.plugin=f.bb.plugin||{},f.bb.plugin.sparkline=d(f.d3))})(this,function(w){return(function(){"use strict";var f={747:(function(e){e.exports=w})},d={};function h(e){var t=d[e];if(t!==void 0)return t.exports;var n=d[e]={exports:{}};return f[e](n,n.exports,h),n.exports}(function(){h.d=function(e,t){for(var n in t)h.o(t,n)&&!h.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(function(){h.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}})();var g={};h.d(g,{default:function(){return X}});var U=Object.defineProperty,A=Object.getOwnPropertySymbols,Y=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,C=(e,t,n)=>t in e?U(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,c=(e,t)=>{for(var n in t||(t={}))Y.call(t,n)&&C(e,n,t[n]);if(A)for(var n of A(t))V.call(t,n)&&C(e,n,t[n]);return e};const P={button:"bb-button",chart:"bb-chart",empty:"bb-empty",main:"bb-main",target:"bb-target",EXPANDED:"_expanded_",dummy:"_dummy_"},G={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"},z={area:"bb-area",areas:"bb-areas"},W={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"},K={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"},J={chartCircles:"bb-chart-circles",circle:"bb-circle",circles:"bb-circles"},Q={colorPattern:"bb-color-pattern",colorScale:"bb-colorscale"},ee={dragarea:"bb-dragarea",INCLUDED:"_included_"},te={funnel:"bb-funnel",chartFunnel:"bb-chart-funnel",chartFunnels:"bb-chart-funnels",funnelBackground:"bb-funnel-background"},ne={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"},re={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"},ie={chartLine:"bb-chart-line",chartLines:"bb-chart-lines",line:"bb-line",lines:"bb-lines"},oe={eventRect:"bb-event-rect",eventRects:"bb-event-rects",eventRectsMultiple:"bb-event-rects-multiple",eventRectsSingle:"bb-event-rects-single"},se={focused:"bb-focused",defocused:"bb-defocused",legendItemFocused:"bb-legend-item-focused",xgridFocus:"bb-xgrid-focus",ygridFocus:"bb-ygrid-focus"},ce={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"},le={level:"bb-level",levels:"bb-levels"},ae={chartRadar:"bb-chart-radar",chartRadars:"bb-chart-radars"},ue={region:"bb-region",regions:"bb-regions"},be={selectedCircle:"bb-selected-circle",selectedCircles:"bb-selected-circles",SELECTED:"_selected_"},fe={shape:"bb-shape",shapes:"bb-shapes"},de={brush:"bb-brush",subchart:"bb-subchart"},he={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"},pe={tooltip:"bb-tooltip",tooltipContainer:"bb-tooltip-container",tooltipName:"bb-tooltip-name"},ge={treemap:"bb-treemap",chartTreemap:"bb-chart-treemap",chartTreemaps:"bb-chart-treemaps"},me={buttonZoomReset:"bb-zoom-reset",zoomBrush:"bb-zoom-brush"};var Qe=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({},P),G),z),W),K),Z),J),Q),ee),ne),re),ie),oe),se),te),ce),le),ae),ue),be),fe),de),he),pe),ge),me),et=h(747);function ve(){return typeof globalThis=="object"&&globalThis!==null&&globalThis.Object===Object&&globalThis||typeof self=="object"&&self!==null&&self.Object===Object&&self||Function("return this")()}function _e(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 m=ve(),xe=m==null?void 0:m.document,[tt,nt,rt,it]=_e(m),ot=e=>e||e===0,st=e=>typeof e=="function",ye=e=>typeof e=="string",$e=e=>typeof e=="number",Ee=e=>typeof e=="undefined",Oe=e=>typeof e!="undefined",ct=e=>typeof e=="boolean",lt=e=>Math.ceil(e/10)*10,at=e=>Math.ceil(e)+.5,ut=e=>e[1]-e[0],_=e=>typeof e=="object",Te=e=>{for(const t in e)return!1;return!0},we=e=>Ee(e)||e===null||ye(e)&&e.length===0||_(e)&&!(e instanceof Date)&&Te(e)||$e(e)&&isNaN(e),bt=e=>!we(e),R=e=>Array.isArray(e),x=e=>e&&!(e!=null&&e.nodeType)&&_(e)&&!R(e);var Ae,Ce,I,Pe,S,j,Re,D,y,Ie=Object.defineProperty,L=Object.getOwnPropertySymbols,Se=Object.prototype.hasOwnProperty,je=Object.prototype.propertyIsEnumerable,F=(e,t,n)=>t in e?Ie(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,M=(e,t)=>{for(var n in t||(t={}))Se.call(t,n)&&F(e,n,t[n]);if(L)for(var n of L(t))je.call(t,n)&&F(e,n,t[n]);return e};function B(e,t){for(let n=0;n<e.length;n++){const r=e[n];r!==null&&I(r)&&t(r,n)}}function ft(e,t,n){return I(e[t])?e[t]:n}function dt(e,t){for(const n in e)if(e[n]===t)return!0;return!1}function ht(e,t,...n){const r=Pe(e);return r&&e.call(t,...n),r}function pt(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 gt=e=>e.charAt(0).toUpperCase()+e.slice(1);function mt(e,t="-"){return e.split(t).map((n,r)=>r?n.charAt(0).toUpperCase()+n.slice(1).toLowerCase():n.toLowerCase()).join("")}const vt=e=>[].slice.call(e);function _t(...e){const t=n=>{if(S(n))return n.map(t);if(j(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)=>M(M({},n),r))}function De(e={},t){S(t)&&t.forEach(n=>De(e,n));for(const n in t)/^\d+$/.test(n)||n in e||(e[n]=t[n]);return e}function xt(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 yt(e){return e&&e.length?e.reduce((t,n)=>t.concat(n)):[]}function $(e,...t){if(!t.length||t.length===1&&!t[0])return e;const n=t.shift();return x(e)&&x(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()):x(i)?(!e[r]&&(e[r]={}),e[r]=$(e[r],i)):e[r]=R(i)?i.concat():i}}),$(e,...t)}function Le(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 $t(e,t){let n=t.filter(r=>Re(r));if(n.length)if(D(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=Le(n,e==="min")[0]);else n=void 0;return n}const Et=(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 Fe=0;function Ot(e=!0){const t=++Fe;return e?String(t):t}function N(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?N(e,t,n,o-1,i):N(e,t,o+1,r,i)}function Tt(e,t){return Ce(e.replace(/\{=([^}]+)\}/g,(n,r)=>{var i;return(i=t[r])!=null?i:""}))}function wt(e){var t;let n;if(e instanceof Date)n=e;else if(y(e)){const{config:r,format:i}=this;n=(t=i.dataTime(r.data_xFormat)(e))!=null?t:new Date(e)}else D(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 At(e){if(j(e)&&!y(e)){const s=e;return{top:s.top||0,right:s.right||0,bottom:s.bottom||0,left:s.left||0}}const t=(y(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 Me(e,t){t()===!1?Ae(()=>Me(e,t)):e()}function Ct(e,t=(n=>n)){const n=new Set;return B(e,(r,i)=>{n.add(t(r,i))}),n}function Pt(e,t,n=(r=>r)){const r=new Map;return B(e,(i,o)=>{r.set(t(i,o),n(i,o))}),r}var Be,u,E,Ne,qe;const He=/\s?(bb-)/g,ke=/\.+/g;function Xe(e){return e.replace(He,".$1").replace(ke,".")}function q(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 Rt(e,t,n=[-1,1],r=!1){if(!(!e||!qe(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 Ue(e){const{x:t,y:n,width:r,height:i}=Ye(e,!0);return[{x:t,y:n+i},{x:t,y:n},{x:t+r,y:n},{x:t+r,y:n+i}]}function It(e){const{width:t,height:n}=O(e),r=Ue(e),i=r[0].x,o=Math.min(r[0].y,r[1].y);return{x:i,y:o,width:t,height:n}}function St(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=Be(r||e,t)}catch(o){}return i.map(o=>isNaN(o)?0:o)}function O(e,t=!1){return q(!0,e,t)}function Ye(e,t=!1){return q(!1,e,t)}function jt(e,t,n){const{rootSelector:r="",sheet:i}=e,o=`${r} ${Xe(t)} {${n.join(";")}}`;return i[i.insertRule?"insertRule":"addRule"](o,i.cssRules.length)}function Dt(e){let t=[];return e.forEach(n=>{var r;try{n.cssRules&&n.cssRules.length&&(t=t.concat(Ne(n.cssRules)))}catch(i){(r=u.console)==null||r.warn(`Error while reading rules from ${n.href}: ${String(i)}`)}}),t}function Lt(e){var t,n,r,i,o,s;return{x:((n=(t=u.pageXOffset)!=null?t:u.scrollX)!=null?n:0)+((r=e.scrollLeft)!=null?r:0),y:((o=(i=u.pageYOffset)!=null?i:u.scrollY)!=null?o:0)+((s=e.scrollTop)!=null?s:0)}}function Ft(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=O(e);s.x-=l.x,s.y-=l.y}return s}function Ve(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 Mt(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=Ve(e);return t==="x"?i.e:i.f}function Bt(e){const t=e.attr("viewBox");return t?t.trim().split(/[\s,]+/).length===4:!1}function Nt(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 qt(){var e,t;return((e=E)==null?void 0:e.hidden)===!1||((t=E)==null?void 0:t.visibilityState)==="visible"}function Ht(e,t){const{DocumentTouch:n,matchMedia:r,navigator:i}=u,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 u||n&&E 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 kt(e,t){e.pendingRaf!==null?(u.cancelAnimationFrame(e.pendingRaf),e.pendingRaf=u.requestAnimationFrame(()=>{e.pendingRaf=null,t()})):(e.pendingRaf=u.requestAnimationFrame(()=>{e.pendingRaf=null}),t())}const Xt={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=xe.createEvent("MouseEvent");o.initMouseEvent(r,i.bubbles,i.cancelable,m,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($({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 Ge(e){const t=this.config;let n,r,i;const o=()=>{const s=r.shift();if(s&&n&&_(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(),Oe(i)&&(t[s]=i)}),this.api&&(this.state.orgConfig=e)}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,v=(e,t,n)=>We(e,typeof t!="symbol"?t+"":t,n);class H{constructor(t={}){v(this,"$$"),v(this,"options"),v(this,"config"),this.options=t}loadConfig(){Ge.call(this,this.options)}$beforeInit(){}$init(){}$afterInit(){}$redraw(){}$willDestroy(){Object.keys(this).forEach(t=>{this[t]=null,delete this[t]})}}v(H,"version","4.0.1");class Ke{constructor(){return{selector:void 0}}}var Ze=Object.defineProperty,Je=(e,t,n)=>t in e?Ze(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,k=(e,t,n)=>Je(e,typeof t!="symbol"?t+"":t,n);class X extends H{constructor(t){return super(t),k(this,"element"),this.config=new Ke,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=O(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],b=(r=a==null?void 0:a.values)==null?void 0:r[l];b&&!b.name&&(b.name=b.id),s.state.event=t,(i=s.isPointFocusOnly)!=null&&i.call(s)&&b&&((o=s.showCircleFocus)==null||o.call(s,[b])),s.setExpand(l,a.id,!0),s.showTooltip([b],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 b=`.${P.target}-${l}`,T=r.main.selectAll(b);let p=i[a].querySelector("svg");p||(i[a].innerHTML=`${s}</svg>`,p=i[a].querySelector("svg"),p.__id=l),p.querySelector(b)||T.style("opacity",null),T.style("fill","none").style("opacity",null),p.innerHTML="",p.appendChild(T.node())})}$willDestroy(){this.bindEvents(!1),this.element.forEach(t=>{t.innerHTML=""})}}return k(X,"version","0.0.1"),g=g.default,g})()});