billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
1,191 lines (1,177 loc) • 960 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.16.0
*/
import { pointer, select, namespaces, selectAll } from 'd3-selection';
import { timeParse, utcParse, timeFormat, utcFormat } from 'd3-time-format';
import { brushSelection, brushY, brushX } from 'd3-brush';
import { csvParse, csvParseRows, tsvParse, tsvParseRows } from 'd3-dsv';
import { drag as drag$1 } from 'd3-drag';
import { scaleOrdinal, scaleLinear, scaleUtc, scaleTime, scaleLog, scaleSymlog } from 'd3-scale';
import { transition } from 'd3-transition';
import { curveStepBefore, curveStepAfter, curveStep, curveLinear, curveLinearClosed, curveNatural, curveMonotoneY, curveMonotoneX, curveCatmullRomOpen, curveCatmullRomClosed, curveCatmullRom, curveCardinalOpen, curveCardinalClosed, curveCardinal, curveBundle, curveBasisOpen, curveBasisClosed, curveBasis, arc, pie as pie$1, area as area$1, line as line$1 } from 'd3-shape';
import { axisLeft, axisBottom, axisTop, axisRight } from 'd3-axis';
import { easeLinear } from 'd3-ease';
import { interpolate } from 'd3-interpolate';
import { treemapResquarify, treemapSquarify, treemapSliceDice, treemapSlice, treemapDice, treemapBinary, treemap as treemap$1, hierarchy } from 'd3-hierarchy';
import { zoomIdentity, zoomTransform, zoom as zoom$2 } from 'd3-zoom';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* CSS class names definition
* @private
*/
var $COMMON = {
button: "bb-button",
chart: "bb-chart",
empty: "bb-empty",
main: "bb-main",
target: "bb-target",
EXPANDED: "_expanded_",
dummy: "_dummy_"
};
var $ARC = {
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"
};
var $AREA = {
area: "bb-area",
areas: "bb-areas"
};
var $AXIS = {
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"
};
var $BAR = {
bar: "bb-bar",
bars: "bb-bars",
chartBar: "bb-chart-bar",
chartBars: "bb-chart-bars",
barConnectLine: "bb-bar-connectLine"
};
var $CANDLESTICK = {
candlestick: "bb-candlestick",
candlesticks: "bb-candlesticks",
chartCandlestick: "bb-chart-candlestick",
chartCandlesticks: "bb-chart-candlesticks",
valueDown: "bb-value-down",
valueUp: "bb-value-up"
};
var $CIRCLE = {
chartCircles: "bb-chart-circles",
circle: "bb-circle",
circles: "bb-circles"
};
var $COLOR = {
colorPattern: "bb-color-pattern",
colorScale: "bb-colorscale"
};
var $DRAG = {
dragarea: "bb-dragarea",
INCLUDED: "_included_"
};
var $FUNNEL = {
funnel: "bb-funnel",
chartFunnel: "bb-chart-funnel",
chartFunnels: "bb-chart-funnels",
funnelBackground: "bb-funnel-background"
};
var $GAUGE = {
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"
};
var $LEGEND = {
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"
};
var $LINE = {
chartLine: "bb-chart-line",
chartLines: "bb-chart-lines",
line: "bb-line",
lines: "bb-lines"
};
var $EVENT = {
eventRect: "bb-event-rect",
eventRects: "bb-event-rects",
eventRectsMultiple: "bb-event-rects-multiple",
eventRectsSingle: "bb-event-rects-single"
};
var $FOCUS = {
focused: "bb-focused",
defocused: "bb-defocused",
legendItemFocused: "bb-legend-item-focused",
xgridFocus: "bb-xgrid-focus",
ygridFocus: "bb-ygrid-focus"
};
var $GRID = {
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"
};
var $LEVEL = {
level: "bb-level",
levels: "bb-levels"
};
var $RADAR = {
chartRadar: "bb-chart-radar",
chartRadars: "bb-chart-radars"
};
var $REGION = {
region: "bb-region",
regions: "bb-regions"
};
var $SELECT = {
selectedCircle: "bb-selected-circle",
selectedCircles: "bb-selected-circles",
SELECTED: "_selected_"
};
var $SHAPE = {
shape: "bb-shape",
shapes: "bb-shapes"
};
var $SUBCHART = {
brush: "bb-brush",
subchart: "bb-subchart"
};
var $TEXT = {
chartText: "bb-chart-text",
chartTexts: "bb-chart-texts",
text: "bb-text",
texts: "bb-texts",
title: "bb-title",
TextOverlapping: "text-overlapping"
};
var $TOOLTIP = {
tooltip: "bb-tooltip",
tooltipContainer: "bb-tooltip-container",
tooltipName: "bb-tooltip-name"
};
var $TREEMAP = {
treemap: "bb-treemap",
chartTreemap: "bb-chart-treemap",
chartTreemaps: "bb-chart-treemaps"
};
var $ZOOM = {
buttonZoomReset: "bb-zoom-reset",
zoomBrush: "bb-zoom-brush"
};
var CLASS = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, $COMMON), $ARC), $AREA), $AXIS), $BAR), $CANDLESTICK), $CIRCLE), $COLOR), $DRAG), $GAUGE), $LEGEND), $LINE), $EVENT), $FOCUS), $FUNNEL), $GRID), $RADAR), $REGION), $SELECT), $SHAPE), $SUBCHART), $TEXT), $TOOLTIP), $TREEMAP), $ZOOM);
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* boost config options
*/
var boost = {
/**
* Set boost options
* @name boost
* @memberof Options
* @type {object}
* @property {object} boost boost object
* @property {boolean} [boost.useCssRule=false] Avoid setting inline styles for each shape elements.
* - **NOTE:**
* - Will append <style> to the head tag and will add shpes' CSS rules dynamically.
* - For now, covers colors related properties (fill, stroke, etc.) only.
* @property {boolean} [boost.useWorker=false] Use Web Worker as possible for processing.
* - **NOTE:**
* - For now, only applies for data conversion at the initial time.
* - As of Web Worker's async nature, handling chart instance synchrously is not recommended.
* @example
* boost: {
* useCssRule: true,
* useWorker: false
* }
*/
boost_useCssRule: false,
boost_useWorker: false
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* color config options
*/
var color$1 = {
/**
* Set color of the data values
* @name color
* @memberof Options
* @type {object}
* @property {object} color color object
* @property {string|object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.
* @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work.
* @property {Function} [color.tiles] if defined, allows use svg's patterns to fill data area. It should return an array of [SVGPatternElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPatternElement).
* - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>
* ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>
* - `bb-colorize-pattern-red`
* - `bb-colorize-pattern-fff`
* @property {object} [color.threshold] color threshold for gauge and tooltip color
* @property {string} [color.threshold.unit] If set to `value`, the threshold will be based on the data value. Otherwise it'll be based on equation of the `threshold.max` option value.
* @property {Array} [color.threshold.values] Threshold values for each steps
* @property {number} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.
* @example
* color: {
* pattern: ["#1f77b4", "#aec7e8", ...],
*
* // Set colors' patterns
* // it should return an array of SVGPatternElement
* tiles: function() {
* var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
* var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
* var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
*
* pattern.setAttribute("patternUnits", "userSpaceOnUse");
* pattern.setAttribute("width", "32");
* pattern.setAttribute("height", "32");
*
* g.style.fill = "#000";
* g.style.opacity = "0.2";
*
* circle1.setAttribute("cx", "3");
* circle1.setAttribute("cy", "3");
* circle1.setAttribute("r", "3");
*
* g.appendChild(circle1);
* pattern.appendChild(g);
*
* return [pattern];
* },
*
* // for threshold usage, pattern values should be set for each steps
* pattern: ["grey", "green", "yellow", "orange", "red"],
* threshold: {
* unit: "value",
*
* // when value is 20 => 'green', value is 40 => 'orange' will be set.
* values: [10, 20, 30, 40, 50],
*
* // the equation for max:
* // - unit == 'value': max => 30
* // - unit != 'value': max => value*100/30
* max: 30
* },
*
* // set all data to 'red'
* onover: "red",
*
* // set different color for data
* onover: {
* data1: "red",
* data2: "yellow"
* },
*
* // will pass data object to the callback
* onover: function(d) {
* return d.id === "data1" ? "red" : "green";
* }
* }
*/
color_pattern: [],
color_tiles: undefined,
color_threshold: {},
color_onover: undefined
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* legend config options
*/
var legend$2 = {
/**
* Legend options
* @name legend
* @memberof Options
* @type {object}
* @property {object} legend Legend object
* @property {boolean} [legend.show=true] Show or hide legend.
* @property {boolean} [legend.hide=false] Hide legend
* If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
* @property {string|HTMLElement} [legend.contents.bindto=undefined] Set CSS selector or element reference to bind legend items.
* - **NOTE:** Should be used along with `legend.contents.template`.
* @property {string|Function} [legend.contents.template="<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>"] Set item's template.<br>
* - If set `string` value, within template the 'color' and 'title' can be replaced using template-like syntax string:
* - {=COLOR}: data color value
* - {=TITLE}: data title value
* - If set `function` value, will pass following arguments to the given function:
* - title {string}: data's id value
* - color {string}: color string
* - data {Array}: data array
* @property {string} [legend.position=bottom] Change the position of legend.<br>
* Available values are: `bottom`, `right` and `inset` are supported.
* @property {object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br>
* This option accepts object that has the keys `anchor`, `x`, `y` and `step`.
* - **anchor** decides the position of the legend:
* - top-left
* - top-right
* - bottom-left
* - bottom-right
* - **x** and **y**:
* - set the position of the legend based on the anchor.
* - **step**:
* - defines the max step the legend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
* @property {boolean} [legend.equally=false] Set to all items have same width size.
* @property {number} [legend.padding=0] Set padding value
* @property {boolean} [legend.item.interaction=true] Set legend item interaction.
* - **NOTE:**
* - This setting will not have effect on `.toggle()` method.
* - `legend.item.onXXX` listener options will work if set, regardless of this option value.
* @property {boolean} [legend.item.interaction.dblclick=false] Set legend item to interact on double click.
* - **NOTE:**
* - Double clicking will make focused clicked dataseries only, hiding all others.
* - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
* - To return initial state(which all dataseries are showing), double click current focused legend item again.
* - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect.
* - In this case, default `click` interaction will be disabled.
* @property {Function} [legend.item.onclick=undefined] Set click event handler to the legend item.
* - **NOTE:**
* - When set, default `click` interaction will be disabled.
* - When `interaction.dblclick=true` is set, will be called on double click.
* @property {Function} [legend.item.onover=undefined] Set mouse/touch over event handler to the legend item.
* - **NOTE:** When set, default `mouseover` interaction will be disabled.
* @property {Function} [legend.item.onout=undefined] Set mouse/touch out event handler to the legend item.
* - **NOTE:** When set, default `mouseout` interaction will be disabled.
* @property {number} [legend.item.tile.width=10] Set width for 'rectangle' legend item tile element.
* @property {number} [legend.item.tile.height=10] Set height for 'rectangle' legend item tile element.
* @property {number} [legend.item.tile.r=5] Set the radius for 'circle' legend item tile type.
* @property {string} [legend.item.tile.type="rectangle"] Set legend item shape type.<br>
* - **Available Values:**
* - circle
* - rectangle
* @property {boolean} [legend.format] Set formatter function for legend text.
* The argument:<br>
* - `id`: Legend text value. When `data.names` is specified, will pass from it, otherwise will pass data id.
* - `dataId`: When `data.names` specified, will pass the original data id. Otherwise will be undefined.
* @property {boolean} [legend.tooltip=false] Show full legend text value using system tooltip(via `<title>` element).
* @property {boolean} [legend.usePoint=false] Whether to use custom points in legend.
* @see [Demo: format](https://naver.github.io/billboard.js/demo/#Legend.LegendFormat)
* @see [Demo: item.interaction](https://naver.github.io/billboard.js/demo/#Legend.LegendItemInteraction)
* @see [Demo: item.tile.type](https://naver.github.io/billboard.js/demo/#Legend.LegendItemTileType)
* @see [Demo: position](https://naver.github.io/billboard.js/demo/#Legend.LegendPosition)
* @see [Demo: contents.template](https://naver.github.io/billboard.js/demo/#Legend.LegendTemplate1)
* @see [Demo: usePoint](https://naver.github.io/billboard.js/demo/#Legend.usePoint)
* @example
* legend: {
* show: true,
* hide: true,
* //or hide: "data1"
* //or hide: ["data1", "data2"]
* contents: {
* bindto: "#legend", // <ul id='legend'></ul>
*
* // will be as: <li style='background-color:#1f77b4'>data1</li>
* template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
*
* // or using function
* template: function(id, color, data) {
* // if you want omit some legend, return falsy value
* if (id !== "data1") {
* return "<li style='background-color:"+ color +">"+ id +"</li>";
* }
* }
* },
* position: "bottom", // bottom, right, inset
* inset: {
* anchor: "top-right" // top-left, top-right, bottom-left, bottom-right
* x: 20,
* y: 10,
* step: 2
* },
* equally: false,
* padding: 10,
* item: {
* // will disable default interaction
* interaction: false,
*
* // set legend interact on double click
* // by double clicking, will make focused clicked dataseries only, hiding all others.
* interaction: {
* dblclick: true
* }
*
* // when set below callback, will disable corresponding default interactions
* onclick: function(id, visible) {
* // toggle based on the data visibility
* this[visible ? "hide" : "show"](id);
* },
* onover: function(id, visible) { ... },
* onout: function(id, visible) { ... },
*
* // set tile's size
* tile: {
* // set tile type
* type: "circle" // or "rectangle" (default)
*
* // width & height, are only applicable for 'rectangle' legend type
* width: 15,
* height: 15
*
* // radis is only applicable for 'circle' legend type
* r: 10
* }
* },
* format: function(id, dataId) {
* // set ellipsis string when length is > 5
* // to get full legend value, combine with 'legend.tooltip=true'
* if (id.length > 5) {
* id = id.substr(0, 5) + "...";
* }
*
* return id;
* },
* tooltip: true,
* usePoint: true
* }
*/
legend_contents_bindto: undefined,
legend_contents_template: "<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>",
legend_equally: false,
legend_hide: false,
legend_inset_anchor: "top-left",
legend_inset_x: 10,
legend_inset_y: 0,
legend_inset_step: undefined,
legend_item_interaction: true,
legend_item_dblclick: false,
legend_item_onclick: undefined,
legend_item_onover: undefined,
legend_item_onout: undefined,
legend_item_tile_width: 10,
legend_item_tile_height: 10,
legend_item_tile_r: 5,
legend_item_tile_type: "rectangle",
legend_format: undefined,
legend_padding: 0,
legend_position: "bottom",
legend_show: true,
legend_tooltip: false,
legend_usePoint: false
};
/**
* main config options
*/
var main = {
/**
* Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.<br>
* If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
* - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body.
* @name bindto
* @memberof Options
* @property {string|HTMLElement|d3.selection|object} [bindto="#chart"] Specify the element where chart will be drawn.
* @property {string|HTMLElement|d3.selection} bindto.element="#chart" Specify the element where chart will be drawn.
* @property {string} [bindto.classname=bb] Specify the class name of bind element.<br>
* **NOTE:** When class name isn't `bb`, then you also need to update the default CSS to be rendered correctly.
* @default #chart
* @example
* bindto: "#myContainer"
*
* // or HTMLElement
* bindto: document.getElementById("myContainer")
*
* // or D3 selection object
* bindto: d3.select("#myContainer")
*
* // or to change default classname
* bindto: {
* element: "#chart",
* classname: "bill-board" // ex) <div id='chart' class='bill-board'>
* }
*/
bindto: "#chart",
/**
* Set chart background.
* @name background
* @memberof Options
* @property {object} background background object
* @property {string} background.class Specify the class name for background element.
* @property {string} background.color Specify the fill color for background element.<br>**NOTE:** Will be ignored if `imgUrl` option is set.
* @property {string} background.imgUrl Specify the image url string for background.
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Background)
* @example
* background: {
* class: "myClass",
* color: "red",
*
* // Set image url for background.
* // If specified, 'color' option will be ignored.
* imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
* }
*/
background: {},
/**
* Set 'clip-path' attribute for chart element
* - **NOTE:**
* > When is false, chart node element is positioned after the axis node in DOM tree hierarchy.
* > Is to make chart element positioned over axis element.
* @name clipPath
* @memberof Options
* @type {boolean}
* @default true
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.clipPath)
* @example
* // don't set 'clip-path' attribute
* clipPath: false
*/
clipPath: true,
/**
* Set svg element's class name
* @name svg
* @memberof Options
* @type {object}
* @property {object} [svg] svg object
* @property {string} [svg.classname] class name for svg element
* @example
* svg: {
* classname: "test_class"
* }
*/
svg_classname: undefined,
/**
* The desired size of the chart element.
* If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
* @name size
* @memberof Options
* @type {object}
* @property {object} [size] size object
* @property {number} [size.width] width of the chart element
* @property {number} [size.height] height of the chart element
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.ChartSize)
* @example
* size: {
* width: 640,
* height: 480
* }
*/
size_width: undefined,
size_height: undefined,
/**
* The padding of the chart element.
* - **NOTE:** for more information, see the "[`Understanding padding`](https://github.com/naver/billboard.js/wiki/Understanding-padding)"" wiki documentaion.
* @name padding
* @memberof Options
* @type {object}
* @property {object|boolean} [padding=true] Set padding of chart, and accepts object or boolean type.
* - `Object`: Specify each side's padding.
* - `false`: Remove padding completely and make shape to fully occupy the container element.
* - In this case, axes and subchart will be hidden.
* - To adjust some padding from this state, use `axis.[x|y].padding` option.
* @property {string} [padding.mode] padding mode
* - `"fit"`: Reduce padding as much as possible to make chart fit to the container element for chart types w/axis.<br>When specified, all padding values will be relative from fitted value.
* @property {number} [padding.top] padding on the top of chart
* @property {number} [padding.right] padding on the right of chart
* @property {number} [padding.bottom] padding on the bottom of chart
* @property {number} [padding.left] padding on the left of chart
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Padding)
* @see [Demo: Fit padding](https://naver.github.io/billboard.js/demo/#ChartOptions.FitPadding)
* @example
* // remove padding completely.
* padding: false,
*
* padding: {
* // specifying mode value, will reduce padding and make fit to the container element.
* mode: "fit"
*
* // when mode is "fit", all padding values will be relative from fitted value.
* // so, 0 will be initial fitted value.
* top: 20,
* right: 20,
* bottom: 20,
* left: 20
* }
*
* // or specify padding value for each side
* padding: {
* top: 20,
* right: 20,
* bottom: 20,
* left: 20
* }
*/
padding: true,
padding_mode: undefined,
padding_left: undefined,
padding_right: undefined,
padding_top: undefined,
padding_bottom: undefined,
/**
* Set chart resize options
* @name resize
* @memberof Options
* @type {object}
* @property {object} [resize] resize object
* @property {boolean|string} [resize.auto=true] Set chart resize automatically on viewport changes.
* - **NOTE:** Available options
* - true: Enables automatic resize.
* - false: Disables automatic resize.
* - "parent": Enables automatic resize when the parent node is resized.
* - "viewBox": Enables automatic resize, and size will be fixed based on the viewbox.
* @property {boolean|number} [resize.timer=true] Set resize timer option.
* - **NOTE:** Available options
* - The resize function will be called using:
* - true: `setTimeout()`
* - false: `requestIdleCallback()`
* - Given number(delay in ms) value, resize function will be triggered using `setTimeout()` with given delay.
* @see [Demo: resize "parent"](https://naver.github.io/billboard.js/demo/#ChartOptions.resizeParent)
* @see [Demo: resize "viewBox"](https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox)
* @example
* resize: {
* auto: false,
*
* // set resize based on parent node width value
* auto: "parent",
*
* // set resize based on viewBox value
* auto: "viewBox",
*
* // set resize function will be triggered using `setTimeout()`
* timer: true,
*
* // set resize function will be triggered using `requestIdleCallback()`
* timer: false,
*
* // set resize function will be triggered using `setTimeout()` with a delay of `100ms`.
* timer: 100
* }
*/
resize_auto: true,
resize_timer: true,
/**
* Set a callback to execute when the chart is clicked.
* @name onclick
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onclick: function(event) {
* this; // chart instance itself
* event; // native event object
* ...
* }
*/
onclick: undefined,
/**
* Set a callback to execute when mouse/touch enters the chart.
* @name onover
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onover: function(event) {
* this; // chart instance itself
* event; // native event object
* ...
* }
*/
onover: undefined,
/**
* Set a callback to execute when mouse/touch leaves the chart.
* @name onout
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onout: function(event) {
* this; // chart instance itself
* event; // native event object
* ...
* }
*/
onout: undefined,
/**
* Set a callback to execute when user resizes the screen.
* @name onresize
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onresize: function() {
* this; // chart instance itself
* ...
* }
*/
onresize: undefined,
/**
* Set a callback to execute when screen resize finished.
* @name onresized
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onresized: function() {
* this; // chart instance itself
* ...
* }
*/
onresized: undefined,
/**
* Set a callback to execute before the chart is initialized
* @name onbeforeinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onbeforeinit: function() {
* this; // chart instance itself
* ...
* }
*/
onbeforeinit: undefined,
/**
* Set a callback to execute when the chart is initialized.
* @name oninit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* oninit: function() {
* this; // chart instance itself
* ...
* }
*/
oninit: undefined,
/**
* Set a callback to execute after the chart is initialized
* @name onafterinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onafterinit: function() {
* this; // chart instance itself
* ...
* }
*/
onafterinit: undefined,
/**
* Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
* @name onrendered
* @memberof Options
* @type {Function}
* @default undefined
* @example
* onrendered: function() {
* this; // chart instance itself
* ...
* }
*/
onrendered: undefined,
/**
* Set duration of transition (in milliseconds) for chart animation.<br><br>
* - **NOTE:** If `0 `or `null` set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
* @name transition
* @memberof Options
* @type {object}
* @property {object} [transition] transition object
* @property {number} [transition.duration=350] duration in milliseconds
* @example
* transition: {
* duration: 500
* }
*/
transition_duration: 250,
/**
* Set plugins
* @name plugins
* @memberof Options
* @type {Array}
* @example
* plugins: [
* new bb.plugin.stanford({ ... }),
* new PluginA(),
* ...
* ]
*/
plugins: [],
/**
* Control the render timing
* @name render
* @memberof Options
* @type {object}
* @property {object} [render] render object
* @property {boolean} [render.lazy=true] Make to not render at initialization.
* - **NOTE**:
* - Enabled by default when bind element's visibility is hidden.
* - When set to `false`, will initialize the chart regardless the bind element's visibility state, but in this case chart can't be guaranteed to be rendered properly.
* @property {boolean} [render.observe=true] Observe bind element's visibility(`display` or `visiblity` inline css property or class value) & render when is visible automatically (for IEs, only works IE11+). When set to **false**, call [`.flush()`](./Chart.html#flush) to render.
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender)
* @example
* render: {
* lazy: true,
* observe: true
* }
*
* @example
* // <!-- render.lazy will detect visibility defined -->
* // (a) <div id='chart' class='hide'></div>
* // (b) <div id='chart' style='display:none'></div>
*
* // render.lazy enabled by default when element is hidden
* var chart = bb.generate({ ... });
*
* // chart will be rendered automatically when element's visibility changes
* // Note: works only for inlined css property or class attribute changes
* document.getElementById('chart').classList.remove('hide') // (a)
* document.getElementById('chart').style.display = 'block'; // (b)
*
* @example
* // chart won't be rendered and not observing bind element's visiblity changes
* var chart = bb.generate({
* render: {
* lazy: true,
* observe: false
* }
* });
*
* // call at any point when you want to render
* chart.flush();
*/
render: {},
/**
* Show rectangles inside the chart.<br><br>
* - **NOTE:**<br>
* - axis must be x, y or y2. start and end should be the value where regions start and end.
* - If not specified, the edge values will be used.
* - If timeseries x axis, date string, Date object and unixtime integer can be used.
* - If category x axis, category name can be used for start and end.
* - If class is set, the region element will have it as class.
*
* This option accept array of object with below values:
* - `axis {string}`: 'x', 'y', or 'y2'
* - `[start] {number|Date|string}`: Start position of the region. If not set, the start will be the edge of the chart.
* - `[end] {number|Date|string}`: End position of the region. If not set, the end will be the edge of the chart.
* - `[class] {string}`: Class value to apply to the region.
* - `[label] {object}` Lable text option.
* - `text {string}`: Text value.
* - `x {number}`: x Position.
* - `y {number}`: y Position.
* - `center {string}`: Align label at the center. Allowed values are 'x', 'y', 'xy'.
* - `color {string}`: Color string.
* - `rotated (boolean)`: Whether rotate label or not.
* @name regions
* @memberof Options
* @type {Array}
* @default []
* @see [Demo: Regions](https://naver.github.io/billboard.js/demo/#Region.Region)
* @see [Demo: Regions Timeseries](https://naver.github.io/billboard.js/demo/#Region.RegionWithTimeseries)
* @see [Demo: Regions Label](https://naver.github.io/billboard.js/demo/#Region.RegionLabel)
* @example
* regions: [
* {
* axis: "x",
* start: 1,
* end: 4,
* class: "region-1-4",
* label: {
* text: "Region Text",
* x: 5, // position relative of the initial x coordinate
* y: 5, // position relative of the initial y coordinate
* center: "xy", // center text label in both direction.
* color: "red", // color string
* rotated: true // make text to show in vertical or horizontal
* }
* }
* ]
*/
regions: []
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* title config options
*/
var title$1 = {
/**
* Set title options
* @name title
* @memberof Options
* @type {object}
* @property {object} title Title object
* @property {string} [title.text] Title text. If contains `\n`, it's used as line break allowing multiline title.
* @property {number} [title.padding.top=0] Top padding value.
* @property {number} [title.padding.right=0] Right padding value.
* @property {number} [title.padding.bottom=0] Bottom padding value.
* @property {number} [title.padding.left=0] Left padding value.
* @property {string} [title.position=center] Available values are: 'center', 'right' and 'left'.
* @see [Demo](https://naver.github.io/billboard.js/demo/#Title.MultilinedTitle)
* @example
* title: {
* text: "Title Text",
*
* // or Multiline title text
* text: "Main title text\nSub title text",
*
* padding: {
* top: 10,
* right: 10,
* bottom: 10,
* left: 10
* },
* position: "center"
* }
*/
title_text: undefined,
title_padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
title_position: "center"
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* tooltip config options
*/
var tooltip$2 = {
/**
* Tooltip options
* @name tooltip
* @memberof Options
* @type {object}
* @property {object} tooltip Tooltip object
* @property {boolean} [tooltip.show=true] Show or hide tooltip.
* @property {boolean} [tooltip.doNotHide=false] Make tooltip keep showing not hiding on interaction.
* @property {boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points.
* - **NOTE:** The overlapped data points will be displayed as grouped even if set false.
* @property {boolean} [tooltip.linked=false] Set if tooltips on all visible charts with like x points are shown together when one is shown.
* @property {string} [tooltip.linked.name=""] Groping name for linked tooltip.<br>If specified, linked tooltip will be groped interacting to be worked only with the same name.
* @property {Function} [tooltip.format.title] Set format for the title of tooltip.<br>
* Specified function receives x of the data point to show.
* @property {Function} [tooltip.format.name] Set format for the name of each data in tooltip.<br>
* Specified function receives name, ratio, id and index of the data point to show. ratio will be undefined if the chart is not donut/pie/gauge.
* @property {Function} [tooltip.format.value] Set format for the value of each data value in tooltip. If undefined returned, the row of that value will be skipped to be called.
* - Will pass following arguments to the given function:
* - `value {string}`: Value of the data point. If data row contains multiple or ranged(ex. candlestick, area range, etc.) value, formatter will be called as value length.
* - `ratio {number}`: Ratio of the data point in the `pie/donut/gauge` and `area/bar` when contains grouped data. Otherwise is `undefined`.
* - `id {string}`: id of the data point
* - `index {number}`: Index of the data point
* @property {Function} [tooltip.position] Set custom position function for the tooltip.<br>
* This option can be used to modify the tooltip position by returning object that has top and left.
* - Will pass following arguments to the given function:
* - `data {Array}`: Current selected data array object.
* - `width {number}`: Width of tooltip.
* - `height {number}`: Height of tooltip.
* - `element {SVGElement}`: Tooltip event bound element
* - `pos {object}`: Current position of the tooltip.
* @property {Function|object} [tooltip.contents] Set custom HTML for the tooltip.<br>
* If tooltip.grouped is true, data includes multiple data points.<br><br>
* Specified function receives `data` array and `defaultTitleFormat`, `defaultValueFormat` and `color` functions of the data point to show.
* - **Note:**
* - defaultTitleFormat:
* - if `axis.x.tick.format` option will be used if set.
* - otherwise, will return function based on tick format type(category, timeseries).
* - defaultValueFormat:
* - for Arc type (except gauge, radar), the function will return value from `(ratio * 100).toFixed(1)`.
* - for Axis based types, will be used `axis.[y|y2].tick.format` option value if is set.
* - otherwise, will parse value and return as number.
* @property {string|HTMLElement} [tooltip.contents.bindto=undefined] Set CSS selector or element reference to bind tooltip.
* - **NOTE:** When is specified, will not be updating tooltip's position.
* @property {string} [tooltip.contents.template=undefined] Set tooltip's template.<br><br>
* Within template, below syntax will be replaced using template-like syntax string:
* - **{{ ... }}**: the doubly curly brackets indicate loop block for data rows.
* - **{=CLASS_TOOLTIP}**: default tooltip class name `bb-tooltip`.
* - **{=CLASS_TOOLTIP_NAME}**: default tooltip data class name (ex. `bb-tooltip-name-data1`)
* - **{=TITLE}**: title value.
* - **{=COLOR}**: data color.
* - **{=NAME}**: data id value.
* - **{=VALUE}**: data value.
* @property {object} [tooltip.contents.text=undefined] Set additional text content within data loop, using template syntax.
* - **NOTE:** It should contain `{ key: Array, ... }` value
* - 'key' name is used as substitution within template as '{=KEY}'
* - The value array length should match with the data length
* @property {boolean} [tooltip.init.show=false] Show tooltip at the initialization.
* @property {number} [tooltip.init.x=0] Set x Axis index(or index for Arc(donut, gauge, pie) types) to be shown at the initialization.
* @property {object} [tooltip.init.position] Set the position of tooltip at the initialization.
* @property {Function} [tooltip.onshow] Set a callback that will be invoked before the tooltip is shown.
* @property {Function} [tooltip.onhide] Set a callback that will be invoked before the tooltip is hidden.
* @property {Function} [tooltip.onshown] Set a callback that will be invoked after the tooltip is shown
* @property {Function} [tooltip.onhidden] Set a callback that will be invoked after the tooltip is hidden.
* @property {string|Function|null} [tooltip.order=null] Set tooltip data display order.<br><br>
* **Available Values:**
* - `desc`: In descending data value order
* - `asc`: In ascending data value order
* - `null`: It keeps the data display order<br>
* **NOTE:** When `data.groups` is set, the order will follow as the stacked graph order.<br>
* If want to order as data bound, set any value rather than asc, desc or null. (ex. empty string "")
* - `function(data1, data2) { ... }`: [Array.sort compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters)
* @see [Demo: Hide Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.HideTooltip)
* @see [Demo: Tooltip Grouping](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipGrouping)
* @see [Demo: Tooltip Format](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipFormat)
* @see [Demo: Linked Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.LinkedTooltips)
* @see [Demo: Tooltip Position](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipPosition)
* @see [Demo: Tooltip Template](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipTemplate)
* @example
* tooltip: {
* show: true,
* doNotHide: true,
* grouped: false,
* format: {
* title: function(x) { return "Data " + x; },
* name: function(name, ratio, id, index) { return name; },
*
* // If data row contains multiple or ranged(ex. candlestick, area range, etc.) value,
* // formatter will be called as value length times.
* value: function(value, ratio, id, index) { return ratio; }
* },
* position: function(data, width, height, element, pos) {
* // data: [{x, index, id, name, value}, ...]
* // width: Tooltip width
* // height: Tooltip height
* // element: Tooltip event bound element
* // pos: {
* // x: Current mouse event x position,
* // y: Current mouse event y position,
* // xAxis: Current x Axis position (the value is given for axis based chart type only)
* // yAxis: Current y Axis position value or function(the value is given for axis based chart type only)
* // }
*
* // yAxis will work differently per data lenghts
* // - a) Single data: `yAxis` will return `number` value
* // - b) Multiple data: `yAxis` will return a function with property value
*
* // a) Single data:
* // Get y coordinate
* pos.yAxis; // y axis coordinate value of current data point
*
* // b) Multiple data:
* // Get y coordinate of value 500, where 'data1' scales(y or y2).
* // When 'data.axes' option is used, data can bound to different axes.
* // - when "data.axes={data1: 'y'}", wil return y value from y axis scale.
* // - when "data.axes={data1: 'y2'}", wil return y value from y2 axis scale.
* pos.yAxis(500, "data1"); // will return y coordinate value of data1
*
* pos.yAxis(500); // get y coordinate with value of 500, using y axis scale
* pos.yAxis(500, null, "y2"); // get y coordinate with value of 500, using y2 axis scale
*
* return {
* top: 0,
* left: 0
* }
* },
*
* contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
* return ... // formatted html as you want
* },
*
* // specify tooltip contents using template
* // - example of HTML returned:
* // <ul class="bb-tooltip">
* // <li class="bb-tooltip-name-data1"><span>250</span><br><span style="color:#00c73c">data1</span></li>
* // <li class="bb-tooltip-name-data2"><span>50</span><br><span style="color:#fa7171">data2</span></li>
* // </ul>
* contents: {
* bindto: "#tooltip",
* template: '<ul class={=CLASS_TOOLTIP}>{{' +
* '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>' +
* '<span style=color:{=COLOR}>{=NAME}</span></li>' +
* '}}</ul>'
* }
*
* // with additional text value
* // - example of HTML returned:
* // <ul class="bb-tooltip">
* // <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li>
* // <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li>
* // </ul>
* contents: {
* bindto: "#tooltip",
* text: {
* // a) 'key' name is used as substitution within template as '{=KEY}'
* // b) the length should match with the data length
* VAR1: ["text1", "text2"],
* VAR2: ["comment1", "comment2"],
* },
* template: '<ul class={=CLASS_TOOLTIP}>{{' +
* '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' +
* '<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' +
* '}}</ul>'
* }
*
* // sort tooltip data value display in ascending order
* order: "asc",
*
* // specifying sort function