billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
14 lines (13 loc) • 17.1 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 3.17.2
* @requires billboard.js
* @summary billboard.js plugin
*/(function(b,d){typeof exports=="object"&&typeof module=="object"?module.exports=d(require("d3-brush"),require("d3-selection")):typeof define=="function"&&define.amd?define("bb",["d3-brush","d3-selection"],d):typeof exports=="object"?exports.bb=d(require("d3-brush"),require("d3-selection")):(b.bb=b.bb||{},b.bb.plugin=b.bb.plugin||{},b.bb.plugin.sparkline=d(b.d3,b.d3))})(this,function(T,b){return(function(){"use strict";var d={747:(function(e){e.exports=b}),853:(function(e){e.exports=T})},C={};function f(e){var t=C[e];if(t!==void 0)return t.exports;var n=C[e]={exports:{}};return d[e](n,n.exports,f),n.exports}(function(){f.d=function(e,t){for(var n in t)f.o(t,n)&&!f.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(function(){f.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}})();var m={};f.d(m,{default:function(){return N}});var q=Object.defineProperty,P=Object.getOwnPropertySymbols,k=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,A=(e,t,n)=>t in e?q(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(P)for(var n of P(t))H.call(t,n)&&A(e,n,t[n]);return e};const R={button:"bb-button",chart:"bb-chart",empty:"bb-empty",main:"bb-main",target:"bb-target",EXPANDED:"_expanded_",dummy:"_dummy_"},X={arc:"bb-arc",arcLabelLine:"bb-arc-label-line",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"},U={area:"bb-area",areas:"bb-areas"},Y={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"},V={bar:"bb-bar",bars:"bb-bars",chartBar:"bb-chart-bar",chartBars:"bb-chart-bars",barConnectLine:"bb-bar-connectLine"},G={candlestick:"bb-candlestick",candlesticks:"bb-candlesticks",chartCandlestick:"bb-chart-candlestick",chartCandlesticks:"bb-chart-candlesticks",valueDown:"bb-value-down",valueUp:"bb-value-up"},z={chartCircles:"bb-chart-circles",circle:"bb-circle",circles:"bb-circles"},W={colorPattern:"bb-color-pattern",colorScale:"bb-colorscale"},K={dragarea:"bb-dragarea",INCLUDED:"_included_"},Z={funnel:"bb-funnel",chartFunnel:"bb-chart-funnel",chartFunnels:"bb-chart-funnels",funnelBackground:"bb-funnel-background"},J={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"},Q={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"},ee={chartLine:"bb-chart-line",chartLines:"bb-chart-lines",line:"bb-line",lines:"bb-lines"},te={eventRect:"bb-event-rect",eventRects:"bb-event-rects",eventRectsMultiple:"bb-event-rects-multiple",eventRectsSingle:"bb-event-rects-single"},ne={focused:"bb-focused",defocused:"bb-defocused",legendItemFocused:"bb-legend-item-focused",xgridFocus:"bb-xgrid-focus",ygridFocus:"bb-ygrid-focus"},re={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"},Be={level:"bb-level",levels:"bb-levels"},ie={chartRadar:"bb-chart-radar",chartRadars:"bb-chart-radars"},oe={region:"bb-region",regions:"bb-regions"},se={selectedCircle:"bb-selected-circle",selectedCircles:"bb-selected-circles",SELECTED:"_selected_"},ce={shape:"bb-shape",shapes:"bb-shapes"},le={brush:"bb-brush",subchart:"bb-subchart"},ae={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"},ue={tooltip:"bb-tooltip",tooltipContainer:"bb-tooltip-container",tooltipName:"bb-tooltip-name"},be={treemap:"bb-treemap",chartTreemap:"bb-chart-treemap",chartTreemaps:"bb-chart-treemaps"},fe={buttonZoomReset:"bb-zoom-reset",zoomBrush:"bb-zoom-brush"};var je=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({},R),X),U),Y),V),G),z),W),K),J),Q),ee),te),ne),Z),re),ie),oe),se),ce),le),ae),ue),be),fe),Fe=f(853),Ne=f(747);function de(){return typeof globalThis=="object"&&globalThis!==null&&globalThis.Object===Object&&globalThis||typeof global=="object"&&global!==null&&global.Object===Object&&global||typeof self=="object"&&self!==null&&self.Object===Object&&self||Function("return this")()}function he(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 v=de(),pe=v==null?void 0:v.document,[qe,ke,He,Xe]=he(v);var ge=Object.defineProperty,S=Object.getOwnPropertySymbols,me=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable,I=(e,t,n)=>t in e?ge(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,L=(e,t)=>{for(var n in t||(t={}))me.call(t,n)&&I(e,n,t[n]);if(S)for(var n of S(t))ve.call(t,n)&&I(e,n,t[n]);return e};const Ue=e=>e||e===0,_e=e=>typeof e=="function",h=e=>typeof e=="string",_=e=>typeof e=="number",xe=e=>typeof e=="undefined",M=e=>typeof e!="undefined",Ye=e=>typeof e=="boolean",Ve=e=>Math.ceil(e/10)*10,Ge=e=>Math.ceil(e)+.5,ze=e=>e[1]-e[0],x=e=>typeof e=="object",ye=e=>{for(const t in e)return!1;return!0},$e=e=>xe(e)||e===null||h(e)&&e.length===0||x(e)&&!(e instanceof Date)&&ye(e)||_(e)&&isNaN(e),we=e=>!$e(e),y=e=>Array.isArray(e),g=e=>e&&!(e!=null&&e.nodeType)&&x(e)&&!y(e);function We(e,t,n){return M(e[t])?e[t]:n}function Ke(e,t){let n=!1;return Object.keys(e).forEach(r=>e[r]===t&&(n=!0)),n}function Ze(e,t,...n){const r=_e(e);return r&&e.call(t,...n),r}function Je(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))}function Qe(e){return h(e)?e.replace(/<(script|img)?/ig,"<").replace(/(script)?>/ig,">"):e}function et(e,t,n=[-1,1],r=!1){if(!(!e||!h(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 Ee(e){const{x:t,y:n,width:r,height:i}=e.getBBox();return[{x:t,y:n+i},{x:t,y:n},{x:t+r,y:n},{x:t+r,y:n+i}]}function tt(e){const{width:t,height:n}=B(e),r=Ee(e),i=r[0].x,o=Math.min(r[0].y,r[1].y);return{x:i,y:o,width:t,height:n}}function nt(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=d3Pointer(r||e,t)}catch(o){}return i.map(o=>isNaN(o)?0:o)}function Oe(e){const{event:t,$el:n}=e,r=n.subchart.main||n.main;let i;return t&&t.type==="brush"?i=t.selection:r&&(i=r.select(".bb-brush").node())&&(i=d3BrushSelection(i)),i}function D(e,t,n=!1){const r=i=>i[e?"getBoundingClientRect":"getBBox"]();return n?r(t):!("rect"in t)||"rect"in t&&t.hasAttribute("width")&&t.rect.width!==+(t.getAttribute("width")||0)?t.rect=r(t):t.rect}function B(e,t=!1){return D(!0,e,t)}function rt(e,t=!1){return D(!1,e,t)}function it(e=!0,t=0,n=1e4){const r=window.crypto||window.msCrypto,i=r?t+r.getRandomValues(new Uint32Array(1))[0]%(n-t+1):Math.floor(Math.random()*(n-t)+t);return e?String(i):i}function j(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?j(e,t,n,o-1,i):j(e,t,o+1,r,i)}function ot(e){const t=Oe(e);return t?t[0]===t[1]:!0}function st(...e){const t=n=>{if(g(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 Te(e={},t){y(t)&&t.forEach(n=>Te(e,n));for(const n in t)/^\d+$/.test(n)||n in e||(e[n]=t[n]);return e}const ct=e=>e.charAt(0).toUpperCase()+e.slice(1);function lt(e,t="-"){return e.split(t).map((n,r)=>r?n.charAt(0).toUpperCase()+n.slice(1).toLowerCase():n.toLowerCase()).join("")}const Ce=e=>[].slice.call(e);function at(e,t,n){const{rootSelector:r="",sheet:i}=e,s=`${r} ${(l=>l.replace(/\s?(bb-)/g,".$1").replace(/\.+/g,"."))(t)} {${n.join(";")}}`;return i[i.insertRule?"insertRule":"addRule"](s,i.cssRules.length)}function ut(e){let t=[];return e.forEach(n=>{var r;try{n.cssRules&&n.cssRules.length&&(t=t.concat(Ce(n.cssRules)))}catch(i){(r=window.console)==null||r.warn(`Error while reading rules from ${n.href}: ${i.toString()}`)}}),t}function bt(e){var t,n,r,i,o,s;return{x:((n=(t=window.pageXOffset)!=null?t:window.scrollX)!=null?n:0)+((r=e.scrollLeft)!=null?r:0),y:((o=(i=window.pageYOffset)!=null?i:window.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=B(e);s.x-=l.x,s.y-=l.y}return s}function dt(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 ht(e){const t=e[0]instanceof Date,n=(t?e.map(Number):e).filter((r,i,o)=>o.indexOf(r)===i);return t?n.map(r=>new Date(r)):n}function pt(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 g(e)&&g(n)&&Object.keys(n).forEach(r=>{if(!/^(__proto__|constructor|prototype)$/i.test(r)){const i=n[r];g(i)?(!e[r]&&(e[r]={}),e[r]=$(e[r],i)):e[r]=y(i)?i.concat():i}}),$(e,...t)}function Pe(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 gt(e,t){let n=t.filter(r=>we(r));return n.length?_(n[0])?n=Math[e](...n):n[0]instanceof Date&&(n=Pe(n,e==="min")[0]):n=void 0,n}const mt=(e,t,n=1)=>{const r=[],i=Math.max(0,Math.ceil((t-e)/n))|0;for(let o=e;o<i;o++)r.push(e+o*n);return r},vt={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=pe.createEvent("MouseEvent");o.initMouseEvent(r,i.bubbles,i.cancelable,v,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 _t(e,t){let n=e;for(const r in t)n=n.replace(new RegExp(`{=${r}}`,"g"),t[r]);return n}function xt(e){var t;let n;if(e instanceof Date)n=e;else if(h(e)){const{config:r,format:i}=this;n=(t=i.dataTime(r.data_xFormat)(e))!=null?t:new Date(e)}else _(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 yt(e){const t=e.attr("viewBox");return t?/(\d+(\.\d+)?){3}/.test(t):!1}function $t(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===!1&&i)break;return i}function wt(){var e,t;return((e=document)==null?void 0:e.hidden)===!1||((t=document)==null?void 0:t.visibilityState)==="visible"}function Et(e,t){const{DocumentTouch:n,matchMedia:r,navigator:i}=window,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 window||n&&document 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 Ae(e,t){t()===!1?requestAnimationFrame(()=>Ae(e,t)):e()}function Ot(e){if(g(e)&&!h(e)){const s=e;return{top:s.top||0,right:s.right||0,bottom:s.bottom||0,left:s.left||0}}const t=(h(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 Re(e){const t=this.config;let n,r,i;const o=()=>{const s=r.shift();if(s&&n&&x(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(),M(i)&&(t[s]=i)}),this.api&&(this.state.orgConfig=e)}var Se=Object.defineProperty,Ie=(e,t,n)=>t in e?Se(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,w=(e,t,n)=>Ie(e,typeof t!="symbol"?t+"":t,n);class F{constructor(t={}){w(this,"$$"),w(this,"options"),this.options=t}$beforeInit(){}$init(){}$afterInit(){}$redraw(){}$willDestroy(){Object.keys(this).forEach(t=>{this[t]=null,delete this[t]})}}w(F,"version","3.17.2");class Le{constructor(){return{selector:void 0}}}var Me=Object.defineProperty,De=(e,t,n)=>t in e?Me(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,E=(e,t,n)=>De(e,typeof t!="symbol"?t+"":t,n);class N extends F{constructor(t){return super(t),E(this,"config"),E(this,"element"),this.config=new Le,this}$beforeInit(){Re.call(this,this.options),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=t.target.getBoundingClientRect()}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],u=(r=a==null?void 0:a.values)==null?void 0:r[l];u&&!u.name&&(u.name=u.id),s.state.event=t,(i=s.isPointFocusOnly)!=null&&i.call(s)&&u&&((o=s.showCircleFocus)==null||o.call(s,[u])),s.setExpand(l,a.id,!0),s.showTooltip([u],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 u=`.${R.target}-${l}`,O=r.main.selectAll(u);let p=i[a].querySelector("svg");p||(i[a].innerHTML=`${s}</svg>`,p=i[a].querySelector("svg"),p.__id=l),p.querySelector(u)||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 E(N,"version","0.0.1"),m=m.default,m})()});