billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
1,724 lines (1,620 loc) • 623 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 2.0.0-next.5
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("d3-time-format"), require("d3-selection"), require("d3-brush"), require("d3-dsv"), require("d3-drag"), require("d3-scale"), require("d3-transition"), require("d3-shape"), require("d3-zoom"), require("d3-axis"), require("d3-ease"), require("d3-color"), require("d3-interpolate"));
else if(typeof define === 'function' && define.amd)
define(["d3-time-format", "d3-selection", "d3-brush", "d3-dsv", "d3-drag", "d3-scale", "d3-transition", "d3-shape", "d3-zoom", "d3-axis", "d3-ease", "d3-color", "d3-interpolate"], factory);
else {
var a = typeof exports === 'object' ? factory(require("d3-time-format"), require("d3-selection"), require("d3-brush"), require("d3-dsv"), require("d3-drag"), require("d3-scale"), require("d3-transition"), require("d3-shape"), require("d3-zoom"), require("d3-axis"), require("d3-ease"), require("d3-color"), require("d3-interpolate")) : 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__2__, __WEBPACK_EXTERNAL_MODULE__3__, __WEBPACK_EXTERNAL_MODULE__4__, __WEBPACK_EXTERNAL_MODULE__5__, __WEBPACK_EXTERNAL_MODULE__6__, __WEBPACK_EXTERNAL_MODULE__7__, __WEBPACK_EXTERNAL_MODULE__8__, __WEBPACK_EXTERNAL_MODULE__9__, __WEBPACK_EXTERNAL_MODULE__10__, __WEBPACK_EXTERNAL_MODULE__11__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__13__, __WEBPACK_EXTERNAL_MODULE__14__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // 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 });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(1);
module.exports = __webpack_require__(15);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__3__;
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__4__;
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__5__;
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__6__;
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__7__;
/***/ }),
/* 8 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__8__;
/***/ }),
/* 9 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__9__;
/***/ }),
/* 10 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__10__;
/***/ }),
/* 11 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__11__;
/***/ }),
/* 12 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__12__;
/***/ }),
/* 13 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__13__;
/***/ }),
/* 14 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE__14__;
/***/ }),
/* 15 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ bb; });
__webpack_require__.d(__webpack_exports__, "bb", function() { return /* reexport */ bb; });
// NAMESPACE OBJECT: ./src/config/resolver/index.ts
var resolver_namespaceObject = {};
__webpack_require__.r(resolver_namespaceObject);
__webpack_require__.d(resolver_namespaceObject, "axisAPI", function() { return axis_api; });
__webpack_require__.d(resolver_namespaceObject, "axisInternal", function() { return internal; });
__webpack_require__.d(resolver_namespaceObject, "axisOptions", function() { return axis_options; });
__webpack_require__.d(resolver_namespaceObject, "shapeArc", function() { return shape_arc; });
__webpack_require__.d(resolver_namespaceObject, "shapeArea", function() { return shape_area; });
__webpack_require__.d(resolver_namespaceObject, "shapeBar", function() { return shape_bar; });
__webpack_require__.d(resolver_namespaceObject, "shapeGauge", function() { return gauge; });
__webpack_require__.d(resolver_namespaceObject, "shapeBubble", function() { return bubble; });
__webpack_require__.d(resolver_namespaceObject, "shapeLine", function() { return shape_line; });
__webpack_require__.d(resolver_namespaceObject, "shapePoint", function() { return shape_point; });
__webpack_require__.d(resolver_namespaceObject, "shapeRadar", function() { return shape_radar; });
__webpack_require__.d(resolver_namespaceObject, "optPoint", function() { return common_point; });
__webpack_require__.d(resolver_namespaceObject, "optArea", function() { return Options_shape_area; });
__webpack_require__.d(resolver_namespaceObject, "optBar", function() { return Options_shape_bar; });
__webpack_require__.d(resolver_namespaceObject, "optBubble", function() { return shape_bubble; });
__webpack_require__.d(resolver_namespaceObject, "optLine", function() { return Options_shape_line; });
__webpack_require__.d(resolver_namespaceObject, "optScatter", function() { return scatter; });
__webpack_require__.d(resolver_namespaceObject, "optSpline", function() { return spline; });
__webpack_require__.d(resolver_namespaceObject, "optDonut", function() { return donut; });
__webpack_require__.d(resolver_namespaceObject, "optGauge", function() { return shape_gauge; });
__webpack_require__.d(resolver_namespaceObject, "optPie", function() { return pie; });
__webpack_require__.d(resolver_namespaceObject, "optRadar", function() { return Options_shape_radar; });
// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
// 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__(2);
// 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__(3);
// CONCATENATED MODULE: ./src/config/classes.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* CSS class names definition
* @private
*/
/* harmony default export */ var config_classes = ({
arc: "bb-arc",
arcLabelLine: "bb-arc-label-line",
arcs: "bb-arcs",
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",
brush: "bb-brush",
button: "bb-button",
buttonZoomReset: "bb-zoom-reset",
chart: "bb-chart",
chartArc: "bb-chart-arc",
chartArcs: "bb-chart-arcs",
chartArcsBackground: "bb-chart-arcs-background",
chartArcsGaugeMax: "bb-chart-arcs-gauge-max",
chartArcsGaugeMin: "bb-chart-arcs-gauge-min",
chartArcsGaugeUnit: "bb-chart-arcs-gauge-unit",
chartArcsTitle: "bb-chart-arcs-title",
chartArcsGaugeTitle: "bb-chart-arcs-gauge-title",
chartBar: "bb-chart-bar",
chartBars: "bb-chart-bars",
chartCircles: "bb-chart-circles",
chartLine: "bb-chart-line",
chartLines: "bb-chart-lines",
chartRadar: "bb-chart-radar",
chartRadars: "bb-chart-radars",
chartText: "bb-chart-text",
chartTexts: "bb-chart-texts",
circle: "bb-circle",
circles: "bb-circles",
colorPattern: "bb-color-pattern",
colorScale: "bb-colorscale",
defocused: "bb-defocused",
dragarea: "bb-dragarea",
empty: "bb-empty",
eventRect: "bb-event-rect",
eventRects: "bb-event-rects",
eventRectsMultiple: "bb-event-rects-multiple",
eventRectsSingle: "bb-event-rects-single",
focused: "bb-focused",
gaugeValue: "bb-gauge-value",
grid: "bb-grid",
gridLines: "bb-grid-lines",
legend: "bb-legend",
legendBackground: "bb-legend-background",
legendItem: "bb-legend-item",
legendItemEvent: "bb-legend-item-event",
legendItemFocused: "bb-legend-item-focused",
legendItemHidden: "bb-legend-item-hidden",
legendItemPoint: "bb-legend-item-point",
legendItemTile: "bb-legend-item-tile",
level: "bb-level",
levels: "bb-levels",
line: "bb-line",
lines: "bb-lines",
main: "bb-main",
region: "bb-region",
regions: "bb-regions",
selectedCircle: "bb-selected-circle",
selectedCircles: "bb-selected-circles",
shape: "bb-shape",
shapes: "bb-shapes",
stanfordElements: "bb-stanford-elements",
stanfordLine: "bb-stanford-line",
stanfordLines: "bb-stanford-lines",
stanfordRegion: "bb-stanford-region",
stanfordRegions: "bb-stanford-regions",
target: "bb-target",
text: "bb-text",
texts: "bb-texts",
title: "bb-title",
tooltip: "bb-tooltip",
tooltipContainer: "bb-tooltip-container",
tooltipName: "bb-tooltip-name",
xgrid: "bb-xgrid",
xgridFocus: "bb-xgrid-focus",
xgridLine: "bb-xgrid-line",
xgridLines: "bb-xgrid-lines",
xgrids: "bb-xgrids",
ygrid: "bb-ygrid",
ygridFocus: "bb-ygrid-focus",
ygridLine: "bb-ygrid-line",
ygridLines: "bb-ygrid-lines",
ygrids: "bb-ygrids",
zoomBrush: "bb-zoom-brush",
EXPANDED: "_expanded_",
SELECTED: "_selected_",
INCLUDED: "_included_",
TextOverlapping: "text-overlapping"
});
// CONCATENATED MODULE: ./src/config/Store/Element.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* Elements class.
* @class Elements
* @ignore
* @private
*/
var Element = function () {
return {
chart: null,
main: null,
svg: null,
axis: {
// axes
x: null,
y: null,
y2: null,
subX: null
},
defs: null,
tooltip: null,
legend: null,
title: null,
subchart: {
main: null,
// $$.context
bar: null,
// $$.contextBar
line: null,
// $$.contextLine
area: null // $$.contextArea
},
arcs: null,
bar: null,
// mainBar,
line: null,
// mainLine,
area: null,
// mainArea,
circle: null,
// mainCircle,
radar: null,
text: null,
// mainText,
grid: {
main: null,
// grid (also focus)
x: null,
// xgrid,
y: null // ygrid,
},
gridLines: {
main: null,
// gridLines
x: null,
// xgridLines,
y: null // ygridLines
},
region: {
main: null,
// region
list: null // mainRegion
},
eventRect: null
};
};
// CONCATENATED MODULE: ./src/config/Store/State.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* State class.
* @class State
* @ignore
* @private
*/
var State = function () {
return {
width: 0,
width2: 0,
height: 0,
height2: 0,
margin: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
margin2: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
margin3: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
arcWidth: 0,
arcHeight: 0,
xAxisHeight: 0,
hasAxis: !1,
hasRadar: !1,
current: {
width: 0,
height: 0,
dataMax: 0,
maxTickWidths: {
x: {
size: 0,
ticks: [],
clipPath: 0,
domain: ""
},
y: {
size: 0,
domain: ""
},
y2: {
size: 0,
domain: ""
}
},
// current used chart type list
types: []
},
// legend
isLegendRight: !1,
isLegendInset: !1,
isLegendTop: !1,
isLegendLeft: !1,
legendStep: 0,
legendItemWidth: 0,
legendItemHeight: 0,
legendHasRendered: !1,
axis: {
x: {
padding: {
left: 0,
right: 0
},
tickCount: 0
}
},
rotatedPadding: {
left: 30,
right: 0,
top: 5
},
withoutFadeIn: {},
inputType: "",
datetimeId: "",
// clip id string
clip: {
id: "",
idXAxis: "",
idYAxis: "",
idXAxisTickTexts: "",
idGrid: "",
idSubchart: "",
// clipIdForSubchart
path: "",
pathXAxis: "",
pathYAxis: "",
pathXAxisTickTexts: "",
pathGrid: ""
},
// status
dragStart: null,
dragging: !1,
flowing: !1,
cancelClick: !1,
mouseover: !1,
rendered: !1,
transiting: !1,
resizing: !1,
// resize event called
toggling: !1,
// legend toggle
hasNegativeValue: !1,
hasPositiveValue: !0,
orgAreaOpacity: "0.2",
// ID strings
hiddenTargetIds: [],
hiddenLegendIds: [],
focusedTargetIds: [],
defocusedTargetIds: [],
// value for Arc
radius: 0,
innerRadius: 0,
innerRadiusRatio: 0,
gaugeArcWidth: 0,
radiusExpanded: 0,
// xgrid attribute
xgridAttr: {
x1: null,
x2: null,
y1: null,
y2: null
}
};
};
// CONCATENATED MODULE: ./src/config/Store/Store.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
// mapping
var Store_classes = {
element: Element,
state: State
};
/**
* Internal store class.
* @class Store
* @ignore
* @private
*/
var Store = /*#__PURE__*/function () {
function Store() {
var _this = this;
Object.keys(Store_classes).forEach(function (v) {
_this[v] = new Store_classes[v]();
});
}
var _proto = Store.prototype;
return _proto.getStore = function getStore(name) {
return this[name];
}, Store;
}();
// CONCATENATED MODULE: ./src/config/Options/common/main.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* main config options
*/
/* harmony default export */ var common_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: !0,
/**
* 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.
* @name padding
* @memberof Options
* @type {object}
* @property {object} [padding] padding object
* @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
* @example
* padding: {
* top: 20,
* right: 20,
* bottom: 20,
* left: 20
* }
*/
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} [resize.auto=true] Set chart resize automatically on viewport changes.
* @example
* resize: {
* auto: false
* }
*/
resize_auto: !0,
/**
* Set a callback to execute when mouse/touch enters the chart.
* @name onover
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onover: function(ctx) {
* ...
* }
*/
onover: undefined,
/**
* Set a callback to execute when mouse/touch leaves the chart.
* @name onout
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onout: function(ctx) {
* ...
* }
*/
onout: undefined,
/**
* Set a callback to execute when user resizes the screen.
* @name onresize
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onresize: function(ctx) {
* ...
* }
*/
onresize: undefined,
/**
* Set a callback to execute when screen resize finished.
* @name onresized
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onresized: function(ctx) {
* ...
* }
*/
onresized: undefined,
/**
* Set a callback to execute before the chart is initialized
* @name onbeforeinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onbeforeinit: function(ctx) {
* ...
* }
*/
onbeforeinit: undefined,
/**
* Set a callback to execute when the chart is initialized.
* @name oninit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* oninit: function(ctx) {
* ...
* }
*/
oninit: undefined,
/**
* Set a callback to execute after the chart is initialized
* @name onafterinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onafterinit: function(ctx) {
* ...
* }
*/
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
* // @param {Chart} ctx - Instance itself
* onrendered: function(ctx) {
* ...
* }
*/
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: 350,
/**
* 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 (enabled by default when bind element's visibility is hidden).
* @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>
* This option accepts array including object that has axis, start, end and class.
* The keys start, end and class are optional.
* 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 class is set, the region element will have it as class.
* @name regions
* @memberof Options
* @type {Array}
* @default []
* @example
* regions: [
* {
* axis: "x",
* start: 1,
* end: 4,
* class: "region-1-4"
* }
* ]
*/
regions: []
});
// CONCATENATED MODULE: ./src/config/Options/data/data.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* data config options
*/
/* harmony default export */ var data_data = ({
/**
* Converts data id value
* @name data․idConverter
* @memberof Options
* @type {Function}
* @default function(id) { return id; }
* @example
* data: {
* idConverter: function(id) {
* // when id is 'data1', converts to be 'data2'
* // 'data2' should be given as the initial data value
* if (id === "data1") {
* return "data2";
* } else {
* return id;
* }
* }
* }
*/
data_idConverter: function data_idConverter(id) {
return id;
},
/**
* Set custom data name.
* @name data․names
* @memberof Options
* @type {object}
* @default {}
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataName)
* @example
* data: {
* names: {
* data1: "Data Name 1",
* data2: "Data Name 2"
* }
* }
*/
data_names: {},
/**
* Set custom data class.<br><br>
* If this option is specified, the element g for the data has an additional class that has the prefix 'bb-target-' (eg. bb-target-additional-data1-class).
* @name data․classes
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* classes: {
* data1: "additional-data1-class",
* data2: "additional-data2-class"
* }
* }
*/
data_classes: {},
/**
* Set chart type at once.<br><br>
* If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.<br><br>
* **Available Values:**
* - area
* - area-line-range
* - area-spline
* - area-spline-range
* - area-step
* - bar
* - bubble
* - donut
* - gauge
* - line
* - pie
* - radar
* - scatter
* - spline
* - step
* @name data․type
* @memberof Options
* @type {string}
* @default "line"<br>NOTE: When importing shapes by ESM, `line()` should be specified for type.
* @example
* data: {
* type: "bar"
* }
* @example
* // Generate chart by importing ESM
* // Import types to be used only, where this will make smaller bundle size.
* import bb, {
* area,
* areaLineRange,
* areaSpline,
* areaSplineRange,
* areaStep,
* bar,
* bubble,
* donut,
* gauge,
* line,
* pie,
* radar,
* scatter,
* spline,
* step
* }
*
* bb.generate({
* ...,
* data: {
* type: bar()
* }
* });
*/
data_type: undefined,
/**
* Set chart type for each data.<br>
* This setting overwrites data.type setting.
* - **NOTE:** `radar` type can't be combined with other types.
* @name data․types
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* types: {
* data1: "bar",
* data2: "spline"
* }
* }
* @example
* // Generate chart by importing ESM
* // Import types to be used only, where this will make smaller bundle size.
* import bb, {
* area,
* areaLineRange,
* areaSpline,
* areaSplineRange,
* areaStep,
* bar,
* bubble,
* donut,
* gauge,
* line,
* pie,
* radar,
* scatter,
* spline,
* step
* }
*
* bb.generate({
* ...,
* data: {
* types: {
* data1: bar(),
* data1: spline()
* }
* }
* });
*/
data_types: {},
/**
* This option changes the order of stacking data and pieces of pie/donut.
* - If `null` specified, it will be the order the data loaded.
* - If function specified, it will be used as [Array.sort compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters)<br><br>
*
* **Available Values:**
* - `desc`: In descending order
* - `asc`: In ascending order
* - `null`: It keeps the data load order
* - `function(data1, data2) { ... }`: Array.sort compareFunction
* @name data․order
* @memberof Options
* @type {string|Function|null}
* @default desc
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataOrder)
* @example
* data: {
* // in descending order (default)
* order: "desc"
*
* // in ascending order
* order: "asc"
*
* // keeps data input order
* order: null
*
* // specifying sort function
* order: function(a, b) {
* // param data passed format
* {
* id: "data1", id_org: "data1", values: [
* {x: 5, value: 250, id: "data1", index: 5, name: "data1"},
* ...
* ]
* }
* }
* }
*/
data_order: "desc",
/**
* Set groups for the data for stacking.
* @name data․groups
* @memberof Options
* @type {Array}
* @default []
* @example
* data: {
* groups: [
* ["data1", "data2"],
* ["data3"]
* ]
* }
*/
data_groups: [],
/**
* Set color converter function.<br><br>
* This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').
* @name data․color
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataColor)
* @example
* data: {
* color: function(color, d) { ... }
* }
*/
data_color: undefined,
/**
* Set color for each data.
* @name data․colors
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* colors: {
* data1: "#ff0000",
* data2: function(d) {
* return "#000";
* }
* ...
* }
* }
*/
data_colors: {},
/**
* Set labels options
* @name data․labels
* @memberof Options
* @type {object}
* @property {object} data Data object
* @property {boolean} [data.labels=false] Show or hide labels on each data points
* @property {boolean} [data.labels.centered=false] Centerize labels on `bar` shape. (**NOTE:** works only for 'bar' type)
* @property {Function} [data.labels.format] Set formatter function for data labels.<br>
* The formatter function receives 4 arguments such as v, id, i, j and it must return a string that will be shown as the label. The arguments are:<br>
* - `v` is the value of the data point where the label is shown.
* - `id` is the id of the data where the label is shown.
* - `i` is the index of the data point where the label is shown.
* - `j` is the sub index of the data point where the label is shown.<br><br>
* Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
* @property {string|object} [data.labels.colors] Set label text colors.
* @property {object} [data.labels.position] Set each dataset position, relative the original.
* @property {number} [data.labels.position.x=0] x coordinate position, relative the original.
* @property {number} [data.labels.position.y=0] y coordinate position, relative the original.
* @memberof Options
* @type {object}
* @default {}
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataLabel)
* @see [Demo: label colors](https://naver.github.io/billboard.js/demo/#Data.DataLabelColors)
* @see [Demo: label format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat)
* @see [Demo: label overlap](https://naver.github.io/billboard.js/demo/#Data.DataLabelOverlap)
* @see [Demo: label position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition)
* @example
* data: {
* labels: true,
*
* // or set specific options
* labels: {
* format: function(v, id, i, j) { ... },
*
* // it's possible to set for each data
* format: {
* data1: function(v, id, i, j) { ... },
* ...
* },
*
* // align text to center of the 'bar' shape (works only for 'bar' type)
* centered: true,
*
* // apply for all label texts
* colors: "red",
*
* // or set different colors per dataset
* // for not specified dataset, will have the default color value
* colors: {
* data1: "yellow",
* data3: "green"
* },
*
* // set x, y coordinate position
* position: {
* x: -10,
* y: 10
* },
*
* // or set x, y coordinate position by each dataset
* position: {
* data1: {x: 5, y: 5},
* data2: {x: 10, y: -20}
* }
* }
* }
*/
data_labels: {},
data_labels_colors: undefined,
data_labels_position: {},
/**
* Hide each data when the chart appears.<br><br>
* If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
* @name data․hide
* @memberof Options
* @type {boolean|Array}
* @default false
* @example
* data: {
* // all of data will be hidden
* hide: true
*
* // specified data will be hidden
* hide: ["data1", ...]
* }
*/
data_hide: !1,
/**
* Filter values to be shown
* The data value is the same as the returned by `.data()`.
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
* @name data․filter
* @memberof Options
* @type {Function}
* @default undefined
* @example
* data: {
* // filter for id value
* filter: function(v) {
* // v: [{id: "data1", id_org: "data1", values: [
* // {x: 0, value: 130, id: "data2", index: 0}, ...]
* // }, ...]
* return v.id !== "data1";
* }
*/
data_filter: undefined,
/**
* Set a callback for click event on each data point.<br><br>
* This callback will be called when each data point clicked and will receive `d` and element as the arguments.
* - `d` is the data clicked and element is the element clicked.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onclick
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onclick: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
* // element - <circle>
* ...
* }
* }
*/
data_onclick: function data_onclick() {},
/**
* Set a callback for mouse/touch over event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves onto each data point and will receive `d` and `element` as the argument.
* - `d` is the data where mouse cursor moves onto.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onover
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onover: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4}
* // element - <circle>
* ...
* }
* }
*/
data_onover: function data_onover() {},
/**
* Set a callback for mouse/touch out event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves out each data point and will receive `d` as the argument.
* - `d` is the data where mouse cursor moves out.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onout
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onout: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4}
* // element - <circle>
* ...
* }
* }
*/
data_onout: function data_onout() {},
/**
* Set a callback for minimum data
* - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
* @name data․onmin
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
* @example
* onmin: function(data) {
* // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
* ...
* }
*/
data_onmin: undefined,
/**
* Set a callback for maximum data
* - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
* @name data․onmax
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
* @example
* onmax: function(data) {
* // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
* ...
* }
*/
data_onmax: undefined,
/**
* Load a CSV or JSON file from a URL. NOTE that this will not work if loading via the "file://" protocol as the most browsers will block XMLHTTPRequests.
* @name data․url
* @memberof Options
* @type {string}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.LoadData)
* @example
* data: {
* url: "/data/test.csv"
* }
*/
data_url: undefined,
/**
* XHR header value
* - **NOTE:** Should be used with `data.url` option
* @name data․headers
* @memberof Options
* @type {string}
* @default undefined
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
* @example
* data: {
* url: "/data/test.csv",
* headers: {
* "Content-Type": "text/xml",
* ...
* }
* }
*/
data_headers: undefined,
/**
* Parse a JSON object for data. See also data.keys.
* @name data․json
* @memberof Options
* @type {Array}
* @default undefined
* @see [data․keys](#.data%25E2%2580%25A4keys)
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.JSONData)
* @example
* data: {
* json: [
* {name: "www.site1.com", upload: 200, download: 200, total: 400},
* {name: "www.site2.com", upload: 100, download: 300, total: 400},
* {name: "www.site3.com", upload: 300, download: 200, total: 500},
* {name: "www.site4.com", upload: 400, download: 100, total: 500}
* ],
* keys: {
* // x: "name", // it's possible to specify 'x' when category axis
* value: ["upload", "download"]
* }
* }
*/
data_json: undefined,
/**
* Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
* @name data․rows
* @memberof Options
* @type {Array}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.RowOrientedData)
* @example
* data: {
* rows: [
* ["A", "B", "C"],
* [90, 120, 300],
* [40, 160, 240],
* [50, 200, 290],
* [120, 160, 230],
* [80, 130, 300],
* [90, 220, 320]
* ]
* }
*
* // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
* // - an array of [high, mid, low] data following the order
* // - or an object with 'high', 'mid' and 'low' key value
* data: {
* rows: [
* ["data1", "data2"],
* [
* // or {high:150, mid: 140, low: 110}, 120
* [150, 140, 110], 120
* ],
* [[155, 130, 115], 55],
* [[160, 135, 120], 60]
* ],
* types: {
* data1: "area-line-range",
* data2: "line"
* }
* }
*
* // for 'bubble' type, data can contain dimension value:
* // - an array of [y, z] data following the order
* // - or an object with 'y' and 'z' key value
* // 'y' is for y axis coordination and 'z' is the bubble radius value
* data: {
* rows: [
* ["data1", "data2"],
* [
* // or {y:10, z: 140}, 120
* [10, 140], 120
* ],
* [[100, 30], 55],
* [[50, 100], 60]
* ],
* types: {
* data1: "bubble",
* data2: "line"
* }
* }
*/
data_rows: undefined,
/**
* Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
* @name data․columns
* @memberof Options
* @type {Array}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.ColumnOrientedData)
* @example
* data: {
* columns: [
* ["data1", 30, 20, 50, 40, 60, 50],
* ["data2", 200, 130, 90, 240, 130, 220],
* ["data3", 300, 200, 160, 400, 250, 250]
* ]
* }
*
* // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
* // - an array of [high, mid, low] data following the order
* // - or an object with 'high', 'mid' and 'low' key value
* data: {
* columns: [
* ["data1",
* [150, 140, 110], // or {high:150, mid: 140, low: 110}
* [150, 140, 110],
* [150, 140, 110]
* ]
* ],
* type: "area-line-range"
* }
*
* // for 'bubble' type, data can contain dimension value:
* // - an array of [y, z] data following the order
* // - or an object with 'y' and 'z' key value
* // 'y' is for y axis coordination and 'z' is the bubble radius value
* data: {
* columns: [
* ["data1",
* [10, 140], // or {y:10, z: 140}
* [100, 30],
* [50, 100]
* ]
* ],
* type: "bubble"
* }
*/
data_columns: undefined,
/**
* Used if loading JSON via data.url.
* - **Available Values:**
* - json
* - csv
* - tsv
* @name data․mimeType
* @memberof Options
* @type {string}
* @default csv
* @example
* data: {
* mimeType: "json"
* }
*/
data_mimeType: "csv",
/**
* Choose which JSON object keys correspond to desired data.
* - **NOTE:** Only for JSON object given as array.
* @name data․keys
* @memberof Options
* @type {string}
* @default undefined
* @example
* data: {
* json: [
* {name: "www.site1.com", upload: 200, download: 200, total: 400},
* {name: "www.site2.com", upload: 100, download: 300, total: 400},
* {name: "www.site3.com", upload: 300, download: 200, total: 500},
* {name: "www.site4.com", upload: 400, download: 100, total: 500}
* ],
* keys: {
* // x: "name", // it's possible to specify 'x' when category axis
* value: ["upload", "download"]
* }
* }
*/
data_keys: undefined,
/**
* Set text label to be displayed when there's no data to show.
* - ex. Toggling all visible data to not be shown, unloading all current data, etc.
* @name data․empty․label․text
* @memberof Options
* @type {string}
* @default ""
* @example
* data: {
* empty: {
* label: {
* text: "No Data"
* }
* }
* }
*/
data_empty_label_text: ""
});
// CONCATENATED MODULE: ./src/config/Options/data/selection.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* data.selection config options
*/
/* harmony default export */ var data_selection = ({
/**
* Set data selection enabled<br><br>
* If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).
* @name data․selection․enabled
* @memberof Options
* @type {boolean}
* @default false
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataSelection)
* @example
* data: {
* selection: {
* enabled: true
* }
* }
*/
data_selection_enabled: !1,
/**
* Set grouped selection enabled.<br><br>
* If this option set true, multiple data points that have same x value will be selected by one selection.
* @name data․selection․grouped
* @memberof Options
* @type {boolean}
* @default false
* @example
* data: {
* selection: {
* grouped: true
* }
* }
*/
data_selection_grouped: !1,
/**
* Set a callback for each data point to determine if it's selectable or not.<br><br>
* The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
* @name data․selection․isselectable
* @memberof Options
* @type {Function}
* @default function() { return true; }
* @example
* data: {
* selection: {
* isselectable: function(d) { ... }
* }
* }
*/
data_selection_isselectable: function data_selection_isselectable() {
return !0;
},
/**
* Set multiple data points selection enabled.<br><br>
* If this option set true, multile data points can have the selected state at the same time. If false set, only one data point can have the selected state and the others will be un