UNPKG

582 kBJavaScriptView Raw
1/*!
2 * Copyright (c) 2017 ~ present NAVER Corp.
3 * billboard.js project is licensed under the MIT license
4 *
5 * billboard.js, JavaScript chart library
6 * http://naver.github.io/billboard.js/
7 *
8 * @version 1.12.1
9 */
10(function webpackUniversalModuleDefinition(root, factory) {
11 if(typeof exports === 'object' && typeof module === 'object')
12 module.exports = factory(require("d3-time-format"), require("d3-selection"), require("d3-transition"), require("d3-axis"), require("d3-scale"), require("d3-brush"), require("d3-dsv"), require("d3-drag"), require("d3-shape"), require("d3-interpolate"), require("d3-color"), require("d3-zoom"), require("d3-ease"));
13 else if(typeof define === 'function' && define.amd)
14 define(["d3-time-format", "d3-selection", "d3-transition", "d3-axis", "d3-scale", "d3-brush", "d3-dsv", "d3-drag", "d3-shape", "d3-interpolate", "d3-color", "d3-zoom", "d3-ease"], factory);
15 else {
16 var a = typeof exports === 'object' ? factory(require("d3-time-format"), require("d3-selection"), require("d3-transition"), require("d3-axis"), require("d3-scale"), require("d3-brush"), require("d3-dsv"), require("d3-drag"), require("d3-shape"), require("d3-interpolate"), require("d3-color"), require("d3-zoom"), require("d3-ease")) : 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"]);
17 for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
18 }
19})(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__) {
20return /******/ (function(modules) { // webpackBootstrap
21/******/ // The module cache
22/******/ var installedModules = {};
23/******/
24/******/ // The require function
25/******/ function __webpack_require__(moduleId) {
26/******/
27/******/ // Check if module is in cache
28/******/ if(installedModules[moduleId]) {
29/******/ return installedModules[moduleId].exports;
30/******/ }
31/******/ // Create a new module (and put it into the cache)
32/******/ var module = installedModules[moduleId] = {
33/******/ i: moduleId,
34/******/ l: false,
35/******/ exports: {}
36/******/ };
37/******/
38/******/ // Execute the module function
39/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
40/******/
41/******/ // Flag the module as loaded
42/******/ module.l = true;
43/******/
44/******/ // Return the exports of the module
45/******/ return module.exports;
46/******/ }
47/******/
48/******/
49/******/ // expose the modules object (__webpack_modules__)
50/******/ __webpack_require__.m = modules;
51/******/
52/******/ // expose the module cache
53/******/ __webpack_require__.c = installedModules;
54/******/
55/******/ // define getter function for harmony exports
56/******/ __webpack_require__.d = function(exports, name, getter) {
57/******/ if(!__webpack_require__.o(exports, name)) {
58/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
59/******/ }
60/******/ };
61/******/
62/******/ // define __esModule on exports
63/******/ __webpack_require__.r = function(exports) {
64/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
65/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
66/******/ }
67/******/ Object.defineProperty(exports, '__esModule', { value: true });
68/******/ };
69/******/
70/******/ // create a fake namespace object
71/******/ // mode & 1: value is a module id, require it
72/******/ // mode & 2: merge all properties of value into the ns
73/******/ // mode & 4: return value when already ns object
74/******/ // mode & 8|1: behave like require
75/******/ __webpack_require__.t = function(value, mode) {
76/******/ if(mode & 1) value = __webpack_require__(value);
77/******/ if(mode & 8) return value;
78/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
79/******/ var ns = Object.create(null);
80/******/ __webpack_require__.r(ns);
81/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
82/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
83/******/ return ns;
84/******/ };
85/******/
86/******/ // getDefaultExport function for compatibility with non-harmony modules
87/******/ __webpack_require__.n = function(module) {
88/******/ var getter = module && module.__esModule ?
89/******/ function getDefault() { return module['default']; } :
90/******/ function getModuleExports() { return module; };
91/******/ __webpack_require__.d(getter, 'a', getter);
92/******/ return getter;
93/******/ };
94/******/
95/******/ // Object.prototype.hasOwnProperty.call
96/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
97/******/
98/******/ // __webpack_public_path__
99/******/ __webpack_require__.p = "";
100/******/
101/******/
102/******/ // Load entry module and return exports
103/******/ return __webpack_require__(__webpack_require__.s = 0);
104/******/ })
105/************************************************************************/
106/******/ ([
107/* 0 */
108/***/ (function(module, exports, __webpack_require__) {
109
110__webpack_require__(1);
111module.exports = __webpack_require__(15);
112
113
114/***/ }),
115/* 1 */
116/***/ (function(module, exports, __webpack_require__) {
117
118// extracted by mini-css-extract-plugin
119
120/***/ }),
121/* 2 */
122/***/ (function(module, exports) {
123
124module.exports = __WEBPACK_EXTERNAL_MODULE__2__;
125
126/***/ }),
127/* 3 */
128/***/ (function(module, exports) {
129
130module.exports = __WEBPACK_EXTERNAL_MODULE__3__;
131
132/***/ }),
133/* 4 */
134/***/ (function(module, exports) {
135
136module.exports = __WEBPACK_EXTERNAL_MODULE__4__;
137
138/***/ }),
139/* 5 */
140/***/ (function(module, exports) {
141
142module.exports = __WEBPACK_EXTERNAL_MODULE__5__;
143
144/***/ }),
145/* 6 */
146/***/ (function(module, exports) {
147
148module.exports = __WEBPACK_EXTERNAL_MODULE__6__;
149
150/***/ }),
151/* 7 */
152/***/ (function(module, exports) {
153
154module.exports = __WEBPACK_EXTERNAL_MODULE__7__;
155
156/***/ }),
157/* 8 */
158/***/ (function(module, exports) {
159
160module.exports = __WEBPACK_EXTERNAL_MODULE__8__;
161
162/***/ }),
163/* 9 */
164/***/ (function(module, exports) {
165
166module.exports = __WEBPACK_EXTERNAL_MODULE__9__;
167
168/***/ }),
169/* 10 */
170/***/ (function(module, exports) {
171
172module.exports = __WEBPACK_EXTERNAL_MODULE__10__;
173
174/***/ }),
175/* 11 */
176/***/ (function(module, exports) {
177
178module.exports = __WEBPACK_EXTERNAL_MODULE__11__;
179
180/***/ }),
181/* 12 */
182/***/ (function(module, exports) {
183
184module.exports = __WEBPACK_EXTERNAL_MODULE__12__;
185
186/***/ }),
187/* 13 */
188/***/ (function(module, exports) {
189
190module.exports = __WEBPACK_EXTERNAL_MODULE__13__;
191
192/***/ }),
193/* 14 */
194/***/ (function(module, exports) {
195
196module.exports = __WEBPACK_EXTERNAL_MODULE__14__;
197
198/***/ }),
199/* 15 */
200/***/ (function(module, __webpack_exports__, __webpack_require__) {
201
202"use strict";
203// ESM COMPAT FLAG
204__webpack_require__.r(__webpack_exports__);
205
206// EXPORTS
207__webpack_require__.d(__webpack_exports__, "bb", function() { return /* binding */ bb; });
208
209// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js
210function _classCallCheck(instance, Constructor) {
211 if (!(instance instanceof Constructor)) {
212 throw new TypeError("Cannot call a class as a function");
213 }
214}
215// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
216function _arrayWithHoles(arr) {
217 if (Array.isArray(arr)) return arr;
218}
219// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
220function _iterableToArrayLimit(arr, i) {
221 if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
222 return;
223 }
224
225 var _arr = [];
226 var _n = true;
227 var _d = false;
228 var _e = undefined;
229
230 try {
231 for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
232 _arr.push(_s.value);
233
234 if (i && _arr.length === i) break;
235 }
236 } catch (err) {
237 _d = true;
238 _e = err;
239 } finally {
240 try {
241 if (!_n && _i["return"] != null) _i["return"]();
242 } finally {
243 if (_d) throw _e;
244 }
245 }
246
247 return _arr;
248}
249// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
250function _nonIterableRest() {
251 throw new TypeError("Invalid attempt to destructure non-iterable instance");
252}
253// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/slicedToArray.js
254
255
256
257function _slicedToArray(arr, i) {
258 return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
259}
260// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/createClass.js
261function _defineProperties(target, props) {
262 for (var i = 0; i < props.length; i++) {
263 var descriptor = props[i];
264 descriptor.enumerable = descriptor.enumerable || false;
265 descriptor.configurable = true;
266 if ("value" in descriptor) descriptor.writable = true;
267 Object.defineProperty(target, descriptor.key, descriptor);
268 }
269}
270
271function _createClass(Constructor, protoProps, staticProps) {
272 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
273 if (staticProps) _defineProperties(Constructor, staticProps);
274 return Constructor;
275}
276// EXTERNAL MODULE: external {"commonjs":"d3-time-format","commonjs2":"d3-time-format","amd":"d3-time-format","root":"d3"}
277var external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_ = __webpack_require__(2);
278
279// EXTERNAL MODULE: external {"commonjs":"d3-selection","commonjs2":"d3-selection","amd":"d3-selection","root":"d3"}
280var external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_ = __webpack_require__(3);
281
282// EXTERNAL MODULE: external {"commonjs":"d3-transition","commonjs2":"d3-transition","amd":"d3-transition","root":"d3"}
283var external_commonjs_d3_transition_commonjs2_d3_transition_amd_d3_transition_root_d3_ = __webpack_require__(4);
284
285// EXTERNAL MODULE: external {"commonjs":"d3-axis","commonjs2":"d3-axis","amd":"d3-axis","root":"d3"}
286var external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_ = __webpack_require__(5);
287
288// EXTERNAL MODULE: external {"commonjs":"d3-scale","commonjs2":"d3-scale","amd":"d3-scale","root":"d3"}
289var external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_ = __webpack_require__(6);
290
291// CONCATENATED MODULE: ./src/config/classes.js
292/**
293 * Copyright (c) 2017 ~ present NAVER Corp.
294 * billboard.js project is licensed under the MIT license
295 */
296
297/**
298 * CSS class names definition
299 * @private
300 */
301/* harmony default export */ var config_classes = ({
302 arc: "bb-arc",
303 arcLabelLine: "bb-arc-label-line",
304 arcs: "bb-arcs",
305 area: "bb-area",
306 areas: "bb-areas",
307 axis: "bb-axis",
308 axisX: "bb-axis-x",
309 axisXLabel: "bb-axis-x-label",
310 axisY: "bb-axis-y",
311 axisY2: "bb-axis-y2",
312 axisY2Label: "bb-axis-y2-label",
313 axisYLabel: "bb-axis-y-label",
314 bar: "bb-bar",
315 bars: "bb-bars",
316 brush: "bb-brush",
317 button: "bb-button",
318 buttonZoomReset: "bb-zoom-reset",
319 chart: "bb-chart",
320 chartArc: "bb-chart-arc",
321 chartArcs: "bb-chart-arcs",
322 chartArcsBackground: "bb-chart-arcs-background",
323 chartArcsGaugeMax: "bb-chart-arcs-gauge-max",
324 chartArcsGaugeMin: "bb-chart-arcs-gauge-min",
325 chartArcsGaugeUnit: "bb-chart-arcs-gauge-unit",
326 chartArcsTitle: "bb-chart-arcs-title",
327 chartArcsGaugeTitle: "bb-chart-arcs-gauge-title",
328 chartBar: "bb-chart-bar",
329 chartBars: "bb-chart-bars",
330 chartLine: "bb-chart-line",
331 chartLines: "bb-chart-lines",
332 chartRadar: "bb-chart-radar",
333 chartRadars: "bb-chart-radars",
334 chartText: "bb-chart-text",
335 chartTexts: "bb-chart-texts",
336 circle: "bb-circle",
337 circles: "bb-circles",
338 colorPattern: "bb-color-pattern",
339 colorScale: "bb-colorscale",
340 defocused: "bb-defocused",
341 dragarea: "bb-dragarea",
342 empty: "bb-empty",
343 eventRect: "bb-event-rect",
344 eventRects: "bb-event-rects",
345 eventRectsMultiple: "bb-event-rects-multiple",
346 eventRectsSingle: "bb-event-rects-single",
347 focused: "bb-focused",
348 gaugeValue: "bb-gauge-value",
349 grid: "bb-grid",
350 gridLines: "bb-grid-lines",
351 legendBackground: "bb-legend-background",
352 legendItem: "bb-legend-item",
353 legendItemEvent: "bb-legend-item-event",
354 legendItemFocused: "bb-legend-item-focused",
355 legendItemHidden: "bb-legend-item-hidden",
356 legendItemPoint: "bb-legend-item-point",
357 legendItemTile: "bb-legend-item-tile",
358 level: "bb-level",
359 levels: "bb-levels",
360 line: "bb-line",
361 lines: "bb-lines",
362 region: "bb-region",
363 regions: "bb-regions",
364 selectedCircle: "bb-selected-circle",
365 selectedCircles: "bb-selected-circles",
366 shape: "bb-shape",
367 shapes: "bb-shapes",
368 stanfordElements: "bb-stanford-elements",
369 stanfordLine: "bb-stanford-line",
370 stanfordLines: "bb-stanford-lines",
371 stanfordRegion: "bb-stanford-region",
372 stanfordRegions: "bb-stanford-regions",
373 target: "bb-target",
374 text: "bb-text",
375 texts: "bb-texts",
376 title: "bb-title",
377 tooltip: "bb-tooltip",
378 tooltipContainer: "bb-tooltip-container",
379 tooltipName: "bb-tooltip-name",
380 xgrid: "bb-xgrid",
381 xgridFocus: "bb-xgrid-focus",
382 xgridLine: "bb-xgrid-line",
383 xgridLines: "bb-xgrid-lines",
384 xgrids: "bb-xgrids",
385 ygrid: "bb-ygrid",
386 ygridFocus: "bb-ygrid-focus",
387 ygridLine: "bb-ygrid-line",
388 ygridLines: "bb-ygrid-lines",
389 ygrids: "bb-ygrids",
390 zoomBrush: "bb-zoom-brush",
391 zoomRect: "bb-zoom-rect",
392 EXPANDED: "_expanded_",
393 SELECTED: "_selected_",
394 INCLUDED: "_included_",
395 TextOverlapping: "text-overlapping"
396});
397// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
398function _arrayWithoutHoles(arr) {
399 if (Array.isArray(arr)) {
400 for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
401 arr2[i] = arr[i];
402 }
403
404 return arr2;
405 }
406}
407// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js
408function _iterableToArray(iter) {
409 if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
410}
411// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
412function _nonIterableSpread() {
413 throw new TypeError("Invalid attempt to spread non-iterable instance");
414}
415// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
416
417
418
419function _toConsumableArray(arr) {
420 return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
421}
422// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
423function _typeof(obj) {
424 "@babel/helpers - typeof";
425
426 if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
427 _typeof = function _typeof(obj) {
428 return typeof obj;
429 };
430 } else {
431 _typeof = function _typeof(obj) {
432 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
433 };
434 }
435
436 return _typeof(obj);
437}
438// EXTERNAL MODULE: external {"commonjs":"d3-brush","commonjs2":"d3-brush","amd":"d3-brush","root":"d3"}
439var external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_ = __webpack_require__(7);
440
441// CONCATENATED MODULE: ./src/internals/browser.js
442/**
443 * Copyright (c) 2017 ~ present NAVER Corp.
444 * billboard.js project is licensed under the MIT license
445 */
446
447/**
448 * Window object
449 * @module
450 * @ignore
451 */
452
453/* eslint-disable no-new-func, no-undef */
454var win = function () {
455 var def = function (o) {
456 return typeof o !== "undefined" && o;
457 };
458
459 return def(self) || def(window) || def(global) || def(globalThis) || Function("return this")();
460}(),
461 browser_doc = win && win.document;
462/* eslint-enable no-new-func, no-undef */
463
464
465
466// CONCATENATED MODULE: ./src/internals/util.js
467
468
469
470/**
471 * Copyright (c) 2017 ~ present NAVER Corp.
472 * billboard.js project is licensed under the MIT license
473 * @ignore
474 */
475
476
477
478
479
480var isValue = function (v) {
481 return v || v === 0;
482},
483 isFunction = function (v) {
484 return typeof v === "function";
485},
486 isString = function (v) {
487 return typeof v === "string";
488},
489 isNumber = function (v) {
490 return typeof v === "number";
491},
492 isUndefined = function (v) {
493 return typeof v === "undefined";
494},
495 isDefined = function (v) {
496 return typeof v !== "undefined";
497},
498 isBoolean = function (v) {
499 return typeof v === "boolean";
500},
501 ceil10 = function (v) {
502 return Math.ceil(v / 10) * 10;
503},
504 asHalfPixel = function (n) {
505 return Math.ceil(n) + .5;
506},
507 diffDomain = function (d) {
508 return d[1] - d[0];
509},
510 isObjectType = function (v) {
511 return _typeof(v) === "object";
512},
513 isEmpty = function (o) {
514 return isUndefined(o) || o === null || isString(o) && o.length === 0 || isObjectType(o) && !(o instanceof Date) && Object.keys(o).length === 0 || isNumber(o) && isNaN(o);
515},
516 notEmpty = function (o) {
517 return !isEmpty(o);
518},
519 isArray = function (arr) {
520 return arr && arr.constructor === Array;
521},
522 isObject = function (obj) {
523 return obj && !obj.nodeType && isObjectType(obj) && !isArray(obj);
524},
525 getOption = function (options, key, defaultValue) {
526 return isDefined(options[key]) ? options[key] : defaultValue;
527},
528 util_hasValue = function (dict, value) {
529 var found = !1;
530 return Object.keys(dict).forEach(function (key) {
531 return dict[key] === value && (found = !0);
532 }), found;
533},
534 callFn = function (fn) {
535 for (var isFn = isFunction(fn), _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) args[_key - 1] = arguments[_key];
536
537 return isFn && fn.call.apply(fn, args), isFn;
538},
539 sanitise = function (str) {
540 return isString(str) ? str.replace(/</g, "&lt;").replace(/>/g, "&gt;") : str;
541},
542 setTextValue = function (node, text) {
543 var dy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [-1, 1],
544 toMiddle = !!(arguments.length > 3 && arguments[3] !== undefined) && arguments[3];
545 if (node && isString(text)) if (text.indexOf("\n") === -1) node.text(text);else {
546 var diff = [node.text(), text].map(function (v) {
547 return v.replace(/[\s\n]/g, "");
548 });
549
550 if (diff[0] !== diff[1]) {
551 var multiline = text.split("\n"),
552 len = toMiddle ? multiline.length - 1 : 1;
553 node.html(""), multiline.forEach(function (v, i) {
554 node.append("tspan").attr("x", 0).attr("dy", "".concat(i === 0 ? dy[0] * len : dy[1], "em")).text(v);
555 });
556 }
557 }
558},
559 getRectSegList = function (path) {
560 /*
561 * seg1 ---------- seg2
562 * | |
563 * | |
564 * | |
565 * seg0 ---------- seg3
566 * */
567 var _path$getBBox = path.getBBox(),
568 x = _path$getBBox.x,
569 y = _path$getBBox.y,
570 width = _path$getBBox.width,
571 height = _path$getBBox.height;
572
573 return [{
574 x: x,
575 y: y + height
576 }, // seg0
577 {
578 x: x,
579 y: y
580 }, // seg1
581 {
582 x: x + width,
583 y: y
584 }, // seg2
585 {
586 x: x + width,
587 y: y + height
588 } // seg3
589 ];
590},
591 getPathBox = function (path) {
592 var _path$getBoundingClie = path.getBoundingClientRect(),
593 width = _path$getBoundingClie.width,
594 height = _path$getBoundingClie.height,
595 items = getRectSegList(path),
596 x = items[0].x,
597 y = Math.min(items[0].y, items[1].y);
598
599 return {
600 x: x,
601 y: y,
602 width: width,
603 height: height
604 };
605},
606 getBrushSelection = function (ctx) {
607 var selection = null,
608 event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"],
609 main = ctx.context || ctx.main;
610 return event && event.constructor.name === "BrushEvent" ? selection = event.selection : main && (selection = main.select(".".concat(config_classes.brush)).node()) && (selection = Object(external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_["brushSelection"])(selection)), selection;
611},
612 getBoundingRect = function (node) {
613 return node.rect || (node.rect = node.getBoundingClientRect());
614},
615 getRandom = function () {
616 var asStr = !(arguments.length > 0 && arguments[0] !== undefined) || arguments[0];
617 return Math.random() + (asStr ? "" : 0);
618},
619 brushEmpty = function (ctx) {
620 var selection = getBrushSelection(ctx);
621 return !selection || selection[0] === selection[1];
622},
623 extend = function () {
624 var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
625 source = arguments.length > 1 ? arguments[1] : undefined;
626
627 for (var p in source) target[p] = source[p];
628
629 return target;
630},
631 capitalize = function (str) {
632 return str.charAt(0).toUpperCase() + str.slice(1);
633},
634 toArray = function (v) {
635 return [].slice.call(v);
636},
637 getCssRules = function (styleSheets) {
638 var rules = [];
639 return styleSheets.forEach(function (sheet) {
640 try {
641 sheet.cssRules && sheet.cssRules.length && (rules = rules.concat(toArray(sheet.cssRules)));
642 } catch (e) {
643 console.error("Error while reading rules from ".concat(sheet.href, ": ").concat(e.toString()));
644 }
645 }), rules;
646},
647 getTranslation = function (node) {
648 var transform = node ? node.transform : null,
649 baseVal = transform ? transform.baseVal : [];
650 return baseVal.length ? baseVal.getItem(0).matrix : {
651 a: 0,
652 b: 0,
653 c: 0,
654 d: 0,
655 e: 0,
656 f: 0
657 };
658},
659 getUnique = function (data) {
660 var isDate = data[0] instanceof Date,
661 d = (isDate ? data.map(Number) : data).filter(function (v, i, self) {
662 return self.indexOf(v) === i;
663 });
664 return isDate ? d.map(function (v) {
665 return new Date(v);
666 }) : d;
667},
668 mergeArray = function (arr) {
669 return arr && arr.length ? arr.reduce(function (p, c) {
670 return p.concat(c);
671 }) : [];
672},
673 mergeObj = function (_mergeObj) {
674 function mergeObj() {
675 return _mergeObj.apply(this, arguments);
676 }
677
678 return mergeObj.toString = function () {
679 return _mergeObj.toString();
680 }, mergeObj;
681}(function (target) {
682 for (var _len2 = arguments.length, objectN = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) objectN[_key2 - 1] = arguments[_key2];
683
684 if (!objectN.length || objectN.length === 1 && !objectN[0]) return target;
685 var source = objectN.shift();
686 return isObject(target) && isObject(source) && Object.keys(source).forEach(function (key) {
687 var value = source[key];
688 isObject(value) ? (!target[key] && (target[key] = {}), target[key] = mergeObj(target[key], value)) : target[key] = isArray(value) ? value.concat() : value;
689 }), mergeObj.apply(void 0, [target].concat(objectN));
690}),
691 sortValue = function (data) {
692 var fn,
693 isAsc = !(arguments.length > 1 && arguments[1] !== undefined) || arguments[1];
694 return data[0] instanceof Date ? fn = isAsc ? function (a, b) {
695 return a - b;
696 } : function (a, b) {
697 return b - a;
698 } : isAsc && !data.every(isNaN) ? fn = function (a, b) {
699 return a - b;
700 } : !isAsc && (fn = function (a, b) {
701 return a > b && -1 || a < b && 1 || a === b && 0;
702 }), data.concat().sort(fn);
703},
704 getMinMax = function (type, data) {
705 var res = data.filter(function (v) {
706 return notEmpty(v);
707 });
708 return res.length ? isNumber(res[0]) ? res = Math[type].apply(Math, _toConsumableArray(res)) : res[0] instanceof Date && (res = sortValue(res, type === "min")[0]) : res = undefined, res;
709},
710 getRange = function (start, end) {
711 var res = [];
712
713 for (var i = start; i < end; i++) res.push(i);
714
715 return res;
716},
717 emulateEvent = {
718 mouse: function () {
719 var getParams = function () {
720 return {
721 bubbles: !1,
722 cancelable: !1,
723 screenX: 0,
724 screenY: 0,
725 clientX: 0,
726 clientY: 0
727 };
728 };
729
730 try {
731 return new MouseEvent("t"), function (el, eventType) {
732 var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getParams();
733 el.dispatchEvent(new MouseEvent(eventType, params));
734 };
735 } catch (e) {
736 // Polyfills DOM4 MouseEvent
737 return function (el, eventType) {
738 var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getParams(),
739 mouseEvent = browser_doc.createEvent("MouseEvent");
740 mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, win, 0, // the event's mouse click count
741 params.screenX, params.screenY, params.clientX, params.clientY, !1, !1, !1, !1, 0, null), el.dispatchEvent(mouseEvent);
742 };
743 }
744 }(),
745 touch: function touch(el, eventType, params) {
746 var touchObj = new Touch(mergeObj({
747 identifier: Date.now(),
748 target: el,
749 radiusX: 2.5,
750 radiusY: 2.5,
751 rotationAngle: 10,
752 force: .5
753 }, params));
754 el.dispatchEvent(new TouchEvent(eventType, {
755 cancelable: !0,
756 bubbles: !0,
757 shiftKey: !0,
758 touches: [touchObj],
759 targetTouches: [],
760 changedTouches: [touchObj]
761 }));
762 }
763},
764 tplProcess = function (tpl, data) {
765 var res = tpl;
766
767 for (var x in data) res = res.replace(new RegExp("{=".concat(x, "}"), "g"), data[x]);
768
769 return res;
770};
771
772
773// CONCATENATED MODULE: ./src/axis/AxisRendererHelper.js
774
775
776
777
778
779/**
780 * Copyright (c) 2017 ~ present NAVER Corp.
781 * billboard.js project is licensed under the MIT license
782 * @ignore
783 */
784
785
786
787var AxisRendererHelper_AxisRendererHelper = /*#__PURE__*/function () {
788 function AxisRendererHelper(owner) {
789 _classCallCheck(this, AxisRendererHelper);
790
791 var scale = Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleLinear"])(),
792 config = owner.config,
793 params = owner.params;
794 this.owner = owner, this.config = config, this.scale = scale, (config.noTransition || !params.config.transition_duration) && (config.withoutTransition = !0), config.range = scale.rangeExtent ? scale.rangeExtent() : this.scaleExtent((params.orgXScale || scale).range());
795 }
796 /**
797 * Compute a character dimension
798 * @param {d3.selection} node
799 * @return {{w: number, h: number}}
800 * @private
801 */
802
803
804 return _createClass(AxisRendererHelper, [{
805 key: "getTickTransformSetter",
806
807 /**
808 * Get tick transform setter function
809 * @param {String} id Axis id
810 * @private
811 */
812 value: function getTickTransformSetter(id) {
813 var config = this.config,
814 fn = id === "x" ? function (value) {
815 return "translate(".concat(value + config.tickOffset, ",0)");
816 } : function (value) {
817 return "translate(0,".concat(value, ")");
818 };
819 return function (selection, scale) {
820 selection.attr("transform", function (d) {
821 return fn(Math.ceil(scale(d)));
822 });
823 };
824 }
825 }, {
826 key: "scaleExtent",
827 value: function scaleExtent(domain) {
828 var start = domain[0],
829 stop = domain[domain.length - 1];
830 return start < stop ? [start, stop] : [stop, start];
831 }
832 }, {
833 key: "generateTicks",
834 value: function generateTicks(scale, isYAxes) {
835 var tickStepSize = this.owner.params.tickStepSize,
836 ticks = [];
837 // When 'axis[y|y2].tick.stepSize' option is set
838 if (isYAxes && tickStepSize) for (var _scale$domain = scale.domain(), _scale$domain2 = _slicedToArray(_scale$domain, 2), start = _scale$domain2[0], end = _scale$domain2[1], interval = start; interval <= end;) ticks.push(interval), interval += tickStepSize;else if (scale.ticks) ticks = scale.ticks.apply(scale, _toConsumableArray(this.config.tickArguments || [])).map(function (v) {
839 return (// round the tick value if is number
840 isString(v) && isNumber(v) && !isNaN(v) && Math.round(v * 10) / 10 || v
841 );
842 });else {
843 for (var domain = scale.domain(), i = Math.ceil(domain[0]); i < domain[1]; i++) ticks.push(i);
844
845 ticks.length > 0 && ticks[0] > 0 && ticks.unshift(ticks[0] - (ticks[1] - ticks[0]));
846 }
847 return ticks;
848 }
849 }, {
850 key: "copyScale",
851 value: function copyScale() {
852 var newScale = this.scale.copy();
853 return newScale.domain().length || newScale.domain(this.scale.domain()), newScale;
854 }
855 }, {
856 key: "textFormatted",
857 value: function textFormatted(v) {
858 var tickFormat = this.config.tickFormat,
859 value = /\d+\.\d+0{5,}\d$/.test(v) ? +(v + "").replace(/0+\d$/, "") : v,
860 formatted = tickFormat ? tickFormat(value) : value; // to round float numbers from 'binary floating point'
861 // https://en.wikipedia.org/wiki/Double-precision_floating-point_format
862 // https://stackoverflow.com/questions/17849101/laymans-explanation-for-why-javascript-has-weird-floating-math-ieee-754-stand
863
864 return isDefined(formatted) ? formatted : "";
865 }
866 }, {
867 key: "transitionise",
868 value: function transitionise(selection) {
869 var config = this.config;
870 return config.withoutTransition ? selection.interrupt() : selection.transition(config.transition);
871 }
872 }], [{
873 key: "getSizeFor1Char",
874 value: function getSizeFor1Char(node) {
875 // default size for one character
876 var size = {
877 w: 5.5,
878 h: 11.5
879 };
880 return node.empty() || node.select("text").text("0").call(function (el) {
881 try {
882 var _el$node$getBBox = el.node().getBBox(),
883 width = _el$node$getBBox.width,
884 height = _el$node$getBBox.height;
885
886 width && height && (size.w = width, size.h = height);
887 } catch (e) {} finally {
888 el.text("");
889 }
890 }), this.getSizeFor1Char = function () {
891 return size;
892 }, size;
893 }
894 }]), AxisRendererHelper;
895}();
896
897
898// CONCATENATED MODULE: ./src/axis/AxisRenderer.js
899
900
901
902/**
903 * Copyright (c) 2017 ~ present NAVER Corp.
904 * billboard.js project is licensed under the MIT license
905 * @ignore
906 */
907
908
909
910
911var AxisRenderer_AxisRenderer = /*#__PURE__*/function () {
912 function AxisRenderer() {
913 var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
914
915 _classCallCheck(this, AxisRenderer);
916
917 var config = {
918 innerTickSize: 6,
919 outerTickSize: params.outerTick ? 6 : 0,
920 orient: "bottom",
921 range: [],
922 tickArguments: null,
923 tickCentered: null,
924 tickCulling: !0,
925 tickFormat: null,
926 tickLength: 9,
927 tickOffset: 0,
928 tickPadding: 3,
929 tickValues: null,
930 transition: null,
931 noTransition: params.noTransition
932 };
933 config.tickLength = Math.max(config.innerTickSize, 0) + config.tickPadding, this.config = config, this.params = params, this.helper = new AxisRendererHelper_AxisRendererHelper(this);
934 }
935 /**
936 * Create axis element
937 * @param {d3.selection} g
938 * @private
939 */
940
941
942 return _createClass(AxisRenderer, [{
943 key: "create",
944 value: function create(g) {
945 var ctx = this,
946 config = this.config,
947 params = this.params,
948 helperInst = this.helper,
949 scale = helperInst.scale,
950 orient = config.orient,
951 splitTickText = this.splitTickText.bind(this),
952 isLeftRight = /^(left|right)$/.test(orient),
953 isTopBottom = /^(top|bottom)$/.test(orient),
954 tickTransform = helperInst.getTickTransformSetter(isTopBottom ? "x" : "y"),
955 axisPx = tickTransform === helperInst.axisX ? "y" : "x",
956 sign = /^(top|left)$/.test(orient) ? -1 : 1,
957 rotate = params.tickTextRotate;
958 this.config.range = scale.rangeExtent ? scale.rangeExtent() : helperInst.scaleExtent((params.orgXScale || scale).range());
959 var _config = config,
960 innerTickSize = _config.innerTickSize,
961 tickLength = _config.tickLength,
962 range = _config.range,
963 name = params.name,
964 tickTextPos = name && /^(x|y|y2)$/.test(name) ? params.config["axis_".concat(name, "_tick_text_position")] : {
965 x: 0,
966 y: 0
967 },
968 prefix = name === "subX" ? "subchart_axis_x" : "axis_".concat(name),
969 axisShow = params.config["".concat(prefix, "_show")],
970 tickShow = {
971 tick: !!axisShow && params.config["".concat(prefix, "_tick_show")],
972 text: !!axisShow && params.config["".concat(prefix, "_tick_text_show")]
973 },
974 $g = null; // // get the axis' tick position configuration
975
976 g.each(function () {
977 var g = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
978 scale0 = this.__chart__ || scale,
979 scale1 = helperInst.copyScale();
980 $g = g, this.__chart__ = scale1, config.tickOffset = params.isCategory ? Math.ceil((scale1(1) - scale1(0)) / 2) : 0;
981 // update selection - data join
982 var path = g.selectAll(".domain").data([0]); // enter + update selection
983
984 if (path.enter().append("path").attr("class", "domain").merge(helperInst.transitionise(path)).attr("d", function () {
985 var outerTickSized = config.outerTickSize * sign;
986 return isTopBottom ? "M".concat(range[0], ",").concat(outerTickSized, "V0H").concat(range[1], "V").concat(outerTickSized) : "M".concat(outerTickSized, ",").concat(range[0], "H0V").concat(range[1], "H").concat(outerTickSized);
987 }), tickShow.tick || tickShow.text) {
988 // count of tick data in array
989 var ticks = config.tickValues || helperInst.generateTicks(scale1, isLeftRight),
990 tick = g.selectAll(".tick").data(ticks, scale1),
991 tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", "1"),
992 tickExit = tick.exit().remove(); // update selection
993
994 tick = tickEnter.merge(tick), tickShow.tick && tickEnter.append("line"), tickShow.text && tickEnter.append("text");
995 var sizeFor1Char = AxisRendererHelper_AxisRendererHelper.getSizeFor1Char(tick),
996 counts = [],
997 tspan = tick.select("text").selectAll("tspan").data(function (d, index) {
998 var split = params.tickMultiline ? splitTickText(d, scale1, ticks, isLeftRight, sizeFor1Char.w) : isArray(helperInst.textFormatted(d)) ? helperInst.textFormatted(d).concat() : [helperInst.textFormatted(d)];
999 return counts[index] = split.length, split.map(function (splitted) {
1000 return {
1001 index: index,
1002 splitted: splitted
1003 };
1004 });
1005 });
1006 tspan.exit().remove(), tspan = tspan.enter().append("tspan").merge(tspan).text(function (d) {
1007 return d.splitted;
1008 }), tspan.attr("x", isTopBottom ? 0 : tickLength * sign).attr("dx", function () {
1009 var dx = 0;
1010 return /(top|bottom)/.test(orient) && rotate && (dx = 8 * Math.sin(Math.PI * (rotate / 180)) * (orient === "top" ? -1 : 1)), dx + (tickTextPos.x || 0);
1011 }()).attr("dy", function (d, i) {
1012 var dy = 0;
1013 return orient !== "top" && (dy = sizeFor1Char.h, i === 0 && (dy = isLeftRight ? -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - 3) : tickTextPos.y === 0 ? ".71em" : 0)), isNumber(dy) && tickTextPos.y ? dy + tickTextPos.y : dy || ".71em";
1014 });
1015 var lineUpdate = tick.select("line"),
1016 textUpdate = tick.select("text");
1017
1018 // Append <title> for tooltip display
1019 if (tickEnter.select("line").attr("".concat(axisPx, "2"), innerTickSize * sign), tickEnter.select("text").attr(axisPx, tickLength * sign), ctx.setTickLineTextPosition(lineUpdate, textUpdate), params.tickTitle) {
1020 var title = textUpdate.select("title");
1021 (title.empty() ? textUpdate.append("title") : title).text(function (index) {
1022 return params.tickTitle[index];
1023 });
1024 }
1025
1026 if (scale1.bandwidth) {
1027 var x = scale1,
1028 dx = x.bandwidth() / 2;
1029 scale0 = function (d) {
1030 return x(d) + dx;
1031 }, scale1 = scale0;
1032 } else scale0.bandwidth ? scale0 = scale1 : tickTransform(tickExit, scale1);
1033
1034 tickTransform(tickEnter, scale0), tickTransform(helperInst.transitionise(tick).style("opacity", "1"), scale1);
1035 }
1036 }), this.g = $g;
1037 }
1038 /**
1039 * Get tick x/y coordinate
1040 * @return {{x: number, y: number}}
1041 * @private
1042 */
1043
1044 }, {
1045 key: "getTickXY",
1046 value: function getTickXY() {
1047 var config = this.config,
1048 pos = {
1049 x: 0,
1050 y: 0
1051 };
1052 return this.params.isCategory && (pos.x = config.tickCentered ? 0 : config.tickOffset, pos.y = config.tickCentered ? config.tickOffset : 0), pos;
1053 }
1054 /**
1055 * Get tick size
1056 * @param d
1057 * @return {number}
1058 * @private
1059 */
1060
1061 }, {
1062 key: "getTickSize",
1063 value: function getTickSize(d) {
1064 var scale = this.helper.scale,
1065 config = this.config,
1066 innerTickSize = config.innerTickSize,
1067 range = config.range,
1068 tickPosition = scale(d) + (config.tickCentered ? 0 : config.tickOffset);
1069 return range[0] < tickPosition && tickPosition < range[1] ? innerTickSize : 0;
1070 }
1071 /**
1072 * Set tick's line & text position
1073 * @param lineUpdate
1074 * @param textUpdate
1075 * @param scale
1076 * @private
1077 */
1078
1079 }, {
1080 key: "setTickLineTextPosition",
1081 value: function setTickLineTextPosition(lineUpdate, textUpdate) {
1082 var tickPos = this.getTickXY(),
1083 _this$config = this.config,
1084 innerTickSize = _this$config.innerTickSize,
1085 orient = _this$config.orient,
1086 tickLength = _this$config.tickLength,
1087 tickOffset = _this$config.tickOffset,
1088 rotate = this.params.tickTextRotate,
1089 textAnchorForText = function (r) {
1090 var value = ["start", "end"];
1091 return orient === "top" && value.reverse(), r ? r > 0 ? value[0] : value[1] : "middle";
1092 },
1093 textTransform = function (r) {
1094 return r ? "rotate(".concat(r, ")") : null;
1095 },
1096 yForText = function (r) {
1097 var r2 = r / (orient === "bottom" ? 15 : 23);
1098 return r ? 11.5 - 2.5 * r2 * (r > 0 ? 1 : -1) : tickLength;
1099 };
1100
1101 orient === "bottom" ? (lineUpdate.attr("x1", tickPos.x).attr("x2", tickPos.x).attr("y2", this.getTickSize.bind(this)), textUpdate.attr("x", 0).attr("y", yForText(rotate)).style("text-anchor", textAnchorForText(rotate)).attr("transform", textTransform(rotate))) : orient === "top" ? (lineUpdate.attr("x2", 0).attr("y2", -innerTickSize), textUpdate.attr("x", 0).attr("y", -yForText(rotate) * 2).style("text-anchor", textAnchorForText(rotate)).attr("transform", textTransform(rotate))) : orient === "left" ? (lineUpdate.attr("x2", -innerTickSize).attr("y1", tickPos.y).attr("y2", tickPos.y), textUpdate.attr("x", -tickLength).attr("y", tickOffset).style("text-anchor", "end")) : orient === "right" ? (lineUpdate.attr("x2", innerTickSize).attr("y2", 0), textUpdate.attr("x", tickLength).attr("y", 0).style("text-anchor", "start")) : void 0;
1102 } // this should be called only when category axis
1103
1104 }, {
1105 key: "splitTickText",
1106 value: function splitTickText(d, scale, ticks, isLeftRight, charWidth) {
1107 function split(splitted, text) {
1108 for (var subtext, spaceIndex, textWidth, i = 1; i < text.length; i++) // if text width gets over tick width, split by space index or current index
1109 if (text.charAt(i) === " " && (spaceIndex = i), subtext = text.substr(0, i + 1), textWidth = charWidth * subtext.length, tickWidth < textWidth) return split(splitted.concat(text.substr(0, spaceIndex || i)), text.slice(spaceIndex ? spaceIndex + 1 : i));
1110
1111 return splitted.concat(text);
1112 }
1113
1114 var params = this.params,
1115 tickText = this.helper.textFormatted(d),
1116 splitted = isString(tickText) && tickText.indexOf("\n") > -1 ? tickText.split("\n") : [];
1117 if (splitted.length) return splitted;
1118 if (isArray(tickText)) return tickText;
1119 var tickWidth = params.tickWidth;
1120 return (!tickWidth || tickWidth <= 0) && (tickWidth = isLeftRight ? 95 : params.isCategory ? Math.ceil(scale(ticks[1]) - scale(ticks[0])) - 12 : 110), split(splitted, tickText + "");
1121 }
1122 }, {
1123 key: "scale",
1124 value: function scale(x) {
1125 return arguments.length ? (this.helper.scale = x, this) : this.helper.scale;
1126 }
1127 }, {
1128 key: "orient",
1129 value: function orient(x) {
1130 return arguments.length ? (this.config.orient = x in {
1131 top: 1,
1132 right: 1,
1133 bottom: 1,
1134 left: 1
1135 } ? x + "" : "bottom", this) : this.config.orient;
1136 }
1137 }, {
1138 key: "tickFormat",
1139 value: function tickFormat(format) {
1140 return arguments.length ? (this.config.tickFormat = format, this) : this.config.tickFormat;
1141 }
1142 }, {
1143 key: "tickCentered",
1144 value: function tickCentered(isCentered) {
1145 var config = this.config;
1146 return arguments.length ? (config.tickCentered = isCentered, this) : config.tickCentered;
1147 }
1148 /**
1149 * Return tick's offset value.
1150 * The value will be set for 'category' axis type.
1151 * @return {number}
1152 * @private
1153 */
1154
1155 }, {
1156 key: "tickOffset",
1157 value: function tickOffset() {
1158 return this.config.tickOffset;
1159 }
1160 /**
1161 * Get tick interval count
1162 * @private
1163 * @param {Number} size Total data size
1164 * @return {number}
1165 */
1166
1167 }, {
1168 key: "tickInterval",
1169 value: function tickInterval(size) {
1170 var interval;
1171 if (this.params.isCategory) interval = this.config.tickOffset * 2;else {
1172 var length = this.g.select("path.domain").node().getTotalLength() - this.config.outerTickSize * 2;
1173 interval = length / (size || this.g.selectAll("line").size());
1174 }
1175 return interval === Infinity ? 0 : interval;
1176 }
1177 }, {
1178 key: "ticks",
1179 value: function ticks() {
1180 for (var config = this.config, _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
1181
1182 return args.length ? (config.tickArguments = toArray(args), this) : config.tickArguments;
1183 }
1184 }, {
1185 key: "tickCulling",
1186 value: function tickCulling(culling) {
1187 var config = this.config;
1188 return arguments.length ? (config.tickCulling = culling, this) : config.tickCulling;
1189 }
1190 }, {
1191 key: "tickValues",
1192 value: function tickValues(x) {
1193 var _this = this,
1194 config = this.config;
1195
1196 if (isFunction(x)) config.tickValues = function () {
1197 return x(_this.helper.scale.domain());
1198 };else {
1199 if (!arguments.length) return config.tickValues;
1200 config.tickValues = x;
1201 }
1202 return this;
1203 }
1204 }, {
1205 key: "setTransition",
1206 value: function setTransition(t) {
1207 return this.config.transition = t, this;
1208 }
1209 }]), AxisRenderer;
1210}();
1211
1212
1213// CONCATENATED MODULE: ./src/axis/Axis.js
1214
1215
1216
1217
1218/**
1219 * Copyright (c) 2017 ~ present NAVER Corp.
1220 * billboard.js project is licensed under the MIT license
1221 */
1222
1223
1224
1225
1226
1227
1228var isHorizontal = function ($$, forHorizontal) {
1229 var isRotated = $$.config.axis_rotated;
1230 return forHorizontal ? isRotated : !isRotated;
1231},
1232 getAxisClassName = function (id) {
1233 return "".concat(config_classes.axis, " ").concat(config_classes["axis".concat(capitalize(id))]);
1234};
1235
1236var Axis_Axis = /*#__PURE__*/function () {
1237 function Axis(owner) {
1238 _classCallCheck(this, Axis), this.owner = owner, this.setOrient();
1239 }
1240
1241 return _createClass(Axis, [{
1242 key: "init",
1243 value: function init() {
1244 var _this = this,
1245 $$ = this.owner,
1246 config = $$.config,
1247 isRotated = config.axis_rotated,
1248 main = $$.main,
1249 target = ["x", "y"];
1250
1251 config.axis_y2_show && target.push("y2"), $$.axesList = {}, target.forEach(function (v) {
1252 var classAxis = getAxisClassName(v),
1253 classLabel = config_classes["axis".concat(v.toUpperCase(), "Label")];
1254 $$.axes[v] = main.append("g").attr("class", classAxis).attr("clip-path", function () {
1255 var res = null;
1256 return v === "x" ? res = $$.clipPathForXAxis : v === "y" && config.axis_y_inner && (res = $$.clipPathForYAxis), res;
1257 }).attr("transform", $$.getTranslate(v)).style("visibility", config["axis_".concat(v, "_show")] ? "visible" : "hidden"), $$.axes[v].append("text").attr("class", classLabel).attr("transform", ["rotate(-90)", null][v === "x" ? +!isRotated : +isRotated]).style("text-anchor", function () {
1258 return _this.textAnchorForAxisLabel(v);
1259 }), _this.generateAxes(v);
1260 });
1261 }
1262 /**
1263 * Set axis orient according option value
1264 * @private
1265 */
1266
1267 }, {
1268 key: "setOrient",
1269 value: function setOrient() {
1270 var $$ = this.owner,
1271 config = $$.config,
1272 isRotated = config.axis_rotated,
1273 yInner = config.axis_y_inner,
1274 y2Inner = config.axis_y2_inner;
1275 $$.xOrient = isRotated ? "left" : "bottom", $$.yOrient = isRotated ? yInner ? "top" : "bottom" : yInner ? "right" : "left", $$.y2Orient = isRotated ? y2Inner ? "bottom" : "top" : y2Inner ? "left" : "right", $$.subXOrient = isRotated ? "left" : "bottom";
1276 }
1277 /**
1278 * Generate axes
1279 * It's used when axis' axes option is set
1280 * @param {String} id Axis id
1281 * @private
1282 */
1283
1284 }, {
1285 key: "generateAxes",
1286 value: function generateAxes(id) {
1287 var d3Axis,
1288 $$ = this.owner,
1289 config = $$.config,
1290 axes = [],
1291 axesConfig = config["axis_".concat(id, "_axes")],
1292 isRotated = config.axis_rotated;
1293 id === "x" ? d3Axis = isRotated ? external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisLeft"] : external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisBottom"] : id === "y" ? d3Axis = isRotated ? external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisBottom"] : external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisLeft"] : id === "y2" && (d3Axis = isRotated ? external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisTop"] : external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisRight"]), axesConfig.length && axesConfig.forEach(function (v) {
1294 var tick = v.tick || {},
1295 scale = $$[id].copy();
1296 v.domain && scale.domain(v.domain), axes.push(d3Axis(scale).ticks(tick.count).tickFormat(tick.format || function (x) {
1297 return x;
1298 }).tickValues(tick.values).tickSizeOuter(tick.outer === !1 ? 0 : 6));
1299 }), $$.axesList[id] = axes;
1300 }
1301 /**
1302 * Update axes nodes
1303 * @private
1304 */
1305
1306 }, {
1307 key: "updateAxes",
1308 value: function updateAxes() {
1309 var $$ = this.owner,
1310 config = $$.config;
1311 Object.keys($$.axesList).forEach(function (id) {
1312 var axesConfig = config["axis_".concat(id, "_axes")],
1313 scale = $$[id].copy(),
1314 range = scale.range();
1315 $$.axesList[id].forEach(function (v, i) {
1316 var axisRange = v.scale().range(); // adjust range value with the current
1317 // https://github.com/naver/billboard.js/issues/859
1318
1319 range.every(function (v, i) {
1320 return v === axisRange[i];
1321 }) || v.scale().range(range);
1322 var className = "".concat(getAxisClassName(id), "-").concat(i + 1),
1323 g = $$.main.select(".".concat(className.replace(/\s/, ".")));
1324 g.empty() ? g = $$.main.append("g").attr("class", className).style("visibility", config["axis_".concat(id, "_show")] ? "visible" : "hidden").call(v) : (axesConfig[i].domain && scale.domain(axesConfig[i].domain), $$.xAxis.helper.transitionise(g).call(v.scale(scale))), g.attr("transform", $$.getTranslate(id, i + 1));
1325 });
1326 });
1327 } // called from : updateScales() & getMaxTickWidth()
1328
1329 }, {
1330 key: "getAxis",
1331 value: function getAxis(name, scale, outerTick, noTransition, noTickTextRotate) {
1332 var $$ = this.owner,
1333 config = $$.config,
1334 isX = /^(x|subX)$/.test(name),
1335 type = isX ? "x" : name,
1336 isCategory = isX && $$.isCategorized(),
1337 orient = $$["".concat(name, "Orient")],
1338 tickFormat = isX ? $$.xAxisTickFormat : config["axis_".concat(name, "_tick_format")],
1339 tickTextRotate = noTickTextRotate ? 0 : $$.getAxisTickRotate(type),
1340 tickValues = isX ? $$.xAxisTickValues : $$["".concat(name, "AxisTickValues")],
1341 axisParams = mergeObj({
1342 outerTick: outerTick,
1343 noTransition: noTransition,
1344 config: config,
1345 name: name,
1346 tickTextRotate: tickTextRotate
1347 }, isX && {
1348 isCategory: isCategory,
1349 tickMultiline: config.axis_x_tick_multiline,
1350 tickWidth: config.axis_x_tick_width,
1351 tickTitle: isCategory && config.axis_x_tick_tooltip && $$.api.categories(),
1352 orgXScale: $$.x
1353 });
1354 isX || (axisParams.tickStepSize = config["axis_".concat(type, "_tick_stepSize")]);
1355 var axis = new AxisRenderer_AxisRenderer(axisParams).scale(isX && $$.zoomScale || scale).orient(orient);
1356 isX && $$.isTimeSeries() && tickValues && !isFunction(tickValues) ? tickValues = tickValues.map(function (v) {
1357 return $$.parseDate(v);
1358 }) : !isX && $$.isTimeSeriesY() && (axis.ticks(config.axis_y_tick_time_value), tickValues = null), tickValues && axis.tickValues(tickValues), axis.tickFormat(tickFormat || !isX && $$.isStackNormalized() && function (x) {
1359 return "".concat(x, "%");
1360 }), isCategory && (axis.tickCentered(config.axis_x_tick_centered), isEmpty(config.axis_x_tick_culling) && (config.axis_x_tick_culling = !1));
1361 var tickCount = config["axis_".concat(type, "_tick_count")];
1362 return tickCount && axis.ticks(tickCount), axis;
1363 }
1364 }, {
1365 key: "updateXAxisTickValues",
1366 value: function updateXAxisTickValues(targets, axis) {
1367 var values,
1368 $$ = this.owner,
1369 config = $$.config,
1370 fit = config.axis_x_tick_fit,
1371 count = config.axis_x_tick_count;
1372 return (fit || count && fit) && (values = this.generateTickValues($$.mapTargetsToUniqueXs(targets), count, $$.isTimeSeries())), axis ? axis.tickValues(values) : $$.xAxis && ($$.xAxis.tickValues(values), $$.subXAxis.tickValues(values)), values;
1373 }
1374 }, {
1375 key: "getId",
1376 value: function getId(id) {
1377 var config = this.owner.config;
1378 return id in config.data_axes ? config.data_axes[id] : "y";
1379 }
1380 }, {
1381 key: "getXAxisTickFormat",
1382 value: function getXAxisTickFormat() {
1383 var format,
1384 $$ = this.owner,
1385 config = $$.config,
1386 tickFormat = config.axis_x_tick_format,
1387 isTimeSeries = $$.isTimeSeries(),
1388 isCategorized = $$.isCategorized();
1389 return tickFormat ? isFunction(tickFormat) ? format = tickFormat : isTimeSeries && (format = function (date) {
1390 return date ? $$.axisTimeFormat(tickFormat)(date) : "";
1391 }) : format = isTimeSeries ? $$.defaultAxisTimeFormat : isCategorized ? $$.categoryName : function (v) {
1392 return v < 0 ? v.toFixed(0) : v;
1393 }, isFunction(format) ? function (v) {
1394 return format.apply($$, isCategorized ? [v, $$.categoryName(v)] : [v]);
1395 } : format;
1396 }
1397 }, {
1398 key: "getTickValues",
1399 value: function getTickValues(id) {
1400 var $$ = this.owner,
1401 tickValues = $$.config["axis_".concat(id, "_tick_values")],
1402 axis = $$["".concat(id, "Axis")];
1403 return (isFunction(tickValues) ? tickValues() : tickValues) || (axis ? axis.tickValues() : undefined);
1404 }
1405 }, {
1406 key: "getLabelOptionByAxisId",
1407 value: function getLabelOptionByAxisId(id) {
1408 return this.owner.config["axis_".concat(id, "_label")];
1409 }
1410 }, {
1411 key: "getLabelText",
1412 value: function getLabelText(id) {
1413 var option = this.getLabelOptionByAxisId(id);
1414 return isString(option) ? option : option ? option.text : null;
1415 }
1416 }, {
1417 key: "setLabelText",
1418 value: function setLabelText(id, text) {
1419 var $$ = this.owner,
1420 config = $$.config,
1421 option = this.getLabelOptionByAxisId(id);
1422 isString(option) ? config["axis_".concat(id, "_label")] = text : option && (option.text = text);
1423 }
1424 }, {
1425 key: "getLabelPosition",
1426 value: function getLabelPosition(id, defaultPosition) {
1427 var isRotated = this.owner.config.axis_rotated,
1428 option = this.getLabelOptionByAxisId(id),
1429 position = isObjectType(option) && option.position ? option.position : defaultPosition[+!isRotated],
1430 has = function (v) {
1431 return !!~position.indexOf(v);
1432 };
1433
1434 return {
1435 isInner: has("inner"),
1436 isOuter: has("outer"),
1437 isLeft: has("left"),
1438 isCenter: has("center"),
1439 isRight: has("right"),
1440 isTop: has("top"),
1441 isMiddle: has("middle"),
1442 isBottom: has("bottom")
1443 };
1444 }
1445 }, {
1446 key: "getAxisLabelPosition",
1447 value: function getAxisLabelPosition(id) {
1448 return this.getLabelPosition(id, id === "x" ? ["inner-top", "inner-right"] : ["inner-right", "inner-top"]);
1449 }
1450 }, {
1451 key: "getLabelPositionById",
1452 value: function getLabelPositionById(id) {
1453 return this.getAxisLabelPosition(id);
1454 }
1455 }, {
1456 key: "xForAxisLabel",
1457 value: function xForAxisLabel(id) {
1458 var $$ = this.owner,
1459 position = this.getAxisLabelPosition(id),
1460 x = position.isMiddle ? -$$.height / 2 : 0;
1461 return isHorizontal($$, id !== "x") ? x = position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width : position.isBottom && (x = -$$.height), x;
1462 }
1463 }, {
1464 key: "dxForAxisLabel",
1465 value: function dxForAxisLabel(id) {
1466 var $$ = this.owner,
1467 position = this.getAxisLabelPosition(id),
1468 dx = position.isBottom ? "0.5em" : "0";
1469 return isHorizontal($$, id !== "x") ? dx = position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0" : position.isTop && (dx = "-0.5em"), dx;
1470 }
1471 }, {
1472 key: "textAnchorForAxisLabel",
1473 value: function textAnchorForAxisLabel(id) {
1474 var $$ = this.owner,
1475 position = this.getAxisLabelPosition(id),
1476 anchor = position.isMiddle ? "middle" : "end";
1477 return isHorizontal($$, id !== "x") ? anchor = position.isLeft ? "start" : position.isCenter ? "middle" : "end" : position.isBottom && (anchor = "start"), anchor;
1478 }
1479 }, {
1480 key: "dyForAxisLabel",
1481 value: function dyForAxisLabel(id) {
1482 var dy,
1483 $$ = this.owner,
1484 config = $$.config,
1485 isRotated = config.axis_rotated,
1486 isInner = this.getAxisLabelPosition(id).isInner,
1487 tickRotate = config["axis_".concat(id, "_tick_rotate")] ? $$.getHorizontalAxisHeight(id) : 0,
1488 maxTickWidth = this.getMaxTickWidth(id);
1489
1490 if (id === "x") {
1491 var xHeight = config.axis_x_height;
1492 dy = isRotated ? isInner ? "1.2em" : -25 - maxTickWidth : isInner ? "-0.5em" : xHeight ? xHeight - 10 : tickRotate ? tickRotate - 10 : "3em";
1493 } else dy = {
1494 y: ["-0.5em", 10, "3em", "1.2em", 10],
1495 y2: ["1.2em", -20, "-2.2em", "-0.5em", 15]
1496 }[id], dy = isRotated ? isInner ? dy[0] : tickRotate ? tickRotate * (id === "y2" ? -1 : 1) - dy[1] : dy[2] : isInner ? dy[3] : (dy[4] + (config["axis_".concat(id, "_inner")] ? 0 : maxTickWidth + dy[4])) * (id === "y" ? -1 : 1);
1497
1498 return dy;
1499 }
1500 }, {
1501 key: "getMaxTickWidth",
1502 value: function getMaxTickWidth(id, withoutRecompute) {
1503 var $$ = this.owner,
1504 config = $$.config,
1505 currentTickMax = $$.currentMaxTickWidths[id],
1506 maxWidth = 0;
1507 if (withoutRecompute || !config["axis_".concat(id, "_show")] || $$.filterTargetsToShow().length === 0) return currentTickMax.size;
1508
1509 if ($$.svg) {
1510 var isYAxis = /^y2?$/.test(id),
1511 targetsToShow = $$.filterTargetsToShow($$.data.targets),
1512 scale = $$[id].copy().domain($$["get".concat(isYAxis ? "Y" : "X", "Domain")](targetsToShow, id)),
1513 domain = scale.domain();
1514 // do not compute if domain is same
1515 if (domain[0] === domain[1] || isArray(currentTickMax.domain) && currentTickMax.domain[0] === currentTickMax.domain[1]) return currentTickMax.size;
1516 currentTickMax.domain = domain;
1517 var axis = this.getAxis(id, scale, !1, !1, !0),
1518 tickCount = config["axis_".concat(id, "_tick_count")],
1519 tickValues = config["axis_".concat(id, "_tick_values")];
1520 !tickValues && tickCount && axis.tickValues(this.generateTickValues(domain, tickCount, isYAxis ? $$.isTimeSeriesY() : $$.isTimeSeries())), isYAxis || this.updateXAxisTickValues(targetsToShow, axis);
1521 var dummy = $$.selectChart.append("svg").style("visibility", "hidden").style("position", "fixed").style("top", "0px").style("left", "0px");
1522 axis.create(dummy), dummy.selectAll("text").each(function (d, i) {
1523 var currentTextWidth = this.getBoundingClientRect().width;
1524 maxWidth = Math.max(maxWidth, currentTextWidth), id === "x" && ($$.currentMaxTickWidths.x.ticks[i] = currentTextWidth);
1525 }), dummy.remove();
1526 }
1527
1528 return maxWidth > 0 && (currentTickMax.size = maxWidth), currentTickMax.size;
1529 }
1530 }, {
1531 key: "getXAxisTickTextY2Overflow",
1532 value: function getXAxisTickTextY2Overflow(defaultPadding) {
1533 var $$ = this.owner,
1534 config = $$.config,
1535 xAxisTickRotate = $$.getAxisTickRotate("x");
1536
1537 if (($$.isCategorized() || $$.isTimeSeries()) && config.axis_x_tick_fit && !config.axis_x_tick_culling && !config.axis_x_tick_multiline && xAxisTickRotate > 0 && xAxisTickRotate < 90) {
1538 var widthWithoutCurrentPaddingLeft = $$.currentWidth - $$.getCurrentPaddingLeft(),
1539 maxOverflow = this.getXAxisTickMaxOverflow(xAxisTickRotate, widthWithoutCurrentPaddingLeft - defaultPadding),
1540 xAxisTickTextY2Overflow = Math.max(0, maxOverflow) + defaultPadding;
1541 // for display inconsistencies between browsers
1542 return Math.min(xAxisTickTextY2Overflow, widthWithoutCurrentPaddingLeft / 2);
1543 }
1544
1545 return 0;
1546 }
1547 }, {
1548 key: "getXAxisTickMaxOverflow",
1549 value: function getXAxisTickMaxOverflow(xAxisTickRotate, widthWithoutCurrentPaddingLeft) {
1550 for (var $$ = this.owner, config = $$.config, isTimeSeries = $$.isTimeSeries(), tickTextWidths = $$.currentMaxTickWidths.x.ticks, tickCount = tickTextWidths.length, _this$x$padding = this.x.padding, left = _this$x$padding.left, right = _this$x$padding.right, maxOverflow = 0, remaining = tickCount - (isTimeSeries && config.axis_x_tick_fit ? .5 : 0), i = 0; i < tickCount; i++) {
1551 var tickIndex = i + 1,
1552 rotatedTickTextWidth = Math.cos(Math.PI * xAxisTickRotate / 180) * tickTextWidths[i],
1553 ticksBeforeTickText = tickIndex - (isTimeSeries ? 1 : .5) + left;
1554
1555 // Skip ticks if there are no ticks before them
1556 if (!(ticksBeforeTickText <= 0)) {
1557 var tickLength = (widthWithoutCurrentPaddingLeft - rotatedTickTextWidth) / ticksBeforeTickText;
1558 maxOverflow = Math.max(maxOverflow, rotatedTickTextWidth - tickLength / 2 - ((remaining - tickIndex) * tickLength + right * tickLength));
1559 }
1560 }
1561
1562 var tickOffset = 0;
1563
1564 if (!isTimeSeries) {
1565 var scale = Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleLinear"])().domain([left * -1, $$.getXDomainMax($$.data.targets) + 1 + right]).range([0, widthWithoutCurrentPaddingLeft - maxOverflow]);
1566 tickOffset = Math.ceil((scale(1) - scale(0)) / 2);
1567 }
1568
1569 return maxOverflow + tickOffset;
1570 }
1571 /**
1572 * Get x Axis padding
1573 * @param {Number} tickCount Tick count
1574 * @return {Object} Padding object values with 'left' & 'right' key
1575 * @private
1576 */
1577
1578 }, {
1579 key: "getXAxisPadding",
1580 value: function getXAxisPadding(tickCount) {
1581 var $$ = this.owner,
1582 padding = $$.config.axis_x_padding;
1583
1584 if (isEmpty(padding) ? padding = {
1585 left: 0,
1586 right: 0
1587 } : (padding.left = padding.left || 0, padding.right = padding.right || 0), $$.isTimeSeries()) {
1588 var firstX = +$$.getXDomainMin($$.data.targets),
1589 lastX = +$$.getXDomainMax($$.data.targets),
1590 timeDiff = lastX - firstX,
1591 range = timeDiff + padding.left + padding.right,
1592 relativeTickWidth = timeDiff / tickCount / range,
1593 left = padding.left / range / relativeTickWidth || 0,
1594 _right = padding.right / range / relativeTickWidth || 0;
1595
1596 padding = {
1597 left: left,
1598 right: _right
1599 };
1600 }
1601
1602 return padding;
1603 }
1604 }, {
1605 key: "updateLabels",
1606 value: function updateLabels(withTransition) {
1607 var _this2 = this,
1608 $$ = this.owner,
1609 labels = {
1610 x: $$.main.select(".".concat(config_classes.axisX, " .").concat(config_classes.axisXLabel)),
1611 y: $$.main.select(".".concat(config_classes.axisY, " .").concat(config_classes.axisYLabel)),
1612 y2: $$.main.select(".".concat(config_classes.axisY2, " .").concat(config_classes.axisY2Label))
1613 };
1614
1615 Object.keys(labels).filter(function (id) {
1616 return !labels[id].empty();
1617 }).forEach(function (v) {
1618 var node = labels[v];
1619 (withTransition ? node.transition() : node).attr("x", function () {
1620 return _this2.xForAxisLabel(v);
1621 }).attr("dx", function () {
1622 return _this2.dxForAxisLabel(v);
1623 }).attr("dy", function () {
1624 return _this2.dyForAxisLabel(v);
1625 }).text(function () {
1626 return _this2.getLabelText(v);
1627 });
1628 });
1629 }
1630 }, {
1631 key: "getPadding",
1632 value: function getPadding(padding, key, defaultValue, domainLength) {
1633 var p = isNumber(padding) ? padding : padding[key];
1634 return isValue(p) ? this.convertPixelsToAxisPadding(p, domainLength) : defaultValue;
1635 }
1636 }, {
1637 key: "convertPixelsToAxisPadding",
1638 value: function convertPixelsToAxisPadding(pixels, domainLength) {
1639 var $$ = this.owner,
1640 length = $$.config.axis_rotated ? $$.width : $$.height;
1641 return domainLength * (pixels / length);
1642 }
1643 }, {
1644 key: "generateTickValues",
1645 value: function generateTickValues(values, tickCount, forTimeSeries) {
1646 var start,
1647 end,
1648 count,
1649 interval,
1650 i,
1651 tickValue,
1652 tickValues = values;
1653
1654 if (tickCount) {
1655 var targetCount = isFunction(tickCount) ? tickCount() : tickCount; // compute ticks according to tickCount
1656
1657 if (targetCount === 1) tickValues = [values[0]];else if (targetCount === 2) tickValues = [values[0], values[values.length - 1]];else if (targetCount > 2) {
1658 var isCategorized = this.owner.isCategorized();
1659
1660 for (count = targetCount - 2, start = values[0], end = values[values.length - 1], interval = (end - start) / (count + 1), tickValues = [start], i = 0; i < count; i++) tickValue = +start + interval * (i + 1), tickValues.push(forTimeSeries ? new Date(tickValue) : isCategorized ? Math.round(tickValue) : tickValue);
1661
1662 tickValues.push(end);
1663 }
1664 }
1665
1666 return forTimeSeries || (tickValues = tickValues.sort(function (a, b) {
1667 return a - b;
1668 })), tickValues;
1669 }
1670 }, {
1671 key: "generateTransitions",
1672 value: function generateTransitions(duration) {
1673 var $$ = this.owner,
1674 axes = $$.axes,
1675 _map = ["x", "y", "y2", "subx"].map(function (v) {
1676 var axis = axes[v];
1677 return axis && duration && (axis = axis.transition().duration(duration)), axis;
1678 }),
1679 _map2 = _slicedToArray(_map, 4),
1680 axisX = _map2[0],
1681 axisY = _map2[1],
1682 axisY2 = _map2[2],
1683 axisSubX = _map2[3];
1684
1685 return {
1686 axisX: axisX,
1687 axisY: axisY,
1688 axisY2: axisY2,
1689 axisSubX: axisSubX
1690 };
1691 }
1692 }, {
1693 key: "redraw",
1694 value: function redraw(transitions, isHidden, isInit) {
1695 var $$ = this.owner,
1696 opacity = isHidden ? "0" : "1";
1697 ["x", "y", "y2", "subX"].forEach(function (id) {
1698 var axis = $$["".concat(id, "Axis")];
1699 axis && (!isInit && (axis.config.withoutTransition = !$$.config.transition_duration), $$.axes[id.toLowerCase()].style("opacity", opacity), axis.create(transitions["axis".concat(capitalize(id))]));
1700 }), this.updateAxes();
1701 }
1702 /**
1703 * Redraw axis
1704 * @param {Object} targetsToShow targets data to be shown
1705 * @param {Object} wth
1706 * @param {Ojbect} transitions
1707 * @param {Object} flow
1708 * @private
1709 */
1710
1711 }, {
1712 key: "redrawAxis",
1713 value: function redrawAxis(targetsToShow, wth, transitions, flow, isInit) {
1714 var xDomainForZoom,
1715 _this3 = this,
1716 $$ = this.owner,
1717 config = $$.config,
1718 hasZoom = !!$$.zoomScale;
1719
1720 !hasZoom && $$.isCategorized() && targetsToShow.length === 0 && $$.x.domain([0, $$.axes.x.selectAll(".tick").size()]), $$.x && targetsToShow.length ? (!hasZoom && $$.updateXDomain(targetsToShow, wth.UpdateXDomain, wth.UpdateOrgXDomain, wth.TrimXDomain), !config.axis_x_tick_values && this.updateXAxisTickValues(targetsToShow)) : $$.xAxis && ($$.xAxis.tickValues([]), $$.subXAxis.tickValues([])), config.zoom_rescale && !flow && (xDomainForZoom = $$.x.orgDomain()), ["y", "y2"].forEach(function (key) {
1721 var axis = $$[key];
1722
1723 if (axis) {
1724 var tickValues = config["axis_".concat(key, "_tick_values")],
1725 tickCount = config["axis_".concat(key, "_tick_count")];
1726
1727 if (axis.domain($$.getYDomain(targetsToShow, key, xDomainForZoom)), !tickValues && tickCount) {
1728 var domain = axis.domain();
1729 $$["".concat(key, "Axis")].tickValues(_this3.generateTickValues(domain, domain.every(function (v) {
1730 return v === 0;
1731 }) ? 1 : tickCount, $$.isTimeSeriesY()));
1732 }
1733 }
1734 }), this.redraw(transitions, $$.hasArcType(), isInit), this.updateLabels(wth.Transition), (wth.UpdateXDomain || wth.UpdateXAxis || wth.Y) && targetsToShow.length && this.setCulling(), wth.Y && ($$.subY && $$.subY.domain($$.getYDomain(targetsToShow, "y")), $$.subY2 && $$.subY2.domain($$.getYDomain(targetsToShow, "y2")));
1735 }
1736 /**
1737 * Set manual culling
1738 * @private
1739 */
1740
1741 }, {
1742 key: "setCulling",
1743 value: function setCulling() {
1744 var $$ = this.owner,
1745 config = $$.config;
1746 ["subx", "x", "y", "y2"].forEach(function (type) {
1747 var axis = $$.axes[type],
1748 id = type === "subx" ? "x" : type,
1749 toCull = config["axis_".concat(id, "_tick_culling")]; // subchart x axis should be aligned with x axis culling
1750
1751 if (axis && toCull) {
1752 var intervalForCulling,
1753 tickText = axis.selectAll(".tick text"),
1754 tickValues = sortValue(tickText.data()),
1755 tickSize = tickValues.length,
1756 cullingMax = config["axis_".concat(id, "_tick_culling_max")];
1757
1758 if (tickSize) {
1759 for (var _i = 1; _i < tickSize; _i++) if (tickSize / _i < cullingMax) {
1760 intervalForCulling = _i;
1761 break;
1762 }
1763
1764 tickText.each(function (d) {
1765 this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : "block";
1766 });
1767 } else tickText.style("display", "block"); // set/unset x_axis_tick_clippath
1768
1769
1770 if (type === "x") {
1771 var clipPath = $$.clipXAxisTickMaxWidth ? $$.clipPathForXAxisTickTexts : null;
1772 $$.svg.selectAll(".".concat(config_classes.axisX, " .tick text")).attr("clip-path", clipPath);
1773 }
1774 }
1775 });
1776 }
1777 }]), Axis;
1778}();
1779
1780
1781// CONCATENATED MODULE: ./src/internals/ChartInternal.js
1782
1783
1784
1785
1786/**
1787 * Copyright (c) 2017 ~ present NAVER Corp.
1788 * billboard.js project is licensed under the MIT license
1789 * @ignore
1790 */
1791
1792
1793
1794
1795
1796
1797
1798/**
1799 * Internal chart class.
1800 * - Note: Instantiated internally, not exposed for public.
1801 * @class ChartInternal
1802 * @ignore
1803 * @private
1804 */
1805
1806var ChartInternal_ChartInternal = /*#__PURE__*/function () {
1807 function ChartInternal(api) {
1808 _classCallCheck(this, ChartInternal);
1809
1810 var $$ = this;
1811 $$.api = api, $$.config = $$.getOptions(), $$.data = {}, $$.cache = {}, $$.axes = {}, $$.rendered = !1;
1812 }
1813
1814 return _createClass(ChartInternal, [{
1815 key: "beforeInit",
1816 value: function beforeInit() {
1817 var $$ = this;
1818 $$.callPluginHook("$beforeInit"), callFn($$.config.onbeforeinit, $$, $$.api);
1819 }
1820 }, {
1821 key: "afterInit",
1822 value: function afterInit() {
1823 var $$ = this;
1824 $$.callPluginHook("$afterInit"), callFn($$.config.onafterinit, $$, $$.api);
1825 }
1826 }, {
1827 key: "init",
1828 value: function init() {
1829 var $$ = this,
1830 config = $$.config;
1831 $$.initParams();
1832 var bindto = {
1833 element: config.bindto,
1834 classname: "bb"
1835 };
1836 isObject(config.bindto) && (bindto.element = config.bindto.element || "#chart", bindto.classname = config.bindto.classname || bindto.classname), $$.selectChart = isFunction(bindto.element.node) ? config.bindto.element : Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(bindto.element || []), $$.selectChart.empty() && ($$.selectChart = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(browser_doc.body.appendChild(browser_doc.createElement("div")))), $$.selectChart.html("").classed(bindto.classname, !0), $$.initToRender();
1837 }
1838 /**
1839 * Initialize the rendering process
1840 * @param {Boolean} forced Force to render process
1841 * @private
1842 */
1843
1844 }, {
1845 key: "initToRender",
1846 value: function initToRender(forced) {
1847 var $$ = this,
1848 config = $$.config,
1849 target = $$.selectChart,
1850 isHidden = function () {
1851 return target.style("display") === "none" || target.style("visibility") === "hidden";
1852 },
1853 isLazy = config.render.lazy || isHidden(),
1854 MutationObserver = win.MutationObserver;
1855
1856 if (isLazy && MutationObserver && config.render.observe !== !1 && !forced && new MutationObserver(function (mutation, observer) {
1857 isHidden() || (observer.disconnect(), !$$.rendered && $$.initToRender(!0));
1858 }).observe(target.node(), {
1859 attributes: !0,
1860 attributeFilter: ["class", "style"]
1861 }), !isLazy || forced) {
1862 var convertedData = $$.convertData(config, $$.initWithData);
1863 convertedData && $$.initWithData(convertedData), $$.afterInit();
1864 }
1865 }
1866 }, {
1867 key: "initParams",
1868 value: function initParams() {
1869 var _this = this,
1870 $$ = this,
1871 config = $$.config,
1872 isRotated = config.axis_rotated;
1873
1874 $$.datetimeId = "bb-".concat(+new Date()), $$.initClip(), $$.dragStart = null, $$.dragging = !1, $$.flowing = !1, $$.cancelClick = !1, $$.mouseover = !1, $$.transiting = !1, $$.color = $$.generateColor(), $$.levelColor = $$.generateLevelColor(), $$.point = $$.generatePoint(), $$.extraLineClasses = $$.generateExtraLineClass(), $$.dataTimeFormat = config.data_xLocaltime ? external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_["timeParse"] : external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_["utcParse"], $$.axisTimeFormat = config.axis_x_localtime ? external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_["timeFormat"] : external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_["utcFormat"];
1875 var isDragZoom = $$.config.zoom_enabled && $$.config.zoom_enabled.type === "drag";
1876 $$.defaultAxisTimeFormat = function (d) {
1877 var isZoomed = isDragZoom ? _this.zoomScale : _this.zoomScale && $$.x.orgDomain().toString() !== _this.zoomScale.domain().toString(),
1878 specifier = d.getMilliseconds() && ".%L" || d.getSeconds() && ".:%S" || d.getMinutes() && "%I:%M" || d.getHours() && "%I %p" || d.getDate() !== 1 && "%b %d" || isZoomed && d.getDate() === 1 && "%b\'%y" || d.getMonth() && "%-m/%-d" || "%Y";
1879 return $$.axisTimeFormat(specifier)(d);
1880 }, $$.hiddenTargetIds = [], $$.hiddenLegendIds = [], $$.focusedTargetIds = [], $$.defocusedTargetIds = [], $$.isLegendRight = config.legend_position === "right", $$.isLegendInset = config.legend_position === "inset", $$.isLegendTop = config.legend_inset_anchor === "top-left" || config.legend_inset_anchor === "top-right", $$.isLegendLeft = config.legend_inset_anchor === "top-left" || config.legend_inset_anchor === "bottom-left", $$.legendStep = 0, $$.legendItemWidth = 0, $$.legendItemHeight = 0, $$.currentMaxTickWidths = {
1881 x: {
1882 size: 0,
1883 ticks: [],
1884 domain: ""
1885 },
1886 y: {
1887 size: 0,
1888 domain: ""
1889 },
1890 y2: {
1891 size: 0,
1892 domain: ""
1893 }
1894 }, $$.rotated_padding_left = 30, $$.rotated_padding_right = isRotated && !config.axis_x_show ? 0 : 30, $$.rotated_padding_top = 5, $$.withoutFadeIn = {}, $$.inputType = $$.convertInputType(), $$.axes.subx = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]);
1895 }
1896 }, {
1897 key: "initWithData",
1898 value: function initWithData(data) {
1899 var $$ = this,
1900 config = $$.config;
1901
1902 if ($$.axis = new Axis_Axis($$), config.zoom_enabled && $$.initZoom(), $$.data.xs = {}, $$.data.targets = $$.convertDataToTargets(data), config.data_filter && ($$.data.targets = $$.data.targets.filter(config.data_filter)), config.data_hide && $$.addHiddenTargetIds(config.data_hide === !0 ? $$.mapToIds($$.data.targets) : config.data_hide), config.legend_hide && $$.addHiddenLegendIds(config.legend_hide === !0 ? $$.mapToIds($$.data.targets) : config.legend_hide), $$.updateSizes(), $$.updateScales(!0), $$.x && ($$.x.domain(sortValue($$.getXDomain($$.data.targets))), $$.subX.domain($$.x.domain()), $$.orgXDomain = $$.x.domain()), $$.y && ($$.y.domain($$.getYDomain($$.data.targets, "y")), $$.subY.domain($$.y.domain())), $$.y2 && ($$.y2.domain($$.getYDomain($$.data.targets, "y2")), $$.subY2 && $$.subY2.domain($$.y2.domain())), $$.svg = $$.selectChart.append("svg").style("overflow", "hidden").style("display", "block"), config.interaction_enabled && $$.inputType) {
1903 var isTouch = $$.inputType === "touch";
1904 $$.svg.on(isTouch ? "touchstart" : "mouseenter", function () {
1905 return callFn(config.onover, $$, $$.api);
1906 }).on(isTouch ? "touchend" : "mouseleave", function () {
1907 return callFn(config.onout, $$, $$.api);
1908 });
1909 }
1910
1911 config.svg_classname && $$.svg.attr("class", config.svg_classname), $$.defs = $$.svg.append("defs"), $$.clipChart = $$.appendClip($$.defs, $$.clipId), $$.clipXAxis = $$.appendClip($$.defs, $$.clipIdForXAxis), $$.clipXAxisTickTexts = $$.appendClip($$.defs, $$.clipIdForXAxisTickTexts), $$.clipYAxis = $$.appendClip($$.defs, $$.clipIdForYAxis), $$.clipGrid = $$.appendClip($$.defs, $$.clipIdForGrid), isFunction(config.color_tiles) && $$.patterns && $$.patterns.forEach(function (p) {
1912 return $$.defs.append(function () {
1913 return p.node;
1914 });
1915 }), $$.updateSvgSize(), $$.bindResize();
1916 // Define regions
1917 var main = $$.svg.append("g").attr("transform", $$.getTranslate("main"));
1918
1919 // data.onmin/max callback
1920 if ($$.main = main, config.subchart_show && $$.initSubchart(), $$.initTooltip && $$.initTooltip(), $$.initLegend && $$.initLegend(), $$.initTitle && $$.initTitle(), config.data_empty_label_text && main.append("text").attr("class", "".concat(config_classes.text, " ").concat(config_classes.empty)).attr("text-anchor", "middle") // horizontal centering of text at x position in all browsers.
1921 .attr("dominant-baseline", "middle"), $$.initRegion(), config.clipPath || $$.axis.init(), main.append("g").attr("class", config_classes.chart).attr("clip-path", $$.clipPath), $$.callPluginHook("$init"), $$.initEventRect(), $$.initChartElements(), $$.initGrid(), main.insert("rect", config.zoom_privileged ? null : "g.".concat(config_classes.regions)).attr("class", config_classes.zoomRect).attr("width", $$.width).attr("height", $$.height).style("opacity", "0").on("dblclick.zoom", null), config.clipPath && $$.axis.init(), $$.updateTargets($$.data.targets), $$.updateDimension(), callFn(config.oninit, $$, $$.api), $$.setBackground(), $$.redraw({
1922 withTransition: !1,
1923 withTransform: !0,
1924 withUpdateXDomain: !0,
1925 withUpdateOrgXDomain: !0,
1926 withTransitionForAxis: !1,
1927 initializing: !0
1928 }), config.data_onmin || config.data_onmax) {
1929 var minMax = $$.getMinMaxData();
1930 callFn(config.data_onmin, $$, minMax.min), callFn(config.data_onmax, $$, minMax.max);
1931 } // export element of the chart
1932
1933
1934 $$.api.element = $$.selectChart.node(), $$.rendered = !0;
1935 }
1936 }, {
1937 key: "initChartElements",
1938 value: function initChartElements() {
1939 var $$ = this;
1940 ["Bar", "Radar", "Line", "Bubble", "Arc", "Gauge", "Pie"].forEach(function (v) {
1941 $$["init".concat(v)]();
1942 }), notEmpty($$.config.data_labels) && $$.initText();
1943 }
1944 }, {
1945 key: "setChartElements",
1946 value: function setChartElements() {
1947 var $$ = this;
1948 $$.api.$ = {
1949 chart: $$.selectChart,
1950 svg: $$.svg,
1951 defs: $$.defs,
1952 main: $$.main,
1953 tooltip: $$.tooltip,
1954 legend: $$.legend,
1955 title: $$.title,
1956 grid: $$.grid,
1957 arc: $$.arcs,
1958 bar: {
1959 bars: $$.mainBar
1960 },
1961 line: {
1962 lines: $$.mainLine,
1963 areas: $$.mainArea,
1964 circles: $$.mainCircle
1965 },
1966 text: {
1967 texts: $$.mainText
1968 }
1969 };
1970 }
1971 /**
1972 * Set background element/image
1973 * @private
1974 */
1975
1976 }, {
1977 key: "setBackground",
1978 value: function setBackground() {
1979 var $$ = this,
1980 bg = $$.config.background;
1981
1982 if (notEmpty(bg)) {
1983 var element = $$.svg.select(".".concat(config_classes[$$.hasArcType() ? "chart" : "regions"])).insert(bg.imgUrl ? "image" : "rect", ":first-child");
1984 bg.imgUrl ? element.attr("href", bg.imgUrl) : bg.color && element.style("fill", bg.color), element.attr("class", bg["class"] || null).attr("width", "100%").attr("height", "100%");
1985 }
1986 }
1987 }, {
1988 key: "smoothLines",
1989 value: function smoothLines(el, type) {
1990 type === "grid" && el.each(function () {
1991 var g = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this);
1992 ["x1", "x2", "y1", "y2"].forEach(function (v) {
1993 return g.attr(v, Math.ceil(g.attr(v)));
1994 });
1995 });
1996 }
1997 /**
1998 * Update size values
1999 * @param {Boolean} isInit If is called at initialization
2000 * @private
2001 */
2002
2003 }, {
2004 key: "updateSizes",
2005 value: function updateSizes(isInit) {
2006 var $$ = this;
2007 isInit || $$.setContainerSize();
2008 var config = $$.config,
2009 isRotated = config.axis_rotated,
2010 hasArc = $$.hasArcType(),
2011 legend = {
2012 width: $$.legend ? $$.getLegendWidth() : 0,
2013 height: $$.legend ? $$.getLegendHeight() : 0
2014 },
2015 legendHeightForBottom = $$.isLegendRight || $$.isLegendInset ? 0 : legend.height,
2016 xAxisHeight = isRotated || hasArc ? 0 : $$.getHorizontalAxisHeight("x"),
2017 subchartXAxisHeight = config.subchart_axis_x_show && config.subchart_axis_x_tick_text_show ? xAxisHeight : 30,
2018 subchartHeight = config.subchart_show && !hasArc ? config.subchart_size_height + subchartXAxisHeight : 0;
2019 $$.margin = isRotated ? {
2020 top: $$.getHorizontalAxisHeight("y2") + $$.getCurrentPaddingTop(),
2021 right: hasArc ? 0 : $$.getCurrentPaddingRight(),
2022 bottom: $$.getHorizontalAxisHeight("y") + legendHeightForBottom + $$.getCurrentPaddingBottom(),
2023 left: subchartHeight + (hasArc ? 0 : $$.getCurrentPaddingLeft())
2024 } : {
2025 top: 4 + $$.getCurrentPaddingTop(),
2026 // for top tick text
2027 right: hasArc ? 0 : $$.getCurrentPaddingRight(),
2028 bottom: xAxisHeight + subchartHeight + legendHeightForBottom + $$.getCurrentPaddingBottom(),
2029 left: hasArc ? 0 : $$.getCurrentPaddingLeft()
2030 }, $$.margin2 = isRotated ? {
2031 top: $$.margin.top,
2032 right: NaN,
2033 bottom: 20 + legendHeightForBottom,
2034 left: $$.rotated_padding_left
2035 } : {
2036 top: $$.currentHeight - subchartHeight - legendHeightForBottom,
2037 right: NaN,
2038 bottom: subchartXAxisHeight + legendHeightForBottom,
2039 left: $$.margin.left
2040 }, $$.margin3 = {
2041 top: 0,
2042 right: NaN,
2043 bottom: 0,
2044 left: 0
2045 }, $$.updateSizeForLegend && $$.updateSizeForLegend(legend), $$.width = $$.currentWidth - $$.margin.left - $$.margin.right, $$.height = $$.currentHeight - $$.margin.top - $$.margin.bottom, $$.width < 0 && ($$.width = 0), $$.height < 0 && ($$.height = 0), $$.width2 = isRotated ? $$.margin.left - $$.rotated_padding_left - $$.rotated_padding_right : $$.width, $$.height2 = isRotated ? $$.height : $$.currentHeight - $$.margin2.top - $$.margin2.bottom, $$.width2 < 0 && ($$.width2 = 0), $$.height2 < 0 && ($$.height2 = 0), $$.arcWidth = $$.width - ($$.isLegendRight ? legend.width + 10 : 0), $$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10), $$.hasType("gauge") && !config.gauge_fullCircle && ($$.arcHeight += $$.height - $$.getGaugeLabelHeight()), $$.updateRadius && $$.updateRadius(), $$.isLegendRight && hasArc && ($$.margin3.left = $$.arcWidth / 2 + $$.radiusExpanded * 1.1), !hasArc && config.axis_x_show && $$.updateXAxisTickClip();
2046 }
2047 /**
2048 * Update targeted element with given data
2049 * @param {Object} targets Data object formatted as 'target'
2050 * @private
2051 */
2052
2053 }, {
2054 key: "updateTargets",
2055 value: function updateTargets(targets) {
2056 var $$ = this; // Text
2057
2058 $$.updateTargetsForText(targets), $$.updateTargetsForBar(targets), $$.updateTargetsForLine(targets), $$.hasArcType(targets) && ($$.hasType("radar") ? $$.updateTargetsForRadar(targets) : $$.updateTargetsForArc(targets)), $$.updateTargetsForSubchart && $$.updateTargetsForSubchart(targets), $$.showTargets();
2059 }
2060 /**
2061 * Display targeted elements
2062 * @private
2063 */
2064
2065 }, {
2066 key: "showTargets",
2067 value: function showTargets() {
2068 var $$ = this;
2069 $$.svg.selectAll(".".concat(config_classes.target)).filter(function (d) {
2070 return $$.isTargetToShow(d.id);
2071 }).transition().duration($$.config.transition_duration).style("opacity", "1");
2072 }
2073 }, {
2074 key: "getWithOption",
2075 value: function getWithOption(options) {
2076 var withOptions = {
2077 Y: !0,
2078 Subchart: !0,
2079 Transition: !0,
2080 EventRect: !0,
2081 Dimension: !0,
2082 TrimXDomain: !0,
2083 Transform: !1,
2084 UpdateXDomain: !1,
2085 UpdateOrgXDomain: !1,
2086 Legend: !1,
2087 UpdateXAxis: "UpdateXDomain",
2088 TransitionForExit: "Transition",
2089 TransitionForAxis: "Transition"
2090 };
2091 return Object.keys(withOptions).forEach(function (key) {
2092 var defVal = withOptions[key];
2093 isString(defVal) && (defVal = withOptions[defVal]), withOptions[key] = getOption(options, "with".concat(key), defVal);
2094 }), withOptions;
2095 }
2096 }, {
2097 key: "redraw",
2098 value: function redraw() {
2099 var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
2100 transitionsValue = arguments.length > 1 ? arguments[1] : undefined,
2101 $$ = this,
2102 main = $$.main,
2103 config = $$.config,
2104 targetsToShow = $$.filterTargetsToShow($$.data.targets),
2105 initializing = options.initializing,
2106 flow = options.flow,
2107 wth = $$.getWithOption(options),
2108 duration = wth.Transition ? config.transition_duration : 0,
2109 durationForExit = wth.TransitionForExit ? duration : 0,
2110 durationForAxis = wth.TransitionForAxis ? duration : 0,
2111 transitions = transitionsValue || $$.axis.generateTransitions(durationForAxis);
2112 $$.updateSizes(initializing), wth.Legend && config.legend_show ? $$.updateLegend($$.mapToIds($$.data.targets), options, transitions) : wth.Dimension && $$.updateDimension(!0), $$.axis.redrawAxis(targetsToShow, wth, transitions, flow, initializing), $$.updateCircleY(), config.data_empty_label_text && main.select("text.".concat(config_classes.text, ".").concat(config_classes.empty)).attr("x", $$.width / 2).attr("y", $$.height / 2).text(config.data_empty_label_text).style("display", targetsToShow.length ? "none" : null), $$.updateGrid(duration), $$.updateRegion(duration), $$.updateBar(durationForExit), $$.updateLine(durationForExit), $$.updateArea(durationForExit), $$.updateCircle(), $$.hasDataLabel() && $$.updateText(durationForExit), $$.redrawTitle && $$.redrawTitle(), $$.arcs && $$.redrawArc(duration, durationForExit, wth.Transform), $$.radars && $$.redrawRadar(durationForExit), $$.mainText && main.selectAll(".".concat(config_classes.selectedCircles)).filter($$.isBarType.bind($$)).selectAll("circle").remove(), config.interaction_enabled && !flow && wth.EventRect && $$.bindZoomEvent(), initializing && $$.setChartElements(), $$.generateRedrawList(targetsToShow, flow, duration, wth.Subchart), $$.callPluginHook("$redraw", options, duration);
2113 }
2114 /**
2115 * Generate redraw list
2116 * @param {Object} targets targets data to be shown
2117 * @param {Object} flow
2118 * @param {Object} duration
2119 * @param {Boolean} withSubchart whether or not to show subchart
2120 * @private
2121 */
2122
2123 }, {
2124 key: "generateRedrawList",
2125 value: function generateRedrawList(targets, flow, duration, withSubchart) {
2126 var $$ = this,
2127 config = $$.config,
2128 shape = $$.getDrawShape();
2129 config.subchart_show && $$.redrawSubchart(withSubchart, duration, shape);
2130 // generate flow
2131 var flowFn = flow && $$.generateFlow({
2132 targets: targets,
2133 flow: flow,
2134 duration: flow.duration,
2135 shape: shape,
2136 xv: $$.xv.bind($$)
2137 }),
2138 isTransition = (duration || flowFn) && $$.isTabVisible(),
2139 redrawList = $$.getRedrawList(shape, flow, flowFn, isTransition),
2140 afterRedraw = flow || config.onrendered ? function () {
2141 flowFn && flowFn(), callFn(config.onrendered, $$, $$.api);
2142 } : null;
2143 if (afterRedraw) // Only use transition when current tab is visible.
2144 if (isTransition && redrawList.length) {
2145 // Wait for end of transitions for callback
2146 var waitForDraw = $$.generateWait(); // transition should be derived from one transition
2147
2148 Object(external_commonjs_d3_transition_commonjs2_d3_transition_amd_d3_transition_root_d3_["transition"])().duration(duration).each(function () {
2149 redrawList.reduce(function (acc, t1) {
2150 return acc.concat(t1);
2151 }, []).forEach(function (t) {
2152 return waitForDraw.add(t);
2153 });
2154 }).call(waitForDraw, afterRedraw);
2155 } else $$.transiting || afterRedraw(); // update fadein condition
2156
2157 $$.mapToIds($$.data.targets).forEach(function (id) {
2158 $$.withoutFadeIn[id] = !0;
2159 });
2160 }
2161 /**
2162 * Get the shape draw function
2163 * @return {Object}
2164 * @private
2165 */
2166
2167 }, {
2168 key: "getDrawShape",
2169 value: function getDrawShape() {
2170 var $$ = this,
2171 isRotated = $$.config.axis_rotated,
2172 hasRadar = $$.hasType("radar"),
2173 shape = {
2174 type: {},
2175 indices: {}
2176 };
2177
2178 // setup drawer - MEMO: these must be called after axis updated
2179 if ($$.hasTypeOf("Line") || $$.hasType("bubble") || $$.hasType("scatter")) {
2180 var indices = $$.getShapeIndices($$.isLineType);
2181
2182 if (shape.indices.line = indices, shape.type.line = $$.generateDrawLine ? $$.generateDrawLine(indices, !1) : undefined, $$.hasTypeOf("Area")) {
2183 var _indices = $$.getShapeIndices($$.isAreaType);
2184
2185 shape.indices.area = _indices, shape.type.area = $$.generateDrawArea ? $$.generateDrawArea(_indices, !1) : undefined;
2186 }
2187 }
2188
2189 if ($$.hasType("bar")) {
2190 var _indices2 = $$.getShapeIndices($$.isBarType);
2191
2192 shape.indices.bar = _indices2, shape.type.bar = $$.generateDrawBar ? $$.generateDrawBar(_indices2) : undefined;
2193 }
2194
2195 return shape.pos = {
2196 xForText: $$.generateXYForText(shape.indices, !0),
2197 yForText: $$.generateXYForText(shape.indices, !1),
2198 // generate circle x/y functions depending on updated params
2199 cx: (hasRadar ? $$.radarCircleX : isRotated ? $$.circleY : $$.circleX).bind($$),
2200 cy: (hasRadar ? $$.radarCircleY : isRotated ? $$.circleX : $$.circleY).bind($$)
2201 }, shape;
2202 }
2203 }, {
2204 key: "getRedrawList",
2205 value: function getRedrawList(shape, flow, flowFn, isTransition) {
2206 var $$ = this,
2207 config = $$.config,
2208 hasArcType = $$.hasArcType(),
2209 _shape$pos = shape.pos,
2210 cx = _shape$pos.cx,
2211 cy = _shape$pos.cy,
2212 xForText = _shape$pos.xForText,
2213 yForText = _shape$pos.yForText,
2214 list = [];
2215
2216 if (!hasArcType) {
2217 var _shape$type = shape.type,
2218 area = _shape$type.area,
2219 bar = _shape$type.bar,
2220 line = _shape$type.line;
2221 (config.grid_x_lines.length || config.grid_y_lines.length) && list.push($$.redrawGrid(isTransition)), config.regions.length && list.push($$.redrawRegion(isTransition)), $$.hasTypeOf("Line") && (list.push($$.redrawLine(line, isTransition)), $$.hasTypeOf("Area") && list.push($$.redrawArea(area, isTransition))), $$.hasType("bar") && list.push($$.redrawBar(bar, isTransition)), flow || list.push($$.updategridFocus());
2222 }
2223
2224 return (!hasArcType || $$.hasType("radar")) && (notEmpty(config.data_labels) && list.push($$.redrawText(xForText, yForText, flow, isTransition)), list.push($$.redrawCircle(cx, cy, isTransition, flowFn))), list;
2225 }
2226 }, {
2227 key: "updateAndRedraw",
2228 value: function updateAndRedraw() {
2229 var transitions,
2230 options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
2231 $$ = this,
2232 config = $$.config;
2233 options.withTransition = getOption(options, "withTransition", !0), options.withTransform = getOption(options, "withTransform", !1), options.withLegend = getOption(options, "withLegend", !1), options.withUpdateXDomain = !0, options.withUpdateOrgXDomain = !0, options.withTransitionForExit = !1, options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition), options.withLegend && config.legend_show || (transitions = $$.axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0), $$.updateScales(), $$.updateSvgSize(), $$.transformAll(options.withTransitionForTransform, transitions)), $$.redraw(options, transitions);
2234 }
2235 }, {
2236 key: "redrawWithoutRescale",
2237 value: function redrawWithoutRescale() {
2238 this.redraw({
2239 withY: !1,
2240 withSubchart: !1,
2241 withEventRect: !1,
2242 withTransitionForAxis: !1
2243 });
2244 }
2245 }, {
2246 key: "isTimeSeries",
2247 value: function isTimeSeries() {
2248 return this.config.axis_x_type === "timeseries";
2249 }
2250 }, {
2251 key: "isCategorized",
2252 value: function isCategorized() {
2253 return this.config.axis_x_type.indexOf("category") >= 0 || this.hasType("radar");
2254 }
2255 }, {
2256 key: "isCustomX",
2257 value: function isCustomX() {
2258 var $$ = this,
2259 config = $$.config;
2260 return !$$.isTimeSeries() && (config.data_x || notEmpty(config.data_xs));
2261 }
2262 }, {
2263 key: "isTimeSeriesY",
2264 value: function isTimeSeriesY() {
2265 return this.config.axis_y_type === "timeseries";
2266 }
2267 }, {
2268 key: "getTranslate",
2269 value: function getTranslate(target) {
2270 var x,
2271 y,
2272 index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0,
2273 $$ = this,
2274 config = $$.config,
2275 isRotated = config.axis_rotated,
2276 hasGauge = $$.hasType("gauge"),
2277 padding = 0;
2278 if (index && /^(x|y2?)$/.test(target) && (padding = $$.getAxisSize(target) * index), target === "main") x = asHalfPixel($$.margin.left), y = asHalfPixel($$.margin.top);else if (target === "context") x = asHalfPixel($$.margin2.left), y = asHalfPixel($$.margin2.top);else if (target === "legend") x = $$.margin3.left, y = $$.margin3.top + (hasGauge ? 10 : 0);else if (target === "x") x = isRotated ? -padding : 0, y = isRotated ? 0 : $$.height + padding;else if (target === "y") x = isRotated ? 0 : -padding, y = isRotated ? $$.height + padding : 0;else if (target === "y2") x = isRotated ? 0 : $$.width + padding, y = isRotated ? 1 - padding : 0;else if (target === "subx") x = 0, y = isRotated ? 0 : $$.height2;else if (target === "arc") x = $$.arcWidth / 2, y = $$.arcHeight / 2;else if (target === "radar") {
2279 var _$$$getRadarSize = $$.getRadarSize(),
2280 _$$$getRadarSize2 = _slicedToArray(_$$$getRadarSize, 1),
2281 width = _$$$getRadarSize2[0];
2282
2283 x = $$.width / 2 - width, y = asHalfPixel($$.margin.top);
2284 }
2285 return "translate(".concat(x, ", ").concat(y, ")");
2286 }
2287 }, {
2288 key: "initialOpacity",
2289 value: function initialOpacity(d) {
2290 return this.getBaseValue(d) !== null && this.withoutFadeIn[d.id] ? "1" : "0";
2291 }
2292 }, {
2293 key: "initialOpacityForCircle",
2294 value: function initialOpacityForCircle(d) {
2295 return this.getBaseValue(d) !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : "0";
2296 }
2297 }, {
2298 key: "opacityForCircle",
2299 value: function opacityForCircle(d) {
2300 var opacity = this.config.point_show ? "1" : "0";
2301 return isValue(this.getBaseValue(d)) ? this.isBubbleType(d) || this.isScatterType(d) ? "0.5" : opacity : "0";
2302 }
2303 }, {
2304 key: "opacityForText",
2305 value: function opacityForText() {
2306 return this.hasDataLabel() ? "1" : "0";
2307 }
2308 /**
2309 * Get the zoom or unzoomed scaled value
2310 * @param {Date|Number|Object} d Data value
2311 * @private
2312 */
2313
2314 }, {
2315 key: "xx",
2316 value: function xx(d) {
2317 var $$ = this,
2318 fn = $$.config.zoom_enabled && $$.zoomScale ? $$.zoomScale : this.x;
2319 return d ? fn(isValue(d.x) ? d.x : d) : null;
2320 }
2321 }, {
2322 key: "xv",
2323 value: function xv(d) {
2324 var $$ = this,
2325 value = $$.getBaseValue(d);
2326 return $$.isTimeSeries() ? value = $$.parseDate(value) : $$.isCategorized() && isString(value) && (value = $$.config.axis_x_categories.indexOf(value)), Math.ceil($$.x(value));
2327 }
2328 }, {
2329 key: "yv",
2330 value: function yv(d) {
2331 var $$ = this,
2332 yScale = d.axis && d.axis === "y2" ? $$.y2 : $$.y;
2333 return Math.ceil(yScale($$.getBaseValue(d)));
2334 }
2335 }, {
2336 key: "subxx",
2337 value: function subxx(d) {
2338 return d ? this.subX(d.x) : null;
2339 }
2340 }, {
2341 key: "transformMain",
2342 value: function transformMain(withTransition, transitions) {
2343 var xAxis,
2344 yAxis,
2345 y2Axis,
2346 $$ = this;
2347 transitions && transitions.axisX ? xAxis = transitions.axisX : (xAxis = $$.main.select(".".concat(config_classes.axisX)), withTransition && (xAxis = xAxis.transition())), transitions && transitions.axisY ? yAxis = transitions.axisY : (yAxis = $$.main.select(".".concat(config_classes.axisY)), withTransition && (yAxis = yAxis.transition())), transitions && transitions.axisY2 ? y2Axis = transitions.axisY2 : (y2Axis = $$.main.select(".".concat(config_classes.axisY2)), withTransition && (y2Axis = y2Axis.transition())), (withTransition ? $$.main.transition() : $$.main).attr("transform", $$.getTranslate("main")), xAxis.attr("transform", $$.getTranslate("x")), yAxis.attr("transform", $$.getTranslate("y")), y2Axis.attr("transform", $$.getTranslate("y2")), $$.main.select(".".concat(config_classes.chartArcs)).attr("transform", $$.getTranslate("arc"));
2348 }
2349 }, {
2350 key: "transformAll",
2351 value: function transformAll(withTransition, transitions) {
2352 var $$ = this;
2353 $$.transformMain(withTransition, transitions), $$.config.subchart_show && $$.transformContext(withTransition, transitions), $$.legend && $$.transformLegend(withTransition);
2354 }
2355 }, {
2356 key: "updateSvgSize",
2357 value: function updateSvgSize() {
2358 var $$ = this,
2359 brush = $$.svg.select(".".concat(config_classes.brush, " .overlay")),
2360 brushSize = {
2361 width: 0,
2362 height: 0
2363 };
2364 brush.size() && (brushSize.width = +brush.attr("width"), brushSize.height = +brush.attr("height")), $$.svg.attr("width", $$.currentWidth).attr("height", $$.currentHeight), $$.svg.selectAll(["#".concat($$.clipId), "#".concat($$.clipIdForGrid)]).select("rect").attr("width", $$.width).attr("height", $$.height), $$.svg.select("#".concat($$.clipIdForXAxis)).select("rect").attr("x", $$.getXAxisClipX.bind($$)).attr("y", $$.getXAxisClipY.bind($$)).attr("width", $$.getXAxisClipWidth.bind($$)).attr("height", $$.getXAxisClipHeight.bind($$)), $$.svg.select("#".concat($$.clipIdForYAxis)).select("rect").attr("x", $$.getYAxisClipX.bind($$)).attr("y", $$.getYAxisClipY.bind($$)).attr("width", $$.getYAxisClipWidth.bind($$)).attr("height", $$.getYAxisClipHeight.bind($$)), $$.svg.select("#".concat($$.clipIdForSubchart)).select("rect").attr("width", $$.width).attr("height", brushSize.height), $$.svg.select(".".concat(config_classes.zoomRect)).attr("width", $$.width).attr("height", $$.height);
2365 }
2366 }, {
2367 key: "updateDimension",
2368 value: function updateDimension(withoutAxis) {
2369 var $$ = this;
2370 withoutAxis || ($$.xAxis && $$.config.axis_rotated ? ($$.xAxis.create($$.axes.x), $$.subXAxis.create($$.axes.subx)) : ($$.yAxis && $$.yAxis.create($$.axes.y), $$.y2Axis && $$.y2Axis.create($$.axes.y2))), $$.updateScales(withoutAxis), $$.updateSvgSize(), $$.transformAll(!1);
2371 }
2372 }, {
2373 key: "bindResize",
2374 value: function bindResize() {
2375 var $$ = this,
2376 config = $$.config,
2377 resizeFunction = $$.generateResize(),
2378 list = [];
2379 list.push(function () {
2380 return callFn(config.onresize, $$, $$.api);
2381 }), config.resize_auto && list.push(function () {
2382 return $$.api.flush(!1, !0);
2383 }), list.push(function () {
2384 return callFn(config.onresized, $$, $$.api);
2385 }), list.forEach(function (v) {
2386 return resizeFunction.add(v);
2387 }), win.addEventListener("resize", $$.resizeFunction = resizeFunction);
2388 }
2389 }, {
2390 key: "generateResize",
2391 value: function generateResize() {
2392 function callResizeFn() {
2393 callResizeFn.timeout && (win.clearTimeout(callResizeFn.timeout), callResizeFn.timeout = null), callResizeFn.timeout = win.setTimeout(function () {
2394 fn.forEach(function (f) {
2395 return f();
2396 });
2397 }, 200);
2398 }
2399
2400 var fn = [];
2401 return callResizeFn.add = function (f) {
2402 return fn.push(f);
2403 }, callResizeFn.remove = function (f) {
2404 return fn.splice(fn.indexOf(f), 1);
2405 }, callResizeFn;
2406 }
2407 }, {
2408 key: "endall",
2409 value: function endall(transition, callback) {
2410 var n = 0;
2411 transition.each(function () {
2412 return ++n;
2413 }).on("end", function () {
2414 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
2415
2416 --n || callback.apply.apply(callback, [this].concat(args));
2417 });
2418 }
2419 }, {
2420 key: "generateWait",
2421 value: function generateWait() {
2422 var transitionsToWait = [],
2423 f = function (transition, callback) {
2424 function loop() {
2425 for (var t, done = 0, i = 0; t = transitionsToWait[i]; i++) {
2426 if (t.empty()) {
2427 done++;
2428 continue;
2429 }
2430
2431 try {
2432 t.transition();
2433 } catch (e) {
2434 done++;
2435 }
2436 }
2437
2438 timer && clearTimeout(timer), done === transitionsToWait.length ? callback && callback() : timer = setTimeout(loop, 50);
2439 }
2440
2441 var timer;
2442 loop();
2443 };
2444
2445 return f.add = function (transition) {
2446 isArray(transition) ? transitionsToWait = transitionsToWait.concat(transition) : transitionsToWait.push(transition);
2447 }, f;
2448 }
2449 }, {
2450 key: "parseDate",
2451 value: function parseDate(date) {
2452 var parsedDate,
2453 $$ = this;
2454 return date instanceof Date ? parsedDate = date : isString(date) ? parsedDate = $$.dataTimeFormat($$.config.data_xFormat)(date) : isNumber(date) && !isNaN(date) && (parsedDate = new Date(+date)), (!parsedDate || isNaN(+parsedDate)) && console && console.error && console.error("Failed to parse x '".concat(date, "' to Date object")), parsedDate;
2455 }
2456 }, {
2457 key: "isTabVisible",
2458 value: function isTabVisible() {
2459 return !browser_doc.hidden;
2460 }
2461 }, {
2462 key: "convertInputType",
2463 value: function convertInputType() {
2464 var $$ = this,
2465 config = $$.config,
2466 isMobile = !1;
2467
2468 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#Mobile_Tablet_or_Desktop
2469 if (/Mobi/.test(win.navigator.userAgent) && config.interaction_inputType_touch) {
2470 // Some Edge desktop return true: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/20417074/
2471 var hasTouchPoints = win.navigator && "maxTouchPoints" in win.navigator && win.navigator.maxTouchPoints > 0,
2472 hasTouch = "ontouchmove" in win || win.DocumentTouch && browser_doc instanceof win.DocumentTouch; // Ref: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
2473 // On IE11 with IE9 emulation mode, ('ontouchstart' in window) is returning true
2474
2475 isMobile = hasTouchPoints || hasTouch;
2476 }
2477
2478 var hasMouse = config.interaction_inputType_mouse && !isMobile && "onmouseover" in win;
2479 return hasMouse && "mouse" || isMobile && "touch" || null;
2480 }
2481 /**
2482 * Call plugin hook
2483 * @param {String} phase The lifecycle phase
2484 * @private
2485 */
2486
2487 }, {
2488 key: "callPluginHook",
2489 value: function callPluginHook(phase) {
2490 for (var _this2 = this, _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) args[_key2 - 1] = arguments[_key2];
2491
2492 this.config.plugins.forEach(function (v) {
2493 phase === "$beforeInit" && (v.$$ = _this2, _this2.api.plugins.push(v)), v[phase].apply(v, args);
2494 });
2495 }
2496 }]), ChartInternal;
2497}();
2498
2499
2500// CONCATENATED MODULE: ./src/internals/Chart.js
2501
2502
2503/**
2504 * Copyright (c) 2017 ~ present NAVER Corp.
2505 * billboard.js project is licensed under the MIT license
2506 */
2507
2508/**
2509 * Main chart class.
2510 * - Note: Instantiated via `bb.generate()`.
2511 * @class Chart
2512 * @example
2513 * var chart = bb.generate({
2514 * data: {
2515 * columns: [
2516 * ["x", "2015-11-02", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01"],
2517 * ["count1", 11, 8, 7, 6, 5 ],
2518 * ["count2", 9, 3, 6, 2, 8 ]
2519 * ]}
2520 * }
2521 * @see {@link bb.generate} for the initialization.
2522*/
2523
2524/**
2525 * Access instance's primary node elements
2526 * @member {Object} $
2527 * @property {Object} $
2528 * @property {d3.selection} $.chart Wrapper element
2529 * @property {d3.selection} $.svg Main svg element
2530 * @property {d3.selection} $.defs Definition element
2531 * @property {d3.selection} $.main Main grouping element
2532 * @property {d3.selection} $.tooltip Tooltip element
2533 * @property {d3.selection} $.legend Legend element
2534 * @property {d3.selection} $.title Title element
2535 * @property {d3.selection} $.grid Grid element
2536 * @property {d3.selection} $.arc Arc element
2537 * @property {Object} $.bar
2538 * @property {d3.selection} $.bar.bars Bar elements
2539 * @property {Object} $.line
2540 * @property {d3.selection} $.line.lines Line elements
2541 * @property {d3.selection} $.line.areas Areas elements
2542 * @property {d3.selection} $.line.circles Data point circle elements
2543 * @property {Object} $.text
2544 * @property {d3.selection} $.text.texts Data label text elements
2545 * @memberof Chart
2546 * @example
2547 * var chart = bb.generate({ ... });
2548 *
2549 * chart.$.chart; // wrapper element
2550 * chart.$.line.circles; // all data point circle elements
2551 */
2552
2553var Chart_Chart = function Chart(config) {
2554 _classCallCheck(this, Chart);
2555
2556 var $$ = new ChartInternal_ChartInternal(this);
2557 /**
2558 * Plugin instance array
2559 * @member {Array} plugins
2560 * @memberof Chart
2561 * @instance
2562 * @example
2563 * var chart = bb.generate({
2564 * ...
2565 * plugins: [
2566 * new bb.plugin.stanford({ ... }),
2567 * new PluginA()
2568 * ]
2569 * });
2570 *
2571 * chart.plugins; // [Stanford, PluginA] - instance array
2572 */
2573
2574 // bind "this" to nested API
2575 this.plugins = [], this.internal = $$, $$.loadConfig(config), $$.beforeInit(config), $$.init(), function bindThis(fn, target, argThis) {
2576 Object.keys(fn).forEach(function (key) {
2577 target[key] = fn[key].bind(argThis), Object.keys(fn[key]).length && bindThis(fn[key], target[key], argThis);
2578 });
2579 }(Chart.prototype, this, this);
2580};
2581
2582
2583// CONCATENATED MODULE: ./src/config/Options.js
2584
2585
2586/**
2587 * Copyright (c) 2017 ~ present NAVER Corp.
2588 * billboard.js project is licensed under the MIT license
2589 */
2590
2591/**
2592 * Class to set options on generating chart.
2593 * - It's instantiated internally, not exposed for public.
2594 * @class Options
2595 * @see {@link bb.generate} to use these options on generating the chart
2596 */
2597var Options_Options = function Options() {
2598 return _classCallCheck(this, Options), {
2599 /**
2600 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.<br>
2601 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
2602 * - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body.
2603 * @name bindto
2604 * @memberof Options
2605 * @property {String|HTMLElement|d3.selection} bindto=#chart Specify the element where chart will be drawn.
2606 * @property {String|HTMLElement|d3.selection} bindto.element=#chart Specify the element where chart will be drawn.
2607 * @property {String} [bindto.classname=bb] Specify the class name of bind element.<br>
2608 * **NOTE:** When class name isn't `bb`, then you also need to update the default CSS to be rendered correctly.
2609 * @default #chart
2610 * @example
2611 * bindto: "#myContainer"
2612 *
2613 * // or HTMLElement
2614 * bindto: document.getElementById("myContainer")
2615 *
2616 * // or D3 selection object
2617 * bindto: d3.select("#myContainer")
2618 *
2619 * // or to change default classname
2620 * bindto: {
2621 * element: "#chart",
2622 * classname: "bill-board" // ex) <div id='chart' class='bill-board'>
2623 * }
2624 */
2625 bindto: "#chart",
2626
2627 /**
2628 * Set chart background.
2629 * @name background
2630 * @memberof Options
2631 * @property {String} background.class Specify the class name for background element.
2632 * @property {String} background.color Specify the fill color for background element.<br>**NOTE:** Will be ignored if `imgUrl` option is set.
2633 * @property {String} background.imgUrl Specify the image url string for background.
2634 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Background)
2635 * @example
2636 * background: {
2637 * class: "myClass",
2638 * color: "red",
2639 *
2640 * // Set image url for background.
2641 * // If specified, 'color' option will be ignored.
2642 * imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
2643 * }
2644 */
2645 background: {},
2646
2647 /**
2648 * Set 'clip-path' attribute for chart element
2649 * - **NOTE:**
2650 * > When is false, chart node element is positioned after the axis node in DOM tree hierarchy.
2651 * > Is to make chart element positioned over axis element.
2652 * @name clipPath
2653 * @memberof Options
2654 * @type {Boolean}
2655 * @default true
2656 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.clipPath)
2657 * @example
2658 * // don't set 'clip-path' attribute
2659 * clipPath: false
2660 */
2661 clipPath: !0,
2662
2663 /**
2664 * Set svg element's class name
2665 * @name svg
2666 * @memberof Options
2667 * @type {Object}
2668 * @property {String} [svg.classname] class name for svg element
2669 * @example
2670 * svg: {
2671 * classname: "test_class"
2672 * }
2673 */
2674 svg_classname: undefined,
2675
2676 /**
2677 * The desired size of the chart element.
2678 * If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
2679 * @name size
2680 * @memberof Options
2681 * @type {Object}
2682 * @property {Number} [size.width] width of the chart element
2683 * @property {Number} [size.height] height of the chart element
2684 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.ChartSize)
2685 * @example
2686 * size: {
2687 * width: 640,
2688 * height: 480
2689 * }
2690 */
2691 size_width: undefined,
2692 size_height: undefined,
2693
2694 /**
2695 * The padding of the chart element.
2696 * @name padding
2697 * @memberof Options
2698 * @type {Object}
2699 * @property {Number} [padding.top] padding on the top of chart
2700 * @property {Number} [padding.right] padding on the right of chart
2701 * @property {Number} [padding.bottom] padding on the bottom of chart
2702 * @property {Number} [padding.left] padding on the left of chart
2703 * @example
2704 * padding: {
2705 * top: 20,
2706 * right: 20,
2707 * bottom: 20,
2708 * left: 20
2709 * }
2710 */
2711 padding_left: undefined,
2712 padding_right: undefined,
2713 padding_top: undefined,
2714 padding_bottom: undefined,
2715
2716 /**
2717 * Set chart resize options
2718 * @name resize
2719 * @memberof Options
2720 * @type {Object}
2721 * @property {Boolean} [resize.auto=true] Set chart resize automatically on viewport changes.
2722 * @example
2723 * resize: {
2724 * auto: false
2725 * }
2726 */
2727 resize_auto: !0,
2728
2729 /**
2730 * Set zoom options
2731 * @name zoom
2732 * @memberof Options
2733 * @type {Object}
2734 * @property {Boolean} [zoom.enabled=false] Enable zooming.
2735 * @property {String} [zoom.enabled.type='wheel'] Set zoom interaction type.
2736 * - **Available types:**
2737 * - wheel
2738 * - drag
2739 * @property {Boolean} [zoom.rescale=false] Enable to rescale after zooming.<br>
2740 * If true set, y domain will be updated according to the zoomed region.
2741 * @property {Array} [zoom.extent=[1, 10]] Change zoom extent.
2742 * @property {Number|Date} [zoom.x.min] Set x Axis minimum zoom range
2743 * @property {Number|Date} [zoom.x.max] Set x Axis maximum zoom range
2744 * @property {Function} [zoom.onzoomstart=undefined] Set callback that is called when zooming starts.<br>
2745 * Specified function receives the zoom event.
2746 * @property {Function} [zoom.onzoom=undefined] Set callback that is called when the chart is zooming.<br>
2747 * Specified function receives the zoomed domain.
2748 * @property {Function} [zoom.onzoomend=undefined] Set callback that is called when zooming ends.<br>
2749 * Specified function receives the zoomed domain.
2750 * @property {Boolean|Object} [zoom.resetButton=true] Set to display zoom reset button for 'drag' type zoom
2751 * @property {Function} [zoom.resetButton.onclick] Set callback when clicks the reset button. The callback will receive reset button element reference as argument.
2752 * @property {String} [zoom.resetButton.text='Reset Zoom'] Text value for zoom reset button.
2753 * @see [Demo:zoom](https://naver.github.io/billboard.js/demo/#Interaction.Zoom)
2754 * @see [Demo:drag zoom](https://naver.github.io/billboard.js/demo/#Interaction.DragZoom)
2755 * @example
2756 * zoom: {
2757 * enabled: {
2758 * type: "drag"
2759 * },
2760 * rescale: true,
2761 * extent: [1, 100] // enable more zooming
2762 * x: {
2763 * min: -1, // set min range
2764 * max: 10 // set max range
2765 * },
2766 * onzoomstart: function(event) { ... },
2767 * onzoom: function(domain) { ... },
2768 * onzoomend: function(domain) { ... },
2769 *
2770 * // show reset button when is zoomed-in
2771 * resetButton: true,
2772 *
2773 * resetButton: {
2774 * // onclick callback when reset button is clicked
2775 * onclick: function(button) {
2776 * button; // Reset button element reference
2777 * ...
2778 * },
2779 *
2780 * // customized text value for reset zoom button
2781 * text: "Unzoom"
2782 * }
2783 * }
2784 */
2785 zoom_enabled: undefined,
2786 zoom_extent: undefined,
2787 zoom_privileged: !1,
2788 zoom_rescale: !1,
2789 zoom_onzoom: undefined,
2790 zoom_onzoomstart: undefined,
2791 zoom_onzoomend: undefined,
2792 zoom_resetButton: !0,
2793 zoom_x_min: undefined,
2794 zoom_x_max: undefined,
2795
2796 /**
2797 * Interaction options
2798 * @name interaction
2799 * @memberof Options
2800 * @type {Object}
2801 * @property {Boolean} [interaction.enabled=true] Indicate if the chart should have interactions.<br>
2802 * If `false` is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.
2803 * @property {Boolean} [interaction.brighten=true] Make brighter for the selected area (ex. 'pie' type data selected area)
2804 * @property {Boolean} [interaction.inputType.mouse=true] enable or disable mouse interaction
2805 * @property {Boolean} [interaction.inputType.touch=true] enable or disable touch interaction
2806 * @property {Boolean|Number} [interaction.inputType.touch.preventDefault=false] enable or disable to call event.preventDefault on touchstart & touchmove event. It's usually used to prevent document scrolling.
2807 * @see [Demo: touch.preventDefault](https://naver.github.io/billboard.js/demo/#Interaction.PreventScrollOnTouch)
2808 * @example
2809 * interaction: {
2810 * enabled: false,
2811 * brighten: false,
2812 * inputType: {
2813 * mouse: true,
2814 * touch: false
2815 *
2816 * // or declare preventDefault explicitly.
2817 * // In this case touch inputType is enabled by default
2818 * touch: {
2819 * preventDefault: true
2820 *
2821 * // or threshold pixel value (pixel moved from touchstart to touchmove)
2822 * preventDefault: 5
2823 * }
2824 * }
2825 * }
2826 */
2827 interaction_enabled: !0,
2828 interaction_brighten: !0,
2829 interaction_inputType_mouse: !0,
2830 interaction_inputType_touch: {},
2831
2832 /**
2833 * Set a callback to execute when mouse/touch enters the chart.
2834 * @name onover
2835 * @memberof Options
2836 * @type {Function}
2837 * @default undefined
2838 * @example
2839 * // @param {Chart} ctx - Instance itself
2840 * onover: function(ctx) {
2841 * ...
2842 * }
2843 */
2844 onover: undefined,
2845
2846 /**
2847 * Set a callback to execute when mouse/touch leaves the chart.
2848 * @name onout
2849 * @memberof Options
2850 * @type {Function}
2851 * @default undefined
2852 * @example
2853 * // @param {Chart} ctx - Instance itself
2854 * onout: function(ctx) {
2855 * ...
2856 * }
2857 */
2858 onout: undefined,
2859
2860 /**
2861 * Set a callback to execute when user resizes the screen.
2862 * @name onresize
2863 * @memberof Options
2864 * @type {Function}
2865 * @default undefined
2866 * @example
2867 * // @param {Chart} ctx - Instance itself
2868 * onresize: function(ctx) {
2869 * ...
2870 * }
2871 */
2872 onresize: undefined,
2873
2874 /**
2875 * Set a callback to execute when screen resize finished.
2876 * @name onresized
2877 * @memberof Options
2878 * @type {Function}
2879 * @default undefined
2880 * @example
2881 * // @param {Chart} ctx - Instance itself
2882 * onresized: function(ctx) {
2883 * ...
2884 * }
2885 */
2886 onresized: undefined,
2887
2888 /**
2889 * Set a callback to execute before the chart is initialized
2890 * @name onbeforeinit
2891 * @memberof Options
2892 * @type {Function}
2893 * @default undefined
2894 * @example
2895 * // @param {Chart} ctx - Instance itself
2896 * onbeforeinit: function(ctx) {
2897 * ...
2898 * }
2899 */
2900 onbeforeinit: undefined,
2901
2902 /**
2903 * Set a callback to execute when the chart is initialized.
2904 * @name oninit
2905 * @memberof Options
2906 * @type {Function}
2907 * @default undefined
2908 * @example
2909 * // @param {Chart} ctx - Instance itself
2910 * oninit: function(ctx) {
2911 * ...
2912 * }
2913 */
2914 oninit: undefined,
2915
2916 /**
2917 * Set a callback to execute after the chart is initialized
2918 * @name onafterinit
2919 * @memberof Options
2920 * @type {Function}
2921 * @default undefined
2922 * @example
2923 * // @param {Chart} ctx - Instance itself
2924 * onafterinit: function(ctx) {
2925 * ...
2926 * }
2927 */
2928 onafterinit: undefined,
2929
2930 /**
2931 * 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.
2932 * @name onrendered
2933 * @memberof Options
2934 * @type {Function}
2935 * @default undefined
2936 * @example
2937 * // @param {Chart} ctx - Instance itself
2938 * onrendered: function(ctx) {
2939 * ...
2940 * }
2941 */
2942 onrendered: undefined,
2943
2944 /**
2945 * Set duration of transition (in milliseconds) for chart animation.<br><br>
2946 * - **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.
2947 * @name transition
2948 * @memberof Options
2949 * @type {Object}
2950 * @property {Number} [transition.duration=350] duration in milliseconds
2951 * @example
2952 * transition: {
2953 * duration: 500
2954 * }
2955 */
2956 transition_duration: 350,
2957
2958 /**
2959 * Specify the key of x values in the data.<br><br>
2960 * We can show the data with non-index x values by this option. This option is required when the type of x axis is timeseries. If this option is set on category axis, the values of the data on the key will be used for category names.
2961 * @name data․x
2962 * @memberof Options
2963 * @type {String}
2964 * @default undefined
2965 * @example
2966 * data: {
2967 * x: "date"
2968 * }
2969 */
2970 data_x: undefined,
2971
2972 /**
2973 * Specify the keys of the x values for each data.<br><br>
2974 * This option can be used if we want to show the data that has different x values.
2975 * @name data․xs
2976 * @memberof Options
2977 * @type {Object}
2978 * @default {}
2979 * @example
2980 * data: {
2981 * xs: {
2982 * data1: "x1",
2983 * data2: "x2"
2984 * }
2985 * }
2986 */
2987 data_xs: {},
2988
2989 /**
2990 * Set a format specifier to parse string specifed as x.
2991 * @name data․xFormat
2992 * @memberof Options
2993 * @type {String}
2994 * @default %Y-%m-%d
2995 * @example
2996 * data: {
2997 * x: "x",
2998 * columns: [
2999 * ["x", "01012019", "02012019", "03012019"],
3000 * ["data1", 30, 200, 100]
3001 * ],
3002 * // Format specifier to parse as datetime for given 'x' string value
3003 * xFormat: "%m%d%Y"
3004 * },
3005 * axis: {
3006 * x: {
3007 * type: "timeseries"
3008 * }
3009 * }
3010 * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format)
3011 */
3012 data_xFormat: "%Y-%m-%d",
3013
3014 /**
3015 * Set localtime format to parse x axis.
3016 * @name data․xLocaltime
3017 * @memberof Options
3018 * @type {Boolean}
3019 * @default true
3020 * @example
3021 * data: {
3022 * xLocaltime: false
3023 * }
3024 */
3025 data_xLocaltime: !0,
3026
3027 /**
3028 * Sort on x axis.
3029 * @name data․xSort
3030 * @memberof Options
3031 * @type {Boolean}
3032 * @default true
3033 * @example
3034 * data: {
3035 * xSort: false
3036 * }
3037 */
3038 data_xSort: !0,
3039
3040 /**
3041 * Converts data id value
3042 * @name data․idConverter
3043 * @memberof Options
3044 * @type {Function}
3045 * @default function(id) { return id; }
3046 * @example
3047 * data: {
3048 * idConverter: function(id) {
3049 * // when id is 'data1', converts to be 'data2'
3050 * // 'data2' should be given as the initial data value
3051 * if (id === "data1") {
3052 * return "data2";
3053 * } else {
3054 * return id;
3055 * }
3056 * }
3057 * }
3058 */
3059 data_idConverter: function data_idConverter(id) {
3060 return id;
3061 },
3062
3063 /**
3064 * Set custom data name.
3065 * @name data․names
3066 * @memberof Options
3067 * @type {Object}
3068 * @default {}
3069 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataName)
3070 * @example
3071 * data: {
3072 * names: {
3073 * data1: "Data Name 1",
3074 * data2: "Data Name 2"
3075 * }
3076 * }
3077 */
3078 data_names: {},
3079
3080 /**
3081 * Set custom data class.<br><br>
3082 * 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).
3083 * @name data․classes
3084 * @memberof Options
3085 * @type {Object}
3086 * @default {}
3087 * @example
3088 * data: {
3089 * classes: {
3090 * data1: "additional-data1-class",
3091 * data2: "additional-data2-class"
3092 * }
3093 * }
3094 */
3095 data_classes: {},
3096
3097 /**
3098 * Set groups for the data for stacking.
3099 * @name data․groups
3100 * @memberof Options
3101 * @type {Array}
3102 * @default []
3103 * @example
3104 * data: {
3105 * groups: [
3106 * ["data1", "data2"],
3107 * ["data3"]
3108 * ]
3109 * }
3110 */
3111 data_groups: [],
3112
3113 /**
3114 * Set y axis the data related to. y and y2 can be used.
3115 * - **NOTE:** If all data is related to one of the axes, the domain of axis without related data will be replaced by the domain from the axis with related data
3116 * @name data․axes
3117 * @memberof Options
3118 * @type {Object}
3119 * @default {}
3120 * @example
3121 * data: {
3122 * axes: {
3123 * data1: "y",
3124 * data2: "y2"
3125 * }
3126 * }
3127 */
3128 data_axes: {},
3129
3130 /**
3131 * Set chart type at once.<br><br>
3132 * If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.<br><br>
3133 * **Available Values:**
3134 * - area
3135 * - area-line-range
3136 * - area-spline
3137 * - area-spline-range
3138 * - area-step
3139 * - bar
3140 * - bubble
3141 * - donut
3142 * - gauge
3143 * - line
3144 * - pie
3145 * - radar
3146 * - scatter
3147 * - spline
3148 * - step
3149 * @name data․type
3150 * @memberof Options
3151 * @type {String}
3152 * @default line
3153 * @example
3154 * data: {
3155 * type: "bar"
3156 * }
3157 */
3158 data_type: undefined,
3159
3160 /**
3161 * Set chart type for each data.<br>
3162 * This setting overwrites data.type setting.
3163 * - **NOTE:** `radar` type can't be combined with other types.
3164 * @name data․types
3165 * @memberof Options
3166 * @type {Object}
3167 * @default {}
3168 * @example
3169 * data: {
3170 * types: {
3171 * data1: "bar",
3172 * data2: "spline"
3173 * }
3174 * }
3175 */
3176 data_types: {},
3177
3178 /**
3179 * Set labels options
3180 * @name data․labels
3181 * @memberof Options
3182 * @type {Object}
3183 * @property {Boolean} [data.labels=false] Show or hide labels on each data points
3184 * @property {Boolean} [data.labels.centered=false] Centerize labels on `bar` shape. (**NOTE:** works only for 'bar' type)
3185 * @property {Function} [data.labels.format] Set formatter function for data labels.<br>
3186 * 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>
3187 * - `v` is the value of the data point where the label is shown.
3188 * - `id` is the id of the data where the label is shown.
3189 * - `i` is the index of the data point where the label is shown.
3190 * - `j` is the sub index of the data point where the label is shown.<br><br>
3191 * Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
3192 * @property {String|Object} [data.labels.colors] Set label text colors.
3193 * @property {Object} [data.labels.position] Set each dataset position, relative the original.
3194 * @property {Number} [data.labels.position.x=0] x coordinate position, relative the original.
3195 * @property {Number} [data.labels.position.y=0] y coordinate position, relative the original.
3196 * @memberof Options
3197 * @type {Object}
3198 * @default {}
3199 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataLabel)
3200 * @see [Demo: label colors](https://naver.github.io/billboard.js/demo/#Data.DataLabelColors)
3201 * @see [Demo: label format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat)
3202 * @see [Demo: label overlap](https://naver.github.io/billboard.js/demo/#Data.DataLabelOverlap)
3203 * @see [Demo: label position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition)
3204 * @example
3205 * data: {
3206 * labels: true,
3207 *
3208 * // or set specific options
3209 * labels: {
3210 * format: function(v, id, i, j) { ... },
3211 *
3212 * // it's possible to set for each data
3213 * format: {
3214 * data1: function(v, id, i, j) { ... },
3215 * ...
3216 * },
3217 *
3218 * // align text to center of the 'bar' shape (works only for 'bar' type)
3219 * centered: true,
3220 *
3221 * // apply for all label texts
3222 * colors: "red",
3223 *
3224 * // or set different colors per dataset
3225 * // for not specified dataset, will have the default color value
3226 * colors: {
3227 * data1: "yellow",
3228 * data3: "green"
3229 * },
3230 *
3231 * // set x, y coordinate position
3232 * position: {
3233 * x: -10,
3234 * y: 10
3235 * },
3236 *
3237 * // or set x, y coordinate position by each dataset
3238 * position: {
3239 * data1: {x: 5, y: 5},
3240 * data2: {x: 10, y: -20}
3241 * }
3242 * }
3243 * }
3244 */
3245 data_labels: {},
3246 data_labels_colors: undefined,
3247 data_labels_position: {},
3248
3249 /**
3250 * This option changes the order of stacking data and pieces of pie/donut.
3251 * - If `null` specified, it will be the order the data loaded.
3252 * - 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>
3253 *
3254 * **Available Values:**
3255 * - `desc`: In descending order
3256 * - `asc`: In ascending order
3257 * - `null`: It keeps the data load order
3258 * - `function(data1, data2) { ... }`: Array.sort compareFunction
3259 * @name data․order
3260 * @memberof Options
3261 * @type {String|Function|null}
3262 * @default desc
3263 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataOrder)
3264 * @example
3265 * data: {
3266 * // in descending order (default)
3267 * order: "desc"
3268 *
3269 * // in ascending order
3270 * order: "asc"
3271 *
3272 * // keeps data input order
3273 * order: null
3274 *
3275 * // specifying sort function
3276 * order: function(a, b) {
3277 * // param data passed format
3278 * {
3279 * id: "data1", id_org: "data1", values: [
3280 * {x: 5, value: 250, id: "data1", index: 5, name: "data1"},
3281 * ...
3282 * ]
3283 * }
3284 * }
3285 * }
3286 */
3287 data_order: "desc",
3288
3289 /**
3290 * Define regions for each data.<br>
3291 * The values must be an array for each data and it should include an object that has `start`, `end` and `style`.
3292 * - The object type should be as:
3293 * - start {Number}: Start data point number. If not set, the start will be the first data point.
3294 * - [end] {Number}: End data point number. If not set, the end will be the last data point.
3295 * - [style.dasharray="2 2"] {Object}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area.
3296 * - **NOTE:** Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.
3297 * @name data․regions
3298 * @memberof Options
3299 * @type {Object}
3300 * @default {}
3301 * @example
3302 * data: {
3303 * regions: {
3304 * data1: [{
3305 * start: 1,
3306 * end: 2,
3307 * style: {
3308 * dasharray: "5 2"
3309 * }
3310 * }, {
3311 * start: 3
3312 * }],
3313 * ...
3314 * }
3315 * }
3316 */
3317 data_regions: {},
3318
3319 /**
3320 * Set color converter function.<br><br>
3321 * 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').
3322 * @name data․color
3323 * @memberof Options
3324 * @type {Function}
3325 * @default undefined
3326 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataColor)
3327 * @example
3328 * data: {
3329 * color: function(color, d) { ... }
3330 * }
3331 */
3332 data_color: undefined,
3333
3334 /**
3335 * Set color for each data.
3336 * @name data․colors
3337 * @memberof Options
3338 * @type {Object}
3339 * @default {}
3340 * @example
3341 * data: {
3342 * colors: {
3343 * data1: "#ff0000",
3344 * data2: function(d) {
3345 * return "#000";
3346 * }
3347 * ...
3348 * }
3349 * }
3350 */
3351 data_colors: {},
3352
3353 /**
3354 * Hide each data when the chart appears.<br><br>
3355 * If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
3356 * @name data․hide
3357 * @memberof Options
3358 * @type {Boolean|Array}
3359 * @default false
3360 * @example
3361 * data: {
3362 * // all of data will be hidden
3363 * hide: true
3364 *
3365 * // specified data will be hidden
3366 * hide: ["data1", ...]
3367 * }
3368 */
3369 data_hide: !1,
3370
3371 /**
3372 * Filter values to be shown
3373 * The data value is the same as the returned by `.data()`.
3374 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
3375 * @name data․filter
3376 * @memberof Options
3377 * @type {Function}
3378 * @default undefined
3379 * @example
3380 * data: {
3381 * // filter for id value
3382 * filter: function(v) {
3383 * // v: [{id: "data1", id_org: "data1", values: [
3384 * // {x: 0, value: 130, id: "data2", index: 0}, ...]
3385 * // }, ...]
3386 * return v.id !== "data1";
3387 * }
3388 */
3389 data_filter: undefined,
3390
3391 /**
3392 * Set the stacking to be normalized
3393 * - **NOTE:**
3394 * - For stacking, '[data.groups](#.data%25E2%2580%25A4groups)' option should be set
3395 * - y Axis will be set in percentage value (0 ~ 100%)
3396 * - Must have postive values
3397 * @name data․stack․normalize
3398 * @memberof Options
3399 * @type {Boolean}
3400 * @default false
3401 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataStackNormalized)
3402 * @example
3403 * data: {
3404 * stack: {
3405 * normalize: true
3406 * }
3407 * }
3408 */
3409 data_stack_normalize: !1,
3410
3411 /**
3412 * Set data selection enabled<br><br>
3413 * 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).
3414 * @name data․selection․enabled
3415 * @memberof Options
3416 * @type {Boolean}
3417 * @default false
3418 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataSelection)
3419 * @example
3420 * data: {
3421 * selection: {
3422 * enabled: true
3423 * }
3424 * }
3425 */
3426 data_selection_enabled: !1,
3427
3428 /**
3429 * Set grouped selection enabled.<br><br>
3430 * If this option set true, multiple data points that have same x value will be selected by one selection.
3431 * @name data․selection․grouped
3432 * @memberof Options
3433 * @type {Boolean}
3434 * @default false
3435 * @example
3436 * data: {
3437 * selection: {
3438 * grouped: true
3439 * }
3440 * }
3441 */
3442 data_selection_grouped: !1,
3443
3444 /**
3445 * Set a callback for each data point to determine if it's selectable or not.<br><br>
3446 * The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
3447 * @name data․selection․isselectable
3448 * @memberof Options
3449 * @type {Function}
3450 * @default function() { return true; }
3451 * @example
3452 * data: {
3453 * selection: {
3454 * isselectable: function(d) { ... }
3455 * }
3456 * }
3457 */
3458 data_selection_isselectable: function data_selection_isselectable() {
3459 return !0;
3460 },
3461
3462 /**
3463 * Set multiple data points selection enabled.<br><br>
3464 * 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 unselected when the new data point is selected.
3465 * @name data․selection․multiple
3466 * @memberof Options
3467 * @type {Boolean}
3468 * @default true
3469 * @example
3470 * data: {
3471 * selection: {
3472 * multiple: false
3473 * }
3474 * }
3475 */
3476 data_selection_multiple: !0,
3477
3478 /**
3479 * Enable to select data points by dragging.
3480 * If this option set true, data points can be selected by dragging.
3481 * - **NOTE:** If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
3482 * @name data․selection․draggable
3483 * @memberof Options
3484 * @type {Boolean}
3485 * @default false
3486 * @example
3487 * data: {
3488 * selection: {
3489 * draggable: true
3490 * }
3491 * }
3492 */
3493 data_selection_draggable: !1,
3494
3495 /**
3496 * Set a callback for click event on each data point.<br><br>
3497 * This callback will be called when each data point clicked and will receive `d` and element as the arguments.
3498 * - `d` is the data clicked and element is the element clicked.
3499 * - `element` is the current interacting svg element.
3500 * - In this callback, `this` will be the Chart object.
3501 * @name data․onclick
3502 * @memberof Options
3503 * @type {Function}
3504 * @default function() {}
3505 * @example
3506 * data: {
3507 * onclick: function(d, element) {
3508 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
3509 * // element - <circle>
3510 * ...
3511 * }
3512 * }
3513 */
3514 data_onclick: function data_onclick() {},
3515
3516 /**
3517 * Set a callback for mouse/touch over event on each data point.<br><br>
3518 * 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.
3519 * - `d` is the data where mouse cursor moves onto.
3520 * - `element` is the current interacting svg element.
3521 * - In this callback, `this` will be the Chart object.
3522 * @name data․onover
3523 * @memberof Options
3524 * @type {Function}
3525 * @default function() {}
3526 * @example
3527 * data: {
3528 * onover: function(d, element) {
3529 * // d - ex) {x: 4, value: 150, id: "data1", index: 4}
3530 * // element - <circle>
3531 * ...
3532 * }
3533 * }
3534 */
3535 data_onover: function data_onover() {},
3536
3537 /**
3538 * Set a callback for mouse/touch out event on each data point.<br><br>
3539 * This callback will be called when mouse cursor or via touch moves out each data point and will receive `d` as the argument.
3540 * - `d` is the data where mouse cursor moves out.
3541 * - `element` is the current interacting svg element.
3542 * - In this callback, `this` will be the Chart object.
3543 * @name data․onout
3544 * @memberof Options
3545 * @type {Function}
3546 * @default function() {}
3547 * @example
3548 * data: {
3549 * onout: function(d, element) {
3550 * // d - ex) {x: 4, value: 150, id: "data1", index: 4}
3551 * // element - <circle>
3552 * ...
3553 * }
3554 * }
3555 */
3556 data_onout: function data_onout() {},
3557
3558 /**
3559 * Set a callback for on data selection.
3560 * @name data․onselected
3561 * @memberof Options
3562 * @type {Function}
3563 * @default function() {}
3564 * @example
3565 * data: {
3566 * onselected: function(d, element) {
3567 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
3568 * // element - <circle>
3569 * ...
3570 * }
3571 * }
3572 */
3573 data_onselected: function data_onselected() {},
3574
3575 /**
3576 * Set a callback for on data un-selection.
3577 * @name data․onunselected
3578 * @memberof Options
3579 * @type {Function}
3580 * @default function() {}
3581 * @example
3582 * data: {
3583 * onunselected: function(d, element) {
3584 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
3585 * // element - <circle>
3586 * ...
3587 * }
3588 * }
3589 */
3590 data_onunselected: function data_onunselected() {},
3591
3592 /**
3593 * Set a callback for minimum data
3594 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
3595 * @name data․onmin
3596 * @memberof Options
3597 * @type {Function}
3598 * @default undefined
3599 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
3600 * @example
3601 * onmin: function(data) {
3602 * // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
3603 * ...
3604 * }
3605 */
3606 data_onmin: undefined,
3607
3608 /**
3609 * Set a callback for maximum data
3610 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
3611 * @name data․onmax
3612 * @memberof Options
3613 * @type {Function}
3614 * @default undefined
3615 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
3616 * @example
3617 * onmax: function(data) {
3618 * // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
3619 * ...
3620 * }
3621 */
3622 data_onmax: undefined,
3623
3624 /**
3625 * 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.
3626 * @name data․url
3627 * @memberof Options
3628 * @type {String}
3629 * @default undefined
3630 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.LoadData)
3631 * @example
3632 * data: {
3633 * url: "/data/test.csv"
3634 * }
3635 */
3636 data_url: undefined,
3637
3638 /**
3639 * XHR header value
3640 * - **NOTE:** Should be used with `data.url` option
3641 * @name data․headers
3642 * @memberof Options
3643 * @type {String}
3644 * @default undefined
3645 * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
3646 * @example
3647 * data: {
3648 * url: "/data/test.csv",
3649 * headers: {
3650 * "Content-Type": "text/xml",
3651 * ...
3652 * }
3653 * }
3654 */
3655 data_headers: undefined,
3656
3657 /**
3658 * Parse a JSON object for data. See also data.keys.
3659 * @name data․json
3660 * @memberof Options
3661 * @type {Object}
3662 * @default undefined
3663 * @see [data․keys](#.data%25E2%2580%25A4keys)
3664 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.JSONData)
3665 * @example
3666 * data: {
3667 * json: [
3668 * {name: "www.site1.com", upload: 200, download: 200, total: 400},
3669 * {name: "www.site2.com", upload: 100, download: 300, total: 400},
3670 * {name: "www.site3.com", upload: 300, download: 200, total: 500},
3671 * {name: "www.site4.com", upload: 400, download: 100, total: 500}
3672 * ],
3673 * keys: {
3674 * // x: "name", // it's possible to specify 'x' when category axis
3675 * value: ["upload", "download"]
3676 * }
3677 * }
3678 */
3679 data_json: undefined,
3680
3681 /**
3682 * Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
3683 * @name data․rows
3684 * @memberof Options
3685 * @type {Array}
3686 * @default undefined
3687 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.RowOrientedData)
3688 * @example
3689 * data: {
3690 * rows: [
3691 * ["A", "B", "C"],
3692 * [90, 120, 300],
3693 * [40, 160, 240],
3694 * [50, 200, 290],
3695 * [120, 160, 230],
3696 * [80, 130, 300],
3697 * [90, 220, 320]
3698 * ]
3699 * }
3700 *
3701 * // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
3702 * // - an array of [high, mid, low] data following the order
3703 * // - or an object with 'high', 'mid' and 'low' key value
3704 * data: {
3705 * rows: [
3706 * ["data1", "data2"],
3707 * [
3708 * // or {high:150, mid: 140, low: 110}, 120
3709 * [150, 140, 110], 120
3710 * ],
3711 * [[155, 130, 115], 55],
3712 * [[160, 135, 120], 60]
3713 * ],
3714 * types: {
3715 * data1: "area-line-range",
3716 * data2: "line"
3717 * }
3718 * }
3719 *
3720 * // for 'bubble' type, data can contain dimension value:
3721 * // - an array of [y, z] data following the order
3722 * // - or an object with 'y' and 'z' key value
3723 * // 'y' is for y axis coordination and 'z' is the bubble radius value
3724 * data: {
3725 * rows: [
3726 * ["data1", "data2"],
3727 * [
3728 * // or {y:10, z: 140}, 120
3729 * [10, 140], 120
3730 * ],
3731 * [[100, 30], 55],
3732 * [[50, 100], 60]
3733 * ],
3734 * types: {
3735 * data1: "bubble",
3736 * data2: "line"
3737 * }
3738 * }
3739 */
3740 data_rows: undefined,
3741
3742 /**
3743 * Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
3744 * @name data․columns
3745 * @memberof Options
3746 * @type {Array}
3747 * @default undefined
3748 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.ColumnOrientedData)
3749 * @example
3750 * data: {
3751 * columns: [
3752 * ["data1", 30, 20, 50, 40, 60, 50],
3753 * ["data2", 200, 130, 90, 240, 130, 220],
3754 * ["data3", 300, 200, 160, 400, 250, 250]
3755 * ]
3756 * }
3757 *
3758 * // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
3759 * // - an array of [high, mid, low] data following the order
3760 * // - or an object with 'high', 'mid' and 'low' key value
3761 * data: {
3762 * columns: [
3763 * ["data1",
3764 * [150, 140, 110], // or {high:150, mid: 140, low: 110}
3765 * [150, 140, 110],
3766 * [150, 140, 110]
3767 * ]
3768 * ],
3769 * type: "area-line-range"
3770 * }
3771 *
3772 * // for 'bubble' type, data can contain dimension value:
3773 * // - an array of [y, z] data following the order
3774 * // - or an object with 'y' and 'z' key value
3775 * // 'y' is for y axis coordination and 'z' is the bubble radius value
3776 * data: {
3777 * columns: [
3778 * ["data1",
3779 * [10, 140], // or {y:10, z: 140}
3780 * [100, 30],
3781 * [50, 100]
3782 * ]
3783 * ],
3784 * type: "bubble"
3785 * }
3786 */
3787 data_columns: undefined,
3788
3789 /**
3790 * Used if loading JSON via data.url.
3791 * - **Available Values:**
3792 * - json
3793 * - csv
3794 * - tsv
3795 * @name data․mimeType
3796 * @memberof Options
3797 * @type {String}
3798 * @default csv
3799 * @example
3800 * data: {
3801 * mimeType: "json"
3802 * }
3803 */
3804 data_mimeType: "csv",
3805
3806 /**
3807 * Choose which JSON object keys correspond to desired data.
3808 * - **NOTE:** Only for JSON object given as array.
3809 * @name data․keys
3810 * @memberof Options
3811 * @type {String}
3812 * @default undefined
3813 * @example
3814 * data: {
3815 * json: [
3816 * {name: "www.site1.com", upload: 200, download: 200, total: 400},
3817 * {name: "www.site2.com", upload: 100, download: 300, total: 400},
3818 * {name: "www.site3.com", upload: 300, download: 200, total: 500},
3819 * {name: "www.site4.com", upload: 400, download: 100, total: 500}
3820 * ],
3821 * keys: {
3822 * // x: "name", // it's possible to specify 'x' when category axis
3823 * value: ["upload", "download"]
3824 * }
3825 * }
3826 */
3827 data_keys: undefined,
3828
3829 /**
3830 * Set text label to be displayed when there's no data to show.
3831 * - ex. Toggling all visible data to not be shown, unloading all current data, etc.
3832 * @name data․empty․label․text
3833 * @memberof Options
3834 * @type {String}
3835 * @default ""
3836 * @example
3837 * data: {
3838 * empty: {
3839 * label: {
3840 * text: "No Data"
3841 * }
3842 * }
3843 * }
3844 */
3845 data_empty_label_text: "",
3846
3847 /**
3848 * Set subchart options
3849 * @name subchart
3850 * @memberof Options
3851 * @type {Object}
3852 * @property {Boolean} [subchart.show=false] Show sub chart on the bottom of the chart.
3853 * @property {Boolean} [subchart.axis.x.show=true] Show or hide x axis.
3854 * @property {Boolean} [subchart.axis.x.tick.show=true] Show or hide x axis tick line.
3855 * @property {Boolean} [subchart.axis.x.tick.text.show=true] Show or hide x axis tick text.
3856 * @property {Number} [subchart.size.height] Change the height of the subchart.
3857 * @property {Function} [subchart.onbrush] Set callback for brush event.<br>
3858 * Specified function receives the current zoomed x domain.
3859 * @see [Demo](https://naver.github.io/billboard.js/demo/#Interaction.SubChart)
3860 * @example
3861 * subchart: {
3862 * axis: {
3863 * x: {
3864 * show: true,
3865 * tick: {
3866 * show: true,
3867 * text: {
3868 * show: false
3869 * }
3870 * }
3871 * }
3872 * },
3873 * show: true,
3874 * size: {
3875 * height: 20
3876 * },
3877 * onbrush: function(domain) { ... }
3878 * }
3879 */
3880 subchart_show: !1,
3881 subchart_size_height: 60,
3882 subchart_axis_x_show: !0,
3883 subchart_axis_x_tick_show: !0,
3884 subchart_axis_x_tick_text_show: !0,
3885 subchart_onbrush: function subchart_onbrush() {},
3886
3887 /**
3888 * Set color of the data values
3889 * @name color
3890 * @memberof Options
3891 * @type {Object}
3892 * @property {String|Object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.
3893 * @property {Array} [color.pattern=[]] custom color pattern
3894 * @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).
3895 * - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>
3896 * ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>
3897 * - `bb-colorize-pattern-red`
3898 * - `bb-colorize-pattern-fff`
3899 * @property {Object} [color.threshold] color threshold for gauge and tooltip color
3900 * @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.
3901 * @property {Array} [color.threshold.values] Threshold values for each steps
3902 * @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`.
3903 * @example
3904 * color: {
3905 * pattern: ["#1f77b4", "#aec7e8", ...],
3906 *
3907 * // Set colors' patterns
3908 * // it should return an array of SVGPatternElement
3909 * tiles: function() {
3910 * var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
3911 * var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
3912 * var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
3913 *
3914 * pattern.setAttribute("patternUnits", "userSpaceOnUse");
3915 * pattern.setAttribute("width", "32");
3916 * pattern.setAttribute("height", "32");
3917 *
3918 * g.style.fill = "#000";
3919 * g.style.opacity = "0.2";
3920 *
3921 * circle1.setAttribute("cx", "3");
3922 * circle1.setAttribute("cy", "3");
3923 * circle1.setAttribute("r", "3");
3924 *
3925 * g.appendChild(circle1);
3926 * pattern.appendChild(g);
3927 *
3928 * return [pattern];
3929 * },
3930 *
3931 * // for threshold usage, pattern values should be set for each steps
3932 * pattern: ["grey", "green", "yellow", "orange", "red"],
3933 * threshold: {
3934 * unit: "value",
3935 *
3936 * // when value is 20 => 'green', value is 40 => 'orange' will be set.
3937 * values: [10, 20, 30, 40, 50],
3938 *
3939 * // the equation for max:
3940 * // - unit == 'value': max => 30
3941 * // - unit != 'value': max => value*100/30
3942 * max: 30
3943 * },
3944 *
3945 * // set all data to 'red'
3946 * onover: "red",
3947 *
3948 * // set different color for data
3949 * onover: {
3950 * data1: "red",
3951 * data2: "yellow"
3952 * },
3953 *
3954 * // will pass data object to the callback
3955 * onover: function(d) {
3956 * return d.id === "data1" ? "red" : "green";
3957 * }
3958 * }
3959 */
3960 color_pattern: [],
3961 color_tiles: undefined,
3962 color_threshold: {},
3963 color_onover: undefined,
3964
3965 /**
3966 * Legend options
3967 * @name legend
3968 * @memberof Options
3969 * @type {Object}
3970 * @property {Boolean} [legend.show=true] Show or hide legend.
3971 * @property {Boolean} [legend.hide=false] Hide legend
3972 * If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
3973 * @property {String|HTMLElement} [legend.contents.bindto=undefined] Set CSS selector or element reference to bind legend items.
3974 * @property {String|Function} [legend.contents.template=undefined] Set item's template.<br>
3975 * - If set `string` value, within template the 'color' and 'title' can be replaced using template-like syntax string:
3976 * - {=COLOR}: data color value
3977 * - {=TITLE}: data title value
3978 * - If set `function` value, will pass following arguments to the given function:
3979 * - title {String}: data's id value
3980 * - color {String}: color string
3981 * - data {Array}: data array
3982 * @property {String} [legend.position=bottom] Change the position of legend.<br>
3983 * Available values are: `bottom`, `right` and `inset` are supported.
3984 * @property {Object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br>
3985 * This option accepts object that has the keys `anchor`, `x`, `y` and `step`.
3986 * - **anchor** decides the position of the legend:
3987 * - top-left
3988 * - top-right
3989 * - bottom-left
3990 * - bottom-right
3991 * - **x** and **y**:
3992 * - set the position of the legend based on the anchor.
3993 * - **step**:
3994 * - defines the max step the legend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
3995 * @property {Boolean} [legend.equally=false] Set to all items have same width size.
3996 * @property {Boolean} [legend.padding=0] Set padding value
3997 * @property {Function} [legend.item.onclick=undefined] Set click event handler to the legend item.
3998 * @property {Function} [legend.item.onover=undefined] Set mouse/touch over event handler to the legend item.
3999 * @property {Function} [legend.item.onout=undefined] Set mouse/touch out event handler to the legend item.
4000 * @property {Number} [legend.item.tile.width=10] Set width of item tile element
4001 * @property {Number} [legend.item.tile.height=10] Set height of item tile element
4002 * @property {Boolean} [legend.usePoint=false] Whether to use custom points in legend.
4003 * @see [Demo: position](https://naver.github.io/billboard.js/demo/#Legend.LegendPosition)
4004 * @see [Demo: contents.template](https://naver.github.io/billboard.js/demo/#Legend.LegendTemplate1)
4005 * @see [Demo: usePoint](https://naver.github.io/billboard.js/demo/#Legend.usePoint)
4006 * @example
4007 * legend: {
4008 * show: true,
4009 * hide: true,
4010 * //or hide: "data1"
4011 * //or hide: ["data1", "data2"]
4012 * contents: {
4013 * bindto: "#legend", // <ul id='legend'></ul>
4014 *
4015 * // will be as: <li style='background-color:#1f77b4'>data1</li>
4016 * template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
4017 *
4018 * // or using function
4019 * template: function(id, color, data) {
4020 * // if you want omit some legend, return falsy value
4021 * if (title !== "data1") {
4022 * return "<li style='background-color:"+ color +">"+ title +"</li>";
4023 * }
4024 * }
4025 * },
4026 * position: "bottom", // bottom, right, inset
4027 * inset: {
4028 * anchor: "top-right" // top-left, top-right, bottom-left, bottom-right
4029 * x: 20,
4030 * y: 10,
4031 * step: 2
4032 * },
4033 * equally: false,
4034 * padding: 10,
4035 * item: {
4036 * onclick: function(id) { ... },
4037 * onover: function(id) { ... },
4038 * onout: function(id) { ... },
4039 *
4040 * // set tile's size
4041 * tile: {
4042 * width: 20,
4043 * height: 15
4044 * }
4045 * },
4046 * usePoint: true
4047 * }
4048 */
4049 legend_show: !0,
4050 legend_hide: !1,
4051 legend_contents_bindto: undefined,
4052 legend_contents_template: undefined,
4053 legend_position: "bottom",
4054 legend_inset_anchor: "top-left",
4055 legend_inset_x: 10,
4056 legend_inset_y: 0,
4057 legend_inset_step: undefined,
4058 legend_item_onclick: undefined,
4059 legend_item_onover: undefined,
4060 legend_item_onout: undefined,
4061 legend_equally: !1,
4062 legend_padding: 0,
4063 legend_item_tile_width: 10,
4064 legend_item_tile_height: 10,
4065 legend_usePoint: !1,
4066
4067 /**
4068 * Switch x and y axis position.
4069 * @name axis․rotated
4070 * @memberof Options
4071 * @type {Boolean}
4072 * @default false
4073 * @example
4074 * axis: {
4075 * rotated: true
4076 * }
4077 */
4078 axis_rotated: !1,
4079
4080 /**
4081 * Set clip-path attribute for x axis element
4082 * @name axis․x․clipPath
4083 * @memberof Options
4084 * @type {Boolean}
4085 * @default true
4086 * @see [Demo]()
4087 * @example
4088 * // don't set 'clip-path' attribute
4089 * clipPath: false
4090 */
4091 axis_x_clipPath: !0,
4092
4093 /**
4094 * Show or hide x axis.
4095 * @name axis․x․show
4096 * @memberof Options
4097 * @type {Boolean}
4098 * @default true
4099 * @example
4100 * axis: {
4101 * x: {
4102 * show: false
4103 * }
4104 * }
4105 */
4106 axis_x_show: !0,
4107
4108 /**
4109 * Set type of x axis.<br><br>
4110 * **Available Values:**
4111 * - timeseries
4112 * - category
4113 * - indexed
4114 * @name axis․x․type
4115 * @memberof Options
4116 * @type {String}
4117 * @default indexed
4118 * @see [Demo: indexed](https://naver.github.io/billboard.js/demo/#Chart.AreaChart)
4119 * @see [Demo: timeseries](https://naver.github.io/billboard.js/demo/#Chart.TimeseriesChart)
4120 * @see [Demo: category](https://naver.github.io/billboard.js/demo/#Data.CategoryData)
4121 * @example
4122 * axis: {
4123 * x: {
4124 * type: "timeseries"
4125 * }
4126 * }
4127 */
4128 axis_x_type: "indexed",
4129
4130 /**
4131 * Set how to treat the timezone of x values.<br>
4132 * If true, treat x value as localtime. If false, convert to UTC internally.
4133 * @name axis․x․localtime
4134 * @memberof Options
4135 * @type {Boolean}
4136 * @default true
4137 * @example
4138 * axis: {
4139 * x: {
4140 * localtime: false
4141 * }
4142 * }
4143 */
4144 axis_x_localtime: !0,
4145
4146 /**
4147 * Set category names on category axis.
4148 * This must be an array that includes category names in string. If category names are included in the date by data.x option, this is not required.
4149 * @name axis․x․categories
4150 * @memberof Options
4151 * @type {Array}
4152 * @default []
4153 * @example
4154 * axis: {
4155 * x: {
4156 * categories: ["Category 1", "Category 2", ...]
4157 * }
4158 * }
4159 */
4160 axis_x_categories: [],
4161
4162 /**
4163 * centerize ticks on category axis.
4164 * @name axis․x․tick․centered
4165 * @memberof Options
4166 * @type {Boolean}
4167 * @default false
4168 * @example
4169 * axis: {
4170 * x: {
4171 * tick: {
4172 * centered: true
4173 * }
4174 * }
4175 * }
4176 */
4177 axis_x_tick_centered: !1,
4178
4179 /**
4180 * A function to format tick value. Format string is also available for timeseries data.
4181 * @name axis․x․tick․format
4182 * @memberof Options
4183 * @type {Function|String}
4184 * @default undefined
4185 * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format)
4186 * @example
4187 * axis: {
4188 * x: {
4189 * tick: {
4190 * // for timeseries, a 'datetime' object is given as parameter
4191 * format: function(x) {
4192 * return x.getFullYear();
4193 * }
4194 *
4195 * // for category, index(Number) and categoryName(String) are given as parameter
4196 * format: function(index, categoryName) {
4197 * return categoryName.substr(0, 10);
4198 * },
4199 *
4200 * // for timeseries format specifier
4201 * format: "%Y-%m-%d %H:%M:%S"
4202 * }
4203 * }
4204 * }
4205 */
4206 axis_x_tick_format: undefined,
4207
4208 /**
4209 * Setting for culling ticks.<br><br>
4210 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
4211 * We can change the number of ticks to be shown by axis.x.tick.culling.max.
4212 * @name axis․x․tick․culling
4213 * @memberof Options
4214 * @type {Boolean}
4215 * @default
4216 * - true for indexed axis and timeseries axis
4217 * - false for category axis
4218 * @example
4219 * axis: {
4220 * x: {
4221 * tick: {
4222 * culling: false
4223 * }
4224 * }
4225 * }
4226 */
4227 axis_x_tick_culling: {},
4228
4229 /**
4230 * The number of tick texts will be adjusted to less than this value.
4231 * @name axis․x․tick․culling․max
4232 * @memberof Options
4233 * @type {Number}
4234 * @default 10
4235 * @example
4236 * axis: {
4237 * x: {
4238 * tick: {
4239 * culling: {
4240 * max: 5
4241 * }
4242 * }
4243 * }
4244 * }
4245 */
4246 axis_x_tick_culling_max: 10,
4247
4248 /**
4249 * The number of x axis ticks to show.<br><br>
4250 * This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).
4251 * @name axis․x․tick․count
4252 * @memberof Options
4253 * @type {Number}
4254 * @default undefined
4255 * @example
4256 * axis: {
4257 * x: {
4258 * tick: {
4259 * count: 5
4260 * }
4261 * }
4262 * }
4263 */
4264 axis_x_tick_count: undefined,
4265
4266 /**
4267 * Show or hide x axis tick line.
4268 * @name axis․x․tick․show
4269 * @memberof Options
4270 * @type {Boolean}
4271 * @default true
4272 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
4273 * @example
4274 * axis: {
4275 * x: {
4276 * tick: {
4277 * show: false
4278 * }
4279 * }
4280 * }
4281 */
4282 axis_x_tick_show: !0,
4283
4284 /**
4285 * Show or hide x axis tick text.
4286 * @name axis․x․tick․text․show
4287 * @memberof Options
4288 * @type {Boolean}
4289 * @default true
4290 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
4291 * @example
4292 * axis: {
4293 * x: {
4294 * tick: {
4295 * text: {
4296 * show: false
4297 * }
4298 * }
4299 * }
4300 * }
4301 */
4302 axis_x_tick_text_show: !0,
4303
4304 /**
4305 * Set the x Axis tick text's position relatively its original position
4306 * @name axis․x․tick․text․position
4307 * @memberof Options
4308 * @type {Object}
4309 * @default {x: 0, y:0}
4310 * @example
4311 * axis: {
4312 * x: {
4313 * tick: {
4314 * text: {
4315 * position: {
4316 * x: 10,
4317 * y: 10
4318 * }
4319 * }
4320 * }
4321 * }
4322 * }
4323 */
4324 axis_x_tick_text_position: {
4325 x: 0,
4326 y: 0
4327 },
4328
4329 /**
4330 * Fit x axis ticks.
4331 * - **true**: ticks will be positioned nicely to have same intervals.
4332 * - **false**: ticks will be positioned according to x value of the data points.
4333 * @name axis․x․tick․fit
4334 * @memberof Options
4335 * @type {Boolean}
4336 * @default true
4337 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickFitting)
4338 * @see [Demo: for timeseries zoom](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickTimeseries)
4339 * @example
4340 * axis: {
4341 * x: {
4342 * tick: {
4343 * fit: false
4344 * }
4345 * }
4346 * }
4347 */
4348 axis_x_tick_fit: !0,
4349
4350 /**
4351 * Set the x values of ticks manually.<br><br>
4352 * If this option is provided, the position of the ticks will be determined based on those values.<br>
4353 * This option works with `timeseries` data and the x values will be parsed accoding to the type of the value and data.xFormat option.
4354 * @name axis․x․tick․values
4355 * @memberof Options
4356 * @type {Array|Function}
4357 * @default null
4358 * @example
4359 * axis: {
4360 * x: {
4361 * tick: {
4362 * values: [1, 2, 4, 8, 16, 32, ...],
4363 *
4364 * // an Array value should be returned
4365 * values: function() {
4366 * return [ ... ];
4367 * }
4368 * }
4369 * }
4370 * }
4371 */
4372 axis_x_tick_values: null,
4373
4374 /**
4375 * Rotate x axis tick text if there is not enough space for 'category' and 'timeseries' type axis.
4376 * - **NOTE:** The conditions where `autorotate` is enabled are:
4377 * - axis.x.type='category' or 'timeseries
4378 * - axis.x.tick.multiline=false
4379 * - axis.x.tick.culling=false
4380 * - axis.x.tick.fit=true
4381 * @name axis․x․tick․autorotate
4382 * @memberof Options
4383 * @type {Boolean}
4384 * @default false
4385 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickAutorotate)
4386 * @example
4387 * axis: {
4388 * x: {
4389 * tick: {
4390 * rotate: 15,
4391 * autorotate: true,
4392 * multiline: false,
4393 * culling: false,
4394 * fit: true
4395 * }
4396 * }
4397 * }
4398 */
4399 axis_x_tick_autorotate: !1,
4400
4401 /**
4402 * Rotate x axis tick text.
4403 * - If you set negative value, it will rotate to opposite direction.
4404 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `false`.
4405 * - As long as `axis_x_tick_fit` is set to `true` it will calculate an overflow for the y2 axis and add this value to the right padding.
4406 * @name axis․x․tick․rotate
4407 * @memberof Options
4408 * @type {Number}
4409 * @default 0
4410 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.RotateXAxisTickText)
4411 * @example
4412 * axis: {
4413 * x: {
4414 * tick: {
4415 * rotate: 60
4416 * }
4417 * }
4418 * }
4419 */
4420 axis_x_tick_rotate: 0,
4421
4422 /**
4423 * Show x axis outer tick.
4424 * @name axis․x․tick․outer
4425 * @memberof Options
4426 * @type {Boolean}
4427 * @default true
4428 * @example
4429 * axis: {
4430 * x: {
4431 * tick: {
4432 * outer: false
4433 * }
4434 * }
4435 * }
4436 */
4437 axis_x_tick_outer: !0,
4438
4439 /**
4440 * Set tick text to be multiline
4441 * - **NOTE:**
4442 * > When x tick text contains `\n`, it's used as line break and 'axis.x.tick.width' option is ignored.
4443 * @name axis․x․tick․multiline
4444 * @memberof Options
4445 * @type {Boolean}
4446 * @default true
4447 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickMultiline)
4448 * @example
4449 * axis: {
4450 * x: {
4451 * tick: {
4452 * multiline: false
4453 * }
4454 * }
4455 * }
4456 * @example
4457 * // example of line break with '\n'
4458 * // In this case, 'axis.x.tick.width' is ignored
4459 * data: {
4460 * x: "x",
4461 * columns: [
4462 * ["x", "long\ntext", "Another\nLong\nText"],
4463 * ...
4464 * ],
4465 * }
4466 */
4467 axis_x_tick_multiline: !0,
4468
4469 /**
4470 * Set tick width
4471 * - **NOTE:**
4472 * > When x tick text contains `\n`, this option is ignored.
4473 * @name axis․x․tick․width
4474 * @memberof Options
4475 * @type {Number}
4476 * @default null
4477 * @example
4478 * axis: {
4479 * x: {
4480 * tick: {
4481 * width: 50
4482 * }
4483 * }
4484 * }
4485 */
4486 axis_x_tick_width: null,
4487
4488 /**
4489 * Set to display system tooltip(via 'title' attribute) for tick text
4490 * - **NOTE:** Only available for category axis type (`axis.x.type='category'`)
4491 * @name axis․x․tick․tooltip
4492 * @memberof Options
4493 * @type {Boolean}
4494 * @default false
4495 * @example
4496 * axis: {
4497 * x: {
4498 * tick: {
4499 * tooltip: true
4500 * }
4501 * }
4502 * }
4503 */
4504 axis_x_tick_tooltip: !1,
4505
4506 /**
4507 * Set max value of x axis range.
4508 * @name axis․x․max
4509 * @memberof Options
4510 * @property {Number} max Set the max value
4511 * @property {Boolean} [max.fit=false] When specified `max.value` is greater than the bound data value, setting `true` will make x axis max to be fitted to the bound data max value.
4512 * - **NOTE:** If the bound data max value is greater than the `max.value`, the x axis max will be limited as the given `max.value`.
4513 * @property {Number} [max.value] Set the max value
4514 * @example
4515 * axis: {
4516 * x: {
4517 * max: 100,
4518 *
4519 * max: {
4520 * // 'fit=true' will make x axis max to be limited as the bound data value max when 'max.value' is greater.
4521 * // - when bound data max is '10' and max.value: '100' ==> x axis max will be '10'
4522 * // - when bound data max is '1000' and max.value: '100' ==> x axis max will be '100'
4523 * fit: true,
4524 * value: 100
4525 * }
4526 * }
4527 * }
4528 */
4529 axis_x_max: undefined,
4530
4531 /**
4532 * Set min value of x axis range.
4533 * @name axis․x․min
4534 * @memberof Options
4535 * @property {Number} min Set the min value
4536 * @property {Boolean} [min.fit=false] When specified `min.value` is lower than the bound data value, setting `true` will make x axis min to be fitted to the bound data min value.
4537 * - **NOTE:** If the bound data min value is lower than the `min.value`, the x axis min will be limited as the given `min.value`.
4538 * @property {Number} [min.value] Set the min value
4539 * @example
4540 * axis: {
4541 * x: {
4542 * min: -100,
4543 *
4544 * min: {
4545 * // 'fit=true' will make x axis min to be limited as the bound data value min when 'min.value' is lower.
4546 * // - when bound data min is '-10' and min.value: '-100' ==> x axis min will be '-10'
4547 * // - when bound data min is '-1000' and min.value: '-100' ==> x axis min will be '-100'
4548 * fit: true,
4549 * value: -100
4550 * }
4551 * }
4552 * }
4553 */
4554 axis_x_min: undefined,
4555
4556 /**
4557 * Set padding for x axis.<br><br>
4558 * If this option is set, the range of x axis will increase/decrease according to the values.
4559 * If no padding is needed in the rage of x axis, 0 should be set.
4560 * - **NOTE:**
4561 * The padding values aren't based on pixels. It differs according axis types<br>
4562 * - **category:** The unit of tick value
4563 * ex. the given value `1`, is same as the width of 1 tick width
4564 * - **timeseries:** Numeric time value
4565 * ex. the given value `1000*60*60*24`, which is numeric time equivalent of a day, is same as the width of 1 tick width
4566 * @name axis․x․padding
4567 * @memberof Options
4568 * @type {Object|Number}
4569 * @default {}
4570 * @example
4571 * axis: {
4572 * x: {
4573 * padding: {
4574 * // when axis type is 'category'
4575 * left: 1, // set left padding width of equivalent value of a tick's width
4576 * right: 0.5 // set right padding width as half of equivalent value of tick's width
4577 *
4578 * // when axis type is 'timeseries'
4579 * left: 1000*60*60*24, // set left padding width of equivalent value of a day tick's width
4580 * right: 1000*60*60*12 // set right padding width as half of equivalent value of a day tick's width
4581 * },
4582 *
4583 * // or set both values at once.
4584 * padding: 10
4585 * }
4586 * }
4587 */
4588 axis_x_padding: {},
4589
4590 /**
4591 * Set height of x axis.<br><br>
4592 * The height of x axis can be set manually by this option. If you need more space for x axis, please use this option for that. The unit is pixel.
4593 * @name axis․x․height
4594 * @memberof Options
4595 * @type {Number}
4596 * @default undefined
4597 * @example
4598 * axis: {
4599 * x: {
4600 * height: 20
4601 * }
4602 * }
4603 */
4604 axis_x_height: undefined,
4605
4606 /**
4607 * Set default extent for subchart and zoom. This can be an array or function that returns an array.
4608 * @name axis․x․extent
4609 * @memberof Options
4610 * @type {Array|Function}
4611 * @default undefined
4612 * @example
4613 * axis: {
4614 * x: {
4615 * // extent range as a pixel value
4616 * extent: [0, 200],
4617 *
4618 * // when axis is 'timeseries', parsable datetime string
4619 * extent: ["2019-03-01", "2019-03-05"],
4620 *
4621 * // return extent value
4622 * extent: function(domain, scale) {
4623 * var extent = domain.map(function(v) {
4624 * return scale(v);
4625 * });
4626 *
4627 * // it should return a format of array
4628 * // ex) [0, 584]
4629 * return extent;
4630 * }
4631 * }
4632 * }
4633 */
4634 axis_x_extent: undefined,
4635
4636 /**
4637 * Set label on x axis.<br><br>
4638 * You can set x axis label and change its position by this option.
4639 * `string` and `object` can be passed and we can change the poisiton by passing object that has position key.<br>
4640 * Available position differs according to the axis direction (vertical or horizontal).
4641 * If string set, the position will be the default.
4642 *
4643 * - **If it's horizontal axis:**
4644 * - inner-right [default]
4645 * - inner-center
4646 * - inner-left
4647 * - outer-right
4648 * - outer-center
4649 * - outer-left
4650 * - **If it's vertical axis:**
4651 * - inner-top [default]
4652 * - inner-middle
4653 * - inner-bottom
4654 * - outer-top
4655 * - outer-middle
4656 * - outer-bottom
4657 * @name axis․x․label
4658 * @memberof Options
4659 * @type {String|Object}
4660 * @default undefined
4661 * @example
4662 * axis: {
4663 * x: {
4664 * label: "Your X Axis"
4665 * }
4666 * }
4667 *
4668 * axis: {
4669 * x: {
4670 * label: {
4671 * text: "Your X Axis",
4672 * position: "outer-center"
4673 * }
4674 * }
4675 * }
4676 */
4677 axis_x_label: {},
4678
4679 /**
4680 * Set additional axes for x Axis.
4681 * - **NOTE:** Axis' scale is based on x Axis value if domain option isn't set.
4682 *
4683 * Each axis object should consist with following options:
4684 *
4685 * | Name | Type | Default | Description |
4686 * | --- | --- | --- | --- |
4687 * | domain | Array | - | Set the domain value |
4688 * | tick.outer | Boolean | true | Show outer tick |
4689 * | tick.format | Function | - | Set formatter for tick text |
4690 * | tick.count | Number | - | Set the number of y axis ticks |
4691 * | tick.values | Array | - | Set tick values manually |
4692 * @name axis․x․axes
4693 * @memberof Options
4694 * @type {Array}
4695 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes)
4696 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain)
4697 * @example
4698 * x: {
4699 * axes: [
4700 * {
4701 * // if set, will not be correlated with the main x Axis domain value
4702 * domain: [0, 1000],
4703 * tick: {
4704 * outer: false,
4705 * format: function(x) {
4706 * return x + "%";
4707 * },
4708 * count: 2,
4709 * values: [10, 20, 30]
4710 * }
4711 * },
4712 * ...
4713 * ]
4714 * }
4715 */
4716 axis_x_axes: [],
4717
4718 /**
4719 * Set clip-path attribute for y axis element
4720 * - **NOTE**: `clip-path` attribute for y Axis is set only when `axis.y.inner` option is true.
4721 * @name axis․y․clipPath
4722 * @memberof Options
4723 * @type {Boolean}
4724 * @default true
4725 * @example
4726 * // don't set 'clip-path' attribute
4727 * clipPath: false
4728 */
4729 axis_y_clipPath: !0,
4730
4731 /**
4732 * Show or hide y axis.
4733 * @name axis․y․show
4734 * @memberof Options
4735 * @type {Boolean}
4736 * @default true
4737 * @example
4738 * axis: {
4739 * y: {
4740 * show: false
4741 * }
4742 * }
4743 */
4744 axis_y_show: !0,
4745
4746 /**
4747 * Set type of y axis.<br><br>
4748 * **Available Values:**
4749 * - timeseries
4750 * - category
4751 * - indexed
4752 * @name axis․y․type
4753 * @memberof Options
4754 * @type {String}
4755 * @default undefined
4756 * @example
4757 * axis: {
4758 * y: {
4759 * type: "timeseries"
4760 * }
4761 * }
4762 */
4763 axis_y_type: undefined,
4764
4765 /**
4766 * Set max value of y axis.
4767 * - **NOTE:** Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
4768 * @name axis․y․max
4769 * @memberof Options
4770 * @type {Number}
4771 * @default undefined
4772 * @example
4773 * axis: {
4774 * y: {
4775 * max: 1000
4776 * }
4777 * }
4778 */
4779 axis_y_max: undefined,
4780
4781 /**
4782 * Set min value of y axis.
4783 * - **NOTE:**
4784 * Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
4785 * @name axis․y․min
4786 * @memberof Options
4787 * @type {Number}
4788 * @default undefined
4789 * @example
4790 * axis: {
4791 * y: {
4792 * min: 1000
4793 * }
4794 * }
4795 */
4796 axis_y_min: undefined,
4797
4798 /**
4799 * Change the direction of y axis.<br><br>
4800 * If true set, the direction will be from the top to the bottom.
4801 * @name axis․y․inverted
4802 * @memberof Options
4803 * @type {Boolean}
4804 * @default false
4805 * @example
4806 * axis: {
4807 * y: {
4808 * inverted: true
4809 * }
4810 * }
4811 */
4812 axis_y_inverted: !1,
4813
4814 /**
4815 * Set center value of y axis.
4816 * @name axis․y․center
4817 * @memberof Options
4818 * @type {Number}
4819 * @default undefined
4820 * @example
4821 * axis: {
4822 * y: {
4823 * center: 0
4824 * }
4825 * }
4826 */
4827 axis_y_center: undefined,
4828
4829 /**
4830 * Show y axis inside of the chart.
4831 * @name axis․y․inner
4832 * @memberof Options
4833 * @type {Boolean}
4834 * @default false
4835 * @example
4836 * axis: {
4837 * y: {
4838 * inner: true
4839 * }
4840 * }
4841 */
4842 axis_y_inner: !1,
4843
4844 /**
4845 * Set label on y axis.<br><br>
4846 * You can set y axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
4847 * @name axis․y․label
4848 * @memberof Options
4849 * @type {String|Object}
4850 * @default {}
4851 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
4852 * @example
4853 * axis: {
4854 * y: {
4855 * label: "Your Y Axis"
4856 * }
4857 * }
4858 *
4859 * axis: {
4860 * y: {
4861 * label: {
4862 * text: "Your Y Axis",
4863 * position: "outer-middle"
4864 * }
4865 * }
4866 * }
4867 */
4868 axis_y_label: {},
4869
4870 /**
4871 * Set formatter for y axis tick text.<br><br>
4872 * This option accepts d3.format object as well as a function you define.
4873 * @name axis․y․tick․format
4874 * @memberof Options
4875 * @type {Function}
4876 * @default undefined
4877 * @example
4878 * axis: {
4879 * y: {
4880 * tick: {
4881 * format: function(x) {
4882 * return x.getFullYear();
4883 * }
4884 * }
4885 * }
4886 * }
4887 */
4888 axis_y_tick_format: undefined,
4889
4890 /**
4891 * Setting for culling ticks.<br><br>
4892 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
4893 * We can change the number of ticks to be shown by axis.y.tick.culling.max.
4894 * @name axis․y․tick․culling
4895 * @memberof Options
4896 * @type {Boolean}
4897 * @default false
4898 * @example
4899 * axis: {
4900 * y: {
4901 * tick: {
4902 * culling: false
4903 * }
4904 * }
4905 * }
4906 */
4907 axis_y_tick_culling: !1,
4908
4909 /**
4910 * The number of tick texts will be adjusted to less than this value.
4911 * @name axis․y․tick․culling․max
4912 * @memberof Options
4913 * @type {Number}
4914 * @default 5
4915 * @example
4916 * axis: {
4917 * y: {
4918 * tick: {
4919 * culling: {
4920 * max: 5
4921 * }
4922 * }
4923 * }
4924 * }
4925 */
4926 axis_y_tick_culling_max: 5,
4927
4928 /**
4929 * Show y axis outer tick.
4930 * @name axis․y․tick․outer
4931 * @memberof Options
4932 * @type {Boolean}
4933 * @default true
4934 * @example
4935 * axis: {
4936 * y: {
4937 * tick: {
4938 * outer: false
4939 * }
4940 * }
4941 * }
4942 */
4943 axis_y_tick_outer: !0,
4944
4945 /**
4946 * Set y axis tick values manually.
4947 * @name axis․y․tick․values
4948 * @memberof Options
4949 * @type {Array|Function}
4950 * @default null
4951 * @example
4952 * axis: {
4953 * y: {
4954 * tick: {
4955 * values: [100, 1000, 10000],
4956 *
4957 * // an Array value should be returned
4958 * values: function() {
4959 * return [ ... ];
4960 * }
4961 * }
4962 * }
4963 * }
4964 */
4965 axis_y_tick_values: null,
4966
4967 /**
4968 * Rotate y axis tick text.
4969 * - If you set negative value, it will rotate to opposite direction.
4970 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`.
4971 * @name axis․y․tick․rotate
4972 * @memberof Options
4973 * @type {Number}
4974 * @default 0
4975 * @example
4976 * axis: {
4977 * y: {
4978 * tick: {
4979 * rotate: 60
4980 * }
4981 * }
4982 * }
4983 */
4984 axis_y_tick_rotate: 0,
4985
4986 /**
4987 * Set the number of y axis ticks.<br><br>
4988 * - **NOTE:** The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
4989 * @name axis․y․tick․count
4990 * @memberof Options
4991 * @type {Number}
4992 * @default undefined
4993 * @example
4994 * axis: {
4995 * y: {
4996 * tick: {
4997 * count: 5
4998 * }
4999 * }
5000 * }
5001 */
5002 axis_y_tick_count: undefined,
5003
5004 /**
5005 * Show or hide y axis tick line.
5006 * @name axis․y․tick․show
5007 * @memberof Options
5008 * @type {Boolean}
5009 * @default true
5010 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
5011 * @example
5012 * axis: {
5013 * y: {
5014 * tick: {
5015 * show: false
5016 * }
5017 * }
5018 * }
5019 */
5020 axis_y_tick_show: !0,
5021
5022 /**
5023 * Set axis tick step(interval) size.
5024 * - **NOTE:** Will be ignored if `axis.y.tick.count` or `axis.y.tick.values` options are set.
5025 * @name axis․y․tick․stepSize
5026 * @memberof Options
5027 * @type {Number}
5028 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
5029 * @example
5030 * axis: {
5031 * y: {
5032 * tick: {
5033 * // tick value will step as indicated interval value.
5034 * // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
5035 * stepSize: 15
5036 * }
5037 * }
5038 * }
5039 */
5040 axis_y_tick_stepSize: null,
5041
5042 /**
5043 * Show or hide y axis tick text.
5044 * @name axis․y․tick․text․show
5045 * @memberof Options
5046 * @type {Boolean}
5047 * @default true
5048 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
5049 * @example
5050 * axis: {
5051 * y: {
5052 * tick: {
5053 * text: {
5054 * show: false
5055 * }
5056 * }
5057 * }
5058 * }
5059 */
5060 axis_y_tick_text_show: !0,
5061
5062 /**
5063 * Set the y Axis tick text's position relatively its original position
5064 * @name axis․y․tick․text․position
5065 * @memberof Options
5066 * @type {Object}
5067 * @default {x: 0, y:0}
5068 * @example
5069 * axis: {
5070 * y: {
5071 * tick: {
5072 * text: {
5073 * position: {
5074 * x: 10,
5075 * y: 10
5076 * }
5077 * }
5078 * }
5079 * }
5080 * }
5081 */
5082 axis_y_tick_text_position: {
5083 x: 0,
5084 y: 0
5085 },
5086
5087 /**
5088 * Set the number of y axis ticks.<br><br>
5089 * - **NOTE:** The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
5090 * @name axis․y․tick․time
5091 * @memberof Options
5092 * @private
5093 * @type {Object}
5094 * @property {Function} [time.value] D3's time interval function (https://github.com/d3/d3-time#intervals)
5095 * @example
5096 * axis: {
5097 * y: {
5098 * tick: {
5099 * time: {
5100 * // ticks at 15-minute intervals
5101 * // https://github.com/d3/d3-scale/blob/master/README.md#time_ticks
5102 * value: d3.timeMinute.every(15)
5103 * }
5104 * }
5105 * }
5106 * }
5107 */
5108 // @TODO: not fully implemented yet
5109 axis_y_tick_time_value: undefined,
5110
5111 /**
5112 * Set padding for y axis.<br><br>
5113 * You can set padding for y axis to create more space on the edge of the axis.
5114 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
5115 *
5116 * - **NOTE:**
5117 * - Given values are translated relative to the y Axis domain value for padding
5118 * - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom.
5119 * @name axis․y․padding
5120 * @memberof Options
5121 * @type {Object|Number}
5122 * @default {}
5123 * @example
5124 * axis: {
5125 * y: {
5126 * padding: {
5127 * top: 0,
5128 * bottom: 0
5129 * },
5130 *
5131 * // or set both values at once.
5132 * padding: 10
5133 * }
5134 * }
5135 */
5136 axis_y_padding: {},
5137
5138 /**
5139 * Set default range of y axis.<br><br>
5140 * This option set the default value for y axis when there is no data on init.
5141 * @name axis․y․default
5142 * @memberof Options
5143 * @type {Array}
5144 * @default undefined
5145 * @example
5146 * axis: {
5147 * y: {
5148 * default: [0, 1000]
5149 * }
5150 * }
5151 */
5152 axis_y_default: undefined,
5153
5154 /**
5155 * Set additional axes for y Axis.
5156 * - **NOTE:** Axis' scale is based on y Axis value if domain option isn't set.
5157 *
5158 * Each axis object should consist with following options:
5159 *
5160 * | Name | Type | Default | Description |
5161 * | --- | --- | --- | --- |
5162 * | domain | Array | - | Set the domain value |
5163 * | tick.outer | Boolean | true | Show outer tick |
5164 * | tick.format | Function | - | Set formatter for tick text |
5165 * | tick.count | Number | - | Set the number of y axis ticks |
5166 * | tick.values | Array | - | Set tick values manually |
5167 * @name axis․y․axes
5168 * @memberof Options
5169 * @type {Array}
5170 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes)
5171 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain)
5172 * @example
5173 * y: {
5174 * axes: [
5175 * {
5176 * // if set, will not be correlated with the main y Axis domain value
5177 * domain: [0, 1000],
5178 * tick: {
5179 * outer: false,
5180 * format: function(x) {
5181 * return x + "%";
5182 * },
5183 * count: 2,
5184 * values: [10, 20, 30]
5185 * }
5186 * },
5187 * ...
5188 * ]
5189 * }
5190 */
5191 axis_y_axes: [],
5192
5193 /**
5194 * Show or hide y2 axis.
5195 * - **NOTE**:
5196 * - When set to `false` will not generate y2 axis node. In this case, all 'y2' axis related functionality won't work properly.
5197 * - If need to use 'y2' related options while y2 isn't visible, set the value `true` and control visibility by css display property.
5198 * @name axis․y2․show
5199 * @memberof Options
5200 * @type {Boolean}
5201 * @default false
5202 * @example
5203 * axis: {
5204 * y2: {
5205 * show: true
5206 * }
5207 * }
5208 */
5209 axis_y2_show: !1,
5210
5211 /**
5212 * Set max value of y2 axis.
5213 * @name axis․y2․max
5214 * @memberof Options
5215 * @type {Number}
5216 * @default undefined
5217 * @example
5218 * axis: {
5219 * y2: {
5220 * max: 1000
5221 * }
5222 * }
5223 */
5224 axis_y2_max: undefined,
5225
5226 /**
5227 * Set min value of y2 axis.
5228 * @name axis․y2․min
5229 * @memberof Options
5230 * @type {Number}
5231 * @default undefined
5232 * @example
5233 * axis: {
5234 * y2: {
5235 * min: -1000
5236 * }
5237 * }
5238 */
5239 axis_y2_min: undefined,
5240
5241 /**
5242 * Change the direction of y2 axis.<br><br>
5243 * If true set, the direction will be from the top to the bottom.
5244 * @name axis․y2․inverted
5245 * @memberof Options
5246 * @type {Boolean}
5247 * @default false
5248 * @example
5249 * axis: {
5250 * y2: {
5251 * inverted: true
5252 * }
5253 * }
5254 */
5255 axis_y2_inverted: !1,
5256
5257 /**
5258 * Set center value of y2 axis.
5259 * @name axis․y2․center
5260 * @memberof Options
5261 * @type {Number}
5262 * @default undefined
5263 * @example
5264 * axis: {
5265 * y2: {
5266 * center: 0
5267 * }
5268 * }
5269 */
5270 axis_y2_center: undefined,
5271
5272 /**
5273 * Show y2 axis inside of the chart.
5274 * @name axis․y2․inner
5275 * @memberof Options
5276 * @type {Boolean}
5277 * @default false
5278 * @example
5279 * axis: {
5280 * y2: {
5281 * inner: true
5282 * }
5283 * }
5284 */
5285 axis_y2_inner: !1,
5286
5287 /**
5288 * Set label on y2 axis.<br><br>
5289 * You can set y2 axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
5290 * @name axis․y2․label
5291 * @memberof Options
5292 * @type {String|Object}
5293 * @default {}
5294 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
5295 * @example
5296 * axis: {
5297 * y2: {
5298 * label: "Your Y2 Axis"
5299 * }
5300 * }
5301 *
5302 * axis: {
5303 * y2: {
5304 * label: {
5305 * text: "Your Y2 Axis",
5306 * position: "outer-middle"
5307 * }
5308 * }
5309 * }
5310 */
5311 axis_y2_label: {},
5312
5313 /**
5314 * Set formatter for y2 axis tick text.<br><br>
5315 * This option works in the same way as axis.y.format.
5316 * @name axis․y2․tick․format
5317 * @memberof Options
5318 * @type {Function}
5319 * @default undefined
5320 * @example
5321 * axis: {
5322 * y2: {
5323 * tick: {
5324 * format: d3.format("$,")
5325 * //or format: function(d) { return "$" + d; }
5326 * }
5327 * }
5328 * }
5329 */
5330 axis_y2_tick_format: undefined,
5331
5332 /**
5333 * Setting for culling ticks.<br><br>
5334 * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.<br><br>
5335 * We can change the number of ticks to be shown by axis.y.tick.culling.max.
5336 * @name axis․y2․tick․culling
5337 * @memberof Options
5338 * @type {Boolean}
5339 * @default false
5340 * @example
5341 * axis: {
5342 * y2: {
5343 * tick: {
5344 * culling: false
5345 * }
5346 * }
5347 * }
5348 */
5349 axis_y2_tick_culling: !1,
5350
5351 /**
5352 * The number of tick texts will be adjusted to less than this value.
5353 * @name axis․y2․tick․culling․max
5354 * @memberof Options
5355 * @type {Number}
5356 * @default 5
5357 * @example
5358 * axis: {
5359 * y2: {
5360 * tick: {
5361 * culling: {
5362 * max: 5
5363 * }
5364 * }
5365 * }
5366 * }
5367 */
5368 axis_y2_tick_culling_max: 5,
5369
5370 /**
5371 * Show or hide y2 axis outer tick.
5372 * @name axis․y2․tick․outer
5373 * @memberof Options
5374 * @type {Boolean}
5375 * @default true
5376 * @example
5377 * axis: {
5378 * y2: {
5379 * tick: {
5380 * outer: false
5381 * }
5382 * }
5383 * }
5384 */
5385 axis_y2_tick_outer: !0,
5386
5387 /**
5388 * Set y2 axis tick values manually.
5389 * @name axis․y2․tick․values
5390 * @memberof Options
5391 * @type {Array|Function}
5392 * @default null
5393 * @example
5394 * axis: {
5395 * y2: {
5396 * tick: {
5397 * values: [100, 1000, 10000],
5398 *
5399 * // an Array value should be returned
5400 * values: function() {
5401 * return [ ... ];
5402 * }
5403 * }
5404 * }
5405 * }
5406 */
5407 axis_y2_tick_values: null,
5408
5409 /**
5410 * Rotate y2 axis tick text.
5411 * - If you set negative value, it will rotate to opposite direction.
5412 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`.
5413 * @name axis․y2․tick․rotate
5414 * @memberof Options
5415 * @type {Number}
5416 * @default 0
5417 * @example
5418 * axis: {
5419 * y2: {
5420 * tick: {
5421 * rotate: 60
5422 * }
5423 * }
5424 * }
5425 */
5426 axis_y2_tick_rotate: 0,
5427
5428 /**
5429 * Set the number of y2 axis ticks.
5430 * - **NOTE:** This works in the same way as axis.y.tick.count.
5431 * @name axis․y2․tick․count
5432 * @memberof Options
5433 * @type {Number}
5434 * @default undefined
5435 * @example
5436 * axis: {
5437 * y2: {
5438 * tick: {
5439 * count: 5
5440 * }
5441 * }
5442 * }
5443 */
5444 axis_y2_tick_count: undefined,
5445
5446 /**
5447 * Show or hide y2 axis tick line.
5448 * @name axis․y2․tick․show
5449 * @memberof Options
5450 * @type {Boolean}
5451 * @default true
5452 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
5453 * @example
5454 * axis: {
5455 * y2: {
5456 * tick: {
5457 * show: false
5458 * }
5459 * }
5460 * }
5461 */
5462 axis_y2_tick_show: !0,
5463
5464 /**
5465 * Set axis tick step(interval) size.
5466 * - **NOTE:** Will be ignored if `axis.y2.tick.count` or `axis.y2.tick.values` options are set.
5467 * @name axis․y2․tick․stepSize
5468 * @memberof Options
5469 * @type {Number}
5470 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
5471 * @example
5472 * axis: {
5473 * y2: {
5474 * tick: {
5475 * // tick value will step as indicated interval value.
5476 * // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
5477 * stepSize: 15
5478 * }
5479 * }
5480 * }
5481 */
5482 axis_y2_tick_stepSize: null,
5483
5484 /**
5485 * Show or hide y2 axis tick text.
5486 * @name axis․y2․tick․text․show
5487 * @memberof Options
5488 * @type {Boolean}
5489 * @default true
5490 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
5491 * @example
5492 * axis: {
5493 * y2: {
5494 * tick: {
5495 * text: {
5496 * show: false
5497 * }
5498 * }
5499 * }
5500 * }
5501 */
5502 axis_y2_tick_text_show: !0,
5503
5504 /**
5505 * Set the y2 Axis tick text's position relatively its original position
5506 * @name axis․y2․tick․text․position
5507 * @memberof Options
5508 * @type {Object}
5509 * @default {x: 0, y:0}
5510 * @example
5511 * axis: {
5512 * y2: {
5513 * tick: {
5514 * text: {
5515 * position: {
5516 * x: 10,
5517 * y: 10
5518 * }
5519 * }
5520 * }
5521 * }
5522 * }
5523 */
5524 axis_y2_tick_text_position: {
5525 x: 0,
5526 y: 0
5527 },
5528
5529 /**
5530 * Set padding for y2 axis.<br><br>
5531 * You can set padding for y2 axis to create more space on the edge of the axis.
5532 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
5533 *
5534 * - **NOTE:**
5535 * - Given values are translated relative to the y2 Axis domain value for padding
5536 * - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom.
5537 * @name axis․y2․padding
5538 * @memberof Options
5539 * @type {Object|Number}
5540 * @default {}
5541 * @example
5542 * axis: {
5543 * y2: {
5544 * padding: {
5545 * top: 100,
5546 * bottom: 100
5547 * }
5548 *
5549 * // or set both values at once.
5550 * padding: 10
5551 * }
5552 */
5553 axis_y2_padding: {},
5554
5555 /**
5556 * Set default range of y2 axis.<br><br>
5557 * This option set the default value for y2 axis when there is no data on init.
5558 * @name axis․y2․default
5559 * @memberof Options
5560 * @type {Array}
5561 * @default undefined
5562 * @example
5563 * axis: {
5564 * y2: {
5565 * default: [0, 1000]
5566 * }
5567 * }
5568 */
5569 axis_y2_default: undefined,
5570
5571 /**
5572 * Set additional axes for y2 Axis.
5573 * - **NOTE:** Axis' scale is based on y2 Axis value if domain option isn't set.
5574 *
5575 * Each axis object should consist with following options:
5576 *
5577 * | Name | Type | Default | Description |
5578 * | --- | --- | --- | --- |
5579 * | domain | Array | - | Set the domain value |
5580 * | tick.outer | Boolean | true | Show outer tick |
5581 * | tick.format | Function | - | Set formatter for tick text |
5582 * | tick.count | Number | - | Set the number of y axis ticks |
5583 * | tick.values | Array | - | Set tick values manually |
5584 * @name axis․y2․axes
5585 * @memberof Options
5586 * @type {Array}
5587 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes)
5588 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain)
5589 * @example
5590 * y2: {
5591 * axes: [
5592 * {
5593 * // if set, will not be correlated with the main y2 Axis domain value
5594 * domain: [0, 1000],
5595 * tick: {
5596 * outer: false,
5597 * format: function(x) {
5598 * return x + "%";
5599 * },
5600 * count: 2,
5601 * values: [10, 20, 30]
5602 * }
5603 * },
5604 * ...
5605 * ]
5606 * }
5607 */
5608 axis_y2_axes: [],
5609
5610 /**
5611 * Set related options
5612 * @name grid
5613 * @memberof Options
5614 * @type {Object}
5615 * @property {Boolean} [front=false] Set 'grid & focus lines' to be positioned over grid lines and chart elements.
5616 * @property {Boolean} [x.show=false] Show grids along x axis.
5617 * @property {Array} [x.lines=[]] Show additional grid lines along x axis.<br>
5618 * This option accepts array including object that has value, text, position and class. text, position and class are optional. For position, start, middle and end (default) are available.
5619 * If x axis is category axis, value can be category name. If x axis is timeseries axis, value can be date string, Date object and unixtime integer.
5620 * @property {Boolean} [y.show=false] Show grids along x axis.
5621 * @property {Array} [y.lines=[]] Show additional grid lines along y axis.<br>
5622 * This option accepts array including object that has value, text, position and class.
5623 * @property {Number} [y.ticks=10] Number of y grids to be shown.
5624 * @property {Boolean} [focus.edge=false] Show edged focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
5625 * @property {Boolean} [focus.show=true] Show grid line when focus.
5626 * @property {Boolean} [focus.y=false] Show y coordinate focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
5627 * @property {Boolean} [lines.front=true] Set grid lines to be positioned over chart elements.
5628 * @default undefined
5629 * @see [Demo](https://naver.github.io/billboard.js/demo/#Grid.GridLines)
5630 * @see [Demo: X Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalXGridLines)
5631 * @see [Demo: Y Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalYGridLines)
5632 * @example
5633 * grid: {
5634 * x: {
5635 * show: true,
5636 * lines: [
5637 * {value: 2, text: "Label on 2"},
5638 * {value: 5, text: "Label on 5", class: "label-5"},
5639 * {value: 6, text: "Label on 6", position: "start"}
5640 * ]
5641 * },
5642 * y: {
5643 * show: true,
5644 * lines: [
5645 * {value: 100, text: "Label on 100"},
5646 * {value: 200, text: "Label on 200", class: "label-200"},
5647 * {value: 300, text: "Label on 300", position: 'middle'}
5648 * ],
5649 * ticks: 5
5650 * },
5651 * front: true,
5652 * focus: {
5653 * show: false,
5654 *
5655 * // Below options are available when 'tooltip.grouped=false' option is set
5656 * edge: true,
5657 * y: true
5658 * },
5659 * lines: {
5660 * front: false
5661 * }
5662 * }
5663 */
5664 grid_x_show: !1,
5665 grid_x_type: "tick",
5666 grid_x_lines: [],
5667 grid_y_show: !1,
5668 grid_y_lines: [],
5669 grid_y_ticks: 10,
5670 grid_focus_edge: !1,
5671 grid_focus_show: !0,
5672 grid_focus_y: !1,
5673 grid_front: !1,
5674 grid_lines_front: !0,
5675
5676 /**
5677 * Set point options
5678 * @name point
5679 * @memberof Options
5680 * @type {Object}
5681 * @property {Boolean} [point.show=true] Whether to show each point in line.
5682 * @property {Number|Function} [point.r=2.5] The radius size of each point.
5683 * - **NOTE:** Disabled for 'bubble' type
5684 * @property {Boolean} [point.focus.expand.enabled=true] Whether to expand each point on focus.
5685 * @property {Number} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.
5686 * - **NOTE:** For 'bubble' type, the default is `bubbleSize*1.15`
5687 * @property {Number} [point.sensitivity=10] The senstivity value for interaction boundary.
5688 * @property {Number} [point.select.r=point.r*4] The radius size of each point on selected.
5689 * @property {String} [point.type="circle"] The type of point to be drawn
5690 * - **NOTE:**
5691 * - If chart has 'bubble' type, only circle can be used.
5692 * - For IE, non circle point expansions are not supported due to lack of transform support.
5693 * - **Available Values:**
5694 * - circle
5695 * - rectangle
5696 * @property {Array} [point.pattern=[]] The type of point or svg shape as string, to be drawn for each line
5697 * - **NOTE:**
5698 * - This is an `experimental` feature and can have some unexpected behaviors.
5699 * - If chart has 'bubble' type, only circle can be used.
5700 * - For IE, non circle point expansions are not supported due to lack of transform support.
5701 * - **Available Values:**
5702 * - circle
5703 * - rectangle
5704 * - svg shape tag interpreted as string<br>
5705 * (ex. `<polygon points='2.5 0 0 5 5 5'></polygon>`)
5706 * @see [Demo: point type](https://naver.github.io/billboard.js/demo/#Point.RectanglePoints)
5707 * @example
5708 * point: {
5709 * show: false,
5710 * r: 5,
5711 *
5712 * // or customize the radius
5713 * r: function(d) {
5714 * ...
5715 * return r;
5716 * },
5717 *
5718 * focus: {
5719 * expand: {
5720 * enabled: true,
5721 * r: 1
5722 * }
5723 * },
5724 * select: {
5725 * r: 3
5726 * },
5727 *
5728 * // having lower value, means how closer to be for interaction
5729 * sensitivity: 3,
5730 *
5731 * // valid values are "circle" or "rectangle"
5732 * type: "rectangle",
5733 *
5734 * // or indicate as pattern
5735 * pattern: [
5736 * "circle",
5737 * "rectangle",
5738 * "<polygon points='0 6 4 0 -4 0'></polygon>"
5739 * ],
5740 * }
5741 */
5742 point_show: !0,
5743 point_r: 2.5,
5744 point_sensitivity: 10,
5745 point_focus_expand_enabled: !0,
5746 point_focus_expand_r: undefined,
5747 point_pattern: [],
5748 point_select_r: undefined,
5749 point_type: "circle",
5750
5751 /**
5752 * Set line options
5753 * @name line
5754 * @memberof Options
5755 * @type {Object}
5756 * @property {Boolean} [line.connectNull=false] Set if null data point will be connected or not.<br>
5757 * If true set, the region of null data will be connected without any data point. If false set, the region of null data will not be connected and get empty.
5758 * @property {Array} [line.classes=undefined] If set, used to set a css class on each line.
5759 * @property {Boolean} [line.step.type=step] Change step type for step chart.<br>
5760 * **Available values:**
5761 * - step
5762 * - step-before
5763 * - step-after
5764 * @property {Boolean|Array} [line.point=true] Set to false to not draw points on linecharts. Or pass an array of line ids to draw points for.
5765 * @property {Boolean} [line.zerobased=false] Set if min or max value will be 0 on line chart.
5766 * @example
5767 * line: {
5768 * connectNull: true,
5769 * classes: [
5770 * "line-class1",
5771 * "line-class2"
5772 * ],
5773 * step: {
5774 * type: "step-after"
5775 * },
5776 *
5777 * // hide all data points ('point.show=false' also has similar effect)
5778 * point: false,
5779 *
5780 * // show data points for only indicated datas
5781 * point: [
5782 * "data1", "data3"
5783 * ],
5784 *
5785 * zerobased: false
5786 * }
5787 */
5788 line_connectNull: !1,
5789 line_step_type: "step",
5790 line_zerobased: !1,
5791 line_classes: undefined,
5792 line_point: !0,
5793
5794 /**
5795 * Set scatter options
5796 * @name scatter
5797 * @memberof Options
5798 * @type {Object}
5799 * @property {Boolean} [scatter.zerobased=false] Set if min or max value will be 0 on scatter chart.
5800 * @example
5801 * scatter: {
5802 * connectNull: true,
5803 * step: {
5804 * type: "step-after"
5805 * },
5806 *
5807 * // hide all data points ('point.show=false' also has similar effect)
5808 * point: false,
5809 *
5810 * // show data points for only indicated datas
5811 * point: [
5812 * "data1", "data3"
5813 * ],
5814 *
5815 * zerobased: false
5816 * }
5817 */
5818 scatter_zerobased: !1,
5819
5820 /**
5821 * Set bar options
5822 * @name bar
5823 * @memberof Options
5824 * @type {Object}
5825 * @property {Number} [bar.padding=0] The padding pixel value between each bar.
5826 * @property {Number} [bar.radius] Set the radius of bar edge in pixel.
5827 * - **NOTE:** Works only for non-stacked bar
5828 * @property {Number} [bar.radius.ratio] Set the radius ratio of bar edge in relative the bar's width.
5829 * @property {Number} [bar.sensitivity=2] The senstivity offset value for interaction boundary.
5830 * @property {Number} [bar.width] Change the width of bar chart.
5831 * @property {Number} [bar.width.ratio=0.6] Change the width of bar chart by ratio.
5832 * @property {Number} [bar.width.max] The maximum width value for ratio.
5833 * @property {Number} [bar.width.dataname] Change the width of bar for indicated dataset only.
5834 * - **NOTE:**
5835 * - Works only for non-stacked bar
5836 * - Bars are centered accoding its total width value
5837 * @property {Number} [bar.width.dataname.ratio=0.6] Change the width of bar chart by ratio.
5838 * @property {Number} [bar.width.dataname.max] The maximum width value for ratio.
5839 * @property {Boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart.
5840 * @see [Demo: bar padding](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarPadding)
5841 * @see [Demo: bar radius](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarRadius)
5842 * @see [Demo: bar width](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth)
5843 * @see [Demo: bar width variant](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant)
5844 * @example
5845 * bar: {
5846 * padding: 1,
5847 *
5848 * // the 'radius' option can be used only for non-stacking bars
5849 * radius: 10,
5850 * // or
5851 * radius: {
5852 * ratio: 0.5
5853 * }
5854 *
5855 * // will not have offset between each bar elements for interaction
5856 * sensitivity: 0,
5857 *
5858 * width: 10,
5859 *
5860 * // or
5861 * width: {
5862 * ratio: 0.2,
5863 * max: 20
5864 * },
5865 *
5866 * // or specify width per dataset
5867 * width: {
5868 * data1: 20,
5869 * data2: {
5870 * ratio: 0.2,
5871 * max: 20
5872 * }
5873 * },
5874 *
5875 * zerobased: false
5876 * }
5877 */
5878 bar_padding: 0,
5879 bar_radius: undefined,
5880 bar_radius_ratio: undefined,
5881 bar_sensitivity: 2,
5882 bar_width: undefined,
5883 bar_width_ratio: .6,
5884 bar_width_max: undefined,
5885 bar_zerobased: !0,
5886
5887 /**
5888 * Set bubble options
5889 * @name bubble
5890 * @memberof Options
5891 * @type {Object}
5892 * @property {Number|Function} [bubble.maxR=35] Set the max bubble radius value
5893 * @property {Boolean} [bubble.zerobased=false] Set if min or max value will be 0 on bubble chart.
5894 * @example
5895 * bubble: {
5896 * // ex) If 100 is the highest value among data bound, the representation bubble of 100 will have radius of 50.
5897 * // And the lesser will have radius relatively from tha max value.
5898 * maxR: 50,
5899 *
5900 * // or set radius callback
5901 * maxR: function(d) {
5902 * // ex. of d param - {x: Fri Oct 06 2017 00:00:00 GMT+0900, value: 80, id: "data2", index: 5}
5903 * ...
5904 * return Math.sqrt(d.value * 2);
5905 * },
5906 * zerobased: false
5907 * }
5908 */
5909 bubble_maxR: 35,
5910 bubble_zerobased: !1,
5911
5912 /**
5913 * Set area options
5914 * @name area
5915 * @memberof Options
5916 * @type {Object}
5917 * @property {Boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
5918 * @property {Boolean} [area.above=false] Set background area above the data chart line.
5919 * @property {Boolean|Object} [area.linearGradient=false] Set the linear gradient on area.<br><br>
5920 * Or customize by giving below object value:
5921 * - x {Array}: `x1`, `x2` value
5922 * - y {Array}: `y1`, `y2` value
5923 * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values.
5924 * @see [MDN's &lt;linearGradient>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), [&lt;stop>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
5925 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.AreaChart)
5926 * @see [Demo: above](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Above)
5927 * @see [Demo: linearGradient](https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient)
5928 * @example
5929 * area: {
5930 * zerobased: false,
5931 * above: true,
5932 *
5933 * // will generate follwing linearGradient:
5934 * // <linearGradient x1="0" x2="0" y1="0" y2="1">
5935 * // <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
5936 * // <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
5937 * // </linearGradient>
5938 * linearGradient: true,
5939 *
5940 * // Or customized gradient
5941 * linearGradient: {
5942 * x: [0, 0], // x1, x2 attributes
5943 * y: [0, 0], // y1, y2 attributes
5944 * stops: [
5945 * // offset, stop-color, stop-opacity
5946 * [0, "#7cb5ec", 1],
5947 *
5948 * // setting 'null' for stop-color, will set its original data color
5949 * [0.5, null, 0],
5950 *
5951 * // setting 'function' for stop-color, will pass data id as argument.
5952 * // It should return color string or null value
5953 * [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
5954 * ]
5955 * }
5956 * }
5957 */
5958 area_zerobased: !0,
5959 area_above: !1,
5960 area_linearGradient: !1,
5961
5962 /**
5963 * Set pie options
5964 * @name pie
5965 * @memberof Options
5966 * @type {Object}
5967 * @property {Boolean} [pie.label.show=true] Show or hide label on each pie piece.
5968 * @property {Function} [pie.label.format] Set formatter for the label on each pie piece.
5969 * @property {Number} [pie.label.threshold=0.05] Set threshold to show/hide labels.
5970 * @property {Number|Function} [pie.label.ratio=undefined] Set ratio of labels position.
5971 * @property {Boolean|Object} [pie.expand=true] Enable or disable expanding pie pieces.
5972 * @property {Number} [pie.expand.rate=0.98] Set expand rate.
5973 * @property {Number} [pie.expand.duration=50] Set expand transition time in ms.
5974 * @property {Number|Object} [pie.innerRadius=0] Sets the inner radius of pie arc.
5975 * @property {Number} [pie.padAngle=0] Set padding between data.
5976 * @property {Number} [pie.padding=0] Sets the gap between pie arcs.
5977 * @property {Number} [donut.startingAngle=0] Set starting angle where data draws.
5978 * @example
5979 * pie: {
5980 * label: {
5981 * show: false,
5982 * format: function(value, ratio, id) {
5983 * return d3.format("$")(value);
5984 *
5985 * // to multiline, return with '\n' character
5986 * // return value +"%\nLine1\n2Line2";
5987 * },
5988 * threshold: 0.1,
5989 *
5990 * // set ratio callback. Should return ratio value
5991 * ratio: function(d, radius, h) {
5992 * ...
5993 * return ratio;
5994 * },
5995 * // or set ratio number
5996 * ratio: 0.5
5997 * },
5998 *
5999 * // disable expand transition for interaction
6000 * expand: false,
6001 *
6002 * expand: {
6003 * // set duration of expand transition to 500ms.
6004 * duration: 500,
6005 *
6006 * // set expand area rate
6007 * rate: 1
6008 * },
6009 *
6010 * innerRadius: 0,
6011 *
6012 * // set different innerRadius for each data
6013 * innerRadius: {
6014 * data1: 10,
6015 * data2: 0
6016 * }
6017 *
6018 * padAngle: 0.1,
6019 * padding: 0,
6020 * startingAngle: 1
6021 * }
6022 */
6023 pie_label_show: !0,
6024 pie_label_format: undefined,
6025 pie_label_threshold: .05,
6026 pie_label_ratio: undefined,
6027 pie_expand: {},
6028 pie_expand_rate: .98,
6029 pie_expand_duration: 50,
6030 pie_innerRadius: 0,
6031 pie_padAngle: 0,
6032 pie_padding: 0,
6033 pie_startingAngle: 0,
6034
6035 /**
6036 * Set plugins
6037 * @name plugins
6038 * @memberof Options
6039 * @type {Array}
6040 * @example
6041 * plugins: [
6042 * new bb.plugin.stanford({ ... }),
6043 * new PluginA(),
6044 * ...
6045 * ]
6046 */
6047 plugins: [],
6048
6049 /**
6050 * Set gauge options
6051 * @name gauge
6052 * @memberof Options
6053 * @type {Object}
6054 * @property {Boolean} [gauge.fullCircle=false] Show full circle as donut. When set to 'true', the max label will not be showed due to start and end points are same location.
6055 * @property {Boolean} [gauge.label.show=true] Show or hide label on gauge.
6056 * @property {Function} [gauge.label.format] Set formatter for the label on gauge. Label text can be multilined with `\n` character.
6057 * @property {Function} [gauge.label.extents] Set customized min/max label text.
6058 * @property {Boolean} [gauge.expand=true] Enable or disable expanding gauge.
6059 * @property {Number} [gauge.expand.rate=0.98] Set expand rate.
6060 * @property {Number} [gauge.expand.duration=50] Set the expand transition time in milliseconds.
6061 * @property {Number} [gauge.min=0] Set min value of the gauge.
6062 * @property {Number} [gauge.max=100] Set max value of the gauge.
6063 * @property {Number} [gauge.startingAngle=-1 * Math.PI / 2] Set starting angle where data draws.
6064 * @property {String} [gauge.title=""] Set title of gauge chart. Use `\n` character to enter line break.
6065 * @property {String} [gauge.units] Set units of the gauge.
6066 * @property {Number} [gauge.width] Set width of gauge chart.
6067 * @property {String} [gauge.type="single"] Set type of gauge to be displayed.<br><br>
6068 * **Available Values:**
6069 * - single
6070 * - multi
6071 * @property {String} [gauge.arcs.minWidth=5] Set minimal width of gauge arcs until the innerRadius disappears.
6072 * @example
6073 * gauge: {
6074 * fullCircle: false,
6075 * label: {
6076 * show: false,
6077 * format: function(value, ratio) {
6078 * return value;
6079 *
6080 * // to multiline, return with '\n' character
6081 * // return value +"%\nLine1\n2Line2";
6082 * },
6083 * extents: function(value, isMax) {
6084 * return (isMax ? "Max:" : "Min:") + value;
6085 * }
6086 * },
6087 *
6088 * // disable expand transition for interaction
6089 * expand: false,
6090 *
6091 * expand: {
6092 * // set duration of expand transition to 500ms.
6093 * duration: 500,
6094 *
6095 * // set expand area rate
6096 * rate: 1
6097 * },
6098 *
6099 * min: -100,
6100 * max: 200,
6101 * type: "single" // or 'multi'
6102 * title: "Title Text",
6103 * units: "%",
6104 * width: 10,
6105 * arcs: {
6106 * minWidth: 5
6107 * }
6108 * }
6109 */
6110 gauge_fullCircle: !1,
6111 gauge_label_show: !0,
6112 gauge_label_format: undefined,
6113 gauge_min: 0,
6114 gauge_max: 100,
6115 gauge_type: "single",
6116 gauge_startingAngle: -1 * Math.PI / 2,
6117 gauge_label_extents: undefined,
6118 gauge_title: "",
6119 gauge_units: undefined,
6120 gauge_width: undefined,
6121 gauge_arcs_minWidth: 5,
6122 gauge_expand: {},
6123 gauge_expand_rate: .98,
6124 gauge_expand_duration: 50,
6125
6126 /**
6127 * Set donut options
6128 * @name donut
6129 * @memberof Options
6130 * @type {Object}
6131 * @property {Boolean} [donut.label.show=true] Show or hide label on each donut piece.
6132 * @property {Function} [donut.label.format] Set formatter for the label on each donut piece.
6133 * @property {Number} [donut.label.threshold=0.05] Set threshold to show/hide labels.
6134 * @property {Number|Function} [donut.label.ratio=undefined] Set ratio of labels position.
6135 * @property {Boolean} [donut.expand=true] Enable or disable expanding donut pieces.
6136 * @property {Number} [donut.expand.rate=0.98] Set expand rate.
6137 * @property {Number} [donut.expand.duration=50] Set expand transition time in ms.
6138 * @property {Number} [donut.width] Set width of donut chart.
6139 * @property {String} [donut.title=""] Set title of donut chart. Use `\n` character to enter line break.
6140 * @property {Number} [donut.padAngle=0] Set padding between data.
6141 * @property {Number} [donut.startingAngle=0] Set starting angle where data draws.
6142 * @example
6143 * donut: {
6144 * label: {
6145 * show: false,
6146 * format: function(value, ratio, id) {
6147 * return d3.format("$")(value);
6148 *
6149 * // to multiline, return with '\n' character
6150 * // return value +"%\nLine1\n2Line2";
6151 * },
6152 * threshold: 0.1,
6153 *
6154 * // set ratio callback. Should return ratio value
6155 * ratio: function(d, radius, h) {
6156 * ...
6157 * return ratio;
6158 * },
6159 * // or set ratio number
6160 * ratio: 0.5
6161 * },
6162 *
6163 * // disable expand transition for interaction
6164 * expand: false,
6165 *
6166 * expand: {
6167 * // set duration of expand transition to 500ms.
6168 * duration: 500,
6169 *
6170 * // set expand area rate
6171 * rate: 1
6172 * },
6173 *
6174 * width: 10,
6175 * padAngle: 0.2,
6176 * startingAngle: 1,
6177 * title: "Donut Title"
6178 *
6179 * // title with line break
6180 * title: "Title1\nTitle2"
6181 * }
6182 */
6183 donut_label_show: !0,
6184 donut_label_format: undefined,
6185 donut_label_threshold: .05,
6186 donut_label_ratio: undefined,
6187 donut_width: undefined,
6188 donut_title: "",
6189 donut_expand: {},
6190 donut_expand_rate: .98,
6191 donut_expand_duration: 50,
6192 donut_padAngle: 0,
6193 donut_startingAngle: 0,
6194
6195 /**
6196 * Set spline options
6197 * - **Available interpolation type values:**
6198 * - basis (d3.curveBasis)
6199 * - basis-closed (d3.curveBasisClosed)
6200 * - basis-open (d3.curveBasisOpen)
6201 * - bundle (d3.curveBundle)
6202 * - cardinal (d3.curveCardinal)
6203 * - cardinal-closed (d3.curveCardinalClosed)
6204 * - cardinal-open (d3.curveCardinalOpen)
6205 * - catmull-rom (d3.curveCatmullRom)
6206 * - catmull-rom-closed (d3.curveCatmullRomClosed)
6207 * - catmull-rom-open (d3.curveCatmullRomOpen)
6208 * - monotone-x (d3.curveMonotoneX)
6209 * - monotone-y (d3.curveMonotoneY)
6210 * - natural (d3.curveNatural)
6211 * - linear-closed (d3.curveLinearClosed)
6212 * - linear (d3.curveLinear)
6213 * - step (d3.curveStep)
6214 * - step-after (d3.curveStepAfter)
6215 * - step-before (d3.curveStepBefore)
6216 * @name spline
6217 * @memberof Options
6218 * @type {Object}
6219 * @property {String} [spline.interpolation.type="cardinal"]
6220 * @see [Interpolation (d3 v4)](http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502)
6221 * @example
6222 * spline: {
6223 * interpolation: {
6224 * type: "cardinal"
6225 * }
6226 * }
6227 */
6228 spline_interpolation_type: "cardinal",
6229
6230 /**
6231 * Set radar options
6232 * - **NOTE:**
6233 * > When x tick text contains `\n`, it's used as line break.
6234 * @name radar
6235 * @memberof Options
6236 * @type {Object}
6237 * @property {Number} [radar.axis.max=undefined] The max value of axis. If not given, it'll take the max value from the given data.
6238 * @property {Boolean} [radar.axis.line.show=true] Show or hide axis line.
6239 * @property {Number} [radar.axis.text.position.x=0] x coordinate position, relative the original.
6240 * @property {NUmber} [radar.axis.text.position.y=0] y coordinate position, relative the original.
6241 * @property {Boolean} [radar.axis.text.show=true] Show or hide axis text.
6242 * @property {Boolean} [radar.direction.clockwise=false] Set the direction to be drawn.
6243 * @property {Number} [radar.level.depth=3] Set the level depth.
6244 * @property {Boolean} [radar.level.show=true] Show or hide level.
6245 * @property {Function} [radar.level.text.format=(x) => (x % 1 === 0 ? x : x.toFixed(2))] Set format function for the level value.
6246 * @property {Boolean} [radar.level.text.show=true] Show or hide level text.
6247 * @property {Number} [radar.size.ratio=0.87] Set size ratio.
6248 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.RadarChart)
6249 * @see [Demo: radar axis](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis)
6250 * @see [Demo: radar level](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel)
6251 * @see [Demo: radar size](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarSize)
6252 * @see [Demo: radar axis multiline](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxisMultiline)
6253 * @example
6254 * radar: {
6255 * axis: {
6256 * max: 50,
6257 * line: {
6258 * show: false
6259 * },
6260 * text: {
6261 * position: {
6262 * x: 0,
6263 * y: 0
6264 * },
6265 * show: false
6266 * }
6267 * },
6268 * direction: {
6269 * clockwise: true
6270 * },
6271 * level: {
6272 * show: false,
6273 * text: {
6274 * format: function(x) {
6275 * return x + "%";
6276 * },
6277 * show: true
6278 * }
6279 * },
6280 * size: {
6281 * ratio: 0.7
6282 * }
6283 * }
6284 */
6285 radar_axis_max: undefined,
6286 radar_axis_line_show: !0,
6287 radar_axis_text_show: !0,
6288 radar_axis_text_position: {},
6289 radar_level_depth: 3,
6290 radar_level_show: !0,
6291 radar_level_text_format: function radar_level_text_format(x) {
6292 return x % 1 === 0 ? x : x.toFixed(2);
6293 },
6294 radar_level_text_show: !0,
6295 radar_size_ratio: .87,
6296 radar_direction_clockwise: !1,
6297
6298 /**
6299 * Control the render timing
6300 * @name render
6301 * @memberof Options
6302 * @type {Object}
6303 * @property {Boolean} [render.lazy=true] Make to not render at initialization (enabled by default when bind element's visibility is hidden).
6304 * @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.
6305 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender)
6306 * @example
6307 * render: {
6308 * lazy: true,
6309 * observe: true
6310 * }
6311 *
6312 * @example
6313 * // <!-- render.lazy will detect visibility defined -->
6314 * // (a) <div id='chart' class='hide'></div>
6315 * // (b) <div id='chart' style='display:none'></div>
6316 *
6317 * // render.lazy enabled by default when element is hidden
6318 * var chart = bb.generate({ ... });
6319 *
6320 * // chart will be rendered automatically when element's visibility changes
6321 * // Note: works only for inlined css property or class attribute changes
6322 * document.getElementById('chart').classList.remove('hide') // (a)
6323 * document.getElementById('chart').style.display = 'block'; // (b)
6324 *
6325 * @example
6326 * // chart won't be rendered and not observing bind element's visiblity changes
6327 * var chart = bb.generate({
6328 * render: {
6329 * lazy: true,
6330 * observe: false
6331 * }
6332 * });
6333 *
6334 * // call at any point when you want to render
6335 * chart.flush();
6336 */
6337 render: {},
6338
6339 /**
6340 * Show rectangles inside the chart.<br><br>
6341 * This option accepts array including object that has axis, start, end and class.
6342 * The keys start, end and class are optional.
6343 * axis must be x, y or y2. start and end should be the value where regions start and end.
6344 * If not specified, the edge values will be used.
6345 * If timeseries x axis, date string, Date object and unixtime integer can be used.
6346 * If class is set, the region element will have it as class.
6347 * @name regions
6348 * @memberof Options
6349 * @type {Array}
6350 * @default []
6351 * @example
6352 * regions: [
6353 * {
6354 * axis: "x",
6355 * start: 1,
6356 * end: 4,
6357 * class: "region-1-4"
6358 * }
6359 * ]
6360 */
6361 regions: [],
6362
6363 /**
6364 * Tooltip options
6365 * @name tooltip
6366 * @memberof Options
6367 * @type {Object}
6368 * @property {Boolean} [tooltip.show=true] Show or hide tooltip.
6369 * @property {Boolean} [tooltip.doNotHide=false] Make tooltip keep showing not hiding on interaction.
6370 * @property {Boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points.
6371 * - **NOTE:** The overlapped data points will be displayed as grouped even if set false.
6372 * @property {Boolean} [tooltip.linked=false] Set if tooltips on all visible charts with like x points are shown together when one is shown.
6373 * @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.
6374 * @property {Function} [tooltip.format.title] Set format for the title of tooltip.<br>
6375 * Specified function receives x of the data point to show.
6376 * @property {Function} [tooltip.format.name] Set format for the name of each data in tooltip.<br>
6377 * 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.
6378 * @property {Function} [tooltip.format.value] Set format for the value of each data in tooltip.<br>
6379 * 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.
6380 * If undefined returned, the row of that value will be skipped.
6381 * @property {Function} [tooltip.position] Set custom position function for the tooltip.<br>
6382 * This option can be used to modify the tooltip position by returning object that has top and left.
6383 * @property {Function|Object} [tooltip.contents] Set custom HTML for the tooltip.<br>
6384 * Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show. If tooltip.grouped is true, data includes multiple data points.
6385 * @property {String|HTMLElement} [tooltip.contents.bindto=undefined] Set CSS selector or element reference to bind tooltip.
6386 * - **NOTE:** When is specified, will not be updating tooltip's position.
6387 * @property {String} [tooltip.contents.template=undefined] Set tooltip's template.<br><br>
6388 * Within template, below syntax will be replaced using template-like syntax string:
6389 * - **{{ ... }}**: the doubly curly brackets indicate loop block for data rows.
6390 * - **{=CLASS_TOOLTIP}**: default tooltip class name `bb-tooltip`.
6391 * - **{=CLASS_TOOLTIP_NAME}**: default tooltip data class name (ex. `bb-tooltip-name-data1`)
6392 * - **{=TITLE}**: title value.
6393 * - **{=COLOR}**: data color.
6394 * - **{=VALUE}**: data value.
6395 * @property {Object} [tooltip.contents.text=undefined] Set additional text content within data loop, using template syntax.
6396 * - **NOTE:** It should contain `{ key: Array, ... }` value
6397 * - 'key' name is used as substitution within template as '{=KEY}'
6398 * - The value array length should match with the data length
6399 * @property {Boolean} [tooltip.init.show=false] Show tooltip at the initialization.
6400 * @property {Number} [tooltip.init.x=0] Set x Axis index to be shown at the initialization.
6401 * @property {Object} [tooltip.init.position={top: "0px",left: "50px"}] Set the position of tooltip at the initialization.
6402 * @property {Function} [tooltip.onshow] Set a callback that will be invoked before the tooltip is shown.
6403 * @property {Function} [tooltip.onhide] Set a callback that will be invoked before the tooltip is hidden.
6404 * @property {Function} [tooltip.onshown] Set a callback that will be invoked after the tooltip is shown
6405 * @property {Function} [tooltip.onhidden] Set a callback that will be invoked after the tooltip is hidden.
6406 * @property {String|Function|null} [tooltip.order=null] Set tooltip data display order.<br><br>
6407 * **Available Values:**
6408 * - `desc`: In descending data value order
6409 * - `asc`: In ascending data value order
6410 * - `null`: It keeps the data display order<br>
6411 * **NOTE:** When `data.groups` is set, the order will follow as the stacked graph order.<br>
6412 * If want to order as data bound, set any value rather than asc, desc or null. (ex. empty string "")
6413 * - `function(data1, data2) { ... }`: [Array.sort compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters)
6414 * @see [Demo: Hide Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.HideTooltip)
6415 * @see [Demo: Tooltip Grouping](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipGrouping)
6416 * @see [Demo: Tooltip Format](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipFormat)
6417 * @see [Demo: Linked Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.LinkedTooltips)
6418 * @see [Demo: Tooltip Template](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipTemplate)
6419 * @example
6420 * tooltip: {
6421 * show: true,
6422 * doNotHide: true,
6423 * grouped: false,
6424 * format: {
6425 * title: function(x) { return "Data " + x; },
6426 * name: function(name, ratio, id, index) { return name; },
6427 * value: function(value, ratio, id, index) { return ratio; }
6428 * },
6429 * position: function(data, width, height, element) {
6430 * // return with unit or without. If the value is number, is treated as 'px'.
6431 * return {top: "10%", left: 20} // top:10%; left: 20px;
6432 * },
6433 * contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
6434 * return ... // formatted html as you want
6435 * },
6436 *
6437 * // specify tooltip contents using template
6438 * // - example of HTML returned:
6439 * // <ul class="bb-tooltip">
6440 * // <li class="bb-tooltip-name-data1"><span>250</span><br><span style="color:#00c73c">data1</span></li>
6441 * // <li class="bb-tooltip-name-data2"><span>50</span><br><span style="color:#fa7171">data2</span></li>
6442 * // </ul>
6443 * contents: {
6444 * bindto: "#tooltip",
6445 * template: '<ul class={=CLASS_TOOLTIP}>{{' +
6446 * '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>' +
6447 * '<span style=color:{=COLOR}>{=NAME}</span></li>' +
6448 * '}}</ul>'
6449 * }
6450 *
6451 * // with additional text value
6452 * // - example of HTML returned:
6453 * // <ul class="bb-tooltip">
6454 * // <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li>
6455 * // <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li>
6456 * // </ul>
6457 * contents: {
6458 * bindto: "#tooltip",
6459 * text: {
6460 * // a) 'key' name is used as substitution within template as '{=KEY}'
6461 * // b) the length should match with the data length
6462 * VAR1: ["text1", "text2"],
6463 * VAR2: ["comment1", "comment2"],
6464 * },
6465 * template: '<ul class={=CLASS_TOOLTIP}>{{' +
6466 * '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' +
6467 * '<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' +
6468 * '}}</ul>'
6469 * }
6470 *
6471 * // sort tooltip data value display in ascending order
6472 * order: "asc",
6473 *
6474 * // specifying sort function
6475 * order: function(a, b) {
6476 * // param data passed format
6477 * {x: 5, value: 250, id: "data1", index: 5, name: "data1"}
6478 * ...
6479 * },
6480 *
6481 * // show at the initialization
6482 * init: {
6483 * show: true,
6484 * x: 2,
6485 * position: {
6486 * top: "150px",
6487 * left: "250px"
6488 * }
6489 * },
6490 *
6491 * // fires prior tooltip is shown
6492 * onshow: function(ctx, selectedData) {
6493 * ctx; // current chart instance
6494 *
6495 * // current dataset selected
6496 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
6497 * selectedData;
6498 * },
6499 *
6500 * // fires prior tooltip is hidden
6501 * onhide: function(ctx, selectedData) {
6502 * ctx; // current chart instance
6503 *
6504 * // current dataset selected
6505 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
6506 * selectedData;
6507 * },
6508 *
6509 * // fires after tooltip is shown
6510 * onshown: function(ctx, selectedData) {
6511 * ctx; // current chart instance
6512 *
6513 * // current dataset selected
6514 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
6515 * selectedData;
6516 * },
6517 *
6518 * // fires after tooltip is hidden
6519 * onhidden: function(ctx, selectedData) {
6520 * ctx; // current chart instance
6521 *
6522 * // current dataset selected
6523 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
6524 * selectedData;
6525 * },
6526 *
6527 * // Link any tooltips when multiple charts are on the screen where same x coordinates are available
6528 * // Useful for timeseries correlation
6529 * linked: true,
6530 *
6531 * // Specify name to interact those with the same name only.
6532 * linked: {
6533 * name: "some-group"
6534 * }
6535 * }
6536 */
6537 tooltip_show: !0,
6538 tooltip_doNotHide: !1,
6539 tooltip_grouped: !0,
6540 tooltip_format_title: undefined,
6541 tooltip_format_name: undefined,
6542 tooltip_format_value: undefined,
6543 tooltip_position: undefined,
6544 tooltip_contents: {},
6545 tooltip_init_show: !1,
6546 tooltip_init_x: 0,
6547 tooltip_init_position: {
6548 top: "0px",
6549 left: "50px"
6550 },
6551 tooltip_linked: !1,
6552 tooltip_linked_name: "",
6553 tooltip_onshow: function tooltip_onshow() {},
6554 tooltip_onhide: function tooltip_onhide() {},
6555 tooltip_onshown: function tooltip_onshown() {},
6556 tooltip_onhidden: function tooltip_onhidden() {},
6557 tooltip_order: null,
6558
6559 /**
6560 * Set title options
6561 * @name title
6562 * @memberof Options
6563 * @type {Object}
6564 * @property {String} [title.text] Title text. If contains `\n`, it's used as line break allowing multiline title.
6565 * @property {Number} [title.padding.top=0] Top padding value.
6566 * @property {Number} [title.padding.right=0] Right padding value.
6567 * @property {Number} [title.padding.bottom=0] Bottom padding value.
6568 * @property {Number} [title.padding.left=0] Left padding value.
6569 * @property {String} [title.position=center] Available values are: 'center', 'right' and 'left'.
6570 * @see [Demo](https://naver.github.io/billboard.js/demo/#Title.MultilinedTitle)
6571 * @example
6572 * title: {
6573 * text: "Title Text",
6574 *
6575 * // or Multiline title text
6576 * text: "Main title text\nSub title text",
6577 *
6578 * padding: {
6579 * top: 10,
6580 * right: 10,
6581 * bottom: 10,
6582 * left: 10
6583 * },
6584 * position: "center"
6585 * }
6586 */
6587 title_text: undefined,
6588 title_padding: {
6589 top: 0,
6590 right: 0,
6591 bottom: 0,
6592 left: 0
6593 },
6594 title_position: "center"
6595 };
6596};
6597
6598
6599// CONCATENATED MODULE: ./src/config/config.js
6600/**
6601 * Copyright (c) 2017 ~ present NAVER Corp.
6602 * billboard.js project is licensed under the MIT license
6603 */
6604
6605
6606
6607extend(ChartInternal_ChartInternal.prototype, {
6608 getOptions: function getOptions() {
6609 return new Options_Options();
6610 },
6611
6612 /**
6613 * Load configuration option
6614 * @param {Object} config User's generation config value
6615 * @private
6616 */
6617 loadConfig: function loadConfig(config) {
6618 var target,
6619 keys,
6620 read,
6621 thisConfig = this.config,
6622 find = function () {
6623 var key = keys.shift();
6624 return key && target && isObjectType(target) && key in target ? (target = target[key], find()) : key ? undefined : target;
6625 };
6626
6627 Object.keys(thisConfig).forEach(function (key) {
6628 target = config, keys = key.split("_"), read = find(), isDefined(read) && (thisConfig[key] = read);
6629 });
6630 }
6631});
6632// CONCATENATED MODULE: ./src/internals/scale.js
6633/**
6634 * Copyright (c) 2017 ~ present NAVER Corp.
6635 * billboard.js project is licensed under the MIT license
6636 */
6637
6638
6639
6640extend(ChartInternal_ChartInternal.prototype, {
6641 getScale: function getScale(min, max, forTimeseries) {
6642 return (forTimeseries ? Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleTime"])() : Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleLinear"])()).range([min, max]);
6643 },
6644
6645 /**
6646 * Get x Axis scale function
6647 * @param {Number} min
6648 * @param {Number} max
6649 * @param {Number} domain
6650 * @param {Function} offset The offset getter to be sum
6651 * @return {Function} scale
6652 * @private
6653 */
6654 getX: function getX(min, max, domain, offset) {
6655 var $$ = this,
6656 scale = $$.zoomScale || $$.getScale(min, max, $$.isTimeSeries());
6657 return $$.getCustomizedScale(domain ? scale.domain(domain) : scale, offset);
6658 },
6659
6660 /**
6661 * Get y Axis scale function
6662 * @param {Number} min
6663 * @param {Number} max
6664 * @param {Number} domain
6665 * @return {Function} scale
6666 * @private
6667 */
6668 getY: function getY(min, max, domain) {
6669 var scale = this.getScale(min, max, this.isTimeSeriesY());
6670 return domain && scale.domain(domain), scale;
6671 },
6672
6673 /**
6674 * Get customized scale
6675 * @param {d3.scaleLinear|d3.scaleTime} scaleValue
6676 * @param {Function} offsetValue Offset getter to be sum
6677 * @return {} scale
6678 * @private
6679 */
6680 getCustomizedScale: function getCustomizedScale(scaleValue, offsetValue) {
6681 var $$ = this,
6682 offset = offsetValue || function () {
6683 return $$.xAxis.tickOffset();
6684 },
6685 scale = function (d, raw) {
6686 var v = scaleValue(d) + offset();
6687 return raw ? v : Math.ceil(v);
6688 };
6689
6690 // copy original scale methods
6691 for (var key in scaleValue) scale[key] = scaleValue[key];
6692
6693 return scale.orgDomain = function () {
6694 return scaleValue.domain();
6695 }, scale.orgScale = function () {
6696 return scaleValue;
6697 }, $$.isCategorized() && (scale.domain = function (domainValue) {
6698 var domain = domainValue;
6699 return arguments.length ? (scaleValue.domain(domain), scale) : (domain = this.orgDomain(), [domain[0], domain[1] + 1]);
6700 }), scale;
6701 },
6702 getYScale: function getYScale(id) {
6703 return this.axis.getId(id) === "y2" ? this.y2 : this.y;
6704 },
6705 getSubYScale: function getSubYScale(id) {
6706 return this.axis.getId(id) === "y2" ? this.subY2 : this.subY;
6707 },
6708
6709 /**
6710 * Update scale
6711 * @private
6712 * @param {Boolean} isInit - param is given at the init rendering
6713 */
6714 updateScales: function updateScales(isInit) {
6715 var updateXDomain = !(arguments.length > 1 && arguments[1] !== undefined) || arguments[1],
6716 $$ = this,
6717 config = $$.config,
6718 isRotated = config.axis_rotated;
6719 $$.xMin = isRotated ? 1 : 0, $$.xMax = isRotated ? $$.height : $$.width, $$.yMin = isRotated ? 0 : $$.height, $$.yMax = isRotated ? $$.width : 1, $$.subXMin = $$.xMin, $$.subXMax = $$.xMax, $$.subYMin = isRotated ? 0 : $$.height2, $$.subYMax = isRotated ? $$.width2 : 1;
6720 // update scales
6721 // x Axis
6722 var xDomain = updateXDomain && $$.x && $$.x.orgDomain(),
6723 xSubDomain = updateXDomain && $$.orgXDomain;
6724 // y Axis
6725 // update for arc
6726 $$.x = $$.getX($$.xMin, $$.xMax, xDomain, function () {
6727 return $$.xAxis.tickOffset();
6728 }), $$.subX = $$.getX($$.xMin, $$.xMax, xSubDomain, function (d) {
6729 return d % 1 ? 0 : $$.subXAxis.tickOffset();
6730 }), $$.xAxisTickFormat = $$.axis.getXAxisTickFormat(), $$.xAxisTickValues = $$.axis.getTickValues("x"), $$.xAxis = $$.axis.getAxis("x", $$.x, config.axis_x_tick_outer, isInit), $$.subXAxis = $$.axis.getAxis("subX", $$.subX, config.axis_x_tick_outer, isInit), $$.y = $$.getY($$.yMin, $$.yMax, $$.y ? $$.y.domain() : config.axis_y_default), $$.subY = $$.getY($$.subYMin, $$.subYMax, $$.subY ? $$.subY.domain() : config.axis_y_default), $$.yAxisTickValues = $$.axis.getTickValues("y"), $$.yAxis = $$.axis.getAxis("y", $$.y, config.axis_y_tick_outer, isInit), config.axis_y2_show && ($$.y2 = $$.getY($$.yMin, $$.yMax, $$.y2 ? $$.y2.domain() : config.axis_y2_default), $$.subY2 = $$.getY($$.subYMin, $$.subYMax, $$.subY2 ? $$.subY2.domain() : config.axis_y2_default), $$.y2AxisTickValues = $$.axis.getTickValues("y2"), $$.y2Axis = $$.axis.getAxis("y2", $$.y2, config.axis_y2_tick_outer, isInit)), $$.updateArc && $$.updateArc();
6731 }
6732});
6733// CONCATENATED MODULE: ./src/internals/domain.js
6734
6735
6736/**
6737 * Copyright (c) 2017 ~ present NAVER Corp.
6738 * billboard.js project is licensed under the MIT license
6739 */
6740
6741
6742extend(ChartInternal_ChartInternal.prototype, {
6743 getYDomainMinMax: function getYDomainMinMax(targets, type) {
6744 var $$ = this,
6745 config = $$.config,
6746 isMin = type === "min",
6747 dataGroups = config.data_groups,
6748 ids = $$.mapToIds(targets),
6749 ys = $$.getValuesAsIdKeyed(targets);
6750 return dataGroups.length > 0 && function () {
6751 for (var idsInGroup, _ret, hasValue = $$["has".concat(isMin ? "Negative" : "Positive", "ValueInTargets")](targets), _loop = function (j, _idsInGroup) {
6752 if (_idsInGroup = _idsInGroup.filter(function (v) {
6753 return ids.indexOf(v) >= 0;
6754 }), _idsInGroup.length === 0) return idsInGroup = _idsInGroup, "continue";
6755 var baseId = _idsInGroup[0],
6756 baseAxisId = $$.axis.getId(baseId);
6757 hasValue && ys[baseId] && (ys[baseId] = ys[baseId].map(function (v) {
6758 return (isMin ? v < 0 : v > 0) ? v : 0;
6759 }));
6760
6761 for (var id, _ret2, _loop2 = function (k, id) {
6762 if (!ys[id]) return "continue";
6763 var axisId = $$.axis.getId(id);
6764 ys[id].forEach(function (v, i) {
6765 var val = +v,
6766 meetCondition = isMin ? val > 0 : val < 0;
6767 axisId !== baseAxisId || hasValue && meetCondition || (ys[baseId][i] += val);
6768 });
6769 }, k = 1; id = _idsInGroup[k]; k++) _ret2 = _loop2(k, id), _ret2 === "continue";
6770
6771 idsInGroup = _idsInGroup;
6772 }, j = 0; idsInGroup = dataGroups[j]; j++) _ret = _loop(j, idsInGroup), _ret === "continue";
6773 }(), getMinMax(type, Object.keys(ys).map(function (key) {
6774 return getMinMax(type, ys[key]);
6775 }));
6776 },
6777 getYDomainMin: function getYDomainMin(targets) {
6778 return this.getYDomainMinMax(targets, "min");
6779 },
6780 getYDomainMax: function getYDomainMax(targets) {
6781 return this.getYDomainMinMax(targets, "max");
6782 },
6783
6784 /**
6785 * Check if hidden targets bound to the given axis id
6786 * @return {Boolean}
6787 * @private
6788 */
6789 isHiddenTargetWithYDomain: function isHiddenTargetWithYDomain(id) {
6790 var $$ = this;
6791 return $$.hiddenTargetIds.some(function (v) {
6792 return $$.axis.getId(v) === id;
6793 });
6794 },
6795 getYDomain: function getYDomain(targets, axisId, xDomain) {
6796 var $$ = this,
6797 config = $$.config,
6798 pfx = "axis_".concat(axisId);
6799 if ($$.isStackNormalized()) return [0, 100];
6800 var targetsByAxisId = targets.filter(function (t) {
6801 return $$.axis.getId(t.id) === axisId;
6802 }),
6803 yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId;
6804 if (yTargets.length === 0) return $$.isHiddenTargetWithYDomain(axisId) ? $$[axisId].domain() : axisId === "y2" ? $$.y.domain() : // When all data bounds to y2, y Axis domain is called prior y2.
6805 // So, it needs to call to get y2 domain here
6806 $$.getYDomain(targets, "y2", xDomain);
6807 var yMin = config["".concat(pfx, "_min")],
6808 yMax = config["".concat(pfx, "_max")],
6809 yDomainMin = $$.getYDomainMin(yTargets),
6810 yDomainMax = $$.getYDomainMax(yTargets),
6811 center = config["".concat(pfx, "_center")],
6812 isZeroBased = ["area", "bar", "bubble", "line", "scatter"].some(function (v) {
6813 return $$.hasType(v, yTargets) && config["".concat(v, "_zerobased")];
6814 }),
6815 isInverted = config["".concat(pfx, "_inverted")],
6816 showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated,
6817 showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated;
6818 yDomainMin = isValue(yMin) ? yMin : isValue(yMax) ? yDomainMin < yMax ? yDomainMin : yMax - 10 : yDomainMin, yDomainMax = isValue(yMax) ? yMax : isValue(yMin) ? yMin < yDomainMax ? yDomainMax : yMin + 10 : yDomainMax, isNaN(yDomainMin) && (yDomainMin = 0), isNaN(yDomainMax) && (yDomainMax = yDomainMin), yDomainMin === yDomainMax && (yDomainMin < 0 ? yDomainMax = 0 : yDomainMin = 0);
6819 var isAllPositive = yDomainMin >= 0 && yDomainMax >= 0,
6820 isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
6821 (isValue(yMin) && isAllPositive || isValue(yMax) && isAllNegative) && (isZeroBased = !1), isZeroBased && (isAllPositive && (yDomainMin = 0), isAllNegative && (yDomainMax = 0));
6822 var domainLength = Math.abs(yDomainMax - yDomainMin),
6823 padding = {
6824 top: domainLength * .1,
6825 bottom: domainLength * .1
6826 };
6827
6828 if (isDefined(center)) {
6829 var yDomainAbs = Math.max(Math.abs(yDomainMin), Math.abs(yDomainMax));
6830 yDomainMax = center + yDomainAbs, yDomainMin = center - yDomainAbs;
6831 } // add padding for data label
6832
6833
6834 if (showHorizontalDataLabel) {
6835 var diff = diffDomain($$.y.range()),
6836 ratio = $$.getDataLabelLength(yDomainMin, yDomainMax, "width").map(function (v) {
6837 return v / diff;
6838 });
6839 ["bottom", "top"].forEach(function (v, i) {
6840 padding[v] += domainLength * (ratio[i] / (1 - ratio[0] - ratio[1]));
6841 });
6842 } else if (showVerticalDataLabel) {
6843 var lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, "height");
6844 ["bottom", "top"].forEach(function (v, i) {
6845 padding[v] += $$.axis.convertPixelsToAxisPadding(lengths[i], domainLength);
6846 });
6847 } // if padding is set, the domain will be updated relative the current domain value
6848 // ex) $$.height=300, padding.top=150, domainLength=4 --> domain=6
6849
6850
6851 var p = config["".concat(pfx, "_padding")];
6852 notEmpty(p) && ["bottom", "top"].forEach(function (v) {
6853 padding[v] = $$.axis.getPadding(p, v, padding[v], domainLength);
6854 }), isZeroBased && (isAllPositive && (padding.bottom = yDomainMin), isAllNegative && (padding.top = -yDomainMax));
6855 var domain = [yDomainMin - padding.bottom, yDomainMax + padding.top];
6856 return isInverted ? domain.reverse() : domain;
6857 },
6858 getXDomainMinMax: function getXDomainMinMax(targets, type) {
6859 var $$ = this,
6860 configValue = $$.config["axis_x_".concat(type)],
6861 dataValue = getMinMax(type, targets.map(function (t) {
6862 return getMinMax(type, t.values.map(function (v) {
6863 return v.x;
6864 }));
6865 })),
6866 value = isObject(configValue) ? configValue.value : configValue;
6867 return value = isDefined(value) && $$.isTimeSeries() ? $$.parseDate(value) : value, isObject(configValue) && configValue.fit && (type === "min" && value < dataValue || type === "max" && value > dataValue) && (value = undefined), isDefined(value) ? value : dataValue;
6868 },
6869 getXDomainMin: function getXDomainMin(targets) {
6870 return this.getXDomainMinMax(targets, "min");
6871 },
6872 getXDomainMax: function getXDomainMax(targets) {
6873 return this.getXDomainMinMax(targets, "max");
6874 },
6875 getXDomainPadding: function getXDomainPadding(domain) {
6876 var maxDataCount,
6877 padding,
6878 $$ = this,
6879 config = $$.config,
6880 diff = domain[1] - domain[0],
6881 xPadding = config.axis_x_padding;
6882 $$.isCategorized() ? padding = 0 : $$.hasType("bar") ? (maxDataCount = $$.getMaxDataCount(), padding = maxDataCount > 1 ? diff / (maxDataCount - 1) / 2 : .5) : padding = diff * .01;
6883 var left = padding,
6884 right = padding;
6885 return isObject(xPadding) && notEmpty(xPadding) ? (left = isValue(xPadding.left) ? xPadding.left : padding, right = isValue(xPadding.right) ? xPadding.right : padding) : isNumber(config.axis_x_padding) && (left = xPadding, right = xPadding), {
6886 left: left,
6887 right: right
6888 };
6889 },
6890 getXDomain: function getXDomain(targets) {
6891 var $$ = this,
6892 xDomain = [$$.getXDomainMin(targets), $$.getXDomainMax(targets)],
6893 _xDomain2 = _slicedToArray(xDomain, 2),
6894 firstX = _xDomain2[0],
6895 lastX = _xDomain2[1],
6896 padding = $$.getXDomainPadding(xDomain),
6897 min = 0,
6898 max = 0;
6899
6900 return firstX - lastX !== 0 || $$.isCategorized() || ($$.isTimeSeries() ? (firstX = new Date(firstX.getTime() * .5), lastX = new Date(lastX.getTime() * 1.5)) : (firstX = firstX === 0 ? 1 : firstX * .5, lastX = lastX === 0 ? -1 : lastX * 1.5)), (firstX || firstX === 0) && (min = $$.isTimeSeries() ? new Date(firstX.getTime() - padding.left) : firstX - padding.left), (lastX || lastX === 0) && (max = $$.isTimeSeries() ? new Date(lastX.getTime() + padding.right) : lastX + padding.right), [min, max];
6901 },
6902 updateXDomain: function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain, withTrim, domain) {
6903 var $$ = this,
6904 config = $$.config,
6905 zoomEnabled = config.zoom_enabled;
6906
6907 if (withUpdateOrgXDomain && ($$.x.domain(domain || sortValue($$.getXDomain(targets))), $$.orgXDomain = $$.x.domain(), zoomEnabled && $$.zoom.updateScaleExtent(), $$.subX.domain($$.x.domain()), $$.brush && $$.brush.scale($$.subX)), withUpdateXDomain) {
6908 var domainValue = domain || !$$.brush || brushEmpty($$) ? $$.orgXDomain : getBrushSelection($$).map($$.subX.invert);
6909 $$.x.domain(domainValue), zoomEnabled && $$.zoom.updateScaleExtent();
6910 } // Trim domain when too big by zoom mousemove event
6911
6912
6913 return withTrim && $$.x.domain($$.trimXDomain($$.x.orgDomain())), $$.x.domain();
6914 },
6915 trimXDomain: function trimXDomain(domain) {
6916 var zoomDomain = this.getZoomDomain(),
6917 _zoomDomain = _slicedToArray(zoomDomain, 2),
6918 min = _zoomDomain[0],
6919 max = _zoomDomain[1];
6920
6921 return domain[0] <= min && (domain[1] = +domain[1] + (min - domain[0]), domain[0] = min), max <= domain[1] && (domain[0] = +domain[0] - (domain[1] - max), domain[1] = max), domain;
6922 }
6923});
6924// CONCATENATED MODULE: ./src/data/data.js
6925
6926
6927/**
6928 * Copyright (c) 2017 ~ present NAVER Corp.
6929 * billboard.js project is licensed under the MIT license
6930 */
6931
6932
6933
6934extend(ChartInternal_ChartInternal.prototype, {
6935 isX: function isX(key) {
6936 var $$ = this,
6937 config = $$.config,
6938 dataKey = config.data_x && key === config.data_x,
6939 existValue = notEmpty(config.data_xs) && util_hasValue(config.data_xs, key);
6940 return dataKey || existValue;
6941 },
6942 isNotX: function isNotX(key) {
6943 return !this.isX(key);
6944 },
6945 isStackNormalized: function isStackNormalized() {
6946 var config = this.config;
6947 return config.data_stack_normalize && config.data_groups.length;
6948 },
6949 isGrouped: function isGrouped(id) {
6950 return this.config.data_groups.map(function (v) {
6951 return v.indexOf(id) >= 0;
6952 })[0];
6953 },
6954 getXKey: function getXKey(id) {
6955 var $$ = this,
6956 config = $$.config;
6957 return config.data_x ? config.data_x : notEmpty(config.data_xs) ? config.data_xs[id] : null;
6958 },
6959 getXValuesOfXKey: function getXValuesOfXKey(key, targets) {
6960 var xValues,
6961 $$ = this,
6962 ids = targets && notEmpty(targets) ? $$.mapToIds(targets) : [];
6963 return ids.forEach(function (id) {
6964 $$.getXKey(id) === key && (xValues = $$.data.xs[id]);
6965 }), xValues;
6966 },
6967
6968 /**
6969 * Get index number based on given x Axis value
6970 * @param {Date|Number|String} x x Axis to be compared
6971 * @param {Array} basedX x Axis list to be based on
6972 * @return {Number} index number
6973 * @private
6974 */
6975 getIndexByX: function getIndexByX(x, basedX) {
6976 var $$ = this;
6977 return basedX ? basedX.indexOf(isString(x) ? x : +x) : ($$.filterByX($$.data.targets, x)[0] || {
6978 index: null
6979 }).index;
6980 },
6981 getXValue: function getXValue(id, i) {
6982 var $$ = this;
6983 return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i;
6984 },
6985 getOtherTargetXs: function getOtherTargetXs() {
6986 var $$ = this,
6987 idsForX = Object.keys($$.data.xs);
6988 return idsForX.length ? $$.data.xs[idsForX[0]] : null;
6989 },
6990 getOtherTargetX: function getOtherTargetX(index) {
6991 var xs = this.getOtherTargetXs();
6992 return xs && index < xs.length ? xs[index] : null;
6993 },
6994 addXs: function addXs(xs) {
6995 var $$ = this;
6996 Object.keys(xs).forEach(function (id) {
6997 $$.config.data_xs[id] = xs[id];
6998 });
6999 },
7000 isMultipleX: function isMultipleX() {
7001 return notEmpty(this.config.data_xs) || !this.config.data_xSort || this.hasType("bubble") || this.hasType("scatter");
7002 },
7003 addName: function addName(data) {
7004 var name,
7005 $$ = this;
7006 return data && (name = $$.config.data_names[data.id], data.name = name === undefined ? data.id : name), data;
7007 },
7008 getAllValuesOnIndex: function getAllValuesOnIndex(index) {
7009 var $$ = this;
7010 return $$.filterTargetsToShow($$.data.targets).map(function (t) {
7011 return $$.addName($$.getValueOnIndex(t.values, index));
7012 });
7013 },
7014 getValueOnIndex: function getValueOnIndex(values, index) {
7015 var valueOnIndex = values.filter(function (v) {
7016 return v.index === index;
7017 });
7018 return valueOnIndex.length ? valueOnIndex[0] : null;
7019 },
7020 updateTargetX: function updateTargetX(targets, x) {
7021 var $$ = this;
7022 targets.forEach(function (t) {
7023 t.values.forEach(function (v, i) {
7024 v.x = $$.generateTargetX(x[i], t.id, i);
7025 }), $$.data.xs[t.id] = x;
7026 });
7027 },
7028 updateTargetXs: function updateTargetXs(targets, xs) {
7029 var $$ = this;
7030 targets.forEach(function (t) {
7031 xs[t.id] && $$.updateTargetX([t], xs[t.id]);
7032 });
7033 },
7034 generateTargetX: function generateTargetX(rawX, id, index) {
7035 var $$ = this,
7036 x = $$.isCategorized() ? index : rawX || index;
7037 return $$.isTimeSeries() ? x = rawX ? $$.parseDate(rawX) : $$.parseDate($$.getXValue(id, index)) : $$.isCustomX() && !$$.isCategorized() && (x = isValue(rawX) ? +rawX : $$.getXValue(id, index)), x;
7038 },
7039 cloneTarget: function cloneTarget(target) {
7040 return {
7041 id: target.id,
7042 id_org: target.id_org,
7043 values: target.values.map(function (d) {
7044 return {
7045 x: d.x,
7046 value: d.value,
7047 id: d.id
7048 };
7049 })
7050 };
7051 },
7052 updateXs: function updateXs(values) {
7053 values.length && (this.xs = values.map(function (v) {
7054 return v.x;
7055 }));
7056 },
7057 getPrevX: function getPrevX(i) {
7058 var x = this.xs[i - 1];
7059 return isDefined(x) ? x : null;
7060 },
7061 getNextX: function getNextX(i) {
7062 var x = this.xs[i + 1];
7063 return isDefined(x) ? x : null;
7064 },
7065
7066 /**
7067 * Get base value isAreaRangeType
7068 * @param data Data object
7069 * @return {Number}
7070 * @private
7071 */
7072 getBaseValue: function getBaseValue(data) {
7073 var $$ = this,
7074 value = data.value;
7075 return value && ($$.isAreaRangeType(data) ? value = $$.getAreaRangeData(data, "mid") : $$.isBubbleZType(data) && (value = $$.getBubbleZData(value, "y"))), value;
7076 },
7077
7078 /**
7079 * Get min/max value from the data
7080 * @private
7081 * @param {Array} data array data to be evaluated
7082 * @return {{min: {Number}, max: {Number}}}
7083 */
7084 getMinMaxValue: function getMinMaxValue(data) {
7085 var min,
7086 max,
7087 getBaseValue = this.getBaseValue.bind(this);
7088 return (data || this.data.targets.map(function (t) {
7089 return t.values;
7090 })).forEach(function (v, i) {
7091 var value = v.map(getBaseValue).filter(isNumber);
7092 min = Math.min.apply(Math, [i ? min : Infinity].concat(_toConsumableArray(value))), max = Math.max.apply(Math, [i ? max : -Infinity].concat(_toConsumableArray(value)));
7093 }), {
7094 min: min,
7095 max: max
7096 };
7097 },
7098
7099 /**
7100 * Get the min/max data
7101 * @private
7102 * @return {{min: Array, max: Array}}
7103 */
7104 getMinMaxData: function getMinMaxData() {
7105 var $$ = this,
7106 cacheKey = "$minMaxData",
7107 minMaxData = $$.getCache(cacheKey);
7108
7109 if (!minMaxData) {
7110 var data = $$.data.targets.map(function (t) {
7111 return t.values;
7112 }),
7113 minMax = $$.getMinMaxValue(data),
7114 min = [],
7115 max = [];
7116 // update the cached data
7117 data.forEach(function (v) {
7118 var minData = $$.getFilteredDataByValue(v, minMax.min),
7119 maxData = $$.getFilteredDataByValue(v, minMax.max);
7120 minData.length && (min = min.concat(minData)), maxData.length && (max = max.concat(maxData));
7121 }), $$.addCache(cacheKey, minMaxData = {
7122 min: min,
7123 max: max
7124 });
7125 }
7126
7127 return minMaxData;
7128 },
7129
7130 /**
7131 * Get sum of data per index
7132 * @private
7133 * @return {Array}
7134 */
7135 getTotalPerIndex: function getTotalPerIndex() {
7136 var $$ = this,
7137 sum = $$.getCache("$totalPerIndex");
7138 return $$.isStackNormalized() && !sum && (sum = [], $$.data.targets.forEach(function (row) {
7139 row.values.forEach(function (v, i) {
7140 sum[i] || (sum[i] = 0), sum[i] += isNumber(v.value) ? v.value : 0;
7141 });
7142 })), sum;
7143 },
7144
7145 /**
7146 * Get total data sum
7147 * @return {Number}
7148 * @private
7149 */
7150 getTotalDataSum: function getTotalDataSum() {
7151 var $$ = this,
7152 cacheKey = "$totalDataSum",
7153 totalDataSum = $$.getCache(cacheKey);
7154
7155 if (!totalDataSum) {
7156 var total = mergeArray($$.data.targets.map(function (t) {
7157 return t.values;
7158 })).map(function (v) {
7159 return v.value;
7160 }).reduce(function (p, c) {
7161 return p + c;
7162 });
7163 $$.addCache(cacheKey, totalDataSum = total);
7164 }
7165
7166 return totalDataSum;
7167 },
7168
7169 /**
7170 * Get filtered data by value
7171 * @param {Object} data
7172 * @param {Number} value
7173 * @return {Array} filtered array data
7174 * @private
7175 */
7176 getFilteredDataByValue: function getFilteredDataByValue(data, value) {
7177 var _this = this;
7178
7179 return data.filter(function (t) {
7180 return _this.getBaseValue(t) === value;
7181 });
7182 },
7183
7184 /**
7185 * Return the max length of the data
7186 * @return {Number} max data length
7187 * @private
7188 */
7189 getMaxDataCount: function getMaxDataCount() {
7190 return Math.max.apply(Math, _toConsumableArray(this.data.targets.map(function (t) {
7191 return t.values.length;
7192 })));
7193 },
7194 getMaxDataCountTarget: function getMaxDataCountTarget() {
7195 var target = this.filterTargetsToShow() || [],
7196 length = target.length;
7197 return length > 1 ? (target = target.map(function (t) {
7198 return t.values;
7199 }).reduce(function (a, b) {
7200 return a.concat(b);
7201 }).map(function (v) {
7202 return v.x;
7203 }), target = sortValue(getUnique(target)).map(function (x, index) {
7204 return {
7205 x: x,
7206 index: index
7207 };
7208 })) : length && (target = target[0].values), target;
7209 },
7210 mapToIds: function mapToIds(targets) {
7211 return targets.map(function (d) {
7212 return d.id;
7213 });
7214 },
7215 mapToTargetIds: function mapToTargetIds(ids) {
7216 var $$ = this;
7217 return ids ? isArray(ids) ? ids.concat() : [ids] : $$.mapToIds($$.data.targets);
7218 },
7219 hasTarget: function hasTarget(targets, id) {
7220 var ids = this.mapToIds(targets);
7221
7222 for (var val, i = 0; val = ids[i]; i++) if (val === id) return !0;
7223
7224 return !1;
7225 },
7226 isTargetToShow: function isTargetToShow(targetId) {
7227 return this.hiddenTargetIds.indexOf(targetId) < 0;
7228 },
7229 isLegendToShow: function isLegendToShow(targetId) {
7230 return this.hiddenLegendIds.indexOf(targetId) < 0;
7231 },
7232 filterTargetsToShow: function filterTargetsToShow(targets) {
7233 var $$ = this;
7234 return (targets || $$.data.targets).filter(function (t) {
7235 return $$.isTargetToShow(t.id);
7236 });
7237 },
7238 mapTargetsToUniqueXs: function mapTargetsToUniqueXs(targets) {
7239 var $$ = this,
7240 xs = [];
7241 return targets && targets.length && (xs = getUnique(mergeArray(targets.map(function (t) {
7242 return t.values.map(function (v) {
7243 return +v.x;
7244 });
7245 }))), xs = $$.isTimeSeries() ? xs.map(function (x) {
7246 return new Date(+x);
7247 }) : xs.map(function (x) {
7248 return +x;
7249 })), sortValue(xs);
7250 },
7251 addHiddenTargetIds: function addHiddenTargetIds(targetIds) {
7252 this.hiddenTargetIds = this.hiddenTargetIds.concat(targetIds);
7253 },
7254 removeHiddenTargetIds: function removeHiddenTargetIds(targetIds) {
7255 this.hiddenTargetIds = this.hiddenTargetIds.filter(function (id) {
7256 return targetIds.indexOf(id) < 0;
7257 });
7258 },
7259 addHiddenLegendIds: function addHiddenLegendIds(targetIds) {
7260 this.hiddenLegendIds = this.hiddenLegendIds.concat(targetIds);
7261 },
7262 removeHiddenLegendIds: function removeHiddenLegendIds(targetIds) {
7263 this.hiddenLegendIds = this.hiddenLegendIds.filter(function (id) {
7264 return targetIds.indexOf(id) < 0;
7265 });
7266 },
7267 getValuesAsIdKeyed: function getValuesAsIdKeyed(targets) {
7268 var $$ = this,
7269 ys = {},
7270 isMultipleX = $$.isMultipleX(),
7271 xs = isMultipleX ? $$.mapTargetsToUniqueXs(targets).map(function (v) {
7272 return isString(v) ? v : +v;
7273 }) : null;
7274 return targets.forEach(function (t) {
7275 var data = [];
7276 t.values.forEach(function (v) {
7277 var value = v.value;
7278 isArray(value) ? data.push.apply(data, _toConsumableArray(value)) : isObject(value) && "high" in value ? data.push.apply(data, _toConsumableArray(Object.values(value))) : $$.isBubbleZType(v) ? data.push($$.getBubbleZData(value, "y")) : isMultipleX ? data[$$.getIndexByX(v.x, xs)] = value : data.push(value);
7279 }), ys[t.id] = data;
7280 }), ys;
7281 },
7282 checkValueInTargets: function checkValueInTargets(targets, checker) {
7283 var values,
7284 ids = Object.keys(targets);
7285
7286 for (var i = 0; i < ids.length; i++) {
7287 values = targets[ids[i]].values;
7288
7289 for (var j = 0; j < values.length; j++) if (checker(values[j].value)) return !0;
7290 }
7291
7292 return !1;
7293 },
7294 hasMultiTargets: function hasMultiTargets() {
7295 return this.filterTargetsToShow().length > 1;
7296 },
7297 hasNegativeValueInTargets: function hasNegativeValueInTargets(targets) {
7298 return this.checkValueInTargets(targets, function (v) {
7299 return v < 0;
7300 });
7301 },
7302 hasPositiveValueInTargets: function hasPositiveValueInTargets(targets) {
7303 return this.checkValueInTargets(targets, function (v) {
7304 return v > 0;
7305 });
7306 },
7307 _checkOrder: function _checkOrder(type) {
7308 var config = this.config,
7309 order = config.data_order;
7310 return isString(order) && order.toLowerCase() === type;
7311 },
7312 isOrderDesc: function isOrderDesc() {
7313 return this._checkOrder("desc");
7314 },
7315 isOrderAsc: function isOrderAsc() {
7316 return this._checkOrder("asc");
7317 },
7318
7319 /**
7320 * Sort targets data
7321 * @param {Array} targetsValue
7322 * @return {Array}
7323 * @private
7324 */
7325 orderTargets: function orderTargets(targetsValue) {
7326 var $$ = this,
7327 config = $$.config,
7328 targets = _toConsumableArray(targetsValue),
7329 orderAsc = $$.isOrderAsc(),
7330 orderDesc = $$.isOrderDesc();
7331
7332 // TODO: accept name array for order
7333 return orderAsc || orderDesc ? targets.sort(function (t1, t2) {
7334 var reducer = function (p, c) {
7335 return p + Math.abs(c.value);
7336 },
7337 t1Sum = t1.values.reduce(reducer, 0),
7338 t2Sum = t2.values.reduce(reducer, 0);
7339
7340 return orderAsc ? t2Sum - t1Sum : t1Sum - t2Sum;
7341 }) : isFunction(config.data_order) && targets.sort(config.data_order), targets;
7342 },
7343 filterByX: function filterByX(targets, x) {
7344 return mergeArray(targets.map(function (t) {
7345 return t.values;
7346 })).filter(function (v) {
7347 return v.x - x === 0;
7348 });
7349 },
7350 filterRemoveNull: function filterRemoveNull(data) {
7351 var _this2 = this;
7352
7353 return data.filter(function (d) {
7354 return isValue(_this2.getBaseValue(d));
7355 });
7356 },
7357 filterByXDomain: function filterByXDomain(targets, xDomain) {
7358 return targets.map(function (t) {
7359 return {
7360 id: t.id,
7361 id_org: t.id_org,
7362 values: t.values.filter(function (v) {
7363 return xDomain[0] <= v.x && v.x <= xDomain[1];
7364 })
7365 };
7366 });
7367 },
7368 hasDataLabel: function hasDataLabel() {
7369 var dataLabels = this.config.data_labels;
7370 return isBoolean(dataLabels) && dataLabels || isObjectType(dataLabels) && notEmpty(dataLabels);
7371 },
7372 getDataLabelLength: function getDataLabelLength(min, max, key) {
7373 var $$ = this,
7374 lengths = [0, 0];
7375 return $$.selectChart.select("svg").selectAll(".dummy").data([min, max]).enter().append("text").text(function (d) {
7376 return $$.dataLabelFormat(d.id)(d);
7377 }).each(function (d, i) {
7378 lengths[i] = this.getBoundingClientRect()[key] * 1.3;
7379 }).remove(), lengths;
7380 },
7381 isNoneArc: function isNoneArc(d) {
7382 return this.hasTarget(this.data.targets, d.id);
7383 },
7384 isArc: function isArc(d) {
7385 return "data" in d && this.hasTarget(this.data.targets, d.data.id);
7386 },
7387 findSameXOfValues: function findSameXOfValues(values, index) {
7388 var i,
7389 targetX = values[index].x,
7390 sames = [];
7391
7392 for (i = index - 1; i >= 0 && !(targetX !== values[i].x); i--) sames.push(values[i]);
7393
7394 for (i = index; i < values.length && !(targetX !== values[i].x); i++) sames.push(values[i]);
7395
7396 return sames;
7397 },
7398 findClosestFromTargets: function findClosestFromTargets(targets, pos) {
7399 var $$ = this,
7400 candidates = targets.map(function (target) {
7401 return $$.findClosest(target.values, pos);
7402 });
7403 // map to array of closest points of each target
7404 // decide closest point and return
7405 return $$.findClosest(candidates, pos);
7406 },
7407 findClosest: function findClosest(values, pos) {
7408 var closest,
7409 $$ = this,
7410 data = values.filter(function (v) {
7411 return v && isValue(v.value);
7412 }),
7413 minDist = $$.config.point_sensitivity;
7414 return data.filter(function (v) {
7415 return $$.isBarType(v.id);
7416 }).forEach(function (v) {
7417 var shape = $$.main.select(".".concat(config_classes.bars).concat($$.getTargetSelectorSuffix(v.id), " .").concat(config_classes.bar, "-").concat(v.index)).node();
7418 !closest && $$.isWithinBar(shape) && (closest = v);
7419 }), data.filter(function (v) {
7420 return !$$.isBarType(v.id);
7421 }).forEach(function (v) {
7422 var d = $$.dist(v, pos);
7423 d < minDist && (minDist = d, closest = v);
7424 }), closest;
7425 },
7426 dist: function dist(data, pos) {
7427 var $$ = this,
7428 isRotated = $$.config.axis_rotated,
7429 xIndex = isRotated ? 1 : 0,
7430 yIndex = isRotated ? 0 : 1,
7431 y = $$.circleY(data, data.index),
7432 x = ($$.zoomScale || $$.x)(data.x);
7433 return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2));
7434 },
7435
7436 /**
7437 * Convert data for step type
7438 * @param {Array} values Object data values
7439 * @return {Array}
7440 * @private
7441 */
7442 convertValuesToStep: function convertValuesToStep(values) {
7443 var $$ = this,
7444 config = $$.config,
7445 isRotated = config.axis_rotated,
7446 stepType = config.line_step_type,
7447 isCategorized = $$.isCategorized(),
7448 converted = isArray(values) ? values.concat() : [values];
7449 if (!isRotated && !isCategorized) return values; // insert & append cloning first/last value to be fully rendered covering on each gap sides
7450
7451 var id = converted[0].id,
7452 x = converted[0].x - 1,
7453 value = converted[0].value; // insert
7454
7455 return isCategorized && converted.unshift({
7456 x: x,
7457 value: value,
7458 id: id
7459 }), stepType === "step-after" && converted.unshift({
7460 x: x - 1,
7461 value: value,
7462 id: id
7463 }), x = converted.length, value = converted[x - 1].value, isCategorized && converted.push({
7464 x: x,
7465 value: value,
7466 id: id
7467 }), stepType === "step-before" && converted.push({
7468 x: x + 1,
7469 value: value,
7470 id: id
7471 }), converted;
7472 },
7473 convertValuesToRange: function convertValuesToRange(values) {
7474 var converted = isArray(values) ? values.concat() : [values],
7475 ranges = [];
7476 return converted.forEach(function (range) {
7477 var x = range.x,
7478 id = range.id;
7479 ranges.push({
7480 x: x,
7481 id: id,
7482 value: range.value[0]
7483 }), ranges.push({
7484 x: x,
7485 id: id,
7486 value: range.value[2]
7487 });
7488 }), ranges;
7489 },
7490 updateDataAttributes: function updateDataAttributes(name, attrs) {
7491 var $$ = this,
7492 config = $$.config,
7493 current = config["data_".concat(name)];
7494 return isUndefined(attrs) ? current : (Object.keys(attrs).forEach(function (id) {
7495 current[id] = attrs[id];
7496 }), $$.redraw({
7497 withLegend: !0
7498 }), current);
7499 },
7500 getAreaRangeData: function getAreaRangeData(d, type) {
7501 var value = d.value;
7502
7503 if (isArray(value)) {
7504 var index = ["high", "mid", "low"].indexOf(type);
7505 return index === -1 ? null : value[index];
7506 }
7507
7508 return value[type];
7509 },
7510
7511 /**
7512 * Get ratio value
7513 * @param {String} type Ratio for given type
7514 * @param {Object} d Data value object
7515 * @param {Boolean} asPercent Convert the return as percent or not
7516 * @return {Number} Ratio value
7517 * @private
7518 */
7519 getRatio: function getRatio(type, d, asPercent) {
7520 var $$ = this,
7521 config = $$.config,
7522 api = $$.api,
7523 ratio = 0;
7524
7525 if (d && api.data.shown.call(api).length) {
7526 var dataValues = api.data.values.bind(api);
7527 if (ratio = d.ratio || d.value, type === "arc") {
7528 // if has padAngle set, calculate rate based on value
7529 if ($$.pie.padAngle()()) {
7530 var total = $$.getTotalDataSum();
7531 $$.hiddenTargetIds.length && (total -= dataValues($$.hiddenTargetIds).reduce(function (p, c) {
7532 return p + c;
7533 })), ratio = d.value / total;
7534 } else ratio = (d.endAngle - d.startAngle) / (Math.PI * ($$.hasType("gauge") && !config.gauge_fullCircle ? 1 : 2));
7535 } else if (type === "index") {
7536 var _total = this.getTotalPerIndex();
7537
7538 if ($$.hiddenTargetIds.length) {
7539 var hiddenSum = dataValues($$.hiddenTargetIds, !1);
7540 hiddenSum.length && (hiddenSum = hiddenSum.reduce(function (acc, curr) {
7541 return acc.map(function (v, i) {
7542 return (isNumber(v) ? v : 0) + curr[i];
7543 });
7544 }), _total = _total.map(function (v, i) {
7545 return v - hiddenSum[i];
7546 }));
7547 }
7548
7549 d.ratio = isNumber(d.value) && _total && _total[d.index] > 0 ? d.value / _total[d.index] : 0, ratio = d.ratio;
7550 } else type === "radar" && (ratio = parseFloat(Math.max(d.value, 0)) / $$.maxValue * config.radar_size_ratio);
7551 }
7552
7553 return asPercent && ratio ? ratio * 100 : ratio;
7554 },
7555
7556 /**
7557 * Sort data index to be aligned with x axis.
7558 * @param {Array} tickValues Tick array values
7559 * @private
7560 */
7561 updateDataIndexByX: function updateDataIndexByX(tickValues) {
7562 var $$ = this,
7563 tickValueMap = tickValues.reduce(function (out, tick, index) {
7564 return out[+tick.x] = index, out;
7565 }, {});
7566 $$.data.targets.forEach(function (t) {
7567 t.values.forEach(function (value, valueIndex) {
7568 var index = tickValueMap[+value.x];
7569 index === undefined && (index = valueIndex), value.index = index;
7570 });
7571 });
7572 }
7573});
7574// EXTERNAL MODULE: external {"commonjs":"d3-dsv","commonjs2":"d3-dsv","amd":"d3-dsv","root":"d3"}
7575var external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_ = __webpack_require__(8);
7576
7577// CONCATENATED MODULE: ./src/data/data.convert.js
7578/**
7579 * Copyright (c) 2017 ~ present NAVER Corp.
7580 * billboard.js project is licensed under the MIT license
7581 */
7582
7583
7584
7585/**
7586 * Convert CSV/TSV data
7587 * @param {Object} parser Parser object
7588 * @param {Object} xsv Data
7589 * @private
7590 * @return {Object}
7591 */
7592
7593var convertCsvTsvToData = function (parser, xsv) {
7594 var d,
7595 rows = parser.rows(xsv);
7596 return rows.length === 1 ? (d = [{}], rows[0].forEach(function (id) {
7597 d[0][id] = null;
7598 })) : d = parser.parse(xsv), d;
7599};
7600
7601extend(ChartInternal_ChartInternal.prototype, {
7602 /**
7603 * Convert data according its type
7604 * @param {Object} args data object
7605 * @param {Function} [callback] callback for url(XHR) type loading
7606 * @return {Object}
7607 * @private
7608 */
7609 convertData: function convertData(args, callback) {
7610 var data,
7611 $$ = this;
7612 if (args.bindto ? (data = {}, ["url", "mimeType", "headers", "keys", "json", "keys", "rows", "columns"].forEach(function (v) {
7613 var key = "data_".concat(v);
7614 key in args && (data[v] = args[key]);
7615 })) : data = args, data.url && callback) $$.convertUrlToData(data.url, data.mimeType, data.headers, data.keys, callback);else if (data.json) data = $$.convertJsonToData(data.json, data.keys);else if (data.rows) data = $$.convertRowsToData(data.rows);else if (data.columns) data = $$.convertColumnsToData(data.columns);else if (args.bindto) throw Error("url or json or rows or columns is required.");
7616 return isArray(data) && data;
7617 },
7618
7619 /**
7620 * Convert URL data
7621 * @param {String} url Remote URL
7622 * @param {String} mimeType MIME type string: json | csv | tsv
7623 * @param {Object} headers Header object
7624 * @param {Object} keys Key object
7625 * @param {Function} done Callback function
7626 * @private
7627 */
7628 convertUrlToData: function convertUrlToData(url) {
7629 var _this = this,
7630 mimeType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "csv",
7631 headers = arguments.length > 2 ? arguments[2] : undefined,
7632 keys = arguments.length > 3 ? arguments[3] : undefined,
7633 done = arguments.length > 4 ? arguments[4] : undefined,
7634 req = new XMLHttpRequest();
7635
7636 req.open("GET", url), headers && Object.keys(headers).forEach(function (key) {
7637 req.setRequestHeader(key, headers[key]);
7638 }), req.onreadystatechange = function () {
7639 if (req.readyState === 4) if (req.status === 200) {
7640 var response = req.responseText;
7641 response && done.call(_this, _this["convert".concat(capitalize(mimeType), "ToData")](mimeType === "json" ? JSON.parse(response) : response, keys));
7642 } else throw new Error("".concat(url, ": Something went wrong loading!"));
7643 }, req.send();
7644 },
7645 convertCsvToData: function convertCsvToData(xsv) {
7646 return convertCsvTsvToData({
7647 rows: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_["csvParseRows"],
7648 parse: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_["csvParse"]
7649 }, xsv);
7650 },
7651 convertTsvToData: function convertTsvToData(tsv) {
7652 return convertCsvTsvToData({
7653 rows: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_["tsvParseRows"],
7654 parse: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_["tsvParse"]
7655 }, tsv);
7656 },
7657 convertJsonToData: function convertJsonToData(json, keysParam) {
7658 var targetKeys,
7659 data,
7660 _this2 = this,
7661 config = this.config,
7662 newRows = [];
7663
7664 if (isArray(json)) {
7665 var keys = keysParam || config.data_keys;
7666 keys.x ? (targetKeys = keys.value.concat(keys.x), config.data_x = keys.x) : targetKeys = keys.value, newRows.push(targetKeys), json.forEach(function (o) {
7667 var newRow = targetKeys.map(function (key) {
7668 // convert undefined to null because undefined data will be removed in convertDataToTargets()
7669 var v = _this2.findValueInJson(o, key);
7670
7671 return isUndefined(v) && (v = null), v;
7672 });
7673 newRows.push(newRow);
7674 }), data = this.convertRowsToData(newRows);
7675 } else Object.keys(json).forEach(function (key) {
7676 var tmp = json[key].concat();
7677 tmp.unshift(key), newRows.push(tmp);
7678 }), data = this.convertColumnsToData(newRows);
7679
7680 return data;
7681 },
7682 findValueInJson: function findValueInJson(object, path) {
7683 if (object[path] !== undefined) return object[path];
7684 var convertedPath = path.replace(/\[(\w+)\]/g, ".$1"),
7685 pathArray = convertedPath.replace(/^\./, "").split("."),
7686 target = object; // convert indexes to properties (replace [] with .)
7687
7688 return pathArray.some(function (k) {
7689 return !(target = target && k in target ? target[k] : undefined);
7690 }), target;
7691 },
7692 convertRowsToData: function convertRowsToData(rows) {
7693 var keys = rows[0],
7694 newRows = [];
7695 return rows.forEach(function (row, i) {
7696 if (i > 0) {
7697 var newRow = {};
7698 row.forEach(function (v, j) {
7699 if (isUndefined(v)) throw new Error("Source data is missing a component at (".concat(i, ", ").concat(j, ")!"));
7700 newRow[keys[j]] = v;
7701 }), newRows.push(newRow);
7702 }
7703 }), newRows;
7704 },
7705 convertColumnsToData: function convertColumnsToData(columns) {
7706 var newRows = [];
7707 return columns.forEach(function (col, i) {
7708 var key = col[0];
7709 col.forEach(function (v, j) {
7710 if (j > 0) {
7711 if (isUndefined(newRows[j - 1]) && (newRows[j - 1] = {}), isUndefined(v)) throw new Error("Source data is missing a component at (".concat(i, ", ").concat(j, ")!"));
7712 newRows[j - 1][key] = v;
7713 }
7714 });
7715 }), newRows;
7716 },
7717 convertDataToTargets: function convertDataToTargets(data, appendXs) {
7718 var xsData,
7719 _this3 = this,
7720 $$ = this,
7721 config = $$.config,
7722 isTimeSeries = $$.isTimeSeries(),
7723 dataKeys = Object.keys(data[0] || {}),
7724 ids = dataKeys.length ? dataKeys.filter($$.isNotX, $$) : [],
7725 xs = dataKeys.length ? dataKeys.filter($$.isX, $$) : [];
7726
7727 ids.forEach(function (id) {
7728 var xKey = _this3.getXKey(id);
7729
7730 _this3.isCustomX() || isTimeSeries ? xs.indexOf(xKey) >= 0 ? xsData = (appendXs && $$.data.xs[id] || []).concat(data.map(function (d) {
7731 return d[xKey];
7732 }).filter(isValue).map(function (rawX, i) {
7733 return $$.generateTargetX(rawX, id, i);
7734 })) : config.data_x ? xsData = _this3.getOtherTargetXs() : notEmpty(config.data_xs) && (xsData = $$.getXValuesOfXKey(xKey, $$.data.targets)) : xsData = data.map(function (d, i) {
7735 return i;
7736 }), xsData && (_this3.data.xs[id] = xsData);
7737 }), ids.forEach(function (id) {
7738 if (!_this3.data.xs[id]) throw new Error("x is not defined for id = \"".concat(id, "\"."));
7739 });
7740 // convert to target
7741 var targets = ids.map(function (id, index) {
7742 var convertedId = config.data_idConverter(id),
7743 xKey = $$.getXKey(id),
7744 isCategorized = $$.isCustomX() && $$.isCategorized(),
7745 hasCategory = isCategorized && data.map(function (v) {
7746 return v.x;
7747 }).every(function (v) {
7748 return config.axis_x_categories.indexOf(v) > -1;
7749 });
7750 return {
7751 id: convertedId,
7752 id_org: id,
7753 values: data.map(function (d, i) {
7754 var x,
7755 rawX = d[xKey],
7756 value = d[id];
7757 return value = value === null || isNaN(value) || isObject(value) ? isArray(value) || isObject(value) ? value : null : +value, isCategorized && index === 0 && !isUndefined(rawX) ? (!hasCategory && index === 0 && i === 0 && (config.axis_x_categories = []), x = config.axis_x_categories.indexOf(rawX), x === -1 && (x = config.axis_x_categories.length, config.axis_x_categories.push(rawX))) : x = $$.generateTargetX(rawX, id, i), (isUndefined(value) || $$.data.xs[id].length <= i) && (x = undefined), {
7758 x: x,
7759 value: value,
7760 id: convertedId
7761 };
7762 }).filter(function (v) {
7763 return isDefined(v.x);
7764 })
7765 };
7766 }); // finish targets
7767
7768 return targets.forEach(function (t) {
7769 config.data_xSort && (t.values = t.values.sort(function (v1, v2) {
7770 var x1 = v1.x || v1.x === 0 ? v1.x : Infinity,
7771 x2 = v2.x || v2.x === 0 ? v2.x : Infinity;
7772 return x1 - x2;
7773 })), t.values.forEach(function (v, i) {
7774 return v.index = i;
7775 }), $$.data.xs[t.id].sort(function (v1, v2) {
7776 return v1 - v2;
7777 });
7778 }), $$.hasNegativeValue = $$.hasNegativeValueInTargets(targets), $$.hasPositiveValue = $$.hasPositiveValueInTargets(targets), config.data_type && $$.setTargetType($$.mapToIds(targets).filter(function (id) {
7779 return !(id in config.data_types);
7780 }), config.data_type), targets.forEach(function (d) {
7781 return $$.addCache(d.id_org, d, !0);
7782 }), targets;
7783 }
7784});
7785// CONCATENATED MODULE: ./src/data/data.load.js
7786/**
7787 * Copyright (c) 2017 ~ present NAVER Corp.
7788 * billboard.js project is licensed under the MIT license
7789 */
7790
7791
7792
7793extend(ChartInternal_ChartInternal.prototype, {
7794 load: function load(rawTargets, args) {
7795 var $$ = this,
7796 targets = rawTargets;
7797 // Set targets
7798 // Redraw with new targets
7799 targets && (args.filter && (targets = targets.filter(args.filter)), (args.type || args.types) && targets.forEach(function (t) {
7800 var type = args.types && args.types[t.id] || args.type;
7801 $$.setTargetType(t.id, type);
7802 }), $$.data.targets.forEach(function (d) {
7803 for (var i = 0; i < targets.length; i++) if (d.id === targets[i].id) {
7804 d.values = targets[i].values, targets.splice(i, 1);
7805 break;
7806 }
7807 }), $$.data.targets = $$.data.targets.concat(targets)), $$.updateTargets($$.data.targets), $$.redraw({
7808 withUpdateOrgXDomain: !0,
7809 withUpdateXDomain: !0,
7810 withLegend: !0
7811 }), args.done && args.done();
7812 },
7813 loadFromArgs: function loadFromArgs(args) {
7814 var $$ = this; // prevent load when chart is already destroyed
7815
7816 if ($$.config) {
7817 $$.resetCache();
7818 var data = args.data || $$.convertData(args, function (d) {
7819 return $$.load($$.convertDataToTargets(d), args);
7820 });
7821 data && $$.load($$.convertDataToTargets(data), args);
7822 } // reset internally cached data
7823
7824 },
7825 unload: function unload(rawTargetIds, customDoneCb) {
7826 var $$ = this,
7827 done = customDoneCb,
7828 targetIds = rawTargetIds;
7829 // If no target, call done and return
7830 return $$.resetCache(), done || (done = function () {}), targetIds = targetIds.filter(function (id) {
7831 return $$.hasTarget($$.data.targets, id);
7832 }), targetIds && targetIds.length !== 0 ? void ($$.svg.selectAll(targetIds.map(function (id) {
7833 return $$.selectorTarget(id);
7834 })).transition().style("opacity", "0").remove().call($$.endall, done), targetIds.forEach(function (id) {
7835 $$.withoutFadeIn[id] = !1, $$.legend && $$.legend.selectAll(".".concat(config_classes.legendItem).concat($$.getTargetSelectorSuffix(id))).remove(), $$.data.targets = $$.data.targets.filter(function (t) {
7836 return t.id !== id;
7837 });
7838 })) : void done();
7839 }
7840});
7841// CONCATENATED MODULE: ./src/internals/category.js
7842/**
7843 * Copyright (c) 2017 ~ present NAVER Corp.
7844 * billboard.js project is licensed under the MIT license
7845 */
7846
7847
7848extend(ChartInternal_ChartInternal.prototype, {
7849 /**
7850 * Category Name
7851 * @private
7852 * @param {Number} index
7853 * @returns {String} gategory Name
7854 */
7855 categoryName: function categoryName(i) {
7856 var config = this.config;
7857 return i < config.axis_x_categories.length ? config.axis_x_categories[i] : i;
7858 }
7859});
7860// EXTERNAL MODULE: external {"commonjs":"d3-drag","commonjs2":"d3-drag","amd":"d3-drag","root":"d3"}
7861var external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_ = __webpack_require__(9);
7862
7863// CONCATENATED MODULE: ./src/interactions/interaction.js
7864/**
7865 * Copyright (c) 2017 ~ present NAVER Corp.
7866 * billboard.js project is licensed under the MIT license
7867 */
7868
7869
7870
7871
7872
7873
7874extend(ChartInternal_ChartInternal.prototype, {
7875 /**
7876 * Initialize the area that detects the event.
7877 * Add a container for the zone that detects the event.
7878 * @private
7879 */
7880 initEventRect: function initEventRect() {
7881 var $$ = this;
7882 $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.eventRects).style("fill-opacity", "0");
7883 },
7884
7885 /**
7886 * Redraws the area that detects the event.
7887 * @private
7888 */
7889 redrawEventRect: function redrawEventRect() {
7890 var eventRectUpdate,
7891 $$ = this,
7892 config = $$.config,
7893 isMultipleX = $$.isMultipleX(),
7894 zoomEnabled = config.zoom_enabled,
7895 eventRects = $$.main.select(".".concat(config_classes.eventRects)).style("cursor", zoomEnabled && zoomEnabled.type !== "drag" ? config.axis_rotated ? "ns-resize" : "ew-resize" : null).classed(config_classes.eventRectsMultiple, isMultipleX).classed(config_classes.eventRectsSingle, !isMultipleX);
7896 if (eventRects.selectAll(".".concat(config_classes.eventRect)).remove(), $$.eventRect = eventRects.selectAll(".".concat(config_classes.eventRect)), isMultipleX) eventRectUpdate = $$.eventRect.data([0]), eventRectUpdate = $$.generateEventRectsForMultipleXs(eventRectUpdate.enter()).merge(eventRectUpdate);else {
7897 // Set data and update $$.eventRect
7898 var xAxisTickValues = $$.getMaxDataCountTarget(); // update data's index value to be alinged with the x Axis
7899
7900 $$.updateDataIndexByX(xAxisTickValues), $$.updateXs(xAxisTickValues), $$.updatePointClass(!0), eventRects.datum(xAxisTickValues), $$.eventRect = eventRects.selectAll(".".concat(config_classes.eventRect)), eventRectUpdate = $$.eventRect.data(function (d) {
7901 return d;
7902 }), eventRectUpdate.exit().remove(), eventRectUpdate = $$.generateEventRectsForSingleX(eventRectUpdate.enter()).merge(eventRectUpdate);
7903 }
7904 $$.eventRect = eventRectUpdate, $$.updateEventRect(eventRectUpdate), $$.inputType !== "touch" || $$.svg.on("touchstart.eventRect") || $$.hasArcType() || $$.bindTouchOnEventRect(isMultipleX);
7905 },
7906 bindTouchOnEventRect: function bindTouchOnEventRect(isMultipleX) {
7907 var startPx,
7908 $$ = this,
7909 config = $$.config,
7910 getEventRect = function () {
7911 var touch = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].changedTouches[0];
7912 return Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(browser_doc.elementFromPoint(touch.clientX, touch.clientY));
7913 },
7914 getIndex = function (eventRect) {
7915 var index = eventRect && eventRect.attr("class") && eventRect.attr("class").replace(new RegExp("(".concat(config_classes.eventRect, "-?|s)"), "g"), "") * 1;
7916 return (isNaN(index) || index === null) && (index = -1), index;
7917 },
7918 selectRect = function (context) {
7919 if (isMultipleX) $$.selectRectForMultipleXs(context);else {
7920 var eventRect = getEventRect(),
7921 index = getIndex(eventRect);
7922 $$.callOverOutForTouch(index), index === -1 ? $$.unselectRect() : $$.selectRectForSingle(context, eventRect, index);
7923 }
7924 },
7925 preventDefault = config.interaction_inputType_touch.preventDefault,
7926 isPrevented = isBoolean(preventDefault) && preventDefault || !1,
7927 preventThreshold = !isNaN(preventDefault) && preventDefault || null,
7928 preventEvent = function (event) {
7929 var eventType = event.type,
7930 touch = event.changedTouches[0],
7931 currentXY = touch["client".concat(config.axis_rotated ? "Y" : "X")];
7932 eventType === "touchstart" ? isPrevented ? event.preventDefault() : preventThreshold !== null && (startPx = currentXY) : eventType === "touchmove" && (isPrevented || startPx === !0 || preventThreshold !== null && Math.abs(startPx - currentXY) >= preventThreshold) && (startPx = !0, event.preventDefault());
7933 };
7934
7935 // bind touch events
7936 $$.svg.on("touchstart.eventRect touchmove.eventRect", function () {
7937 var eventRect = getEventRect(),
7938 event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"];
7939
7940 if (!eventRect.empty() && eventRect.classed(config_classes.eventRect)) {
7941 // if touch points are > 1, means doing zooming interaction. In this case do not execute tooltip codes.
7942 if ($$.dragging || $$.flowing || $$.hasArcType() || event.touches.length > 1) return;
7943 preventEvent(event), selectRect(this);
7944 } else $$.unselectRect(), $$.callOverOutForTouch();
7945 }, !0).on("touchend.eventRect", function () {
7946 var eventRect = getEventRect();
7947 !eventRect.empty() && eventRect.classed(config_classes.eventRect) && ($$.hasArcType() || !$$.toggleShape || $$.cancelClick) && $$.cancelClick && ($$.cancelClick = !1);
7948 }, !0);
7949 },
7950
7951 /**
7952 * Updates the location and size of the eventRect.
7953 * @private
7954 * @param {Object} d3.select(CLASS.eventRects) object.
7955 */
7956 updateEventRect: function updateEventRect(eventRectUpdate) {
7957 var x,
7958 y,
7959 w,
7960 h,
7961 $$ = this,
7962 config = $$.config,
7963 xScale = $$.zoomScale || $$.x,
7964 eventRectData = eventRectUpdate || $$.eventRect.data(),
7965 isRotated = config.axis_rotated;
7966 if ($$.isMultipleX()) // TODO: rotated not supported yet
7967 x = 0, y = 0, w = $$.width, h = $$.height;else {
7968 var rectW, rectX;
7969 if ($$.isCategorized()) rectW = $$.getEventRectWidth(), rectX = function (d) {
7970 return xScale(d.x) - rectW / 2;
7971 };else {
7972 var getPrevNextX = function (d) {
7973 var index = d.index;
7974 return {
7975 prev: $$.getPrevX(index),
7976 next: $$.getNextX(index)
7977 };
7978 };
7979
7980 rectW = function (d) {
7981 var x = getPrevNextX(d); // if there this is a single data point make the eventRect full width (or height)
7982
7983 return x.prev === null && x.next === null ? isRotated ? $$.height : $$.width : (x.prev === null && (x.prev = xScale.domain()[0]), x.next === null && (x.next = xScale.domain()[1]), Math.max(0, (xScale(x.next) - xScale(x.prev)) / 2));
7984 }, rectX = function (d) {
7985 var x = getPrevNextX(d),
7986 thisX = d.x;
7987 // if there this is a single data point position the eventRect at 0
7988 return x.prev === null && x.next === null ? 0 : (x.prev === null && (x.prev = xScale.domain()[0]), (xScale(thisX) + xScale(x.prev)) / 2);
7989 };
7990 }
7991 x = isRotated ? 0 : rectX, y = isRotated ? rectX : 0, w = isRotated ? $$.width : rectW, h = isRotated ? rectW : $$.height;
7992 }
7993 eventRectData.attr("class", $$.classEvent.bind($$)).attr("x", x).attr("y", y).attr("width", w).attr("height", h);
7994 },
7995 selectRectForSingle: function selectRectForSingle(context, eventRect, index) {
7996 var $$ = this,
7997 config = $$.config,
7998 isSelectionEnabled = config.data_selection_enabled,
7999 isSelectionGrouped = config.data_selection_grouped,
8000 isTooltipGrouped = config.tooltip_grouped,
8001 selectedData = $$.getAllValuesOnIndex(index);
8002 isTooltipGrouped && ($$.showTooltip(selectedData, context), $$.showGridFocus(selectedData), !isSelectionEnabled || isSelectionGrouped) || $$.main.selectAll(".".concat(config_classes.shape, "-").concat(index)).each(function () {
8003 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.EXPANDED, !0), isSelectionEnabled && eventRect.style("cursor", isSelectionGrouped ? "pointer" : null), isTooltipGrouped || ($$.hideGridFocus(), $$.hideTooltip(), !isSelectionGrouped && $$.expandCirclesBars(index));
8004 }).filter(function (d) {
8005 return $$.isWithinShape(this, d);
8006 }).call(function (selected) {
8007 var d = selected.data();
8008 isSelectionEnabled && (isSelectionGrouped || config.data_selection_isselectable(d)) && eventRect.style("cursor", "pointer"), isTooltipGrouped || ($$.showTooltip(d, context), $$.showGridFocus(d), $$.unexpandCircles(), selected.each(function (d) {
8009 return $$.expandCirclesBars(index, d.id);
8010 }));
8011 });
8012 },
8013 expandCirclesBars: function expandCirclesBars(index, id, reset) {
8014 var $$ = this,
8015 config = $$.config;
8016 config.point_focus_expand_enabled && $$.expandCircles(index, id, reset), $$.expandBars(index, id, reset);
8017 },
8018 selectRectForMultipleXs: function selectRectForMultipleXs(context) {
8019 var $$ = this,
8020 config = $$.config,
8021 targetsToShow = $$.filterTargetsToShow($$.data.targets);
8022
8023 // do nothing when dragging
8024 if (!($$.dragging || $$.hasArcType(targetsToShow))) {
8025 var mouse = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(context),
8026 closest = $$.findClosestFromTargets(targetsToShow, mouse);
8027 if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id) && (config.data_onout.call($$.api, $$.mouseover), $$.mouseover = undefined), !closest) return void $$.unselectRect();
8028 var sameXData = $$.isBubbleType(closest) || $$.isScatterType(closest) || !config.tooltip_grouped ? [closest] : $$.filterByX(targetsToShow, closest.x),
8029 selectedData = sameXData.map(function (d) {
8030 return $$.addName(d);
8031 }); // show tooltip when cursor is close to some point
8032
8033 $$.showTooltip(selectedData, context), $$.expandCirclesBars(closest.index, closest.id, !0), $$.showGridFocus(selectedData), ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) && ($$.svg.select(".".concat(config_classes.eventRect)).style("cursor", "pointer"), !$$.mouseover && (config.data_onover.call($$.api, closest), $$.mouseover = closest));
8034 }
8035 },
8036
8037 /**
8038 * Unselect EventRect.
8039 * @private
8040 */
8041 unselectRect: function unselectRect() {
8042 var $$ = this;
8043 $$.svg.select(".".concat(config_classes.eventRect)).style("cursor", null), $$.hideGridFocus(), $$.hideTooltip(), $$._handleLinkedCharts(!1), $$.unexpandCircles(), $$.unexpandBars();
8044 },
8045
8046 /**
8047 * Handle data.onover/out callback options
8048 * @param {Boolean} isOver
8049 * @param {Number|Object} d
8050 * @private
8051 */
8052 setOverOut: function setOverOut(isOver, d) {
8053 var $$ = this,
8054 config = $$.config,
8055 isArc = isObject(d);
8056
8057 // Call event handler
8058 if (isArc || d !== -1) {
8059 var callback = config[isOver ? "data_onover" : "data_onout"].bind($$.api);
8060 if (config.color_onover && $$.setOverColor(isOver, d, isArc), isArc) callback(d, $$.main.select(".".concat(config_classes.arc).concat($$.getTargetSelectorSuffix(d.id))).node());else if (!config.tooltip_grouped) {
8061 var callee = $$.setOverOut,
8062 last = callee.last || [],
8063 shape = $$.main.selectAll(".".concat(config_classes.shape, "-").concat(d)).filter(function (d) {
8064 return $$.isWithinShape(this, d);
8065 });
8066 shape.each(function (d) {
8067 var _this = this;
8068
8069 (last.length === 0 || last.every(function (v) {
8070 return v !== _this;
8071 })) && (callback(d, this), last.push(this));
8072 }), last.length > 0 && shape.empty() && (callback = config.data_onout.bind($$.api), last.forEach(function (v) {
8073 return callback(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(v).datum(), v);
8074 }), last = []), callee.last = last;
8075 } else isOver && $$.expandCirclesBars(d, null, !0), $$.isMultipleX() || $$.main.selectAll(".".concat(config_classes.shape, "-").concat(d)).each(function (d) {
8076 callback(d, this);
8077 });
8078 }
8079 },
8080
8081 /**
8082 * Call data.onover/out callback for touch event
8083 * @param {Number|Object} d target index or data object for Arc type
8084 * @private
8085 */
8086 callOverOutForTouch: function callOverOutForTouch(d) {
8087 var $$ = this,
8088 callee = $$.callOverOutForTouch,
8089 last = callee.last;
8090 (isObject(d) && last ? d.id !== last.id : d !== last) && ((last || isNumber(last)) && $$.setOverOut(!1, last), (d || isNumber(d)) && $$.setOverOut(!0, d), callee.last = d);
8091 },
8092
8093 /**
8094 * Return draggable selection function
8095 * @return {Function}
8096 * @private
8097 */
8098 getDraggableSelection: function getDraggableSelection() {
8099 var $$ = this,
8100 config = $$.config;
8101 return config.interaction_enabled && config.data_selection_draggable && $$.drag ? Object(external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_["drag"])().on("drag", function () {
8102 $$.drag(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this));
8103 }).on("start", function () {
8104 $$.dragstart(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this));
8105 }).on("end", function () {
8106 $$.dragend();
8107 }) : function () {};
8108 },
8109
8110 /**
8111 * Create eventRect for each data on the x-axis.
8112 * Register touch and drag events.
8113 * @private
8114 * @param {Object} d3.select(CLASS.eventRects) object.
8115 * @returns {Object} d3.select(CLASS.eventRects) object.
8116 */
8117 generateEventRectsForSingleX: function generateEventRectsForSingleX(eventRectEnter) {
8118 var $$ = this,
8119 config = $$.config,
8120 rect = eventRectEnter.append("rect").attr("class", $$.classEvent.bind($$)).style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null).on("click", function (d) {
8121 $$.clickHandlerForSingleX.bind(this)(d, $$);
8122 }).call($$.getDraggableSelection());
8123 return $$.inputType === "mouse" && rect.on("mouseover", function (d) {
8124 $$.dragging || $$.flowing || $$.hasArcType() || $$.config.tooltip_grouped && $$.setOverOut(!0, d.index);
8125 }).on("mousemove", function (d) {
8126 // do nothing while dragging/flowing
8127 if (!($$.dragging || $$.flowing || $$.hasArcType())) {
8128 var index = d.index,
8129 eventRect = $$.svg.select(".".concat(config_classes.eventRect, "-").concat(index));
8130 $$.isStepType(d) && $$.config.line_step_type === "step-after" && Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this)[0] < $$.x($$.getXValue(d.id, index)) && (index -= 1), index === -1 ? $$.unselectRect() : $$.selectRectForSingle(this, eventRect, index), $$.config.tooltip_grouped || $$.setOverOut(index !== -1, d.index);
8131 }
8132 }).on("mouseout", function (d) {
8133 !$$.config || $$.hasArcType() || ($$.unselectRect(), $$.setOverOut(!1, d.index));
8134 }), rect;
8135 },
8136 clickHandlerForSingleX: function clickHandlerForSingleX(d, ctx) {
8137 var $$ = ctx,
8138 config = $$.config;
8139 if ($$.hasArcType() || !$$.toggleShape || $$.cancelClick) return void ($$.cancelClick && ($$.cancelClick = !1));
8140 var index = d.index;
8141 $$.main.selectAll(".".concat(config_classes.shape, "-").concat(index)).each(function (d2) {
8142 (config.data_selection_grouped || $$.isWithinShape(this, d2)) && ($$.toggleShape(this, d2, index), config.data_onclick.call($$.api, d2, this));
8143 });
8144 },
8145
8146 /**
8147 * Create an eventRect,
8148 * Register touch and drag events.
8149 * @private
8150 * @param {Object} d3.select(CLASS.eventRects) object.
8151 * @returns {Object} d3.select(CLASS.eventRects) object.
8152 */
8153 generateEventRectsForMultipleXs: function generateEventRectsForMultipleXs(eventRectEnter) {
8154 var $$ = this,
8155 rect = eventRectEnter.append("rect").attr("x", 0).attr("y", 0).attr("width", $$.width).attr("height", $$.height).attr("class", config_classes.eventRect).on("click", function () {
8156 $$.clickHandlerForMultipleXS.bind(this)($$);
8157 }).call($$.getDraggableSelection());
8158 return $$.inputType === "mouse" && rect.on("mouseover mousemove", function () {
8159 $$.selectRectForMultipleXs(this);
8160 }).on("mouseout", function () {
8161 !$$.config || $$.hasArcType() || $$.unselectRect();
8162 }), rect;
8163 },
8164 clickHandlerForMultipleXS: function clickHandlerForMultipleXS(ctx) {
8165 var $$ = ctx,
8166 config = $$.config,
8167 targetsToShow = $$.filterTargetsToShow($$.data.targets);
8168
8169 if (!$$.hasArcType(targetsToShow)) {
8170 var mouse = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this),
8171 closest = $$.findClosestFromTargets(targetsToShow, mouse);
8172 !closest || ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) && $$.main.selectAll(".".concat(config_classes.shapes).concat($$.getTargetSelectorSuffix(closest.id))).selectAll(".".concat(config_classes.shape, "-").concat(closest.index)).each(function () {
8173 (config.data_selection_grouped || $$.isWithinShape(this, closest)) && ($$.toggleShape(this, closest, closest.index), config.data_onclick.call($$.api, closest, this));
8174 });
8175 } // select if selection enabled
8176
8177 },
8178
8179 /**
8180 * Dispatch a mouse event.
8181 * @private
8182 * @param {String} type event type
8183 * @param {Number} index Index of eventRect
8184 * @param {Array} mouse x and y coordinate value
8185 */
8186 dispatchEvent: function dispatchEvent(type, index, mouse) {
8187 var $$ = this,
8188 isMultipleX = $$.isMultipleX(),
8189 selector = ".".concat(isMultipleX ? config_classes.eventRect : "".concat(config_classes.eventRect, "-").concat(index)),
8190 eventRect = $$.main.select(selector).node(),
8191 _eventRect$getBoundin = eventRect.getBoundingClientRect(),
8192 width = _eventRect$getBoundin.width,
8193 left = _eventRect$getBoundin.left,
8194 top = _eventRect$getBoundin.top,
8195 x = left + (mouse ? mouse[0] : 0) + (isMultipleX || $$.config.axis_rotated ? 0 : width / 2),
8196 y = top + (mouse ? mouse[1] : 0);
8197
8198 emulateEvent[/^(mouse|click)/.test(type) ? "mouse" : "touch"](eventRect, type, {
8199 screenX: x,
8200 screenY: y,
8201 clientX: x,
8202 clientY: y
8203 });
8204 }
8205});
8206// CONCATENATED MODULE: ./src/internals/size.js
8207/**
8208 * Copyright (c) 2017 ~ present NAVER Corp.
8209 * billboard.js project is licensed under the MIT license
8210 */
8211
8212
8213
8214
8215extend(ChartInternal_ChartInternal.prototype, {
8216 /**
8217 * Update container size
8218 * @private
8219 */
8220 setContainerSize: function setContainerSize() {
8221 var $$ = this;
8222 $$.currentWidth = $$.getCurrentWidth(), $$.currentHeight = $$.getCurrentHeight();
8223 },
8224 getCurrentWidth: function getCurrentWidth() {
8225 var $$ = this;
8226 return $$.config.size_width || $$.getParentWidth();
8227 },
8228 getCurrentHeight: function getCurrentHeight() {
8229 var $$ = this,
8230 config = $$.config,
8231 h = config.size_height || $$.getParentHeight();
8232 return h > 0 ? h : 320 / ($$.hasType("gauge") && !config.gauge_fullCircle ? 2 : 1);
8233 },
8234
8235 /**
8236 * Get Axis size according its position
8237 * @param {String} id Axis id value - x, y or y2
8238 * @return {number} size Axis size value
8239 * @private
8240 */
8241 getAxisSize: function getAxisSize(id) {
8242 var $$ = this,
8243 config = $$.config,
8244 isRotated = config.axis_rotated;
8245 return isRotated && id === "x" || !isRotated && /y2?/.test(id) ? $$.getAxisWidthByAxisId(id, !0) : $$.getHorizontalAxisHeight(id);
8246 },
8247 getCurrentPaddingTop: function getCurrentPaddingTop() {
8248 var $$ = this,
8249 config = $$.config,
8250 axesLen = config.axis_y2_axes.length,
8251 padding = isValue(config.padding_top) ? config.padding_top : 0;
8252 return $$.title && $$.title.node() && (padding += $$.getTitlePadding()), axesLen && config.axis_rotated && (padding += $$.getHorizontalAxisHeight("y2") * axesLen), padding;
8253 },
8254 getCurrentPaddingBottom: function getCurrentPaddingBottom() {
8255 var $$ = this,
8256 config = $$.config,
8257 axisId = config.axis_rotated ? "y" : "x",
8258 axesLen = config["axis_".concat(axisId, "_axes")].length,
8259 padding = isValue(config.padding_bottom) ? config.padding_bottom : 0;
8260 return padding + (axesLen ? $$.getHorizontalAxisHeight(axisId) * axesLen : 0);
8261 },
8262 getCurrentPaddingLeft: function getCurrentPaddingLeft(withoutRecompute) {
8263 var padding,
8264 $$ = this,
8265 config = $$.config,
8266 isRotated = config.axis_rotated,
8267 axisId = isRotated ? "x" : "y",
8268 axesLen = config["axis_".concat(axisId, "_axes")].length,
8269 axisWidth = $$.getAxisWidthByAxisId(axisId, withoutRecompute);
8270 return padding = isValue(config.padding_left) ? config.padding_left : isRotated ? config.axis_x_show ? Math.max(ceil10(axisWidth), 40) : 1 : !config.axis_y_show || config.axis_y_inner ? $$.axis.getAxisLabelPosition("y").isOuter ? 30 : 1 : ceil10(axisWidth), padding + axisWidth * axesLen;
8271 },
8272 getCurrentPaddingRight: function getCurrentPaddingRight() {
8273 var padding,
8274 withoutTickTextOverflow = !!(arguments.length > 0 && arguments[0] !== undefined) && arguments[0],
8275 $$ = this,
8276 config = $$.config,
8277 defaultPadding = 10,
8278 legendWidthOnRight = $$.isLegendRight ? $$.getLegendWidth() + 20 : 0,
8279 axesLen = config.axis_y2_axes.length,
8280 axisWidth = $$.getAxisWidthByAxisId("y2"),
8281 xAxisTickTextOverflow = withoutTickTextOverflow ? 0 : $$.axis.getXAxisTickTextY2Overflow(defaultPadding);
8282 return padding = isValue(config.padding_right) ? config.padding_right + 1 : config.axis_rotated ? defaultPadding + legendWidthOnRight : !config.axis_y2_show || config.axis_y2_inner ? Math.max(2 + legendWidthOnRight + ($$.axis.getAxisLabelPosition("y2").isOuter ? 20 : 0), xAxisTickTextOverflow) : Math.max(ceil10(axisWidth) + legendWidthOnRight, xAxisTickTextOverflow), padding + axisWidth * axesLen;
8283 },
8284
8285 /**
8286 * Get the parent rect element's size
8287 * @param {String} key property/attribute name
8288 * @private
8289 */
8290 getParentRectValue: function getParentRectValue(key) {
8291 for (var v, offsetName = "offset".concat(capitalize(key)), parent = this.selectChart.node(); !v && parent && parent.tagName !== "BODY";) {
8292 try {
8293 v = parent.getBoundingClientRect()[key];
8294 } catch (e) {
8295 offsetName in parent && (v = parent[offsetName]);
8296 }
8297
8298 parent = parent.parentNode;
8299 }
8300
8301 if (key === "width") {
8302 // Sometimes element's width value is incorrect(ex. flex container)
8303 // In this case, use body's offsetWidth instead.
8304 var bodyWidth = browser_doc.body.offsetWidth;
8305 v > bodyWidth && (v = bodyWidth);
8306 }
8307
8308 return v;
8309 },
8310 getParentWidth: function getParentWidth() {
8311 return this.getParentRectValue("width");
8312 },
8313 getParentHeight: function getParentHeight() {
8314 var h = this.selectChart.style("height");
8315 return h.indexOf("px") > 0 ? parseInt(h, 10) : 0;
8316 },
8317 getSvgLeft: function getSvgLeft(withoutRecompute) {
8318 var $$ = this,
8319 config = $$.config,
8320 hasLeftAxisRect = config.axis_rotated || !config.axis_rotated && !config.axis_y_inner,
8321 leftAxisClass = config.axis_rotated ? config_classes.axisX : config_classes.axisY,
8322 leftAxis = $$.main.select(".".concat(leftAxisClass)).node(),
8323 svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : {
8324 right: 0
8325 },
8326 chartRect = $$.selectChart.node().getBoundingClientRect(),
8327 hasArc = $$.hasArcType(),
8328 svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute));
8329 return svgLeft > 0 ? svgLeft : 0;
8330 },
8331 getAxisWidthByAxisId: function getAxisWidthByAxisId(id, withoutRecompute) {
8332 var $$ = this,
8333 position = $$.axis.getLabelPositionById(id);
8334 return $$.axis.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
8335 },
8336 getHorizontalAxisHeight: function getHorizontalAxisHeight(id) {
8337 var $$ = this,
8338 config = $$.config,
8339 isRotated = config.axis_rotated,
8340 h = 30;
8341 if (id === "x" && !config.axis_x_show) return 8;
8342 if (id === "x" && config.axis_x_height) return config.axis_x_height;
8343 if (id === "y" && !config.axis_y_show) return !config.legend_show || $$.isLegendRight || $$.isLegendInset ? 1 : 10;
8344 if (id === "y2" && !config.axis_y2_show) return $$.rotated_padding_top; // const rotate = config[`axis_${id}_tick_rotate`];
8345
8346 var rotate = $$.getAxisTickRotate(id); // Calculate x/y axis height when tick rotated
8347
8348 return (id === "x" && !isRotated || /y2?/.test(id) && isRotated) && rotate && (h = 30 + $$.axis.getMaxTickWidth(id) * Math.cos(Math.PI * (90 - rotate) / 180), !config.axis_x_tick_multiline && $$.currentHeight && h > $$.currentHeight / 2 && (h = $$.currentHeight / 2)), h + ($$.axis.getLabelPositionById(id).isInner ? 0 : 10) + (id !== "y2" || isRotated ? 0 : -10);
8349 },
8350 getEventRectWidth: function getEventRectWidth() {
8351 return Math.max(0, this.xAxis.tickInterval());
8352 },
8353
8354 /**
8355 * Get axis tick test rotate value
8356 * @param {String} id
8357 * @return {Number} rotate value
8358 * @private
8359 */
8360 getAxisTickRotate: function getAxisTickRotate(id) {
8361 var $$ = this,
8362 config = $$.config,
8363 rotate = config["axis_".concat(id, "_tick_rotate")];
8364
8365 if (id === "x") {
8366 var isCategorized = $$.isCategorized(),
8367 isTimeSeries = $$.isTimeSeries(),
8368 allowedXAxisTypes = isCategorized || isTimeSeries,
8369 tickCount = 0;
8370 config.axis_x_tick_fit && allowedXAxisTypes && ($$.axis.x = {
8371 padding: {
8372 left: 0,
8373 right: 0
8374 },
8375 tickCount: 0
8376 }, tickCount = $$.currentMaxTickWidths.x.ticks.length + (isTimeSeries ? -1 : 1), tickCount !== $$.axis.x.tickCount && ($$.axis.x.padding = $$.axis.getXAxisPadding(tickCount)), $$.axis.x.tickCount = tickCount), $$.svg && config.axis_x_tick_fit && !config.axis_x_tick_multiline && !config.axis_x_tick_culling && config.axis_x_tick_autorotate && allowedXAxisTypes && (rotate = $$.needToRotateXAxisTickTexts() ? config.axis_x_tick_rotate : 0);
8377 }
8378
8379 return rotate;
8380 },
8381
8382 /**
8383 * Check weather axis tick text needs to be rotated
8384 * @private
8385 */
8386 needToRotateXAxisTickTexts: function needToRotateXAxisTickTexts() {
8387 var $$ = this,
8388 xAxisLength = $$.currentWidth - $$.getCurrentPaddingLeft(!1) - $$.getCurrentPaddingRight(!0),
8389 tickCountWithPadding = $$.axis.x.tickCount + $$.axis.x.padding.left + $$.axis.x.padding.right,
8390 maxTickWidth = $$.axis.getMaxTickWidth("x");
8391 return maxTickWidth > (xAxisLength / tickCountWithPadding || 0);
8392 }
8393});
8394// EXTERNAL MODULE: external {"commonjs":"d3-shape","commonjs2":"d3-shape","amd":"d3-shape","root":"d3"}
8395var external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_ = __webpack_require__(10);
8396
8397// CONCATENATED MODULE: ./src/shape/shape.js
8398/**
8399 * Copyright (c) 2017 ~ present NAVER Corp.
8400 * billboard.js project is licensed under the MIT license
8401 */
8402
8403
8404
8405
8406
8407extend(ChartInternal_ChartInternal.prototype, {
8408 getShapeIndices: function getShapeIndices(typeFilter) {
8409 var $$ = this,
8410 config = $$.config,
8411 xs = config.data_xs,
8412 hasXs = notEmpty(xs),
8413 indices = {},
8414 i = hasXs ? {} : 0;
8415 return hasXs && getUnique(Object.keys(xs).map(function (v) {
8416 return xs[v];
8417 })).forEach(function (v) {
8418 i[v] = 0, indices[v] = {};
8419 }), $$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$)).forEach(function (d) {
8420 for (var groups, xKey = (d.id in xs) ? xs[d.id] : "", ind = xKey ? indices[xKey] : indices, j = 0; groups = config.data_groups[j]; j++) if (!(groups.indexOf(d.id) < 0)) for (var _row4, _k4 = 0; _row4 = groups[_k4]; _k4++) if (_row4 in ind) {
8421 ind[d.id] = ind[_row4];
8422 break;
8423 }
8424
8425 isUndefined(ind[d.id]) && (ind[d.id] = xKey ? i[xKey]++ : i++, ind.__max__ = (xKey ? i[xKey] : i) - 1);
8426 }), indices;
8427 },
8428
8429 /**
8430 * Get indices value based on data ID value
8431 * @param {Object} indices Indices object
8432 * @param {String} id Data id value
8433 * @return {Object} Indices object
8434 * @private
8435 */
8436 getIndices: function getIndices(indices, id) {
8437 var xs = this.config.data_xs;
8438 return notEmpty(xs) ? indices[xs[id]] : indices;
8439 },
8440
8441 /**
8442 * Get indices max number
8443 * @param {Object} indices Indices object
8444 * @return {Number} Max number
8445 * @private
8446 */
8447 getIndicesMax: function getIndicesMax(indices) {
8448 return notEmpty(this.config.data_xs) ? // if is multiple xs, return total sum of xs' __max__ value
8449 Object.keys(indices).map(function (v) {
8450 return indices[v].__max__ || 0;
8451 }).reduce(function (acc, curr) {
8452 return acc + curr;
8453 }) : indices.__max__;
8454 },
8455 getShapeX: function getShapeX(offset, indices, isSub) {
8456 var $$ = this,
8457 scale = isSub ? $$.subX : $$.zoomScale || $$.x,
8458 barPadding = $$.config.bar_padding,
8459 sum = function (p, c) {
8460 return p + c;
8461 },
8462 halfWidth = isObjectType(offset) && offset.total.length ? offset.total.reduce(sum) / 2 : 0;
8463
8464 return function (d) {
8465 var ind = $$.getIndices(indices, d.id),
8466 index = d.id in ind ? ind[d.id] : 0,
8467 targetsNum = (ind.__max__ || 0) + 1,
8468 x = 0;
8469
8470 if (notEmpty(d.x)) {
8471 var xPos = scale(d.x);
8472 x = halfWidth ? xPos - (offset[d.id] || offset.width) + offset.total.slice(0, index + 1).reduce(sum) - halfWidth : xPos - (isNumber(offset) ? offset : offset.width) * (targetsNum / 2 - index);
8473 } // adjust x position for bar.padding optionq
8474
8475
8476 return offset && x && targetsNum > 1 && barPadding && (index && (x += barPadding * index), targetsNum > 2 ? x -= (targetsNum - 1) * barPadding / 2 : targetsNum === 2 && (x -= barPadding / 2)), x;
8477 };
8478 },
8479 getShapeY: function getShapeY(isSub) {
8480 var $$ = this,
8481 isStackNormalized = $$.isStackNormalized();
8482 return function (d) {
8483 var value = isStackNormalized ? $$.getRatio("index", d, !0) : $$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "y") : d.value;
8484 return (isSub ? $$.getSubYScale(d.id) : $$.getYScale(d.id))(value);
8485 };
8486 },
8487
8488 /**
8489 * Get Shape's offset data
8490 * @param {function(Object): boolean} typeFilter
8491 * @return {{shapeOffsetTargets: ShapeOffsetTarget[], indexMapByTargetId: object}}
8492 * @private
8493 */
8494 getShapeOffsetData: function getShapeOffsetData(typeFilter) {
8495 var $$ = this,
8496 targets = $$.orderTargets($$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$))),
8497 shapeOffsetTargets = targets.map(function (target) {
8498 var rowValues = target.values;
8499 $$.isStepType(target) && (rowValues = $$.convertValuesToStep(rowValues));
8500 var values,
8501 rowValueMapByXValue = rowValues.reduce(function (out, value) {
8502 return out[+value.x] = value, out;
8503 }, {});
8504 return values = $$.isStackNormalized() ? rowValues.map(function (v) {
8505 return $$.getRatio("index", v, !0);
8506 }) : rowValues.map(function (_ref) {
8507 var value = _ref.value;
8508 return value;
8509 }), {
8510 id: target.id,
8511 rowValues: rowValues,
8512 rowValueMapByXValue: rowValueMapByXValue,
8513 values: values
8514 };
8515 }),
8516 indexMapByTargetId = targets.reduce(function (out, _ref2, index) {
8517 var id = _ref2.id;
8518 return out[id] = index, out;
8519 }, {});
8520 return {
8521 indexMapByTargetId: indexMapByTargetId,
8522 shapeOffsetTargets: shapeOffsetTargets
8523 };
8524 },
8525 getShapeOffset: function getShapeOffset(typeFilter, indices, isSub) {
8526 var $$ = this,
8527 _$$$getShapeOffsetDat = $$.getShapeOffsetData(typeFilter),
8528 shapeOffsetTargets = _$$$getShapeOffsetDat.shapeOffsetTargets,
8529 indexMapByTargetId = _$$$getShapeOffsetDat.indexMapByTargetId;
8530
8531 return function (d, idx) {
8532 var ind = $$.getIndices(indices, d.id),
8533 scale = isSub ? $$.getSubYScale(d.id) : $$.getYScale(d.id),
8534 y0 = scale(0),
8535 dataXAsNumber = +d.x,
8536 offset = y0;
8537 return shapeOffsetTargets.forEach(function (t) {
8538 var rowValues = t.rowValues,
8539 values = t.values;
8540
8541 if (t.id !== d.id && ind[t.id] === ind[d.id] && indexMapByTargetId[t.id] < indexMapByTargetId[d.id]) {
8542 var _rowValue = rowValues[idx]; // check if the x values line up
8543
8544 _rowValue && +_rowValue.x === dataXAsNumber || (_rowValue = t.rowValueMapByXValue[dataXAsNumber]), _rowValue && _rowValue.value * d.value >= 0 && (offset += scale(values[_rowValue.index]) - y0);
8545 }
8546 }), offset;
8547 };
8548 },
8549 isWithinShape: function isWithinShape(that, d) {
8550 var isWithin,
8551 $$ = this,
8552 shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(that);
8553 return $$.isTargetToShow(d.id) ? $$.hasValidPointType(that.nodeName) ? isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScale(d.id)(d.value)) : $$.isWithinCircle(that, $$.isBubbleType(d) ? $$.pointSelectR(d) * 1.5 : 0) : that.nodeName === "path" && (isWithin = !shape.classed(config_classes.bar) || $$.isWithinBar(that)) : isWithin = !1, isWithin;
8554 },
8555 getInterpolate: function getInterpolate(d) {
8556 var $$ = this,
8557 interpolation = $$.getInterpolateType(d);
8558 return {
8559 "basis": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveBasis"],
8560 "basis-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveBasisClosed"],
8561 "basis-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveBasisOpen"],
8562 "bundle": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveBundle"],
8563 "cardinal": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCardinal"],
8564 "cardinal-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCardinalClosed"],
8565 "cardinal-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCardinalOpen"],
8566 "catmull-rom": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCatmullRom"],
8567 "catmull-rom-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCatmullRomClosed"],
8568 "catmull-rom-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveCatmullRomOpen"],
8569 "monotone-x": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveMonotoneX"],
8570 "monotone-y": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveMonotoneY"],
8571 "natural": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveNatural"],
8572 "linear-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveLinearClosed"],
8573 "linear": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveLinear"],
8574 "step": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveStep"],
8575 "step-after": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveStepAfter"],
8576 "step-before": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["curveStepBefore"]
8577 }[interpolation];
8578 },
8579 getInterpolateType: function getInterpolateType(d) {
8580 var $$ = this,
8581 type = $$.config.spline_interpolation_type,
8582 interpolation = $$.isInterpolationType(type) ? type : "cardinal";
8583 return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear";
8584 }
8585});
8586// EXTERNAL MODULE: external {"commonjs":"d3-interpolate","commonjs2":"d3-interpolate","amd":"d3-interpolate","root":"d3"}
8587var external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_ = __webpack_require__(11);
8588
8589// CONCATENATED MODULE: ./src/shape/arc.js
8590/**
8591 * Copyright (c) 2017 ~ present NAVER Corp.
8592 * billboard.js project is licensed under the MIT license
8593 */
8594
8595
8596
8597
8598
8599
8600
8601extend(ChartInternal_ChartInternal.prototype, {
8602 initPie: function initPie() {
8603 var $$ = this,
8604 config = $$.config,
8605 dataType = config.data_type,
8606 padding = config.pie_padding,
8607 startingAngle = config["".concat(dataType, "_startingAngle")] || 0,
8608 padAngle = ($$.hasType("pie") && padding ? padding * .01 : config["".concat(dataType, "_padAngle")]) || 0;
8609 $$.pie = Object(external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["pie"])().startAngle(startingAngle).endAngle(startingAngle + 2 * Math.PI).padAngle(padAngle).sortValues($$.isOrderAsc() || $$.isOrderDesc() ? function (a, b) {
8610 return $$.isOrderAsc() ? a - b : b - a;
8611 } : null).value(function (d) {
8612 return d.values.reduce(function (a, b) {
8613 return a + b.value;
8614 }, 0);
8615 });
8616 },
8617 updateRadius: function updateRadius() {
8618 var $$ = this,
8619 config = $$.config,
8620 radius = config.pie_innerRadius,
8621 padding = config.pie_padding,
8622 w = config.gauge_width || config.donut_width,
8623 gaugeArcWidth = $$.filterTargetsToShow($$.data.targets).length * config.gauge_arcs_minWidth;
8624 $$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2 * ($$.hasMultiArcGauge() ? .85 : 1), $$.radius = $$.radiusExpanded * .95, $$.innerRadiusRatio = w ? ($$.radius - w) / $$.radius : .6, $$.gaugeArcWidth = w || (gaugeArcWidth <= $$.radius - $$.innerRadius ? $$.radius - $$.innerRadius : gaugeArcWidth <= $$.radius ? gaugeArcWidth : $$.radius);
8625 var innerRadius = radius || (padding ? padding * ($$.innerRadiusRatio + .1) : 0); // NOTE: innerRadius can be an object by user setting, only for 'pie' type
8626
8627 $$.innerRadius = $$.hasType("donut") || $$.hasType("gauge") ? $$.radius * $$.innerRadiusRatio : innerRadius;
8628 },
8629 getInnerRadius: function getInnerRadius(d) {
8630 var $$ = this,
8631 radius = $$.innerRadius;
8632 return !isNumber(radius) && d && (radius = radius[d.data.id] || 0), radius;
8633 },
8634 updateArc: function updateArc() {
8635 var $$ = this;
8636 $$.svgArc = $$.getSvgArc(), $$.svgArcExpanded = $$.getSvgArcExpanded();
8637 },
8638 updateAngle: function updateAngle(dValue) {
8639 var $$ = this,
8640 config = $$.config,
8641 pie = $$.pie,
8642 d = dValue,
8643 found = !1;
8644 if (!config) return null;
8645 var radius = Math.PI * (config.gauge_fullCircle ? 2 : 1),
8646 gStart = config.gauge_startingAngle;
8647
8648 if (d.data && $$.isGaugeType(d.data) && !$$.hasMultiArcGauge()) {
8649 var totalSum = $$.getTotalDataSum(); // if gauge_max less than totalSum, make totalSum to max value
8650
8651 totalSum > config.gauge_max && (config.gauge_max = totalSum);
8652 var gEnd = radius * (totalSum / (config.gauge_max - config.gauge_min));
8653 pie = pie.startAngle(gStart).endAngle(gEnd + gStart);
8654 }
8655
8656 if (pie($$.filterTargetsToShow()).forEach(function (t, i) {
8657 found || t.data.id !== d.data.id || (found = !0, d = t, d.index = i);
8658 }), isNaN(d.startAngle) && (d.startAngle = 0), isNaN(d.endAngle) && (d.endAngle = d.startAngle), d.data && $$.hasMultiArcGauge()) {
8659 var maxValue = $$.getMinMaxData().max[0].value; // if gauge_max less than maxValue, make maxValue to max value
8660
8661 maxValue > config.gauge_max && (config.gauge_max = maxValue);
8662 var gMin = config.gauge_min,
8663 gMax = config.gauge_max,
8664 gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : gMax - gMin;
8665 d.startAngle = gStart, d.endAngle = gStart + radius / (gMax - gMin) * gValue;
8666 }
8667
8668 return found ? d : null;
8669 },
8670 getSvgArc: function getSvgArc() {
8671 var $$ = this,
8672 ir = $$.getInnerRadius(),
8673 singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
8674 hasMultiArcGauge = $$.hasMultiArcGauge(),
8675 arc = Object(external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["arc"])().outerRadius(function (d) {
8676 return hasMultiArcGauge ? $$.radius - singleArcWidth * d.index : $$.radius;
8677 }).innerRadius(function (d) {
8678 return hasMultiArcGauge ? $$.radius - singleArcWidth * (d.index + 1) : isNumber(ir) ? ir : 0;
8679 }),
8680 newArc = function (d, withoutUpdate) {
8681 var path = "M 0 0";
8682
8683 if (d.value || d.data) {
8684 isNumber(ir) || (arc = arc.innerRadius($$.getInnerRadius(d)));
8685 var updated = !withoutUpdate && $$.updateAngle(d);
8686 withoutUpdate ? path = arc(d) : updated && (path = arc(updated));
8687 }
8688
8689 return path;
8690 };
8691
8692 return newArc.centroid = arc.centroid, newArc;
8693 },
8694 getSvgArcExpanded: function getSvgArcExpanded(rate) {
8695 var $$ = this,
8696 newRate = rate || 1,
8697 singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
8698 hasMultiArcGauge = $$.hasMultiArcGauge(),
8699 expandWidth = Math.min($$.radiusExpanded * newRate - $$.radius, singleArcWidth * .8 - (1 - newRate) * 100),
8700 arc = Object(external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["arc"])().outerRadius(function (d) {
8701 return hasMultiArcGauge ? $$.radius - singleArcWidth * d.index + expandWidth : $$.radiusExpanded * newRate;
8702 }).innerRadius(function (d) {
8703 return hasMultiArcGauge ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
8704 });
8705 return function (d) {
8706 var updated = $$.updateAngle(d);
8707 return updated ? (hasMultiArcGauge ? arc : arc.innerRadius($$.getInnerRadius(d)))(updated) : "M 0 0";
8708 };
8709 },
8710 getArc: function getArc(d, withoutUpdate, force) {
8711 return force || this.isArcType(d.data) ? this.svgArc(d, withoutUpdate) : "M 0 0";
8712 },
8713 transformForArcLabel: function transformForArcLabel(d) {
8714 var $$ = this,
8715 config = $$.config,
8716 updated = $$.updateAngle(d),
8717 translate = "";
8718 if (updated) if ($$.hasMultiArcGauge()) {
8719 var y1 = Math.sin(updated.endAngle - Math.PI / 2),
8720 x = Math.cos(updated.endAngle - Math.PI / 2) * ($$.radiusExpanded + 25),
8721 y = y1 * ($$.radiusExpanded + 15 - Math.abs(y1 * 10)) + 3;
8722 translate = "translate(".concat(x, ",").concat(y, ")");
8723 } else if (!$$.hasType("gauge") || $$.data.targets.length > 1) {
8724 var c = this.svgArc.centroid(updated),
8725 x = isNaN(c[0]) ? 0 : c[0],
8726 y = isNaN(c[1]) ? 0 : c[1],
8727 h = Math.sqrt(x * x + y * y),
8728 ratio = $$.hasType("donut") && config.donut_label_ratio || $$.hasType("pie") && config.pie_label_ratio;
8729 ratio = ratio ? isFunction(ratio) ? ratio(d, $$.radius, h) : ratio : $$.radius && (h ? (36 / $$.radius > .375 ? 1.175 - 36 / $$.radius : .8) * $$.radius / h : 0), translate = "translate(".concat(x * ratio, ",").concat(y * ratio, ")");
8730 }
8731 return translate;
8732 },
8733 convertToArcData: function convertToArcData(d) {
8734 return this.addName({
8735 id: d.data.id,
8736 value: d.value,
8737 ratio: this.getRatio("arc", d),
8738 index: d.index
8739 });
8740 },
8741 textForArcLabel: function textForArcLabel(selection) {
8742 var $$ = this;
8743 $$.shouldShowArcLabel() && selection.each(function (d) {
8744 var node = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
8745 updated = $$.updateAngle(d),
8746 value = updated ? updated.value : d.value,
8747 ratio = $$.getRatio("arc", updated),
8748 id = d.data.id,
8749 hasGauge = $$.hasType("gauge"),
8750 isUnderThreshold = hasGauge || $$.meetsArcLabelThreshold(ratio);
8751
8752 if (isUnderThreshold) {
8753 var text = ($$.getArcLabelFormat() || $$.defaultArcValueFormat)(value, ratio, id).toString();
8754 setTextValue(node, text, [-1, 1], hasGauge);
8755 }
8756 });
8757 },
8758 textForGaugeMinMax: function textForGaugeMinMax(value, isMax) {
8759 var format = this.getGaugeLabelExtents();
8760 return format ? format(value, isMax) : value;
8761 },
8762 expandArc: function expandArc(targetIds) {
8763 var $$ = this; // MEMO: avoid to cancel transition
8764
8765 if ($$.transiting) {
8766 var interval = setInterval(function () {
8767 $$.transiting || (clearInterval(interval), $$.legend.selectAll(".".concat(config_classes.legendItemFocused)).size() > 0 && $$.expandArc(targetIds));
8768 }, 10);
8769 return;
8770 }
8771
8772 var newTargetIds = $$.mapToTargetIds(targetIds);
8773 $$.svg.selectAll($$.selectorTargets(newTargetIds, ".".concat(config_classes.chartArc))).each(function (d) {
8774 if ($$.shouldExpand(d.data.id)) {
8775 var expandDuration = $$.getExpandConfig(d.data.id, "duration"),
8776 svgArcExpandedSub = $$.getSvgArcExpanded($$.getExpandConfig(d.data.id, "rate"));
8777 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).selectAll("path").transition().duration(expandDuration).attr("d", $$.svgArcExpanded).transition().duration(expandDuration * 2).attr("d", svgArcExpandedSub);
8778 }
8779 });
8780 },
8781 unexpandArc: function unexpandArc(targetIds) {
8782 var $$ = this;
8783
8784 if (!$$.transiting) {
8785 var newTargetIds = $$.mapToTargetIds(targetIds);
8786 $$.svg.selectAll($$.selectorTargets(newTargetIds, ".".concat(config_classes.chartArc))).selectAll("path").transition().duration(function (d) {
8787 return $$.getExpandConfig(d.data.id, "duration");
8788 }).attr("d", $$.svgArc), $$.svg.selectAll("".concat(config_classes.arc)).style("opacity", "1");
8789 }
8790 },
8791
8792 /**
8793 * Get expand config value
8794 * @param {String} id data ID
8795 * @param {String} key config key: 'duration | rate'
8796 * @return {Number}
8797 * @private
8798 */
8799 getExpandConfig: function getExpandConfig(id, key) {
8800 var type,
8801 $$ = this,
8802 config = $$.config;
8803 return $$.isDonutType(id) ? type = "donut" : $$.isGaugeType(id) ? type = "gauge" : $$.isPieType(id) && (type = "pie"), type ? config["".concat(type, "_expand_").concat(key)] : {
8804 duration: 50,
8805 rate: .98
8806 }[key];
8807 },
8808 shouldExpand: function shouldExpand(id) {
8809 var $$ = this,
8810 config = $$.config;
8811 return $$.isDonutType(id) && config.donut_expand || $$.isGaugeType(id) && config.gauge_expand || $$.isPieType(id) && config.pie_expand;
8812 },
8813 shouldShowArcLabel: function shouldShowArcLabel() {
8814 var $$ = this,
8815 config = $$.config;
8816 return ["pie", "donut", "gauge"].some(function (v) {
8817 return $$.hasType(v) && config["".concat(v, "_label_show")];
8818 });
8819 },
8820 meetsArcLabelThreshold: function meetsArcLabelThreshold(ratio) {
8821 var $$ = this,
8822 config = $$.config,
8823 threshold = $$.hasType("donut") ? config.donut_label_threshold : config.pie_label_threshold;
8824 return ratio >= threshold;
8825 },
8826 getArcLabelFormat: function getArcLabelFormat() {
8827 var $$ = this,
8828 config = $$.config,
8829 format = config.pie_label_format;
8830 return $$.hasType("gauge") ? format = config.gauge_label_format : $$.hasType("donut") && (format = config.donut_label_format), format;
8831 },
8832 getGaugeLabelExtents: function getGaugeLabelExtents() {
8833 var config = this.config;
8834 return config.gauge_label_extents;
8835 },
8836 getArcTitle: function getArcTitle() {
8837 var $$ = this,
8838 type = $$.hasType("donut") && "donut" || $$.hasType("gauge") && "gauge";
8839 return type ? $$.config["".concat(type, "_title")] : "";
8840 },
8841 updateTargetsForArc: function updateTargetsForArc(targets) {
8842 var $$ = this,
8843 main = $$.main,
8844 hasGauge = $$.hasType("gauge"),
8845 classChartArc = $$.classChartArc.bind($$),
8846 classArcs = $$.classArcs.bind($$),
8847 classFocus = $$.classFocus.bind($$),
8848 mainPieUpdate = main.select(".".concat(config_classes.chartArcs)).selectAll(".".concat(config_classes.chartArc)).data($$.pie(targets)).attr("class", function (d) {
8849 return classChartArc(d) + classFocus(d.data);
8850 }),
8851 mainPieEnter = mainPieUpdate.enter().append("g").attr("class", classChartArc);
8852 mainPieEnter.append("g").attr("class", classArcs).merge(mainPieUpdate), mainPieEnter.append("text").attr("dy", hasGauge && !$$.hasMultiTargets() ? "-.1em" : ".35em").style("opacity", "0").style("text-anchor", "middle").style("pointer-events", "none");
8853 },
8854 initArc: function initArc() {
8855 var $$ = this;
8856 $$.arcs = $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartArcs).attr("transform", $$.getTranslate("arc")), $$.setArcTitle();
8857 },
8858
8859 /**
8860 * Set arc title text
8861 * @private
8862 */
8863 setArcTitle: function setArcTitle() {
8864 var $$ = this,
8865 title = $$.getArcTitle(),
8866 hasGauge = $$.hasType("gauge");
8867
8868 if (title) {
8869 var text = $$.arcs.append("text").attr("class", config_classes[hasGauge ? "chartArcsGaugeTitle" : "chartArcsTitle"]).style("text-anchor", "middle");
8870 hasGauge && text.attr("dy", "-0.3em").style("font-size", "27px"), setTextValue(text, title, hasGauge ? undefined : [-.6, 1.35], !0);
8871 }
8872 },
8873 redrawArc: function redrawArc(duration, durationForExit, withTransform) {
8874 var $$ = this,
8875 config = $$.config,
8876 main = $$.main,
8877 hasInteraction = config.interaction_enabled,
8878 mainArc = main.selectAll(".".concat(config_classes.arcs)).selectAll(".".concat(config_classes.arc)).data($$.arcData.bind($$));
8879 // bind arc events
8880 mainArc.exit().transition().duration(durationForExit).style("opacity", "0").remove(), mainArc = mainArc.enter().append("path").attr("class", $$.classArc.bind($$)).style("fill", function (d) {
8881 return $$.color(d.data);
8882 }).style("cursor", function (d) {
8883 return hasInteraction && config.data_selection_isselectable(d) ? "pointer" : null;
8884 }).style("opacity", "0").each(function (d) {
8885 $$.isGaugeType(d.data) && (d.startAngle = config.gauge_startingAngle, d.endAngle = config.gauge_startingAngle), this._current = d;
8886 }).merge(mainArc), $$.hasMultiArcGauge() && $$.redrawMultiArcGauge(), mainArc.attr("transform", function (d) {
8887 return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : "";
8888 }).style("opacity", function (d) {
8889 return d === this._current ? "0" : "1";
8890 }).each(function () {
8891 $$.transiting = !0;
8892 }).transition().duration(duration).attrTween("d", function (d) {
8893 var updated = $$.updateAngle(d);
8894 if (!updated) return function () {
8895 return "M 0 0";
8896 };
8897 isNaN(this._current.startAngle) && (this._current.startAngle = 0), isNaN(this._current.endAngle) && (this._current.endAngle = this._current.startAngle);
8898 var interpolate = Object(external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_["interpolate"])(this._current, updated);
8899 return this._current = interpolate(0), function (t) {
8900 var interpolated = interpolate(t);
8901 // data.id will be updated by interporator
8902 return interpolated.data = d.data, $$.getArc(interpolated, !0);
8903 };
8904 }).attr("transform", withTransform ? "scale(1)" : "").style("fill", function (d) {
8905 var color;
8906 return $$.levelColor ? (color = $$.levelColor(d.data.values[0].value), config.data_colors[d.data.id] = color) : color = $$.color(d.data.id), color;
8907 }) // Where gauge reading color would receive customization.
8908 .style("opacity", "1").call($$.endall, function () {
8909 if ($$.levelColor) {
8910 var path = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
8911 d = path.datum();
8912 $$.updateLegendItemColor(d.data.id, path.style("fill"));
8913 }
8914
8915 $$.transiting = !1, callFn(config.onrendered, $$, $$.api);
8916 }), hasInteraction && $$.bindArcEvent(mainArc), $$.redrawArcText(duration);
8917 },
8918 redrawMultiArcGauge: function redrawMultiArcGauge() {
8919 var $$ = this,
8920 config = $$.config,
8921 arcLabelLines = $$.main.selectAll(".".concat(config_classes.arcs)).selectAll(".".concat(config_classes.arcLabelLine)).data($$.arcData.bind($$)),
8922 mainArcLabelLine = arcLabelLines.enter().append("rect").attr("class", function (d) {
8923 return "".concat(config_classes.arcLabelLine, " ").concat(config_classes.target, " ").concat(config_classes.target, "-").concat(d.data.id);
8924 }).merge(arcLabelLines);
8925 mainArcLabelLine.style("fill", function (d) {
8926 return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data);
8927 }).style("display", config.gauge_label_show ? "" : "none").each(function (d) {
8928 var lineLength = 0,
8929 lineThickness = 2,
8930 x = 0,
8931 y = 0,
8932 transform = "";
8933
8934 if ($$.hiddenTargetIds.indexOf(d.data.id) < 0) {
8935 var updated = $$.updateAngle(d),
8936 innerLineLength = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length * (updated.index + 1),
8937 lineAngle = updated.endAngle - Math.PI / 2,
8938 arcInnerRadius = $$.radius - innerLineLength,
8939 linePositioningAngle = lineAngle - (arcInnerRadius === 0 ? 0 : 1 / arcInnerRadius);
8940 lineLength = $$.radiusExpanded - $$.radius + innerLineLength, x = Math.cos(linePositioningAngle) * arcInnerRadius, y = Math.sin(linePositioningAngle) * arcInnerRadius, transform = "rotate(".concat(lineAngle * 180 / Math.PI, ", ").concat(x, ", ").concat(y, ")");
8941 }
8942
8943 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).attr("x", x).attr("y", y).attr("width", lineLength).attr("height", lineThickness).attr("transform", transform).style("stroke-dasharray", "0, ".concat(lineLength + lineThickness, ", 0"));
8944 });
8945 },
8946 bindArcEvent: function bindArcEvent(arc) {
8947 function selectArc(_this, arcData, id) {
8948 $$.expandArc(id), $$.api.focus(id), $$.toggleFocusLegend(id, !0), $$.showTooltip([arcData], _this);
8949 }
8950
8951 function unselectArc(arcData) {
8952 var id = arcData && arcData.id || undefined;
8953 $$.unexpandArc(id), $$.api.revert(), $$.revertLegend(), $$.hideTooltip();
8954 }
8955
8956 var $$ = this,
8957 isTouch = $$.inputType === "touch",
8958 isMouse = $$.inputType === "mouse";
8959
8960 // touch events
8961 if (arc.on("click", function (d, i) {
8962 var arcData,
8963 updated = $$.updateAngle(d);
8964 updated && (arcData = $$.convertToArcData(updated), $$.toggleShape && $$.toggleShape(this, arcData, i), $$.config.data_onclick.call($$.api, arcData, this));
8965 }), isMouse && arc.on("mouseover", function (d) {
8966 if (!$$.transiting) // skip while transiting
8967 {
8968 var updated = $$.updateAngle(d),
8969 arcData = updated ? $$.convertToArcData(updated) : null,
8970 id = arcData && arcData.id || undefined;
8971 selectArc(this, arcData, id), $$.setOverOut(!0, arcData);
8972 }
8973 }).on("mouseout", function (d) {
8974 if (!$$.transiting) // skip while transiting
8975 {
8976 var updated = $$.updateAngle(d),
8977 arcData = updated ? $$.convertToArcData(updated) : null;
8978 unselectArc(), $$.setOverOut(!1, arcData);
8979 }
8980 }).on("mousemove", function (d) {
8981 var updated = $$.updateAngle(d),
8982 arcData = updated ? $$.convertToArcData(updated) : null;
8983 $$.showTooltip([arcData], this);
8984 }), isTouch && $$.hasArcType() && !$$.radars) {
8985 var getEventArc = function () {
8986 var touch = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].changedTouches[0],
8987 eventArc = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(browser_doc.elementFromPoint(touch.clientX, touch.clientY));
8988 return eventArc;
8989 },
8990 handler = function () {
8991 if (!$$.transiting) // skip while transiting
8992 {
8993 var eventArc = getEventArc(),
8994 datum = eventArc.datum(),
8995 updated = datum && datum.data && datum.data.id ? $$.updateAngle(datum) : null,
8996 arcData = updated ? $$.convertToArcData(updated) : null,
8997 id = arcData && arcData.id || undefined;
8998 $$.callOverOutForTouch(arcData), isUndefined(id) ? unselectArc() : selectArc(this, arcData, id);
8999 }
9000 };
9001
9002 $$.svg.on("touchstart", handler).on("touchmove", handler);
9003 }
9004 },
9005 redrawArcText: function redrawArcText(duration) {
9006 var text,
9007 $$ = this,
9008 config = $$.config,
9009 main = $$.main,
9010 hasGauge = $$.hasType("gauge"),
9011 hasMultiArcGauge = $$.hasMultiArcGauge();
9012
9013 if (hasGauge && $$.data.targets.length === 1 && config.gauge_title || (text = main.selectAll(".".concat(config_classes.chartArc)).select("text").style("opacity", "0").attr("class", function (d) {
9014 return $$.isGaugeType(d.data) ? config_classes.gaugeValue : null;
9015 }).call($$.textForArcLabel.bind($$)).attr("transform", $$.transformForArcLabel.bind($$)).style("font-size", function (d) {
9016 return $$.isGaugeType(d.data) && $$.data.targets.length === 1 && !hasMultiArcGauge ? "".concat(Math.round($$.radius / 5), "px") : null;
9017 }).transition().duration(duration).style("opacity", function (d) {
9018 return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? "1" : "0";
9019 }), hasMultiArcGauge && text.attr("dy", "-.1em")), main.select(".".concat(config_classes.chartArcsTitle)).style("opacity", $$.hasType("donut") || hasGauge ? "1" : "0"), hasGauge) {
9020 var isFullCircle = config.gauge_fullCircle,
9021 startAngle = -1 * Math.PI / 2,
9022 endAngle = (isFullCircle ? -4 : -1) * startAngle;
9023 isFullCircle && text && text.attr("dy", "".concat(Math.round($$.radius / 14)));
9024 var backgroundArc = $$.arcs.select("".concat(hasMultiArcGauge ? "g" : "", ".").concat(config_classes.chartArcsBackground));
9025
9026 if (hasMultiArcGauge) {
9027 var index = 0;
9028 backgroundArc = backgroundArc.selectAll("path.".concat(config_classes.chartArcsBackground)).data($$.data.targets), backgroundArc.enter().append("path").attr("class", function (d, i) {
9029 return "".concat(config_classes.chartArcsBackground, " ").concat(config_classes.chartArcsBackground, "-").concat(i);
9030 }).merge(backgroundArc).attr("d", function (d1) {
9031 if ($$.hiddenTargetIds.indexOf(d1.id) >= 0) return "M 0 0";
9032 var d = {
9033 data: [{
9034 value: config.gauge_max
9035 }],
9036 startAngle: startAngle,
9037 endAngle: endAngle,
9038 index: index++
9039 };
9040 return $$.getArc(d, !0, !0);
9041 }), backgroundArc.exit().remove();
9042 } else backgroundArc.attr("d", function () {
9043 var d = {
9044 data: [{
9045 value: config.gauge_max
9046 }],
9047 startAngle: startAngle,
9048 endAngle: endAngle
9049 };
9050 return $$.getArc(d, !0, !0);
9051 });
9052
9053 $$.arcs.select(".".concat(config_classes.chartArcsGaugeUnit)).attr("dy", ".75em").text(config.gauge_label_show ? config.gauge_units : ""), config.gauge_label_show && ($$.arcs.select(".".concat(config_classes.chartArcsGaugeMin)).attr("dx", "".concat(-1 * ($$.innerRadius + ($$.radius - $$.innerRadius) / (isFullCircle ? 1 : 2)), "px")).attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_min, !1)), !isFullCircle && $$.arcs.select(".".concat(config_classes.chartArcsGaugeMax)).attr("dx", "".concat($$.innerRadius + ($$.radius - $$.innerRadius) / 2, "px")).attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_max, !0)));
9054 }
9055 },
9056 initGauge: function initGauge() {
9057 var $$ = this,
9058 config = $$.config,
9059 arcs = $$.arcs,
9060 appendText = function (className) {
9061 arcs.append("text").attr("class", className).style("text-anchor", "middle").style("pointer-events", "none");
9062 };
9063
9064 $$.hasType("gauge") && (arcs.append($$.hasMultiArcGauge() ? "g" : "path").attr("class", config_classes.chartArcsBackground), config.gauge_units && appendText(config_classes.chartArcsGaugeUnit), config.gauge_label_show && (appendText(config_classes.chartArcsGaugeMin), !config.gauge_fullCircle && appendText(config_classes.chartArcsGaugeMax)));
9065 },
9066 getGaugeLabelHeight: function getGaugeLabelHeight() {
9067 return this.config.gauge_label_show ? 20 : 0;
9068 }
9069});
9070// CONCATENATED MODULE: ./src/shape/bar.js
9071
9072
9073/**
9074 * Copyright (c) 2017 ~ present NAVER Corp.
9075 * billboard.js project is licensed under the MIT license
9076 */
9077
9078
9079
9080
9081extend(ChartInternal_ChartInternal.prototype, {
9082 initBar: function initBar() {
9083 var $$ = this;
9084 $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartBars);
9085 },
9086 updateTargetsForBar: function updateTargetsForBar(targets) {
9087 var $$ = this,
9088 config = $$.config,
9089 classChartBar = $$.classChartBar.bind($$),
9090 classBars = $$.classBars.bind($$),
9091 classFocus = $$.classFocus.bind($$),
9092 mainBarUpdate = $$.main.select(".".concat(config_classes.chartBars)).selectAll(".".concat(config_classes.chartBar)).data(targets).attr("class", function (d) {
9093 return classChartBar(d) + classFocus(d);
9094 }),
9095 mainBarEnter = mainBarUpdate.enter().append("g").attr("class", classChartBar).style("opacity", "0").style("pointer-events", "none");
9096 // Bars for each data
9097 mainBarEnter.append("g").attr("class", classBars).style("cursor", function (d) {
9098 return config.data_selection_isselectable(d) ? "pointer" : null;
9099 });
9100 },
9101 updateBar: function updateBar(durationForExit) {
9102 var $$ = this,
9103 barData = $$.barData.bind($$),
9104 classBar = $$.classBar.bind($$),
9105 initialOpacity = $$.initialOpacity.bind($$);
9106 $$.mainBar = $$.main.selectAll(".".concat(config_classes.bars)).selectAll(".".concat(config_classes.bar)).data(barData), $$.mainBar.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.mainBar = $$.mainBar.enter().append("path").attr("class", classBar).style("fill", $$.color).merge($$.mainBar).style("opacity", initialOpacity);
9107 },
9108 redrawBar: function redrawBar(drawBar, withTransition) {
9109 return [(withTransition ? this.mainBar.transition(getRandom()) : this.mainBar).attr("d", drawBar).style("fill", this.color).style("opacity", "1")];
9110 },
9111 getBarW: function getBarW(axis, barTargetsNum) {
9112 var result,
9113 $$ = this,
9114 config = $$.config,
9115 maxDataCount = $$.getMaxDataCount(),
9116 isGrouped = config.data_groups.length,
9117 tickInterval = ($$.zoomScale || $$) && !$$.isCategorized() ? $$.xx($$.subX.domain()[1]) / maxDataCount : axis.tickInterval(maxDataCount),
9118 getWidth = function (id) {
9119 var width = id ? config.bar_width[id] : config.bar_width,
9120 ratio = id ? width.ratio : config.bar_width_ratio,
9121 max = id ? width.max : config.bar_width_max,
9122 w = isNumber(width) ? width : barTargetsNum ? tickInterval * ratio / barTargetsNum : 0;
9123 return max && w > max ? max : w;
9124 };
9125
9126 return result = getWidth(), !isGrouped && isObjectType(config.bar_width) && (result = {
9127 width: result,
9128 total: []
9129 }, $$.filterTargetsToShow($$.data.targets).forEach(function (v) {
9130 config.bar_width[v.id] && (result[v.id] = getWidth(v.id), result.total.push(result[v.id] || result.width));
9131 })), result;
9132 },
9133 getBars: function getBars(i, id) {
9134 var $$ = this,
9135 suffix = isValue(i) ? "-".concat(i) : "";
9136 return (id ? $$.main.selectAll(".".concat(config_classes.bars).concat($$.getTargetSelectorSuffix(id))) : $$.main).selectAll(".".concat(config_classes.bar).concat(suffix));
9137 },
9138 expandBars: function expandBars(i, id, reset) {
9139 var $$ = this;
9140 reset && $$.unexpandBars(), $$.getBars(i, id).classed(config_classes.EXPANDED, !0);
9141 },
9142 unexpandBars: function unexpandBars(i) {
9143 this.getBars(i).classed(config_classes.EXPANDED, !1);
9144 },
9145 generateDrawBar: function generateDrawBar(barIndices, isSub) {
9146 var $$ = this,
9147 config = $$.config,
9148 getPoints = $$.generateGetBarPoints(barIndices, isSub),
9149 isRotated = config.axis_rotated,
9150 isGrouped = config.data_groups.length,
9151 barRadius = config.bar_radius,
9152 barRadiusRatio = config.bar_radius_ratio,
9153 getRadius = isNumber(barRadius) && barRadius > 0 ? function () {
9154 return barRadius;
9155 } : isNumber(barRadiusRatio) ? function (w) {
9156 return w * barRadiusRatio;
9157 } : null;
9158 return function (d, i) {
9159 // 4 points that make a bar
9160 var points = getPoints(d, i),
9161 indexX = +isRotated,
9162 indexY = +!indexX,
9163 isNegative = d.value < 0,
9164 pathRadius = ["", ""],
9165 radius = 0; // switch points if axis is rotated, not applicable for sub chart
9166
9167 if (getRadius && !isGrouped) {
9168 var index = isRotated ? indexY : indexX,
9169 barW = points[2][index] - points[0][index];
9170 radius = getRadius(barW);
9171 var arc = "a".concat(radius, ",").concat(radius, " ").concat(isNegative ? "1 0 0" : "0 0 1", " ");
9172 pathRadius[+!isRotated] = "".concat(arc).concat(radius, ",").concat(radius), pathRadius[+isRotated] = "".concat(arc).concat([-radius, radius][isRotated ? "sort" : "reverse"]()), isNegative && pathRadius.reverse();
9173 } // path string data shouldn't be containing new line chars
9174 // https://github.com/naver/billboard.js/issues/530
9175
9176
9177 var path = isRotated ? "H".concat(points[1][indexX] - radius, " ").concat(pathRadius[0], "V").concat(points[2][indexY] - radius, " ").concat(pathRadius[1], "H").concat(points[3][indexX]) : "V".concat(points[1][indexY] + (isNegative ? -radius : radius), " ").concat(pathRadius[0], "H").concat(points[2][indexX] - radius, " ").concat(pathRadius[1], "V").concat(points[3][indexY]);
9178 return "M".concat(points[0][indexX], ",").concat(points[0][indexY]).concat(path, "z");
9179 };
9180 },
9181 generateGetBarPoints: function generateGetBarPoints(barIndices, isSub) {
9182 var $$ = this,
9183 axis = isSub ? $$.subXAxis : $$.xAxis,
9184 barTargetsNum = $$.getIndicesMax(barIndices) + 1,
9185 barW = $$.getBarW(axis, barTargetsNum),
9186 barX = $$.getShapeX(barW, barIndices, !!isSub),
9187 barY = $$.getShapeY(!!isSub),
9188 barOffset = $$.getShapeOffset($$.isBarType, barIndices, !!isSub),
9189 yScale = isSub ? $$.getSubYScale : $$.getYScale;
9190 return function (d, i) {
9191 var y0 = yScale.call($$, d.id)(0),
9192 offset = barOffset(d, i) || y0,
9193 width = isNumber(barW) ? barW : barW[d.id] || barW.width,
9194 posX = barX(d),
9195 posY = barY(d);
9196 // 4 points that make a bar
9197 return $$.config.axis_rotated && (d.value > 0 && posY < y0 || d.value < 0 && y0 < posY) && (posY = y0), posY -= y0 - offset, [[posX, offset], [posX, posY], [posX + width, posY], [posX + width, offset]];
9198 };
9199 },
9200 isWithinBar: function isWithinBar(that) {
9201 var mouse = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(that),
9202 list = getRectSegList(that),
9203 _list2 = _slicedToArray(list, 2),
9204 seg0 = _list2[0],
9205 seg1 = _list2[1],
9206 x = Math.min(seg0.x, seg1.x),
9207 y = Math.min(seg0.y, seg1.y),
9208 offset = this.config.bar_sensitivity,
9209 _that$getBBox = that.getBBox(),
9210 width = _that$getBBox.width,
9211 height = _that$getBBox.height;
9212
9213 return x - offset < mouse[0] && mouse[0] < x + width + offset && y - offset < mouse[1] && mouse[1] < y + height + offset;
9214 }
9215});
9216// CONCATENATED MODULE: ./src/shape/bubble.js
9217/**
9218 * Copyright (c) 2017 ~ present NAVER Corp.
9219 * billboard.js project is licensed under the MIT license
9220 */
9221
9222
9223extend(ChartInternal_ChartInternal.prototype, {
9224 /**
9225 * Initializer
9226 * @private
9227 */
9228 initBubble: function initBubble() {
9229 var $$ = this,
9230 config = $$.config;
9231 $$.hasType("bubble") && (config.point_show = !0, config.point_type = "circle", config.point_sensitivity = 25);
9232 },
9233
9234 /**
9235 * Get user agent's computed value for the total length of the path in user units
9236 * https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
9237 * @return {Number}
9238 * @private
9239 */
9240 getBaseLength: function getBaseLength() {
9241 var $$ = this,
9242 cacheKey = "$baseLength",
9243 baseLength = $$.getCache(cacheKey);
9244 return baseLength || $$.addCache(cacheKey, baseLength = getMinMax("min", [$$.axes.x.select("path").node().getTotalLength(), $$.axes.y.select("path").node().getTotalLength()])), baseLength;
9245 },
9246
9247 /**
9248 * Get the radius value for bubble circle
9249 * @param {Object} d
9250 * @return {Number}
9251 * @private
9252 */
9253 getBubbleR: function getBubbleR(d) {
9254 var $$ = this,
9255 maxR = $$.config.bubble_maxR;
9256 isFunction(maxR) ? maxR = maxR(d) : !isNumber(maxR) && (maxR = $$.getBaseLength() / ($$.getMaxDataCount() * 2) + 12);
9257 var max = getMinMax("max", $$.getMinMaxData().max.map(function (d) {
9258 return $$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "y") : isObject(d.value) ? d.value.mid : d.value;
9259 })),
9260 maxArea = maxR * maxR * Math.PI,
9261 area = ($$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "z") : d.value) * (maxArea / max);
9262 return Math.sqrt(area / Math.PI);
9263 },
9264
9265 /**
9266 * Get bubble dimension data
9267 * @param {Object|Array} d data value
9268 * @param {String} type - y or z
9269 * @return {Number}
9270 * @private
9271 */
9272 getBubbleZData: function getBubbleZData(d, type) {
9273 return isObject(d) ? d[type] : d[type === "y" ? 0 : 1];
9274 },
9275
9276 /**
9277 * Determine if bubble has dimension data
9278 * @param {Object|array} d data value
9279 * @return {Boolean}
9280 * @private
9281 */
9282 isBubbleZType: function isBubbleZType(d) {
9283 var $$ = this;
9284 return $$.isBubbleType(d) && (isObject(d.value) && ("z" in d.value || "y" in d.value) || isArray(d.value) && d.value.length === 2);
9285 }
9286});
9287// CONCATENATED MODULE: ./src/shape/line.js
9288/**
9289 * Copyright (c) 2017 ~ present NAVER Corp.
9290 * billboard.js project is licensed under the MIT license
9291 */
9292
9293
9294
9295
9296
9297extend(ChartInternal_ChartInternal.prototype, {
9298 initLine: function initLine() {
9299 var $$ = this;
9300 $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartLines);
9301 },
9302 updateTargetsForLine: function updateTargetsForLine(targets) {
9303 var $$ = this,
9304 config = $$.config,
9305 classChartLine = $$.classChartLine.bind($$),
9306 classLines = $$.classLines.bind($$),
9307 classAreas = $$.classAreas.bind($$),
9308 classCircles = $$.classCircles.bind($$),
9309 classFocus = $$.classFocus.bind($$),
9310 mainLineUpdate = $$.main.select(".".concat(config_classes.chartLines)).selectAll(".".concat(config_classes.chartLine)).data(targets).attr("class", function (d) {
9311 return classChartLine(d) + classFocus(d);
9312 }),
9313 mainLineEnter = mainLineUpdate.enter().append("g").attr("class", classChartLine).style("opacity", "0").style("pointer-events", "none");
9314 // Lines for each data
9315 // Areas
9316 // Update date for selected circles
9317 mainLineEnter.append("g").attr("class", classLines), mainLineEnter.append("g").attr("class", classAreas), config.point_show && (config.data_selection_enabled && mainLineEnter.append("g").attr("class", function (d) {
9318 return $$.generateClass(config_classes.selectedCircles, d.id);
9319 }), mainLineEnter.append("g").attr("class", classCircles).style("cursor", function (d) {
9320 return config.data_selection_isselectable(d) ? "pointer" : null;
9321 })), targets.forEach(function (t) {
9322 $$.main.selectAll(".".concat(config_classes.selectedCircles).concat($$.getTargetSelectorSuffix(t.id))).selectAll("".concat(config_classes.selectedCircle)).each(function (d) {
9323 d.value = t.values[d.index].value;
9324 });
9325 });
9326 },
9327 updateLine: function updateLine(durationForExit) {
9328 var $$ = this;
9329 $$.mainLine = $$.main.selectAll(".".concat(config_classes.lines)).selectAll(".".concat(config_classes.line)).data($$.lineData.bind($$)), $$.mainLine.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.mainLine = $$.mainLine.enter().append("path").attr("class", function (d) {
9330 return "".concat($$.classLine.bind($$)(d), " ").concat($$.extraLineClasses(d) || "");
9331 }).style("stroke", $$.color).merge($$.mainLine).style("opacity", $$.initialOpacity.bind($$)).style("shape-rendering", function (d) {
9332 return $$.isStepType(d) ? "crispEdges" : "";
9333 }).attr("transform", null);
9334 },
9335 redrawLine: function redrawLine(drawLine, withTransition) {
9336 return [(withTransition ? this.mainLine.transition(getRandom()) : this.mainLine).attr("d", drawLine).style("stroke", this.color).style("opacity", "1")];
9337 },
9338
9339 /**
9340 * Get the curve interpolate
9341 * @param {Array} d Data object
9342 * @return {Function}
9343 * @private
9344 */
9345 getCurve: function getCurve(d) {
9346 var $$ = this,
9347 isRotatedStepType = $$.config.axis_rotated && $$.isStepType(d);
9348 // when is step & rotated, should be computed in different way
9349 // https://github.com/naver/billboard.js/issues/471
9350 return isRotatedStepType ? function (context) {
9351 var step = $$.getInterpolate(d)(context); // keep the original method
9352
9353 return step.orgPoint = step.point, step.pointRotated = function (x, y) {
9354 this._point === 1 && (this._point = 2);
9355 var y1 = this._y * (1 - this._t) + y * this._t;
9356 this._context.lineTo(this._x, y1), this._context.lineTo(x, y1), this._x = x, this._y = y;
9357 }, step.point = function (x, y) {
9358 this._point === 0 ? this.orgPoint(x, y) : this.pointRotated(x, y);
9359 }, step;
9360 } : $$.getInterpolate(d);
9361 },
9362 generateDrawLine: function generateDrawLine(lineIndices, isSub) {
9363 var $$ = this,
9364 config = $$.config,
9365 lineConnectNull = config.line_connectNull,
9366 isRotated = config.axis_rotated,
9367 getPoints = $$.generateGetLinePoints(lineIndices, isSub),
9368 yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
9369 xValue = function (d) {
9370 return (isSub ? $$.subxx : $$.xx).call($$, d);
9371 },
9372 yValue = function (d, i) {
9373 return $$.isGrouped(d.id) ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)($$.getBaseValue(d));
9374 },
9375 line = Object(external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["line"])();
9376
9377 line = isRotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue), lineConnectNull || (line = line.defined(function (d) {
9378 return $$.getBaseValue(d) !== null;
9379 }));
9380 var x = isSub ? $$.subX : $$.x;
9381 return function (d) {
9382 var path,
9383 y = yScaleGetter.call($$, d.id),
9384 values = lineConnectNull ? $$.filterRemoveNull(d.values) : d.values,
9385 x0 = 0,
9386 y0 = 0;
9387
9388 if ($$.isLineType(d)) {
9389 var regions = config.data_regions[d.id];
9390 regions ? path = $$.lineWithRegions(values, x, y, regions) : ($$.isStepType(d) && (values = $$.convertValuesToStep(values)), path = line.curve($$.getCurve(d))(values));
9391 } else values[0] && (x0 = x(values[0].x), y0 = y(values[0].value)), path = isRotated ? "M ".concat(y0, " ").concat(x0) : "M ".concat(x0, " ").concat(y0);
9392
9393 return path || "M 0 0";
9394 };
9395 },
9396 generateGetLinePoints: function generateGetLinePoints(lineIndices, isSubValue) {
9397 // partial duplication of generateGetBarPoints
9398 var $$ = this,
9399 config = $$.config,
9400 isSub = !!isSubValue,
9401 x = $$.getShapeX(0, lineIndices, isSub),
9402 y = $$.getShapeY(isSub),
9403 lineOffset = $$.getShapeOffset($$.isLineType, lineIndices, isSub),
9404 yScale = isSub ? $$.getSubYScale : $$.getYScale;
9405 return function (d, i) {
9406 var y0 = yScale.call($$, d.id)(0),
9407 offset = lineOffset(d, i) || y0,
9408 posX = x(d),
9409 posY = y(d);
9410 config.axis_rotated && (d.value > 0 && posY < y0 || d.value < 0 && y0 < posY) && (posY = y0);
9411 // 1 point that marks the line position
9412 var point = [posX, posY - (y0 - offset)];
9413 return [point, point, // from here and below, needed for compatibility
9414 point, point];
9415 };
9416 },
9417 lineWithRegions: function lineWithRegions(d, x, y, _regions) {
9418 var xp,
9419 yp,
9420 diff,
9421 diffx2,
9422 $$ = this,
9423 config = $$.config,
9424 isRotated = config.axis_rotated,
9425 isTimeSeries = $$.isTimeSeries(),
9426 xOffset = $$.isCategorized() ? .5 : 0,
9427 regions = [],
9428 dasharray = "2 2",
9429 isWithinRegions = function (withinX, withinRegions) {
9430 for (var reg, i = 0; reg = withinRegions[i]; i++) if (reg.start < withinX && withinX <= reg.end) return reg.style;
9431
9432 return !1;
9433 };
9434
9435 // Check start/end of regions
9436 if (isDefined(_regions)) {
9437 var getValue = function (v, def) {
9438 return isUndefined(v) ? def : isTimeSeries ? $$.parseDate(v) : v;
9439 };
9440
9441 for (var reg, i = 0; reg = _regions[i]; i++) {
9442 var start = getValue(reg.start, d[0].x),
9443 end = getValue(reg.end, d[d.length - 1].x),
9444 style = reg.style || {
9445 dasharray: dasharray
9446 };
9447 regions[i] = {
9448 start: start,
9449 end: end,
9450 style: style
9451 };
9452 }
9453 } // Set scales
9454
9455
9456 var xValue = isRotated ? function (dt) {
9457 return y(dt.value);
9458 } : function (dt) {
9459 return x(dt.x);
9460 },
9461 yValue = isRotated ? function (dt) {
9462 return x(dt.x);
9463 } : function (dt) {
9464 return y(dt.value);
9465 },
9466 generateM = function (points) {
9467 return "M".concat(points[0][0], ",").concat(points[0][1], "L").concat(points[1][0], ",").concat(points[1][1]);
9468 },
9469 sWithRegion = isTimeSeries ? function (d0, d1, k, timeseriesDiff) {
9470 var x0 = d0.x.getTime(),
9471 xDiff = d1.x - d0.x,
9472 xv0 = new Date(x0 + xDiff * k),
9473 xv1 = new Date(x0 + xDiff * (k + timeseriesDiff)),
9474 points = isRotated ? [[y(yp(k)), x(xv0)], [y(yp(k + diff)), x(xv1)]] : [[x(xv0), y(yp(k))], [x(xv1), y(yp(k + diff))]];
9475 return generateM(points);
9476 } : function (d0, d1, k, otherDiff) {
9477 var points = isRotated ? [[y(yp(k), !0), x(xp(k))], [y(yp(k + otherDiff), !0), x(xp(k + otherDiff))]] : [[x(xp(k), !0), y(yp(k))], [x(xp(k + otherDiff), !0), y(yp(k + otherDiff))]];
9478 return generateM(points);
9479 },
9480 path = "";
9481
9482 for (var data, _i = 0; data = d[_i]; _i++) {
9483 var prevData = d[_i - 1],
9484 hasPrevData = prevData && isValue(prevData.value),
9485 style = isWithinRegions(data.x, regions);
9486 // https://github.com/naver/billboard.js/issues/1172
9487 if (isValue(data.value)) // Draw as normal
9488 if (isUndefined(regions) || !style || !hasPrevData) path += "".concat(_i && hasPrevData ? "L" : "M").concat(xValue(data), ",").concat(yValue(data));else if (hasPrevData) {
9489 try {
9490 style = style.dasharray.split(" ");
9491 } catch (e) {
9492 style = dasharray.split(" ");
9493 } // Draw with region // TODO: Fix for horizotal charts
9494
9495
9496 xp = $$.getScale(prevData.x + xOffset, data.x + xOffset, isTimeSeries), yp = $$.getScale(prevData.value, data.value);
9497 var dx = x(data.x) - x(prevData.x),
9498 dy = y(data.value) - y(prevData.value),
9499 dd = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
9500 diff = style[0] / dd, diffx2 = diff * style[1];
9501
9502 for (var _j = diff; _j <= 1; _j += diffx2) path += sWithRegion(prevData, data, _j, diff), _j + diffx2 >= 1 && (path += sWithRegion(prevData, data, 1, 0));
9503 }
9504 }
9505
9506 return path;
9507 },
9508 updateAreaGradient: function updateAreaGradient() {
9509 var $$ = this;
9510 $$.data.targets.forEach(function (d) {
9511 var id = "".concat($$.datetimeId, "-areaGradient").concat($$.getTargetSelectorSuffix(d.id));
9512
9513 if ($$.isAreaType(d) && $$.defs.select("#".concat(id)).empty()) {
9514 var color = $$.color(d),
9515 _$$$config$area_linea = $$.config.area_linearGradient,
9516 _$$$config$area_linea2 = _$$$config$area_linea.x,
9517 x = _$$$config$area_linea2 === void 0 ? [0, 0] : _$$$config$area_linea2,
9518 _$$$config$area_linea3 = _$$$config$area_linea.y,
9519 y = _$$$config$area_linea3 === void 0 ? [0, 1] : _$$$config$area_linea3,
9520 _$$$config$area_linea4 = _$$$config$area_linea.stops,
9521 stops = _$$$config$area_linea4 === void 0 ? [[0, color, 1], [1, color, 0]] : _$$$config$area_linea4,
9522 linearGradient = $$.defs.append("linearGradient").attr("id", "".concat(id)).attr("x1", x[0]).attr("x2", x[1]).attr("y1", y[0]).attr("y2", y[1]);
9523 stops.forEach(function (v) {
9524 var stopColor = isFunction(v[1]) ? v[1](d.id) : v[1];
9525 linearGradient.append("stop").attr("offset", v[0]).attr("stop-color", stopColor || color).attr("stop-opacity", v[2]);
9526 });
9527 }
9528 });
9529 },
9530 updateAreaColor: function updateAreaColor(d) {
9531 var $$ = this;
9532 return $$.config.area_linearGradient ? "url(#".concat($$.datetimeId, "-areaGradient").concat($$.getTargetSelectorSuffix(d.id), ")") : $$.color(d);
9533 },
9534 updateArea: function updateArea(durationForExit) {
9535 var $$ = this;
9536 $$.config.area_linearGradient && $$.updateAreaGradient(), $$.mainArea = $$.main.selectAll(".".concat(config_classes.areas)).selectAll(".".concat(config_classes.area)).data($$.lineData.bind($$)), $$.mainArea.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.mainArea = $$.mainArea.enter().append("path").attr("class", $$.classArea.bind($$)).style("fill", $$.updateAreaColor.bind($$)).style("opacity", function () {
9537 return $$.orgAreaOpacity = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).style("opacity"), "0";
9538 }).merge($$.mainArea), $$.mainArea.style("opacity", $$.orgAreaOpacity);
9539 },
9540 redrawArea: function redrawArea(drawArea, withTransition) {
9541 var $$ = this;
9542 return [(withTransition ? $$.mainArea.transition(getRandom()) : $$.mainArea).attr("d", drawArea).style("fill", $$.updateAreaColor.bind($$)).style("opacity", function (d) {
9543 return ($$.isAreaRangeType(d) ? $$.orgAreaOpacity / 1.75 : $$.orgAreaOpacity) + "";
9544 })];
9545 },
9546
9547 /**
9548 * Generate area path data
9549 * @param areaIndices
9550 * @param isSub
9551 * @return {function(*=): (*|string)}
9552 * @private
9553 */
9554 generateDrawArea: function generateDrawArea(areaIndices, isSub) {
9555 var $$ = this,
9556 config = $$.config,
9557 lineConnectNull = config.line_connectNull,
9558 isRotated = config.axis_rotated,
9559 getPoints = $$.generateGetAreaPoints(areaIndices, isSub),
9560 yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale,
9561 xValue = function (d) {
9562 return (isSub ? $$.subxx : $$.xx).call($$, d);
9563 },
9564 value0 = function (d, i) {
9565 return $$.isGrouped(d.id) ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)($$.isAreaRangeType(d) ? $$.getAreaRangeData(d, "high") : 0);
9566 },
9567 value1 = function (d, i) {
9568 return $$.isGrouped(d.id) ? getPoints(d, i)[1][1] : yScaleGetter.call($$, d.id)($$.isAreaRangeType(d) ? $$.getAreaRangeData(d, "low") : d.value);
9569 };
9570
9571 return function (d) {
9572 var path,
9573 values = lineConnectNull ? $$.filterRemoveNull(d.values) : d.values,
9574 x0 = 0,
9575 y0 = 0;
9576
9577 if ($$.isAreaType(d)) {
9578 var area = Object(external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_["area"])();
9579 area = isRotated ? area.y(xValue).x0(value0).x1(value1) : area.x(xValue).y0(config.area_above ? 0 : value0).y1(value1), lineConnectNull || (area = area.defined(function (d) {
9580 return $$.getBaseValue(d) !== null;
9581 })), $$.isStepType(d) && (values = $$.convertValuesToStep(values)), path = area.curve($$.getCurve(d))(values);
9582 } else values[0] && (x0 = $$.x(values[0].x), y0 = $$.getYScale(d.id)(values[0].value)), path = isRotated ? "M ".concat(y0, " ").concat(x0) : "M ".concat(x0, " ").concat(y0);
9583
9584 return path || "M 0 0";
9585 };
9586 },
9587 generateGetAreaPoints: function generateGetAreaPoints(areaIndices, isSub) {
9588 // partial duplication of generateGetBarPoints
9589 var $$ = this,
9590 config = $$.config,
9591 x = $$.getShapeX(0, areaIndices, !!isSub),
9592 y = $$.getShapeY(!!isSub),
9593 areaOffset = $$.getShapeOffset($$.isAreaType, areaIndices, !!isSub),
9594 yScale = isSub ? $$.getSubYScale : $$.getYScale;
9595 return function (d, i) {
9596 var y0 = yScale.call($$, d.id)(0),
9597 offset = areaOffset(d, i) || y0,
9598 posX = x(d),
9599 posY = y(d);
9600 // 1 point that marks the area position
9601 return config.axis_rotated && (d.value > 0 && posY < y0 || d.value < 0 && y0 < posY) && (posY = y0), [[posX, offset], [posX, posY - (y0 - offset)], [posX, posY - (y0 - offset)], // needed for compatibility
9602 [posX, offset] // needed for compatibility
9603 ];
9604 };
9605 },
9606 updateCircle: function updateCircle() {
9607 var $$ = this;
9608
9609 if ($$.config.point_show) {
9610 $$.mainCircle = $$.main.selectAll(".".concat(config_classes.circles)).selectAll(".".concat(config_classes.circle)).data(function (d) {
9611 return !$$.isBarType(d) && (!$$.isLineType(d) || $$.shouldDrawPointsForLine(d)) && $$.labelishData(d);
9612 }), $$.mainCircle.exit().remove();
9613 var fn = $$.point("create", this, $$.pointR.bind($$), $$.color);
9614 $$.mainCircle = $$.mainCircle.enter().append(fn).merge($$.mainCircle).style("stroke", $$.color).style("opacity", $$.initialOpacityForCircle.bind($$));
9615 }
9616 },
9617 redrawCircle: function redrawCircle(cx, cy, withTransition, flow) {
9618 var $$ = this,
9619 selectedCircles = $$.main.selectAll(".".concat(config_classes.selectedCircle));
9620 if (!$$.config.point_show) return [];
9621 var mainCircles = [];
9622 $$.mainCircle.each(function (d) {
9623 var fn = $$.point("update", $$, cx, cy, $$.opacityForCircle.bind($$), $$.color, withTransition, flow, selectedCircles).bind(this),
9624 result = fn(d);
9625 mainCircles.push(result);
9626 });
9627 var posAttr = $$.isCirclePoint() ? "c" : "";
9628 return [mainCircles, selectedCircles.attr("".concat(posAttr, "x"), cx).attr("".concat(posAttr, "y"), cy)];
9629 },
9630 circleX: function circleX(d) {
9631 var $$ = this,
9632 hasValue = isValue(d.x);
9633 return $$.config.zoom_enabled && $$.zoomScale ? hasValue ? $$.zoomScale(d.x) : null : hasValue ? $$.x(d.x) : null;
9634 },
9635 updateCircleY: function updateCircleY() {
9636 var $$ = this,
9637 getPoints = $$.generateGetLinePoints($$.getShapeIndices($$.isLineType), !1);
9638
9639 $$.circleY = function (d, i) {
9640 var id = d.id;
9641 return $$.isGrouped(id) ? getPoints(d, i)[0][1] : $$.getYScale(id)($$.getBaseValue(d));
9642 };
9643 },
9644 getCircles: function getCircles(i, id) {
9645 var $$ = this,
9646 suffix = isValue(i) ? "-".concat(i) : "";
9647 return (id ? $$.main.selectAll(".".concat(config_classes.circles).concat($$.getTargetSelectorSuffix(id))) : $$.main).selectAll(".".concat(config_classes.circle).concat(suffix));
9648 },
9649 expandCircles: function expandCircles(i, id, reset) {
9650 var $$ = this,
9651 r = $$.pointExpandedR.bind($$);
9652 reset && $$.unexpandCircles();
9653 var circles = $$.getCircles(i, id).classed(config_classes.EXPANDED, !0),
9654 scale = r(circles) / $$.config.point_r,
9655 ratio = 1 - scale;
9656 $$.isCirclePoint() ? circles.attr("r", r) : circles.each(function () {
9657 var point = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this);
9658 if (this.tagName === "circle") point.attr("r", r);else {
9659 var _this$getBBox = this.getBBox(),
9660 width = _this$getBBox.width,
9661 height = _this$getBBox.height,
9662 x = ratio * (+point.attr("x") + width / 2),
9663 y = ratio * (+point.attr("y") + height / 2);
9664
9665 point.attr("transform", "translate(".concat(x, " ").concat(y, ") scale(").concat(scale, ")"));
9666 }
9667 });
9668 },
9669 unexpandCircles: function unexpandCircles(i) {
9670 var $$ = this,
9671 r = $$.pointR.bind($$),
9672 circles = $$.getCircles(i).filter(function () {
9673 return Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.EXPANDED);
9674 }).classed(config_classes.EXPANDED, !1);
9675 circles.attr("r", r), $$.isCirclePoint() || circles.attr("transform", "scale(".concat(r(circles) / $$.config.point_r, ")"));
9676 },
9677 pointR: function (d) {
9678 var $$ = this,
9679 config = $$.config,
9680 pointR = config.point_r,
9681 r = pointR;
9682 return $$.isStepType(d) ? r = 0 : $$.isBubbleType(d) ? r = $$.getBubbleR(d) : isFunction(pointR) && (r = pointR(d)), r;
9683 },
9684 pointExpandedR: function pointExpandedR(d) {
9685 var $$ = this,
9686 config = $$.config,
9687 scale = $$.isBubbleType(d) ? 1.15 : 1.75;
9688 return config.point_focus_expand_enabled ? config.point_focus_expand_r || $$.pointR(d) * scale : $$.pointR(d);
9689 },
9690 pointSelectR: function pointSelectR(d) {
9691 var $$ = this,
9692 selectR = $$.config.point_select_r;
9693 return isFunction(selectR) ? selectR(d) : selectR || $$.pointR(d) * 4;
9694 },
9695 isWithinCircle: function isWithinCircle(node, r) {
9696 var mouse = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(node),
9697 element = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(node),
9698 prefix = this.isCirclePoint() ? "c" : "",
9699 cx = +element.attr("".concat(prefix, "x")),
9700 cy = +element.attr("".concat(prefix, "y"));
9701
9702 // if node don't have cx/y or x/y attribute value
9703 if (!(cx || cy) && node.nodeType === 1) {
9704 var _ref = node.getBBox ? node.getBBox() : node.getBoundingClientRect(),
9705 x = _ref.x,
9706 y = _ref.y;
9707
9708 cx = x, cy = y;
9709 }
9710
9711 return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < (r || this.config.point_sensitivity);
9712 },
9713 isWithinStep: function isWithinStep(that, y) {
9714 return Math.abs(y - Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(that)[1]) < 30;
9715 },
9716 shouldDrawPointsForLine: function shouldDrawPointsForLine(d) {
9717 var linePoint = this.config.line_point;
9718 return linePoint === !0 || isArray(linePoint) && linePoint.indexOf(d.id) !== -1;
9719 }
9720});
9721// CONCATENATED MODULE: ./src/shape/point.js
9722/**
9723 * Copyright (c) 2017 ~ present NAVER Corp.
9724 * billboard.js project is licensed under the MIT license
9725 */
9726
9727
9728
9729
9730
9731extend(ChartInternal_ChartInternal.prototype, {
9732 hasValidPointType: function hasValidPointType(type) {
9733 return /^(circle|rect(angle)?|polygon|ellipse|use)$/i.test(type || this.config.point_type);
9734 },
9735 hasValidPointDrawMethods: function hasValidPointDrawMethods(type) {
9736 var pointType = type || this.config.point_type;
9737 return isObjectType(pointType) && isFunction(pointType.create) && isFunction(pointType.update);
9738 },
9739 insertPointInfoDefs: function insertPointInfoDefs(point, id) {
9740 var $$ = this,
9741 copyAttr = function (from, target) {
9742 for (var name, attribs = from.attributes, i = 0; name = attribs[i]; i++) name = name.name, target.setAttribute(name, from.getAttribute(name));
9743 },
9744 doc = new DOMParser().parseFromString(point, "image/svg+xml"),
9745 node = doc.documentElement,
9746 clone = browser_doc.createElementNS(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["namespaces"].svg, node.nodeName.toLowerCase());
9747
9748 if (clone.id = id, clone.style.fill = "inherit", clone.style.stroke = "inherit", copyAttr(node, clone), node.childNodes && node.childNodes.length) {
9749 var parent = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(clone);
9750 "innerHTML" in clone ? parent.html(node.innerHTML) : toArray(node.childNodes).forEach(function (v) {
9751 copyAttr(v, parent.append(v.tagName).node());
9752 });
9753 }
9754
9755 $$.defs.node().appendChild(clone);
9756 },
9757 pointFromDefs: function pointFromDefs(id) {
9758 return this.defs.select("#".concat(id));
9759 },
9760 updatePointClass: function updatePointClass(d) {
9761 var $$ = this,
9762 pointClass = !1;
9763 return (isObject(d) || $$.mainCircle) && (pointClass = d === !0 ? $$.mainCircle.each(function (d) {
9764 var className = $$.classCircle.bind($$)(d);
9765 this.getAttribute("class").indexOf(config_classes.EXPANDED) > -1 && (className += " ".concat(config_classes.EXPANDED)), this.setAttribute("class", className);
9766 }) : $$.classCircle(d)), pointClass;
9767 },
9768 generatePoint: function generatePoint() {
9769 var $$ = this,
9770 config = $$.config,
9771 ids = [],
9772 pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type];
9773 return function (method, context) {
9774 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) args[_key - 2] = arguments[_key];
9775
9776 return function (d) {
9777 var id = d.id || d.data && d.data.id || d,
9778 element = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this);
9779 ids.indexOf(id) < 0 && ids.push(id);
9780 var point = pattern[ids.indexOf(id) % pattern.length];
9781 if ($$.hasValidPointType(point)) point = $$[point];else if (!$$.hasValidPointDrawMethods(point)) {
9782 var pointId = "".concat($$.datetimeId, "-point-").concat(id),
9783 pointFromDefs = $$.pointFromDefs(pointId);
9784 if (pointFromDefs.size() < 1 && $$.insertPointInfoDefs(point, pointId), method === "create") return $$.custom.create.bind(context).apply(void 0, [element, pointId].concat(args));
9785 if (method === "update") return $$.custom.update.bind(context).apply(void 0, [element].concat(args));
9786 }
9787 return point[method].bind(context).apply(void 0, [element].concat(args));
9788 };
9789 };
9790 },
9791 getTransitionName: function getTransitionName() {
9792 return getRandom();
9793 },
9794 custom: {
9795 create: function create(element, id, sizeFn, fillStyleFn) {
9796 return element.append("use").attr("xlink:href", "#".concat(id)).attr("class", this.updatePointClass.bind(this)).style("fill", fillStyleFn).node();
9797 },
9798 update: function update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) {
9799 var $$ = this,
9800 _element$node$getBBox = element.node().getBBox(),
9801 width = _element$node$getBBox.width,
9802 height = _element$node$getBBox.height,
9803 xPosFn2 = function (d) {
9804 return xPosFn(d) - width / 2;
9805 },
9806 mainCircles = element;
9807
9808 if (withTransition) {
9809 var transitionName = $$.getTransitionName();
9810 flow && mainCircles.attr("x", xPosFn2), mainCircles = mainCircles.transition(transitionName), selectedCircles.transition($$.getTransitionName());
9811 }
9812
9813 return mainCircles.attr("x", xPosFn2).attr("y", function yPosFn2(d) {
9814 return yPosFn(d) - height / 2;
9815 }).style("opacity", opacityStyleFn).style("fill", fillStyleFn);
9816 }
9817 },
9818 // 'circle' data point
9819 circle: {
9820 create: function create(element, sizeFn, fillStyleFn) {
9821 return element.append("circle").attr("class", this.updatePointClass.bind(this)).attr("r", sizeFn).style("fill", fillStyleFn).node();
9822 },
9823 update: function update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) {
9824 var $$ = this,
9825 mainCircles = element;
9826
9827 if ($$.hasType("bubble") && mainCircles.attr("r", $$.pointR.bind($$)), withTransition) {
9828 var transitionName = $$.getTransitionName();
9829 flow && mainCircles.attr("cx", xPosFn), mainCircles.attr("cx") && (mainCircles = mainCircles.transition(transitionName)), selectedCircles.transition($$.getTransitionName());
9830 }
9831
9832 return mainCircles.attr("cx", xPosFn).attr("cy", yPosFn).style("opacity", opacityStyleFn).style("fill", fillStyleFn);
9833 }
9834 },
9835 // 'rectangle' data point
9836 rectangle: {
9837 create: function create(element, sizeFn, fillStyleFn) {
9838 var rectSizeFn = function (d) {
9839 return sizeFn(d) * 2;
9840 };
9841
9842 return element.append("rect").attr("class", this.updatePointClass.bind(this)).attr("width", rectSizeFn).attr("height", rectSizeFn).style("fill", fillStyleFn).node();
9843 },
9844 update: function update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) {
9845 var $$ = this,
9846 r = $$.config.point_r,
9847 rectXPosFn = function (d) {
9848 return xPosFn(d) - r;
9849 },
9850 mainCircles = element;
9851
9852 if (withTransition) {
9853 var transitionName = $$.getTransitionName();
9854 flow && mainCircles.attr("x", rectXPosFn), mainCircles = mainCircles.transition(transitionName), selectedCircles.transition($$.getTransitionName());
9855 }
9856
9857 return mainCircles.attr("x", rectXPosFn).attr("y", function rectYPosFn(d) {
9858 return yPosFn(d) - r;
9859 }).style("opacity", opacityStyleFn).style("fill", fillStyleFn);
9860 }
9861 }
9862});
9863// CONCATENATED MODULE: ./src/shape/radar.js
9864
9865
9866/**
9867 * Copyright (c) 2017 ~ present NAVER Corp.
9868 * billboard.js project is licensed under the MIT license
9869 */
9870
9871
9872
9873
9874/**
9875 * Get the position value
9876 * @param {Boolean} isClockwise If the direction is clockwise
9877 * @param {String} type Coordinate type 'x' or 'y'
9878 * @param {Number} edge Number of edge
9879 * @param {Number} pos The indexed position
9880 * @param {Number} range
9881 * @param {Number} ratio
9882 * @return {number}
9883 * @private
9884 */
9885
9886function getPosition(isClockwise, type, edge, pos, range, ratio) {
9887 var index = isClockwise && pos > 0 ? edge - pos : pos,
9888 r = 2 * Math.PI,
9889 func = type === "x" ? Math.sin : Math.cos;
9890 return range * (1 - ratio * func(index * r / edge));
9891} // cache key
9892
9893
9894var radar_cacheKey = "$radarPoints";
9895extend(ChartInternal_ChartInternal.prototype, {
9896 initRadar: function initRadar() {
9897 var $$ = this,
9898 config = $$.config;
9899 $$.hasType("radar") && ($$.radars = $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartRadars), $$.radars.levels = $$.radars.append("g").attr("class", config_classes.levels), $$.radars.axes = $$.radars.append("g").attr("class", config_classes.axis), $$.radars.shapes = $$.radars.append("g").attr("class", config_classes.shapes), $$.maxValue = config.radar_axis_max || $$.getMinMaxData().max[0].value);
9900 },
9901 getRadarSize: function getRadarSize() {
9902 var $$ = this,
9903 config = $$.config,
9904 padding = config.axis_x_categories.length < 4 ? -20 : 10,
9905 size = (Math.min($$.arcWidth, $$.arcHeight) - padding) / 2;
9906 return [size, size];
9907 },
9908 updateTargetsForRadar: function updateTargetsForRadar(targets) {
9909 var $$ = this,
9910 config = $$.config;
9911 isEmpty(config.axis_x_categories) && (config.axis_x_categories = getRange(0, getMinMax("max", targets.map(function (v) {
9912 return v.values.length;
9913 })))), $$.generateRadarPoints();
9914 },
9915 getRadarPosition: function getRadarPosition(type, index, range, ratio) {
9916 var $$ = this,
9917 config = $$.config,
9918 _$$$getRadarSize = $$.getRadarSize(),
9919 _$$$getRadarSize2 = _slicedToArray(_$$$getRadarSize, 2),
9920 width = _$$$getRadarSize2[0],
9921 height = _$$$getRadarSize2[1],
9922 edge = config.axis_x_categories.length,
9923 isClockwise = config.radar_direction_clockwise,
9924 pos = toArray(type).map(function (v) {
9925 return getPosition(isClockwise, v, edge, index, isDefined(range) ? range : type === "x" ? width : height, isNumber(ratio) ? ratio : config.radar_size_ratio);
9926 });
9927
9928 return pos.length === 1 ? pos[0] : pos;
9929 },
9930
9931 /**
9932 * Generate data points
9933 * @private
9934 */
9935 generateRadarPoints: function generateRadarPoints() {
9936 var $$ = this,
9937 targets = $$.data.targets,
9938 _$$$getRadarSize3 = $$.getRadarSize(),
9939 _$$$getRadarSize4 = _slicedToArray(_$$$getRadarSize3, 2),
9940 width = _$$$getRadarSize4[0],
9941 height = _$$$getRadarSize4[1],
9942 points = $$.getCache(radar_cacheKey) || {},
9943 size = points._size;
9944
9945 size && (size.width === width || size.height === height) || (targets.forEach(function (d) {
9946 points[d.id] = d.values.map(function (v, i) {
9947 return $$.getRadarPosition(["x", "y"], i, undefined, $$.getRatio("radar", v));
9948 });
9949 }), points._size = {
9950 width: width,
9951 height: height
9952 }, $$.addCache(radar_cacheKey, points));
9953 },
9954 redrawRadar: function redrawRadar(durationForExit) {
9955 var $$ = this,
9956 translate = $$.getTranslate("radar");
9957 translate && ($$.radars.attr("transform", translate), $$.main.selectAll(".".concat(config_classes.circles)).attr("transform", translate), $$.main.select(".".concat(config_classes.chartTexts)).attr("transform", translate), $$.generateRadarPoints(), $$.updateRadarLevel(), $$.updateRadarAxes(), $$.updateRadarShape(durationForExit));
9958 },
9959 generateGetRadarPoints: function generateGetRadarPoints() {
9960 var $$ = this,
9961 points = $$.getCache(radar_cacheKey);
9962 return function (d, i) {
9963 var point = points[d.id][i];
9964 return [point, point, point, point];
9965 };
9966 },
9967 updateRadarLevel: function updateRadarLevel() {
9968 var $$ = this,
9969 config = $$.config,
9970 _$$$getRadarSize5 = $$.getRadarSize(),
9971 _$$$getRadarSize6 = _slicedToArray(_$$$getRadarSize5, 2),
9972 width = _$$$getRadarSize6[0],
9973 height = _$$$getRadarSize6[1],
9974 depth = config.radar_level_depth,
9975 edge = config.axis_x_categories.length,
9976 showText = config.radar_level_text_show,
9977 radarLevels = $$.radars.levels,
9978 levelData = getRange(0, depth),
9979 radius = config.radar_size_ratio * Math.min(width, height),
9980 levelRatio = levelData.map(function (l) {
9981 return radius * ((l + 1) / depth);
9982 }),
9983 levelTextFormat = config.radar_level_text_format,
9984 points = levelData.map(function (v) {
9985 var range = levelRatio[v],
9986 pos = getRange(0, edge).map(function (i) {
9987 return $$.getRadarPosition(["x", "y"], i, range, 1).join(",");
9988 });
9989 return pos.join(" ");
9990 }),
9991 level = radarLevels.selectAll(".".concat(config_classes.level)).data(levelData);
9992
9993 level.exit().remove();
9994 var levelEnter = level.enter().append("g").attr("class", function (d, i) {
9995 return "".concat(config_classes.level, " ").concat(config_classes.level, "-").concat(i);
9996 });
9997 levelEnter.append("polygon").style("visibility", config.radar_level_show ? null : "hidden"), showText && (radarLevels.select("text").empty() && radarLevels.append("text").attr("dx", "-.5em").attr("dy", "-.7em").style("text-anchor", "end").text(function () {
9998 return levelTextFormat(0);
9999 }), levelEnter.append("text").attr("dx", "-.5em").style("text-anchor", "end").text(function (d) {
10000 return levelTextFormat($$.maxValue / levelData.length * (d + 1));
10001 })), levelEnter.merge(level).attr("transform", function (d) {
10002 return "translate(".concat(width - levelRatio[d], ", ").concat(height - levelRatio[d], ")");
10003 }).selectAll("polygon").attr("points", function (d) {
10004 return points[d];
10005 }), showText && radarLevels.selectAll("text").attr("x", function (d) {
10006 return isUndefined(d) ? width : points[d].split(",")[0];
10007 }).attr("y", function (d) {
10008 return isUndefined(d) ? height : 0;
10009 });
10010 },
10011 updateRadarAxes: function updateRadarAxes() {
10012 var $$ = this,
10013 config = $$.config,
10014 _$$$getRadarSize7 = $$.getRadarSize(),
10015 _$$$getRadarSize8 = _slicedToArray(_$$$getRadarSize7, 2),
10016 width = _$$$getRadarSize8[0],
10017 height = _$$$getRadarSize8[1],
10018 categories = config.axis_x_categories,
10019 axis = $$.radars.axes.selectAll("g").data(categories);
10020
10021 axis.exit().remove();
10022 var axisEnter = axis.enter().append("g").attr("class", function (d, i) {
10023 return "".concat(config_classes.axis, "-").concat(i);
10024 });
10025
10026 // axis text
10027 if (config.radar_axis_line_show && axisEnter.append("line"), config.radar_axis_text_show && axisEnter.append("text"), axis = axisEnter.merge(axis), config.radar_axis_line_show && axis.select("line").attr("x1", width).attr("y1", height).attr("x2", function (d, i) {
10028 return $$.getRadarPosition("x", i);
10029 }).attr("y2", function (d, i) {
10030 return $$.getRadarPosition("y", i);
10031 }), config.radar_axis_text_show) {
10032 var _config$radar_axis_te = config.radar_axis_text_position,
10033 _config$radar_axis_te2 = _config$radar_axis_te.x,
10034 x = _config$radar_axis_te2 === void 0 ? 0 : _config$radar_axis_te2,
10035 _config$radar_axis_te3 = _config$radar_axis_te.y,
10036 y = _config$radar_axis_te3 === void 0 ? 0 : _config$radar_axis_te3;
10037 axis.select("text").style("text-anchor", "middle").attr("dy", ".5em").call(function (selection) {
10038 selection.each(function (d) {
10039 setTextValue(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this), d + "", [-.6, 1.2]);
10040 });
10041 }).datum(function (d, i) {
10042 return {
10043 index: i
10044 };
10045 }).attr("transform", function (d) {
10046 isUndefined(this.width) && (this.width = this.getBoundingClientRect().width / 2);
10047 var posX = $$.getRadarPosition("x", d.index, undefined, 1),
10048 posY = Math.round($$.getRadarPosition("y", d.index, undefined, 1));
10049 return posX > width ? posX += this.width + x : Math.round(posX) < width && (posX -= this.width + x), posY > height ? (posY / 2 === height && this.firstChild.tagName === "tspan" && this.firstChild.setAttribute("dy", "0em"), posY += y) : posY < height && (posY -= y), "translate(".concat(posX, " ").concat(posY, ")");
10050 });
10051 }
10052
10053 $$.bindEvent();
10054 },
10055 bindEvent: function bindEvent() {
10056 var _this = this,
10057 $$ = this,
10058 config = $$.config;
10059
10060 if (config.interaction_enabled) {
10061 var isMouse = $$.inputType === "mouse",
10062 getIndex = function () {
10063 var target = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].target; // in case of multilined axis text
10064
10065 /tspan/i.test(target.tagName) && (target = target.parentNode);
10066 var d = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(target).datum();
10067 return d && Object.keys(d).length === 1 ? d.index : undefined;
10068 },
10069 hide = function () {
10070 var index = getIndex(),
10071 noIndex = isUndefined(index);
10072 (isMouse || noIndex) && (_this.hideTooltip(), _this.unexpandCircles(), isMouse ? $$.setOverOut(!1, index) : noIndex && $$.callOverOutForTouch());
10073 };
10074
10075 $$.radars.select(".".concat(config_classes.axis)).on(isMouse ? "mouseover " : "touchstart", function () {
10076 if (!$$.transiting) // skip while transiting
10077 {
10078 var index = getIndex();
10079 $$.selectRectForSingle($$.svg.node(), null, index), isMouse ? $$.setOverOut(!0, index) : $$.callOverOutForTouch(index);
10080 }
10081 }).on("mouseout", isMouse ? hide : null), isMouse || $$.svg.on("touchstart", hide);
10082 }
10083 },
10084 updateRadarShape: function updateRadarShape(durationForExit) {
10085 var $$ = this,
10086 targets = $$.data.targets,
10087 points = $$.getCache(radar_cacheKey),
10088 areas = $$.radars.shapes.selectAll("polygon").data(targets),
10089 areasEnter = areas.enter().append("g").attr("class", $$.classChartRadar.bind($$));
10090 areas.exit().transition().duration(durationForExit).remove(), areasEnter.append("polygon").merge(areas).style("fill", $$.color).style("stroke", $$.color).attr("points", function (d) {
10091 return points[d.id].join(" ");
10092 });
10093 },
10094
10095 /**
10096 * Get data point x coordinate
10097 * @param {Object} d Data object
10098 * @return {Number}
10099 * @private
10100 */
10101 radarCircleX: function radarCircleX(d) {
10102 return this.getCache(radar_cacheKey)[d.id][d.index][0];
10103 },
10104
10105 /**
10106 * Get data point y coordinate
10107 * @param {Object} d Data object
10108 * @return {Number}
10109 * @private
10110 */
10111 radarCircleY: function radarCircleY(d) {
10112 return this.getCache(radar_cacheKey)[d.id][d.index][1];
10113 }
10114});
10115// CONCATENATED MODULE: ./src/internals/text.js
10116/**
10117 * Copyright (c) 2017 ~ present NAVER Corp.
10118 * billboard.js project is licensed under the MIT license
10119 */
10120
10121
10122
10123
10124extend(ChartInternal_ChartInternal.prototype, {
10125 /**
10126 * Initializes the text
10127 * @private
10128 */
10129 initText: function initText() {
10130 var $$ = this;
10131 $$.main.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartTexts), $$.mainText = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]);
10132 },
10133
10134 /**
10135 * Update chartText
10136 * @private
10137 * @param {Object} $$.data.targets
10138 */
10139 updateTargetsForText: function updateTargetsForText(targets) {
10140 var $$ = this,
10141 classChartText = $$.classChartText.bind($$),
10142 classTexts = $$.classTexts.bind($$),
10143 classFocus = $$.classFocus.bind($$),
10144 mainTextUpdate = $$.main.select(".".concat(config_classes.chartTexts)).selectAll(".".concat(config_classes.chartText)).data(targets).attr("class", function (d) {
10145 return classChartText(d) + classFocus(d);
10146 }),
10147 mainTextEnter = mainTextUpdate.enter().append("g").attr("class", classChartText).style("opacity", "0").style("pointer-events", "none");
10148 mainTextEnter.append("g").attr("class", classTexts);
10149 },
10150
10151 /**
10152 * Update text
10153 * @private
10154 * @param {Number} Fade-out transition duration
10155 */
10156 updateText: function updateText(durationForExit) {
10157 var _this = this,
10158 $$ = this,
10159 config = $$.config,
10160 dataFn = $$.labelishData.bind($$),
10161 classText = $$.classText.bind($$);
10162
10163 $$.mainText = $$.main.selectAll(".".concat(config_classes.texts)).selectAll(".".concat(config_classes.text)).data(function (d) {
10164 return _this.isRadarType(d) ? d.values : dataFn(d);
10165 }), $$.mainText.exit().transition().duration(durationForExit).style("fill-opacity", "0").remove(), $$.mainText = $$.mainText.enter().append("text").merge($$.mainText).attr("class", classText).attr("text-anchor", function (d) {
10166 return config.axis_rotated ? d.value < 0 ? "end" : "start" : "middle";
10167 }).style("fill", $$.updateTextColor.bind($$)).style("fill-opacity", "0").text(function (d, i, j) {
10168 var value = $$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "z") : d.value;
10169 return $$.dataLabelFormat(d.id)(value, d.id, i, j);
10170 });
10171 },
10172 updateTextColor: function updateTextColor(d) {
10173 var color,
10174 $$ = this,
10175 labelColors = $$.config.data_labels_colors;
10176 return isString(labelColors) ? color = labelColors : isObject(labelColors) && (color = labelColors[d.id]), color || $$.color(d);
10177 },
10178
10179 /**
10180 * Redraw chartText
10181 * @param {Function} x Positioning function for x
10182 * @param {Function} y Positioning function for y
10183 * @param {Boolean} forFlow
10184 * @param {Boolean} withTransition transition is enabled
10185 * @private
10186 */
10187 redrawText: function redrawText(x, y, forFlow, withTransition) {
10188 var $$ = this,
10189 t = getRandom(),
10190 opacityForText = forFlow ? 0 : $$.opacityForText.bind($$);
10191 return [$$.mainText.each(function (d, i) {
10192 var text = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this); // do not apply transition for newly added text elements
10193
10194 (withTransition && text.attr("x") ? text.transition(t) : text).attr("x", x.bind(this)(d, i)).attr("y", y.bind(this)(d, i)).style("fill", $$.updateTextColor.bind($$)).style("fill-opacity", opacityForText);
10195 })];
10196 },
10197
10198 /**
10199 * Gets the getBoundingClientRect value of the element
10200 * @private
10201 * @param {HTMLElement|d3.selection} element
10202 * @param {String} className
10203 * @returns {Object} value of element.getBoundingClientRect()
10204 */
10205 getTextRect: function getTextRect(element, className) {
10206 var $$ = this,
10207 base = element.node ? element.node() : element;
10208 /text/i.test(base.tagName) || (base = base.querySelector("text"));
10209 var text = base.textContent,
10210 cacheKey = "$".concat(text.replace(/\W/g, "_")),
10211 rect = $$.getCache(cacheKey);
10212 return rect || ($$.svg.append("text").style("visibility", "hidden").style("font", Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(base).style("font")).classed(className, !0).text(text).call(function (v) {
10213 rect = getBoundingRect(v.node());
10214 }).remove(), $$.addCache(cacheKey, rect)), rect;
10215 },
10216
10217 /**
10218 * Gets the x or y coordinate of the text
10219 * @param {Object} indices Indices values
10220 * @param {Boolean} forX whether or not to x
10221 * @returns {Number} coordinates
10222 * @private
10223 */
10224 generateXYForText: function generateXYForText(indices, forX) {
10225 var $$ = this,
10226 types = Object.keys(indices),
10227 points = {},
10228 getter = forX ? $$.getXForText : $$.getYForText;
10229 return $$.hasType("radar") && types.push("radar"), types.forEach(function (v) {
10230 points[v] = $$["generateGet".concat(capitalize(v), "Points")](indices[v], !1);
10231 }), function (d, i) {
10232 var type = $$.isAreaType(d) && "area" || $$.isBarType(d) && "bar" || $$.isRadarType(d) && "radar" || "line";
10233 return getter.call($$, points[type](d, i), d, this);
10234 };
10235 },
10236
10237 /**
10238 * Get centerized text position for bar type data.label.text
10239 * @private
10240 * @param {Object} d Data object
10241 * @param {Array} points Data points position
10242 * @param {HTMLElement} textElement Data label text element
10243 * @returns {Number} Position value
10244 */
10245 getCenteredTextPos: function getCenteredTextPos(d, points, textElement) {
10246 var $$ = this,
10247 config = $$.config,
10248 isRotated = config.axis_rotated;
10249
10250 if (config.data_labels.centered && $$.isBarType(d)) {
10251 var rect = getBoundingRect(textElement),
10252 isPositive = d.value >= 0;
10253
10254 if (isRotated) {
10255 var w = (isPositive ? points[1][1] - points[0][1] : points[0][1] - points[1][1]) / 2 + rect.width / 2;
10256 return isPositive ? -w - 3 : w + 2;
10257 }
10258
10259 var h = (isPositive ? points[0][1] - points[1][1] : points[1][1] - points[0][1]) / 2 + rect.height / 2;
10260 return isPositive ? h : -h - 2;
10261 }
10262
10263 return 0;
10264 },
10265
10266 /**
10267 * Get data.labels.position value
10268 * @param {String} id Data id value
10269 * @param {String} type x | y
10270 * @return {Number} Position value
10271 * @private
10272 */
10273 getTextPos: function getTextPos(id, type) {
10274 var pos = this.config.data_labels_position;
10275 return (id in pos ? pos[id] : pos)[type] || 0;
10276 },
10277
10278 /**
10279 * Gets the x coordinate of the text
10280 * @private
10281 * @param {Object} points
10282 * @param {Object} data
10283 * @param {HTMLElement} element
10284 * @returns {Number} x coordinate
10285 */
10286 getXForText: function getXForText(points, d, textElement) {
10287 var xPos,
10288 padding,
10289 $$ = this,
10290 config = $$.config,
10291 isRotated = config.axis_rotated;
10292 // show labels regardless of the domain if value is null
10293 if (isRotated ? (padding = $$.isBarType(d) ? 4 : 6, xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1)) : xPos = $$.hasType("bar") ? (points[2][0] + points[0][0]) / 2 : points[0][0], d.value === null) if (xPos > $$.width) {
10294 var _getBoundingRect = getBoundingRect(textElement),
10295 width = _getBoundingRect.width;
10296
10297 xPos = $$.width - width;
10298 } else xPos < 0 && (xPos = 4);
10299 return isRotated && (xPos += $$.getCenteredTextPos(d, points, textElement)), xPos + $$.getTextPos(d.id, "x");
10300 },
10301
10302 /**
10303 * Gets the y coordinate of the text
10304 * @private
10305 * @param {Object} points
10306 * @param {Object} data
10307 * @param {HTMLElement} element
10308 * @returns {Number} y coordinate
10309 */
10310 getYForText: function getYForText(points, d, textElement) {
10311 var yPos,
10312 $$ = this,
10313 config = $$.config,
10314 isRotated = config.axis_rotated,
10315 r = config.point_r,
10316 rect = getBoundingRect(textElement),
10317 baseY = 3;
10318 if (isRotated) yPos = (points[0][0] + points[2][0] + rect.height * .6) / 2;else if (yPos = points[2][1], isNumber(r) && r > 5 && ($$.isLineType(d) || $$.isScatterType(d)) && (baseY += config.point_r / 2.3), d.value < 0 || d.value === 0 && !$$.hasPositiveValue && $$.hasNegativeValue) yPos += rect.height + ($$.isBarType(d) ? -baseY : baseY);else {
10319 var diff = -baseY * 2;
10320 $$.isBarType(d) ? diff = -baseY : $$.isBubbleType(d) && (diff = baseY), yPos += diff;
10321 } // show labels regardless of the domain if value is null
10322
10323 if (d.value === null && !isRotated) {
10324 var boxHeight = rect.height;
10325 yPos < boxHeight ? yPos = boxHeight : yPos > this.height && (yPos = this.height - 4);
10326 }
10327
10328 return isRotated || (yPos += $$.getCenteredTextPos(d, points, textElement)), yPos + $$.getTextPos(d.id, "y");
10329 },
10330
10331 /**
10332 * Calculate if two or more text nodes are overlapping
10333 * Mark overlapping text nodes with "text-overlapping" class
10334 * @private
10335 * @param {number} id
10336 * @param {ChartInternal} $$
10337 * @param {string} selector
10338 */
10339 markOverlapped: function markOverlapped(id, $$, selector) {
10340 var textNodes = $$.arcs.selectAll(selector),
10341 filteredTextNodes = textNodes.filter(function (node) {
10342 return node.data.id !== id;
10343 }),
10344 textNode = textNodes.filter(function (node) {
10345 return node.data.id === id;
10346 }),
10347 translate = getTranslation(textNode.node()),
10348 calcHypo = function (x, y) {
10349 return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
10350 };
10351
10352 textNode.node() && filteredTextNodes.each(function () {
10353 var coordinate = getTranslation(this),
10354 filteredTextNode = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
10355 nodeForWidth = calcHypo(translate.e, translate.f) > calcHypo(coordinate.e, coordinate.f) ? textNode : filteredTextNode,
10356 overlapsX = Math.ceil(Math.abs(translate.e - coordinate.e)) < Math.ceil(nodeForWidth.node().getComputedTextLength()),
10357 overlapsY = Math.ceil(Math.abs(translate.f - coordinate.f)) < parseInt(textNode.style("font-size"), 0);
10358 filteredTextNode.classed(config_classes.TextOverlapping, overlapsX && overlapsY);
10359 });
10360 },
10361
10362 /**
10363 * Calculate if two or more text nodes are overlapping
10364 * Remove "text-overlapping" class on selected text nodes
10365 * @private
10366 * @param {ChartInternal} $$
10367 * @param {string} selector
10368 */
10369 undoMarkOverlapped: function undoMarkOverlapped($$, selector) {
10370 $$.arcs.selectAll(selector).each(function () {
10371 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([this, this.previousSibling]).classed(config_classes.TextOverlapping, !1);
10372 });
10373 }
10374});
10375// CONCATENATED MODULE: ./src/internals/type.js
10376/**
10377 * Copyright (c) 2017 ~ present NAVER Corp.
10378 * billboard.js project is licensed under the MIT license
10379 */
10380
10381 // defined chart types as category
10382
10383var TYPES = {
10384 Area: ["area", "area-spline", "area-spline-range", "area-line-range", "area-step"],
10385 AreaRange: ["area-spline-range", "area-line-range"],
10386 Arc: ["pie", "donut", "gauge", "radar"],
10387 Line: ["line", "spline", "area", "area-spline", "area-spline-range", "area-line-range", "step", "area-step"],
10388 Step: ["step", "area-step"],
10389 Spline: ["spline", "area-spline", "area-spline-range"]
10390};
10391extend(ChartInternal_ChartInternal.prototype, {
10392 setTargetType: function setTargetType(targetIds, type) {
10393 var $$ = this,
10394 config = $$.config;
10395 $$.mapToTargetIds(targetIds).forEach(function (id) {
10396 $$.withoutFadeIn[id] = type === config.data_types[id], config.data_types[id] = type;
10397 }), targetIds || (config.data_type = type);
10398 },
10399 hasType: function hasType(type, targetsValue) {
10400 var $$ = this,
10401 types = $$.config.data_types,
10402 targets = targetsValue || $$.data.targets,
10403 has = !1;
10404 return targets && targets.length ? targets.forEach(function (target) {
10405 var t = types[target.id];
10406 (t && t.indexOf(type) >= 0 || !t && type === "line") && (has = !0);
10407 }) : Object.keys(types).length ? Object.keys(types).forEach(function (id) {
10408 types[id] === type && (has = !0);
10409 }) : has = $$.config.data_type === type, has;
10410 },
10411
10412 /**
10413 * Check if contains given chart types
10414 * @param {String} type Type key
10415 * @param {Object} targets
10416 * @param {Array} exclude Excluded types
10417 * @return {boolean}
10418 * @private
10419 */
10420 hasTypeOf: function hasTypeOf(type, targets) {
10421 var _this = this,
10422 exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
10423
10424 return !TYPES[type].filter(function (v) {
10425 return exclude.indexOf(v) === -1;
10426 }).every(function (v) {
10427 return !_this.hasType(v, targets);
10428 });
10429 },
10430
10431 /**
10432 * Check if given data is certain chart type
10433 * @param {Object} d Data object
10434 * @param {String} type chart type
10435 * @return {Boolean}
10436 * @private
10437 */
10438 isTypeOf: function isTypeOf(d, type) {
10439 var id = isString(d) ? d : d.id,
10440 dataType = this.config.data_types[id];
10441 return isArray(type) ? type.indexOf(dataType) >= 0 : dataType === type;
10442 },
10443
10444 /**
10445 * Check if contains arc types chart
10446 * @param {Object} targets
10447 * @param {Array} exclude Excluded types
10448 * @return {boolean}
10449 * @private
10450 */
10451 hasArcType: function hasArcType(targets, exclude) {
10452 return this.hasTypeOf("Arc", targets, exclude);
10453 },
10454 hasMultiArcGauge: function hasMultiArcGauge() {
10455 return this.hasType("gauge") && this.config.gauge_type === "multi";
10456 },
10457 isLineType: function isLineType(d) {
10458 var id = isString(d) ? d : d.id;
10459 return !this.config.data_types[id] || this.isTypeOf(id, TYPES.Line);
10460 },
10461 isStepType: function isStepType(d) {
10462 return this.isTypeOf(d, TYPES.Step);
10463 },
10464 isSplineType: function isSplineType(d) {
10465 return this.isTypeOf(d, TYPES.Spline);
10466 },
10467 isAreaType: function isAreaType(d) {
10468 return this.isTypeOf(d, TYPES.Area);
10469 },
10470 isAreaRangeType: function isAreaRangeType(d) {
10471 return this.isTypeOf(d, TYPES.AreaRange);
10472 },
10473 isBarType: function isBarType(d) {
10474 return this.isTypeOf(d, "bar");
10475 },
10476 isBubbleType: function isBubbleType(d) {
10477 return this.isTypeOf(d, "bubble");
10478 },
10479 isScatterType: function isScatterType(d) {
10480 return this.isTypeOf(d, "scatter");
10481 },
10482 isPieType: function isPieType(d) {
10483 return this.isTypeOf(d, "pie");
10484 },
10485 isGaugeType: function isGaugeType(d) {
10486 return this.isTypeOf(d, "gauge");
10487 },
10488 isDonutType: function isDonutType(d) {
10489 return this.isTypeOf(d, "donut");
10490 },
10491 isRadarType: function isRadarType(d) {
10492 return this.isTypeOf(d, "radar");
10493 },
10494 isArcType: function isArcType(d) {
10495 return this.isPieType(d) || this.isDonutType(d) || this.isGaugeType(d) || this.isRadarType(d);
10496 },
10497 // determine if is 'circle' data point
10498 isCirclePoint: function isCirclePoint() {
10499 var config = this.config,
10500 pattern = config.point_pattern;
10501 return config.point_type === "circle" && (!pattern || isArray(pattern) && pattern.length === 0);
10502 },
10503 lineData: function lineData(d) {
10504 return this.isLineType(d) ? [d] : [];
10505 },
10506 arcData: function arcData(d) {
10507 return this.isArcType(d.data) ? [d] : [];
10508 },
10509 barData: function barData(d) {
10510 return this.isBarType(d) ? d.values : [];
10511 },
10512
10513 /**
10514 * Get data adapt for data label showing
10515 * @param {Object} d Data object
10516 * @return {Array}
10517 * @private
10518 */
10519 labelishData: function labelishData(d) {
10520 return this.isBarType(d) || this.isLineType(d) || this.isScatterType(d) || this.isBubbleType(d) || this.isRadarType(d) ? d.values : [];
10521 },
10522 barLineBubbleData: function barLineBubbleData(d) {
10523 return this.isBarType(d) || this.isLineType(d) || this.isBubbleType(d) ? d.values : [];
10524 },
10525 // https://github.com/d3/d3-shape#curves
10526 isInterpolationType: function isInterpolationType(type) {
10527 return ["basis", "basis-closed", "basis-open", "bundle", "cardinal", "cardinal-closed", "cardinal-open", "catmull-rom", "catmull-rom-closed", "catmull-rom-open", "linear", "linear-closed", "monotone-x", "monotone-y", "natural"].indexOf(type) >= 0;
10528 }
10529});
10530// CONCATENATED MODULE: ./src/internals/grid.js
10531/**
10532 * Copyright (c) 2017 ~ present NAVER Corp.
10533 * billboard.js project is licensed under the MIT license
10534 */
10535
10536
10537
10538 // Grid position and text anchor helpers
10539
10540var getGridTextAnchor = function (d) {
10541 return isValue(d.position) || "end";
10542},
10543 getGridTextDx = function (d) {
10544 return d.position === "start" ? 4 : d.position === "middle" ? 0 : -4;
10545},
10546 getGridTextX = function (isX, width, height) {
10547 return function (d) {
10548 var x = isX ? 0 : width;
10549 return d.position === "start" ? x = isX ? -height : 0 : d.position === "middle" && (x = (isX ? -height : width) / 2), x;
10550 };
10551};
10552
10553extend(ChartInternal_ChartInternal.prototype, {
10554 initGrid: function initGrid() {
10555 var $$ = this;
10556 $$.xgrid = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]), $$.initGridLines(), $$.initFocusGrid();
10557 },
10558 initGridLines: function initGridLines() {
10559 var $$ = this,
10560 config = $$.config;
10561 (config.grid_x_lines.length || config.grid_y_lines.length) && ($$.gridLines = $$.main.insert("g", ".".concat(config_classes.chart).concat(config.grid_lines_front ? " + *" : "")).attr("clip-path", $$.clipPathForGrid).attr("class", "".concat(config_classes.grid, " ").concat(config_classes.gridLines)), $$.gridLines.append("g").attr("class", config_classes.xgridLines), $$.gridLines.append("g").attr("class", config_classes.ygridLines), $$.xgridLines = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]));
10562 },
10563 updateXGrid: function updateXGrid(withoutUpdate) {
10564 var $$ = this,
10565 config = $$.config,
10566 isRotated = config.axis_rotated,
10567 xgridData = $$.generateGridData(config.grid_x_type, $$.x),
10568 tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0,
10569 pos = function (d) {
10570 return (($$.zoomScale || $$.x)(d) + tickOffset) * (isRotated ? -1 : 1);
10571 };
10572
10573 $$.xgridAttr = isRotated ? {
10574 "x1": 0,
10575 "x2": $$.width,
10576 "y1": pos,
10577 "y2": pos
10578 } : {
10579 "x1": pos,
10580 "x2": pos,
10581 "y1": 0,
10582 "y2": $$.height
10583 }, $$.xgrid = $$.main.select(".".concat(config_classes.xgrids)).selectAll(".".concat(config_classes.xgrid)).data(xgridData), $$.xgrid.exit().remove(), $$.xgrid = $$.xgrid.enter().append("line").attr("class", config_classes.xgrid).merge($$.xgrid), withoutUpdate || $$.xgrid.each(function () {
10584 var grid = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this);
10585 Object.keys($$.xgridAttr).forEach(function (id) {
10586 grid.attr(id, $$.xgridAttr[id]).style("opacity", function () {
10587 return grid.attr(isRotated ? "y1" : "x1") === (isRotated ? $$.height : 0) ? "0" : "1";
10588 });
10589 });
10590 });
10591 },
10592 updateYGrid: function updateYGrid() {
10593 var $$ = this,
10594 config = $$.config,
10595 isRotated = config.axis_rotated,
10596 gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks),
10597 pos = function (d) {
10598 return Math.ceil($$.y(d));
10599 };
10600
10601 $$.ygrid = $$.main.select(".".concat(config_classes.ygrids)).selectAll(".".concat(config_classes.ygrid)).data(gridValues), $$.ygrid.exit().remove(), $$.ygrid = $$.ygrid.enter().append("line").attr("class", config_classes.ygrid).merge($$.ygrid), $$.ygrid.attr("x1", isRotated ? pos : 0).attr("x2", isRotated ? pos : $$.width).attr("y1", isRotated ? 0 : pos).attr("y2", isRotated ? $$.height : pos), $$.smoothLines($$.ygrid, "grid");
10602 },
10603 updateGrid: function updateGrid(duration) {
10604 var $$ = this;
10605 // hide if arc type
10606 $$.gridLines || $$.initGridLines(), $$.grid.style("visibility", $$.hasArcType() ? "hidden" : "visible"), $$.hideGridFocus(), $$.updateXGridLines(duration), $$.updateYGridLines(duration);
10607 },
10608
10609 /**
10610 * Update X Grid lines
10611 * @param {Number} duration
10612 * @private
10613 */
10614 updateXGridLines: function updateXGridLines(duration) {
10615 var $$ = this,
10616 main = $$.main,
10617 config = $$.config,
10618 isRotated = config.axis_rotated;
10619 config.grid_x_show && $$.updateXGrid(), $$.xgridLines = main.select(".".concat(config_classes.xgridLines)).selectAll(".".concat(config_classes.xgridLine)).data(config.grid_x_lines), $$.xgridLines.exit().transition().duration(duration).style("opacity", "0").remove();
10620 // enter
10621 var xgridLine = $$.xgridLines.enter().append("g");
10622 xgridLine.append("line").style("opacity", "0"), xgridLine.append("text").attr("transform", isRotated ? "" : "rotate(-90)").attr("dy", -5).style("opacity", "0"), $$.xgridLines = xgridLine.merge($$.xgridLines), $$.xgridLines.attr("class", function (d) {
10623 return "".concat(config_classes.xgridLine, " ").concat(d["class"] || "").trim();
10624 }).select("text").attr("text-anchor", getGridTextAnchor).attr("dx", getGridTextDx).transition().duration(duration).text(function (d) {
10625 return d.text;
10626 }).transition().style("opacity", "1");
10627 },
10628
10629 /**
10630 * Update Y Grid lines
10631 * @param {Number} duration
10632 * @private
10633 */
10634 updateYGridLines: function updateYGridLines(duration) {
10635 var $$ = this,
10636 main = $$.main,
10637 config = $$.config,
10638 isRotated = config.axis_rotated;
10639 config.grid_y_show && $$.updateYGrid(), $$.ygridLines = main.select(".".concat(config_classes.ygridLines)).selectAll(".".concat(config_classes.ygridLine)).data(config.grid_y_lines), $$.ygridLines.exit().transition().duration(duration).style("opacity", "0").remove();
10640 // enter
10641 var ygridLine = $$.ygridLines.enter().append("g");
10642 ygridLine.append("line").style("opacity", "0"), ygridLine.append("text").attr("transform", isRotated ? "rotate(-90)" : "").style("opacity", "0"), $$.ygridLines = ygridLine.merge($$.ygridLines);
10643 // update
10644 var yv = $$.yv.bind($$);
10645 $$.ygridLines.attr("class", function (d) {
10646 return "".concat(config_classes.ygridLine, " ").concat(d["class"] || "").trim();
10647 }).select("line").transition().duration(duration).attr("x1", isRotated ? yv : 0).attr("x2", isRotated ? yv : $$.width).attr("y1", isRotated ? 0 : yv).attr("y2", isRotated ? $$.height : yv).transition().style("opacity", "1"), $$.ygridLines.select("text").attr("text-anchor", getGridTextAnchor).attr("dx", getGridTextDx).transition().duration(duration).attr("dy", -5).attr("x", getGridTextX(isRotated, $$.width, $$.height)).attr("y", yv).text(function (d) {
10648 return d.text;
10649 }).transition().style("opacity", "1");
10650 },
10651 redrawGrid: function redrawGrid(withTransition) {
10652 var $$ = this,
10653 isRotated = $$.config.axis_rotated,
10654 xv = $$.xv.bind($$),
10655 lines = $$.xgridLines.select("line"),
10656 texts = $$.xgridLines.select("text");
10657 return lines = (withTransition ? lines.transition() : lines).attr("x1", isRotated ? 0 : xv).attr("x2", isRotated ? $$.width : xv).attr("y1", isRotated ? xv : 0).attr("y2", isRotated ? xv : $$.height), texts = (withTransition ? texts.transition() : texts).attr("x", getGridTextX(!isRotated, $$.width, $$.height)).attr("y", xv).text(function (d) {
10658 return d.text;
10659 }), [(withTransition ? lines.transition() : lines).style("opacity", "1"), (withTransition ? texts.transition() : texts).style("opacity", "1")];
10660 },
10661 initFocusGrid: function initFocusGrid() {
10662 var $$ = this,
10663 config = $$.config,
10664 isFront = config.grid_front,
10665 className = ".".concat(config_classes[isFront && $$.gridLines ? "gridLines" : "chart"]).concat(isFront ? " + *" : "");
10666 $$.grid = $$.main.insert("g", className).attr("clip-path", $$.clipPathForGrid).attr("class", config_classes.grid), config.grid_x_show && $$.grid.append("g").attr("class", config_classes.xgrids), config.grid_y_show && $$.grid.append("g").attr("class", config_classes.ygrids), config.grid_focus_show && ($$.grid.append("g").attr("class", config_classes.xgridFocus).append("line").attr("class", config_classes.xgridFocus), config.grid_focus_y && !config.tooltip_grouped && $$.grid.append("g").attr("class", config_classes.ygridFocus).append("line").attr("class", config_classes.ygridFocus));
10667 },
10668
10669 /**
10670 * Show grid focus line
10671 * @param {Array} selectedData
10672 * @private
10673 */
10674 showGridFocus: function showGridFocus(selectedData) {
10675 var $$ = this,
10676 config = $$.config,
10677 isRotated = config.axis_rotated,
10678 dataToShow = selectedData.filter(function (d) {
10679 return d && isValue($$.getBaseValue(d));
10680 });
10681
10682 // Hide when bubble/scatter/stanford plot exists
10683 if (!(!config.tooltip_show || dataToShow.length === 0 || $$.hasType("bubble") || $$.hasArcType())) {
10684 var focusEl = $$.main.selectAll("line.".concat(config_classes.xgridFocus, ", line.").concat(config_classes.ygridFocus)),
10685 isEdge = config.grid_focus_edge && !config.tooltip_grouped,
10686 xx = $$.xx.bind($$);
10687 focusEl.style("visibility", "visible").data(dataToShow.concat(dataToShow)).each(function (d) {
10688 var xy,
10689 el = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
10690 pos = {
10691 x: xx(d),
10692 y: $$.getYScale(d.id)(d.value)
10693 };
10694 if (el.classed(config_classes.xgridFocus)) xy = isRotated ? [null, // x1
10695 pos.x, // y1
10696 isEdge ? pos.y : $$.width, // x2
10697 pos.x // y2
10698 ] : [pos.x, isEdge ? pos.y : null, pos.x, $$.height];else {
10699 var isY2 = $$.axis.getId(d.id) === "y2";
10700 xy = isRotated ? [pos.y, // x1
10701 isEdge && !isY2 ? pos.x : null, // y1
10702 pos.y, // x2
10703 isEdge && isY2 ? pos.x : $$.height // y2
10704 ] : [isEdge && isY2 ? pos.x : null, pos.y, isEdge && !isY2 ? pos.x : $$.width, pos.y];
10705 }
10706 ["x1", "y1", "x2", "y2"].forEach(function (v, i) {
10707 return el.attr(v, xy[i]);
10708 });
10709 }), $$.smoothLines(focusEl, "grid");
10710 }
10711 },
10712 hideGridFocus: function hideGridFocus() {
10713 var $$ = this;
10714 $$.inputType === "mouse" && $$.main.selectAll("line.".concat(config_classes.xgridFocus, ", line.").concat(config_classes.ygridFocus)).style("visibility", "hidden");
10715 },
10716 updategridFocus: function updategridFocus() {
10717 var $$ = this;
10718
10719 if ($$.inputType === "touch") {
10720 var d = $$.grid.select("line.".concat(config_classes.xgridFocus)).datum();
10721 d && $$.showGridFocus([d]);
10722 } else {
10723 var _isRotated = $$.config.axis_rotated;
10724 $$.main.select("line.".concat(config_classes.xgridFocus)).attr("x1", _isRotated ? 0 : -10).attr("x2", _isRotated ? $$.width : -10).attr("y1", _isRotated ? -10 : 0).attr("y2", _isRotated ? -10 : $$.height);
10725 }
10726 },
10727 generateGridData: function generateGridData(type, scale) {
10728 var $$ = this,
10729 tickNum = $$.main.select(".".concat(config_classes.axisX)).selectAll(".tick").size(),
10730 gridData = [];
10731
10732 if (type === "year") {
10733 var xDomain = $$.getXDomain(),
10734 firstYear = xDomain[0].getFullYear(),
10735 lastYear = xDomain[1].getFullYear();
10736
10737 for (var i = firstYear; i <= lastYear; i++) gridData.push(new Date("".concat(i, "-01-01 00:00:00")));
10738 } else gridData = scale.ticks(10), gridData.length > tickNum && (gridData = gridData.filter(function (d) {
10739 return (d + "").indexOf(".") < 0;
10740 }));
10741
10742 return gridData;
10743 },
10744 getGridFilterToRemove: function getGridFilterToRemove(params) {
10745 return params ? function (line) {
10746 var found = !1;
10747 return (isArray(params) ? params.concat() : [params]).forEach(function (param) {
10748 ("value" in param && line.value === param.value || "class" in param && line["class"] === param["class"]) && (found = !0);
10749 }), found;
10750 } : function () {
10751 return !0;
10752 };
10753 },
10754 removeGridLines: function removeGridLines(params, forX) {
10755 var $$ = this,
10756 config = $$.config,
10757 toRemove = $$.getGridFilterToRemove(params),
10758 classLines = forX ? config_classes.xgridLines : config_classes.ygridLines,
10759 classLine = forX ? config_classes.xgridLine : config_classes.ygridLine;
10760 $$.main.select(".".concat(classLines)).selectAll(".".concat(classLine)).filter(toRemove).transition().duration(config.transition_duration).style("opacity", "0").remove();
10761 var gridLines = "grid_".concat(forX ? "x" : "y", "_lines");
10762 config[gridLines] = config[gridLines].filter(function toShow(line) {
10763 return !toRemove(line);
10764 });
10765 }
10766});
10767// CONCATENATED MODULE: ./src/internals/tooltip.js
10768
10769
10770
10771/**
10772 * Copyright (c) 2017 ~ present NAVER Corp.
10773 * billboard.js project is licensed under the MIT license
10774 */
10775
10776
10777
10778
10779
10780extend(ChartInternal_ChartInternal.prototype, {
10781 /**
10782 * Initializes the tooltip
10783 * @private
10784 */
10785 initTooltip: function initTooltip() {
10786 var $$ = this,
10787 config = $$.config,
10788 bindto = config.tooltip_contents.bindto;
10789
10790 // Show tooltip if needed
10791 if ($$.tooltip = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(bindto), $$.tooltip.empty() && ($$.tooltip = $$.selectChart.style("position", "relative").append("div").attr("class", config_classes.tooltipContainer).style("position", "absolute").style("pointer-events", "none").style("display", "none")), config.tooltip_init_show) {
10792 if ($$.isTimeSeries() && isString(config.tooltip_init_x)) {
10793 var i,
10794 val,
10795 targets = $$.data.targets[0];
10796
10797 for (config.tooltip_init_x = $$.parseDate(config.tooltip_init_x), i = 0; (val = targets.values[i]) && val.x - config.tooltip_init_x !== 0; i++);
10798
10799 config.tooltip_init_x = i;
10800 }
10801
10802 $$.tooltip.html($$.getTooltipHTML($$.data.targets.map(function (d) {
10803 return $$.addName(d.values[config.tooltip_init_x]);
10804 }), $$.axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType(null, ["radar"])), $$.color)), bindto || $$.tooltip.style("top", config.tooltip_init_position.top).style("left", config.tooltip_init_position.left).style("display", "block");
10805 }
10806
10807 $$.bindTooltipResizePos();
10808 },
10809
10810 /**
10811 * Get the tooltip HTML string
10812 * @param {...any} args
10813 * @private
10814 * @return {String} Formatted HTML string
10815 */
10816 getTooltipHTML: function getTooltipHTML() {
10817 for (var _config$tooltip_conte, _$$, $$ = this, config = $$.config, _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
10818
10819 return isFunction(config.tooltip_contents) ? (_config$tooltip_conte = config.tooltip_contents).call.apply(_config$tooltip_conte, [$$].concat(args)) : (_$$ = $$).getTooltipContent.apply(_$$, args);
10820 },
10821
10822 /**
10823 * Returns the tooltip content(HTML string)
10824 * @param {Object} d data
10825 * @param {Function} defaultTitleFormat Default title format
10826 * @param {Function} defaultValueFormat Default format for each data value in the tooltip.
10827 * @param {Function} color Color function
10828 * @returns {String} html
10829 * @private
10830 */
10831 getTooltipContent: function getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) {
10832 var $$ = this,
10833 config = $$.config,
10834 titleFormat = config.tooltip_format_title || defaultTitleFormat,
10835 nameFormat = config.tooltip_format_name || function (name) {
10836 return name;
10837 },
10838 valueFormat = config.tooltip_format_value || ($$.isStackNormalized() ? function (v, ratio) {
10839 return "".concat((ratio * 100).toFixed(2), "%");
10840 } : defaultValueFormat),
10841 order = config.tooltip_order,
10842 getRowValue = function (row) {
10843 return $$.isBubbleZType(row) ? $$.getBubbleZData(row.value, "z") : $$.getBaseValue(row);
10844 },
10845 getBgColor = $$.levelColor ? function (row) {
10846 return $$.levelColor(row.value);
10847 } : function (row) {
10848 return color(row);
10849 },
10850 contents = config.tooltip_contents,
10851 tplStr = contents.template,
10852 targetIds = $$.mapToTargetIds();
10853
10854 if (order === null && config.data_groups.length) {
10855 // for stacked data, order should aligned with the visually displayed data
10856 var ids = $$.orderTargets($$.data.targets).map(function (i2) {
10857 return i2.id;
10858 }).reverse();
10859 d.sort(function (a, b) {
10860 var v1 = a ? a.value : null,
10861 v2 = b ? b.value : null;
10862 return v1 > 0 && v2 > 0 && (v1 = a.id ? ids.indexOf(a.id) : null, v2 = b.id ? ids.indexOf(b.id) : null), v1 - v2;
10863 });
10864 } else if (/^(asc|desc)$/.test(order)) {
10865 d.sort(function (a, b) {
10866 var v1 = a ? getRowValue(a) : null,
10867 v2 = b ? getRowValue(b) : null;
10868 return order === "asc" ? v1 - v2 : v2 - v1;
10869 });
10870 } else isFunction(order) && d.sort(order);
10871
10872 var text,
10873 row,
10874 param,
10875 value,
10876 i,
10877 tpl = $$.getTooltipContentTemplate(tplStr),
10878 len = d.length;
10879
10880 for (i = 0; i < len; i++) if (row = d[i], row && (getRowValue(row) || getRowValue(row) === 0)) {
10881 if (isUndefined(text)) {
10882 var title = sanitise(titleFormat ? titleFormat(row.x) : row.x);
10883 text = tplProcess(tpl[0], {
10884 CLASS_TOOLTIP: config_classes.tooltip,
10885 TITLE: isValue(title) ? tplStr ? title : "<tr><th colspan=\"2\">".concat(title, "</th></tr>") : ""
10886 });
10887 }
10888
10889 if (param = [row.ratio, row.id, row.index, d], value = sanitise(valueFormat.apply(void 0, [getRowValue(row)].concat(_toConsumableArray(param)))), $$.isAreaRangeType(row)) {
10890 var _map = ["high", "low"].map(function (v) {
10891 return sanitise(valueFormat.apply(void 0, [$$.getAreaRangeData(row, v)].concat(_toConsumableArray(param))));
10892 }),
10893 _map2 = _slicedToArray(_map, 2),
10894 high = _map2[0],
10895 low = _map2[1];
10896
10897 value = "<b>Mid:</b> ".concat(value, " <b>High:</b> ").concat(high, " <b>Low:</b> ").concat(low);
10898 }
10899
10900 if (value !== undefined) {
10901 var _ret = function () {
10902 // Skip elements when their name is set to null
10903 if (row.name === null) return "continue";
10904 var name = sanitise(nameFormat.apply(void 0, [row.name].concat(_toConsumableArray(param)))),
10905 color = getBgColor(row),
10906 contentValue = {
10907 CLASS_TOOLTIP_NAME: config_classes.tooltipName + $$.getTargetSelectorSuffix(row.id),
10908 COLOR: tplStr || !$$.patterns ? color : "<svg><rect style=\"fill:".concat(color, "\" width=\"10\" height=\"10\"></rect></svg>"),
10909 NAME: name,
10910 VALUE: value
10911 };
10912
10913 if (tplStr && isObject(contents.text)) {
10914 var index = targetIds.indexOf(row.id);
10915 Object.keys(contents.text).forEach(function (key) {
10916 contentValue[key] = contents.text[key][index];
10917 });
10918 }
10919
10920 text += tplProcess(tpl[1], contentValue);
10921 }();
10922
10923 if (_ret === "continue") continue;
10924 }
10925 }
10926
10927 return "".concat(text, "</table>");
10928 },
10929
10930 /**
10931 * Get the content template string
10932 * @param {String} tplStr
10933 * @return {String} Template string
10934 * @private
10935 */
10936 getTooltipContentTemplate: function getTooltipContentTemplate(tplStr) {
10937 return (tplStr || "<table class=\"{=CLASS_TOOLTIP}\"><tbody>\n\t\t\t\t{=TITLE}\n\t\t\t\t{{<tr class=\"{=CLASS_TOOLTIP_NAME}\">\n\t\t\t\t\t<td class=\"name\">".concat(this.patterns ? "{=COLOR}" : "<span style=\"background-color:{=COLOR}\"></span>", "{=NAME}</td>\n\t\t\t\t\t<td class=\"value\">{=VALUE}</td>\n\t\t\t\t</tr>}}\n\t\t\t</tbody></table>")).replace(/(\r?\n|\t)/g, "").split(/{{(.*)}}/);
10938 },
10939
10940 /**
10941 * Returns the position of the tooltip
10942 * @param {Object} dataToShow data
10943 * @param {String} tWidth Width value of tooltip element
10944 * @param {String} tHeight Height value of tooltip element
10945 * @param {HTMLElement} element
10946 * @returns {Object} top, left value
10947 * @private
10948 */
10949 tooltipPosition: function tooltipPosition(dataToShow, tWidth, tHeight, element) {
10950 var $$ = this,
10951 config = $$.config,
10952 hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle,
10953 svgLeft = $$.getSvgLeft(!0),
10954 _d3Mouse = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(element),
10955 _d3Mouse2 = _slicedToArray(_d3Mouse, 2),
10956 left = _d3Mouse2[0],
10957 top = _d3Mouse2[1],
10958 chartRight = svgLeft + $$.currentWidth - $$.getCurrentPaddingRight(!0),
10959 chartLeft = $$.getCurrentPaddingLeft(!0),
10960 size = 20;
10961
10962 // Determine tooltip position
10963 if (top += size, $$.hasArcType()) {
10964 var raw = $$.inputType === "touch" || $$.hasType("radar");
10965 raw || (top += hasGauge ? $$.height : $$.height / 2, left += ($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2);
10966 } else {
10967 var dataScale = $$.x(dataToShow[0].x);
10968 config.axis_rotated ? (top = dataScale + size, left += svgLeft + 100, chartRight -= svgLeft) : (top -= 5, left = svgLeft + chartLeft + size + ($$.zoomScale ? left : dataScale));
10969 } // when tooltip left + tWidth > chart's width
10970
10971
10972 return left + tWidth + 15 > chartRight && (left -= svgLeft + tWidth + chartLeft), top + tHeight > $$.currentHeight && (top -= hasGauge ? tHeight * 3 : tHeight + 30), top < 0 && (top = 0), {
10973 top: top,
10974 left: left
10975 };
10976 },
10977
10978 /**
10979 * Show the tooltip
10980 * @private
10981 * @param {Object} selectedData
10982 * @param {HTMLElement} element
10983 */
10984 showTooltip: function showTooltip(selectedData, element) {
10985 var $$ = this,
10986 config = $$.config,
10987 bindto = config.tooltip_contents.bindto,
10988 forArc = $$.hasArcType(null, ["radar"]),
10989 dataToShow = selectedData.filter(function (d) {
10990 return d && isValue($$.getBaseValue(d));
10991 });
10992
10993 if (dataToShow.length !== 0 && config.tooltip_show) {
10994 var datum = $$.tooltip.datum(),
10995 _ref = datum || {},
10996 _ref$width = _ref.width,
10997 width = _ref$width === void 0 ? 0 : _ref$width,
10998 _ref$height = _ref.height,
10999 height = _ref$height === void 0 ? 0 : _ref$height,
11000 dataStr = JSON.stringify(selectedData);
11001
11002 if (!datum || datum.current !== dataStr) {
11003 var index = selectedData.concat().sort()[0].index;
11004 callFn(config.tooltip_onshow, $$, $$.api, selectedData), $$.tooltip.html($$.getTooltipHTML(selectedData, $$.axis.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", null).style("visibility", null) // for IE9
11005 .datum(datum = {
11006 index: index,
11007 current: dataStr,
11008 width: width = $$.tooltip.property("offsetWidth"),
11009 height: height = $$.tooltip.property("offsetHeight")
11010 }), callFn(config.tooltip_onshown, $$, $$.api, selectedData), $$._handleLinkedCharts(!0, index);
11011 }
11012
11013 if (!bindto) {
11014 var fnPos = config.tooltip_position || $$.tooltipPosition,
11015 pos = fnPos.call(this, dataToShow, width, height, element); // Get tooltip dimensions
11016
11017 ["top", "left"].forEach(function (v) {
11018 var value = pos[v];
11019 $$.tooltip.style(v, "".concat(value, "px")), v !== "left" || datum.xPosInPercent || (datum.xPosInPercent = value / $$.currentWidth * 100);
11020 });
11021 }
11022 }
11023 },
11024
11025 /**
11026 * Adjust tooltip position on resize event
11027 * @private
11028 */
11029 bindTooltipResizePos: function bindTooltipResizePos() {
11030 var $$ = this,
11031 resizeFunction = $$.resizeFunction,
11032 tooltip = $$.tooltip;
11033 resizeFunction.add(function () {
11034 if (tooltip.style("display") === "block") {
11035 var currentWidth = $$.currentWidth,
11036 _tooltip$datum = tooltip.datum(),
11037 width = _tooltip$datum.width,
11038 xPosInPercent = _tooltip$datum.xPosInPercent,
11039 _value = currentWidth / 100 * xPosInPercent,
11040 diff = currentWidth - (_value + width);
11041
11042 diff < 0 && (_value += diff), tooltip.style("left", "".concat(_value, "px"));
11043 }
11044 });
11045 },
11046
11047 /**
11048 * Hide the tooltip
11049 * @param {Boolean} force Force to hide
11050 * @private
11051 */
11052 hideTooltip: function hideTooltip(force) {
11053 var $$ = this,
11054 api = $$.api,
11055 config = $$.config,
11056 tooltip = $$.tooltip;
11057
11058 if (tooltip.style("display") !== "none" && (!config.tooltip_doNotHide || force)) {
11059 var selectedData = JSON.parse(this.tooltip.datum().current);
11060 // hide tooltip
11061 callFn(config.tooltip_onhide, $$, api, selectedData), tooltip.style("display", "none").style("visibility", "hidden") // for IE9
11062 .datum(null), callFn(config.tooltip_onhidden, $$, api, selectedData);
11063 }
11064 },
11065
11066 /**
11067 * Toggle display for linked chart instances
11068 * @param {Boolean} show true: show, false: hide
11069 * @param {Number} index x Axis index
11070 * @private
11071 */
11072 _handleLinkedCharts: function _handleLinkedCharts(show, index) {
11073 var $$ = this;
11074
11075 if ($$.config.tooltip_linked) {
11076 var linkedName = $$.config.tooltip_linked_name;
11077 ($$.api.internal.charts || []).forEach(function (c) {
11078 if (c !== $$.api) {
11079 var _config = c.internal.config,
11080 isLinked = _config.tooltip_linked,
11081 name = _config.tooltip_linked_name,
11082 isInDom = browser_doc.body.contains(c.element);
11083
11084 if (isLinked && linkedName === name && isInDom) {
11085 var data = c.internal.tooltip.data()[0],
11086 isNotSameIndex = index !== (data && data.index);
11087
11088 // prevent throwing error for non-paired linked indexes
11089 try {
11090 show && isNotSameIndex ? c.tooltip.show({
11091 index: index
11092 }) : !show && c.tooltip.hide();
11093 } catch (e) {}
11094 }
11095 }
11096 });
11097 }
11098 }
11099});
11100// CONCATENATED MODULE: ./src/internals/legend.js
11101/**
11102 * Copyright (c) 2017 ~ present NAVER Corp.
11103 * billboard.js project is licensed under the MIT license
11104 */
11105
11106
11107
11108
11109
11110extend(ChartInternal_ChartInternal.prototype, {
11111 /**
11112 * Initialize the legend.
11113 * @private
11114 */
11115 initLegend: function initLegend() {
11116 var $$ = this,
11117 config = $$.config;
11118 $$.legendItemTextBox = {}, $$.legendHasRendered = !1, $$.legend = $$.svg.append("g"), config.legend_show ? ($$.legend.attr("transform", $$.getTranslate("legend")), $$.updateLegend()) : ($$.legend.style("visibility", "hidden"), $$.hiddenLegendIds = $$.mapToIds($$.data.targets));
11119 },
11120
11121 /**
11122 * Update legend element
11123 * @param {Array} targetIds ID's of target
11124 * @param {Object} options withTransform : Whether to use the transform property / withTransitionForTransform: Whether transition is used when using the transform property / withTransition : whether or not to transition.
11125 * @param {Object} transitions Return value of the generateTransitions
11126 * @private
11127 */
11128 updateLegend: function updateLegend(targetIds, options, transitions) {
11129 var $$ = this,
11130 config = $$.config,
11131 optionz = options || {
11132 withTransform: !1,
11133 withTransitionForTransform: !1,
11134 withTransition: !1
11135 };
11136 // toggle legend state
11137 // Update size and scale
11138 // Update g positions
11139 optionz.withTransition = getOption(optionz, "withTransition", !0), optionz.withTransitionForTransform = getOption(optionz, "withTransitionForTransform", !0), config.legend_contents_bindto && config.legend_contents_template ? $$.updateLegendTemplate() : $$.updateLegendElement(targetIds || $$.mapToIds($$.data.targets), optionz, transitions), $$.legend.selectAll(".".concat(config_classes.legendItem)).classed(config_classes.legendItemHidden, function (id) {
11140 return !$$.isTargetToShow(id);
11141 }), $$.updateScales(!1, !$$.zoomScale), $$.updateSvgSize(), $$.transformAll(optionz.withTransitionForTransform, transitions), $$.legendHasRendered = !0;
11142 },
11143
11144 /**
11145 * Update legend using template option
11146 * @private
11147 */
11148 updateLegendTemplate: function updateLegendTemplate() {
11149 var $$ = this,
11150 config = $$.config,
11151 wrapper = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(config.legend_contents_bindto),
11152 template = config.legend_contents_template;
11153
11154 if (!wrapper.empty()) {
11155 var targets = $$.mapToIds($$.data.targets),
11156 ids = [],
11157 html = "";
11158 targets.forEach(function (v) {
11159 var content = isFunction(template) ? template.call($$, v, $$.color(v), $$.api.data(v)[0].values) : tplProcess(template, {
11160 COLOR: $$.color(v),
11161 TITLE: v
11162 });
11163 content && (ids.push(v), html += content);
11164 });
11165 var legendItem = wrapper.html(html).selectAll(function () {
11166 return this.childNodes;
11167 }).data(ids);
11168 $$.setLegendItem(legendItem), $$.legend = wrapper;
11169 }
11170 },
11171
11172 /**
11173 * Update the size of the legend.
11174 * @private
11175 * @param {Obejct} size S
11176 */
11177 updateSizeForLegend: function updateSizeForLegend(size) {
11178 var $$ = this,
11179 config = $$.config,
11180 width = size.width,
11181 height = size.height,
11182 insetLegendPosition = {
11183 top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - height - $$.getCurrentPaddingBottom() - config.legend_inset_y,
11184 left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + .5 : $$.currentWidth - width - $$.getCurrentPaddingRight() - config.legend_inset_x + .5
11185 };
11186 $$.margin3 = {
11187 top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - height,
11188 right: NaN,
11189 bottom: 0,
11190 left: $$.isLegendRight ? $$.currentWidth - width : $$.isLegendInset ? insetLegendPosition.left : 0
11191 };
11192 },
11193
11194 /**
11195 * Transform Legend
11196 * @private
11197 * @param {Boolean} whether or not to transition.
11198 */
11199 transformLegend: function transformLegend(withTransition) {
11200 var $$ = this;
11201 (withTransition ? $$.legend.transition() : $$.legend).attr("transform", $$.getTranslate("legend"));
11202 },
11203
11204 /**
11205 * Update the legend step
11206 * @private
11207 * @param {Number} step
11208 */
11209 updateLegendStep: function updateLegendStep(step) {
11210 this.legendStep = step;
11211 },
11212
11213 /**
11214 * Update legend item width
11215 * @private
11216 * @param {Number} width
11217 */
11218 updateLegendItemWidth: function updateLegendItemWidth(w) {
11219 this.legendItemWidth = w;
11220 },
11221
11222 /**
11223 * Update legend item height
11224 * @private
11225 * @param {Number} height
11226 */
11227 updateLegendItemHeight: function updateLegendItemHeight(h) {
11228 this.legendItemHeight = h;
11229 },
11230
11231 /**
11232 * Update legend item color
11233 * @private
11234 * @param {String} id Corresponding data ID value
11235 * @param {String} color Color value
11236 */
11237 updateLegendItemColor: function updateLegendItemColor(id, color) {
11238 this.legend.select(".".concat(config_classes.legendItem, "-").concat(id, " line")).style("stroke", color);
11239 },
11240
11241 /**
11242 * Get the width of the legend
11243 * @private
11244 * @return {Number} width
11245 */
11246 getLegendWidth: function getLegendWidth() {
11247 var $$ = this;
11248 return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
11249 },
11250
11251 /**
11252 * Get the height of the legend
11253 * @return {Number} height
11254 * @private
11255 */
11256 getLegendHeight: function getLegendHeight() {
11257 var $$ = this;
11258 return $$.config.legend_show ? $$.isLegendRight ? $$.currentHeight : Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1) : 0;
11259 },
11260
11261 /**
11262 * Get the opacity of the legend
11263 * @private
11264 * @param {Object} d3.Select
11265 * @returns {Number} opacity
11266 */
11267 opacityForLegend: function opacityForLegend(legendItem) {
11268 return legendItem.classed(config_classes.legendItemHidden) ? null : "1";
11269 },
11270
11271 /**
11272 * Get the opacity of the legend that is unfocused
11273 * @private
11274 * @param {Object} legendItem, d3.Select
11275 * @returns {Number} opacity
11276 */
11277 opacityForUnfocusedLegend: function opacityForUnfocusedLegend(legendItem) {
11278 return legendItem.classed(config_classes.legendItemHidden) ? null : "0.3";
11279 },
11280
11281 /**
11282 * Toggles the focus of the legend
11283 * @private
11284 * @param {Array} ID's of target
11285 * @param {Boolean} whether or not to focus.
11286 */
11287 toggleFocusLegend: function toggleFocusLegend(targetIds, focus) {
11288 var $$ = this,
11289 targetIdz = $$.mapToTargetIds(targetIds);
11290 $$.legend.selectAll(".".concat(config_classes.legendItem)).filter(function (id) {
11291 return targetIdz.indexOf(id) >= 0;
11292 }).classed(config_classes.legendItemFocused, focus).transition().duration(100).style("opacity", function () {
11293 return (focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend).call($$, Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this));
11294 });
11295 },
11296
11297 /**
11298 * Revert the legend to its default state
11299 * @private
11300 */
11301 revertLegend: function revertLegend() {
11302 var $$ = this;
11303 $$.legend.selectAll(".".concat(config_classes.legendItem)).classed(config_classes.legendItemFocused, !1).transition().duration(100).style("opacity", function () {
11304 return $$.opacityForLegend(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this));
11305 });
11306 },
11307
11308 /**
11309 * Shows the legend
11310 * @private
11311 * @param {Array} ID's of target
11312 */
11313 showLegend: function showLegend(targetIds) {
11314 var $$ = this,
11315 config = $$.config;
11316 config.legend_show || (config.legend_show = !0, $$.legend.style("visibility", "visible"), !$$.legendHasRendered && $$.updateLegend()), $$.removeHiddenLegendIds(targetIds), $$.legend.selectAll($$.selectorLegends(targetIds)).style("visibility", "visible").transition().style("opacity", function () {
11317 return $$.opacityForLegend(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this));
11318 });
11319 },
11320
11321 /**
11322 * Hide the legend
11323 * @private
11324 * @param {Array} ID's of target
11325 */
11326 hideLegend: function hideLegend(targetIds) {
11327 var $$ = this,
11328 config = $$.config;
11329 config.legend_show && isEmpty(targetIds) && (config.legend_show = !1, $$.legend.style("visibility", "hidden")), $$.addHiddenLegendIds(targetIds), $$.legend.selectAll($$.selectorLegends(targetIds)).style("opacity", "0").style("visibility", "hidden");
11330 },
11331
11332 /**
11333 * Clear the LegendItemTextBox cache.
11334 * @private
11335 */
11336 clearLegendItemTextBoxCache: function clearLegendItemTextBoxCache() {
11337 this.legendItemTextBox = {};
11338 },
11339
11340 /**
11341 * Set legend item style & bind events
11342 * @private
11343 * @param {d3.selection} item
11344 */
11345 setLegendItem: function setLegendItem(item) {
11346 var $$ = this,
11347 config = $$.config,
11348 isTouch = $$.inputType === "touch",
11349 hasGauge = $$.hasType("gauge");
11350 item.attr("class", function (id) {
11351 var node = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
11352 itemClass = !node.empty() && node.attr("class") || "";
11353 return itemClass + $$.generateClass(config_classes.legendItem, id);
11354 }).style("visibility", function (id) {
11355 return $$.isLegendToShow(id) ? "visible" : "hidden";
11356 }).style("cursor", "pointer").on("click", function (id) {
11357 callFn(config.legend_item_onclick, $$, id) || (external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].altKey ? ($$.api.hide(), $$.api.show(id)) : ($$.api.toggle(id), !isTouch && $$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert())), isTouch && $$.hideTooltip();
11358 }), isTouch || item.on("mouseout", function (id) {
11359 callFn(config.legend_item_onout, $$, id) || (Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.legendItemFocused, !1), hasGauge && $$.undoMarkOverlapped($$, ".".concat(config_classes.gaugeValue)), $$.api.revert());
11360 }).on("mouseover", function (id) {
11361 callFn(config.legend_item_onover, $$, id) || (Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.legendItemFocused, !0), hasGauge && $$.markOverlapped(id, $$, ".".concat(config_classes.gaugeValue)), !$$.transiting && $$.isTargetToShow(id) && $$.api.focus(id));
11362 });
11363 },
11364
11365 /**
11366 * Update the legend
11367 * @param {Array} targetIds ID's of target
11368 * @param {Object} options withTransform : Whether to use the transform property / withTransitionForTransform: Whether transition is used when using the transform property / withTransition : whether or not to transition.
11369 * @private
11370 */
11371 updateLegendElement: function updateLegendElement(targetIds, options) {
11372 var xForLegend,
11373 yForLegend,
11374 background,
11375 $$ = this,
11376 config = $$.config,
11377 posMin = 10,
11378 tileWidth = config.legend_item_tile_width + 5,
11379 maxWidth = 0,
11380 maxHeight = 0,
11381 totalLength = 0,
11382 offsets = {},
11383 widths = {},
11384 heights = {},
11385 margins = [0],
11386 steps = {},
11387 step = 0,
11388 isLegendRightOrInset = $$.isLegendRight || $$.isLegendInset,
11389 targetIdz = targetIds.filter(function (id) {
11390 return !isDefined(config.data_names[id]) || config.data_names[id] !== null;
11391 }),
11392 withTransition = options.withTransition,
11393 getTextBox = function (textElement, id) {
11394 return $$.legendItemTextBox[id] || ($$.legendItemTextBox[id] = $$.getTextRect(textElement, config_classes.legendItem)), $$.legendItemTextBox[id];
11395 },
11396 updatePositions = function (textElement, id, index) {
11397 var margin,
11398 isLast = index === targetIdz.length - 1,
11399 box = getTextBox(textElement, id),
11400 itemWidth = box.width + tileWidth + (isLast && !isLegendRightOrInset ? 0 : 10) + config.legend_padding,
11401 itemHeight = box.height + 4,
11402 itemLength = isLegendRightOrInset ? itemHeight : itemWidth,
11403 areaLength = isLegendRightOrInset ? $$.getLegendHeight() : $$.getLegendWidth(),
11404 updateValues = function (id2, withoutStep) {
11405 withoutStep || (margin = (areaLength - totalLength - itemLength) / 2, margin < posMin && (margin = (areaLength - itemLength) / 2, totalLength = 0, step++)), steps[id2] = step, margins[step] = $$.isLegendInset ? 10 : margin, offsets[id2] = totalLength, totalLength += itemLength;
11406 };
11407
11408 if (index === 0 && (totalLength = 0, step = 0, maxWidth = 0, maxHeight = 0), config.legend_show && !$$.isLegendToShow(id)) return widths[id] = 0, heights[id] = 0, steps[id] = 0, void (offsets[id] = 0);
11409 widths[id] = itemWidth, heights[id] = itemHeight, (!maxWidth || itemWidth >= maxWidth) && (maxWidth = itemWidth), (!maxHeight || itemHeight >= maxHeight) && (maxHeight = itemHeight);
11410 var maxLength = isLegendRightOrInset ? maxHeight : maxWidth;
11411 config.legend_equally ? (Object.keys(widths).forEach(function (id2) {
11412 return widths[id2] = maxWidth;
11413 }), Object.keys(heights).forEach(function (id2) {
11414 return heights[id2] = maxHeight;
11415 }), margin = (areaLength - maxLength * targetIdz.length) / 2, margin < posMin ? (totalLength = 0, step = 0, targetIdz.forEach(function (id2) {
11416 return updateValues(id2);
11417 })) : updateValues(id, !0)) : updateValues(id);
11418 };
11419
11420 $$.isLegendInset && (step = config.legend_inset_step ? config.legend_inset_step : targetIdz.length, $$.updateLegendStep(step)), $$.isLegendRight ? (xForLegend = function (id) {
11421 return maxWidth * steps[id];
11422 }, yForLegend = function (id) {
11423 return margins[steps[id]] + offsets[id];
11424 }) : $$.isLegendInset ? (xForLegend = function (id) {
11425 return maxWidth * steps[id] + 10;
11426 }, yForLegend = function (id) {
11427 return margins[steps[id]] + offsets[id];
11428 }) : (xForLegend = function (id) {
11429 return margins[steps[id]] + offsets[id];
11430 }, yForLegend = function (id) {
11431 return maxHeight * steps[id];
11432 });
11433
11434 var xForLegendText = function (id, i) {
11435 return xForLegend(id, i) + 4 + config.legend_item_tile_width;
11436 },
11437 xForLegendRect = function (id, i) {
11438 return xForLegend(id, i);
11439 },
11440 x1ForLegendTile = function (id, i) {
11441 return xForLegend(id, i) - 2;
11442 },
11443 x2ForLegendTile = function (id, i) {
11444 return xForLegend(id, i) - 2 + config.legend_item_tile_width;
11445 },
11446 yForLegendText = function (id, i) {
11447 return yForLegend(id, i) + 9;
11448 },
11449 yForLegendRect = function (id, i) {
11450 return yForLegend(id, i) - 5;
11451 },
11452 yForLegendTile = function (id, i) {
11453 return yForLegend(id, i) + 4;
11454 },
11455 pos = -200,
11456 l = $$.legend.selectAll(".".concat(config_classes.legendItem)).data(targetIdz).enter().append("g");
11457
11458 $$.setLegendItem(l), l.append("text").text(function (id) {
11459 return isDefined(config.data_names[id]) ? config.data_names[id] : id;
11460 }).each(function (id, i) {
11461 updatePositions(this, id, i);
11462 }).style("pointer-events", "none").attr("x", isLegendRightOrInset ? xForLegendText : pos).attr("y", isLegendRightOrInset ? pos : yForLegendText), l.append("rect").attr("class", config_classes.legendItemEvent).style("fill-opacity", "0").attr("x", isLegendRightOrInset ? xForLegendRect : pos).attr("y", isLegendRightOrInset ? pos : yForLegendRect);
11463 var usePoint = $$.config.legend_usePoint;
11464
11465 if (usePoint) {
11466 var ids = [];
11467 l.append(function (d) {
11468 var pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type];
11469 ids.indexOf(d) === -1 && ids.push(d);
11470 var point = pattern[ids.indexOf(d) % pattern.length];
11471 return point === "rectangle" && (point = "rect"), browser_doc.createElementNS(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["namespaces"].svg, $$.hasValidPointType(point) ? point : "use");
11472 }).attr("class", config_classes.legendItemPoint).style("fill", function (d) {
11473 return $$.color(d);
11474 }).style("pointer-events", "none").attr("href", function (data, idx, selection) {
11475 var node = selection[idx],
11476 nodeName = node.nodeName.toLowerCase();
11477 return nodeName === "use" ? "#".concat($$.datetimeId, "-point-").concat(data) : undefined;
11478 });
11479 } else l.append("line").attr("class", config_classes.legendItemTile).style("stroke", $$.color).style("pointer-events", "none").attr("x1", isLegendRightOrInset ? x1ForLegendTile : pos).attr("y1", isLegendRightOrInset ? pos : yForLegendTile).attr("x2", isLegendRightOrInset ? x2ForLegendTile : pos).attr("y2", isLegendRightOrInset ? pos : yForLegendTile).attr("stroke-width", config.legend_item_tile_height); // Set background for inset legend
11480
11481
11482 background = $$.legend.select(".".concat(config_classes.legendBackground, " rect")), $$.isLegendInset && maxWidth > 0 && background.size() === 0 && (background = $$.legend.insert("g", ".".concat(config_classes.legendItem)).attr("class", config_classes.legendBackground).append("rect"));
11483 var texts = $$.legend.selectAll("text").data(targetIdz).text(function (id) {
11484 return isDefined(config.data_names[id]) ? config.data_names[id] : id;
11485 }) // MEMO: needed for update
11486 .each(function (id, i) {
11487 updatePositions(this, id, i);
11488 });
11489 (withTransition ? texts.transition() : texts).attr("x", xForLegendText).attr("y", yForLegendText);
11490 var rects = $$.legend.selectAll("rect.".concat(config_classes.legendItemEvent)).data(targetIdz);
11491
11492 if ((withTransition ? rects.transition() : rects).attr("width", function (id) {
11493 return widths[id];
11494 }).attr("height", function (id) {
11495 return heights[id];
11496 }).attr("x", xForLegendRect).attr("y", yForLegendRect), usePoint) {
11497 var tiles = $$.legend.selectAll(".".concat(config_classes.legendItemPoint)).data(targetIdz);
11498 (withTransition ? tiles.transition() : tiles).each(function () {
11499 var radius,
11500 width,
11501 height,
11502 nodeName = this.nodeName.toLowerCase(),
11503 pointR = $$.config.point_r,
11504 x = "x",
11505 y = "y",
11506 xOffset = 2,
11507 yOffset = 2.5;
11508
11509 if (nodeName === "circle") {
11510 var size = pointR * .2;
11511 x = "cx", y = "cy", radius = pointR + size, xOffset = pointR * 2, yOffset = -size;
11512 } else if (nodeName === "rect") {
11513 var _size = pointR * 2.5;
11514
11515 width = _size, height = _size, yOffset = 3;
11516 }
11517
11518 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).attr(x, function (d) {
11519 return x1ForLegendTile(d) + xOffset;
11520 }).attr(y, function (d) {
11521 return yForLegendTile(d) - yOffset;
11522 }).attr("r", radius).attr("width", width).attr("height", height);
11523 });
11524 } else {
11525 var _tiles = $$.legend.selectAll("line.".concat(config_classes.legendItemTile)).data(targetIdz);
11526
11527 (withTransition ? _tiles.transition() : _tiles).style("stroke", $$.levelColor ? function (id) {
11528 return $$.levelColor($$.cache[id].values[0].value);
11529 } : $$.color).attr("x1", x1ForLegendTile).attr("y1", yForLegendTile).attr("x2", x2ForLegendTile).attr("y2", yForLegendTile);
11530 }
11531
11532 background && (withTransition ? background.transition() : background).attr("height", $$.getLegendHeight() - 12).attr("width", maxWidth * (step + 1) + 10), $$.updateLegendItemWidth(maxWidth), $$.updateLegendItemHeight(maxHeight), $$.updateLegendStep(step);
11533 }
11534});
11535// CONCATENATED MODULE: ./src/internals/title.js
11536/**
11537 * Copyright (c) 2017 ~ present NAVER Corp.
11538 * billboard.js project is licensed under the MIT license
11539 */
11540
11541
11542
11543/**
11544 * Get the text position
11545 * @param {String} pos right, left or center
11546 * @param {Number} width chart width
11547 * @return {String|Number} text-anchor value or position in pixel
11548 * @private
11549 */
11550
11551var getTextPos = function () {
11552 var position,
11553 pos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "left",
11554 width = arguments.length > 1 ? arguments[1] : undefined,
11555 isNum = isNumber(width);
11556 return position = pos.indexOf("center") > -1 ? isNum ? width / 2 : "middle" : pos.indexOf("right") > -1 ? isNum ? width : "end" : isNum ? 0 : "start", position;
11557};
11558
11559extend(ChartInternal_ChartInternal.prototype, {
11560 /**
11561 * Initializes the title
11562 * @private
11563 */
11564 initTitle: function initTitle() {
11565 var $$ = this;
11566
11567 if ($$.config.title_text) {
11568 $$.title = $$.svg.append("g");
11569 var text = $$.title.append("text").style("text-anchor", getTextPos($$.config.title_position)).attr("class", config_classes.title);
11570 setTextValue(text, $$.config.title_text, [.3, 1.5]);
11571 }
11572 },
11573
11574 /**
11575 * Redraw title
11576 * @private
11577 */
11578 redrawTitle: function redrawTitle() {
11579 var $$ = this;
11580
11581 if ($$.title) {
11582 var y = $$.yForTitle.call($$);
11583 /g/i.test($$.title.node().tagName) ? $$.title.attr("transform", "translate(".concat(getTextPos($$.config.title_position, $$.currentWidth), ", ").concat(y, ")")) : $$.title.attr("x", $$.xForTitle.call($$)).attr("y", y);
11584 }
11585 },
11586
11587 /**
11588 * Returns the x attribute value of the title
11589 * @private
11590 * @returns {Number} x attribute value
11591 */
11592 xForTitle: function xForTitle() {
11593 var x,
11594 $$ = this,
11595 config = $$.config,
11596 position = config.title_position || "left",
11597 textRectWidth = $$.getTextRect($$.title, config_classes.title).width;
11598 return /(right|center)/.test(position) ? (x = $$.currentWidth - textRectWidth, position.indexOf("right") >= 0 ? x = $$.currentWidth - textRectWidth - config.title_padding.right : position.indexOf("center") >= 0 && (x = ($$.currentWidth - textRectWidth) / 2)) : x = config.title_padding.left || 0, x;
11599 },
11600
11601 /**
11602 * Returns the y attribute value of the title
11603 * @private
11604 * @returns {Number} y attribute value
11605 */
11606 yForTitle: function yForTitle() {
11607 var $$ = this;
11608 return ($$.config.title_padding.top || 0) + $$.getTextRect($$.title, config_classes.title).height;
11609 },
11610
11611 /**
11612 * Get title padding
11613 * @private
11614 * @returns {Number} padding value
11615 */
11616 getTitlePadding: function getTitlePadding() {
11617 var $$ = this;
11618 return $$.yForTitle() + ($$.config.title_padding.bottom || 0);
11619 }
11620});
11621// CONCATENATED MODULE: ./src/internals/clip.js
11622/**
11623 * Copyright (c) 2017 ~ present NAVER Corp.
11624 * billboard.js project is licensed under the MIT license
11625 */
11626
11627
11628
11629extend(ChartInternal_ChartInternal.prototype, {
11630 initClip: function initClip() {
11631 var $$ = this; // MEMO: clipId needs to be unique because it conflicts when multiple charts exist
11632
11633 // Define 'clip-path' attribute values
11634 $$.clipId = "".concat($$.datetimeId, "-clip"), $$.clipIdForXAxis = "".concat($$.clipId, "-xaxis"), $$.clipIdForYAxis = "".concat($$.clipId, "-yaxis"), $$.clipIdForGrid = "".concat($$.clipId, "-grid"), $$.clipPath = $$.getClipPath($$.clipId), $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis), $$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid);
11635 },
11636 getClipPath: function getClipPath(id) {
11637 var $$ = this,
11638 config = $$.config;
11639 if (!config.clipPath && /-clip$/.test(id) || !config.axis_x_clipPath && /-clip-xaxis$/.test(id) || !config.axis_y_clipPath && /-clip-yaxis$/.test(id)) return null;
11640 var isIE9 = !!win.navigator && win.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
11641 return "url(".concat(isIE9 ? "" : browser_doc.URL.split("#")[0], "#").concat(id, ")");
11642 },
11643 appendClip: function appendClip(parent, id) {
11644 return parent.append("clipPath").attr("id", id).append("rect");
11645 },
11646 getAxisClipX: function getAxisClipX(forHorizontal) {
11647 // axis line width + padding for left
11648 var left = Math.max(30, this.margin.left);
11649 return forHorizontal ? -(1 + left) : -(left - 1);
11650 },
11651 getAxisClipY: function getAxisClipY(forHorizontal) {
11652 return forHorizontal ? -20 : -this.margin.top;
11653 },
11654 getXAxisClipX: function getXAxisClipX() {
11655 var $$ = this;
11656 return $$.getAxisClipX(!$$.config.axis_rotated);
11657 },
11658 getXAxisClipY: function getXAxisClipY() {
11659 var $$ = this;
11660 return $$.getAxisClipY(!$$.config.axis_rotated);
11661 },
11662 getYAxisClipX: function getYAxisClipX() {
11663 var $$ = this;
11664 return $$.config.axis_y_inner ? -1 : $$.getAxisClipX($$.config.axis_rotated);
11665 },
11666 getYAxisClipY: function getYAxisClipY() {
11667 var $$ = this;
11668 return $$.getAxisClipY($$.config.axis_rotated);
11669 },
11670 getAxisClipWidth: function getAxisClipWidth(forHorizontal) {
11671 var $$ = this,
11672 left = Math.max(30, $$.margin.left),
11673 right = Math.max(30, $$.margin.right);
11674 // width + axis line width + padding for left/right
11675 return forHorizontal ? $$.width + 2 + left + right : $$.margin.left + 20;
11676 },
11677 getAxisClipHeight: function getAxisClipHeight(forHorizontal) {
11678 // less than 20 is not enough to show the axis label 'outer' without legend
11679 return (forHorizontal ? this.margin.bottom : this.margin.top + this.height) + 20;
11680 },
11681 getXAxisClipWidth: function getXAxisClipWidth() {
11682 var $$ = this;
11683 return $$.getAxisClipWidth(!$$.config.axis_rotated);
11684 },
11685 getXAxisClipHeight: function getXAxisClipHeight() {
11686 var $$ = this;
11687 return $$.getAxisClipHeight(!$$.config.axis_rotated);
11688 },
11689 getYAxisClipWidth: function getYAxisClipWidth() {
11690 var $$ = this;
11691 return $$.getAxisClipWidth($$.config.axis_rotated) + ($$.config.axis_y_inner ? 20 : 0);
11692 },
11693 getYAxisClipHeight: function getYAxisClipHeight() {
11694 var $$ = this;
11695 return $$.getAxisClipHeight($$.config.axis_rotated);
11696 },
11697 updateXAxisTickClip: function updateXAxisTickClip() {
11698 var $$ = this,
11699 newXAxisHeight = $$.getHorizontalAxisHeight("x");
11700 $$.clipIdForXAxisTickTexts = "".concat($$.clipId, "-xaxisticktexts"), $$.clipPathForXAxisTickTexts = $$.getClipPath($$.clipIdForXAxisTickTexts), !$$.config.axis_x_tick_multiline && $$.getAxisTickRotate("x") && newXAxisHeight !== $$.xAxisHeight && ($$.setXAxisTickClipWidth(), $$.setXAxisTickTextClipPathWidth()), $$.xAxisHeight = newXAxisHeight;
11701 },
11702 setXAxisTickClipWidth: function setXAxisTickClipWidth() {
11703 var $$ = this,
11704 config = $$.config,
11705 xAxisTickRotate = $$.getAxisTickRotate("x");
11706
11707 if (!config.axis_x_tick_multiline && xAxisTickRotate) {
11708 var sinRotation = Math.sin(Math.PI / 180 * Math.abs(xAxisTickRotate));
11709 $$.xAxisTickClipPathMaxWidth = ($$.getHorizontalAxisHeight("x") - 20) / sinRotation;
11710 } else $$.xAxisTickClipPathMaxWidth = null;
11711 },
11712 setXAxisTickTextClipPathWidth: function setXAxisTickTextClipPathWidth() {
11713 var $$ = this;
11714 $$.svg && $$.svg.select("#".concat($$.clipIdForXAxisTickTexts, " rect")).attr("width", $$.xAxisTickClipPathMaxWidth).attr("height", 30);
11715 }
11716});
11717// CONCATENATED MODULE: ./src/internals/region.js
11718/**
11719 * Copyright (c) 2017 ~ present NAVER Corp.
11720 * billboard.js project is licensed under the MIT license
11721 */
11722 // selection
11723
11724
11725
11726
11727extend(ChartInternal_ChartInternal.prototype, {
11728 initRegion: function initRegion() {
11729 var $$ = this;
11730 $$.region = $$.main.append("g").attr("clip-path", $$.clipPath).attr("class", config_classes.regions);
11731 },
11732 updateRegion: function updateRegion(duration) {
11733 var $$ = this,
11734 config = $$.config;
11735 // hide if arc type
11736 // select <g> element
11737 $$.region.style("visibility", $$.hasArcType() ? "hidden" : "visible"), $$.mainRegion = $$.main.select(".".concat(config_classes.regions)).selectAll(".".concat(config_classes.region)).data(config.regions), $$.mainRegion.exit().transition().duration(duration).style("opacity", "0").remove(), $$.mainRegion = $$.mainRegion.enter().append("g").merge($$.mainRegion).attr("class", $$.classRegion.bind($$)), $$.mainRegion.append("rect").style("fill-opacity", "0");
11738 },
11739 redrawRegion: function redrawRegion(withTransition) {
11740 var $$ = this,
11741 regions = $$.mainRegion.select("rect");
11742 return regions = (withTransition ? regions.transition() : regions).attr("x", $$.regionX.bind($$)).attr("y", $$.regionY.bind($$)).attr("width", $$.regionWidth.bind($$)).attr("height", $$.regionHeight.bind($$)), [(withTransition ? regions.transition() : regions).style("fill-opacity", function (d) {
11743 return isValue(d.opacity) ? d.opacity : "0.1";
11744 }).on("end", function () {
11745 Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this.parentNode).selectAll("rect:not([x])").remove();
11746 })];
11747 },
11748 getRegionXY: function getRegionXY(type, d) {
11749 var scale,
11750 $$ = this,
11751 config = $$.config,
11752 isRotated = config.axis_rotated,
11753 isX = type === "x",
11754 key = "start",
11755 pos = 0;
11756 return d.axis === "y" || d.axis === "y2" ? (!isX && (key = "end"), (isX ? isRotated : !isRotated) && key in d && (scale = $$[d.axis], pos = scale(d[key]))) : (isX ? !isRotated : isRotated) && key in d && (scale = $$.zoomScale || $$.x, pos = scale($$.isTimeSeries() ? $$.parseDate(d[key]) : d[key])), pos;
11757 },
11758 regionX: function regionX(d) {
11759 return this.getRegionXY("x", d);
11760 },
11761 regionY: function regionY(d) {
11762 return this.getRegionXY("y", d);
11763 },
11764 getRegionSize: function getRegionSize(type, d) {
11765 var scale,
11766 $$ = this,
11767 config = $$.config,
11768 isRotated = config.axis_rotated,
11769 isWidth = type === "width",
11770 start = $$[isWidth ? "regionX" : "regionY"](d),
11771 key = "end",
11772 end = $$[type];
11773 return d.axis === "y" || d.axis === "y2" ? (!isWidth && (key = "start"), (isWidth ? isRotated : !isRotated) && key in d && (scale = $$[d.axis], end = scale(d[key]))) : (isWidth ? !isRotated : isRotated) && key in d && (scale = $$.zoomScale || $$.x, end = scale($$.isTimeSeries() ? $$.parseDate(d[key]) : d[key])), end < start ? 0 : end - start;
11774 },
11775 regionWidth: function regionWidth(d) {
11776 return this.getRegionSize("width", d);
11777 },
11778 regionHeight: function regionHeight(d) {
11779 return this.getRegionSize("height", d);
11780 },
11781 isRegionOnX: function isRegionOnX(d) {
11782 return !d.axis || d.axis === "x";
11783 }
11784});
11785// CONCATENATED MODULE: ./src/interactions/drag.js
11786
11787
11788/**
11789 * Copyright (c) 2017 ~ present NAVER Corp.
11790 * billboard.js project is licensed under the MIT license
11791 */
11792
11793
11794
11795
11796extend(ChartInternal_ChartInternal.prototype, {
11797 /**
11798 * Called when dragging.
11799 * Data points can be selected.
11800 * @private
11801 * @param {Object} mouse Object
11802 */
11803 drag: function drag(mouse) {
11804 var $$ = this,
11805 config = $$.config,
11806 main = $$.main;
11807
11808 if (!$$.hasArcType() && config.data_selection_enabled && ( // do nothing if not selectable
11809 !config.zoom_enabled || $$.zoom.altDomain) && config.data_selection_multiple // skip when single selection because drag is used for multiple selection
11810 ) {
11811 var _$$$dragStart = _slicedToArray($$.dragStart, 2),
11812 sx = _$$$dragStart[0],
11813 sy = _$$$dragStart[1],
11814 _mouse = _slicedToArray(mouse, 2),
11815 mx = _mouse[0],
11816 my = _mouse[1],
11817 minX = Math.min(sx, mx),
11818 maxX = Math.max(sx, mx),
11819 minY = config.data_selection_grouped ? $$.margin.top : Math.min(sy, my),
11820 maxY = config.data_selection_grouped ? $$.height : Math.max(sy, my);
11821
11822 main.select(".".concat(config_classes.dragarea)).attr("x", minX).attr("y", minY).attr("width", maxX - minX).attr("height", maxY - minY), main.selectAll(".".concat(config_classes.shapes)).selectAll(".".concat(config_classes.shape)).filter(function (d) {
11823 return config.data_selection_isselectable(d);
11824 }).each(function (d, i) {
11825 var toggle,
11826 shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
11827 isSelected = shape.classed(config_classes.SELECTED),
11828 isIncluded = shape.classed(config_classes.INCLUDED),
11829 isWithin = !1;
11830
11831 if (shape.classed(config_classes.circle)) {
11832 var x = shape.attr("cx") * 1,
11833 y = shape.attr("cy") * 1;
11834 toggle = $$.togglePoint, isWithin = minX < x && x < maxX && minY < y && y < maxY;
11835 } else if (shape.classed(config_classes.bar)) {
11836 var _getPathBox = getPathBox(this),
11837 _x = _getPathBox.x,
11838 y = _getPathBox.y,
11839 width = _getPathBox.width,
11840 height = _getPathBox.height;
11841
11842 toggle = $$.togglePath, isWithin = !(maxX < _x || _x + width < minX) && !(maxY < y || y + height < minY);
11843 } else // line/area selection not supported yet
11844 return;
11845
11846 isWithin ^ isIncluded && (shape.classed(config_classes.INCLUDED, !isIncluded), shape.classed(config_classes.SELECTED, !isSelected), toggle.call($$, !isSelected, shape, d, i));
11847 });
11848 }
11849 },
11850
11851 /**
11852 * Called when the drag starts.
11853 * Adds and Shows the drag area.
11854 * @private
11855 * @param {Object} mouse Object
11856 */
11857 dragstart: function dragstart(mouse) {
11858 var $$ = this,
11859 config = $$.config;
11860 $$.hasArcType() || !config.data_selection_enabled || ($$.dragStart = mouse, $$.main.select(".".concat(config_classes.chart)).append("rect").attr("class", config_classes.dragarea).style("opacity", "0.1"), $$.setDragStatus(!0));
11861 },
11862
11863 /**
11864 * Called when the drag finishes.
11865 * Removes the drag area.
11866 * @private
11867 */
11868 dragend: function dragend() {
11869 var $$ = this,
11870 config = $$.config;
11871 $$.hasArcType() || !config.data_selection_enabled || ($$.main.select(".".concat(config_classes.dragarea)).transition().duration(100).style("opacity", "0").remove(), $$.main.selectAll(".".concat(config_classes.shape)).classed(config_classes.INCLUDED, !1), $$.setDragStatus(!1));
11872 },
11873 setDragStatus: function setDragStatus(isDragging) {
11874 this.dragging = isDragging;
11875 }
11876});
11877// EXTERNAL MODULE: external {"commonjs":"d3-color","commonjs2":"d3-color","amd":"d3-color","root":"d3"}
11878var external_commonjs_d3_color_commonjs2_d3_color_amd_d3_color_root_d3_ = __webpack_require__(12);
11879
11880// CONCATENATED MODULE: ./src/internals/selection.js
11881/**
11882 * Copyright (c) 2017 ~ present NAVER Corp.
11883 * billboard.js project is licensed under the MIT license
11884 */
11885
11886
11887
11888
11889
11890extend(ChartInternal_ChartInternal.prototype, {
11891 /**
11892 * Select a point
11893 * @private
11894 * @param {Object} target point
11895 * @param {Object} data
11896 * @param {Number} index
11897 */
11898 selectPoint: function selectPoint(target, d, i) {
11899 var $$ = this,
11900 config = $$.config,
11901 isRotated = config.axis_rotated,
11902 cx = (isRotated ? $$.circleY : $$.circleX).bind($$),
11903 cy = (isRotated ? $$.circleX : $$.circleY).bind($$),
11904 r = $$.pointSelectR.bind($$);
11905 // add selected-circle on low layer g
11906 callFn(config.data_onselected, $$.api, d, target.node()), $$.main.select(".".concat(config_classes.selectedCircles).concat($$.getTargetSelectorSuffix(d.id))).selectAll(".".concat(config_classes.selectedCircle, "-").concat(i)).data([d]).enter().append("circle").attr("class", function () {
11907 return $$.generateClass(config_classes.selectedCircle, i);
11908 }).attr("cx", cx).attr("cy", cy).attr("stroke", $$.color).attr("r", function (d2) {
11909 return $$.pointSelectR(d2) * 1.4;
11910 }).transition().duration(100).attr("r", r);
11911 },
11912
11913 /**
11914 * Unelect a point
11915 * @private
11916 * @param {Object} target point
11917 * @param {Object} data
11918 * @param {Number} index
11919 */
11920 unselectPoint: function unselectPoint(target, d, i) {
11921 var $$ = this;
11922 // remove selected-circle from low layer g
11923 callFn($$.config.data_onunselected, $$.api, d, target.node()), $$.main.select(".".concat(config_classes.selectedCircles).concat($$.getTargetSelectorSuffix(d.id))).selectAll(".".concat(config_classes.selectedCircle, "-").concat(i)).transition().duration(100).attr("r", 0).remove();
11924 },
11925
11926 /**
11927 * Toggles the selection of points
11928 * @private
11929 * @param {Boolean} whether or not to select.
11930 * @param {Object} target point
11931 * @param {Object} data
11932 * @param {Number} index
11933 */
11934 togglePoint: function togglePoint(selected, target, d, i) {
11935 var method = "".concat(selected ? "" : "un", "selectPoint");
11936 this[method](target, d, i);
11937 },
11938
11939 /**
11940 * Select a path
11941 * @private
11942 * @param {Object} target path
11943 * @param {Object} data
11944 */
11945 selectPath: function selectPath(target, d) {
11946 var $$ = this,
11947 config = $$.config;
11948 callFn(config.data_onselected, $$, d, target.node()), config.interaction_brighten && target.transition().duration(100).style("fill", function () {
11949 return Object(external_commonjs_d3_color_commonjs2_d3_color_amd_d3_color_root_d3_["rgb"])($$.color(d)).brighter(.75);
11950 });
11951 },
11952
11953 /**
11954 * Unelect a path
11955 * @private
11956 * @param {Object} target path
11957 * @param {Object} data
11958 */
11959 unselectPath: function unselectPath(target, d) {
11960 var $$ = this,
11961 config = $$.config;
11962 callFn(config.data_onunselected, $$, d, target.node()), config.interaction_brighten && target.transition().duration(100).style("fill", function () {
11963 return $$.color(d);
11964 });
11965 },
11966
11967 /**
11968 * Toggles the selection of lines
11969 * @private
11970 * @param {Boolean} whether or not to select.
11971 * @param {Object} target shape
11972 * @param {Object} data
11973 * @param {Number} index
11974 */
11975 togglePath: function togglePath(selected, target, d, i) {
11976 this["".concat(selected ? "" : "un", "selectPath")](target, d, i);
11977 },
11978
11979 /**
11980 * Returns the toggle method of the target
11981 * @private
11982 * @param {Object} target shape
11983 * @param {Object} data
11984 * @returns {Function} toggle method
11985 */
11986 getToggle: function getToggle(that, d) {
11987 var $$ = this;
11988 return that.nodeName === "path" ? $$.togglePath : $$.isStepType(d) ? function () {} : // circle is hidden in step chart, so treat as within the click area
11989 $$.togglePoint;
11990 },
11991
11992 /**
11993 * Toggles the selection of shapes
11994 * @private
11995 * @param {Object} target shape
11996 * @param {Object} data
11997 * @param {Number} index
11998 */
11999 toggleShape: function toggleShape(that, d, i) {
12000 var toggledShape,
12001 $$ = this,
12002 config = $$.config,
12003 shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(that),
12004 isSelected = shape.classed(config_classes.SELECTED),
12005 toggle = $$.getToggle(that, d).bind($$);
12006
12007 if (config.data_selection_enabled && config.data_selection_isselectable(d)) {
12008 if (!config.data_selection_multiple) {
12009 var selector = ".".concat(config_classes.shapes);
12010 config.data_selection_grouped && (selector += $$.getTargetSelectorSuffix(d.id)), $$.main.selectAll(selector).selectAll(".".concat(config_classes.shape)).each(function (d, i) {
12011 var shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this);
12012 shape.classed(config_classes.SELECTED) && (toggledShape = shape, toggle(!1, shape.classed(config_classes.SELECTED, !1), d, i));
12013 });
12014 }
12015
12016 toggledShape && toggledShape.node() === shape.node() || (shape.classed(config_classes.SELECTED, !isSelected), toggle(!isSelected, shape, d, i));
12017 }
12018 }
12019});
12020// CONCATENATED MODULE: ./src/interactions/subchart.js
12021/**
12022 * Copyright (c) 2017 ~ present NAVER Corp.
12023 * billboard.js project is licensed under the MIT license
12024 */
12025
12026
12027
12028
12029
12030extend(ChartInternal_ChartInternal.prototype, {
12031 /**
12032 * Initialize the brush.
12033 * @private
12034 */
12035 initBrush: function initBrush() {
12036 var $$ = this,
12037 config = $$.config,
12038 isRotated = config.axis_rotated;
12039 $$.brush = isRotated ? Object(external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_["brushY"])() : Object(external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_["brushX"])();
12040
12041 // set "brush" event
12042 var lastDomain,
12043 timeout,
12044 brushHandler = function () {
12045 $$.redrawForBrush();
12046 },
12047 getBrushSize = function () {
12048 var brush = $$.svg.select(".".concat(config_classes.brush, " .overlay")),
12049 brushSize = {
12050 width: 0,
12051 height: 0
12052 };
12053 return brush.size() && (brushSize.width = +brush.attr("width"), brushSize.height = +brush.attr("height")), brushSize[isRotated ? "width" : "height"];
12054 };
12055
12056 // set the brush extent
12057 $$.brush.on("start", function () {
12058 $$.inputType === "touch" && $$.hideTooltip(), brushHandler();
12059 }).on("brush", brushHandler).on("end", function () {
12060 lastDomain = $$.x.orgDomain();
12061 }), $$.brush.updateResize = function () {
12062 var _this = this;
12063
12064 timeout && clearTimeout(timeout), timeout = setTimeout(function () {
12065 var selection = _this.getSelection();
12066
12067 lastDomain && Object(external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_["brushSelection"])(selection.node()) && _this.move(selection, lastDomain.map($$.subX.orgScale()));
12068 }, 0);
12069 }, $$.brush.update = function () {
12070 var extent = this.extent()();
12071 return extent[1].filter(function (v) {
12072 return isNaN(v);
12073 }).length === 0 && $$.context && $$.context.select(".".concat(config_classes.brush)).call(this), this;
12074 }, $$.brush.scale = function (scale) {
12075 var h = config.subchart_size_height || getBrushSize(),
12076 extent = $$.getExtent();
12077 // [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner
12078 // when extent updates, brush selection also be re-applied
12079 // https://github.com/d3/d3/issues/2918
12080 !extent && scale.range ? extent = [[0, 0], [scale.range()[1], h]] : isArray(extent) && (extent = extent.map(function (v, i) {
12081 return [v, i > 0 ? h : i];
12082 })), isRotated && extent[1].reverse(), this.extent(extent), this.update();
12083 }, $$.brush.getSelection = function () {
12084 return $$.context ? $$.context.select(".".concat(config_classes.brush)) : Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])([]);
12085 };
12086 },
12087
12088 /**
12089 * Initialize the subchart.
12090 * @private
12091 */
12092 initSubchart: function initSubchart() {
12093 var $$ = this,
12094 config = $$.config,
12095 visibility = config.subchart_show ? "visible" : "hidden",
12096 clipId = "".concat($$.clipId, "-subchart"),
12097 clipPath = $$.getClipPath(clipId);
12098 $$.clipIdForSubchart = clipId, $$.appendClip($$.defs, clipId), $$.initBrush(), $$.context = $$.svg.append("g").attr("transform", $$.getTranslate("context"));
12099 var context = $$.context;
12100 // Define g for chart area
12101 // Define g for bar chart area
12102 // Define g for line chart area
12103 // Add extent rect for Brush
12104 // ATTENTION: This must be called AFTER chart added
12105 // Add Axis
12106 context.style("visibility", visibility), context.append("g").attr("clip-path", clipPath).attr("class", config_classes.chart), $$.hasType("bar") && context.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartBars), context.select(".".concat(config_classes.chart)).append("g").attr("class", config_classes.chartLines), context.append("g").attr("clip-path", clipPath).attr("class", config_classes.brush).call($$.brush), $$.axes.subx = context.append("g").attr("class", config_classes.axisX).attr("transform", $$.getTranslate("subx")).attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis).style("visibility", config.subchart_axis_x_show ? visibility : "hidden");
12107 },
12108
12109 /**
12110 * Update sub chart
12111 * @private
12112 * @param {Object} $$.data.targets
12113 */
12114 updateTargetsForSubchart: function updateTargetsForSubchart(targets) {
12115 var $$ = this,
12116 context = $$.context,
12117 config = $$.config,
12118 classChartBar = $$.classChartBar.bind($$),
12119 classBars = $$.classBars.bind($$),
12120 classChartLine = $$.classChartLine.bind($$),
12121 classLines = $$.classLines.bind($$),
12122 classAreas = $$.classAreas.bind($$);
12123
12124 if (config.subchart_show) {
12125 // -- Bar --//
12126 var contextBarUpdate = context.select(".".concat(config_classes.chartBars)).selectAll(".".concat(config_classes.chartBar)).data(targets).attr("class", classChartBar),
12127 contextBarEnter = contextBarUpdate.enter().append("g").style("opacity", "0").attr("class", classChartBar).merge(contextBarUpdate);
12128 contextBarEnter.append("g").attr("class", classBars);
12129 // -- Line --//
12130 var contextLineUpdate = context.select(".".concat(config_classes.chartLines)).selectAll(".".concat(config_classes.chartLine)).data(targets).attr("class", classChartLine),
12131 contextLineEnter = contextLineUpdate.enter().append("g").style("opacity", "0").attr("class", classChartLine).merge(contextLineUpdate);
12132 // Lines for each data
12133 // Area
12134 // -- Brush --//
12135 contextLineEnter.append("g").attr("class", classLines), $$.hasType("area") && contextLineEnter.append("g").attr("class", classAreas), context.selectAll(".".concat(config_classes.brush, " rect")).attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? $$.width2 : $$.height2);
12136 }
12137 },
12138
12139 /**
12140 * Update the bar of the sub chart
12141 * @private
12142 * @param {Object} durationForExit
12143 */
12144 updateBarForSubchart: function updateBarForSubchart(durationForExit) {
12145 var $$ = this;
12146 $$.contextBar = $$.context.selectAll(".".concat(config_classes.bars)).selectAll(".".concat(config_classes.bar)).data($$.barData.bind($$)), $$.contextBar.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.contextBar = $$.contextBar.enter().append("path").attr("class", $$.classBar.bind($$)).style("stroke", "none").style("fill", $$.color).merge($$.contextBar).style("opacity", $$.initialOpacity.bind($$));
12147 },
12148
12149 /**
12150 * Redraw the bar of the subchart
12151 * @private
12152 * @param {String} path in subchart bar
12153 * @param {Boolean} whether or not to transition.
12154 * @param {Number} transition duration
12155 */
12156 redrawBarForSubchart: function redrawBarForSubchart(drawBarOnSub, withTransition, duration) {
12157 var contextBar = withTransition ? this.contextBar.transition(getRandom()).duration(duration) : this.contextBar;
12158 contextBar.attr("d", drawBarOnSub).style("opacity", "1");
12159 },
12160
12161 /**
12162 * Update the line of the sub chart
12163 * @private
12164 * @param {Number} Fade-out transition duration
12165 */
12166 updateLineForSubchart: function updateLineForSubchart(durationForExit) {
12167 var $$ = this;
12168 $$.contextLine = $$.context.selectAll(".".concat(config_classes.lines)).selectAll(".".concat(config_classes.line)).data($$.lineData.bind($$)), $$.contextLine.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.contextLine = $$.contextLine.enter().append("path").attr("class", $$.classLine.bind($$)).style("stroke", $$.color).merge($$.contextLine).style("opacity", $$.initialOpacity.bind($$));
12169 },
12170
12171 /**
12172 * Redraw the line of the subchart
12173 * @private
12174 * @param {String} path in subchart line
12175 * @param {Boolean} whether or not to transition
12176 * @param {Number} transition duration
12177 */
12178 redrawLineForSubchart: function redrawLineForSubchart(drawLineOnSub, withTransition, duration) {
12179 var contextLine = withTransition ? this.contextLine.transition(getRandom()).duration(duration) : this.contextLine;
12180 contextLine.attr("d", drawLineOnSub).style("opacity", "1");
12181 },
12182
12183 /**
12184 * Update the area of the sub chart
12185 * @private
12186 * @param {Number} Fade-out transition duration
12187 */
12188 updateAreaForSubchart: function updateAreaForSubchart(durationForExit) {
12189 var $$ = this;
12190 $$.contextArea = $$.context.selectAll(".".concat(config_classes.areas)).selectAll(".".concat(config_classes.area)).data($$.lineData.bind($$)), $$.contextArea.exit().transition().duration(durationForExit).style("opacity", "0").remove(), $$.contextArea = $$.contextArea.enter().append("path").attr("class", $$.classArea.bind($$)).style("fill", $$.color).style("opacity", function () {
12191 return $$.orgAreaOpacity = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).style("opacity"), "0";
12192 }).merge($$.contextArea).style("opacity", "0");
12193 },
12194
12195 /**
12196 * Redraw the area of the subchart
12197 * @private
12198 * @param {String} path in subchart line
12199 * @param {Boolean} whether or not to transition
12200 * @param {Number} transition duration
12201 */
12202 redrawAreaForSubchart: function redrawAreaForSubchart(drawAreaOnSub, withTransition, duration) {
12203 var contextArea = withTransition ? this.contextArea.transition(getRandom()).duration(duration) : this.contextArea;
12204 contextArea.attr("d", drawAreaOnSub).style("fill", this.color).style("opacity", this.orgAreaOpacity);
12205 },
12206
12207 /**
12208 * Redraw subchart.
12209 * @private
12210 * @param {Boolean} withSubchart whether or not to show subchart
12211 * @param {Number} duration duration
12212 * @param {Object} shape Shape's info
12213 */
12214 redrawSubchart: function redrawSubchart(withSubchart, duration, shape) {
12215 var $$ = this,
12216 config = $$.config;
12217 $$.context.style("visibility", config.subchart_show ? "visible" : "hidden"), config.subchart_show && (external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"] && external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].type === "zoom" && $$.brush.update(), withSubchart && (!brushEmpty($$) && $$.brush.update(), Object.keys(shape.type).forEach(function (v) {
12218 var name = capitalize(v),
12219 draw = $$["generateDraw".concat(name)](shape.indices[v], !0);
12220 $$["update".concat(name, "ForSubchart")](duration), $$["redraw".concat(name, "ForSubchart")](draw, duration, duration);
12221 })));
12222 },
12223
12224 /**
12225 * Redraw the brush.
12226 * @private
12227 */
12228 redrawForBrush: function redrawForBrush() {
12229 var $$ = this;
12230 $$.redraw({
12231 withTransition: !1,
12232 withY: $$.config.zoom_rescale,
12233 withSubchart: !1,
12234 withUpdateXDomain: !0,
12235 withDimension: !1
12236 }), $$.config.subchart_onbrush.call($$.api, $$.x.orgDomain());
12237 },
12238
12239 /**
12240 * Transform context
12241 * @private
12242 * @param {Boolean} indicates transition is enabled
12243 * @param {Object} The return value of the generateTransitions method of Axis.
12244 */
12245 transformContext: function transformContext(withTransition, transitions) {
12246 var subXAxis,
12247 $$ = this;
12248 transitions && transitions.axisSubX ? subXAxis = transitions.axisSubX : (subXAxis = $$.context.select(".".concat(config_classes.axisX)), withTransition && (subXAxis = subXAxis.transition())), $$.context.attr("transform", $$.getTranslate("context")), subXAxis.attr("transform", $$.getTranslate("subx"));
12249 },
12250
12251 /**
12252 * Get extent value
12253 * @private
12254 * @returns {Array} default extent
12255 */
12256 getExtent: function getExtent() {
12257 var $$ = this,
12258 extent = $$.config.axis_x_extent;
12259 return extent && (isFunction(extent) ? extent = extent($$.getXDomain($$.data.targets), $$.subX) : $$.isTimeSeries() && extent.every(isNaN) && (extent = extent.map(function (v) {
12260 return $$.subX($$.parseDate(v));
12261 }))), extent;
12262 }
12263});
12264// EXTERNAL MODULE: external {"commonjs":"d3-zoom","commonjs2":"d3-zoom","amd":"d3-zoom","root":"d3"}
12265var external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_ = __webpack_require__(13);
12266
12267// CONCATENATED MODULE: ./src/interactions/zoom.js
12268
12269
12270/**
12271 * Copyright (c) 2017 ~ present NAVER Corp.
12272 * billboard.js project is licensed under the MIT license
12273 */
12274
12275
12276
12277
12278
12279
12280
12281extend(ChartInternal_ChartInternal.prototype, {
12282 /**
12283 * Initialize zoom.
12284 * @private
12285 */
12286 initZoom: function initZoom() {
12287 var $$ = this;
12288 $$.zoomScale = null, $$.generateZoom(), $$.initZoomBehaviour();
12289 },
12290
12291 /**
12292 * Bind zoom event
12293 * @param {Boolean} bind Weather bind or unbound
12294 * @private
12295 */
12296 bindZoomEvent: function bindZoomEvent() {
12297 var bind = !(arguments.length > 0 && arguments[0] !== undefined) || arguments[0],
12298 $$ = this,
12299 zoomEnabled = $$.config.zoom_enabled;
12300 $$.redrawEventRect();
12301 var eventRects = $$.main.select(".".concat(config_classes.eventRects));
12302 zoomEnabled && bind ? !$$.config.subchart_show && $$.bindZoomOnEventRect(eventRects, zoomEnabled.type) : bind === !1 && ($$.api.unzoom(), eventRects.on(".zoom", null).on(".drag", null));
12303 },
12304
12305 /**
12306 * Generate zoom
12307 * @private
12308 */
12309 generateZoom: function generateZoom() {
12310 var $$ = this,
12311 config = $$.config,
12312 zoom = Object(external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_["zoom"])().duration(0).on("start", $$.onZoomStart.bind($$)).on("zoom", $$.onZoom.bind($$)).on("end", $$.onZoomEnd.bind($$));
12313 // get zoom extent
12314
12315 /**
12316 * Update scale according zoom transform value
12317 * @param {Object} transform
12318 * @private
12319 */
12320 zoom.orgScaleExtent = function () {
12321 var extent = config.zoom_extent || [1, 10];
12322 return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])];
12323 }, zoom.updateScaleExtent = function () {
12324 var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.getZoomDomain()),
12325 extent = this.orgScaleExtent();
12326 return this.scaleExtent([extent[0] * ratio, extent[1] * ratio]), this;
12327 }, zoom.updateTransformScale = function (transform) {
12328 $$.orgXScale && $$.orgXScale.range($$.x.range());
12329 // rescale from the original scale
12330 var newScale = transform[config.axis_rotated ? "rescaleY" : "rescaleX"]($$.orgXScale || $$.x),
12331 domain = $$.trimXDomain(newScale.domain()),
12332 rescale = config.zoom_rescale;
12333 newScale.domain(domain, $$.orgXDomain), $$.zoomScale = $$.getCustomizedScale(newScale), $$.xAxis.scale($$.zoomScale), rescale && (!$$.orgXScale && ($$.orgXScale = $$.x.copy()), $$.x.domain(domain));
12334 }, $$.zoom = zoom;
12335 },
12336
12337 /**
12338 * 'start' event listener
12339 * @private
12340 */
12341 onZoomStart: function onZoomStart() {
12342 var $$ = this,
12343 event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].sourceEvent;
12344 event && ($$.zoom.startEvent = event, callFn($$.config.zoom_onzoomstart, $$.api, event));
12345 },
12346
12347 /**
12348 * 'zoom' event listener
12349 * @private
12350 */
12351 onZoom: function onZoom() {
12352 var $$ = this,
12353 config = $$.config,
12354 event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"],
12355 sourceEvent = event.sourceEvent;
12356
12357 if (config.zoom_enabled && event.sourceEvent && $$.filterTargetsToShow($$.data.targets).length !== 0 && ($$.zoomScale || !(sourceEvent.type.indexOf("touch") > -1) || sourceEvent.touches.length !== 1)) {
12358 var isMousemove = sourceEvent.type === "mousemove",
12359 isZoomOut = sourceEvent.wheelDelta < 0,
12360 transform = event.transform;
12361 !isMousemove && isZoomOut && $$.x.domain().every(function (v, i) {
12362 return v !== $$.orgXDomain[i];
12363 }) && $$.x.domain($$.orgXDomain), $$.zoom.updateTransformScale(transform), $$.isCategorized() && $$.x.orgDomain()[0] === $$.orgXDomain[0] && $$.x.domain([$$.orgXDomain[0] - 1e-10, $$.x.orgDomain()[1]]), $$.redraw({
12364 withTransition: !1,
12365 withY: config.zoom_rescale,
12366 withSubchart: !1,
12367 withEventRect: !1,
12368 withDimension: !1
12369 }), $$.cancelClick = isMousemove, callFn(config.zoom_onzoom, $$.api, $$.zoomScale.domain());
12370 }
12371 },
12372
12373 /**
12374 * 'end' event listener
12375 * @private
12376 */
12377 onZoomEnd: function onZoomEnd() {
12378 var $$ = this,
12379 startEvent = $$.zoom.startEvent,
12380 event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"] && external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].sourceEvent;
12381 startEvent && startEvent.type.indexOf("touch") > -1 && (startEvent = startEvent.changedTouches[0], event = event.changedTouches[0]);
12382 // if click, do nothing. otherwise, click interaction will be canceled.
12383 !startEvent || event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY || ($$.redrawEventRect(), $$.updateZoom(), callFn($$.config.zoom_onzoomend, $$.api, $$[$$.zoomScale ? "zoomScale" : "subX"].domain()));
12384 },
12385
12386 /**
12387 * Get zoom domain
12388 * @returns {Array} zoom domain
12389 * @private
12390 */
12391 getZoomDomain: function getZoomDomain() {
12392 var $$ = this,
12393 config = $$.config,
12394 _$$$orgXDomain = _slicedToArray($$.orgXDomain, 2),
12395 min = _$$$orgXDomain[0],
12396 max = _$$$orgXDomain[1];
12397
12398 return isDefined(config.zoom_x_min) && (min = getMinMax("min", [min, config.zoom_x_min])), isDefined(config.zoom_x_max) && (max = getMinMax("max", [max, config.zoom_x_max])), [min, max];
12399 },
12400
12401 /**
12402 * Update zoom
12403 * @param {Boolean} force Force unzoom
12404 * @private
12405 */
12406 updateZoom: function updateZoom(force) {
12407 var $$ = this;
12408
12409 if ($$.zoomScale) {
12410 var zoomDomain = $$.zoomScale.domain(),
12411 xDomain = $$.subX.domain(),
12412 delta = .015,
12413 isfullyShown = (zoomDomain[0] <= xDomain[0] || zoomDomain[0] - delta <= xDomain[0]) && (xDomain[1] <= zoomDomain[1] || xDomain[1] <= zoomDomain[1] - delta);
12414 (force || isfullyShown) && ($$.xAxis.scale($$.subX), $$.x.domain($$.subX.orgDomain()), $$.zoomScale = null);
12415 }
12416 },
12417
12418 /**
12419 * Attach zoom event on <rect>
12420 * @private
12421 */
12422 bindZoomOnEventRect: function bindZoomOnEventRect(eventRects, type) {
12423 var $$ = this,
12424 behaviour = type === "drag" ? $$.zoomBehaviour : $$.zoom;
12425 eventRects.call(behaviour).on("dblclick.zoom", null);
12426 },
12427
12428 /**
12429 * Initialize the drag behaviour used for zooming.
12430 * @private
12431 */
12432 initZoomBehaviour: function initZoomBehaviour() {
12433 var $$ = this,
12434 config = $$.config,
12435 isRotated = config.axis_rotated,
12436 start = 0,
12437 end = 0,
12438 zoomRect = null,
12439 prop = {
12440 axis: isRotated ? "y" : "x",
12441 attr: isRotated ? "height" : "width",
12442 index: isRotated ? 1 : 0
12443 };
12444 $$.zoomBehaviour = Object(external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_["drag"])().clickDistance(4).on("start", function () {
12445 $$.setDragStatus(!0), zoomRect || (zoomRect = $$.main.append("rect").attr("clip-path", $$.clipPath).attr("class", config_classes.zoomBrush).attr("width", isRotated ? $$.width : 0).attr("height", isRotated ? 0 : $$.height)), start = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this)[prop.index], end = start, zoomRect.attr(prop.axis, start).attr(prop.attr, 0), $$.onZoomStart();
12446 }).on("drag", function () {
12447 end = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["mouse"])(this)[prop.index], zoomRect.attr(prop.axis, Math.min(start, end)).attr(prop.attr, Math.abs(end - start));
12448 }).on("end", function () {
12449 var _ref,
12450 scale = $$.zoomScale || $$.x;
12451
12452 if ($$.setDragStatus(!1), zoomRect.attr(prop.axis, 0).attr(prop.attr, 0), start > end && (_ref = [end, start], start = _ref[0], end = _ref[1], _ref), start < 0 && (end += Math.abs(start), start = 0), start !== end) $$.api.zoom([start, end].map(function (v) {
12453 return scale.invert(v);
12454 })), $$.onZoomEnd();else if ($$.isMultipleX()) $$.clickHandlerForMultipleXS.bind(this)($$);else {
12455 var _event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"].sourceEvent || external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"],
12456 _ref2 = "clientX" in _event ? [_event.clientX, _event.clientY] : [_event.x, _event.y],
12457 _ref3 = _slicedToArray(_ref2, 2),
12458 x = _ref3[0],
12459 y = _ref3[1],
12460 target = browser_doc.elementFromPoint(x, y);
12461
12462 $$.clickHandlerForSingleX.bind(target)(Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(target).datum(), $$);
12463 }
12464 });
12465 },
12466 setZoomResetButton: function setZoomResetButton() {
12467 var $$ = this,
12468 config = $$.config,
12469 resetButton = config.zoom_resetButton;
12470 resetButton && config.zoom_enabled.type === "drag" && ($$.zoom.resetBtn ? $$.zoom.resetBtn.style("display", null) : $$.zoom.resetBtn = $$.selectChart.append("div").classed(config_classes.button, !0).append("span").on("click", function () {
12471 isFunction(resetButton.onclick) && resetButton.onclick(this), $$.api.unzoom.call($$);
12472 }).classed(config_classes.buttonZoomReset, !0).text(resetButton.text || "Reset Zoom"));
12473 }
12474});
12475// CONCATENATED MODULE: ./src/internals/color.js
12476/**
12477 * Copyright (c) 2017 ~ present NAVER Corp.
12478 * billboard.js project is licensed under the MIT license
12479 */
12480
12481
12482
12483
12484
12485
12486/**
12487 * Set pattern's background color
12488 * (it adds a <rect> element to simulate bg-color)
12489 * @param {SVGPatternElement} pattern SVG pattern element
12490 * @param {String} color Color string
12491 * @param {String} id ID to be set
12492 * @return {{id: string, node: SVGPatternElement}}
12493 * @private
12494 */
12495
12496var colorizePattern = function (pattern, color, id) {
12497 var node = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(pattern.cloneNode(!0));
12498 return node.attr("id", id).insert("rect", ":first-child").attr("width", node.attr("width")).attr("height", node.attr("height")).style("fill", color), {
12499 id: id,
12500 node: node.node()
12501 };
12502},
12503 schemeCategory10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]; // Replacement of d3.schemeCategory10.
12504// Contained differently depend on d3 version: v4(d3-scale), v5(d3-scale-chromatic)
12505
12506
12507extend(ChartInternal_ChartInternal.prototype, {
12508 /**
12509 * Get color pattern from CSS file
12510 * CSS should be defined as: background-image: url("#00c73c;#fa7171; ...");
12511 * @return {Array}
12512 * @private
12513 */
12514 getColorFromCss: function getColorFromCss() {
12515 var body = browser_doc.body,
12516 pattern = body["__colorPattern__"];
12517
12518 if (!pattern) {
12519 var span = browser_doc.createElement("span");
12520 span.className = config_classes.colorPattern, span.style.display = "none", body.appendChild(span);
12521 var content = win.getComputedStyle(span).backgroundImage;
12522 span.parentNode.removeChild(span), content.indexOf(";") > -1 && (pattern = content.replace(/url[^#]*|["'()]|(\s|%20)/g, "").split(";").map(function (v) {
12523 return v.trim().replace(/[\"'\s]/g, "");
12524 }).filter(Boolean), body["__colorPattern__"] = pattern);
12525 }
12526
12527 return pattern;
12528 },
12529 generateColor: function generateColor() {
12530 var $$ = this,
12531 config = $$.config,
12532 colors = config.data_colors,
12533 callback = config.data_color,
12534 ids = [],
12535 pattern = notEmpty(config.color_pattern) ? config.color_pattern : Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleOrdinal"])($$.getColorFromCss() || schemeCategory10).range(),
12536 originalColorPattern = pattern;
12537
12538 if (isFunction(config.color_tiles)) {
12539 var tiles = config.color_tiles(),
12540 colorizedPatterns = pattern.map(function (p, index) {
12541 var color = p.replace(/[#\(\)\s,]/g, ""),
12542 id = "".concat($$.datetimeId, "-pattern-").concat(color, "-").concat(index);
12543 return colorizePattern(tiles[index % tiles.length], p, id);
12544 }); // Add background color to patterns
12545
12546 pattern = colorizedPatterns.map(function (p) {
12547 return "url(#".concat(p.id, ")");
12548 }), $$.patterns = colorizedPatterns;
12549 }
12550
12551 return function (d) {
12552 var color,
12553 id = d.id || d.data && d.data.id || d,
12554 isLine = $$.isTypeOf(id, ["line", "spline", "step"]) || !$$.config.data_types[id];
12555 return isFunction(colors[id]) ? color = colors[id](d) : colors[id] ? color = colors[id] : (ids.indexOf(id) < 0 && ids.push(id), color = isLine ? originalColorPattern[ids.indexOf(id) % originalColorPattern.length] : pattern[ids.indexOf(id) % pattern.length], colors[id] = color), isFunction(callback) ? callback(color, d) : color;
12556 };
12557 },
12558 generateLevelColor: function generateLevelColor() {
12559 var $$ = this,
12560 config = $$.config,
12561 colors = config.color_pattern,
12562 threshold = config.color_threshold,
12563 asValue = threshold.unit === "value",
12564 max = threshold.max || 100,
12565 values = threshold.values && threshold.values.length ? threshold.values : [];
12566 return notEmpty(threshold) ? function (value) {
12567 var v = asValue ? value : value * 100 / max,
12568 color = colors[colors.length - 1];
12569
12570 for (var i = 0, l = values.length; i < l; i++) if (v <= values[i]) {
12571 color = colors[i];
12572 break;
12573 }
12574
12575 return color;
12576 } : null;
12577 },
12578
12579 /**
12580 * Set the data over color.
12581 * When is out, will restore in its previous color value
12582 * @param {Boolean} isOver true: set overed color, false: restore
12583 * @param {Number|Object} d target index or data object for Arc type
12584 * @private
12585 */
12586 setOverColor: function setOverColor(isOver, d) {
12587 var $$ = this,
12588 config = $$.config,
12589 onover = config.color_onover,
12590 color = isOver ? onover : $$.color;
12591 isObject(color) ? color = function (_ref) {
12592 var id = _ref.id;
12593 return id in onover ? onover[id] : $$.color(id);
12594 } : isString(color) && (color = function () {
12595 return onover;
12596 }), isObject(d) ? $$.main.selectAll(".".concat(config_classes.arc).concat($$.getTargetSelectorSuffix(d.id))).style("fill", color(d)) : $$.main.selectAll(".".concat(config_classes.shape, "-").concat(d)).style("fill", color);
12597 }
12598});
12599// CONCATENATED MODULE: ./src/internals/format.js
12600/**
12601 * Copyright (c) 2017 ~ present NAVER Corp.
12602 * billboard.js project is licensed under the MIT license
12603 */
12604
12605
12606
12607var getFormat = function ($$, typeValue, v) {
12608 var config = $$.config,
12609 type = "axis_".concat(typeValue, "_tick_format"),
12610 format = config[type] ? config[type] : $$.defaultValueFormat;
12611 return format(v);
12612};
12613
12614extend(ChartInternal_ChartInternal.prototype, {
12615 getYFormat: function getYFormat(forArc) {
12616 var $$ = this,
12617 formatForY = $$.yFormat,
12618 formatForY2 = $$.y2Format;
12619 return forArc && !$$.hasType("gauge") && (formatForY = $$.defaultArcValueFormat, formatForY2 = $$.defaultArcValueFormat), function (v, ratio, id) {
12620 var format = $$.axis.getId(id) === "y2" ? formatForY2 : formatForY;
12621 return format.call($$, v, ratio);
12622 };
12623 },
12624 yFormat: function yFormat(v) {
12625 return getFormat(this, "y", v);
12626 },
12627 y2Format: function y2Format(v) {
12628 return getFormat(this, "y2", v);
12629 },
12630 defaultValueFormat: function defaultValueFormat(v) {
12631 return isValue(v) ? +v : "";
12632 },
12633 defaultArcValueFormat: function defaultArcValueFormat(v, ratio) {
12634 return "".concat((ratio * 100).toFixed(1), "%");
12635 },
12636 dataLabelFormat: function dataLabelFormat(targetId) {
12637 var $$ = this,
12638 dataLabels = $$.config.data_labels,
12639 defaultFormat = function (v) {
12640 return isValue(v) ? +v : "";
12641 },
12642 format = defaultFormat;
12643
12644 return isFunction(dataLabels.format) ? format = dataLabels.format : isObjectType(dataLabels.format) && (dataLabels.format[targetId] ? format = dataLabels.format[targetId] === !0 ? defaultFormat : dataLabels.format[targetId] : format = function () {
12645 return "";
12646 }), format;
12647 }
12648});
12649// CONCATENATED MODULE: ./src/internals/cache.js
12650/**
12651 * Copyright (c) 2017 ~ present NAVER Corp.
12652 * billboard.js project is licensed under the MIT license
12653 */
12654
12655
12656extend(ChartInternal_ChartInternal.prototype, {
12657 /**
12658 * Add cache
12659 * @param {String} key
12660 * @param {*} value
12661 * @param {Boolean} isDataType
12662 * @private
12663 */
12664 addCache: function addCache(key, value) {
12665 var isDataType = !!(arguments.length > 2 && arguments[2] !== undefined) && arguments[2];
12666 this.cache[key] = isDataType ? this.cloneTarget(value) : value;
12667 },
12668
12669 /**
12670 * Remove cache
12671 * @param {String|Array} key
12672 * @private
12673 */
12674 removeCache: function removeCache(key) {
12675 var _this = this;
12676
12677 toArray(key).forEach(function (v) {
12678 return delete _this.cache[v];
12679 });
12680 },
12681
12682 /**
12683 * Get cahce
12684 * @param {String|Array} key
12685 * @param {Boolean} isDataType
12686 * @return {*}
12687 * @private
12688 */
12689 getCache: function getCache(key) {
12690 var isDataType = !!(arguments.length > 1 && arguments[1] !== undefined) && arguments[1];
12691
12692 if (isDataType) {
12693 var targets = [];
12694
12695 for (var id, i = 0; id = key[i]; i++) id in this.cache && targets.push(this.cloneTarget(this.cache[id]));
12696
12697 return targets;
12698 }
12699
12700 return this.cache[key] || null;
12701 },
12702
12703 /**
12704 * reset cached data
12705 * @param {Boolean} all true: reset all data, false: reset only '$' prefixed key data
12706 * @private
12707 */
12708 resetCache: function resetCache(all) {
12709 var $$ = this;
12710
12711 for (var x in $$.cache) (all || /^\$/.test(x)) && ($$.cache[x] = null);
12712 }
12713});
12714// CONCATENATED MODULE: ./src/internals/class.js
12715/**
12716 * Copyright (c) 2017 ~ present NAVER Corp.
12717 * billboard.js project is licensed under the MIT license
12718 */
12719
12720
12721
12722extend(ChartInternal_ChartInternal.prototype, {
12723 generateClass: function generateClass(prefix, targetId) {
12724 return " ".concat(prefix, " ").concat(prefix + this.getTargetSelectorSuffix(targetId));
12725 },
12726 classText: function classText(d) {
12727 return this.generateClass(config_classes.text, d.index);
12728 },
12729 classTexts: function classTexts(d) {
12730 return this.generateClass(config_classes.texts, d.id);
12731 },
12732 classShape: function classShape(d) {
12733 return this.generateClass(config_classes.shape, d.index);
12734 },
12735 classShapes: function classShapes(d) {
12736 return this.generateClass(config_classes.shapes, d.id);
12737 },
12738 generateExtraLineClass: function generateExtraLineClass() {
12739 var $$ = this,
12740 classes = $$.config.line_classes || [],
12741 ids = [];
12742 return function (d) {
12743 var id = d.id || d.data && d.data.id || d;
12744 return ids.indexOf(id) < 0 && ids.push(id), classes[ids.indexOf(id) % classes.length];
12745 };
12746 },
12747 classLine: function classLine(d) {
12748 return this.classShape(d) + this.generateClass(config_classes.line, d.id);
12749 },
12750 classLines: function classLines(d) {
12751 return this.classShapes(d) + this.generateClass(config_classes.lines, d.id);
12752 },
12753 classCircle: function classCircle(d) {
12754 return this.classShape(d) + this.generateClass(config_classes.circle, d.index);
12755 },
12756 classCircles: function classCircles(d) {
12757 return this.classShapes(d) + this.generateClass(config_classes.circles, d.id);
12758 },
12759 classBar: function classBar(d) {
12760 return this.classShape(d) + this.generateClass(config_classes.bar, d.index);
12761 },
12762 classBars: function classBars(d) {
12763 return this.classShapes(d) + this.generateClass(config_classes.bars, d.id);
12764 },
12765 classArc: function classArc(d) {
12766 return this.classShape(d.data) + this.generateClass(config_classes.arc, d.data.id);
12767 },
12768 classArcs: function classArcs(d) {
12769 return this.classShapes(d.data) + this.generateClass(config_classes.arcs, d.data.id);
12770 },
12771 classArea: function classArea(d) {
12772 return this.classShape(d) + this.generateClass(config_classes.area, d.id);
12773 },
12774 classAreas: function classAreas(d) {
12775 return this.classShapes(d) + this.generateClass(config_classes.areas, d.id);
12776 },
12777 classRegion: function classRegion(d, i) {
12778 return "".concat(this.generateClass(config_classes.region, i), " ").concat("class" in d ? d["class"] : "");
12779 },
12780 classEvent: function classEvent(d) {
12781 return this.generateClass(config_classes.eventRect, d.index);
12782 },
12783 classTarget: function classTarget(id) {
12784 var additionalClassSuffix = this.config.data_classes[id],
12785 additionalClass = "";
12786 return additionalClassSuffix && (additionalClass = " ".concat(config_classes.target, "-").concat(additionalClassSuffix)), this.generateClass(config_classes.target, id) + additionalClass;
12787 },
12788 classFocus: function classFocus(d) {
12789 return this.classFocused(d) + this.classDefocused(d);
12790 },
12791 classFocused: function classFocused(d) {
12792 return " ".concat(this.focusedTargetIds.indexOf(d.id) >= 0 ? config_classes.focused : "");
12793 },
12794 classDefocused: function classDefocused(d) {
12795 return " ".concat(this.defocusedTargetIds.indexOf(d.id) >= 0 ? config_classes.defocused : "");
12796 },
12797 classChartText: function classChartText(d) {
12798 return config_classes.chartText + this.classTarget(d.id);
12799 },
12800 classChartLine: function classChartLine(d) {
12801 return config_classes.chartLine + this.classTarget(d.id);
12802 },
12803 classChartBar: function classChartBar(d) {
12804 return config_classes.chartBar + this.classTarget(d.id);
12805 },
12806 classChartArc: function classChartArc(d) {
12807 return config_classes.chartArc + this.classTarget(d.data.id);
12808 },
12809 classChartRadar: function classChartRadar(d) {
12810 return config_classes.chartRadar + this.classTarget(d.id);
12811 },
12812 getTargetSelectorSuffix: function getTargetSelectorSuffix(targetId) {
12813 return targetId || targetId === 0 ? "-".concat(targetId).replace(/[\s?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\]/g, "-") : "";
12814 },
12815 selectorTarget: function selectorTarget(id, prefix) {
12816 return "".concat(prefix || "", ".").concat(config_classes.target + this.getTargetSelectorSuffix(id));
12817 },
12818 selectorTargets: function selectorTargets(idsValue, prefix) {
12819 var $$ = this,
12820 ids = idsValue || [];
12821 return ids.length ? ids.map(function (id) {
12822 return $$.selectorTarget(id, prefix);
12823 }) : null;
12824 },
12825 selectorLegend: function selectorLegend(id) {
12826 return ".".concat(config_classes.legendItem + this.getTargetSelectorSuffix(id));
12827 },
12828 selectorLegends: function selectorLegends(ids) {
12829 var $$ = this;
12830 return ids && ids.length ? ids.map(function (id) {
12831 return $$.selectorLegend(id);
12832 }) : null;
12833 }
12834});
12835// CONCATENATED MODULE: ./src/api/api.focus.js
12836/**
12837 * Copyright (c) 2017 ~ present NAVER Corp.
12838 * billboard.js project is licensed under the MIT license
12839 */
12840
12841
12842
12843
12844extend(Chart_Chart.prototype, {
12845 /**
12846 * This API highlights specified targets and fade out the others.<br><br>
12847 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be highlighted.
12848 * @method focus
12849 * @instance
12850 * @memberof Chart
12851 * @param {String|Array} targetIdsValue Target ids to be highlighted.
12852 * @example
12853 * // data1 will be highlighted and the others will be faded out
12854 * chart.focus("data1");
12855 *
12856 * // data1 and data2 will be highlighted and the others will be faded out
12857 * chart.focus(["data1", "data2"]);
12858 *
12859 * // all targets will be highlighted
12860 * chart.focus();
12861 */
12862 focus: function focus(targetIdsValue) {
12863 var $$ = this.internal,
12864 targetIds = $$.mapToTargetIds(targetIdsValue),
12865 candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$)));
12866 this.revert(), this.defocus(), candidates.classed(config_classes.focused, !0).classed(config_classes.defocused, !1), $$.hasArcType() && ($$.expandArc(targetIds), $$.hasType("gauge") && $$.markOverlapped(targetIdsValue, $$, ".".concat(config_classes.gaugeValue))), $$.toggleFocusLegend(targetIds, !0), $$.focusedTargetIds = targetIds, $$.defocusedTargetIds = $$.defocusedTargetIds.filter(function (id) {
12867 return targetIds.indexOf(id) < 0;
12868 });
12869 },
12870
12871 /**
12872 * This API fades out specified targets and reverts the others.<br><br>
12873 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be faded out.
12874 * @method defocus
12875 * @instance
12876 * @memberof Chart
12877 * @param {String|Array} Target ids to be faded out.
12878 * @example
12879 * // data1 will be faded out and the others will be reverted.
12880 * chart.defocus("data1");
12881 *
12882 * // data1 and data2 will be faded out and the others will be reverted.
12883 * chart.defocus(["data1", "data2"]);
12884 *
12885 * // all targets will be faded out.
12886 * chart.defocus();
12887 */
12888 defocus: function defocus(targetIdsValue) {
12889 var $$ = this.internal,
12890 targetIds = $$.mapToTargetIds(targetIdsValue),
12891 candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$)));
12892 candidates.classed(config_classes.focused, !1).classed(config_classes.defocused, !0), $$.hasArcType() && ($$.unexpandArc(targetIds), $$.hasType("gauge") && $$.undoMarkOverlapped($$, ".".concat(config_classes.gaugeValue))), $$.toggleFocusLegend(targetIds, !1), $$.focusedTargetIds = $$.focusedTargetIds.filter(function (id) {
12893 return targetIds.indexOf(id) < 0;
12894 }), $$.defocusedTargetIds = targetIds;
12895 },
12896
12897 /**
12898 * This API reverts specified targets.<br><br>
12899 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be reverted.
12900 * @method revert
12901 * @instance
12902 * @memberof Chart
12903 * @param {String|Array} Target ids to be reverted
12904 * @example
12905 * // data1 will be reverted.
12906 * chart.revert("data1");
12907 *
12908 * // data1 and data2 will be reverted.
12909 * chart.revert(["data1", "data2"]);
12910 *
12911 * // all targets will be reverted.
12912 * chart.revert();
12913 */
12914 revert: function revert(targetIdsValue) {
12915 var $$ = this.internal,
12916 targetIds = $$.mapToTargetIds(targetIdsValue),
12917 candidates = $$.svg.selectAll($$.selectorTargets(targetIds));
12918 // should be for all targets
12919 candidates.classed(config_classes.focused, !1).classed(config_classes.defocused, !1), $$.hasArcType() && $$.unexpandArc(targetIds), $$.config.legend_show && ($$.showLegend(targetIds.filter($$.isLegendToShow.bind($$))), $$.legend.selectAll($$.selectorLegends(targetIds)).filter(function () {
12920 return Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.legendItemFocused);
12921 }).classed(config_classes.legendItemFocused, !1)), $$.focusedTargetIds = [], $$.defocusedTargetIds = [];
12922 }
12923});
12924// CONCATENATED MODULE: ./src/api/api.show.js
12925/**
12926 * Copyright (c) 2017 ~ present NAVER Corp.
12927 * billboard.js project is licensed under the MIT license
12928 */
12929
12930
12931extend(Chart_Chart.prototype, {
12932 /**
12933 * Show/Hide data series
12934 * @private
12935 */
12936 _showHide: function _showHide(show, targetIdsValue, options) {
12937 var $$ = this.internal,
12938 targetIds = $$.mapToTargetIds(targetIdsValue);
12939 $$["".concat(show ? "remove" : "add", "HiddenTargetIds")](targetIds);
12940 var targets = $$.svg.selectAll($$.selectorTargets(targetIds)),
12941 opacity = show ? "1" : "0";
12942 targets.transition().style("opacity", opacity, "important").call($$.endall, function () {
12943 targets.style("opacity", null).style("opacity", opacity);
12944 }), options.withLegend && $$["".concat(show ? "show" : "hide", "Legend")](targetIds), $$.redraw({
12945 withUpdateOrgXDomain: !0,
12946 withUpdateXDomain: !0,
12947 withLegend: !0
12948 });
12949 },
12950
12951 /**
12952 * Show data series on chart
12953 * @method show
12954 * @instance
12955 * @memberof Chart
12956 * @param {String|Array} [targetIdsValue=all] The target id value.
12957 * @param {Object} [options] The object can consist with following members:<br>
12958 *
12959 * | Key | Type | default | Description |
12960 * | --- | --- | --- | --- |
12961 * | withLegend | Boolean | false | whether or not display legend |
12962 *
12963 * @example
12964 * // show 'data1'
12965 * chart.show("data1");
12966 *
12967 * // show 'data1' and 'data3'
12968 * chart.show(["data1", "data3"]);
12969 */
12970 show: function show(targetIdsValue) {
12971 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
12972
12973 this._showHide(!0, targetIdsValue, options);
12974 },
12975
12976 /**
12977 * Hide data series from chart
12978 * @method hide
12979 * @instance
12980 * @memberof Chart
12981 * @param {String|Array} [targetIdsValue=all] The target id value.
12982 * @param {Object} [options] The object can consist with following members:<br>
12983 *
12984 * | Key | Type | default | Description |
12985 * | --- | --- | --- | --- |
12986 * | withLegend | Boolean | false | whether or not display legend |
12987 *
12988 * @example
12989 * // hide 'data1'
12990 * chart.hide("data1");
12991 *
12992 * // hide 'data1' and 'data3'
12993 * chart.hide(["data1", "data3"]);
12994 */
12995 hide: function hide(targetIdsValue) {
12996 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
12997
12998 this._showHide(!1, targetIdsValue, options);
12999 },
13000
13001 /**
13002 * Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa.
13003 * @method toggle
13004 * @instance
13005 * @memberof Chart
13006 * @param {String|Array} [targetIdsValue=all] The target id value.
13007 * @param {Object} [options] The object can consist with following members:<br>
13008 *
13009 * | Key | Type | default | Description |
13010 * | --- | --- | --- | --- |
13011 * | withLegend | Boolean | false | whether or not display legend |
13012 *
13013 * @example
13014 * // toggle 'data1'
13015 * chart.toggle("data1");
13016 *
13017 * // toggle 'data1' and 'data3'
13018 * chart.toggle(["data1", "data3"]);
13019 */
13020 toggle: function toggle(targetIds) {
13021 var _this = this,
13022 options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
13023 $$ = this.internal,
13024 targets = {
13025 show: [],
13026 hide: []
13027 };
13028
13029 // sort show & hide target ids
13030 // perform show & hide task separately
13031 // https://github.com/naver/billboard.js/issues/454
13032 $$.mapToTargetIds(targetIds).forEach(function (id) {
13033 return targets[$$.isTargetToShow(id) ? "hide" : "show"].push(id);
13034 }), targets.show.length && this.show(targets.show, options), targets.hide.length && setTimeout(function () {
13035 return _this.hide(targets.hide, options);
13036 }, 0);
13037 }
13038});
13039// CONCATENATED MODULE: ./src/api/api.zoom.js
13040
13041
13042/**
13043 * Copyright (c) 2017 ~ present NAVER Corp.
13044 * billboard.js project is licensed under the MIT license
13045 */
13046
13047
13048
13049
13050/**
13051 * Check if the given domain is within zoom range
13052 * @param {Array} domain
13053 * @return {Boolean}
13054 * @private
13055 */
13056
13057var withinRange = function (domain, range) {
13058 var _range = _slicedToArray(range, 2),
13059 min = _range[0],
13060 max = _range[1];
13061
13062 return domain.every(function (v, i) {
13063 return i === 0 ? v >= min : v <= max;
13064 });
13065},
13066 api_zoom_zoom = function (domainValue) {
13067 var resultDomain,
13068 $$ = this.internal,
13069 domain = domainValue;
13070
13071 if ($$.config.zoom_enabled && domain && withinRange(domain, $$.getZoomDomain())) {
13072 var isTimeSeries = $$.isTimeSeries();
13073
13074 if (isTimeSeries && (domain = domain.map(function (x) {
13075 return $$.parseDate(x);
13076 })), $$.config.subchart_show) {
13077 var xScale = $$.zoomScale || $$.x;
13078 $$.brush.getSelection().call($$.brush.move, [xScale(domain[0]), xScale(domain[1])]), resultDomain = domain;
13079 } else $$.x.domain(domain), $$.zoomScale = $$.x, $$.xAxis.scale($$.zoomScale), resultDomain = $$.zoomScale.orgDomain();
13080
13081 $$.redraw({
13082 withTransition: !0,
13083 withY: $$.config.zoom_rescale,
13084 withDimension: !1
13085 }), $$.setZoomResetButton(), callFn($$.config.zoom_onzoom, $$.api, resultDomain);
13086 } else resultDomain = $$.zoomScale ? $$.zoomScale.domain() : $$.x.orgDomain();
13087
13088 return resultDomain;
13089};
13090/**
13091 * Zoom by giving x domain.
13092 * - **NOTE:**
13093 * - For `wheel` type zoom, the minimum zoom range will be set as the given domain. To get the initial state, [.unzoom()](#unzoom) should be called.
13094 * - To be used [zoom.enabled](Options.html#.zoom) option should be set as `truthy`.
13095 * @method zoom
13096 * @instance
13097 * @memberof Chart
13098 * @param {Array} domainValue If domain is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned.
13099 * @return {Array} domain value in array
13100 * @example
13101 * // Zoom to specified domain
13102 * chart.zoom([10, 20]);
13103 *
13104 * // Get the current zoomed domain
13105 * chart.zoom();
13106 */
13107
13108
13109extend(api_zoom_zoom, {
13110 /**
13111 * Enable and disable zooming.
13112 * @method zoom․enable
13113 * @instance
13114 * @memberof Chart
13115 * @param {String|Boolean} enabled Possible string values are "wheel" or "drag". If enabled is true, "wheel" will be used. If false is given, zooming will be disabled.<br>When set to false, the current zooming status will be reset.
13116 * @example
13117 * // Enable zooming using the mouse wheel
13118 * chart.zoom.enable(true);
13119 * // Or
13120 * chart.zoom.enable("wheel");
13121 *
13122 * // Enable zooming by dragging
13123 * chart.zoom.enable("drag");
13124 *
13125 * // Disable zooming
13126 * chart.zoom.enable(false);
13127 */
13128 enable: function enable() {
13129 var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "wheel",
13130 $$ = this.internal,
13131 config = $$.config,
13132 enableType = enabled;
13133 enabled && (enableType = isString(enabled) && /^(drag|wheel)$/.test(enabled) ? {
13134 type: enabled
13135 } : enabled), config.zoom_enabled = enableType, $$.zoom ? enabled === !1 && $$.bindZoomEvent(!1) : ($$.initZoom(), $$.bindZoomEvent()), $$.updateAndRedraw();
13136 },
13137
13138 /**
13139 * Set or get x Axis maximum zoom range value
13140 * @method zoom․max
13141 * @instance
13142 * @memberof Chart
13143 * @param {Number} [max] maximum value to set for zoom
13144 * @return {Number} zoom max value
13145 * @example
13146 * // Set maximum range value
13147 * chart.zoom.max(20);
13148 */
13149 max: function max(_max) {
13150 var $$ = this.internal,
13151 config = $$.config;
13152 return (_max === 0 || _max) && (config.zoom_x_max = getMinMax("max", [$$.orgXDomain[1], _max])), config.zoom_x_max;
13153 },
13154
13155 /**
13156 * Set or get x Axis minimum zoom range value
13157 * @method zoom․min
13158 * @instance
13159 * @memberof Chart
13160 * @param {Number} [min] minimum value to set for zoom
13161 * @return {Number} zoom min value
13162 * @example
13163 * // Set minimum range value
13164 * chart.zoom.min(-1);
13165 */
13166 min: function min(_min) {
13167 var $$ = this.internal,
13168 config = $$.config;
13169 return (_min === 0 || _min) && (config.zoom_x_min = getMinMax("min", [$$.orgXDomain[0], _min])), config.zoom_x_min;
13170 },
13171
13172 /**
13173 * Set zoom range
13174 * @method zoom․range
13175 * @instance
13176 * @memberof Chart
13177 * @param {Object} [range]
13178 * @return {Object} zoom range value
13179 * {
13180 * min: 0,
13181 * max: 100
13182 * }
13183 * @example
13184 * chart.zoom.range({
13185 * min: 10,
13186 * max: 100
13187 * });
13188 */
13189 range: function range(_range2) {
13190 var zoom = this.zoom;
13191
13192 if (isObject(_range2)) {
13193 var min = _range2.min,
13194 max = _range2.max;
13195 isDefined(min) && zoom.min(min), isDefined(max) && zoom.max(max);
13196 }
13197
13198 return {
13199 min: zoom.min(),
13200 max: zoom.max()
13201 };
13202 }
13203}), extend(Chart_Chart.prototype, {
13204 zoom: api_zoom_zoom,
13205
13206 /**
13207 * Unzoom zoomed area
13208 * @method unzoom
13209 * @instance
13210 * @memberof Chart
13211 * @example
13212 * chart.unzoom();
13213 */
13214 unzoom: function unzoom() {
13215 var $$ = this.internal,
13216 config = $$.config;
13217
13218 if ($$.zoomScale) {
13219 config.subchart_show ? $$.brush.getSelection().call($$.brush.move, null) : $$.zoom.updateTransformScale(external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_["zoomIdentity"]), $$.updateZoom(!0), $$.zoom.resetBtn && $$.zoom.resetBtn.style("display", "none");
13220 // reset transform
13221 var eventRects = $$.main.select(".".concat(config_classes.eventRects));
13222 Object(external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_["zoomTransform"])(eventRects.node()) !== external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_["zoomIdentity"] && $$.zoom.transform(eventRects, external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_["zoomIdentity"]), $$.redraw({
13223 withTransition: !0,
13224 withUpdateXDomain: !0,
13225 withUpdateOrgXDomain: !0,
13226 withY: config.zoom_rescale
13227 });
13228 }
13229 }
13230});
13231// CONCATENATED MODULE: ./src/api/api.load.js
13232/**
13233 * Copyright (c) 2017 ~ present NAVER Corp.
13234 * billboard.js project is licensed under the MIT license
13235 */
13236
13237
13238extend(Chart_Chart.prototype, {
13239 /**
13240 * Load data to the chart.<br><br>
13241 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be toggles.
13242 * - <b>Note:</b>
13243 * - unload should be used if some data needs to be unloaded simultaneously.
13244 * If you call unload API soon after/before load instead of unload param, chart will not be rendered properly because of cancel of animation.<br>
13245 * - done will be called after data loaded, but it's not after rendering.
13246 * It's because rendering will finish after some transition and there is some time lag between loading and rendering
13247 * @method load
13248 * @instance
13249 * @memberof Chart
13250 * @param {Object} args The object can consist with following members:<br>
13251 *
13252 * | Key | Description |
13253 * | --- | --- |
13254 * | - url<br>- json<br>- rows<br>- columns | The data will be loaded. If data that has the same target id is given, the chart will be updated. Otherwise, new target will be added |
13255 * | data | Data objects to be loaded. Checkout the example. |
13256 * | names | Same as data.names() |
13257 * | xs | Same as data.xs option |
13258 * | classes | The classes specified by data.classes will be updated. classes must be Object that has target id as keys. |
13259 * | categories | The categories specified by axis.x.categories or data.x will be updated. categories must be Array. |
13260 * | axes | The axes specified by data.axes will be updated. axes must be Object that has target id as keys. |
13261 * | colors | The colors specified by data.colors will be updated. colors must be Object that has target id as keys. |
13262 * | headers | Set request header if loading via `data.url`.<br>@see [data․headers](Options.html#.data%25E2%2580%25A4headers) |
13263 * | keys | Choose which JSON objects keys correspond to desired data.<br>**NOTE:** Only for JSON object given as array.<br>@see [data․keys](Options.html#.data%25E2%2580%25A4keys) |
13264 * | mimeType | Set 'json' if loading JSON via url.<br>@see [data․mimeType](Options.html#.data%25E2%2580%25A4mimeType) |
13265 * | - type<br>- types | The type of targets will be updated. type must be String and types must be Object. |
13266 * | unload | Specify the data will be unloaded before loading new data. If true given, all of data will be unloaded. If target ids given as String or Array, specified targets will be unloaded. If absent or false given, unload will not occur. |
13267 * | done | The specified function will be called after data loaded.|
13268 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataFromURL)
13269 * @example
13270 * // Load data1 and unload data2 and data3
13271 * chart.load({
13272 * columns: [
13273 * ["data1", 100, 200, 150, ...],
13274 * ...
13275 * ],
13276 * unload: ["data2", "data3"],
13277 * url: "...",
13278 * done: function() { ... }
13279 * });
13280 * @example
13281 * // myAPI.json
13282 * // {
13283 * // "data1": [220, 240, 270, 250, 280],
13284 * // "data2": [180, 150, 300, 70, 120]
13285 * // }
13286 *
13287 * chart.load({
13288 * url: './data/myAPI.json',
13289 * mimeType: "json",
13290 *
13291 * // set request header if is needed
13292 * headers: {
13293 * "Content-Type": "text/json"
13294 * }
13295 * });
13296 * @example
13297 * chart.load({
13298 * data: [
13299 * // equivalent as: columns: [["data1", 30, 200, 100]]
13300 * {"data1": 30}, {"data1": 200}, {"data1": 100}
13301 *
13302 * // or
13303 * // equivalent as: columns: [["data1", 10, 20], ["data2", 13, 30]]
13304 * // {"data1": 10, "data2": 13}, {"data1": 20, "data2": 30}}
13305 * ]
13306 * });
13307 * @example
13308 * chart.load({
13309 * json: [
13310 * {name: "www.site1.com", upload: 800, download: 500, total: 400},
13311 * ],
13312 * keys: {
13313 * x: "name",
13314 * value: ["upload", "download"]
13315 * }
13316 * });
13317 */
13318 load: function load(args) {
13319 var $$ = this.internal,
13320 config = $$.config;
13321 // update xs if specified
13322 // update names if exists
13323 // update classes if exists
13324 // update axes if exists
13325 // update colors if exists
13326 args.xs && $$.addXs(args.xs), "names" in args && this.data.names(args.names), "classes" in args && Object.keys(args.classes).forEach(function (id) {
13327 config.data_classes[id] = args.classes[id];
13328 }), "categories" in args && $$.isCategorized() && (config.axis_x_categories = args.categories), "axes" in args && Object.keys(args.axes).forEach(function (id) {
13329 config.data_axes[id] = args.axes[id];
13330 }), "colors" in args && Object.keys(args.colors).forEach(function (id) {
13331 config.data_colors[id] = args.colors[id];
13332 }), "unload" in args && args.unload !== !1 ? $$.unload($$.mapToTargetIds(args.unload === !0 ? null : args.unload), function () {
13333 return $$.loadFromArgs(args);
13334 }) : $$.loadFromArgs(args);
13335 },
13336
13337 /**
13338 * Unload data to the chart.<br><br>
13339 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be toggles.
13340 * - <b>Note:</b>
13341 * If you call load API soon after/before unload, unload param of load should be used. Otherwise chart will not be rendered properly because of cancel of animation.<br>
13342 * `done` will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.
13343 * @method unload
13344 * @instance
13345 * @memberof Chart
13346 * @param {Object} args
13347 * | key | Type | Description |
13348 * | --- | --- | --- |
13349 * | ids | String &vert; Array | Target id data to be unloaded. If not given, all data will be unloaded. |
13350 * | done | Fuction | Callback after data is unloaded. |
13351 * @example
13352 * // Unload data2 and data3
13353 * chart.unload({
13354 * ids: ["data2", "data3"],
13355 * done: function() {
13356 * // called after the unloaded
13357 * }
13358 * });
13359 */
13360 unload: function unload(argsValue) {
13361 var $$ = this.internal,
13362 args = argsValue || {};
13363 isArray(args) ? args = {
13364 ids: args
13365 } : isString(args) && (args = {
13366 ids: [args]
13367 });
13368 var ids = $$.mapToTargetIds(args.ids);
13369 $$.unload(ids, function () {
13370 $$.redraw({
13371 withUpdateOrgXDomain: !0,
13372 withUpdateXDomain: !0,
13373 withLegend: !0
13374 }), $$.removeCache(ids), args.done && args.done();
13375 });
13376 }
13377});
13378// EXTERNAL MODULE: external {"commonjs":"d3-ease","commonjs2":"d3-ease","amd":"d3-ease","root":"d3"}
13379var external_commonjs_d3_ease_commonjs2_d3_ease_amd_d3_ease_root_d3_ = __webpack_require__(14);
13380
13381// CONCATENATED MODULE: ./src/api/api.flow.js
13382/**
13383 * Copyright (c) 2017 ~ present NAVER Corp.
13384 * billboard.js project is licensed under the MIT license
13385 */
13386
13387
13388
13389
13390
13391
13392
13393extend(Chart_Chart.prototype, {
13394 /**
13395 * Flow data to the chart.<br><br>
13396 * By this API, you can append new data points to the chart.
13397 * @method flow
13398 * @instance
13399 * @memberof Chart
13400 * @param {Object} args The object can consist with following members:<br>
13401 *
13402 * | Key | Type | Description |
13403 * | --- | --- | --- |
13404 * | json | Object | Data as JSON format (@see [data․json](Options.html#.data%25E2%2580%25A4json)) |
13405 * | rows | Array | Data in array as row format (@see [data․rows](Options.html#.data%25E2%2580%25A4json)) |
13406 * | columns | Array | Data in array as column format (@see [data․columns](Options.html#.data%25E2%2580%25A4columns)) |
13407 * | to | String | The lower x edge will move to that point. If not given, the lower x edge will move by the number of given data points |
13408 * | length | Number | The lower x edge will move by the number of this argument |
13409 * | duration | Number | The duration of the transition will be specified value. If not given, transition.duration will be used as default |
13410 * | done | Function | The specified function will be called when flow ends |
13411 *
13412 * - **NOTE:**
13413 * - If json, rows and columns given, the data will be loaded.
13414 * - If data that has the same target id is given, the chart will be appended.
13415 * - Otherwise, new target will be added. One of these is required when calling.
13416 * - If json specified, keys is required as well as data.json.
13417 * - If tab isn't visible(by evaluating `document.hidden`), will not be executed to prevent unnecessary work.
13418 * @example
13419 * // 2 data points will be apprended to the tail and popped from the head.
13420 * // After that, 4 data points will be appended and no data points will be poppoed.
13421 * chart.flow({
13422 * columns: [
13423 * ["x", "2018-01-11", "2018-01-21"],
13424 * ["data1", 500, 200],
13425 * ["data2", 100, 300],
13426 * ["data3", 200, 120]
13427 * ],
13428 * to: "2013-01-11",
13429 * done: function () {
13430 * chart.flow({
13431 * columns: [
13432 * ["x", "2018-02-11", "2018-02-12", "2018-02-13", "2018-02-14"],
13433 * ["data1", 200, 300, 100, 250],
13434 * ["data2", 100, 90, 40, 120],
13435 * ["data3", 100, 100, 300, 500]
13436 * ],
13437 * length: 2,
13438 * duration: 1500
13439 * });
13440 * }
13441 * });
13442 */
13443 flow: function flow(args) {
13444 var data,
13445 domain,
13446 diff,
13447 to,
13448 $$ = this.internal,
13449 length = 0,
13450 tail = 0;
13451
13452 if ((args.json || args.rows || args.columns) && (data = $$.convertData(args)), data && $$.isTabVisible()) {
13453 var notfoundIds = [],
13454 orgDataCount = $$.getMaxDataCount(),
13455 targets = $$.convertDataToTargets(data, !0);
13456 $$.data.targets.forEach(function (t) {
13457 for (var found = !1, i = 0; i < targets.length; i++) if (t.id === targets[i].id) {
13458 found = !0, t.values[t.values.length - 1] && (tail = t.values[t.values.length - 1].index + 1), length = targets[i].values.length;
13459
13460 for (var _j3 = 0; _j3 < length; _j3++) targets[i].values[_j3].index = tail + _j3, $$.isTimeSeries() || (targets[i].values[_j3].x = tail + _j3);
13461
13462 t.values = t.values.concat(targets[i].values), targets.splice(i, 1);
13463 break;
13464 }
13465
13466 found || notfoundIds.push(t.id);
13467 }), $$.data.targets.forEach(function (t) {
13468 for (var _i = 0; _i < notfoundIds.length; _i++) if (t.id === notfoundIds[_i]) {
13469 tail = t.values[t.values.length - 1].index + 1;
13470
13471 for (var _j4 = 0; _j4 < length; _j4++) t.values.push({
13472 id: t.id,
13473 index: tail + _j4,
13474 x: $$.isTimeSeries() ? $$.getOtherTargetX(tail + _j4) : tail + _j4,
13475 value: null
13476 });
13477 }
13478 }), $$.data.targets.length && targets.forEach(function (t) {
13479 for (var missing = [], i = $$.data.targets[0].values[0].index; i < tail; i++) missing.push({
13480 id: t.id,
13481 index: i,
13482 x: $$.isTimeSeries() ? $$.getOtherTargetX(i) : i,
13483 value: null
13484 });
13485
13486 t.values.forEach(function (v) {
13487 v.index += tail, $$.isTimeSeries() || (v.x += tail);
13488 }), t.values = missing.concat(t.values);
13489 }), $$.data.targets = $$.data.targets.concat(targets);
13490 // add remained
13491 // check data count because behavior needs to change when it"s only one
13492 // const dataCount = $$.getMaxDataCount();
13493 var baseTarget = $$.data.targets[0],
13494 baseValue = baseTarget.values[0];
13495 isDefined(args.to) ? (length = 0, to = $$.isTimeSeries() ? $$.parseDate(args.to) : args.to, baseTarget.values.forEach(function (v) {
13496 v.x < to && length++;
13497 })) : isDefined(args.length) && (length = args.length), orgDataCount ? orgDataCount === 1 && $$.isTimeSeries() && (diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2, domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)]) : (diff = $$.isTimeSeries() ? baseTarget.values.length > 1 ? baseTarget.values[baseTarget.values.length - 1].x - baseValue.x : baseValue.x - $$.getXDomain($$.data.targets)[0] : 1, domain = [baseValue.x - diff, baseValue.x]), domain && $$.updateXDomain(null, !0, !0, !1, domain), $$.updateTargets($$.data.targets), $$.redraw({
13498 flow: {
13499 index: baseValue.index,
13500 length: length,
13501 duration: isValue(args.duration) ? args.duration : $$.config.transition_duration,
13502 done: args.done,
13503 orgDataCount: orgDataCount
13504 },
13505 withLegend: !0,
13506 withTransition: orgDataCount > 1,
13507 withTrimXDomain: !1,
13508 withUpdateXAxis: !0
13509 });
13510 }
13511 }
13512}), extend(ChartInternal_ChartInternal.prototype, {
13513 /**
13514 * Generate flow
13515 * @memberof ChartInternal
13516 * @private
13517 * @param {Object} args
13518 * @return {Function}
13519 */
13520 generateFlow: function generateFlow(args) {
13521 var $$ = this,
13522 config = $$.config;
13523 return function () {
13524 var translateX,
13525 targets = args.targets,
13526 flow = args.flow,
13527 _args$shape$type = args.shape.type,
13528 drawBar = _args$shape$type.bar,
13529 drawLine = _args$shape$type.line,
13530 drawArea = _args$shape$type.area,
13531 _args$shape$pos = args.shape.pos,
13532 cx = _args$shape$pos.cx,
13533 cy = _args$shape$pos.cy,
13534 xForText = _args$shape$pos.xForText,
13535 yForText = _args$shape$pos.yForText,
13536 xv = args.xv,
13537 duration = args.duration,
13538 scaleX = 1,
13539 flowIndex = flow.index,
13540 flowLength = flow.length,
13541 flowStart = $$.getValueOnIndex($$.data.targets[0].values, flowIndex),
13542 flowEnd = $$.getValueOnIndex($$.data.targets[0].values, flowIndex + flowLength),
13543 orgDomain = $$.x.domain(),
13544 durationForFlow = flow.duration || duration,
13545 done = flow.done || function () {},
13546 wait = $$.generateWait(),
13547 xgrid = $$.xgrid || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13548 xgridLines = $$.xgridLines || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13549 mainRegion = $$.mainRegion || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13550 mainText = $$.mainText || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13551 mainBar = $$.mainBar || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13552 mainLine = $$.mainLine || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13553 mainArea = $$.mainArea || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]),
13554 mainCircle = $$.mainCircle || Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["selectAll"])([]);
13555
13556 $$.flowing = !0, $$.data.targets.forEach(function (d) {
13557 d.values.splice(0, flowLength);
13558 });
13559 // update x domain to generate axis elements for flow
13560 var domain = $$.updateXDomain(targets, !0, !0); // update elements related to x scale
13561
13562 $$.updateXGrid && $$.updateXGrid(!0), flow.orgDataCount ? flow.orgDataCount === 1 || (flowStart && flowStart.x) === (flowEnd && flowEnd.x) ? translateX = $$.x(orgDomain[0]) - $$.x(domain[0]) : $$.isTimeSeries() ? translateX = $$.x(orgDomain[0]) - $$.x(domain[0]) : translateX = $$.x(flowStart.x) - $$.x(flowEnd.x) : $$.data.targets[0].values.length === 1 ? $$.isTimeSeries() ? (flowStart = $$.getValueOnIndex($$.data.targets[0].values, 0), flowEnd = $$.getValueOnIndex($$.data.targets[0].values, $$.data.targets[0].values.length - 1), translateX = $$.x(flowStart.x) - $$.x(flowEnd.x)) : translateX = diffDomain(domain) / 2 : translateX = $$.x(orgDomain[0]) - $$.x(domain[0]), scaleX = diffDomain(orgDomain) / diffDomain(domain);
13563 var transform = "translate(".concat(translateX, ",0) scale(").concat(scaleX, ",1)");
13564 $$.hideGridFocus();
13565 var gt = Object(external_commonjs_d3_transition_commonjs2_d3_transition_amd_d3_transition_root_d3_["transition"])().ease(external_commonjs_d3_ease_commonjs2_d3_ease_amd_d3_ease_root_d3_["easeLinear"]).duration(durationForFlow);
13566 wait.add([$$.axes.x.transition(gt).call(function (g) {
13567 return $$.xAxis.setTransition(gt).create(g);
13568 }), mainBar.transition(gt).attr("transform", transform), mainLine.transition(gt).attr("transform", transform), mainArea.transition(gt).attr("transform", transform), mainCircle.transition(gt).attr("transform", transform), mainText.transition(gt).attr("transform", transform), mainRegion.filter($$.isRegionOnX).transition(gt).attr("transform", transform), xgrid.transition(gt).attr("transform", transform), xgridLines.transition(gt).attr("transform", transform)]), gt.call(wait, function () {
13569 var isRotated = config.axis_rotated; // remove flowed elements
13570
13571 if (flowLength) {
13572 for (var target = {
13573 shapes: [],
13574 texts: [],
13575 eventRects: []
13576 }, i = 0; i < flowLength; i++) target.shapes.push(".".concat(config_classes.shape, "-").concat(i)), target.texts.push(".".concat(config_classes.text, "-").concat(i)), target.eventRects.push(".".concat(config_classes.eventRect, "-").concat(i));
13577
13578 ["shapes", "texts", "eventRects"].forEach(function (v) {
13579 $$.svg.selectAll(".".concat(config_classes[v])).selectAll(target[v]).remove();
13580 }), $$.svg.select(".".concat(config_classes.xgrid)).remove();
13581 } // draw again for removing flowed elements and reverting attr
13582
13583
13584 if (xgrid.size() && xgrid.attr("transform", null).attr($$.xgridAttr), xgridLines.attr("transform", null), xgridLines.select("line").attr("x1", isRotated ? 0 : xv).attr("x2", isRotated ? $$.width : xv), xgridLines.select("text").attr("x", isRotated ? $$.width : 0).attr("y", xv), mainBar.attr("transform", null).attr("d", drawBar), mainLine.attr("transform", null).attr("d", drawLine), mainArea.attr("transform", null).attr("d", drawArea), mainCircle.attr("transform", null), $$.isCirclePoint()) mainCircle.attr("cx", cx).attr("cy", cy);else {
13585 var xFunc = function (d) {
13586 return cx(d) - config.point_r;
13587 },
13588 yFunc = function (d) {
13589 return cy(d) - config.point_r;
13590 };
13591
13592 mainCircle.attr("x", xFunc).attr("y", yFunc).attr("cx", cx) // when pattern is used, it possibly contain 'circle' also.
13593 .attr("cy", cy);
13594 }
13595 mainText.attr("transform", null).attr("x", xForText).attr("y", yForText).style("fill-opacity", $$.opacityForText.bind($$)), mainRegion.attr("transform", null), mainRegion.select("rect").filter($$.isRegionOnX).attr("x", $$.regionX.bind($$)).attr("width", $$.regionWidth.bind($$)), config.interaction_enabled && $$.redrawEventRect(), done(), $$.flowing = !1;
13596 });
13597 };
13598 }
13599});
13600// CONCATENATED MODULE: ./src/api/api.selection.js
13601/**
13602 * Copyright (c) 2017 ~ present NAVER Corp.
13603 * billboard.js project is licensed under the MIT license
13604 */
13605
13606
13607
13608
13609extend(Chart_Chart.prototype, {
13610 /**
13611 * Get selected data points.<br><br>
13612 * By this API, you can get selected data points information. To use this API, data.selection.enabled needs to be set true.
13613 * @method selected
13614 * @instance
13615 * @memberof Chart
13616 * @param {String} [targetId] You can filter the result by giving target id that you want to get. If not given, all of data points will be returned.
13617 * @return {Array} dataPoint Array of the data points.<br>ex.) `[{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ...]`
13618 * @example
13619 * // all selected data points will be returned.
13620 * chart.selected();
13621 * // --> ex.) [{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ... ]
13622 *
13623 * // all selected data points of data1 will be returned.
13624 * chart.selected("data1");
13625 */
13626 selected: function selected(targetId) {
13627 var $$ = this.internal,
13628 dataPoint = [];
13629 return $$.main.selectAll(".".concat(config_classes.shapes + $$.getTargetSelectorSuffix(targetId))).selectAll(".".concat(config_classes.shape)).filter(function () {
13630 return Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this).classed(config_classes.SELECTED);
13631 }).each(function (d) {
13632 return dataPoint.push(d);
13633 }), dataPoint;
13634 },
13635
13636 /**
13637 * Set data points to be selected. (`[data.selection.enabled](Options.html#.data%25E2%2580%25A4selection%25E2%2580%25A4enabled) option should be set true to use this method)`
13638 * @method select
13639 * @instance
13640 * @memberof Chart
13641 * @param {String|Array} [ids] id value to get selected.
13642 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points.
13643 * @param {Boolean} [resetOther] Unselect already selected.
13644 * @example
13645 * // select all data points
13646 * chart.select();
13647 *
13648 * // select all from 'data2'
13649 * chart.select("data2");
13650 *
13651 * // select all from 'data1' and 'data2'
13652 * chart.select(["data1", "data2"]);
13653 *
13654 * // select from 'data1', indices 2 and unselect others selected
13655 * chart.select("data1", [2], true);
13656 *
13657 * // select from 'data1', indices 0, 3 and 5
13658 * chart.select("data1", [0, 3, 5]);
13659 */
13660 select: function select(ids, indices, resetOther) {
13661 var $$ = this.internal,
13662 config = $$.config;
13663 config.data_selection_enabled && $$.main.selectAll(".".concat(config_classes.shapes)).selectAll(".".concat(config_classes.shape)).each(function (d, i) {
13664 var shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
13665 id = d.data ? d.data.id : d.id,
13666 toggle = $$.getToggle(this, d).bind($$),
13667 isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
13668 isTargetIndex = !indices || indices.indexOf(i) >= 0,
13669 isSelected = shape.classed(config_classes.SELECTED);
13670 // line/area selection not supported yet
13671 shape.classed(config_classes.line) || shape.classed(config_classes.area) || (isTargetId && isTargetIndex ? config.data_selection_isselectable(d) && !isSelected && toggle(!0, shape.classed(config_classes.SELECTED, !0), d, i) : isDefined(resetOther) && resetOther && isSelected && toggle(!1, shape.classed(config_classes.SELECTED, !1), d, i));
13672 });
13673 },
13674
13675 /**
13676 * Set data points to be un-selected.
13677 * @method unselect
13678 * @instance
13679 * @memberof Chart
13680 * @param {String|Array} [ids] id value to be unselected.
13681 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points.
13682 * @example
13683 * // unselect all data points
13684 * chart.unselect();
13685 *
13686 * // unselect all from 'data1'
13687 * chart.unselect("data1");
13688 *
13689 * // unselect from 'data1', indices 2
13690 * chart.unselect("data1", [2]);
13691 */
13692 unselect: function unselect(ids, indices) {
13693 var $$ = this.internal,
13694 config = $$.config;
13695 config.data_selection_enabled && $$.main.selectAll(".".concat(config_classes.shapes)).selectAll(".".concat(config_classes.shape)).each(function (d, i) {
13696 var shape = Object(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["select"])(this),
13697 id = d.data ? d.data.id : d.id,
13698 toggle = $$.getToggle(this, d).bind($$),
13699 isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0,
13700 isTargetIndex = !indices || indices.indexOf(i) >= 0,
13701 isSelected = shape.classed(config_classes.SELECTED);
13702 // line/area selection not supported yet
13703 shape.classed(config_classes.line) || shape.classed(config_classes.area) || isTargetId && isTargetIndex && config.data_selection_isselectable(d) && isSelected && toggle(!1, shape.classed(config_classes.SELECTED, !1), d, i);
13704 });
13705 }
13706});
13707// CONCATENATED MODULE: ./src/api/api.transform.js
13708/**
13709 * Copyright (c) 2017 ~ present NAVER Corp.
13710 * billboard.js project is licensed under the MIT license
13711 */
13712
13713
13714/**
13715 * Change the type of the chart.
13716 * @private
13717 * @param {String|Array} targetIds
13718 * @param {String} type
13719 * @param {Object} optionsForRedraw
13720 */
13721
13722function transformTo(targetIds, type, optionsForRedraw) {
13723 var $$ = this,
13724 options = optionsForRedraw || {
13725 withTransitionForAxis: !$$.hasArcType()
13726 };
13727 // this is needed when transforming to arc
13728 options.withTransitionForTransform = !1, $$.transiting = !1, $$.setTargetType(targetIds, type), $$.updateTargets($$.data.targets), $$.updateAndRedraw(options);
13729}
13730
13731extend(Chart_Chart.prototype, {
13732 /**
13733 * Change the type of the chart.
13734 * @method transform
13735 * @instance
13736 * @memberof Chart
13737 * @param {String} type Specify the type to be transformed. The types listed in data.type can be used.
13738 * @param {String|Array} targetIds Specify targets to be transformed. If not given, all targets will be the candidate.
13739 * @example
13740 * // all targets will be bar chart.
13741 * chart.transform("bar");
13742 *
13743 * // only data1 will be bar chart.
13744 * chart.transform("bar", "data1");
13745 *
13746 * // only data1 and data2 will be bar chart.
13747 * chart.transform("bar", ["data1", "data2"]);
13748 */
13749 transform: function transform(type, targetIds) {
13750 var $$ = this.internal,
13751 options = ["pie", "donut"].indexOf(type) >= 0 ? {
13752 withTransform: !0
13753 } : null;
13754 transformTo.bind($$)(targetIds, type, options);
13755 }
13756});
13757// CONCATENATED MODULE: ./src/api/api.group.js
13758/**
13759 * Copyright (c) 2017 ~ present NAVER Corp.
13760 * billboard.js project is licensed under the MIT license
13761 */
13762
13763
13764extend(Chart_Chart.prototype, {
13765 /**
13766 * Update groups for the targets.
13767 * @method groups
13768 * @instance
13769 * @memberof Chart
13770 * @param {Array} groups This argument needs to be an Array that includes one or more Array that includes target ids to be grouped.
13771 * @return {Array} Grouped data names array
13772 * @example
13773 * // data1 and data2 will be a new group.
13774 * chart.groups([
13775 * ["data1", "data2"]
13776 * ]);
13777 */
13778 groups: function groups(_groups) {
13779 var $$ = this.internal,
13780 config = $$.config;
13781 return isUndefined(_groups) ? config.data_groups : (config.data_groups = _groups, $$.redraw(), config.data_groups);
13782 }
13783});
13784// CONCATENATED MODULE: ./src/api/api.grid.js
13785/**
13786 * Copyright (c) 2017 ~ present NAVER Corp.
13787 * billboard.js project is licensed under the MIT license
13788 */
13789
13790
13791/**
13792 * Update x grid lines.
13793 * @method xgrids
13794 * @instance
13795 * @memberof Chart
13796 * @param {Array} grids X grid lines will be replaced with this argument. The format of this argument is the same as grid.x.lines.
13797 * @example
13798 * // Show 2 x grid lines
13799 * chart.xgrids([
13800 * {value: 1, text: "Label 1"},
13801 * {value: 4, text: "Label 4"}
13802 * ]);
13803 */
13804
13805var xgrids = function (grids) {
13806 var $$ = this.internal,
13807 config = $$.config;
13808 return grids ? (config.grid_x_lines = grids, $$.redrawWithoutRescale(), config.grid_x_lines) : config.grid_x_lines;
13809};
13810
13811extend(xgrids, {
13812 /**
13813 * Add x grid lines.<br>
13814 * This API adds new x grid lines instead of replacing like xgrids.
13815 * @method xgrids․add
13816 * @instance
13817 * @memberof Chart
13818 * @param {Array|Object} grids New x grid lines will be added. The format of this argument is the same as grid.x.lines and it's possible to give an Object if only one line will be added.
13819 * @example
13820 * // Add a new x grid line
13821 * chart.xgrids.add(
13822 * {value: 4, text: "Label 4"}
13823 * );
13824 *
13825 * // Add new x grid lines
13826 * chart.xgrids.add([
13827 * {value: 2, text: "Label 2"},
13828 * {value: 4, text: "Label 4"}
13829 * ]);
13830 */
13831 add: function add(grids) {
13832 return this.xgrids(this.internal.config.grid_x_lines.concat(grids || []));
13833 },
13834
13835 /**
13836 * Remove x grid lines.<br>
13837 * This API removes x grid lines.
13838 * @method xgrids․remove
13839 * @instance
13840 * @memberof Chart
13841 * @param {Object} params This argument should include value or class. If value is given, the x grid lines that have specified x value will be removed. If class is given, the x grid lines that have specified class will be removed. If args is not given, all of x grid lines will be removed.
13842 * @example
13843 * // x grid line on x = 2 will be removed
13844 * chart.xgrids.remove({value: 2});
13845 *
13846 * // x grid lines that have 'grid-A' will be removed
13847 * chart.xgrids.remove({
13848 * class: "grid-A"
13849 * });
13850 *
13851 * // all of x grid lines will be removed
13852 * chart.xgrids.remove();
13853 */
13854 remove: function remove(params) {
13855 // TODO: multiple
13856 this.internal.removeGridLines(params, !0);
13857 }
13858});
13859
13860/**
13861 * Update y grid lines.
13862 * @method ygrids
13863 * @instance
13864 * @memberof Chart
13865 * @param {Array} grids Y grid lines will be replaced with this argument. The format of this argument is the same as grid.y.lines.
13866 * @example
13867 * // Show 2 y grid lines
13868 * chart.ygrids([
13869 * {value: 100, text: "Label 1"},
13870 * {value: 400, text: "Label 4"}
13871 * ]);
13872 */
13873var ygrids = function (grids) {
13874 var $$ = this.internal,
13875 config = $$.config;
13876 return grids ? (config.grid_y_lines = grids, $$.redrawWithoutRescale(), config.grid_y_lines) : config.grid_y_lines;
13877};
13878
13879extend(ygrids, {
13880 /**
13881 * Add y grid lines.<br>
13882 * This API adds new y grid lines instead of replacing like ygrids.
13883 * @method ygrids․add
13884 * @instance
13885 * @memberof Chart
13886 * @param {Array|Object} grids New y grid lines will be added. The format of this argument is the same as grid.y.lines and it's possible to give an Object if only one line will be added.
13887 * @example
13888 * // Add a new x grid line
13889 * chart.ygrids.add(
13890 * {value: 400, text: "Label 4"}
13891 * );
13892 *
13893 * // Add new x grid lines
13894 * chart.ygrids.add([
13895 * {value: 200, text: "Label 2"},
13896 * {value: 400, text: "Label 4"}
13897 * ]);
13898 */
13899 add: function add(grids) {
13900 return this.ygrids(this.internal.config.grid_y_lines.concat(grids || []));
13901 },
13902
13903 /**
13904 * Remove y grid lines.<br>
13905 * This API removes x grid lines.
13906 * @method ygrids․remove
13907 * @instance
13908 * @memberof Chart
13909 * @param {Object} params This argument should include value or class. If value is given, the y grid lines that have specified y value will be removed. If class is given, the y grid lines that have specified class will be removed. If args is not given, all of y grid lines will be removed.
13910 * @example
13911 * // y grid line on y = 200 will be removed
13912 * chart.ygrids.remove({value: 200});
13913 *
13914 * // y grid lines that have 'grid-A' will be removed
13915 * chart.ygrids.remove({
13916 * class: "grid-A"
13917 * });
13918 *
13919 * // all of y grid lines will be removed
13920 * chart.ygrids.remove();
13921 */
13922 remove: function remove(params) {
13923 // TODO: multiple
13924 this.internal.removeGridLines(params, !1);
13925 }
13926}), extend(Chart_Chart.prototype, {
13927 xgrids: xgrids,
13928 ygrids: ygrids
13929});
13930// CONCATENATED MODULE: ./src/api/api.region.js
13931/**
13932 * Copyright (c) 2017 ~ present NAVER Corp.
13933 * billboard.js project is licensed under the MIT license
13934 */
13935
13936
13937
13938/**
13939 * Update regions.
13940 * @method regions
13941 * @instance
13942 * @memberof Chart
13943 * @param {Array} regions Regions will be replaced with this argument. The format of this argument is the same as regions.
13944 * @return {Array} regions
13945 * @example
13946 * // Show 2 regions
13947 * chart.regions([
13948 * {axis: "x", start: 5, class: "regionX"},
13949 * {axis: "y", end: 50, class: "regionY"}
13950 * ]);
13951 */
13952
13953var api_region_regions = function (_regions) {
13954 var $$ = this.internal,
13955 config = $$.config;
13956 return _regions ? (config.regions = _regions, $$.redrawWithoutRescale(), _regions) : config.regions;
13957};
13958
13959extend(api_region_regions, {
13960 /**
13961 * Add new region.<br><br>
13962 * This API adds new region instead of replacing like regions.
13963 * @method regions․add
13964 * @instance
13965 * @memberof Chart
13966 * @param {Array|Object} regions New region will be added. The format of this argument is the same as regions and it's possible to give an Object if only one region will be added.
13967 * @return {Array} regions
13968 * @example
13969 * // Add a new region
13970 * chart.regions.add(
13971 * {axis: "x", start: 5, class: "regionX"}
13972 * );
13973 *
13974 * // Add new regions
13975 * chart.regions.add([
13976 * {axis: "x", start: 5, class: "regionX"},
13977 * {axis: "y", end: 50, class: "regionY"}
13978 *]);
13979 */
13980 add: function add(regions) {
13981 var $$ = this.internal,
13982 config = $$.config;
13983 return regions ? (config.regions = config.regions.concat(regions), $$.redrawWithoutRescale(), config.regions) : config.regions;
13984 },
13985
13986 /**
13987 * Remove regions.<br><br>
13988 * This API removes regions.
13989 * @method regions․remove
13990 * @instance
13991 * @memberof Chart
13992 * @param {Object} regions This argument should include classes. If classes is given, the regions that have one of the specified classes will be removed. If args is not given, all of regions will be removed.
13993 * @return {Array} regions Removed regions
13994 * @example
13995 * // regions that have 'region-A' or 'region-B' will be removed.
13996 * chart.regions.remove({
13997 * classes: [
13998 * "region-A", "region-B"
13999 * ]
14000 * });
14001 *
14002 * // all of regions will be removed.
14003 * chart.regions.remove();
14004 */
14005 remove: function remove(optionsValue) {
14006 var $$ = this.internal,
14007 config = $$.config,
14008 options = optionsValue || {},
14009 duration = getOption(options, "duration", config.transition_duration),
14010 classes = getOption(options, "classes", [config_classes.region]),
14011 regions = $$.main.select(".".concat(config_classes.regions)).selectAll(classes.map(function (c) {
14012 return ".".concat(c);
14013 }));
14014 return (duration ? regions.transition().duration(duration) : regions).style("opacity", "0").remove(), regions = config.regions, Object.keys(options).length ? (regions = regions.filter(function (region) {
14015 var found = !1;
14016 return !region["class"] || (region["class"].split(" ").forEach(function (c) {
14017 classes.indexOf(c) >= 0 && (found = !0);
14018 }), !found);
14019 }), config.regions = regions) : config.regions = [], regions;
14020 }
14021}), extend(Chart_Chart.prototype, {
14022 regions: api_region_regions
14023});
14024// CONCATENATED MODULE: ./src/api/api.data.js
14025/**
14026 * Copyright (c) 2017 ~ present NAVER Corp.
14027 * billboard.js project is licensed under the MIT license
14028 */
14029
14030
14031/**
14032 * Get data loaded in the chart.
14033 * @method data
14034 * @instance
14035 * @memberof Chart
14036 * @param {String|Array} targetIds If this argument is given, this API returns the specified target data. If this argument is not given, all of data will be returned.
14037 * @return {Array} Data objects
14038 * @example
14039 * // Get only data1 data
14040 * chart.data("data1");
14041 * // --> [{id: "data1", id_org: "data1", values: Array(6)}, ...]
14042 *
14043 * // Get data1 and data2 data
14044 * chart.data(["data1", "data2"]);
14045 *
14046 * // Get all data
14047 * chart.data();
14048 */
14049
14050var api_data_data = function (targetIds) {
14051 var targets = this.internal.data.targets;
14052
14053 if (!isUndefined(targetIds)) {
14054 var ids = isArray(targetIds) ? targetIds : [targetIds];
14055 return targets.filter(function (t) {
14056 return ids.some(function (v) {
14057 return v === t.id;
14058 });
14059 });
14060 }
14061
14062 return targets;
14063};
14064
14065extend(api_data_data, {
14066 /**
14067 * Get data shown in the chart.
14068 * @method data․shown
14069 * @instance
14070 * @memberof Chart
14071 * @param {String|Array} targetIds If this argument is given, this API filters the data with specified target ids. If this argument is not given, all shown data will be returned.
14072 * @return {Array} Data objects
14073 * @example
14074 * // Get shown data by filtering to include only data1 data
14075 * chart.data.shown("data1");
14076 * // --> [{id: "data1", id_org: "data1", values: Array(6)}, ...]
14077 *
14078 * // Get shown data by filtering to include data1 and data2 data
14079 * chart.data.shown(["data1", "data2"]);
14080 *
14081 * // Get all shown data
14082 * chart.data.shown();
14083 */
14084 shown: function shown(targetIds) {
14085 return this.internal.filterTargetsToShow(this.data(targetIds));
14086 },
14087
14088 /**
14089 * Get values of the data loaded in the chart.
14090 * @method data․values
14091 * @instance
14092 * @memberof Chart
14093 * @param {String|Array} targetIds This API returns the values of specified target. If this argument is not given, null will be retruned
14094 * @return {Array} Data values
14095 * @example
14096 * // Get data1 values
14097 * chart.data.values("data1");
14098 * // --> [10, 20, 30, 40]
14099 */
14100 values: function (targetId) {
14101 var flat = !(arguments.length > 1 && arguments[1] !== undefined) || arguments[1],
14102 values = null;
14103
14104 if (targetId) {
14105 var targets = this.data(targetId);
14106 targets && isArray(targets) && (values = [], targets.forEach(function (v) {
14107 var dataValue = v.values.map(function (d) {
14108 return d.value;
14109 });
14110 flat ? values = values.concat(dataValue) : values.push(dataValue);
14111 }));
14112 }
14113
14114 return values;
14115 },
14116
14117 /**
14118 * Get and set names of the data loaded in the chart.
14119 * @method data․names
14120 * @instance
14121 * @memberof Chart
14122 * @param {Object} names If this argument is given, the names of data will be updated. If not given, the current names will be returned. The format of this argument is the same as
14123 * @return {Object} Corresponding names according its key value, if specified names values.
14124 * @example
14125 * // Get current names
14126 * chart.data.names();
14127 * // --> {data1: "test1", data2: "test2"}
14128 *
14129 * // Update names
14130 * chart.data.names({
14131 * data1: "New Name 1",
14132 * data2: "New Name 2"
14133 *});
14134 */
14135 names: function names(_names) {
14136 return this.internal.clearLegendItemTextBoxCache(), this.internal.updateDataAttributes("names", _names);
14137 },
14138
14139 /**
14140 * Get and set colors of the data loaded in the chart.
14141 * @method data․colors
14142 * @instance
14143 * @memberof Chart
14144 * @param {Object} colors If this argument is given, the colors of data will be updated. If not given, the current colors will be returned. The format of this argument is the same as [data.colors](./Options.html#.data%25E2%2580%25A4colors).
14145 * @return {Object} Corresponding data color value according its key value.
14146 * @example
14147 * // Get current colors
14148 * chart.data.colors();
14149 * // --> {data1: "#00c73c", data2: "#fa7171"}
14150 *
14151 * // Update colors
14152 * chart.data.colors({
14153 * data1: "#FFFFFF",
14154 * data2: "#000000"
14155 * });
14156 */
14157 colors: function colors(_colors) {
14158 return this.internal.updateDataAttributes("colors", _colors);
14159 },
14160
14161 /**
14162 * Get and set axes of the data loaded in the chart.
14163 * - **NOTE:** If all data is related to one of the axes, the domain of axis without related data will be replaced by the domain from the axis with related data
14164 * @method data․axes
14165 * @instance
14166 * @memberof Chart
14167 * @param {Object} axes If this argument is given, the axes of data will be updated. If not given, the current axes will be returned. The format of this argument is the same as
14168 * @return {Object} Corresponding axes value for data, if specified axes value.
14169 * @example
14170 * // Get current axes
14171 * chart.data.axes();
14172 * // --> {data1: "y"}
14173 *
14174 * // Update axes
14175 * chart.data.axes({
14176 * data1: "y",
14177 * data2: "y2"
14178 * });
14179 */
14180 axes: function axes(_axes) {
14181 return this.internal.updateDataAttributes("axes", _axes);
14182 },
14183
14184 /**
14185 * Get the minimum data value bound to the chart
14186 * @method data․min
14187 * @instance
14188 * @memberof Chart
14189 * @return {Array} Data objects
14190 * @example
14191 * // Get current axes
14192 * chart.data.min();
14193 * // --> [{x: 0, value: 30, id: "data1", index: 0}, ...]
14194 */
14195 min: function min() {
14196 return this.internal.getMinMaxData().min;
14197 },
14198
14199 /**
14200 * Get the maximum data value bound to the chart
14201 * @method data․max
14202 * @instance
14203 * @memberof Chart
14204 * @return {Array} Data objects
14205 * @example
14206 * // Get current axes
14207 * chart.data.max();
14208 * // --> [{x: 3, value: 400, id: "data1", index: 3}, ...]
14209 */
14210 max: function max() {
14211 return this.internal.getMinMaxData().max;
14212 }
14213}), extend(Chart_Chart.prototype, {
14214 data: api_data_data
14215});
14216// CONCATENATED MODULE: ./src/api/api.category.js
14217/**
14218 * Copyright (c) 2017 ~ present NAVER Corp.
14219 * billboard.js project is licensed under the MIT license
14220 */
14221
14222
14223extend(Chart_Chart.prototype, {
14224 /**
14225 * Set specified category name on category axis.
14226 * @method category
14227 * @instance
14228 * @memberof Chart
14229 * @param {Number} i index of category to be changed
14230 * @param {String} category category value to be changed
14231 * @example
14232 * chart.category(2, "Category 3");
14233 */
14234 category: function category(i, _category) {
14235 var $$ = this.internal,
14236 config = $$.config;
14237 return arguments.length > 1 && (config.axis_x_categories[i] = _category, $$.redraw()), config.axis_x_categories[i];
14238 },
14239
14240 /**
14241 * Set category names on category axis.
14242 * @method categories
14243 * @instance
14244 * @memberof Chart
14245 * @param {Array} categories This must be an array that includes category names in string. If category names are included in the date by data.x option, this is not required.
14246 * @example
14247 * chart.categories([
14248 * "Category 1", "Category 2", ...
14249 * ]);
14250 */
14251 categories: function categories(_categories) {
14252 var $$ = this.internal,
14253 config = $$.config;
14254 return arguments.length ? (config.axis_x_categories = _categories, $$.redraw(), config.axis_x_categories) : config.axis_x_categories;
14255 }
14256});
14257// CONCATENATED MODULE: ./src/api/api.color.js
14258/**
14259 * Copyright (c) 2017 ~ present NAVER Corp.
14260 * billboard.js project is licensed under the MIT license
14261 */
14262
14263
14264extend(Chart_Chart.prototype, {
14265 /**
14266 * Get the color
14267 * @method color
14268 * @instance
14269 * @memberof Chart
14270 * @param {String} id id to get the color
14271 * @example
14272 * chart.color("data1");
14273 */
14274 color: function color(id) {
14275 return this.internal.color(id); // more patterns
14276 }
14277});
14278// CONCATENATED MODULE: ./src/api/api.x.js
14279/**
14280 * Copyright (c) 2017 ~ present NAVER Corp.
14281 * billboard.js project is licensed under the MIT license
14282 */
14283
14284
14285extend(Chart_Chart.prototype, {
14286 /**
14287 * Get and set x values for the chart.
14288 * @method x
14289 * @instance
14290 * @memberof Chart
14291 * @param {Array} x If x is given, x values of every target will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids.
14292 * @return {Object} xs
14293 * @example
14294 * // Get current x values
14295 * chart.x();
14296 *
14297 * // Update x values for all targets
14298 * chart.x([100, 200, 300, 400, ...]);
14299 */
14300 x: function x(_x) {
14301 var $$ = this.internal,
14302 isCategorized = $$.isCustomX() && $$.isCategorized();
14303 return isArray(_x) && (isCategorized ? $$.api.categories(_x) : ($$.updateTargetX($$.data.targets, _x), $$.redraw({
14304 withUpdateOrgXDomain: !0,
14305 withUpdateXDomain: !0
14306 }))), isCategorized ? $$.api.categories() : $$.data.xs;
14307 },
14308
14309 /**
14310 * Get and set x values for the chart.
14311 * @method xs
14312 * @instance
14313 * @memberof Chart
14314 * @param {Array} xs If xs is given, specified target's x values will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids.
14315 * @return {Object} xs
14316 * @example
14317 * // Get current x values
14318 * chart.xs();
14319 *
14320 * // Update x values for all targets
14321 * chart.xs({
14322 * data1: [10, 20, 30, 40, ...],
14323 * data2: [100, 200, 300, 400, ...]
14324 * });
14325 */
14326 xs: function xs(_xs) {
14327 var $$ = this.internal;
14328 return isObject(_xs) && ($$.updateTargetXs($$.data.targets, _xs), $$.redraw({
14329 withUpdateOrgXDomain: !0,
14330 withUpdateXDomain: !0
14331 })), $$.data.xs;
14332 }
14333});
14334// CONCATENATED MODULE: ./src/api/api.axis.js
14335/**
14336 * Copyright (c) 2017 ~ present NAVER Corp.
14337 * billboard.js project is licensed under the MIT license
14338 */
14339
14340
14341/**
14342 * Set the min/max value
14343 * @param {Chart} $$
14344 * @param {String} type
14345 * @param {Object} value
14346 * @return {undefined}
14347 * @private
14348 */
14349
14350var setMinMax = function ($$, type, value) {
14351 var config = $$.config,
14352 axisX = "axis_x_".concat(type),
14353 axisY = "axis_y_".concat(type),
14354 axisY2 = "axis_y2_".concat(type);
14355 return isDefined(value) && (isObjectType(value) ? (isValue(value.x) && (config[axisX] = value.x), isValue(value.y) && (config[axisY] = value.y), isValue(value.y2) && (config[axisY2] = value.y2)) : (config[axisY] = value, config[axisY2] = value), $$.redraw({
14356 withUpdateOrgXDomain: !0,
14357 withUpdateXDomain: !0
14358 })), undefined;
14359},
14360 api_axis_getMinMax = function ($$, type) {
14361 var config = $$.config;
14362 return {
14363 x: config["axis_x_".concat(type)],
14364 y: config["axis_y_".concat(type)],
14365 y2: config["axis_y2_".concat(type)]
14366 };
14367},
14368 api_axis_axis = extend(function () {}, {
14369 /**
14370 * Get and set axis labels.
14371 * @method axis․labels
14372 * @instance
14373 * @memberof Chart
14374 * @param {Object} labels specified axis' label to be updated.
14375 * @example
14376 * // Update axis' label
14377 * chart.axis.labels({
14378 * x: "New X Axis Label",
14379 * y: "New Y Axis Label"
14380 * });
14381 */
14382 labels: function labels(_labels) {
14383 var $$ = this.internal;
14384 arguments.length && (Object.keys(_labels).forEach(function (axisId) {
14385 $$.axis.setLabelText(axisId, _labels[axisId]);
14386 }), $$.axis.updateLabels());
14387 },
14388
14389 /**
14390 * Get and set axis min value.
14391 * @method axis․min
14392 * @instance
14393 * @memberof Chart
14394 * @param {Object} min If min is given, specified axis' min value will be updated.<br>
14395 * If no argument is given, the min values set on generating option for each axis will be returned.
14396 * If not set any min values on generation, it will return `undefined`.
14397 * @example
14398 * // Update axis' min
14399 * chart.axis.min({
14400 * x: -10,
14401 * y: 1000,
14402 * y2: 100
14403 * });
14404 */
14405 min: function min(_min) {
14406 var $$ = this.internal;
14407 return arguments.length ? setMinMax($$, "min", _min) : api_axis_getMinMax($$, "min");
14408 },
14409
14410 /**
14411 * Get and set axis max value.
14412 * @method axis․max
14413 * @instance
14414 * @memberof Chart
14415 * @param {Object} max If max is given, specified axis' max value will be updated.<br>
14416 * If no argument is given, the max values set on generating option for each axis will be returned.
14417 * If not set any max values on generation, it will return `undefined`.
14418 * @example
14419 * // Update axis' label
14420 * chart.axis.max({
14421 * x: 100,
14422 * y: 1000,
14423 * y2: 10000
14424 * });
14425 */
14426 max: function max(_max) {
14427 var $$ = this.internal;
14428 return arguments.length ? setMinMax($$, "max", _max) : api_axis_getMinMax($$, "max");
14429 },
14430
14431 /**
14432 * Get and set axis min and max value.
14433 * @method axis․range
14434 * @instance
14435 * @memberof Chart
14436 * @param {Object} range If range is given, specified axis' min and max value will be updated. If no argument is given, the current min and max values for each axis will be returned.
14437 * @example
14438 * // Update axis' label
14439 * chart.axis.range({
14440 * min: {
14441 * x: -10,
14442 * y: -1000,
14443 * y2: -10000
14444 * },
14445 * max: {
14446 * x: 100,
14447 * y: 1000,
14448 * y2: 10000
14449 * },
14450 * });
14451 */
14452 range: function range(_range) {
14453 var axis = this.axis;
14454 if (arguments.length) isDefined(_range.max) && axis.max(_range.max), isDefined(_range.min) && axis.min(_range.min);else return {
14455 max: axis.max(),
14456 min: axis.min()
14457 };
14458 return undefined;
14459 }
14460});
14461/**
14462 * Get the min/max value
14463 * @param {Chart} $$
14464 * @param {String} type
14465 * @return {{x, y, y2}}
14466 * @private
14467 */
14468
14469
14470extend(Chart_Chart.prototype, {
14471 axis: api_axis_axis
14472});
14473// CONCATENATED MODULE: ./src/api/api.legend.js
14474/**
14475 * Copyright (c) 2017 ~ present NAVER Corp.
14476 * billboard.js project is licensed under the MIT license
14477 */
14478
14479
14480/**
14481 * Define legend
14482 * @ignore
14483 */
14484
14485var legend = extend(function () {}, {
14486 /**
14487 * Show legend for each target.
14488 * @method legend․show
14489 * @instance
14490 * @memberof Chart
14491 * @param {String|Array} targetIds
14492 * - If targetIds is given, specified target's legend will be shown.
14493 * - If only one target is the candidate, String can be passed.
14494 * - If no argument is given, all of target's legend will be shown.
14495 * @example
14496 * // Show legend for data1.
14497 * chart.legend.show("data1");
14498 *
14499 * // Show legend for data1 and data2.
14500 * chart.legend.show(["data1", "data2"]);
14501 *
14502 * // Show all legend.
14503 * chart.legend.show();
14504 */
14505 show: function show(targetIds) {
14506 var $$ = this.internal;
14507 $$.showLegend($$.mapToTargetIds(targetIds)), $$.updateAndRedraw({
14508 withLegend: !0
14509 });
14510 },
14511
14512 /**
14513 * Hide legend for each target.
14514 * @method legend․hide
14515 * @instance
14516 * @memberof Chart
14517 * @param {String|Array} targetIds
14518 * - If targetIds is given, specified target's legend will be hidden.
14519 * - If only one target is the candidate, String can be passed.
14520 * - If no argument is given, all of target's legend will be hidden.
14521 * @example
14522 * // Hide legend for data1.
14523 * chart.legend.hide("data1");
14524 *
14525 * // Hide legend for data1 and data2.
14526 * chart.legend.hide(["data1", "data2"]);
14527 *
14528 * // Hide all legend.
14529 * chart.legend.hide();
14530 */
14531 hide: function hide(targetIds) {
14532 var $$ = this.internal;
14533 $$.hideLegend($$.mapToTargetIds(targetIds)), $$.updateAndRedraw({
14534 withLegend: !0
14535 });
14536 }
14537});
14538extend(Chart_Chart.prototype, {
14539 legend: legend
14540});
14541// CONCATENATED MODULE: ./src/api/api.chart.js
14542/**
14543 * Copyright (c) 2017 ~ present NAVER Corp.
14544 * billboard.js project is licensed under the MIT license
14545 */
14546
14547
14548
14549extend(Chart_Chart.prototype, {
14550 /**
14551 * Resize the chart.
14552 * @method resize
14553 * @instance
14554 * @memberof Chart
14555 * @param {Object} size This argument should include width and height in pixels.
14556 * @example
14557 * // Resize to 640x480
14558 * chart.resize({
14559 * width: 640,
14560 * height: 480
14561 * });
14562 */
14563 resize: function resize(size) {
14564 var $$ = this.internal,
14565 config = $$.config;
14566 $$.rendered && (config.size_width = size ? size.width : null, config.size_height = size ? size.height : null, this.flush(!1, !0), $$.resizeFunction());
14567 },
14568
14569 /**
14570 * Force to redraw.
14571 * @method flush
14572 * @instance
14573 * @memberof Chart
14574 * @param {Boolean} [soft] For soft redraw.
14575 * @example
14576 * chart.flush();
14577 *
14578 * // for soft redraw
14579 * chart.flush(true);
14580 */
14581 flush: function flush(soft, _isFromResize) {
14582 var $$ = this.internal;
14583 $$.rendered ? (_isFromResize ? $$.brush && $$.brush.updateResize() : $$.axis && $$.axis.setOrient(), $$.zoomScale = null, soft ? $$.redraw({
14584 withTransform: !0,
14585 withUpdateXDomain: !0,
14586 withUpdateOrgXDomain: !0,
14587 withLegend: !0
14588 }) : $$.updateAndRedraw({
14589 withLegend: !0,
14590 withTransition: !1,
14591 withTransitionForTransform: !1
14592 })) : $$.initToRender(!0);
14593 },
14594
14595 /**
14596 * Reset the chart object and remove element and events completely.
14597 * @method destroy
14598 * @instance
14599 * @memberof Chart
14600 * @example
14601 * chart.destroy();
14602 */
14603 destroy: function destroy() {
14604 var _this = this,
14605 $$ = this.internal;
14606
14607 return notEmpty($$) && ($$.callPluginHook("$willDestroy"), $$.charts.splice($$.charts.indexOf(this), 1), $$.svg.select("*").interrupt(), $$.generateResize.timeout && win.clearTimeout($$.generateResize.timeout), win.removeEventListener("resize", $$.resizeFunction), $$.selectChart.classed("bb", !1).html(""), Object.keys(this).forEach(function (key) {
14608 key === "internal" && Object.keys($$).forEach(function (k) {
14609 $$[k] = null;
14610 }), _this[key] = null, delete _this[key];
14611 })), null;
14612 },
14613
14614 /**
14615 * Get or set single config option value.
14616 * @method config
14617 * @instance
14618 * @memberof Chart
14619 * @param {String} name The option key name.
14620 * @param {*} [value] The value accepted for indicated option.
14621 * @param {Boolean} [redraw] Set to redraw with the new option changes.
14622 * - **NOTE:** Doesn't guarantee work in all circumstances. It can be applied for limited options only.
14623 * @example
14624 * // Getter
14625 * chart.config("gauge.max");
14626 *
14627 * // Setter
14628 * chart.config("gauge.max", 100);
14629 *
14630 * // Setter & redraw with the new option
14631 * chart.config("gauge.max", 100, true);
14632 */
14633 config: function config(name, value, redraw) {
14634 var res,
14635 $$ = this.internal,
14636 key = name && name.replace(/\./g, "_");
14637 return key in $$.config && (isDefined(value) ? ($$.config[key] = value, res = value, redraw && this.flush()) : res = $$.config[key]), res;
14638 }
14639});
14640// CONCATENATED MODULE: ./src/api/api.tooltip.js
14641/**
14642 * Copyright (c) 2017 ~ present NAVER Corp.
14643 * billboard.js project is licensed under the MIT license
14644 */
14645
14646
14647/**
14648 * Define tooltip
14649 * @ignore
14650 */
14651
14652var api_tooltip_tooltip = extend(function () {}, {
14653 /**
14654 * Show tooltip
14655 * @method tooltip․show
14656 * @instance
14657 * @memberof Chart
14658 * @param {Object} args The object can consist with following members:<br>
14659 *
14660 * | Key | Type | Description |
14661 * | --- | --- | --- |
14662 * | index | Number | Determine focus by index |
14663 * | x | Number &vert; Date | Determine focus by x Axis index |
14664 * | mouse | Array | Determine x and y coordinate value relative the targeted '.bb-event-rect' x Axis.<br>It should be used along with `data`, `index` or `x` value. The default value is set as `[0,0]` |
14665 * | data | Object | When [data.xs](Options.html#.data%25E2%2580%25A4xs) option is used or [tooltip.grouped](Options.html#.tooltip) set to 'false', `should be used giving this param`.<br><br>**Key:**<br>- x {Number &verbar; Date}: x Axis value<br>- index {Number}: x Axis index (useless for data.xs)<br>- id {String}: data id<br>- value {Number}: The corresponding value for tooltip. |
14666 *
14667 * @example
14668 * // show the 2nd x Axis coordinate tooltip
14669 * chart.tooltip.show({
14670 * index: 1
14671 * });
14672 *
14673 * // show tooltip for the 3rd x Axis in x:50 and y:100 coordinate of '.bb-event-rect' of the x Axis.
14674 * chart.tooltip.show({
14675 * x: 2,
14676 * mouse: [50, 100]
14677 * });
14678 *
14679 * // show tooltip for timeseries x axis
14680 * chart.tooltip.show({
14681 * x: new Date("2018-01-02 00:00")
14682 * });
14683 *
14684 * // when data.xs is used
14685 * chart.tooltip.show({
14686 * data: {
14687 * x: 3, // x Axis value
14688 * id: "data1", // data id
14689 * value: 500 // data value
14690 * }
14691 * });
14692 *
14693 * // when data.xs isn't used, but tooltip.grouped=false is set
14694 * chart.tooltip.show({
14695 * data: {
14696 * index: 3, // or 'x' key value
14697 * id: "data1", // data id
14698 * value: 500 // data value
14699 * }
14700 * });
14701 */
14702 show: function show() {
14703 var index,
14704 mouse,
14705 args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
14706 $$ = this.internal;
14707
14708 // determine focus data
14709 if (args.mouse && (mouse = args.mouse), args.data) {
14710 var y = $$.getYScale(args.data.id)(args.data.value);
14711 $$.isMultipleX() ? mouse = [$$.x(args.data.x), y] : (!$$.config.tooltip_grouped && (mouse = [0, y]), index = isValue(args.data.index) ? args.data.index : $$.getIndexByX(args.data.x));
14712 } else isDefined(args.x) ? index = $$.getIndexByX(args.x) : isDefined(args.index) && (index = args.index); // emulate events to show
14713
14714
14715 ($$.inputType === "mouse" ? ["mouseover", "mousemove"] : ["touchstart"]).forEach(function (eventName) {
14716 $$.dispatchEvent(eventName, index, mouse);
14717 });
14718 },
14719
14720 /**
14721 * Hide tooltip
14722 * @method tooltip․hide
14723 * @instance
14724 * @memberof Chart
14725 */
14726 hide: function hide() {
14727 var $$ = this.internal; // reset last touch point index
14728
14729 $$.inputType === "touch" && $$.callOverOutForTouch(), $$.hideTooltip(!0), $$.hideGridFocus(), $$.unexpandCircles(), $$.unexpandBars();
14730 }
14731});
14732extend(Chart_Chart.prototype, {
14733 tooltip: api_tooltip_tooltip
14734});
14735// CONCATENATED MODULE: ./src/api/api.export.js
14736/**
14737 * Copyright (c) 2017 ~ present NAVER Corp.
14738 * billboard.js project is licensed under the MIT license
14739 */
14740
14741
14742
14743
14744/**
14745 * Encode to base64
14746 * @param {String} str
14747 * @return {String}
14748 * @private
14749 * @see https://developer.mozilla.org/ko/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
14750 */
14751
14752var b64EncodeUnicode = function (str) {
14753 return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p) {
14754 return String.fromCharCode("0x".concat(p));
14755 }));
14756},
14757 nodeToSvgDataUrl = function (node, size) {
14758 var serializer = new XMLSerializer(),
14759 clone = node.cloneNode(!0),
14760 cssText = getCssRules(toArray(browser_doc.styleSheets)).filter(function (r) {
14761 return r.cssText;
14762 }).map(function (r) {
14763 return r.cssText;
14764 });
14765 clone.setAttribute("xmlns", external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["namespaces"].xhtml);
14766 var nodeXml = serializer.serializeToString(clone),
14767 style = browser_doc.createElement("style"); // escape css for XML
14768
14769 style.appendChild(browser_doc.createTextNode(cssText.join("\n")));
14770 var styleXml = serializer.serializeToString(style),
14771 dataStr = "<svg xmlns=\"".concat(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["namespaces"].svg, "\" width=\"").concat(size.width, "\" height=\"").concat(size.height, "\">\n\t\t\t<foreignObject width=\"100%\" height=\"100%\">\n\t\t\t\t").concat(styleXml, "\n\t\t\t\t").concat(nodeXml.replace(/(url\()[^#]+/g, "$1"), "\n\t\t\t</foreignObject></svg>").replace("/\n/g", "%0A"); // foreignObject not supported in IE11 and below
14772 // https://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx
14773
14774 return "data:image/svg+xml;base64,".concat(b64EncodeUnicode(dataStr));
14775};
14776/**
14777 * Convert svg node to data url
14778 * @param {HTMLElement} node
14779 * @return {String}
14780 * @private
14781 */
14782
14783
14784extend(Chart_Chart.prototype, {
14785 /**
14786 * Export chart as an image.
14787 * - **NOTE:**
14788 * - IE11 and below not work properly due to the lack of the feature(<a href="https://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx">foreignObject</a>) support
14789 * - The basic CSS file(ex. billboard.css) should be at same domain as API call context to get correct styled export image.
14790 * @method export
14791 * @instance
14792 * @memberof Chart
14793 * @param {String} [mimeType=image/png] The desired output image format. (ex. 'image/png' for png, 'image/jpeg' for jpeg format)
14794 * @param {Function} [callback] The callback to be invoked when export is ready.
14795 * @return {String} dataURI
14796 * @example
14797 * chart.export();
14798 * // --> "data:image/svg+xml;base64,PHN..."
14799 *
14800 * // Initialize the download automatically
14801 * chart.export("image/png", dataUrl => {
14802 * const link = document.createElement("a");
14803 *
14804 * link.download = `${Date.now()}.png`;
14805 * link.href = dataUrl;
14806 * link.innerHTML = "Download chart as image";
14807 *
14808 * document.body.appendChild(link);
14809 * });
14810 */
14811 "export": function _export(mimeType, callback) {
14812 var $$ = this.internal,
14813 size = {
14814 width: $$.currentWidth,
14815 height: $$.currentHeight
14816 },
14817 svgDataUrl = nodeToSvgDataUrl(this.element, size);
14818
14819 if (isFunction(callback)) {
14820 var img = new Image();
14821 img.crosssOrigin = "Anonymous", img.onload = function () {
14822 var canvas = browser_doc.createElement("canvas"),
14823 ctx = canvas.getContext("2d");
14824 canvas.width = size.width, canvas.height = size.height, ctx.drawImage(img, 0, 0), callback(canvas.toDataURL(mimeType));
14825 }, img.src = svgDataUrl;
14826 }
14827
14828 return svgDataUrl;
14829 }
14830});
14831// CONCATENATED MODULE: ./src/core.js
14832/**
14833 * Copyright (c) 2017 ~ present NAVER Corp.
14834 * billboard project is licensed under the MIT license
14835 */
14836
14837
14838
14839
14840
14841
14842
14843
14844
14845
14846
14847
14848
14849
14850
14851
14852
14853
14854
14855
14856
14857
14858
14859
14860
14861
14862
14863
14864
14865
14866
14867
14868
14869
14870
14871
14872
14873
14874
14875
14876
14877
14878
14879
14880
14881
14882
14883
14884
14885
14886
14887
14888
14889
14890
14891var _defaults = {},
14892 bb = {
14893 /**
14894 * Version information
14895 * @property {String} version version
14896 * @example
14897 * bb.version; // "1.0.0"
14898 * @memberof bb
14899 */
14900 version: "1.12.1",
14901
14902 /**
14903 * Generate chart
14904 * @param {Options} options chart options
14905 * @memberof bb
14906 * @return {Chart}
14907 * @see {@link Options} for different generation options
14908 * @see {@link Chart} for different methods API
14909 * @example
14910 * <!-- chart holder -->
14911 * <div id="LineChart"></div>
14912 * @example
14913 * // generate chart with options
14914 * var chart = bb.generate({
14915 * "bindto": "#LineChart"
14916 * "data": {
14917 * "columns": [
14918 * ["data1", 30, 200, 100, 400, 150, 250],
14919 * ["data2", 50, 20, 10, 40, 15, 25]
14920 * ]
14921 * }
14922 * });
14923 *
14924 * // call some API
14925 * // ex) get the data of 'data1'
14926 * chart.data("data1");
14927 */
14928 generate: function generate(config) {
14929 var options = mergeObj({}, _defaults, config),
14930 inst = new Chart_Chart(options);
14931 return inst.internal.charts = this.instance, this.instance.push(inst), inst;
14932 },
14933
14934 /**
14935 * Set or get global default options.
14936 * - **NOTE:**
14937 * - The options values settings are valid within page context only.
14938 * - If is called multiple times, will override the last value.
14939 * @param {Options} options chart options
14940 * @memberof bb
14941 * @return {Options}
14942 * @see {@link Options}
14943 * @example
14944 * // Set same option value as for `.generate()`
14945 * bb.defaults({
14946 * data: {
14947 * type: "bar"
14948 * }
14949 * });
14950 *
14951 * bb.defaults(); // {data:{type: "bar"}}
14952 *
14953 * // data.type defaults to 'bar'
14954 * var chart = bb.generate({ ... });
14955 */
14956 defaults: function defaults(options) {
14957 return isObject(options) && (_defaults = options), _defaults;
14958 },
14959
14960 /**
14961 * An array containing instance created
14962 * @property {Array} instance instance array
14963 * @example
14964 * // generate charts
14965 * var chart1 = bb.generate(...);
14966 * var chart2 = bb.generate(...);
14967 *
14968 * bb.instance; // [ chart1, chart2, ... ]
14969 * @memberof bb
14970 */
14971 instance: [],
14972
14973 /**
14974 * Namespace for plugins
14975 * @property {Object} plugin plugin namespace
14976 * @example
14977 * // Stanford diagram plugin
14978 * bb.plugin.stanford;
14979 * @memberof bb
14980 */
14981 plugin: {},
14982
14983 /**
14984 * Internal chart object
14985 * @private
14986 */
14987 chart: {
14988 fn: Chart_Chart.prototype,
14989 internal: {
14990 fn: ChartInternal_ChartInternal.prototype,
14991 axis: {
14992 fn: Axis_Axis.prototype
14993 }
14994 }
14995 }
14996};
14997/**
14998 * @namespace bb
14999 * @version 1.12.1
15000 */
15001
15002
15003/* harmony default export */ var core = __webpack_exports__["default"] = (bb);
15004
15005/***/ })
15006/******/ ]);
15007});
15008//# sourceMappingURL=billboard.js.map
\No newline at end of file