billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
1,246 lines (1,209 loc) • 775 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
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("d3-axis"), require("d3-brush"), require("d3-drag"), require("d3-dsv"), require("d3-ease"), require("d3-hierarchy"), require("d3-interpolate"), require("d3-scale"), require("d3-selection"), require("d3-shape"), require("d3-time-format"), require("d3-transition"), require("d3-zoom"));
else if(typeof define === 'function' && define.amd)
define(["d3-axis", "d3-brush", "d3-drag", "d3-dsv", "d3-ease", "d3-hierarchy", "d3-interpolate", "d3-scale", "d3-selection", "d3-shape", "d3-time-format", "d3-transition", "d3-zoom"], factory);
else {
var a = typeof exports === 'object' ? factory(require("d3-axis"), require("d3-brush"), require("d3-drag"), require("d3-dsv"), require("d3-ease"), require("d3-hierarchy"), require("d3-interpolate"), require("d3-scale"), require("d3-selection"), require("d3-shape"), require("d3-time-format"), require("d3-transition"), require("d3-zoom")) : factory(root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, function(__WEBPACK_EXTERNAL_MODULE__11__, __WEBPACK_EXTERNAL_MODULE__4__, __WEBPACK_EXTERNAL_MODULE__6__, __WEBPACK_EXTERNAL_MODULE__5__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__14__, __WEBPACK_EXTERNAL_MODULE__13__, __WEBPACK_EXTERNAL_MODULE__7__, __WEBPACK_EXTERNAL_MODULE__2__, __WEBPACK_EXTERNAL_MODULE__9__, __WEBPACK_EXTERNAL_MODULE__3__, __WEBPACK_EXTERNAL_MODULE__8__, __WEBPACK_EXTERNAL_MODULE__10__) {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ([
/* 0 */,
/* 1 */,
/* 2 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
/***/ }),
/* 3 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__3__;
/***/ }),
/* 4 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__4__;
/***/ }),
/* 5 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__5__;
/***/ }),
/* 6 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__6__;
/***/ }),
/* 7 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__7__;
/***/ }),
/* 8 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__8__;
/***/ }),
/* 9 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__9__;
/***/ }),
/* 10 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__10__;
/***/ }),
/* 11 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__11__;
/***/ }),
/* 12 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__12__;
/***/ }),
/* 13 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__13__;
/***/ }),
/* 14 */
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__14__;
/***/ })
/******/ ]);
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
!function() {
// extracted by mini-css-extract-plugin
}();
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
bb: function() { return /* reexport */ bb; },
"default": function() { return /* reexport */ bb; }
});
// NAMESPACE OBJECT: ./src/config/resolver/interaction.ts
var resolver_interaction_namespaceObject = {};
__webpack_require__.r(resolver_interaction_namespaceObject);
__webpack_require__.d(resolver_interaction_namespaceObject, {
selection: function() { return selectionModule; },
subchart: function() { return subchartModule; },
zoom: function() { return zoomModule; }
});
// NAMESPACE OBJECT: ./src/config/resolver/shape.ts
var resolver_shape_namespaceObject = {};
__webpack_require__.r(resolver_shape_namespaceObject);
__webpack_require__.d(resolver_shape_namespaceObject, {
area: function() { return resolver_shape_area; },
areaLineRange: function() { return areaLineRange; },
areaSpline: function() { return areaSpline; },
areaSplineRange: function() { return areaSplineRange; },
areaStep: function() { return areaStep; },
areaStepRange: function() { return areaStepRange; },
bar: function() { return resolver_shape_bar; },
bubble: function() { return resolver_shape_bubble; },
candlestick: function() { return resolver_shape_candlestick; },
donut: function() { return shape_donut; },
funnel: function() { return resolver_shape_funnel; },
gauge: function() { return resolver_shape_gauge; },
line: function() { return resolver_shape_line; },
pie: function() { return shape_pie; },
polar: function() { return resolver_shape_polar; },
radar: function() { return resolver_shape_radar; },
scatter: function() { return shape_scatter; },
spline: function() { return shape_spline; },
step: function() { return step; },
treemap: function() { return resolver_shape_treemap; }
});
// EXTERNAL MODULE: external {"commonjs":"d3-selection","commonjs2":"d3-selection","amd":"d3-selection","root":"d3"}
var external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_ = __webpack_require__(2);
// EXTERNAL MODULE: external {"commonjs":"d3-time-format","commonjs2":"d3-time-format","amd":"d3-time-format","root":"d3"}
var external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_ = __webpack_require__(3);
;// ./src/config/classes.ts
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
const $COMMON = {
button: "bb-button",
chart: "bb-chart",
empty: "bb-empty",
main: "bb-main",
target: "bb-target",
EXPANDED: "_expanded_",
dummy: "_dummy_"
};
const $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"
};
const $AREA = {
area: "bb-area",
areas: "bb-areas"
};
const $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"
};
const $BAR = {
bar: "bb-bar",
bars: "bb-bars",
chartBar: "bb-chart-bar",
chartBars: "bb-chart-bars",
barConnectLine: "bb-bar-connectLine"
};
const $CANDLESTICK = {
candlestick: "bb-candlestick",
candlesticks: "bb-candlesticks",
chartCandlestick: "bb-chart-candlestick",
chartCandlesticks: "bb-chart-candlesticks",
valueDown: "bb-value-down",
valueUp: "bb-value-up"
};
const $CIRCLE = {
chartCircles: "bb-chart-circles",
circle: "bb-circle",
circles: "bb-circles"
};
const $COLOR = {
colorPattern: "bb-color-pattern",
colorScale: "bb-colorscale"
};
const $DRAG = {
dragarea: "bb-dragarea",
INCLUDED: "_included_"
};
const $FUNNEL = {
funnel: "bb-funnel",
chartFunnel: "bb-chart-funnel",
chartFunnels: "bb-chart-funnels",
funnelBackground: "bb-funnel-background"
};
const $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"
};
const $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"
};
const $LINE = {
chartLine: "bb-chart-line",
chartLines: "bb-chart-lines",
line: "bb-line",
lines: "bb-lines"
};
const $EVENT = {
eventRect: "bb-event-rect",
eventRects: "bb-event-rects",
eventRectsMultiple: "bb-event-rects-multiple",
eventRectsSingle: "bb-event-rects-single"
};
const $FOCUS = {
focused: "bb-focused",
defocused: "bb-defocused",
legendItemFocused: "bb-legend-item-focused",
xgridFocus: "bb-xgrid-focus",
ygridFocus: "bb-ygrid-focus"
};
const $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"
};
const $LEVEL = {
level: "bb-level",
levels: "bb-levels"
};
const $RADAR = {
chartRadar: "bb-chart-radar",
chartRadars: "bb-chart-radars"
};
const $REGION = {
region: "bb-region",
regions: "bb-regions"
};
const $SELECT = {
selectedCircle: "bb-selected-circle",
selectedCircles: "bb-selected-circles",
SELECTED: "_selected_"
};
const $SHAPE = {
shape: "bb-shape",
shapes: "bb-shapes"
};
const $SUBCHART = {
brush: "bb-brush",
subchart: "bb-subchart"
};
const $TEXT = {
chartText: "bb-chart-text",
chartTexts: "bb-chart-texts",
text: "bb-text",
texts: "bb-texts",
title: "bb-title",
TextOverlapping: "text-overlapping"
};
const $TOOLTIP = {
tooltip: "bb-tooltip",
tooltipContainer: "bb-tooltip-container",
tooltipName: "bb-tooltip-name"
};
const $TREEMAP = {
treemap: "bb-treemap",
chartTreemap: "bb-chart-treemap",
chartTreemaps: "bb-chart-treemaps"
};
const $ZOOM = {
buttonZoomReset: "bb-zoom-reset",
zoomBrush: "bb-zoom-brush"
};
/* harmony default export */ var classes = (__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, $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));
;// ./src/config/Options/common/boost.ts
/* harmony default export */ 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
});
;// ./src/config/Options/common/color.ts
/* harmony default export */ var color = ({
/**
* 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: void 0,
color_threshold: {},
color_onover: void 0
});
;// ./src/config/Options/common/legend.ts
/* harmony default export */ var legend = ({
/**
* 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: void 0,
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: void 0,
legend_item_interaction: true,
legend_item_dblclick: false,
legend_item_onclick: void 0,
legend_item_onover: void 0,
legend_item_onout: void 0,
legend_item_tile_width: 10,
legend_item_tile_height: 10,
legend_item_tile_r: 5,
legend_item_tile_type: "rectangle",
legend_format: void 0,
legend_padding: 0,
legend_position: "bottom",
legend_show: true,
legend_tooltip: false,
legend_usePoint: false
});
;// ./src/config/Options/common/main.ts
/* harmony default export */ 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: void 0,
/**
* 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: void 0,
size_height: void 0,
/**
* 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: void 0,
padding_left: void 0,
padding_right: void 0,
padding_top: void 0,
padding_bottom: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: void 0,
/**
* 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: []
});
;// ./src/config/Options/common/title.ts
/* harmony default export */ var title = ({
/**
* 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: void 0,
title_padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
title_position: "center"
});
;// ./src/config/Options/common/tooltip.ts
/* harmony default export */ var tooltip = ({
/**
* 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,
*