billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
12 lines • 15.5 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.3.3
* @requires billboard.js
* @summary billboard.js plugin
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("d3-interpolate"),require("d3-color"),require("d3-scale"),require("d3-selection"),require("d3-brush"),require("d3-axis"),require("d3-format")):"function"==typeof define&&define.amd?define("bb",["d3-interpolate","d3-color","d3-scale","d3-selection","d3-brush","d3-axis","d3-format"],e):"object"==typeof exports?exports.bb=e(require("d3-interpolate"),require("d3-color"),require("d3-scale"),require("d3-selection"),require("d3-brush"),require("d3-axis"),require("d3-format")):(t.bb=t.bb||{},t.bb.plugin=t.bb.plugin||{},t.bb.plugin.stanford=e(t.d3,t.d3,t.d3,t.d3,t.d3,t.d3,t.d3))}(this,(function(t,e,r,n,a,o,i){return function(){"use strict";var c=[,function(t){t.exports=n},,function(t){t.exports=a},,function(e){e.exports=t},function(t){t.exports=e},function(t){t.exports=r},function(t){t.exports=o},function(t){t.exports=i}],s={};function l(t){var e=s[t];if(void 0!==e)return e.exports;var r=s[t]={exports:{}};return c[t](r,r.exports,l),r.exports}l.d=function(t,e){for(var r in e)l.o(e,r)&&!l.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},l.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var u={};return function(){function t(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function e(t,r){return e=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},e(t,r)}l.d(u,{default:function(){return T}});var r=l(5),n=l(6),a=l(7);function o(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function i(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function c(t){for(var e,r=1;r<arguments.length;r++)e=null!=arguments[r]?arguments[r]:{},r%2?i(Object(e),!0).forEach((function(r){o(t,r,e[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):i(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))}));return t}var s={tooltip:"bb-tooltip",tooltipContainer:"bb-tooltip-container",tooltipName:"bb-tooltip-name"},b=(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c(c({},{button:"bb-button",chart:"bb-chart",empty:"bb-empty",main:"bb-main",target:"bb-target",EXPANDED:"_expanded_"}),{arc:"bb-arc",arcLabelLine:"bb-arc-label-line",arcs:"bb-arcs",chartArc:"bb-chart-arc",chartArcs:"bb-chart-arcs",chartArcsBackground:"bb-chart-arcs-background",chartArcsTitle:"bb-chart-arcs-title"}),{area:"bb-area",areas:"bb-areas"}),{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"}),{bar:"bb-bar",bars:"bb-bars",chartBar:"bb-chart-bar",chartBars:"bb-chart-bars"}),{candlestick:"bb-candlestick",candlesticks:"bb-candlesticks",chartCandlestick:"bb-chart-candlestick",chartCandlesticks:"bb-chart-candlesticks",valueDown:"bb-value-down",valueUp:"bb-value-up"}),{chartCircles:"bb-chart-circles",circle:"bb-circle",circles:"bb-circles"}),{colorPattern:"bb-color-pattern",colorScale:"bb-colorscale"}),{dragarea:"bb-dragarea",INCLUDED:"_included_"}),{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"}),{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"}),{chartLine:"bb-chart-line",chartLines:"bb-chart-lines",line:"bb-line",lines:"bb-lines"}),{eventRect:"bb-event-rect",eventRects:"bb-event-rects",eventRectsMultiple:"bb-event-rects-multiple",eventRectsSingle:"bb-event-rects-single"}),{focused:"bb-focused",defocused:"bb-defocused",legendItemFocused:"bb-legend-item-focused",xgridFocus:"bb-xgrid-focus",ygridFocus:"bb-ygrid-focus"}),{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"}),{chartRadar:"bb-chart-radar",chartRadars:"bb-chart-radars",level:"bb-level",levels:"bb-levels"}),{region:"bb-region",regions:"bb-regions"}),{selectedCircle:"bb-selected-circle",selectedCircles:"bb-selected-circles",SELECTED:"_selected_"}),{shape:"bb-shape",shapes:"bb-shapes"}),{brush:"bb-brush",subchart:"bb-subchart"}),{chartText:"bb-chart-text",chartTexts:"bb-chart-texts",text:"bb-text",texts:"bb-texts",title:"bb-title",TextOverlapping:"text-overlapping"}),s),{buttonZoomReset:"bb-zoom-reset",zoomBrush:"bb-zoom-brush"}),l(1),l(3),"object"==typeof globalThis&&null!==globalThis&&globalThis.Object===Object&&globalThis||"object"==typeof global&&null!==global&&global.Object===Object&&global||"object"==typeof self&&null!==self&&self.Object===Object&&self||Function("return this")());b.requestIdleCallback=b.requestIdleCallback||function(t){return setTimeout(t,1)},b.cancelIdleCallback=b.cancelIdleCallback||function(t){return clearTimeout(t)};var d=null==b?void 0:b.document;var h=function(t){return"function"==typeof t},f=function(t){return"string"==typeof t},p=function(t){return"number"==typeof t},g=function(t){return void 0!==t},v=function(t){return"object"==typeof t},x=function(t){return void 0===t||null===t||f(t)&&0===t.length||v(t)&&!(t instanceof Date)&&0===Object.keys(t).length||p(t)&&isNaN(t)};!function(){try{new MouseEvent("t")}catch(t){return function(t,e,r){void 0===r&&(r={bubbles:!1,cancelable:!1,screenX:0,screenY:0,clientX:0,clientY:0});var n=d.createEvent("MouseEvent");n.initMouseEvent(e,r.bubbles,r.cancelable,b,0,r.screenX,r.screenY,r.clientX,r.clientY,!1,!1,!1,!1,0,null),t.dispatchEvent(n)}}}();function y(t){var e;if(t instanceof Date)e=t;else if(f(t)){var r=this.config;e=this.format.dataTime(r.data_xFormat)(t)}else p(t)&&!isNaN(t)&&(e=new Date(+t));return e&&!isNaN(+e)||console&&console.error&&console.error("Failed to parse x '"+t+"' to Date object"),e}function m(t){var e,r,n,a=this.config,o=function(){var t=r.shift();return t&&e&&v(e)&&t in e?(e=e[t],o()):t?void 0:e};Object.keys(a).forEach((function(i){e=t,r=i.split("_"),n=o(),g(n)&&(a[i]=n)}))}var w=function(){function t(t){void 0===t&&(t={}),this.$$=void 0,this.options=void 0,this.options=t}var e=t.prototype;return e.$beforeInit=function(){},e.$init=function(){},e.$afterInit=function(){},e.$redraw=function(){},e.$willDestroy=function(){var t=this;Object.keys(this).forEach((function(e){t[e]=null,delete t[e]}))},t}();w.version="3.3.3";var S=function(){return{colors:void 0,epochs:[],lines:[],scale_min:void 0,scale_max:void 0,scale_width:20,scale_format:void 0,padding_top:0,padding_right:0,padding_bottom:0,padding_left:0,regions:[]}},_="bb-colorscale",O="bb-stanford-elements",j="bb-stanford-line",C="bb-stanford-lines",E="bb-stanford-region",$="bb-stanford-regions";function k(t,e){return t.epochs<e.epochs?-1:t.epochs>e.epochs?1:0}function M(t){for(var e,r=function(t){for(var e,r,n=0,a=0,o=t.length,i=o-1;a<o;i=a,a++)e=t[a],r=t[i],n+=e.x*r.y,n-=e.y*r.x;return n/2}(t),n=0,a=0,o=0,i=t.length,c=i-1;o<i;c=o,o++){var s=t[o],l=t[c];e=s.x*l.y-l.x*s.y,n+=(s.x+l.x)*e,a+=(s.y+l.y)*e}return{x:n/(e=6*r),y:a/e}}var L=function(){function t(t){this.owner=void 0,this.owner=t;var e=t.$$.$el.main.select(".bb-chart").append("g").attr("class",O);e.append("g").attr("class",C),e.append("g").attr("class",$)}var e=t.prototype;return e.updateStanfordLines=function(t){var e=this.owner.$$,r=e.config,n=e.$el.main,a=r.axis_rotated,o=this.xvCustom.bind(e),i=this.yvCustom.bind(e),c=n.select("."+C).style("shape-rendering","geometricprecision").selectAll("."+j).data(this.owner.config.lines);c.exit().transition().duration(t).style("opacity","0").remove();var s=c.enter().append("g");s.append("line").style("opacity","0"),s.merge(c).attr("class",(function(t){return j+(t.class?" "+t.class:"")})).select("line").transition().duration(t).attr("x1",(function(t){return a?i(t,"y1"):o(t,"x1")})).attr("x2",(function(t){return a?i(t,"y2"):o(t,"x2")})).attr("y1",(function(t){return a?o(t,"x1"):i(t,"y1")})).attr("y2",(function(t){return a?o(t,"x2"):i(t,"y2")})).transition().style("opacity",null)},e.updateStanfordRegions=function(t){var e=this.owner.$$,r=e.config,n=e.$el.main,a=r.axis_rotated,o=this.xvCustom.bind(e),i=this.yvCustom.bind(e),c=this.owner.countEpochsInRegion.bind(e),s=n.select("."+$).selectAll("."+E).data(this.owner.config.regions);s.exit().transition().duration(t).style("opacity","0").remove();var l=s.enter().append("g");l.append("polygon").style("opacity","0"),l.append("text").attr("transform",a?"rotate(-90)":"").style("opacity","0"),(s=l.merge(s)).attr("class",(function(t){return E+(t.class?" "+t.class:"")})).select("polygon").transition().duration(t).attr("points",(function(t){return t.points.map((function(t){return[a?i(t,"y"):o(t,"x"),a?o(t,"x"):i(t,"y")].join(",")})).join(" ")})).transition().style("opacity",(function(t){return(t.opacity?t.opacity:.2)+""})),s.select("text").transition().duration(t).attr("x",(function(t){return a?i(M(t.points),"y"):o(M(t.points),"x")})).attr("y",(function(t){return a?o(M(t.points),"x"):i(M(t.points),"y")})).text((function(t){if(t.text){var e=c(t.points),r=e.value,n=e.percentage;return t.text(r,n)}return""})).attr("text-anchor","middle").attr("dominant-baseline","middle").transition().style("opacity",null)},e.updateStanfordElements=function(t){void 0===t&&(t=0),this.updateStanfordLines(t),this.updateStanfordRegions(t)},e.xvCustom=function(t,e){var r=this,n=r.axis,a=r.config,o=e?t[e]:r.getBaseValue(t);return n.isTimeSeries()?o=y.call(r,o):n.isCategorized()&&f(o)&&(o=a.axis_x_categories.indexOf(t.value)),Math.ceil(r.scale.x(o))},e.yvCustom=function(t,e){var r=this,n=t.axis&&"y2"===t.axis?r.scale.y2:r.scale.y,a=e?t[e]:r.getBaseValue(t);return Math.ceil(n(a))},t}(),P=l(8),D=l(9),q=function(){function t(t){this.owner=void 0,this.colorScale=void 0,this.owner=t}var e=t.prototype;return e.drawColorScale=function(){var t=this.owner,e=t.$$,r=t.config,n=e.data.targets[0],o=e.state.height-r.padding_bottom-r.padding_top,i=r.scale_width,c=function(t,e,r){void 0===r&&(r=1);for(var n=[],a=0|Math.max(0,Math.ceil((e-t)/r)),o=t;o<a;o++)n.push(t+o*r);return n}(r.padding_bottom,o,5),s=(0,a.scaleSequential)(n.colors).domain([c[c.length-1],c[0]]);this.colorScale&&this.colorScale.remove(),this.colorScale=e.$el.svg.append("g").attr("width",50).attr("height",o).attr("class",_),this.colorScale.append("g").attr("transform","translate(0, "+r.padding_top+")").selectAll("bars").data(c).enter().append("rect").attr("y",(function(t,e){return 5*e})).attr("x",0).attr("width",i).attr("height",5).attr("fill",(function(t){return s(t)}));var l=(0,a.scaleLog)().domain([n.minEpochs,n.maxEpochs]).range([c[0]+r.padding_top+c[c.length-1]+5-1,c[0]+r.padding_top]),u=(0,P.axisRight)(l),b=r.scale_format;"pow10"===b?u.tickValues([1,10,100,1e3,1e4,1e5,1e6,1e7]):h(b)?u.tickFormat(b):u.tickFormat((0,D.format)("d"));var d=this.colorScale.append("g").attr("class","legend axis").attr("transform","translate("+i+",0)").call(u);"pow10"===b&&d.selectAll(".tick text").text(null).filter((function(t){return t/Math.pow(10,Math.ceil(Math.log(t)/Math.LN10-1e-12))==1})).text(10).append("tspan").attr("dy","-.7em").text((function(t){return Math.round(Math.log(t)/Math.LN10)})),this.colorScale.attr("transform","translate("+(e.state.current.width-this.xForColorScale())+", 0)")},e.xForColorScale=function(){return this.owner.config.padding_right+this.colorScale.node().getBBox().width},e.getColorScalePadding=function(){return this.xForColorScale()+this.owner.config.padding_left+20},t}(),T=function(o){var i,c;function l(e){var r=o.call(this,e)||this;return r.config=void 0,r.colorScale=void 0,r.elements=void 0,r.config=new S,t(r)||t(r)}c=o,(i=l).prototype=Object.create(c.prototype),i.prototype.constructor=i,e(i,c);var u=l.prototype;return u.$beforeInit=function(){var t=this,e=this.$$;e.config.data_xSort=!1,e.isMultipleX=function(){return!0},e.showGridFocus=function(){},e.labelishData=function(t){return t.values},e.opacityForCircle=function(){return 1};var r=e.getCurrentPaddingRight.bind(e);e.getCurrentPaddingRight=function(){return r()+(t.colorScale?t.colorScale.getColorScalePadding():0)}},u.$init=function(){var t=this.$$;m.call(this,this.options),t.color=this.getStanfordPointColor.bind(t),this.colorScale=new q(this),this.elements=new L(this),this.convertData(),this.initStanfordData(),this.setStanfordTooltip(),this.colorScale.drawColorScale(),this.$redraw()},u.$redraw=function(t){var e,r;null==(e=this.colorScale)||e.drawColorScale(),null==(r=this.elements)||r.updateStanfordElements(t)},u.getOptions=function(){return new S},u.convertData=function(){var t=this.$$.data.targets,e=this.options.epochs;t.forEach((function(t){t.values.forEach((function(t,r){t.epochs=e[r]})),t.minEpochs=void 0,t.maxEpochs=void 0,t.colors=void 0,t.colorscale=void 0}))},u.xvCustom=function(t,e){var r=this,n=r.axis,a=r.config,o=e?t[e]:r.getBaseValue(t);return n.isTimeSeries()?o=y.call(r,o):n.isCategorized()&&f(o)&&(o=a.axis_x_categories.indexOf(t.value)),Math.ceil(r.scale.x(o))},u.yvCustom=function(t,e){var r=this.scale,n=t.axis&&"y2"===t.axis?r.y2:r.y,a=e?t[e]:this.getBaseValue(t);return Math.ceil(n(a))},u.initStanfordData=function(){var t=this.config,e=this.$$.data.targets[0];e.values.sort(k);var o=e.values.map((function(t){return t.epochs}));e.minEpochs=isNaN(t.scale_min)?Math.min.apply(Math,o):t.scale_min,e.maxEpochs=isNaN(t.scale_max)?Math.max.apply(Math,o):t.scale_max,e.colors=h(t.colors)?t.colors:(0,r.interpolateHslLong)((0,n.hsl)(250,1,.5),(0,n.hsl)(0,1,.5)),e.colorscale=(0,a.scaleSequentialLog)(e.colors).domain([e.minEpochs,e.maxEpochs])},u.getStanfordPointColor=function(t){return this.data.targets[0].colorscale(t.epochs)},u.setStanfordTooltip=function(){var t=this.$$.config;x(t.tooltip_contents)&&(t.tooltip_contents=function(e,r,n,a){var o='<table class="'+s.tooltip+'"><tbody>';return e.forEach((function(e){o+="<tr>\n\t\t\t\t\t\t\t<th>"+r(t.data_x)+'</th>\n\t\t\t\t\t\t\t<th class="value">'+n(e.x)+"</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th>"+r(e.id)+'</th>\n\t\t\t\t\t\t\t<th class="value">'+n(e.value)+'</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t<tr class="'+s.tooltipName+"-"+e.id+'">\n\t\t\t\t\t\t\t<td class="name"><span style="background-color:'+a(e)+'"></span>'+r("Epochs")+'</td>\n\t\t\t\t\t\t\t<td class="value">'+n(e.epochs)+"</td>\n\t\t\t\t\t\t</tr>"})),o+"</tbody></table>"})},u.countEpochsInRegion=function(t){var e=this.data.targets[0],r=e.values.reduce((function(t,e){return t+ +e.epochs}),0),n=e.values.reduce((function(e,r){return function(t,e){for(var r=t.x,n=t.value,a=!1,o=0,i=e.length-1;o<e.length;i=o++){var c=e[o].x,s=e[o].y,l=e[i].x,u=e[i].y;s>n!=u>n&&r<(l-c)*(n-s)/(u-s)+c&&(a=!a)}return a}(r,t)?e+ +r.epochs:e}),0);return{value:n,percentage:0!==n?+(n/r*100).toFixed(1):0}},l}(w)}(),u=u.default}()}));