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 * https://naver.github.io/billboard.js/ 7 * 8 * @version 3.10.3 9 */ 10(function webpackUniversalModuleDefinition(root, factory) { 11 if(typeof exports === 'object' && typeof module === 'object') 12 module.exports = factory(require("d3-axis"), require("d3-brush"), require("d3-drag"), require("d3-dsv"), require("d3-ease"), require("d3-hierarchy"), require("d3-interpolate"), require("d3-scale"), require("d3-selection"), require("d3-shape"), require("d3-time-format"), require("d3-transition"), require("d3-zoom")); 13 else if(typeof define === 'function' && define.amd) 14 define(["d3-axis", "d3-brush", "d3-drag", "d3-dsv", "d3-ease", "d3-hierarchy", "d3-interpolate", "d3-scale", "d3-selection", "d3-shape", "d3-time-format", "d3-transition", "d3-zoom"], factory); 15 else { 16 var a = typeof exports === 'object' ? factory(require("d3-axis"), require("d3-brush"), require("d3-drag"), require("d3-dsv"), require("d3-ease"), require("d3-hierarchy"), require("d3-interpolate"), require("d3-scale"), require("d3-selection"), require("d3-shape"), require("d3-time-format"), require("d3-transition"), require("d3-zoom")) : factory(root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"]); 17 for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; 18 } 19})(this, function(__WEBPACK_EXTERNAL_MODULE__10__, __WEBPACK_EXTERNAL_MODULE__3__, __WEBPACK_EXTERNAL_MODULE__7__, __WEBPACK_EXTERNAL_MODULE__5__, __WEBPACK_EXTERNAL_MODULE__11__, __WEBPACK_EXTERNAL_MODULE__13__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__6__, __WEBPACK_EXTERNAL_MODULE__2__, __WEBPACK_EXTERNAL_MODULE__9__, __WEBPACK_EXTERNAL_MODULE__4__, __WEBPACK_EXTERNAL_MODULE__8__, __WEBPACK_EXTERNAL_MODULE__14__) { 20return /******/ (function() { // webpackBootstrap 21/******/ "use strict"; 22/******/ var __webpack_modules__ = ([ 23/* 0 */, 24/* 1 */, 25/* 2 */ 26/***/ (function(module) { 27 28module.exports = __WEBPACK_EXTERNAL_MODULE__2__; 29 30/***/ }), 31/* 3 */ 32/***/ (function(module) { 33 34module.exports = __WEBPACK_EXTERNAL_MODULE__3__; 35 36/***/ }), 37/* 4 */ 38/***/ (function(module) { 39 40module.exports = __WEBPACK_EXTERNAL_MODULE__4__; 41 42/***/ }), 43/* 5 */ 44/***/ (function(module) { 45 46module.exports = __WEBPACK_EXTERNAL_MODULE__5__; 47 48/***/ }), 49/* 6 */ 50/***/ (function(module) { 51 52module.exports = __WEBPACK_EXTERNAL_MODULE__6__; 53 54/***/ }), 55/* 7 */ 56/***/ (function(module) { 57 58module.exports = __WEBPACK_EXTERNAL_MODULE__7__; 59 60/***/ }), 61/* 8 */ 62/***/ (function(module) { 63 64module.exports = __WEBPACK_EXTERNAL_MODULE__8__; 65 66/***/ }), 67/* 9 */ 68/***/ (function(module) { 69 70module.exports = __WEBPACK_EXTERNAL_MODULE__9__; 71 72/***/ }), 73/* 10 */ 74/***/ (function(module) { 75 76module.exports = __WEBPACK_EXTERNAL_MODULE__10__; 77 78/***/ }), 79/* 11 */ 80/***/ (function(module) { 81 82module.exports = __WEBPACK_EXTERNAL_MODULE__11__; 83 84/***/ }), 85/* 12 */ 86/***/ (function(module) { 87 88module.exports = __WEBPACK_EXTERNAL_MODULE__12__; 89 90/***/ }), 91/* 13 */ 92/***/ (function(module) { 93 94module.exports = __WEBPACK_EXTERNAL_MODULE__13__; 95 96/***/ }), 97/* 14 */ 98/***/ (function(module) { 99 100module.exports = __WEBPACK_EXTERNAL_MODULE__14__; 101 102/***/ }) 103/******/ ]); 104/************************************************************************/ 105/******/ // The module cache 106/******/ var __webpack_module_cache__ = {}; 107/******/ 108/******/ // The require function 109/******/ function __webpack_require__(moduleId) { 110/******/ // Check if module is in cache 111/******/ var cachedModule = __webpack_module_cache__[moduleId]; 112/******/ if (cachedModule !== undefined) { 113/******/ return cachedModule.exports; 114/******/ } 115/******/ // Create a new module (and put it into the cache) 116/******/ var module = __webpack_module_cache__[moduleId] = { 117/******/ // no module.id needed 118/******/ // no module.loaded needed 119/******/ exports: {} 120/******/ }; 121/******/ 122/******/ // Execute the module function 123/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 124/******/ 125/******/ // Return the exports of the module 126/******/ return module.exports; 127/******/ } 128/******/ 129/************************************************************************/ 130/******/ /* webpack/runtime/define property getters */ 131/******/ !function() { 132/******/ // define getter functions for harmony exports 133/******/ __webpack_require__.d = function(exports, definition) { 134/******/ for(var key in definition) { 135/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 136/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 137/******/ } 138/******/ } 139/******/ }; 140/******/ }(); 141/******/ 142/******/ /* webpack/runtime/hasOwnProperty shorthand */ 143/******/ !function() { 144/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } 145/******/ }(); 146/******/ 147/******/ /* webpack/runtime/make namespace object */ 148/******/ !function() { 149/******/ // define __esModule on exports 150/******/ __webpack_require__.r = function(exports) { 151/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 152/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 153/******/ } 154/******/ Object.defineProperty(exports, '__esModule', { value: true }); 155/******/ }; 156/******/ }(); 157/******/ 158/************************************************************************/ 159var __webpack_exports__ = {}; 160// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules. 161!function() { 162// extracted by mini-css-extract-plugin 163 164}(); 165// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules. 166!function() { 167// ESM COMPAT FLAG 168__webpack_require__.r(__webpack_exports__); 169 170// EXPORTS 171__webpack_require__.d(__webpack_exports__, { 172 bb: function() { return /* reexport */ bb; }, 173 "default": function() { return /* reexport */ bb; } 174}); 175 176// NAMESPACE OBJECT: ./src/config/resolver/shape.ts 177var resolver_shape_namespaceObject = {}; 178__webpack_require__.r(resolver_shape_namespaceObject); 179__webpack_require__.d(resolver_shape_namespaceObject, { 180 area: function() { return _area; }, 181 areaLineRange: function() { return areaLineRange; },
182 areaSpline: function() { return areaSpline; }, 183 areaSplineRange: function() { return areaSplineRange; }, 184 areaStep: function() { return areaStep; }, 185 bar: function() { return resolver_shape_bar; }, 186 bubble: function() { return resolver_shape_bubble; }, 187 candlestick: function() { return resolver_shape_candlestick; }, 188 donut: function() { return shape_donut; }, 189 gauge: function() { return resolver_shape_gauge; }, 190 line: function() { return resolver_shape_line; }, 191 pie: function() { return shape_pie; }, 192 polar: function() { return resolver_shape_polar; }, 193 radar: function() { return resolver_shape_radar; }, 194 scatter: function() { return shape_scatter; }, 195 spline: function() { return shape_spline; }, 196 step: function() { return step; }, 197 treemap: function() { return resolver_shape_treemap; } 198}); 199 200// NAMESPACE OBJECT: ./src/config/resolver/interaction.ts 201var resolver_interaction_namespaceObject = {}; 202__webpack_require__.r(resolver_interaction_namespaceObject); 203__webpack_require__.d(resolver_interaction_namespaceObject, { 204 selection: function() { return _selectionModule; }, 205 subchart: function() { return subchartModule; }, 206 zoom: function() { return zoomModule; } 207}); 208 209;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/newArrowCheck.js 210function _newArrowCheck(innerThis, boundThis) { 211 if (innerThis !== boundThis) { 212 throw new TypeError("Cannot instantiate an arrow function"); 213 } 214} 215// EXTERNAL MODULE: external {"commonjs":"d3-time-format","commonjs2":"d3-time-format","amd":"d3-time-format","root":"d3"} 216var external_commonjs_d3_time_format_commonjs2_d3_time_format_amd_d3_time_format_root_d3_ = __webpack_require__(4); 217// EXTERNAL MODULE: external {"commonjs":"d3-selection","commonjs2":"d3-selection","amd":"d3-selection","root":"d3"} 218var external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_ = __webpack_require__(2); 219;// CONCATENATED MODULE: ./src/module/browser.ts 220 221/** 222 * Copyright (c) 2017 ~ present NAVER Corp. 223 * billboard.js project is licensed under the MIT license 224 */ 225/** 226 * Window object 227 * @private 228 */ 229/* eslint-disable no-new-func, no-undef */ 230 231 232/** 233 * Get global object 234 * @returns {object} window object 235 * @private 236 */ 237function getGlobal() { 238 return typeof globalThis === "object" && globalThis !== null && globalThis.Object === Object && globalThis || typeof global === "object" && global !== null && global.Object === Object && global || typeof self === "object" && self !== null && self.Object === Object && self || Function("return this")(); 239} 240 241/** 242 * Get fallback object 243 * @param {object} w global object 244 * @returns {Array} fallback object array 245 * @private 246 */ 247function getFallback(w) { 248 var _this = this; 249 const hasRAF = typeof (w == null ? void 0 : w.requestAnimationFrame) === "function" && typeof (w == null ? void 0 : w.cancelAnimationFrame) === "function", 250 hasRIC = typeof (w == null ? void 0 : w.requestIdleCallback) === "function" && typeof (w == null ? void 0 : w.cancelIdleCallback) === "function", 251 request = function (cb) { 252 _newArrowCheck(this, _this); 253 return setTimeout(cb, 1); 254 }.bind(this), 255 cancel = function (id) { 256 _newArrowCheck(this, _this); 257 return clearTimeout(id); 258 }.bind(this); 259 return [hasRAF ? w.requestAnimationFrame : request, hasRAF ? w.cancelAnimationFrame : cancel, hasRIC ? w.requestIdleCallback : request, hasRIC ? w.cancelIdleCallback : cancel]; 260} 261const win = getGlobal(), 262 browser_doc = win == null ? void 0 : win.document, 263 _getFallback = getFallback(win), 264 requestAnimationFrame = _getFallback[0], 265 cancelAnimationFrame = _getFallback[1], 266 requestIdleCallback = _getFallback[2], 267 cancelIdleCallback = _getFallback[3]; 268;// CONCATENATED MODULE: ./src/config/const.ts 269/** 270 * Copyright (c) 2017 ~ present NAVER Corp. 271 * billboard.js project is licensed under the MIT license 272 */ 273/** 274 * Chart type constant 275 * @private 276 */ 277const TYPE = { 278 AREA: "area", 279 AREA_LINE_RANGE: "area-line-range", 280 AREA_SPLINE: "area-spline", 281 AREA_SPLINE_RANGE: "area-spline-range", 282 AREA_STEP: "area-step", 283 BAR: "bar", 284 BUBBLE: "bubble", 285 CANDLESTICK: "candlestick", 286 DONUT: "donut", 287 GAUGE: "gauge", 288 LINE: "line", 289 PIE: "pie", 290 POLAR: "polar", 291 RADAR: "radar", 292 SCATTER: "scatter", 293 SPLINE: "spline", 294 STEP: "step", 295 TREEMAP: "treemap" 296}; 297 298/**
299 * Chart type module and its method from ChartInternal class, needed to be initialized. 300 * @private 301 */ 302const TYPE_METHOD_NEEDED = { 303 AREA: "initArea", 304 AREA_LINE_RANGE: "initArea", 305 AREA_SPLINE: "initArea", 306 AREA_SPLINE_RANGE: "initArea", 307 AREA_STEP: "initArea", 308 BAR: "initBar", 309 BUBBLE: "initCircle", 310 CANDLESTICK: "initCandlestick", 311 DONUT: "initArc", 312 GAUGE: "initArc", 313 LINE: "initLine", 314 PIE: "initArc", 315 POLAR: "initPolar", 316 RADAR: "initCircle", 317 SCATTER: "initCircle", 318 SPLINE: "initLine", 319 STEP: "initLine", 320 TREEMAP: "initTreemap" 321}; 322 323/** 324 * chart types by category 325 * @private 326 */ 327const TYPE_BY_CATEGORY = { 328 Area: [TYPE.AREA, TYPE.AREA_SPLINE, TYPE.AREA_SPLINE_RANGE, TYPE.AREA_LINE_RANGE, TYPE.AREA_STEP], 329 AreaRange: [TYPE.AREA_SPLINE_RANGE, TYPE.AREA_LINE_RANGE], 330 Arc: [TYPE.PIE, TYPE.DONUT, TYPE.GAUGE, TYPE.POLAR, TYPE.RADAR], 331 Line: [TYPE.LINE, TYPE.SPLINE, TYPE.AREA, TYPE.AREA_SPLINE, TYPE.AREA_SPLINE_RANGE, TYPE.AREA_LINE_RANGE, TYPE.STEP, TYPE.AREA_STEP], 332 Step: [TYPE.STEP, TYPE.AREA_STEP], 333 Spline: [TYPE.SPLINE, TYPE.AREA_SPLINE, TYPE.AREA_SPLINE_RANGE] 334}; 335;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js 336function _typeof(o) { 337 "@babel/helpers - typeof"; 338 339 return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { 340 return typeof o; 341 } : function (o) { 342 return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; 343 }, _typeof(o); 344} 345;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPrimitive.js 346 347function _toPrimitive(input, hint) { 348 if (_typeof(input) !== "object" || input === null) return input; 349 var prim = input[Symbol.toPrimitive]; 350 if (prim !== undefined) { 351 var res = prim.call(input, hint || "default"); 352 if (_typeof(res) !== "object") return res; 353 throw new TypeError("@@toPrimitive must return a primitive value."); 354 } 355 return (hint === "string" ? String : Number)(input); 356} 357;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toPropertyKey.js 358 359 360function _toPropertyKey(arg) { 361 var key = _toPrimitive(arg, "string"); 362 return _typeof(key) === "symbol" ? key : String(key); 363} 364;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js 365 366function _defineProperty(obj, key, value) { 367 key = _toPropertyKey(key); 368 if (key in obj) { 369 Object.defineProperty(obj, key, { 370 value: value, 371 enumerable: true, 372 configurable: true, 373 writable: true 374 }); 375 } else { 376 obj[key] = value; 377 } 378 return obj; 379} 380// EXTERNAL MODULE: external {"commonjs":"d3-brush","commonjs2":"d3-brush","amd":"d3-brush","root":"d3"} 381var external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_ = __webpack_require__(3); 382;// CONCATENATED MODULE: ./src/module/util.ts 383 384 385var _this = undefined; 386function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 387function _objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 388/** 389 * Copyright (c) 2017 ~ present NAVER Corp. 390 * billboard.js project is licensed under the MIT license 391 * @ignore 392 */ 393 394 395 396 397const isValue = function (v) { 398 _newArrowCheck(this, _this); 399 return v || v === 0; 400 }.bind(undefined), 401 isFunction = function (v) { 402 _newArrowCheck(this, _this); 403 return typeof v === "function"; 404 }.bind(undefined), 405 isString = function (v) { 406 _newArrowCheck(this, _this); 407 return typeof v === "string"; 408 }.bind(undefined), 409 isNumber = function (v) { 410 _newArrowCheck(this, _this); 411 return typeof v === "number"; 412 }.bind(undefined), 413 isUndefined = function (v) { 414 _newArrowCheck(this, _this); 415 return typeof v === "undefined"; 416 }.bind(undefined), 417 isDefined = function (v) { 418 _newArrowCheck(this, _this); 419 return typeof v !== "undefined"; 420 }.bind(undefined), 421 isboolean = function (v) { 422 _newArrowCheck(this, _this); 423 return typeof v === "boolean"; 424 }.bind(undefined), 425 ceil10 = function (v) { 426 _newArrowCheck(this, _this); 427 return Math.ceil(v / 10) * 10; 428 }.bind(undefined), 429 asHalfPixel = function (n) { 430 _newArrowCheck(this, _this); 431 return Math.ceil(n) + .5; 432 }.bind(undefined), 433 diffDomain = function (d) { 434 _newArrowCheck(this, _this); 435 return d[1] - d[0]; 436 }.bind(undefined), 437 isObjectType = function (v) { 438 _newArrowCheck(this, _this); 439 return typeof v === "object"; 440 }.bind(undefined), 441 isEmpty = function (o) { 442 _newArrowCheck(this, _this); 443 return isUndefined(o) || o === null || isString(o) && o.length === 0 || isObjectType(o) && !(o instanceof Date) && Object.keys(o).length === 0 || isNumber(o) && isNaN(o); 444 }.bind(undefined), 445 notEmpty = function (o) { 446 _newArrowCheck(this, _this); 447 return !isEmpty(o); 448 }.bind(undefined), 449 isArray = function (arr) { 450 _newArrowCheck(this, _this); 451 return Array.isArray(arr); 452 }.bind(undefined), 453 isObject = function (obj) { 454 _newArrowCheck(this, _this); 455 return obj && !(obj != null && obj.nodeType) && isObjectType(obj) && !isArray(obj); 456 }.bind(undefined); 457/** 458 * Check if is array 459 * @param {Array} arr Data to be checked 460 * @returns {boolean} 461 * @private 462 */ 463/** 464 * Check if is object 465 * @param {object} obj Data to be checked 466 * @returns {boolean} 467 * @private 468 */ 469/** 470 * Get specified key value from object 471 * If default value is given, will return if given key value not found 472 * @param {object} options Source object 473 * @param {string} key Key value 474 * @param {*} defaultValue Default value 475 * @returns {*} 476 * @private 477 */ 478function getOption(options, key, defaultValue) { 479 return isDefined(options[key]) ? options[key] : defaultValue; 480} 481 482/** 483 * Check if value exist in the given object 484 * @param {object} dict Target object to be checked 485 * @param {*} value Value to be checked 486 * @returns {boolean} 487 * @private 488 */ 489function hasValue(dict, value) { 490 var _this2 = this; 491 let found = !1; 492 Object.keys(dict).forEach(function (key) { 493 _newArrowCheck(this, _this2); 494 return dict[key] === value && (found = !0); 495 }.bind(this)); 496 return found; 497} 498 499/** 500 * Call function with arguments 501 * @param {Function} fn Function to be called 502 * @param {*} thisArg "this" value for fn 503 * @param {*} args Arguments for fn 504 * @returns {boolean} true: fn is function, false: fn is not function 505 * @private 506 */ 507function callFn(fn, thisArg) { 508 const isFn = isFunction(fn); 509 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { 510 args[_key - 2] = arguments[_key]; 511 } 512 isFn && fn.call.apply(fn, [thisArg].concat(args)); 513 return isFn; 514} 515 516/** 517 * Call function after all transitions ends 518 * @param {d3.transition} transition Transition 519 * @param {Fucntion} cb Callback function 520 * @private 521 */ 522function endall(transition, cb) { 523 var _this3 = this; 524 let n = 0; 525 const end = function () { 526 for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 527 args[_key2] = arguments[_key2]; 528 } 529 --n || cb.apply.apply(cb, [this].concat(args)); 530 }; 531 532 // if is transition selection 533 if ("duration" in transition) { 534 transition.each(function () { 535 _newArrowCheck(this, _this3); 536 return ++n; 537 }.bind(this)).on("end", end); 538 } else { 539 ++n; 540 transition.call(end); 541 } 542} 543 544/** 545 * Replace tag sign to html entity 546 * @param {string} str Target string value 547 * @returns {string} 548 * @private 549 */ 550function sanitize(str) { 551 return isString(str) ? str.replace(/<(script|img)?/ig, "<").replace(/(script)?>/ig, ">") : str; 552} 553 554/** 555 * Set text value. If there's multiline add nodes. 556 * @param {d3Selection} node Text node 557 * @param {string} text Text value string 558 * @param {Array} dy dy value for multilined text 559 * @param {boolean} toMiddle To be alingned vertically middle 560 * @private 561 */ 562function setTextValue(node, text, dy, toMiddle) { 563 var _this4 = this; 564 if (dy === void 0) { 565 dy = [-1, 1]; 566 } 567 if (toMiddle === void 0) { 568 toMiddle = !1; 569 } 570 if (!node || !isString(text)) { 571 return; 572 } 573 if (text.indexOf("\n") === -1) { 574 node.text(text); 575 } else { 576 const diff = [node.text(), text].map(function (v) { 577 _newArrowCheck(this, _this4); 578 return v.replace(/[\s\n]/g, ""); 579 }.bind(this)); 580 if (diff[0] !== diff[1]) { 581 const multiline = text.split("\n"), 582 len = toMiddle ? multiline.length - 1 : 1; 583 // reset possible text 584 node.html(""); 585 multiline.forEach(function (v, i) { 586 _newArrowCheck(this, _this4); 587 node.append("tspan").attr("x", 0).attr("dy", (i === 0 ? dy[0] * len : dy[1]) + "em").text(v); 588 }.bind(this)); 589 } 590 } 591} 592 593/** 594 * Substitution of SVGPathSeg API polyfill 595 * @param {SVGGraphicsElement} path Target svg element 596 * @returns {Array} 597 * @private 598 */ 599function getRectSegList(path) { 600 /* 601 * seg1 ---------- seg2 602 * | | 603 * | | 604 * | | 605 * seg0 ---------- seg3 606 * */ 607 const _path$getBBox = path.getBBox(), 608 x = _path$getBBox.x, 609 y = _path$getBBox.y, 610 width = _path$getBBox.width, 611 height = _path$getBBox.height; 612 return [{ 613 x: x, 614 y: y + height 615 }, 616 // seg0 617 { 618 x: x, 619 y: y 620 }, 621 // seg1 622 { 623 x: x + width, 624 y: y 625 }, 626 // seg2 627 { 628 x: x + width, 629 y: y + height 630 } // seg3 631 ]; 632} 633 634/** 635 * Get svg bounding path box dimension 636 * @param {SVGGraphicsElement} path Target svg element 637 * @returns {object} 638 * @private 639 */ 640function getPathBox(path) { 641 const _path$getBoundingClie = path.getBoundingClientRect(), 642 width = _path$getBoundingClie.width, 643 height = _path$getBoundingClie.height, 644 items = getRectSegList(path), 645 x = items[0].x, 646 y = Math.min(items[0].y, items[1].y); 647 return { 648 x: x, 649 y: y, 650 width: width, 651 height: height 652 }; 653} 654 655/** 656 * Get event's current position coordinates 657 * @param {object} event Event object 658 * @param {SVGElement|HTMLElement} element Target element 659 * @returns {Array} [x, y] Coordinates x, y array 660 * @private 661 */ 662function getPointer(event, element) { 663 var _ref, 664 _this5 = this; 665 const touches = event && ((_ref = event.touches || event.sourceEvent && event.sourceEvent.touches) == null ? void 0 : _ref[0]); 666 let pointer = [0, 0]; 667 try { 668 pointer = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.pointer)(touches || event, element); 669 } catch (e) {} 670 return pointer.map(function (v) { 671 _newArrowCheck(this, _this5); 672 return isNaN(v) ? 0 : v; 673 }.bind(this)); 674} 675 676/** 677 * Return brush selection array 678 * @param {object} ctx Current instance 679 * @returns {d3.brushSelection} 680 * @private 681 */ 682function getBrushSelection(ctx) { 683 const event = ctx.event, 684 $el = ctx.$el, 685 main = $el.subchart.main || $el.main; 686 let selection; 687 688 // check from event 689 if (event && event.type === "brush") { 690 selection = event.selection; 691 // check from brush area selection 692 } else if (main && (selection = main.select(".bb-brush").node())) { 693 selection = (0,external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_.brushSelection)(selection); 694 } 695 return selection; 696} 697 698/** 699 * Get boundingClientRect. 700 * Cache the evaluated value once it was called. 701 * @param {HTMLElement} node Target element 702 * @returns {object} 703 * @private 704 */
705function getBoundingRect(node) { 706 const needEvaluate = !("rect" in node) || "rect" in node && node.hasAttribute("width") && node.rect.width !== +node.getAttribute("width"); 707 return needEvaluate ? node.rect = node.getBoundingClientRect() : node.rect; 708} 709 710/** 711 * Retrun random number 712 * @param {boolean} asStr Convert returned value as string 713 * @param {number} min Minimum value 714 * @param {number} max Maximum value 715 * @returns {number|string} 716 * @private 717 */ 718function getRandom(asStr, min, max) { 719 if (asStr === void 0) { 720 asStr = !0; 721 } 722 if (min === void 0) { 723 min = 0; 724 } 725 if (max === void 0) { 726 max = 1e4; 727 } 728 const crpt = win.crypto || win.msCrypto, 729 rand = crpt ? min + crpt.getRandomValues(new Uint32Array(1))[0] % (max - min + 1) : Math.floor(Math.random() * (max - min) + min); 730 return asStr ? rand + "" : rand; 731} 732 733/** 734 * Find index based on binary search 735 * @param {Array} arr Data array 736 * @param {number} v Target number to find 737 * @param {number} start Start index of data array 738 * @param {number} end End index of data arr 739 * @param {boolean} isRotated Weather is roted axis 740 * @returns {number} Index number 741 * @private 742 */ 743function findIndex(arr, v, start, end, isRotated) { 744 if (start > end) { 745 return -1; 746 } 747 const mid = Math.floor((start + end) / 2); 748 let _arr$mid = arr[mid], 749 x = _arr$mid.x, 750 _arr$mid$w = _arr$mid.w, 751 w = _arr$mid$w === void 0 ? 0 : _arr$mid$w; 752 if (isRotated) { 753 x = arr[mid].y; 754 w = arr[mid].h; 755 } 756 if (v >= x && v <= x + w) { 757 return mid; 758 } 759 return v < x ? findIndex(arr, v, start, mid - 1, isRotated) : findIndex(arr, v, mid + 1, end, isRotated); 760} 761 762/** 763 * Check if brush is empty 764 * @param {object} ctx Bursh context 765 * @returns {boolean} 766 * @private 767 */ 768function brushEmpty(ctx) { 769 const selection = getBrushSelection(ctx); 770 if (selection) { 771 // brush selected area 772 // two-dimensional: [[x0, y0], [x1, y1]] 773 // one-dimensional: [x0, x1] or [y0, y1] 774 return selection[0] === selection[1]; 775 } 776 return !0; 777} 778 779/** 780 * Deep copy object 781 * @param {object} objectN Source object 782 * @returns {object} Cloned object 783 * @private 784 */ 785function deepClone() { 786 var _this6 = this; 787 const _clone = function clone(v) { 788 _newArrowCheck(this, _this6); 789 if (isObject(v) && v.constructor) { 790 const r = new v.constructor(); 791 for (const k in v) { 792 r[k] = _clone(v[k]); 793 } 794 return r; 795 } 796 return v; 797 }.bind(this); 798 for (var _len3 = arguments.length, objectN = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { 799 objectN[_key3] = arguments[_key3]; 800 } 801 return objectN.map(function (v) { 802 _newArrowCheck(this, _this6); 803 return _clone(v); 804 }.bind(this)).reduce(function (a, c) { 805 _newArrowCheck(this, _this6); 806 return _objectSpread(_objectSpread({}, a), c); 807 }.bind(this)); 808} 809 810/** 811 * Extend target from source object 812 * @param {object} target Target object 813 * @param {object|Array} source Source object 814 * @returns {object} 815 * @private 816 */ 817function extend(target, source) { 818 var _this7 = this; 819 if (target === void 0) { 820 target = {}; 821 } 822 if (isArray(source)) { 823 source.forEach(function (v) { 824 _newArrowCheck(this, _this7); 825 return extend(target, v); 826 }.bind(this)); 827 } 828 829 // exclude name with only numbers 830 for (const p in source) { 831 if (/^\d+$/.test(p) || p in target) { 832 continue; 833 } 834 target[p] = source[p]; 835 } 836 return target; 837} 838 839/** 840 * Return first letter capitalized 841 * @param {string} str Target string 842 * @returns {string} capitalized string 843 * @private 844 */ 845const capitalize = function (str) { 846 _newArrowCheck(this, _this); 847 return str.charAt(0).toUpperCase() + str.slice(1); 848}.bind(undefined); 849 850/** 851 * Camelize from kebob style string 852 * @param {string} str Target string 853 * @param {string} separator Separator string 854 * @returns {string} camelized string 855 * @private 856 */ 857function camelize(str, separator) { 858 var _this8 = this; 859 if (separator === void 0) { 860 separator = "-"; 861 } 862 return str.split(separator).map(function (v, i) { 863 _newArrowCheck(this, _this8); 864 return i ? v.charAt(0).toUpperCase() + v.slice(1).toLowerCase() : v.toLowerCase(); 865 }.bind(this)).join(""); 866} 867 868/** 869 * Convert to array 870 * @param {object} v Target to be converted 871 * @returns {Array} 872 * @private 873 */ 874const toArray = function (v) { 875 _newArrowCheck(this, _this); 876 return [].slice.call(v); 877}.bind(undefined); 878 879/** 880 * Add CSS rules 881 * @param {object} style Style object 882 * @param {string} selector Selector string 883 * @param {Array} prop Prps arrary 884 * @returns {number} Newely added rule index 885 * @private 886 */ 887function addCssRules(style, selector, prop) { 888 var _this9 = this; 889 const rootSelctor = style.rootSelctor, 890 sheet = style.sheet, 891 getSelector = function (s) { 892 _newArrowCheck(this, _this9); 893 return s.replace(/\s?(bb-)/g, ".$1").replace(/\.+/g, "."); 894 }.bind(this), 895 rule = rootSelctor + " " + getSelector(selector) + " {" + prop.join(";") + "}"; 896 return sheet[sheet.insertRule ? "insertRule" : "addRule"](rule, sheet.cssRules.length); 897} 898 899/** 900 * Get css rules for specified stylesheets 901 * @param {Array} styleSheets The stylesheets to get the rules from 902 * @returns {Array} 903 * @private 904 */ 905function getCssRules(styleSheets) { 906 var _this10 = this; 907 let rules = [];
908 styleSheets.forEach(function (sheet) { 909 _newArrowCheck(this, _this10); 910 try { 911 if (sheet.cssRules && sheet.cssRules.length) { 912 rules = rules.concat(toArray(sheet.cssRules)); 913 } 914 } catch (e) { 915 var _window$console; 916 (_window$console = win.console) == null || _window$console.warn("Error while reading rules from " + sheet.href + ": " + e.toString()); 917 } 918 }.bind(this)); 919 return rules; 920} 921 922/** 923 * Gets the SVGMatrix of an SVGGElement 924 * @param {SVGElement} node Node element 925 * @returns {SVGMatrix} matrix 926 * @private 927 */ 928function getTranslation(node) { 929 const transform = node ? node.transform : null, 930 baseVal = transform && transform.baseVal; 931 return baseVal && baseVal.numberOfItems ? baseVal.getItem(0).matrix : { 932 a: 0, 933 b: 0, 934 c: 0, 935 d: 0, 936 e: 0, 937 f: 0 938 }; 939} 940 941/** 942 * Get unique value from array 943 * @param {Array} data Source data 944 * @returns {Array} Unique array value 945 * @private 946 */ 947function getUnique(data) { 948 var _this11 = this; 949 const isDate = data[0] instanceof Date, 950 d = (isDate ? data.map(Number) : data).filter(function (v, i, self) { 951 _newArrowCheck(this, _this11); 952 return self.indexOf(v) === i; 953 }.bind(this)); 954 return isDate ? d.map(function (v) { 955 _newArrowCheck(this, _this11); 956 return new Date(v); 957 }.bind(this)) : d; 958} 959 960/** 961 * Merge array 962 * @param {Array} arr Source array 963 * @returns {Array} 964 * @private 965 */ 966function mergeArray(arr) { 967 var _this12 = this; 968 return arr && arr.length ? arr.reduce(function (p, c) { 969 _newArrowCheck(this, _this12); 970 return p.concat(c); 971 }.bind(this)) : []; 972} 973 974/** 975 * Merge object returning new object 976 * @param {object} target Target object 977 * @param {object} objectN Source object 978 * @returns {object} merged target object 979 * @private 980 */ 981function mergeObj(target) { 982 for (var _this13 = this, _len4 = arguments.length, objectN = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) { 983 objectN[_key4 - 1] = arguments[_key4]; 984 } 985 if (!objectN.length || objectN.length === 1 && !objectN[0]) { 986 return target; 987 } 988 const source = objectN.shift(); 989 if (isObject(target) && isObject(source)) { 990 Object.keys(source).forEach(function (key) { 991 _newArrowCheck(this, _this13); 992 const value = source[key]; 993 if (isObject(value)) { 994 target[key] || (target[key] = {}); 995 target[key] = mergeObj(target[key], value); 996 } else { 997 target[key] = isArray(value) ? value.concat() : value; 998 } 999 }.bind(this)); 1000 } 1001 return mergeObj.apply(void 0, [target].concat(objectN)); 1002} 1003 1004/** 1005 * Sort value 1006 * @param {Array} data value to be sorted 1007 * @param {boolean} isAsc true: asc, false: desc 1008 * @returns {number|string|Date} sorted date 1009 * @private 1010 */ 1011function sortValue(data, isAsc) { 1012 var _this14 = this; 1013 if (isAsc === void 0) { 1014 isAsc = !0; 1015 } 1016 let fn; 1017 if (data[0] instanceof Date) { 1018 fn = isAsc ? function (a, b) { 1019 _newArrowCheck(this, _this14); 1020 return a - b; 1021 }.bind(this) : function (a, b) { 1022 _newArrowCheck(this, _this14); 1023 return b - a; 1024 }.bind(this); 1025 } else { 1026 if (isAsc && !data.every(isNaN)) { 1027 fn = function (a, b) { 1028 _newArrowCheck(this, _this14); 1029 return a - b; 1030 }.bind(this); 1031 } else if (!isAsc) { 1032 fn = function (a, b) { 1033 _newArrowCheck(this, _this14); 1034 return a > b && -1 || a < b && 1 || a === b && 0; 1035 }.bind(this); 1036 } 1037 } 1038 return data.concat().sort(fn); 1039} 1040 1041/** 1042 * Get min/max value 1043 * @param {string} type 'min' or 'max' 1044 * @param {Array} data Array data value 1045 * @returns {number|Date|undefined} 1046 * @private 1047 */ 1048function getMinMax(type, data) { 1049 var _this15 = this; 1050 let res = data.filter(function (v) { 1051 _newArrowCheck(this, _this15); 1052 return notEmpty(v); 1053 }.bind(this)); 1054 if (res.length) { 1055 if (isNumber(res[0])) { 1056 res = Math[type].apply(Math, res); 1057 } else if (res[0] instanceof Date) { 1058 res = sortValue(res, type === "min")[0]; 1059 } 1060 } else { 1061 res = undefined; 1062 } 1063 return res; 1064} 1065 1066/** 1067 * Get range 1068 * @param {number} start Start number 1069 * @param {number} end End number 1070 * @param {number} step Step number 1071 * @returns {Array} 1072 * @private 1073 */ 1074const getRange = function (start, end, step) { 1075 if (step === void 0) { 1076 step = 1; 1077 } 1078 _newArrowCheck(this, _this); 1079 const res = [], 1080 n = Math.max(0, Math.ceil((end - start) / step)) | 0; 1081 for (let i = start; i < n; i++) { 1082 res.push(start + i * step); 1083 } 1084 return res; 1085 }.bind(undefined), 1086 emulateEvent = { 1087 mouse: function () { 1088 var _this16 = this; 1089 _newArrowCheck(this, _this); 1090 const getParams = function () { 1091 _newArrowCheck(this, _this16); 1092 return { 1093 bubbles: !1, 1094 cancelable: !1, 1095 screenX: 0, 1096 screenY: 0, 1097 clientX: 0, 1098 clientY: 0 1099 }; 1100 }.bind(this);
1101 try { 1102 // eslint-disable-next-line no-new 1103 new MouseEvent("t"); 1104 return function (el, eventType, params) { 1105 if (params === void 0) { 1106 params = getParams(); 1107 } 1108 _newArrowCheck(this, _this16); 1109 el.dispatchEvent(new MouseEvent(eventType, params)); 1110 }.bind(this); 1111 } catch (e) { 1112 // Polyfills DOM4 MouseEvent 1113 return function (el, eventType, params) { 1114 if (params === void 0) { 1115 params = getParams(); 1116 } 1117 _newArrowCheck(this, _this16); 1118 const mouseEvent = browser_doc.createEvent("MouseEvent"); 1119 1120 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent 1121 mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, win, 0, 1122 // the event's mouse click count 1123 params.screenX, params.screenY, params.clientX, params.clientY, !1, !1, !1, !1, 0, null); 1124 el.dispatchEvent(mouseEvent); 1125 }.bind(this); 1126 } 1127 }.bind(undefined)(), 1128 touch: function touch(el, eventType, params) { 1129 _newArrowCheck(this, _this); 1130 const touchObj = new Touch(mergeObj({ 1131 identifier: Date.now(), 1132 target: el, 1133 radiusX: 2.5, 1134 radiusY: 2.5, 1135 rotationAngle: 10, 1136 force: .5 1137 }, params)); 1138 el.dispatchEvent(new TouchEvent(eventType, { 1139 cancelable: !0, 1140 bubbles: !0, 1141 shiftKey: !0, 1142 touches: [touchObj], 1143 targetTouches: [], 1144 changedTouches: [touchObj] 1145 })); 1146 }.bind(undefined) 1147 }; // emulate event 1148/** 1149 * Process the template & return bound string 1150 * @param {string} tpl Template string 1151 * @param {object} data Data value to be replaced 1152 * @returns {string} 1153 * @private 1154 */ 1155function tplProcess(tpl, data) { 1156 let res = tpl; 1157 for (const x in data) { 1158 res = res.replace(new RegExp("{=" + x + "}", "g"), data[x]); 1159 } 1160 return res; 1161} 1162 1163/** 1164 * Get parsed date value 1165 * (It must be called in 'ChartInternal' context) 1166 * @param {Date|string|number} date Value of date to be parsed 1167 * @returns {Date} 1168 * @private 1169 */ 1170function parseDate(date) { 1171 let parsedDate; 1172 if (date instanceof Date) { 1173 parsedDate = date; 1174 } else if (isString(date)) { 1175 var _format$dataTime; 1176 const config = this.config, 1177 format = this.format; 1178 1179 // if fails to parse, try by new Date() 1180 // https://github.com/naver/billboard.js/issues/1714 1181 parsedDate = (_format$dataTime = format.dataTime(config.data_xFormat)(date)) != null ? _format$dataTime : new Date(date); 1182 } else if (isNumber(date) && !isNaN(date)) { 1183 parsedDate = new Date(+date); 1184 } 1185 if (!parsedDate || isNaN(+parsedDate)) { 1186 console && console.error && console.error("Failed to parse x '" + date + "' to Date object"); 1187 } 1188 return parsedDate; 1189} 1190 1191/** 1192 * Return if the current doc is visible or not 1193 * @returns {boolean} 1194 * @private 1195 */ 1196function isTabVisible() { 1197 return (browser_doc == null ? void 0 : browser_doc.hidden) === !1 || (browser_doc == null ? void 0 : browser_doc.visibilityState) === "visible"; 1198} 1199 1200/** 1201 * Get the current input type 1202 * @param {boolean} mouse Config value: interaction.inputType.mouse 1203 * @param {boolean} touch Config value: interaction.inputType.touch 1204 * @returns {string} "mouse" | "touch" | null 1205 * @private 1206 */ 1207function convertInputType(mouse, touch) { 1208 var _this17 = this; 1209 const DocumentTouch = win.DocumentTouch, 1210 matchMedia = win.matchMedia, 1211 navigator = win.navigator; 1212 let hasTouch = !1; 1213 if (touch) { 1214 // Some Edge desktop return true: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/20417074/ 1215 if (navigator && "maxTouchPoints" in navigator) { 1216 hasTouch = navigator.maxTouchPoints > 0; 1217 1218 // Ref: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js 1219 // On IE11 with IE9 emulation mode, ('ontouchstart' in window) is returning true 1220 } else if ("ontouchmove" in win || DocumentTouch && browser_doc instanceof DocumentTouch) { 1221 hasTouch = !0; 1222 } else { 1223 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#avoiding_user_agent_detection 1224 if (matchMedia != null && matchMedia("(pointer:coarse)").matches) { 1225 hasTouch = !0; 1226 } else { 1227 // Only as a last resort, fall back to user agent sniffing 1228 const UA = navigator.userAgent; 1229 hasTouch = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA); 1230 } 1231 } 1232 } 1233 1234 // Check if agent has mouse using any-hover, touch devices (e.g iPad) with external mouse will return true as long as mouse is connected
1235 // https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/#aa-testing-the-capabilities-of-all-inputs 1236 // Demo: https://patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/ 1237 const hasMouse = mouse && ["any-hover:hover", "any-pointer:fine"].some(function (v) { 1238 _newArrowCheck(this, _this17); 1239 return matchMedia == null ? void 0 : matchMedia("(" + v + ")").matches; 1240 }.bind(this)); 1241 1242 // fallback to 'mouse' if no input type is detected. 1243 return hasMouse && "mouse" || hasTouch && "touch" || "mouse"; 1244} 1245 1246/** 1247 * Run function until given condition function return true 1248 * @param {Function} fn Function to be executed when condition is true 1249 * @param {Function} conditionFn Condition function to check if condition is true 1250 * @private 1251 */ 1252function runUntil(fn, conditionFn) { 1253 var _this18 = this; 1254 if (conditionFn() === !1) { 1255 requestAnimationFrame(function () { 1256 _newArrowCheck(this, _this18); 1257 return runUntil(fn, conditionFn); 1258 }.bind(this)); 1259 } else { 1260 fn(); 1261 } 1262} 1263;// CONCATENATED MODULE: ./src/module/error.ts 1264 1265 1266 1267 1268/** 1269 * Copyright (c) 2021 ~ present NAVER Corp. 1270 * billboard.js project is licensed under the MIT license 1271 */ 1272/* eslint no-console: "off" */ 1273 1274 1275/** 1276 * Check chart type module imports. 1277 * @param {ChartInternal} ctx Context 1278 * @private 1279 */ 1280function checkModuleImport(ctx) { 1281 const $$ = ctx, 1282 config = $$.config; 1283 let type = ""; 1284 if (isEmpty(config.data_type || config.data_types) && !$$[TYPE_METHOD_NEEDED.LINE]) { 1285 type = "line"; 1286 } else { 1287 for (const x in TYPE_METHOD_NEEDED) { 1288 const t = TYPE[x]; 1289 if ($$.hasType(t) && !$$[TYPE_METHOD_NEEDED[x]]) { 1290 type = t; 1291 break; 1292 } 1293 } 1294 } 1295 type && logError("Please, make sure if %c" + camelize(type), "module has been imported and specified correctly."); 1296} 1297 1298/** 1299 * Log error and throw error 1300 * @param {string} head Message header 1301 * @param {string} tail Message tail 1302 * @private 1303 */ 1304function logError(head, tail) { 1305 var _window$console; 1306 const hasConsole = (_window$console = win.console) == null ? void 0 : _window$console.error; 1307 if (hasConsole) { 1308 console.error("\u274C [billboard.js] " + head, "background:red;color:white;display:block;font-size:15px", tail); 1309 console.info("%câ¹ï¸", "font-size:15px", "https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality"); 1310 } 1311 throw Error("[billboard.js] " + head.replace(/\%c([a-z-]+)/i, "'$1' ") + " " + tail); 1312} 1313;// CONCATENATED MODULE: ./src/config/classes.ts 1314 1315function classes_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 1316function classes_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {}; r % 2 ? classes_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : classes_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 1317/** 1318 * Copyright (c) 2017 ~ present NAVER Corp. 1319 * billboard.js project is licensed under the MIT license 1320 */ 1321/** 1322 * CSS class names definition 1323 * @private 1324 */ 1325const $COMMON = { 1326 button: "bb-button", 1327 chart: "bb-chart", 1328 empty: "bb-empty", 1329 main: "bb-main", 1330 target: "bb-target", 1331 EXPANDED: "_expanded_" 1332}; 1333const $ARC = { 1334 arc: "bb-arc", 1335 arcLabelLine: "bb-arc-label-line", 1336 arcs: "bb-arcs", 1337 chartArc: "bb-chart-arc", 1338 chartArcs: "bb-chart-arcs", 1339 chartArcsBackground: "bb-chart-arcs-background", 1340 chartArcsTitle: "bb-chart-arcs-title", 1341 needle: "bb-needle" 1342}; 1343const $AREA = { 1344 area: "bb-area", 1345 areas: "bb-areas" 1346}; 1347const $AXIS = { 1348 axis: "bb-axis", 1349 axisX: "bb-axis-x", 1350 axisXLabel: "bb-axis-x-label", 1351 axisY: "bb-axis-y", 1352 axisY2: "bb-axis-y2", 1353 axisY2Label: "bb-axis-y2-label", 1354 axisYLabel: "bb-axis-y-label" 1355}; 1356const $BAR = { 1357 bar: "bb-bar", 1358 bars: "bb-bars", 1359 chartBar: "bb-chart-bar", 1360 chartBars: "bb-chart-bars" 1361}; 1362const $CANDLESTICK = { 1363 candlestick: "bb-candlestick", 1364 candlesticks: "bb-candlesticks",
1365 chartCandlestick: "bb-chart-candlestick", 1366 chartCandlesticks: "bb-chart-candlesticks", 1367 valueDown: "bb-value-down", 1368 valueUp: "bb-value-up" 1369}; 1370const $CIRCLE = { 1371 chartCircles: "bb-chart-circles", 1372 circle: "bb-circle", 1373 circles: "bb-circles" 1374}; 1375const $COLOR = { 1376 colorPattern: "bb-color-pattern", 1377 colorScale: "bb-colorscale" 1378}; 1379const $DRAG = { 1380 dragarea: "bb-dragarea", 1381 INCLUDED: "_included_" 1382}; 1383const $GAUGE = { 1384 chartArcsGaugeMax: "bb-chart-arcs-gauge-max", 1385 chartArcsGaugeMin: "bb-chart-arcs-gauge-min", 1386 chartArcsGaugeUnit: "bb-chart-arcs-gauge-unit", 1387 chartArcsGaugeTitle: "bb-chart-arcs-gauge-title", 1388 gaugeValue: "bb-gauge-value" 1389}; 1390const $LEGEND = { 1391 legend: "bb-legend", 1392 legendBackground: "bb-legend-background", 1393 legendItem: "bb-legend-item", 1394 legendItemEvent: "bb-legend-item-event", 1395 legendItemHidden: "bb-legend-item-hidden", 1396 legendItemPoint: "bb-legend-item-point", 1397 legendItemTile: "bb-legend-item-tile" 1398}; 1399const $LINE = { 1400 chartLine: "bb-chart-line", 1401 chartLines: "bb-chart-lines", 1402 line: "bb-line", 1403 lines: "bb-lines" 1404}; 1405const $EVENT = { 1406 eventRect: "bb-event-rect", 1407 eventRects: "bb-event-rects", 1408 eventRectsMultiple: "bb-event-rects-multiple", 1409 eventRectsSingle: "bb-event-rects-single" 1410}; 1411const $FOCUS = { 1412 focused: "bb-focused", 1413 defocused: "bb-defocused", 1414 legendItemFocused: "bb-legend-item-focused", 1415 xgridFocus: "bb-xgrid-focus", 1416 ygridFocus: "bb-ygrid-focus" 1417}; 1418const $GRID = { 1419 grid: "bb-grid", 1420 gridLines: "bb-grid-lines", 1421 xgrid: "bb-xgrid", 1422 xgridLine: "bb-xgrid-line", 1423 xgridLines: "bb-xgrid-lines", 1424 xgrids: "bb-xgrids", 1425 ygrid: "bb-ygrid", 1426 ygridLine: "bb-ygrid-line", 1427 ygridLines: "bb-ygrid-lines", 1428 ygrids: "bb-ygrids" 1429}; 1430const $LEVEL = { 1431 level: "bb-level", 1432 levels: "bb-levels" 1433}; 1434const $RADAR = { 1435 chartRadar: "bb-chart-radar", 1436 chartRadars: "bb-chart-radars" 1437}; 1438const $REGION = { 1439 region: "bb-region", 1440 regions: "bb-regions" 1441}; 1442const $SELECT = { 1443 selectedCircle: "bb-selected-circle", 1444 selectedCircles: "bb-selected-circles", 1445 SELECTED: "_selected_" 1446}; 1447const $SHAPE = { 1448 shape: "bb-shape", 1449 shapes: "bb-shapes" 1450}; 1451const $SUBCHART = { 1452 brush: "bb-brush", 1453 subchart: "bb-subchart" 1454}; 1455const $TEXT = { 1456 chartText: "bb-chart-text", 1457 chartTexts: "bb-chart-texts", 1458 text: "bb-text", 1459 texts: "bb-texts", 1460 title: "bb-title", 1461 TextOverlapping: "text-overlapping" 1462}; 1463const $TOOLTIP = { 1464 tooltip: "bb-tooltip", 1465 tooltipContainer: "bb-tooltip-container", 1466 tooltipName: "bb-tooltip-name" 1467}; 1468const $TREEMAP = { 1469 treemap: "bb-treemap", 1470 chartTreemap: "bb-chart-treemap", 1471 chartTreemaps: "bb-chart-treemaps" 1472}; 1473const $ZOOM = { 1474 buttonZoomReset: "bb-zoom-reset", 1475 zoomBrush: "bb-zoom-brush" 1476}; 1477/* harmony default export */ var classes = (classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread(classes_objectSpread({}, $COMMON), $ARC), $AREA), $AXIS), $BAR), $CANDLESTICK), $CIRCLE), $COLOR), $DRAG), $GAUGE), $LEGEND), $LINE), $EVENT), $FOCUS), $GRID), $RADAR), $REGION), $SELECT), $SHAPE), $SUBCHART), $TEXT), $TOOLTIP), $TREEMAP), $ZOOM)); 1478;// CONCATENATED MODULE: ./src/config/Store/Element.ts 1479/** 1480 * Copyright (c) 2017 ~ present NAVER Corp. 1481 * billboard.js project is licensed under the MIT license 1482 */ 1483/** 1484 * Elements class. 1485 * @class Elements 1486 * @ignore 1487 * @private 1488 */ 1489let Element = function () { 1490 return { 1491 chart: null, 1492 main: null, 1493 svg: null, 1494 axis: { 1495 // axes 1496 x: null, 1497 y: null, 1498 y2: null, 1499 subX: null 1500 }, 1501 defs: null, 1502 tooltip: null, 1503 legend: null, 1504 title: null, 1505 subchart: { 1506 main: null, 1507 // $$.context 1508 bar: null, 1509 // $$.contextBar 1510 line: null, 1511 // $$.contextLine 1512 area: null // $$.contextArea 1513 }, 1514 1515 arcs: null, 1516 bar: null, 1517 // mainBar, 1518 candlestick: null, 1519 line: null, 1520 // mainLine, 1521 area: null, 1522 // mainArea, 1523 circle: null, 1524 // mainCircle, 1525 radar: null, 1526 text: null, 1527 // mainText, 1528 grid: {
1529 main: null, 1530 // grid (also focus) 1531 x: null, 1532 // xgrid, 1533 y: null // ygrid, 1534 }, 1535 1536 gridLines: { 1537 main: null, 1538 // gridLines 1539 x: null, 1540 // xgridLines, 1541 y: null // ygridLines 1542 }, 1543 1544 region: { 1545 main: null, 1546 // region 1547 list: null // mainRegion 1548 }, 1549 1550 eventRect: null, 1551 zoomResetBtn: null // drag zoom reset button 1552 }; 1553}; 1554 1555;// CONCATENATED MODULE: ./src/config/Store/State.ts 1556/** 1557 * Copyright (c) 2017 ~ present NAVER Corp. 1558 * billboard.js project is licensed under the MIT license 1559 */ 1560/** 1561 * State class. 1562 * @class State 1563 * @ignore 1564 * @private 1565 */ 1566let State = function () { 1567 return { 1568 // chart drawn area dimension, excluding axes 1569 width: 0, 1570 width2: 0, 1571 height: 0, 1572 height2: 0, 1573 margin: { 1574 top: 0, 1575 bottom: 0, 1576 left: 0, 1577 right: 0 1578 }, 1579 margin2: { 1580 top: 0, 1581 bottom: 0, 1582 left: 0, 1583 right: 0 1584 }, 1585 margin3: { 1586 top: 0, 1587 bottom: 0, 1588 left: 0, 1589 right: 0 1590 }, 1591 arcWidth: 0, 1592 arcHeight: 0, 1593 xAxisHeight: 0, 1594 hasAxis: !1, 1595 hasRadar: !1, 1596 hasTreemap: !1, 1597 // for data CSS rule index (used when boost.useCssRule is true) 1598 cssRule: {}, 1599 current: { 1600 // current domain value. Assigned when is zoom is called 1601 domain: undefined, 1602 // chart whole dimension 1603 width: 0, 1604 height: 0, 1605 dataMax: 0, 1606 maxTickSize: { 1607 x: { 1608 width: 0, 1609 height: 0, 1610 ticks: [], 1611 clipPath: 0, 1612 domain: "" 1613 }, 1614 y: { 1615 width: 0, 1616 height: 0, 1617 domain: "" 1618 }, 1619 y2: { 1620 width: 0, 1621 height: 0, 1622 domain: "" 1623 } 1624 }, 1625 // current used chart type list 1626 types: [], 1627 needle: undefined // arc needle current value 1628 }, 1629 1630 // legend 1631 isLegendRight: !1, 1632 isLegendInset: !1, 1633 isLegendTop: !1, 1634 isLegendLeft: !1, 1635 legendStep: 0, 1636 legendItemWidth: 0, 1637 legendItemHeight: 0, 1638 legendHasRendered: !1, 1639 eventReceiver: { 1640 currentIdx: -1, 1641 // current event interaction index 1642 rect: {}, 1643 // event rect's clientBoundingRect 1644 data: [], 1645 // event data bound of previoous eventRect 1646 coords: [] // coordination value of previous eventRect 1647 }, 1648 1649 axis: { 1650 x: { 1651 padding: { 1652 left: 0, 1653 right: 0 1654 }, 1655 tickCount: 0 1656 } 1657 }, 1658 rotatedPadding: { 1659 left: 30, 1660 right: 0, 1661 top: 5 1662 }, 1663 withoutFadeIn: {}, 1664 inputType: "", 1665 datetimeId: "", 1666 // clip id string 1667 clip: { 1668 id: "", 1669 idXAxis: "", 1670 idYAxis: "", 1671 idXAxisTickTexts: "", 1672 idGrid: "", 1673 idSubchart: "", 1674 // clipIdForSubchart 1675 path: "", 1676 pathXAxis: "", 1677 pathYAxis: "", 1678 pathXAxisTickTexts: "", 1679 pathGrid: "" 1680 }, 1681 // state 1682 event: null, 1683 // event object 1684 dragStart: null, 1685 dragging: !1, 1686 flowing: !1, 1687 cancelClick: !1, 1688 mouseover: !1, 1689 rendered: !1, 1690 transiting: !1, 1691 redrawing: !1, 1692 // if redraw() is on process 1693 resizing: !1, 1694 // resize event called 1695 toggling: !1, 1696 // legend toggle 1697 zooming: !1, 1698 hasNegativeValue: !1, 1699 hasPositiveValue: !0, 1700 orgAreaOpacity: "0.2", 1701 orgConfig: {}, 1702 // user original genration config 1703 1704 // ID strings 1705 hiddenTargetIds: [], 1706 hiddenLegendIds: [], 1707 focusedTargetIds: [], 1708 defocusedTargetIds: [], 1709 // value for Arc 1710 radius: 0, 1711 innerRadius: 0, 1712 outerRadius: undefined, 1713 innerRadiusRatio: 0, 1714 gaugeArcWidth: 0, 1715 radiusExpanded: 0, 1716 // xgrid attribute 1717 xgridAttr: { 1718 x1: null, 1719 x2: null, 1720 y1: null, 1721 y2: null 1722 } 1723 }; 1724}; 1725 1726;// CONCATENATED MODULE: ./src/config/Store/Store.ts 1727 1728/** 1729 * Copyright (c) 2017 ~ present NAVER Corp. 1730 * billboard.js project is licensed under the MIT license 1731 */ 1732 1733 1734 1735// mapping 1736const Store_classes = { 1737 element: Element, 1738 state: State 1739}; 1740 1741/** 1742 * Internal store class. 1743 * @class Store 1744 * @ignore 1745 * @private 1746 */ 1747let Store = /*#__PURE__*/function () { 1748 function Store() { 1749 var _this = this;
1750 Object.keys(Store_classes).forEach(function (v) { 1751 _newArrowCheck(this, _this); 1752 this[v] = new Store_classes[v](); 1753 }.bind(this)); 1754 } 1755 var _proto = Store.prototype; 1756 _proto.getStore = function getStore(name) { 1757 return this[name]; 1758 }; 1759 return Store; 1760}(); 1761 1762;// CONCATENATED MODULE: ./src/config/Options/common/main.ts 1763/** 1764 * Copyright (c) 2017 ~ present NAVER Corp. 1765 * billboard.js project is licensed under the MIT license 1766 */ 1767 1768/** 1769 * main config options 1770 */ 1771/* harmony default export */ var main = ({ 1772 /** 1773 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.<br> 1774 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element). 1775 * - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body. 1776 * @name bindto 1777 * @memberof Options 1778 * @property {string|HTMLElement|d3.selection|object} [bindto="#chart"] Specify the element where chart will be drawn. 1779 * @property {string|HTMLElement|d3.selection} bindto.element="#chart" Specify the element where chart will be drawn. 1780 * @property {string} [bindto.classname=bb] Specify the class name of bind element.<br> 1781 * **NOTE:** When class name isn't `bb`, then you also need to update the default CSS to be rendered correctly. 1782 * @default #chart 1783 * @example 1784 * bindto: "#myContainer" 1785 * 1786 * // or HTMLElement 1787 * bindto: document.getElementById("myContainer") 1788 * 1789 * // or D3 selection object 1790 * bindto: d3.select("#myContainer") 1791 * 1792 * // or to change default classname 1793 * bindto: { 1794 * element: "#chart", 1795 * classname: "bill-board" // ex) <div id='chart' class='bill-board'> 1796 * } 1797 */ 1798 bindto: "#chart", 1799 /** 1800 * Set chart background. 1801 * @name background 1802 * @memberof Options 1803 * @property {object} background background object 1804 * @property {string} background.class Specify the class name for background element. 1805 * @property {string} background.color Specify the fill color for background element.<br>**NOTE:** Will be ignored if `imgUrl` option is set. 1806 * @property {string} background.imgUrl Specify the image url string for background. 1807 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Background) 1808 * @example 1809 * background: { 1810 * class: "myClass", 1811 * color: "red", 1812 * 1813 * // Set image url for background. 1814 * // If specified, 'color' option will be ignored. 1815 * imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg", 1816 * } 1817 */ 1818 background: {}, 1819 /** 1820 * Set 'clip-path' attribute for chart element 1821 * - **NOTE:** 1822 * > When is false, chart node element is positioned after the axis node in DOM tree hierarchy. 1823 * > Is to make chart element positioned over axis element. 1824 * @name clipPath 1825 * @memberof Options 1826 * @type {boolean} 1827 * @default true 1828 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.clipPath) 1829 * @example 1830 * // don't set 'clip-path' attribute 1831 * clipPath: false 1832 */ 1833 clipPath: !0, 1834 /** 1835 * Set svg element's class name 1836 * @name svg 1837 * @memberof Options 1838 * @type {object} 1839 * @property {object} [svg] svg object 1840 * @property {string} [svg.classname] class name for svg element 1841 * @example 1842 * svg: { 1843 * classname: "test_class" 1844 * } 1845 */ 1846 svg_classname: undefined, 1847 /** 1848 * The desired size of the chart element. 1849 * If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to. 1850 * @name size 1851 * @memberof Options 1852 * @type {object} 1853 * @property {object} [size] size object 1854 * @property {number} [size.width] width of the chart element 1855 * @property {number} [size.height] height of the chart element 1856 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.ChartSize) 1857 * @example 1858 * size: { 1859 * width: 640, 1860 * height: 480 1861 * } 1862 */ 1863 size_width: undefined, 1864 size_height: undefined, 1865 /** 1866 * The padding of the chart element. 1867 * - **NOTE:** for more information, see the "[`Understanding padding`](https://github.com/naver/billboard.js/wiki/Understanding-padding)"" wiki documentaion. 1868 * @name padding 1869 * @memberof Options 1870 * @type {object} 1871 * @property {object|boolean} [padding=true] Set padding of chart, and accepts object or boolean type. 1872 * - `Object`: Specify each side's padding. 1873 * - `false`: Remove padding completely and make shape to fully occupy the container element. 1874 * - In this case, axes and subchart will be hidden. 1875 * - To adjust some padding from this state, use `axis.[x|y].padding` option. 1876 * @property {string} [padding.mode] padding mode 1877 * - `"fit"`: Reduce padding as much as possible to make chart fit to the container element for chart types w/axis.<br>When specified, all padding values will be relative from fitted value. 1878 * @property {number} [padding.top] padding on the top of chart 1879 * @property {number} [padding.right] padding on the right of chart 1880 * @property {number} [padding.bottom] padding on the bottom of chart 1881 * @property {number} [padding.left] padding on the left of chart 1882 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Padding) 1883 * @see [Demo: Fit padding](https://naver.github.io/billboard.js/demo/#ChartOptions.FitPadding) 1884 * @example 1885 * // remove padding completely. 1886 * padding: false, 1887 * 1888 * padding: { 1889 * // specifying mode value, will reduce padding and make fit to the container element. 1890 * mode: "fit" 1891 * 1892 * // when mode is "fit", all padding values will be relative from fitted value. 1893 * // so, 0 will be initial fitted value. 1894 * top: 20, 1895 * right: 20, 1896 * bottom: 20, 1897 * left: 20 1898 * } 1899 * 1900 * // or specify padding value for each side 1901 * padding: { 1902 * top: 20, 1903 * right: 20, 1904 * bottom: 20, 1905 * left: 20 1906 * } 1907 */ 1908 padding: !0, 1909 padding_mode: undefined, 1910 padding_left: undefined, 1911 padding_right: undefined, 1912 padding_top: undefined, 1913 padding_bottom: undefined, 1914 /** 1915 * Set chart resize options 1916 * @name resize 1917 * @memberof Options 1918 * @type {object} 1919 * @property {object} [resize] resize object 1920 * @property {boolean} [resize.auto=true] Set chart resize automatically on viewport changes. 1921 * @property {boolean|number} [resize.timer=true] Set resize timer option. 1922 * - **NOTE:** 1923 * - The resize function will be called using: 1924 * - true: `setTimeout()` 1925 * - false: `requestIdleCallback()` 1926 * - Given number(delay in ms) value, resize function will be triggered using `setTimer()` with given delay. 1927 * @example 1928 * resize: {
1929 * auto: false, 1930 * 1931 * // set resize function will be triggered using `setTimer()` 1932 * timer: true, 1933 * 1934 * // set resize function will be triggered using `requestIdleCallback()` 1935 * timer: false, 1936 * 1937 * // set resize function will be triggered using `setTimer()` with a delay of `100ms`. 1938 * timer: 100 1939 * } 1940 */ 1941 resize_auto: !0, 1942 resize_timer: !0, 1943 /** 1944 * Set a callback to execute when the chart is clicked. 1945 * @name onclick 1946 * @memberof Options 1947 * @type {Function} 1948 * @default undefined 1949 * @example 1950 * onclick: function(event) { 1951 * this; // chart instance itself 1952 * event; // native event object 1953 * ... 1954 * } 1955 */ 1956 onclick: undefined, 1957 /** 1958 * Set a callback to execute when mouse/touch enters the chart. 1959 * @name onover 1960 * @memberof Options 1961 * @type {Function} 1962 * @default undefined 1963 * @example 1964 * onover: function(event) { 1965 * this; // chart instance itself 1966 * event; // native event object 1967 * ... 1968 * } 1969 */ 1970 onover: undefined, 1971 /** 1972 * Set a callback to execute when mouse/touch leaves the chart. 1973 * @name onout 1974 * @memberof Options 1975 * @type {Function} 1976 * @default undefined 1977 * @example 1978 * onout: function(event) { 1979 * this; // chart instance itself 1980 * event; // native event object 1981 * ... 1982 * } 1983 */ 1984 onout: undefined, 1985 /** 1986 * Set a callback to execute when user resizes the screen. 1987 * @name onresize 1988 * @memberof Options 1989 * @type {Function} 1990 * @default undefined 1991 * @example 1992 * onresize: function() { 1993 * this; // chart instance itself 1994 * ... 1995 * } 1996 */ 1997 onresize: undefined, 1998 /** 1999 * Set a callback to execute when screen resize finished. 2000 * @name onresized 2001 * @memberof Options 2002 * @type {Function} 2003 * @default undefined 2004 * @example 2005 * onresized: function() { 2006 * this; // chart instance itself 2007 * ... 2008 * } 2009 */ 2010 onresized: undefined, 2011 /** 2012 * Set a callback to execute before the chart is initialized 2013 * @name onbeforeinit 2014 * @memberof Options 2015 * @type {Function} 2016 * @default undefined 2017 * @example 2018 * onbeforeinit: function() { 2019 * this; // chart instance itself 2020 * ... 2021 * } 2022 */ 2023 onbeforeinit: undefined, 2024 /** 2025 * Set a callback to execute when the chart is initialized. 2026 * @name oninit 2027 * @memberof Options 2028 * @type {Function} 2029 * @default undefined 2030 * @example 2031 * oninit: function() { 2032 * this; // chart instance itself 2033 * ... 2034 * } 2035 */ 2036 oninit: undefined, 2037 /** 2038 * Set a callback to execute after the chart is initialized 2039 * @name onafterinit 2040 * @memberof Options 2041 * @type {Function} 2042 * @default undefined 2043 * @example 2044 * onafterinit: function() { 2045 * this; // chart instance itself 2046 * ... 2047 * } 2048 */ 2049 onafterinit: undefined, 2050 /** 2051 * 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. 2052 * @name onrendered 2053 * @memberof Options 2054 * @type {Function} 2055 * @default undefined 2056 * @example 2057 * onrendered: function() { 2058 * this; // chart instance itself 2059 * ... 2060 * } 2061 */ 2062 onrendered: undefined, 2063 /** 2064 * Set duration of transition (in milliseconds) for chart animation.<br><br> 2065 * - **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. 2066 * @name transition 2067 * @memberof Options 2068 * @type {object} 2069 * @property {object} [transition] transition object 2070 * @property {number} [transition.duration=350] duration in milliseconds 2071 * @example 2072 * transition: { 2073 * duration: 500 2074 * } 2075 */ 2076 transition_duration: 250, 2077 /** 2078 * Set plugins 2079 * @name plugins 2080 * @memberof Options 2081 * @type {Array} 2082 * @example 2083 * plugins: [ 2084 * new bb.plugin.stanford({ ... }), 2085 * new PluginA(), 2086 * ... 2087 * ] 2088 */ 2089 plugins: [], 2090 /** 2091 * Control the render timing 2092 * @name render 2093 * @memberof Options 2094 * @type {object} 2095 * @property {object} [render] render object 2096 * @property {boolean} [render.lazy=true] Make to not render at initialization (enabled by default when bind element's visibility is hidden). 2097 * @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. 2098 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender) 2099 * @example 2100 * render: { 2101 * lazy: true, 2102 * observe: true 2103 * } 2104 * 2105 * @example 2106 * // <!-- render.lazy will detect visibility defined --> 2107 * // (a) <div id='chart' class='hide'></div> 2108 * // (b) <div id='chart' style='display:none'></div> 2109 * 2110 * // render.lazy enabled by default when element is hidden 2111 * var chart = bb.generate({ ... }); 2112 * 2113 * // chart will be rendered automatically when element's visibility changes 2114 * // Note: works only for inlined css property or class attribute changes 2115 * document.getElementById('chart').classList.remove('hide') // (a) 2116 * document.getElementById('chart').style.display = 'block'; // (b) 2117 * 2118 * @example 2119 * // chart won't be rendered and not observing bind element's visiblity changes 2120 * var chart = bb.generate({ 2121 * render: { 2122 * lazy: true, 2123 * observe: false 2124 * } 2125 * }); 2126 * 2127 * // call at any point when you want to render 2128 * chart.flush(); 2129 */ 2130 render: {}, 2131 /** 2132 * Show rectangles inside the chart.<br><br> 2133 * This option accepts array including object that has axis, start, end and class. 2134 * The keys start, end and class are optional. 2135 * axis must be x, y or y2. start and end should be the value where regions start and end. 2136 * If not specified, the edge values will be used. 2137 * If timeseries x axis, date string, Date object and unixtime integer can be used. 2138 * If class is set, the region element will have it as class. 2139 * @name regions 2140 * @memberof Options 2141 * @type {Array} 2142 * @default [] 2143 * @see [Demo](https://naver.github.io/billboard.js/demo/#Region.RegionLabel) 2144 * @example 2145 * regions: [ 2146 * { 2147 * axis: "x", 2148 * start: 1, 2149 * end: 4, 2150 * class: "region-1-4", 2151 * label: { 2152 * text: "Region Text", 2153 * x: 5, // position relative of the initial x coordinate 2154 * y: 5, // position relative of the initial y coordinate 2155 * color: "red", // color string 2156 * rotated: true // make text to show in vertical or horizontal 2157 * } 2158 * } 2159 * ] 2160 */ 2161 regions: [] 2162}); 2163;// CONCATENATED MODULE: ./src/config/Options/common/boost.ts 2164/** 2165 * Copyright (c) 2017 ~ present NAVER Corp. 2166 * billboard.js project is licensed under the MIT license 2167 */ 2168/** 2169 * boost config options 2170 */ 2171/* harmony default export */ var boost = ({ 2172 /** 2173 * Set boost options 2174 * @name boost 2175 * @memberof Options 2176 * @type {object} 2177 * @property {object} boost boost object 2178 * @property {boolean} [boost.useCssRule=false] Avoid setting inline styles for each shape elements. 2179 * - **NOTE:** 2180 * - Will append <style> to the head tag and will add shpes' CSS rules dynamically. 2181 * - For now, covers colors related properties (fill, stroke, etc.) only. 2182 * @property {boolean} [boost.useWorker=false] Use Web Worker as possible for processing. 2183 * - **NOTE:** 2184 * - For now, only applies for data conversion at the initial time. 2185 * - As of Web Worker's async nature, handling chart instance synchrously is not recommended.
2186 * @example 2187 * boost: { 2188 * useCssRule: true, 2189 * useWorker: false 2190 * } 2191 */ 2192 boost_useCssRule: !1, 2193 boost_useWorker: !1 2194}); 2195;// CONCATENATED MODULE: ./src/config/Options/data/data.ts 2196 2197var data_this = undefined; 2198/** 2199 * Copyright (c) 2017 ~ present NAVER Corp. 2200 * billboard.js project is licensed under the MIT license 2201 */ 2202 2203/** 2204 * data config options 2205 */ 2206/* harmony default export */ var data = ({ 2207 /** 2208 * Specify the key of x values in the data.<br><br> 2209 * 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. 2210 * @name dataâ¤x 2211 * @memberof Options 2212 * @type {string} 2213 * @default undefined 2214 * @example 2215 * data: { 2216 * x: "date" 2217 * } 2218 */ 2219 data_x: undefined, 2220 /** 2221 * Converts data id value 2222 * @name dataâ¤idConverter 2223 * @memberof Options 2224 * @type {Function} 2225 * @default function(id) { return id; } 2226 * @example 2227 * data: { 2228 * idConverter: function(id) { 2229 * // when id is 'data1', converts to be 'data2' 2230 * // 'data2' should be given as the initial data value 2231 * if (id === "data1") { 2232 * return "data2"; 2233 * } else { 2234 * return id; 2235 * } 2236 * } 2237 * } 2238 */ 2239 data_idConverter: function data_idConverter(id) { 2240 _newArrowCheck(this, data_this); 2241 return id; 2242 }.bind(undefined), 2243 /** 2244 * Set custom data name. 2245 * If a name is set to `null`, the series is omitted from the legend. 2246 * @name dataâ¤names 2247 * @memberof Options 2248 * @type {object} 2249 * @default {} 2250 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataName) 2251 * @example 2252 * data: { 2253 * names: { 2254 * data1: "Data Name 1", 2255 * data2: "Data Name 2" 2256 * } 2257 * } 2258 */ 2259 data_names: {}, 2260 /** 2261 * Set custom data class.<br><br> 2262 * 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). 2263 * @name dataâ¤classes 2264 * @memberof Options 2265 * @type {object} 2266 * @default {} 2267 * @example 2268 * data: { 2269 * classes: { 2270 * data1: "additional-data1-class", 2271 * data2: "additional-data2-class" 2272 * } 2273 * } 2274 */ 2275 data_classes: {}, 2276 /** 2277 * Set chart type at once.<br><br> 2278 * If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.<br><br> 2279 * **Available Values:** 2280 * - area 2281 * - area-line-range 2282 * - area-spline 2283 * - area-spline-range 2284 * - area-step 2285 * - bar 2286 * - bubble 2287 * - candlestick 2288 * - donut 2289 * - gauge 2290 * - line 2291 * - pie 2292 * - polar 2293 * - radar 2294 * - scatter 2295 * - spline 2296 * - step 2297 * - treemap 2298 * @name dataâ¤type 2299 * @memberof Options 2300 * @type {string} 2301 * @default "line"<br>NOTE: When importing shapes by ESM, `line()` should be specified for type. 2302 * @example 2303 * data: { 2304 * type: "bar" 2305 * } 2306 * @example 2307 * // Generate chart by importing ESM 2308 * // Import types to be used only, where this will make smaller bundle size. 2309 * import bb, { 2310 * area, 2311 * areaLineRange, 2312 * areaSpline, 2313 * areaSplineRange, 2314 * areaStep, 2315 * bar, 2316 * bubble, 2317 * candlestick, 2318 * donut, 2319 * gauge, 2320 * line, 2321 * pie, 2322 * polar, 2323 * radar, 2324 * scatter, 2325 * spline, 2326 * step, 2327 * treemap 2328 * } 2329 * 2330 * bb.generate({ 2331 * ..., 2332 * data: { 2333 * type: bar() 2334 * } 2335 * }); 2336 */ 2337 data_type: undefined, 2338 /** 2339 * Set chart type for each data.<br> 2340 * This setting overwrites data.type setting. 2341 * - **NOTE:** `radar` and `treemap` type can't be combined with other types. 2342 * @name dataâ¤types 2343 * @memberof Options 2344 * @type {object} 2345 * @default {} 2346 * @example 2347 * data: { 2348 * types: { 2349 * data1: "bar", 2350 * data2: "spline" 2351 * } 2352 * } 2353 * @example 2354 * // Generate chart by importing ESM 2355 * // Import types to be used only, where this will make smaller bundle size. 2356 * import bb, { 2357 * area, 2358 * areaLineRange, 2359 * areaSpline, 2360 * areaSplineRange, 2361 * areaStep, 2362 * bar, 2363 * bubble, 2364 * candlestick, 2365 * donut, 2366 * gauge, 2367 * line, 2368 * pie, 2369 * polar, 2370 * radar, 2371 * scatter, 2372 * spline, 2373 * step, 2374 * treemap 2375 * } 2376 * 2377 * bb.generate({ 2378 * ..., 2379 * data: { 2380 * types: { 2381 * data1: bar(), 2382 * data1: spline() 2383 * } 2384 * } 2385 * }); 2386 */ 2387 data_types: {}, 2388 /** 2389 * This option changes the order of stacking data and pieces of pie/donut. 2390 * - If `null` specified, it will be the order the data loaded. 2391 * - 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> 2392 * 2393 * **Available Values:** 2394 * - `desc`: In descending order 2395 * - `asc`: In ascending order 2396 * - `null`: It keeps the data load order 2397 * - `function(data1, data2) { ... }`: Array.sort compareFunction 2398 * 2399 * **NOTE**: order function, only works for Axis based types & Arc types, except `Radar` type. 2400 * @name dataâ¤order 2401 * @memberof Options 2402 * @type {string|Function|null} 2403 * @default desc 2404 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataOrder) 2405 * @example 2406 * data: {
2407 * // in descending order (default) 2408 * order: "desc" 2409 * 2410 * // in ascending order 2411 * order: "asc" 2412 * 2413 * // keeps data input order 2414 * order: null 2415 * 2416 * // specifying sort function 2417 * order: function(a, b) { 2418 * // param data passed format 2419 * // { 2420 * // id: "data1", id_org: "data1", values: [ 2421 * // {x: 5, value: 250, id: "data1", index: 5, name: "data1"}, 2422 * // ... 2423 * // ] 2424 * // } 2425 * 2426 * const reducer = (p, c) => p + Math.abs(c.value); 2427 * const aSum = a.values.reduce(reducer, 0); 2428 * const bSum = b.values.reduce(reducer, 0); 2429 * 2430 * // ascending order 2431 * return aSum - bSum; 2432 * 2433 * // descending order 2434 * // return bSum - aSum; 2435 * } 2436 * } 2437 */ 2438 data_order: "desc", 2439 /** 2440 * Set groups for the data for stacking. 2441 * @name dataâ¤groups 2442 * @memberof Options 2443 * @type {Array} 2444 * @default [] 2445 * @example 2446 * data: { 2447 * groups: [ 2448 * ["data1", "data2"], 2449 * ["data3"] 2450 * ] 2451 * } 2452 */ 2453 data_groups: [], 2454 /** 2455 * Set how zero value will be treated on groups.<br> 2456 * Possible values: 2457 * - `zero`: 0 will be positioned at absolute axis zero point. 2458 * - `positive`: 0 will be positioned at the top of a stack. 2459 * - `negative`: 0 will be positioned at the bottom of a stack. 2460 * @name dataâ¤groupsZeroAs 2461 * @memberof Options 2462 * @type {string} 2463 * @default "positive" 2464 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.Groups) 2465 * @example 2466 * data: { 2467 * groupsZeroAs: "zero" // "positive" or "negative" 2468 * } 2469 */ 2470 data_groupsZeroAs: "positive", 2471 /** 2472 * Set color converter function.<br><br> 2473 * 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'). 2474 * @name dataâ¤color 2475 * @memberof Options 2476 * @type {Function} 2477 * @default undefined 2478 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataColor) 2479 * @example 2480 * data: { 2481 * color: function(color, d) { ... } 2482 * } 2483 */ 2484 data_color: undefined, 2485 /** 2486 * Set color for each data. 2487 * @name dataâ¤colors 2488 * @memberof Options 2489 * @type {object} 2490 * @default {} 2491 * @example 2492 * data: { 2493 * colors: { 2494 * data1: "#ff0000", 2495 * data2: function(d) { 2496 * return "#000"; 2497 * } 2498 * ... 2499 * } 2500 * } 2501 */ 2502 data_colors: {}, 2503 /** 2504 * Set labels options 2505 * @name dataâ¤labels 2506 * @memberof Options 2507 * @type {object} 2508 * @property {object} data Data object 2509 * @property {boolean} [data.labels=false] Show or hide labels on each data points 2510 * @property {boolean} [data.labels.centered=false] Centerize labels on `bar` shape. (**NOTE:** works only for 'bar' type) 2511 * @property {Function} [data.labels.format] Set formatter function for data labels.<br> 2512 * The formatter function receives 4 arguments such as `v, id, i, texts` and it **must return a string** (`\n` character will be used as line break) that will be shown as the label.<br><br> 2513 * The arguments are:<br> 2514 * - `v` is the value of the data point where the label is shown. 2515 * - `id` is the id of the data where the label is shown. 2516 * - `i` is the index of the data series point where the label is shown. 2517 * - `texts` is the array of whole corresponding data series' text labels.<br><br> 2518 * Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$')) 2519 * @property {string|object} [data.labels.backgroundColors] Set label text background colors. 2520 * @property {string|object|Function} [data.labels.colors] Set label text colors. 2521 * @property {object|Function} [data.labels.position] Set each dataset position, relative the original.<br><br> 2522 * When function is specified, will receives 5 arguments such as `type, v, id, i, texts` and it must return a position number.<br><br> 2523 * The arguments are:<br> 2524 * - `type` coordinate type string, which will be 'x' or 'y'. 2525 * - `v` is the value of the data point where the label is shown.
2526 * - `id` is the id of the data where the label is shown. 2527 * - `i` is the index of the data series point where the label is shown. 2528 * - `texts` is the array of whole corresponding data series' text labels.<br><br> 2529 * @property {number} [data.labels.position.x=0] x coordinate position, relative the original. 2530 * @property {number} [data.labels.position.y=0] y coordinate position, relative the original. 2531 * @property {object} [data.labels.rotate] Rotate label text. Specify degree value in a range of `0 ~ 360`. 2532 * - **NOTE:** Depend on rotate value, text position need to be adjusted manually(using `data.labels.position` option) to be shown nicely. 2533 * @memberof Options 2534 * @type {object} 2535 * @default {} 2536 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataLabel) 2537 * @see [Demo: label colors](https://naver.github.io/billboard.js/demo/#Data.DataLabelColors) 2538 * @see [Demo: label format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat) 2539 * @see [Demo: label multiline](https://naver.github.io/billboard.js/demo/#Data.DataLabelMultiline) 2540 * @see [Demo: label overlap](https://naver.github.io/billboard.js/demo/#Data.DataLabelOverlap) 2541 * @see [Demo: label position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition) 2542 * @see [Demo: label rotate](https://naver.github.io/billboard.js/demo/#Data.DataLabelRotate) 2543 * @example 2544 * data: { 2545 * labels: true, 2546 * 2547 * // or set specific options 2548 * labels: { 2549 * format: function(v, id, i, texts) { 2550 * ... 2551 * // to multiline, return with '\n' character 2552 * return "Line1\nLine2"; 2553 * }, 2554 * 2555 * // it's possible to set for each data 2556 * format: { 2557 * data1: function(v, id, i, texts) { ... }, 2558 * ... 2559 * }, 2560 * 2561 * // align text to center of the 'bar' shape (works only for 'bar' type) 2562 * centered: true, 2563 * 2564 * // apply backgound color for label texts 2565 * backgroundColors: "red", 2566 * 2567 * // set differenct backround colors per dataset 2568 * backgroundColors: { 2569 * data1: "green", 2570 * data2: "yellow" 2571 * } 2572 * 2573 * // apply for all label texts 2574 * colors: "red", 2575 * 2576 * // set different colors per dataset 2577 * // for not specified dataset, will have the default color value 2578 * colors: { 2579 * data1: "yellow", 2580 * data3: "green" 2581 * }, 2582 * 2583 * // call back for label text color 2584 * colors: function(color, d) { 2585 * // color: the default data label color string 2586 * // data: ex) {x: 0, value: 200, id: "data3", index: 0} 2587 * .... 2588 * return d.value > 200 ? "cyan" : color; 2589 * }, 2590 * 2591 * // return x, y coordinate position 2592 * // apt to handle each text position manually 2593 * position: function(type, v, id, i, texts) { 2594 * ... 2595 * return type == "x" ? 10 : 20; 2596 * }, 2597 * 2598 * // set x, y coordinate position 2599 * position: { 2600 * x: -10, 2601 * y: 10 2602 * }, 2603 * 2604 * // or set x, y coordinate position by each dataset 2605 * position: { 2606 * data1: {x: 5, y: 5}, 2607 * data2: {x: 10, y: -20} 2608 * }, 2609 * 2610 * // rotate degree for label text 2611 * rotate: 90 2612 * } 2613 * } 2614 */ 2615 data_labels: {}, 2616 data_labels_backgroundColors: undefined, 2617 data_labels_colors: undefined, 2618 data_labels_position: {}, 2619 /** 2620 * Hide each data when the chart appears.<br><br> 2621 * If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden. 2622 * @name dataâ¤hide 2623 * @memberof Options 2624 * @type {boolean|Array} 2625 * @default false 2626 * @example 2627 * data: { 2628 * // all of data will be hidden 2629 * hide: true 2630 * 2631 * // specified data will be hidden 2632 * hide: ["data1", ...] 2633 * } 2634 */ 2635 data_hide: !1, 2636 /** 2637 * Filter values to be shown 2638 * The data value is the same as the returned by `.data()`. 2639 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter 2640 * @name dataâ¤filter 2641 * @memberof Options 2642 * @type {Function} 2643 * @default undefined 2644 * @example 2645 * data: { 2646 * // filter for id value 2647 * filter: function(v) { 2648 * // v: [{id: "data1", id_org: "data1", values: [ 2649 * // {x: 0, value: 130, id: "data2", index: 0}, ...] 2650 * // }, ...] 2651 * return v.id !== "data1"; 2652 * } 2653 */ 2654 data_filter: undefined, 2655 /** 2656 * Set a callback for click event on each data point.<br><br> 2657 * This callback will be called when each data point clicked and will receive `d` and element as the arguments. 2658 * - `d` is the data clicked and element is the element clicked. 2659 * - `element` is the current interacting svg element. 2660 * - In this callback, `this` will be the Chart object. 2661 * @name dataâ¤onclick 2662 * @memberof Options 2663 * @type {Function} 2664 * @default function() {} 2665 * @example 2666 * data: { 2667 * onclick: function(d, element) { 2668 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"} 2669 * // element - <circle> 2670 * ... 2671 * } 2672 * } 2673 */ 2674 data_onclick: function data_onclick() { 2675 _newArrowCheck(this, data_this); 2676 }.bind(undefined), 2677 /** 2678 * Set a callback for mouse/touch over event on each data point.<br><br> 2679 * 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. 2680 * - `d` is the data where mouse cursor moves onto. 2681 * - `element` is the current interacting svg element. 2682 * - In this callback, `this` will be the Chart object. 2683 * @name dataâ¤onover 2684 * @memberof Options 2685 * @type {Function} 2686 * @default function() {} 2687 * @example 2688 * data: { 2689 * onover: function(d, element) { 2690 * // d - ex) {x: 4, value: 150, id: "data1", index: 4} 2691 * // element - <circle> 2692 * ... 2693 * } 2694 * } 2695 */ 2696 data_onover: function data_onover() { 2697 _newArrowCheck(this, data_this); 2698 }.bind(undefined), 2699 /** 2700 * Set a callback for mouse/touch out event on each data point.<br><br> 2701 * This callback will be called when mouse cursor or via touch moves out each data point and will receive `d` as the argument. 2702 * - `d` is the data where mouse cursor moves out. 2703 * - `element` is the current interacting svg element. 2704 * - In this callback, `this` will be the Chart object. 2705 * @name dataâ¤onout 2706 * @memberof Options 2707 * @type {Function} 2708 * @default function() {} 2709 * @example 2710 * data: { 2711 * onout: function(d, element) { 2712 * // d - ex) {x: 4, value: 150, id: "data1", index: 4} 2713 * // element - <circle> 2714 * ... 2715 * } 2716 * } 2717 */ 2718 data_onout: function data_onout() { 2719 _newArrowCheck(this, data_this); 2720 }.bind(undefined), 2721 /** 2722 * Set a callback for when data is shown.<br> 2723 * The callback will receive shown data ids in array.
2724 * @name dataâ¤onshown 2725 * @memberof Options 2726 * @type {Function} 2727 * @default undefined 2728 * @example 2729 * data: { 2730 * onshown: function(ids) { 2731 * // ids - ["data1", "data2", ...] 2732 * ... 2733 * } 2734 * } 2735 */ 2736 data_onshown: undefined, 2737 /** 2738 * Set a callback for when data is hidden.<br> 2739 * The callback will receive hidden data ids in array. 2740 * @name dataâ¤onhidden 2741 * @memberof Options 2742 * @type {Function} 2743 * @default undefined 2744 * @example 2745 * data: { 2746 * onhidden: function(ids) { 2747 * // ids - ["data1", "data2", ...] 2748 * ... 2749 * } 2750 * } 2751 */ 2752 data_onhidden: undefined, 2753 /** 2754 * Set a callback for minimum data 2755 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison 2756 * @name dataâ¤onmin 2757 * @memberof Options 2758 * @type {Function} 2759 * @default undefined 2760 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback) 2761 * @example 2762 * onmin: function(data) { 2763 * // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ] 2764 * ... 2765 * } 2766 */ 2767 data_onmin: undefined, 2768 /** 2769 * Set a callback for maximum data 2770 * - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison 2771 * @name dataâ¤onmax 2772 * @memberof Options 2773 * @type {Function} 2774 * @default undefined 2775 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback) 2776 * @example 2777 * onmax: function(data) { 2778 * // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ] 2779 * ... 2780 * } 2781 */ 2782 data_onmax: undefined, 2783 /** 2784 * 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. 2785 * @name dataâ¤url 2786 * @memberof Options 2787 * @type {string} 2788 * @default undefined 2789 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.LoadData) 2790 * @example 2791 * data: { 2792 * url: "/data/test.csv" 2793 * } 2794 */ 2795 data_url: undefined, 2796 /** 2797 * XHR header value 2798 * - **NOTE:** Should be used with `data.url` option 2799 * @name dataâ¤headers 2800 * @memberof Options 2801 * @type {string} 2802 * @default undefined 2803 * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader 2804 * @example 2805 * data: { 2806 * url: "/data/test.csv", 2807 * headers: { 2808 * "Content-Type": "text/xml", 2809 * ... 2810 * } 2811 * } 2812 */ 2813 data_headers: undefined, 2814 /** 2815 * Parse a JSON object for data. See also data.keys. 2816 * @name dataâ¤json 2817 * @memberof Options 2818 * @type {Array} 2819 * @default undefined 2820 * @see [dataâ¤keys](#.data%25E2%2580%25A4keys) 2821 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.JSONData) 2822 * @example 2823 * data: { 2824 * json: [ 2825 * {name: "www.site1.com", upload: 200, download: 200, total: 400}, 2826 * {name: "www.site2.com", upload: 100, download: 300, total: 400}, 2827 * {name: "www.site3.com", upload: 300, download: 200, total: 500}, 2828 * {name: "www.site4.com", upload: 400, download: 100, total: 500} 2829 * ], 2830 * keys: { 2831 * // case 1: specify 'x' key for category axis 2832 * x: "name", // 'name' key will be used as category x axis values 2833 * value: ["upload", "download"] 2834 * 2835 * // case 2: without 'x' key for non-category axis 2836 * value: ["upload", "download"] 2837 * } 2838 * } 2839 */ 2840 data_json: undefined, 2841 /** 2842 * Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order. 2843 * @name dataâ¤rows 2844 * @memberof Options 2845 * @type {Array} 2846 * @default undefined 2847 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.RowOrientedData) 2848 * @example 2849 * data: { 2850 * rows: [ 2851 * ["A", "B", "C"], 2852 * [90, 120, 300], 2853 * [40, 160, 240], 2854 * [50, 200, 290], 2855 * [120, 160, 230], 2856 * [80, 130, 300], 2857 * [90, 220, 320] 2858 * ] 2859 * } 2860 * 2861 * // for 'bar' type, data can contain: 2862 * // - an array of [start, end] data following the order 2863 * data: { 2864 * rows: [ 2865 * ["data1", "data2"], 2866 * [[100, 150], 120], 2867 * [[200, 300], 55], 2868 * [[-400, 500], 60] 2869 * ], 2870 * type: "bar" 2871 * } 2872 * 2873 * // for 'range' types('area-line-range' or 'area-spline-range'), data should contain: 2874 * // - an array of [high, mid, low] data following the order 2875 * // - or an object with 'high', 'mid' and 'low' key value 2876 * data: { 2877 * rows: [ 2878 * ["data1", "data2"], 2879 * [ 2880 * // or {high:150, mid: 140, low: 110}, 120 2881 * [150, 140, 110], 120 2882 * ], 2883 * [[155, 130, 115], 55], 2884 * [[160, 135, 120], 60] 2885 * ], 2886 * types: { 2887 * data1: "area-line-range", 2888 * data2: "line" 2889 * } 2890 * } 2891 * 2892 * // for 'bubble' type, data can contain dimension value: 2893 * // - an array of [y, z] data following the order 2894 * // - or an object with 'y' and 'z' key value 2895 * // 'y' is for y axis coordination and 'z' is the bubble radius value 2896 * data: { 2897 * rows: [ 2898 * ["data1", "data2"], 2899 * [ 2900 * // or {y:10, z: 140}, 120 2901 * [10, 140], 120 2902 * ], 2903 * [[100, 30], 55], 2904 * [[50, 100], 60] 2905 * ], 2906 * types: { 2907 * data1: "bubble", 2908 * data2: "line" 2909 * } 2910 * } 2911 * 2912 * // for 'canlestick' type, data should contain: 2913 * // - an array of [open, high, low, close, volume(optional)] data following the order
2914 * // - or an object with 'open', 'high', 'low', 'close' and 'value'(optional) key value 2915 * data: { 2916 * rows: [ 2917 * ["data1", "data2"], 2918 * [ 2919 * // open, high, low, close, volume (optional) 2920 * {open: 1300, high: 1369, low: 1200, close: 1339, volume: 100}, 2921 * [1000, 1100, 850, 870] 2922 * ], 2923 * [ 2924 * {open: 1348, high: 1371, low: 1271, close: 1320}, 2925 * [870, 1250, 830, 1200, 50] 2926 * ] 2927 * ], 2928 * type: "candlestick" 2929 * } 2930 */ 2931 data_rows: undefined, 2932 /** 2933 * Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values. 2934 * @name dataâ¤columns 2935 * @memberof Options 2936 * @type {Array} 2937 * @default undefined 2938 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.ColumnOrientedData) 2939 * @example 2940 * data: { 2941 * columns: [ 2942 * ["data1", 30, 20, 50, 40, 60, 50], 2943 * ["data2", 200, 130, 90, 240, 130, 220], 2944 * ["data3", 300, 200, 160, 400, 250, 250] 2945 * ] 2946 * } 2947 * 2948 * // for 'bar' type, data can contain: 2949 * // - an array of [start, end] data following the order 2950 * data: { 2951 * columns: [ 2952 * ["data1", -100, 50, [100, 200], [200, 300]],
2953 * ["data2", -200, 300, [-100, 100], [-50, -30]], 2954 * ], 2955 * type: "bar" 2956 * } 2957 * 2958 * // for 'range' types('area-line-range' or 'area-spline-range'), data should contain: 2959 * // - an array of [high, mid, low] data following the order 2960 * // - or an object with 'high', 'mid' and 'low' key value 2961 * data: { 2962 * columns: [ 2963 * ["data1", 2964 * [150, 140, 110], // or {high:150, mid: 140, low: 110} 2965 * [150, 140, 110], 2966 * [150, 140, 110] 2967 * ] 2968 * ], 2969 * type: "area-line-range" 2970 * } 2971 * 2972 * // for 'bubble' type, data can contain dimension value: 2973 * // - an array of [y, z] data following the order 2974 * // - or an object with 'y' and 'z' key value 2975 * // 'y' is for y axis coordination and 'z' is the bubble radius value 2976 * data: { 2977 * columns: [ 2978 * ["data1", 2979 * [10, 140], // or {y:10, z: 140} 2980 * [100, 30], 2981 * [50, 100] 2982 * ] 2983 * ], 2984 * type: "bubble" 2985 * } 2986 * 2987 * // for 'canlestick' type, data should contain: 2988 * // - an array of [open, high, low, close, volume(optional)] data following the order 2989 * // - or an object with 'open', 'high', 'low', 'close' and 'value'(optional) key value 2990 * data: { 2991 * columns: [ 2992 * ["data1", 2993 * [1000, 1100, 850, 870, 100], // or {open:1000, high: 1100, low: 870, volume: 100} 2994 * [870, 1250, 830, 1200] // 'volume' can be omitted 2995 * ] 2996 * ], 2997 * type: "candlestick" 2998 * } 2999 */ 3000 data_columns: undefined, 3001 /** 3002 * Used if loading JSON via data.url. 3003 * - **Available Values:** 3004 * - json 3005 * - csv 3006 * - tsv 3007 * @name dataâ¤mimeType 3008 * @memberof Options 3009 * @type {string} 3010 * @default csv 3011 * @example 3012 * data: { 3013 * mimeType: "json" 3014 * } 3015 */ 3016 data_mimeType: "csv", 3017 /** 3018 * Choose which JSON object keys correspond to desired data. 3019 * - **NOTE:** Only for JSON object given as array. 3020 * @name dataâ¤keys 3021 * @memberof Options 3022 * @type {string} 3023 * @default undefined 3024 * @example 3025 * data: { 3026 * json: [ 3027 * {name: "www.site1.com", upload: 200, download: 200, total: 400}, 3028 * {name: "www.site2.com", upload: 100, download: 300, total: 400}, 3029 * {name: "www.site3.com", upload: 300, download: 200, total: 500}, 3030 * {name: "www.site4.com", upload: 400, download: 100, total: 500} 3031 * ], 3032 * keys: { 3033 * // case 1: specify 'x' key for category axis 3034 * x: "name", // 'name' key will be used as category x axis values 3035 * value: ["upload", "download"] 3036 * 3037 * // case 2: without 'x' key for non-category axis 3038 * value: ["upload", "download"] 3039 * } 3040 * } 3041 */ 3042 data_keys: undefined, 3043 /** 3044 * Set text label to be displayed when there's no data to show. 3045 * - ex. Toggling all visible data to not be shown, unloading all current data, etc. 3046 * @name dataâ¤emptyâ¤labelâ¤text 3047 * @memberof Options 3048 * @type {string} 3049 * @default "" 3050 * @example 3051 * data: { 3052 * empty: { 3053 * label: { 3054 * text: "No Data" 3055 * } 3056 * } 3057 * } 3058 */ 3059 data_empty_label_text: "" 3060}); 3061;// CONCATENATED MODULE: ./src/config/Options/common/color.ts 3062/** 3063 * Copyright (c) 2017 ~ present NAVER Corp. 3064 * billboard.js project is licensed under the MIT license 3065 */ 3066/** 3067 * color config options 3068 */ 3069/* harmony default export */ var color = ({ 3070 /** 3071 * Set color of the data values 3072 * @name color 3073 * @memberof Options 3074 * @type {object} 3075 * @property {object} color color object 3076 * @property {string|object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs. 3077 * @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work. 3078 * @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). 3079 * - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br> 3080 * ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br> 3081 * - `bb-colorize-pattern-red` 3082 * - `bb-colorize-pattern-fff` 3083 * @property {object} [color.threshold] color threshold for gauge and tooltip color 3084 * @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. 3085 * @property {Array} [color.threshold.values] Threshold values for each steps 3086 * @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`. 3087 * @example 3088 * color: { 3089 * pattern: ["#1f77b4", "#aec7e8", ...], 3090 * 3091 * // Set colors' patterns 3092 * // it should return an array of SVGPatternElement 3093 * tiles: function() { 3094 * var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern"); 3095 * var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); 3096 * var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 3097 * 3098 * pattern.setAttribute("patternUnits", "userSpaceOnUse"); 3099 * pattern.setAttribute("width", "32"); 3100 * pattern.setAttribute("height", "32"); 3101 * 3102 * g.style.fill = "#000"; 3103 * g.style.opacity = "0.2"; 3104 * 3105 * circle1.setAttribute("cx", "3"); 3106 * circle1.setAttribute("cy", "3"); 3107 * circle1.setAttribute("r", "3"); 3108 * 3109 * g.appendChild(circle1); 3110 * pattern.appendChild(g); 3111 * 3112 * return [pattern]; 3113 * }, 3114 * 3115 * // for threshold usage, pattern values should be set for each steps 3116 * pattern: ["grey", "green", "yellow", "orange", "red"], 3117 * threshold: { 3118 * unit: "value", 3119 * 3120 * // when value is 20 => 'green', value is 40 => 'orange' will be set. 3121 * values: [10, 20, 30, 40, 50], 3122 * 3123 * // the equation for max: 3124 * // - unit == 'value': max => 30 3125 * // - unit != 'value': max => value*100/30 3126 * max: 30 3127 * }, 3128 * 3129 * // set all data to 'red' 3130 * onover: "red", 3131 *
3132 * // set different color for data 3133 * onover: { 3134 * data1: "red", 3135 * data2: "yellow" 3136 * }, 3137 * 3138 * // will pass data object to the callback 3139 * onover: function(d) { 3140 * return d.id === "data1" ? "red" : "green"; 3141 * } 3142 * } 3143 */ 3144 color_pattern: [], 3145 color_tiles: undefined, 3146 color_threshold: {}, 3147 color_onover: undefined 3148}); 3149;// CONCATENATED MODULE: ./src/config/Options/interaction/interaction.ts 3150/** 3151 * Copyright (c) 2017 ~ present NAVER Corp. 3152 * billboard.js project is licensed under the MIT license 3153 */ 3154/** 3155 * interaction config options 3156 */ 3157/* harmony default export */ var interaction = ({ 3158 /** 3159 * Interaction options 3160 * @name interaction 3161 * @memberof Options 3162 * @type {object} 3163 * @property {object} interaction Intersection object 3164 * @property {boolean} [interaction.enabled=true] Indicate if the chart should have interactions.<br> 3165 * If `false` is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled. 3166 * @property {boolean} [interaction.brighten=true] Make brighter for the selected area (ex. 'pie' type data selected area) 3167 * @property {boolean} [interaction.inputType.mouse=true] enable or disable mouse interaction 3168 * @property {boolean} [interaction.inputType.touch=true] enable or disable touch interaction 3169 * @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. 3170 * @see [Demo: touch.preventDefault](https://naver.github.io/billboard.js/demo/#Interaction.PreventScrollOnTouch) 3171 * @example 3172 * interaction: { 3173 * enabled: false, 3174 * brighten: false, 3175 * inputType: { 3176 * mouse: true, 3177 * touch: false 3178 * 3179 * // or declare preventDefault explicitly. 3180 * // In this case touch inputType is enabled by default 3181 * touch: { 3182 * preventDefault: true 3183 * 3184 * // or threshold pixel value (pixel moved from touchstart to touchmove) 3185 * preventDefault: 5 3186 * } 3187 * } 3188 * } 3189 */ 3190 interaction_enabled: !0, 3191 interaction_brighten: !0, 3192 interaction_inputType_mouse: !0, 3193 interaction_inputType_touch: {} 3194}); 3195;// CONCATENATED MODULE: ./src/config/Options/common/legend.ts 3196/** 3197 * Copyright (c) 2017 ~ present NAVER Corp. 3198 * billboard.js project is licensed under the MIT license 3199 */ 3200/** 3201 * legend config options 3202 */ 3203/* harmony default export */ var legend = ({ 3204 /** 3205 * Legend options 3206 * @name legend 3207 * @memberof Options 3208 * @type {object} 3209 * @property {object} legend Legend object 3210 * @property {boolean} [legend.show=true] Show or hide legend. 3211 * @property {boolean} [legend.hide=false] Hide legend 3212 * If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden. 3213 * @property {string|HTMLElement} [legend.contents.bindto=undefined] Set CSS selector or element reference to bind legend items. 3214 * - **NOTE:** Should be used along with `legend.contents.template`. 3215 * @property {string|Function} [legend.contents.template="<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>"] Set item's template.<br> 3216 * - If set `string` value, within template the 'color' and 'title' can be replaced using template-like syntax string: 3217 * - {=COLOR}: data color value 3218 * - {=TITLE}: data title value 3219 * - If set `function` value, will pass following arguments to the given function: 3220 * - title {string}: data's id value 3221 * - color {string}: color string 3222 * - data {Array}: data array 3223 * @property {string} [legend.position=bottom] Change the position of legend.<br> 3224 * Available values are: `bottom`, `right` and `inset` are supported. 3225 * @property {object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br> 3226 * This option accepts object that has the keys `anchor`, `x`, `y` and `step`. 3227 * - **anchor** decides the position of the legend: 3228 * - top-left 3229 * - top-right 3230 * - bottom-left 3231 * - bottom-right 3232 * - **x** and **y**:
3233 * - set the position of the legend based on the anchor. 3234 * - **step**: 3235 * - defines the max step the legend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns). 3236 * @property {boolean} [legend.equally=false] Set to all items have same width size. 3237 * @property {number} [legend.padding=0] Set padding value 3238 * @property {boolean} [legend.item.interaction=true] Set legend item interaction. 3239 * - **NOTE:** 3240 * - This setting will not have effect on `.toggle()` method. 3241 * - `legend.item.onXXX` listener options will work if set, regardless of this option value. 3242 * @property {boolean} [legend.item.interaction.dblclick=false] Set legend item to interact on double click. 3243 * - **NOTE:** 3244 * - Double clicking will make focused clicked dataseries only, hiding all others. 3245 * - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect. 3246 * - To return initial state(which all dataseries are showing), double click current focused legend item again. 3247 * - for single click case, `click + altKey(Win)/optionKey(Mac OS)` to have same effect. 3248 * - In this case, default `click` interaction will be disabled. 3249 * @property {Function} [legend.item.onclick=undefined] Set click event handler to the legend item. 3250 * - **NOTE:** 3251 * - When set, default `click` interaction will be disabled. 3252 * - When `interaction.dblclick=true` is set, will be called on double click. 3253 * @property {Function} [legend.item.onover=undefined] Set mouse/touch over event handler to the legend item. 3254 * - **NOTE:** When set, default `mouseover` interaction will be disabled. 3255 * @property {Function} [legend.item.onout=undefined] Set mouse/touch out event handler to the legend item. 3256 * - **NOTE:** When set, default `mouseout` interaction will be disabled. 3257 * @property {number} [legend.item.tile.width=10] Set width for 'rectangle' legend item tile element. 3258 * @property {number} [legend.item.tile.height=10] Set height for 'rectangle' legend item tile element. 3259 * @property {number} [legend.item.tile.r=5] Set the radius for 'circle' legend item tile type. 3260 * @property {string} [legend.item.tile.type="rectangle"] Set legend item shape type.<br> 3261 * - **Available Values:** 3262 * - circle 3263 * - rectangle 3264 * @property {boolean} [legend.usePoint=false] Whether to use custom points in legend. 3265 * @see [Demo: item.interaction](https://naver.github.io/billboard.js/demo/#Legend.LegendItemInteraction) 3266 * @see [Demo: item.tile.type](https://naver.github.io/billboard.js/demo/#Legend.LegendItemTileType) 3267 * @see [Demo: position](https://naver.github.io/billboard.js/demo/#Legend.LegendPosition) 3268 * @see [Demo: contents.template](https://naver.github.io/billboard.js/demo/#Legend.LegendTemplate1) 3269 * @see [Demo: usePoint](https://naver.github.io/billboard.js/demo/#Legend.usePoint) 3270 * @example 3271 * legend: { 3272 * show: true, 3273 * hide: true, 3274 * //or hide: "data1" 3275 * //or hide: ["data1", "data2"] 3276 * contents: { 3277 * bindto: "#legend", // <ul id='legend'></ul> 3278 * 3279 * // will be as: <li style='background-color:#1f77b4'>data1</li> 3280 * template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>" 3281 * 3282 * // or using function 3283 * template: function(id, color, data) { 3284 * // if you want omit some legend, return falsy value 3285 * if (id !== "data1") { 3286 * return "<li style='background-color:"+ color +">"+ id +"</li>"; 3287 * } 3288 * } 3289 * }, 3290 * position: "bottom", // bottom, right, inset 3291 * inset: { 3292 * anchor: "top-right" // top-left, top-right, bottom-left, bottom-right 3293 * x: 20, 3294 * y: 10, 3295 * step: 2 3296 * }, 3297 * equally: false, 3298 * padding: 10, 3299 * item: { 3300 * // will disable default interaction 3301 * interaction: false, 3302 * 3303 * // set legend interact on double click 3304 * // by double clicking, will make focused clicked dataseries only, hiding all others. 3305 * interaction: { 3306 * dblclick: true 3307 * } 3308 * 3309 * // when set below callback, will disable corresponding default interactions 3310 * onclick: function(id) { ... }, 3311 * onover: function(id) { ... }, 3312 * onout: function(id) { ... }, 3313 * 3314 * // set tile's size 3315 * tile: { 3316 * // set tile type 3317 * type: "circle" // or "rectangle" (default) 3318 * 3319 * // width & height, are only applicable for 'rectangle' legend type 3320 * width: 15, 3321 * height: 15 3322 * 3323 * // radis is only applicable for 'circle' legend type 3324 * r: 10 3325 * } 3326 * }, 3327 * usePoint: true 3328 * } 3329 */
3330 legend_contents_bindto: undefined, 3331 legend_contents_template: "<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>", 3332 legend_equally: !1, 3333 legend_hide: !1, 3334 legend_inset_anchor: "top-left", 3335 legend_inset_x: 10, 3336 legend_inset_y: 0, 3337 legend_inset_step: undefined, 3338 legend_item_interaction: !0, 3339 legend_item_dblclick: !1, 3340 legend_item_onclick: undefined, 3341 legend_item_onover: undefined, 3342 legend_item_onout: undefined, 3343 legend_item_tile_width: 10, 3344 legend_item_tile_height: 10, 3345 legend_item_tile_r: 5, 3346 legend_item_tile_type: "rectangle", 3347 legend_padding: 0, 3348 legend_position: "bottom", 3349 legend_show: !0, 3350 legend_usePoint: !1 3351}); 3352;// CONCATENATED MODULE: ./src/config/Options/common/title.ts 3353/** 3354 * Copyright (c) 2017 ~ present NAVER Corp. 3355 * billboard.js project is licensed under the MIT license 3356 */ 3357/** 3358 * title config options 3359 */ 3360/* harmony default export */ var title = ({ 3361 /** 3362 * Set title options 3363 * @name title 3364 * @memberof Options 3365 * @type {object} 3366 * @property {object} title Title object 3367 * @property {string} [title.text] Title text. If contains `\n`, it's used as line break allowing multiline title. 3368 * @property {number} [title.padding.top=0] Top padding value. 3369 * @property {number} [title.padding.right=0] Right padding value. 3370 * @property {number} [title.padding.bottom=0] Bottom padding value. 3371 * @property {number} [title.padding.left=0] Left padding value. 3372 * @property {string} [title.position=center] Available values are: 'center', 'right' and 'left'. 3373 * @see [Demo](https://naver.github.io/billboard.js/demo/#Title.MultilinedTitle) 3374 * @example 3375 * title: { 3376 * text: "Title Text", 3377 * 3378 * // or Multiline title text 3379 * text: "Main title text\nSub title text", 3380 * 3381 * padding: { 3382 * top: 10, 3383 * right: 10, 3384 * bottom: 10, 3385 * left: 10 3386 * }, 3387 * position: "center" 3388 * } 3389 */ 3390 title_text: undefined, 3391 title_padding: { 3392 top: 0, 3393 right: 0, 3394 bottom: 0, 3395 left: 0 3396 }, 3397 title_position: "center" 3398}); 3399;// CONCATENATED MODULE: ./src/config/Options/common/tooltip.ts 3400 3401var tooltip_this = undefined; 3402/** 3403 * Copyright (c) 2017 ~ present NAVER Corp. 3404 * billboard.js project is licensed under the MIT license 3405 */ 3406/** 3407 * tooltip config options 3408 */ 3409/* harmony default export */ var tooltip = ({ 3410 /** 3411 * Tooltip options 3412 * @name tooltip 3413 * @memberof Options 3414 * @type {object} 3415 * @property {object} tooltip Tooltip object 3416 * @property {boolean} [tooltip.show=true] Show or hide tooltip. 3417 * @property {boolean} [tooltip.doNotHide=false] Make tooltip keep showing not hiding on interaction. 3418 * @property {boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points. 3419 * - **NOTE:** The overlapped data points will be displayed as grouped even if set false. 3420 * @property {boolean} [tooltip.linked=false] Set if tooltips on all visible charts with like x points are shown together when one is shown. 3421 * @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. 3422 * @property {Function} [tooltip.format.title] Set format for the title of tooltip.<br> 3423 * Specified function receives x of the data point to show. 3424 * @property {Function} [tooltip.format.name] Set format for the name of each data in tooltip.<br> 3425 * 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. 3426 * @property {Function} [tooltip.format.value] Set format for the value of each data value in tooltip. If undefined returned, the row of that value will be skipped to be called. 3427 * - Will pass following arguments to the given function: 3428 * - `value {string}`: Value of the data point. If data row contains multiple or ranged(ex. candlestick, area range, etc.) value, formatter will be called as value length. 3429 * - `ratio {number}`: Ratio of the data point in the `pie/donut/gauge` and `area/bar` when contains grouped data. Otherwise is `undefined`. 3430 * - `id {string}`: id of the data point 3431 * - `index {number}`: Index of the data point 3432 * @property {Function} [tooltip.position] Set custom position function for the tooltip.<br> 3433 * This option can be used to modify the tooltip position by returning object that has top and left. 3434 * - Will pass following arguments to the given function: 3435 * - `data {Array}`: Current selected data array object. 3436 * - `width {number}`: Width of tooltip. 3437 * - `height {number}`: Height of tooltip. 3438 * - `element {SVGElement}`: Tooltip event bound element 3439 * - `pos {object}`: Current position of the tooltip. 3440 * @property {Function|object} [tooltip.contents] Set custom HTML for the tooltip.<br> 3441 * If tooltip.grouped is true, data includes multiple data points.<br><br> 3442 * Specified function receives `data` array and `defaultTitleFormat`, `defaultValueFormat` and `color` functions of the data point to show. 3443 * - **Note:** 3444 * - defaultTitleFormat: 3445 * - if `axis.x.tick.format` option will be used if set. 3446 * - otherwise, will return function based on tick format type(category, timeseries). 3447 * - defaultValueFormat: 3448 * - for Arc type (except gauge, radar), the function will return value from `(ratio * 100).toFixed(1)`. 3449 * - for Axis based types, will be used `axis.[y|y2].tick.format` option value if is set. 3450 * - otherwise, will parse value and return as number. 3451 * @property {string|HTMLElement} [tooltip.contents.bindto=undefined] Set CSS selector or element reference to bind tooltip. 3452 * - **NOTE:** When is specified, will not be updating tooltip's position. 3453 * @property {string} [tooltip.contents.template=undefined] Set tooltip's template.<br><br> 3454 * Within template, below syntax will be replaced using template-like syntax string: 3455 * - **{{ ... }}**: the doubly curly brackets indicate loop block for data rows. 3456 * - **{=CLASS_TOOLTIP}
3456**: default tooltip class name `bb-tooltip`. 3457 * - **{=CLASS_TOOLTIP_NAME}**: default tooltip data class name (ex. `bb-tooltip-name-data1`) 3458 * - **{=TITLE}**: title value. 3459 * - **{=COLOR}**: data color. 3460 * - **{=VALUE}**: data value. 3461 * @property {object} [tooltip.contents.text=undefined] Set additional text content within data loop, using template syntax. 3462 * - **NOTE:** It should contain `{ key: Array, ... }` value 3463 * - 'key' name is used as substitution within template as '{=KEY}' 3464 * - The value array length should match with the data length 3465 * @property {boolean} [tooltip.init.show=false] Show tooltip at the initialization. 3466 * @property {number} [tooltip.init.x=0] Set x Axis index(or index for Arc(donut, gauge, pie) types) to be shown at the initialization. 3467 * @property {object} [tooltip.init.position] Set the position of tooltip at the initialization. 3468 * @property {Function} [tooltip.onshow] Set a callback that will be invoked before the tooltip is shown. 3469 * @property {Function} [tooltip.onhide] Set a callback that will be invoked before the tooltip is hidden. 3470 * @property {Function} [tooltip.onshown] Set a callback that will be invoked after the tooltip is shown 3471 * @property {Function} [tooltip.onhidden] Set a callback that will be invoked after the tooltip is hidden. 3472 * @property {string|Function|null} [tooltip.order=null] Set tooltip data display order.<br><br> 3473 * **Available Values:** 3474 * - `desc`: In descending data value order 3475 * - `asc`: In ascending data value order 3476 * - `null`: It keeps the data display order<br> 3477 * **NOTE:** When `data.groups` is set, the order will follow as the stacked graph order.<br> 3478 * If want to order as data bound, set any value rather than asc, desc or null. (ex. empty string "") 3479 * - `function(data1, data2) { ... }`: [Array.sort compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters) 3480 * @see [Demo: Hide Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.HideTooltip) 3481 * @see [Demo: Tooltip Grouping](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipGrouping) 3482 * @see [Demo: Tooltip Format](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipFormat) 3483 * @see [Demo: Linked Tooltip](https://naver.github.io/billboard.js/demo/#Tooltip.LinkedTooltips) 3484 * @see [Demo: Tooltip Position](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipPosition) 3485 * @see [Demo: Tooltip Template](https://naver.github.io/billboard.js/demo/#Tooltip.TooltipTemplate) 3486 * @example 3487 * tooltip: { 3488 * show: true, 3489 * doNotHide: true, 3490 * grouped: false, 3491 * format: { 3492 * title: function(x) { return "Data " + x; }, 3493 * name: function(name, ratio, id, index) { return name; }, 3494 * 3495 * // If data row contains multiple or ranged(ex. candlestick, area range, etc.) value, 3496 * // formatter will be called as value length times. 3497 * value: function(value, ratio, id, index) { return ratio; } 3498 * }, 3499 * position: function(data, width, height, element, pos) { 3500 * // data: [{x, index, id, name, value}, ...] 3501 * // width: Tooltip width 3502 * // height: Tooltip height 3503 * // element: Tooltip event bound element 3504 * // pos: { 3505 * // x: Current mouse event x position, 3506 * // y: Current mouse event y position, 3507 * // xAxis: Current x Axis position (the value is given for axis based chart type only) 3508 * // yAxis: Current y Axis position value or function(the value is given for axis based chart type only) 3509 * // } 3510 * 3511 * // yAxis will work differently per data lenghts 3512 * // - a) Single data: `yAxis` will return `number` value 3513 * // - b) Multiple data: `yAxis` will return a function with property value 3514 * 3515 * // a) Single data: 3516 * // Get y coordinate 3517 * pos.yAxis; // y axis coordinate value of current data point 3518 * 3519 * // b) Multiple data: 3520 * // Get y coordinate of value 500, where 'data1' scales(y or y2). 3521 * // When 'data.axes' option is used, data can bound to different axes. 3522 * // - when "data.axes={data1: 'y'}", wil return y value from y axis scale. 3523 * // - when "data.axes={data1: 'y2'}", wil return y value from y2 axis scale. 3524 * pos.yAxis(500, "data1"); // will return y coordinate value of data1 3525 * 3526 * pos.yAxis(500); // get y coordinate with value of 500, using y axis scale 3527 * pos.yAxis(500, null, "y2"); // get y coordinate with value of 500, using y2 axis scale 3528 * 3529 * return { 3530 * top: 0, 3531 * left: 0 3532 * } 3533 * }, 3534 * 3535 * contents: function(d, defaultTitleFormat, defaultValueFormat, color) { 3536 * return ... // formatted html as you want 3537 * }, 3538 * 3539 * // specify tooltip contents using template 3540 * // - example of HTML returned: 3541 * // <ul class="bb-tooltip"> 3542 * // <li class="bb-tooltip-name-data1"><span>250</span><br><span style="color:#00c73c">data1</span></li> 3543 * // <li class="bb-tooltip-name-data2"><span>50</span><br><span style="color:#fa7171">data2</span></li> 3544 * // </ul> 3545 * contents: { 3546 * bindto: "#tooltip", 3547 * template: '<ul class={=CLASS_TOOLTIP}>{{' + 3548 * '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>
3548' + 3549 * '<span style=color:{=COLOR}>{=NAME}</span></li>' + 3550 * '}}</ul>' 3551 * } 3552 * 3553 * // with additional text value 3554 * // - example of HTML returned: 3555 * // <ul class="bb-tooltip"> 3556 * // <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li> 3557 * // <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li> 3558 * // </ul> 3559 * contents: { 3560 * bindto: "#tooltip", 3561 * text: { 3562 * // a) 'key' name is used as substitution within template as '{=KEY}' 3563 * // b) the length should match with the data length 3564 * VAR1: ["text1", "text2"], 3565 * VAR2: ["comment1", "comment2"], 3566 * }, 3567 * template: '<ul class={=CLASS_TOOLTIP}>{{' + 3568 * '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' + 3569 * '<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' + 3570 * '}}</ul>' 3571 * } 3572 * 3573 * // sort tooltip data value display in ascending order 3574 * order: "asc", 3575 * 3576 * // specifying sort function 3577 * order: function(a, b) { 3578 * // param data passed format 3579 * {x: 5, value: 250, id: "data1", index: 5, name: "data1"} 3580 * ... 3581 * }, 3582 * 3583 * // show at the initialization 3584 * init: { 3585 * show: true, 3586 * x: 2, // x Axis index (or index for Arc(donut, gauge, pie) types) 3587 * position: { 3588 * top: "150px", // specify as number or as string with 'px' unit string 3589 * left: 250 // specify as number or as string with 'px' unit string 3590 * } 3591 * }, 3592 * 3593 * // fires prior tooltip is shown 3594 * onshow: function(selectedData) { 3595 * // current dataset selected 3596 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...] 3597 * selectedData; 3598 * }, 3599 * 3600 * // fires prior tooltip is hidden 3601 * onhide: function(selectedData) { 3602 * // current dataset selected 3603 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...] 3604 * selectedData; 3605 * }, 3606 * 3607 * // fires after tooltip is shown 3608 * onshown: function(selectedData) { 3609 * // current dataset selected 3610 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...] 3611 * selectedData; 3612 * }, 3613 * 3614 * // fires after tooltip is hidden 3615 * onhidden: function(selectedData) { 3616 * // current dataset selected 3617 * // ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...] 3618 * selectedData; 3619 * }, 3620 * 3621 * // Link any tooltips when multiple charts are on the screen where same x coordinates are available 3622 * // Useful for timeseries correlation 3623 * linked: true, 3624 * 3625 * // Specify name to interact those with the same name only. 3626 * linked: { 3627 * name: "some-group" 3628 * } 3629 * } 3630 */ 3631 tooltip_show: !0, 3632 tooltip_doNotHide: !1, 3633 tooltip_grouped: !0, 3634 tooltip_format_title: undefined, 3635 tooltip_format_name: undefined, 3636 tooltip_format_value: undefined, 3637 tooltip_position: undefined, 3638 tooltip_contents: {}, 3639 tooltip_init_show: !1, 3640 tooltip_init_x: 0, 3641 tooltip_init_position: undefined, 3642 tooltip_linked: !1, 3643 tooltip_linked_name: "", 3644 tooltip_onshow: function tooltip_onshow() { 3645 _newArrowCheck(this, tooltip_this); 3646 }.bind(undefined), 3647 tooltip_onhide: function tooltip_onhide() { 3648 _newArrowCheck(this, tooltip_this); 3649 }.bind(undefined), 3650 tooltip_onshown: function tooltip_onshown() { 3651 _newArrowCheck(this, tooltip_this); 3652 }.bind(undefined), 3653 tooltip_onhidden: function tooltip_onhidden() { 3654 _newArrowCheck(this, tooltip_this); 3655 }.bind(undefined), 3656 tooltip_order: null 3657}); 3658;// CONCATENATED MODULE: ./src/config/Options/Options.ts 3659 3660 3661function Options_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 3662function Options_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {};
3662 r % 2 ? Options_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Options_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 3663/** 3664 * Copyright (c) 2017 ~ present NAVER Corp. 3665 * billboard.js project is licensed under the MIT license 3666 */ 3667// common 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678/** 3679 * Class to set options on generating chart. 3680 * - It's instantiated internally, not exposed for public. 3681 * @class Options 3682 * @see {@link bb.generate} to use these options on generating the chart 3683 */ 3684let Options = /*#__PURE__*/function () { 3685 Options.setOptions = function setOptions(options) { 3686 var _this = this; 3687 this.data = options.reduce(function (a, c) { 3688 _newArrowCheck(this, _this); 3689 return Options_objectSpread(Options_objectSpread({}, a), c); 3690 }.bind(this), this.data); 3691 }; 3692 function Options() { 3693 return deepClone(main, boost, data, color, interaction, legend, title, tooltip, Options.data); 3694 } 3695 return Options; 3696}(); 3697Options.data = {}; 3698 3699;// CONCATENATED MODULE: ./src/module/Cache.ts 3700 3701/** 3702 * Copyright (c) 2017 ~ present NAVER Corp. 3703 * billboard.js project is licensed under the MIT license 3704 */ 3705 3706/** 3707 * Constant for cache key 3708 * - NOTE: Prefixed with '$', will be resetted when .load() is called 3709 * @private 3710 */ 3711const KEY = { 3712 bubbleBaseLength: "$baseLength", 3713 colorPattern: "__colorPattern__", 3714 dataMinMax: "$dataMinMax", 3715 dataTotalSum: "$dataTotalSum", 3716 dataTotalPerIndex: "$totalPerIndex", 3717 legendItemTextBox: "legendItemTextBox", 3718 radarPoints: "$radarPoints", 3719 setOverOut: "setOverOut", 3720 callOverOutForTouch: "callOverOutForTouch", 3721 textRect: "textRect" 3722}; 3723let Cache = /*#__PURE__*/function () { 3724 function Cache() { 3725 this.cache = {}; 3726 } 3727 var _proto = Cache.prototype; 3728 /** 3729 * Add cache 3730 * @param {string} key Cache key 3731 * @param {*} value Value to be stored 3732 * @param {boolean} isDataType Weather the cache is data typed '{id:'data', id_org: 'data', values: [{x:0, index:0,...}, ...]}' 3733 * @returns {*} Added data value 3734 * @private 3735 */ 3736 _proto.add = function add(key, value, isDataType) { 3737 if (isDataType === void 0) { 3738 isDataType = !1; 3739 } 3740 this.cache[key] = isDataType ? this.cloneTarget(value) : value; 3741 return this.cache[key]; 3742 } 3743 3744 /** 3745 * Remove cache 3746 * @param {string|Array} key Cache key 3747 * @private 3748 */; 3749 _proto.remove = function remove(key) { 3750 var _this = this; 3751 (isString(key) ? [key] : key).forEach(function (v) { 3752 _newArrowCheck(this, _this); 3753 return delete this.cache[v]; 3754 }.bind(this)); 3755 } 3756 3757 /** 3758 * Get cahce 3759 * @param {string|Array} key Cache key 3760 * @param {boolean} isDataType Weather the cache is data typed '{id:'data', id_org: 'data', values: [{x:0, index:0,...}, ...]}' 3761 * @returns {*} 3762 * @private 3763 */; 3764 _proto.get = function get(key, isDataType) { 3765 if (isDataType === void 0) { 3766 isDataType = !1; 3767 } 3768 // when is isDataType, key should be string array 3769 if (isDataType && Array.isArray(key)) { 3770 const targets = []; 3771 for (let i = 0, id; id = key[i]; i++) { 3772 if (id in this.cache) { 3773 targets.push(this.cloneTarget(this.cache[id])); 3774 } 3775 } 3776 return targets; 3777 } else { 3778 const value = this.cache[key]; 3779 return isValue(value) ? value : null; 3780 } 3781 } 3782 3783 /** 3784 * Reset cached data 3785 * @param {boolean} all true: reset all data, false: reset only '$' prefixed key data 3786 * @private 3787 */; 3788 _proto.reset = function reset(all) { 3789 const $$ = this; 3790 for (const x in $$.cache) { 3791 // reset the prefixed '$' key(which is internal use data) only. 3792 if (all || /^\$/.test(x)) { 3793 $$.cache[x] = null; 3794 } 3795 } 3796 } 3797 3798 /** 3799 * Clone data target object 3800 * @param {object} target Data object 3801 * @returns {object} 3802 * @private 3803 */ 3804 // eslint-disable-next-line camelcase 3805 ; 3806 _proto.cloneTarget = function cloneTarget(target) { 3807 var _this2 = this; 3808 return { 3809 id: target.id, 3810 id_org: target.id_org, 3811 values: target.values.map(function (d) { 3812 _newArrowCheck(this, _this2); 3813 return { 3814 x: d.x, 3815 value: d.value, 3816 id: d.id 3817 }; 3818 }.bind(this)) 3819 }; 3820 }; 3821 return Cache;
3822}(); 3823 3824;// CONCATENATED MODULE: ./src/module/generator.ts 3825 3826/** 3827 * Copyright (c) 2017 ~ present NAVER Corp. 3828 * billboard.js project is licensed under the MIT license 3829 */ 3830 3831 3832 3833const generator_setTimeout = win.setTimeout, 3834 generator_clearTimeout = win.clearTimeout; 3835 3836/** 3837 * Generate resize queue function 3838 * @param {boolean|number} option Resize option 3839 * @returns {Fucntion} 3840 * @private 3841 */ 3842function generateResize(option) { 3843 var _this4 = this; 3844 const fn = []; 3845 let timeout; 3846 const callResizeFn = function () { 3847 var _this = this; 3848 // Delay all resize functions call, to prevent unintended excessive call from resize event 3849 callResizeFn.clear(); 3850 if (option === !1) { 3851 requestIdleCallback(function () { 3852 var _this2 = this; 3853 _newArrowCheck(this, _this); 3854 fn.forEach(function (f) { 3855 _newArrowCheck(this, _this2); 3856 return f(); 3857 }.bind(this)); 3858 }.bind(this), { 3859 timeout: 200 3860 }); 3861 } else { 3862 timeout = generator_setTimeout(function () { 3863 var _this3 = this; 3864 _newArrowCheck(this, _this); 3865 fn.forEach(function (f) { 3866 _newArrowCheck(this, _this3); 3867 return f(); 3868 }.bind(this)); 3869 }.bind(this), isNumber(option) ? option : 200); 3870 } 3871 }; 3872 callResizeFn.clear = function () { 3873 _newArrowCheck(this, _this4); 3874 if (timeout) { 3875 generator_clearTimeout(timeout); 3876 timeout = null; 3877 } 3878 }.bind(this); 3879 callResizeFn.add = function (f) { 3880 _newArrowCheck(this, _this4); 3881 return fn.push(f); 3882 }.bind(this); 3883 callResizeFn.remove = function (f) { 3884 _newArrowCheck(this, _this4); 3885 return fn.splice(fn.indexOf(f), 1); 3886 }.bind(this); 3887 return callResizeFn; 3888} 3889/** 3890 * Generate transition queue function 3891 * @returns {Function} 3892 * @private 3893 */ 3894function generateWait() { 3895 let transitionsToWait = []; 3896 3897 // 'f' is called as selection.call(f, ...); 3898 const f = function (selection, callback) { 3899 var _this5 = this; 3900 /** 3901 * Check if transition is complete 3902 * @returns {boolean} Whether transition is complete 3903 * @private 3904 */ 3905 function loop() { 3906 let done = 0; 3907 for (let i = 0, t; t = transitionsToWait[i]; i++) { 3908 if (t === !0 || t.empty != null && t.empty()) { 3909 done++; 3910 continue; 3911 } 3912 3913 // when tab isn't visible exit loop 3914 if (isTabVisible() === !1) { 3915 done = transitionsToWait.length; 3916 break; 3917 } 3918 try { 3919 t.transition(); 3920 } catch (e) { 3921 done++; 3922 } 3923 } 3924 return done === transitionsToWait.length; 3925 } 3926 runUntil(function () { 3927 _newArrowCheck(this, _this5); 3928 callback == null || callback(); 3929 }.bind(this), loop); 3930 }; 3931 f.add = function (t) { 3932 isArray(t) ? transitionsToWait = transitionsToWait.concat(t) : transitionsToWait.push(t); 3933 }; 3934 return f; 3935} 3936;// CONCATENATED MODULE: ./src/module/worker.ts 3937/** 3938 * Copyright (c) 2017 ~ present NAVER Corp. 3939 * billboard.js project is licensed under the MIT license 3940 */ 3941 3942 3943// Store blob in memory 3944const blob = {}; 3945 3946/** 3947 * Get Object URL 3948 * @param {Function} fn Function to be executed in worker 3949 * @param {Array} depsFn Dependency functions to run given function(fn). 3950 * @returns {string} 3951 * @private 3952 */ 3953function getObjectURL(fn, depsFn) { 3954 const fnString = fn.toString(), 3955 key = fnString.replace(/(function|[\s\W\n])/g, "").substring(0, 15); 3956 if (!(key in blob)) { 3957 var _depsFn$map$join; 3958 // Web Worker body 3959 blob[key] = new win.Blob([((_depsFn$map$join = depsFn == null ? void 0 : depsFn.map(String).join(";")) != null ? _depsFn$map$join : "") + "\n\n\t\t\tself.onmessage=function({data}) {\n\t\t\t\tconst result = (" + fnString + ").apply(null, data);\n\t\t\t\tself.postMessage(result);\n\t\t\t};"], { 3960 type: "text/javascript" 3961 }); 3962 } 3963 return win.URL.createObjectURL(blob[key]); 3964} 3965 3966/** 3967 * Get WebWorker instance 3968 * @param {string} src URL object as string 3969 * @returns {object} WebWorker instance 3970 * @private 3971 */ 3972function getWorker(src) { 3973 const worker = new win.Worker(src); 3974 3975 // handle error 3976 worker.onerror = function (e) { 3977 // eslint-disable-next-line no-console 3978 console.error ? console.error(e) : console.log(e); 3979 }; 3980 return worker; 3981} 3982 3983/** 3984 * Create and run on Web Worker 3985 * @param {boolean} useWorker Use Web Worker 3986 * @param {Function} fn Function to be executed in worker 3987 * @param {Function} callback Callback function to receive result from worker 3988 * @param {Array}
3988 depsFn Dependency functions to run given function(fn). 3989 * @returns {object} 3990 * @example 3991 * const worker = runWorker(function(arg) { 3992 * // do some tasks... 3993 * console.log("param:", A(arg)); 3994 * 3995 * return 1234; 3996 * }, function(data) { 3997 * // callback after worker is done 3998 * console.log("result:", data); 3999 * }, 4000 * [function A(){}] 4001 * ); 4002 * 4003 * worker(11111); 4004 * @private 4005 */ 4006function runWorker(useWorker, fn, callback, depsFn) { 4007 if (useWorker === void 0) { 4008 useWorker = !0; 4009 } 4010 let runFn = function () { 4011 const res = fn.apply(void 0, arguments); 4012 callback(res); 4013 }; 4014 if (win.Worker && useWorker) { 4015 const src = getObjectURL(fn, depsFn), 4016 worker = getWorker(src); 4017 runFn = function () { 4018 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 4019 args[_key] = arguments[_key]; 4020 } 4021 // trigger worker 4022 worker.postMessage(args); 4023 4024 // listen worker 4025 worker.onmessage = function (e) { 4026 // release object URL from memory 4027 win.URL.revokeObjectURL(src); 4028 return callback(e.data); 4029 }; 4030 4031 // return new Promise((resolve, reject) => { 4032 // worker.onmessage = ({data}) => resolve(data); 4033 // worker.onerror = reject; 4034 // }); 4035 }; 4036 } 4037 4038 return runFn; 4039} 4040// EXTERNAL MODULE: external {"commonjs":"d3-dsv","commonjs2":"d3-dsv","amd":"d3-dsv","root":"d3"} 4041var external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_ = __webpack_require__(5); 4042;// CONCATENATED MODULE: ./src/ChartInternal/data/convert.helper.ts 4043 4044/** 4045 * Copyright (c) 2017 ~ present NAVER Corp. 4046 * billboard.js project is licensed under the MIT license 4047 */ 4048 4049/* eslint-disable */ 4050 4051 4052 4053/***** Functions to be executed on Web Worker ***** 4054 * NOTE: Don't allowed to use 4055 * - arrow function syntax 4056 * - Utils functions 4057 */ 4058/** 4059 * Convert Columns data 4060 * @param {object} columns 4061 * @returns {Array} 4062 * @private 4063 */ 4064function columns(columns) { 4065 const newRows = []; 4066 columns.forEach(function (col, i) { 4067 const key = col[0]; 4068 col.forEach(function (v, j) { 4069 if (j > 0) { 4070 if (typeof newRows[j - 1] === "undefined") { 4071 newRows[j - 1] = {}; 4072 } 4073 if (typeof v === "undefined") { 4074 throw new Error("Source data is missing a component at (" + i + ", " + j + ")!"); 4075 } 4076 newRows[j - 1][key] = v; 4077 } 4078 }); 4079 }); 4080 return newRows; 4081} 4082 4083/** 4084 * Convert Rows data 4085 * @param {object} columns 4086 * @returns {Array} 4087 * @private 4088 */ 4089function rows(rows) { 4090 const keys = rows[0], 4091 newRows = []; 4092 rows.forEach(function (row, i) { 4093 if (i > 0) { 4094 const newRow = {}; 4095 row.forEach(function (v, j) { 4096 if (typeof v === "undefined") { 4097 throw new Error("Source data is missing a component at (" + i + ", " + j + ")!"); 4098 } 4099 newRow[keys[j]] = v; 4100 });
4101 newRows.push(newRow); 4102 } 4103 }); 4104 return newRows; 4105} 4106 4107/** 4108 * Convert JSON data 4109 * @param {object} columns 4110 * @returns {Array} 4111 * @private 4112 */ 4113function json(json, keysParam) { 4114 const newRows = []; 4115 let targetKeys, data; 4116 if (Array.isArray(json)) { 4117 const findValueInJson = function (object, path) { 4118 if (object[path] !== undefined) { 4119 return object[path]; 4120 } 4121 const convertedPath = path.replace(/\[(\w+)\]/g, ".$1"), 4122 pathArray = convertedPath.replace(/^\./, "").split("."); // convert indexes to properties (replace [] with .) 4123 // strip a leading dot 4124 let target = object; 4125 pathArray.some(function (k) { 4126 return !(target = target && k in target ? target[k] : undefined); 4127 }); 4128 return target; 4129 }; 4130 if (keysParam.x) { 4131 targetKeys = keysParam.value.concat(keysParam.x); 4132 } else { 4133 targetKeys = keysParam.value; 4134 } 4135 newRows.push(targetKeys); 4136 json.forEach(function (o) { 4137 const newRow = targetKeys.map(function (key) { 4138 // convert undefined to null because undefined data will be removed in convertDataToTargets() 4139 let v = findValueInJson(o, key); 4140 if (typeof v === "undefined") { 4141 v = null; 4142 } 4143 return v; 4144 });
4145 newRows.push(newRow); 4146 }); 4147 data = rows(newRows); 4148 } else { 4149 Object.keys(json).forEach(function (key) { 4150 const tmp = json[key].concat(); 4151 tmp.unshift == null || tmp.unshift(key); 4152 newRows.push(tmp); 4153 }); 4154 data = columns(newRows); 4155 } 4156 return data; 4157} 4158 4159/***** Functions can't be executed on Web Worker *****/ 4160/** 4161 * Convert URL data 4162 * @param {string} url Remote URL 4163 * @param {string} mimeType MIME type string: json | csv | tsv 4164 * @param {object} headers Header object 4165 * @param {object} keys Key object 4166 * @param {Function} done Callback function 4167 * @private 4168 */ 4169function url(url, mimeType, headers, keys, done) { 4170 if (mimeType === void 0) { 4171 mimeType = "csv"; 4172 } 4173 const req = new XMLHttpRequest(), 4174 converter = { 4175 csv: csv, 4176 tsv: tsv, 4177 json: json 4178 }; 4179 req.open("GET", url); 4180 if (headers) { 4181 Object.keys(headers).forEach(function (key) { 4182 req.setRequestHeader(key, headers[key]); 4183 }); 4184 } 4185 req.onreadystatechange = function () { 4186 if (req.readyState === 4) { 4187 if (req.status === 200) { 4188 const response = req.responseText; 4189 response && done.call(this, converter[mimeType](mimeType === "json" ? JSON.parse(response) : response, keys)); 4190 } else { 4191 throw new Error(url + ": Something went wrong loading!"); 4192 } 4193 } 4194 }; 4195 req.send(); 4196} 4197 4198/** 4199 * Convert CSV/TSV data 4200 * @param {object} parser Parser object 4201 * @param {object} xsv Data 4202 * @returns {object} 4203 * @private 4204 */ 4205function convertCsvTsvToData(parser, xsv) { 4206 var _this = this; 4207 const rows = parser.rows(xsv); 4208 let d; 4209 if (rows.length === 1) { 4210 d = [{}]; 4211 rows[0].forEach(function (id) { 4212 _newArrowCheck(this, _this); 4213 d[0][id] = null; 4214 }.bind(this)); 4215 } else { 4216 d = parser.parse(xsv); 4217 } 4218 return d; 4219} 4220function csv(xsv) { 4221 return convertCsvTsvToData({ 4222 rows: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_.csvParseRows, 4223 parse: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_.csvParse 4224 }, xsv); 4225} 4226function tsv(tsv) { 4227 return convertCsvTsvToData({ 4228 rows: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_.tsvParseRows, 4229 parse: external_commonjs_d3_dsv_commonjs2_d3_dsv_amd_d3_dsv_root_d3_.tsvParse 4230 }, tsv); 4231} 4232;// CONCATENATED MODULE: ./src/ChartInternal/data/convert.ts 4233 4234/** 4235 * Copyright (c) 2017 ~ present NAVER Corp. 4236 * billboard.js project is licensed under the MIT license 4237 */ 4238 4239 4240 4241/** 4242 * Get data key for JSON 4243 * @param {string|object} keysParam Key params 4244 * @param {object} config Config object 4245 * @returns {string} Data key 4246 * @private 4247 */ 4248function getDataKeyForJson(keysParam, config) { 4249 const keys = keysParam || (config == null ? void 0 : config.data_keys); 4250 if (keys != null && keys.x) { 4251 config.data_x = keys.x; 4252 } 4253 return keys; 4254} 4255 4256/** 4257 * Data convert 4258 * @memberof ChartInternal 4259 * @private 4260 */ 4261/* harmony default export */ var convert = ({ 4262 /** 4263 * Convert data according its type 4264 * @param {object} args data object 4265 * @param {Function} [callback] callback for url(XHR) type loading 4266 * @private 4267 */ 4268 convertData: function convertData(args, callback) { 4269 var _this = this; 4270 const config = this.config, 4271 useWorker = config.boost_useWorker; 4272 let data = args; 4273 if (args.bindto) { 4274 data = {}; 4275 ["url", "mimeType", "headers", "keys", "json", "keys", "rows", "columns"].forEach(function (v) { 4276 _newArrowCheck(this, _this); 4277 const key = "data_" + v; 4278 if (key in args) { 4279 data[v] = args[key]; 4280 } 4281 }.bind(this)); 4282 } 4283 if (data.url && callback) { 4284 url(data.url, data.mimeType, data.headers, getDataKeyForJson(data.keys, config), callback); 4285 } else if (data.json) { 4286 runWorker(useWorker, json, callback, [columns, rows])(data.json, getDataKeyForJson(data.keys, config)); 4287 } else if (data.rows) { 4288 runWorker(useWorker, rows, callback)(data.rows); 4289 } else if (data.columns) { 4290 runWorker(useWorker, columns, callback)(data.columns); 4291 } else if (args.bindto) { 4292 throw Error("url or json or rows or columns is required."); 4293 } 4294 }, 4295 convertDataToTargets: function convertDataToTargets(data, appendXs) { 4296 var _this2 = this; 4297 const $$ = this, 4298 axis = $$.axis, 4299 config = $$.config, 4300 state = $$.state, 4301 chartType = config.data_type; 4302 let isCategorized = !1, 4303 isTimeSeries = !1, 4304 isCustomX = !1; 4305 if (axis) { 4306 isCategorized = axis.isCategorized(); 4307 isTimeSeries = axis.isTimeSeries(); 4308 isCustomX = axis.isCustomX(); 4309 } 4310 const dataKeys = Object.keys(data[0] || {}),
4311 ids = dataKeys.length ? dataKeys.filter($$.isNotX, $$) : [], 4312 xs = dataKeys.length ? dataKeys.filter($$.isX, $$) : []; 4313 let xsData; 4314 4315 // save x for update data by load when custom x and bb.x API 4316 ids.forEach(function (id) { 4317 var _this3 = this; 4318 _newArrowCheck(this, _this2); 4319 const xKey = this.getXKey(id); 4320 if (isCustomX || isTimeSeries) { 4321 // if included in input data 4322 if (xs.indexOf(xKey) >= 0) { 4323 xsData = (appendXs && $$.data.xs[id] || []).concat(data.map(function (d) { 4324 _newArrowCheck(this, _this3); 4325 return d[xKey]; 4326 }.bind(this)).filter(isValue).map(function (rawX, i) { 4327 _newArrowCheck(this, _this3); 4328 return $$.generateTargetX(rawX, id, i); 4329 }.bind(this))); 4330 } else if (config.data_x) { 4331 // if not included in input data, find from preloaded data of other id's x 4332 xsData = this.getOtherTargetXs(); 4333 } else if (notEmpty(config.data_xs)) { 4334 // if not included in input data, find from preloaded data 4335 xsData = $$.getXValuesOfXKey(xKey, $$.data.targets); 4336 } 4337 // MEMO: if no x included, use same x of current will be used 4338 } else { 4339 xsData = data.map(function (d, i) { 4340 _newArrowCheck(this, _this3); 4341 return i; 4342 }.bind(this)); 4343 } 4344 xsData && (this.data.xs[id] = xsData); 4345 }.bind(this)); 4346 4347 // check x is defined 4348 ids.forEach(function (id) { 4349 _newArrowCheck(this, _this2); 4350 if (!this.data.xs[id]) { 4351 throw new Error("x is not defined for id = \"" + id + "\"."); 4352 } 4353 }.bind(this)); 4354 4355 // convert to target 4356 const targets = ids.map(function (id, index) { 4357 var _this4 = this; 4358 _newArrowCheck(this, _this2); 4359 const convertedId = config.data_idConverter.bind($$.api)(id), 4360 xKey = $$.getXKey(id), 4361 isCategory = isCustomX && isCategorized, 4362 hasCategory = isCategory && data.map(function (v) { 4363 _newArrowCheck(this, _this4); 4364 return v.x; 4365 }.bind(this)).every(function (v) { 4366 _newArrowCheck(this, _this4); 4367 return config.axis_x_categories.indexOf(v) > -1; 4368 }.bind(this)), 4369 isDataAppend = data.__append__, 4370 xIndex = xKey === null && isDataAppend ? $$.api.data.values(id).length : 0; // when .load() with 'append' option is used for indexed axis 4371 // @ts-ignore 4372 return { 4373 id: convertedId, 4374 id_org: id, 4375 values: data.map(function (d, i) { 4376 _newArrowCheck(this, _this4); 4377 const rawX = d[xKey]; 4378 let value = d[id], 4379 x; 4380 value = value !== null && !isNaN(value) && !isObject(value) ? +value : isArray(value) || isObject(value) ? value : null; 4381 4382 // use x as categories if custom x and categorized 4383 if ((isCategory || state.hasRadar) && index === 0 && !isUndefined(rawX)) { 4384 if (!hasCategory && index === 0 && i === 0 && !isDataAppend) { 4385 config.axis_x_categories = []; 4386 } 4387 x = config.axis_x_categories.indexOf(rawX); 4388 if (x === -1) { 4389 x = config.axis_x_categories.length; 4390 config.axis_x_categories.push(rawX); 4391 } 4392 } else { 4393 x = $$.generateTargetX(rawX, id, xIndex + i); 4394 } 4395 4396 // mark as x = undefined if value is undefined and filter to remove after mapped 4397 if (isUndefined(value) || $$.data.xs[id].length <= i) { 4398 x = undefined; 4399 } 4400 return { 4401 x: x, 4402 value: value, 4403 id: convertedId, 4404 index: -1 4405 }; 4406 }.bind(this)).filter(function (v) { 4407 _newArrowCheck(this, _this4); 4408 return isDefined(v.x); 4409 }.bind(this)) 4410 }; 4411 }.bind(this)); 4412 4413 // finish targets 4414 targets.forEach(function (t) { 4415 var _this5 = this, 4416 _$$$data$xs$t$id; 4417 _newArrowCheck(this, _this2); 4418 // sort values by its x 4419 if (config.data_xSort) { 4420 t.values = t.values.sort(function (v1, v2) { 4421 _newArrowCheck(this, _this5); 4422 const x1 = v1.x || v1.x === 0 ? v1.x : Infinity, 4423 x2 = v2.x || v2.x === 0 ? v2.x : Infinity; 4424 return x1 - x2; 4425 }.bind(this)); 4426 } 4427 4428 // indexing each value
4429 t.values.forEach(function (v, i) { 4430 _newArrowCheck(this, _this5); 4431 return v.index = i; 4432 }.bind(this)); 4433 4434 // this needs to be sorted because its index and value.index is identical 4435 (_$$$data$xs$t$id = $$.data.xs[t.id]) == null || _$$$data$xs$t$id.sort(function (v1, v2) { 4436 _newArrowCheck(this, _this5); 4437 return v1 - v2; 4438 }.bind(this)); 4439 }.bind(this)); 4440 4441 // cache information about values 4442 state.hasNegativeValue = $$.hasNegativeValueInTargets(targets); 4443 state.hasPositiveValue = $$.hasPositiveValueInTargets(targets); 4444 4445 // set target types 4446 if (chartType && $$.isValidChartType(chartType)) { 4447 const targetIds = $$.mapToIds(targets).filter(function (id) { 4448 _newArrowCheck(this, _this2); 4449 return !(id in config.data_types) || !$$.isValidChartType(config.data_types[id]); 4450 }.bind(this)); 4451 $$.setTargetType(targetIds, chartType); 4452 } 4453 4454 // cache as original id keyed 4455 targets.forEach(function (d) { 4456 _newArrowCheck(this, _this2); 4457 return $$.cache.add(d.id_org, d, !0); 4458 }.bind(this)); 4459 return targets; 4460 } 4461}); 4462;// CONCATENATED MODULE: ./src/ChartInternal/data/data.ts 4463 4464/** 4465 * Copyright (c) 2017 ~ present NAVER Corp. 4466 * billboard.js project is licensed under the MIT license 4467 */ 4468 4469 4470 4471 4472/* harmony default export */ var data_data = ({ 4473 isX: function isX(key) { 4474 const $$ = this, 4475 config = $$.config, 4476 dataKey = config.data_x && key === config.data_x, 4477 existValue = notEmpty(config.data_xs) && hasValue(config.data_xs, key); 4478 return dataKey || existValue; 4479 }, 4480 isNotX: function isNotX(key) { 4481 return !this.isX(key); 4482 }, 4483 isStackNormalized: function isStackNormalized() { 4484 const config = this.config; 4485 return !!(config.data_stack_normalize && config.data_groups.length); 4486 }, 4487 /** 4488 * Check if given id is grouped data or has grouped data 4489 * @param {string} id Data id value 4490 * @returns {boolean} is grouped data or has grouped data 4491 * @private 4492 */ 4493 isGrouped: function isGrouped(id) { 4494 var _this = this; 4495 const groups = this.config.data_groups; 4496 return id ? groups.some(function (v) { 4497 _newArrowCheck(this, _this); 4498 return v.indexOf(id) >= 0 && v.length > 1; 4499 }.bind(this)) : groups.length > 0; 4500 }, 4501 getXKey: function getXKey(id) { 4502 const $$ = this, 4503 config = $$.config; 4504 return config.data_x ? config.data_x : notEmpty(config.data_xs) ? config.data_xs[id] : null; 4505 }, 4506 getXValuesOfXKey: function getXValuesOfXKey(key, targets) { 4507 var _this2 = this; 4508 const $$ = this, 4509 ids = targets && notEmpty(targets) ? $$.mapToIds(targets) : []; 4510 let xValues; 4511 ids.forEach(function (id) { 4512 _newArrowCheck(this, _this2); 4513 if ($$.getXKey(id) === key) { 4514 xValues = $$.data.xs[id]; 4515 } 4516 }.bind(this)); 4517 return xValues; 4518 }, 4519 /** 4520 * Get index number based on given x Axis value 4521 * @param {Date|number|string} x x Axis to be compared 4522 * @param {Array} basedX x Axis list to be based on 4523 * @returns {number} index number 4524 * @private 4525 */ 4526 getIndexByX: function getIndexByX(x, basedX) { 4527 const $$ = this; 4528 return basedX ? basedX.indexOf(isString(x) ? x : +x) : ($$.filterByX($$.data.targets, x)[0] || { 4529 index: null 4530 }).index; 4531 }, 4532 getXValue: function getXValue(id, i) { 4533 const $$ = this; 4534 return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i; 4535 }, 4536 getOtherTargetXs: function getOtherTargetXs() { 4537 const $$ = this, 4538 idsForX = Object.keys($$.data.xs); 4539 return idsForX.length ? $$.data.xs[idsForX[0]] : null; 4540 }, 4541 getOtherTargetX: function getOtherTargetX(index) { 4542 const xs = this.getOtherTargetXs(); 4543 return xs && index < xs.length ? xs[index] : null; 4544 }, 4545 addXs: function addXs(xs) { 4546 var _this3 = this; 4547 const $$ = this, 4548 config = $$.config; 4549 Object.keys(xs).forEach(function (id) { 4550 _newArrowCheck(this, _this3); 4551 config.data_xs[id] = xs[id]; 4552 }.bind(this)); 4553 }, 4554 isMultipleX: function isMultipleX() { 4555 return notEmpty(this.config.data_xs) || this.hasType("bubble") || this.hasType("scatter"); 4556 }, 4557 addName: function addName(data) { 4558 const $$ = this, 4559 config = $$.config; 4560 let name; 4561 if (data) { 4562 name = config.data_names[data.id]; 4563 data.name = name !== undefined ? name : data.id; 4564 } 4565 return data; 4566 }, 4567 /** 4568 * Get all values on given index 4569 * @param {number} index Index 4570 * @param {boolean} filterNull Filter nullish value 4571 * @returns {Array} 4572 * @private 4573 */ 4574 getAllValuesOnIndex: function getAllValuesOnIndex(index, filterNull) { 4575 var _this4 = this; 4576 if (filterNull === void 0) { 4577 filterNull = !1; 4578 } 4579 const $$ = this; 4580 let value = $$.filterTargetsToShow($$.data.targets).map(function (t) { 4581 _newArrowCheck(this, _this4); 4582 return $$.addName($$.getValueOnIndex(t.values, index)); 4583 }.bind(this)); 4584 if (filterNull) { 4585 value = value.filter(function (v) { 4586 _newArrowCheck(this, _this4); 4587 return v && "value" in v && isValue(v.value); 4588 }.bind(this)); 4589 } 4590 return value; 4591 }, 4592 getValueOnIndex: function getValueOnIndex(values, index) { 4593 var _this5 = this; 4594 const valueOnIndex = values.filter(function (v) { 4595 _newArrowCheck(this, _this5); 4596 return v.index === index; 4597 }.bind(this)); 4598 return valueOnIndex.length ? valueOnIndex[0] : null; 4599 }, 4600 updateTargetX: function updateTargetX(targets, x) { 4601 var _this6 = this; 4602 const $$ = this;
4603 targets.forEach(function (t) { 4604 var _this7 = this; 4605 _newArrowCheck(this, _this6); 4606 t.values.forEach(function (v, i) { 4607 _newArrowCheck(this, _this7); 4608 v.x = $$.generateTargetX(x[i], t.id, i); 4609 }.bind(this)); 4610 $$.data.xs[t.id] = x; 4611 }.bind(this)); 4612 }, 4613 updateTargetXs: function updateTargetXs(targets, xs) { 4614 var _this8 = this; 4615 const $$ = this; 4616 targets.forEach(function (t) { 4617 _newArrowCheck(this, _this8); 4618 xs[t.id] && $$.updateTargetX([t], xs[t.id]); 4619 }.bind(this)); 4620 }, 4621 generateTargetX: function generateTargetX(rawX, id, index) { 4622 const $$ = this, 4623 axis = $$.axis; 4624 let x = axis != null && axis.isCategorized() ? index : rawX || index; 4625 if (axis != null && axis.isTimeSeries()) { 4626 const fn = parseDate.bind($$); 4627 x = rawX ? fn(rawX) : fn($$.getXValue(id, index)); 4628 } else if (axis != null && axis.isCustomX() && !(axis != null && axis.isCategorized())) { 4629 x = isValue(rawX) ? +rawX : $$.getXValue(id, index); 4630 } 4631 return x; 4632 }, 4633 updateXs: function updateXs(values) { 4634 var _this9 = this; 4635 if (values.length) { 4636 this.axis.xs = values.map(function (v) { 4637 _newArrowCheck(this, _this9); 4638 return v.x; 4639 }.bind(this)); 4640 } 4641 }, 4642 getPrevX: function getPrevX(i) { 4643 const x = this.axis.xs[i - 1]; 4644 return isDefined(x) ? x : null; 4645 }, 4646 getNextX: function getNextX(i) { 4647 const x = this.axis.xs[i + 1]; 4648 return isDefined(x) ? x : null; 4649 }, 4650 /** 4651 * Get base value isAreaRangeType 4652 * @param {object} data Data object 4653 * @returns {number} 4654 * @private 4655 */ 4656 getBaseValue: function getBaseValue(data) { 4657 const $$ = this, 4658 hasAxis = $$.state.hasAxis; 4659 let value = data.value; 4660 4661 // In case of area-range, data is given as: [low, mid, high] or {low, mid, high} 4662 // will take the 'mid' as the base value 4663 if (value && hasAxis) { 4664 if ($$.isAreaRangeType(data)) { 4665 value = $$.getRangedData(data, "mid"); 4666 } else if ($$.isBubbleZType(data)) { 4667 value = $$.getBubbleZData(value, "y"); 4668 } 4669 } 4670 return value; 4671 }, 4672 /** 4673 * Get min/max value from the data 4674 * @private 4675 * @param {Array} data array data to be evaluated 4676 * @returns {{min: {number}, max: {number}}} 4677 */ 4678 getMinMaxValue: function getMinMaxValue(data) { 4679 var _this10 = this; 4680 const getBaseValue = this.getBaseValue.bind(this); 4681 let min, max; 4682 (data || this.data.targets.map(function (t) { 4683 _newArrowCheck(this, _this10); 4684 return t.values; 4685 }.bind(this))).forEach(function (v, i) { 4686 _newArrowCheck(this, _this10); 4687 const value = v.map(getBaseValue).filter(isNumber); 4688 min = Math.min.apply(Math, [i ? min : Infinity].concat(value)); 4689 max = Math.max.apply(Math, [i ? max : -Infinity].concat(value)); 4690 }.bind(this)); 4691 return { 4692 min: min, 4693 max: max 4694 }; 4695 }, 4696 /** 4697 * Get the min/max data 4698 * @private 4699 * @returns {{min: Array, max: Array}} 4700 */ 4701 getMinMaxData: function getMinMaxData() { 4702 var _this11 = this; 4703 const $$ = this, 4704 cacheKey = KEY.dataMinMax; 4705 let minMaxData = $$.cache.get(cacheKey); 4706 if (!minMaxData) { 4707 const data = $$.data.targets.map(function (t) { 4708 _newArrowCheck(this, _this11); 4709 return t.values; 4710 }.bind(this)), 4711 minMax = $$.getMinMaxValue(data); 4712 let min = [], 4713 max = []; 4714 data.forEach(function (v) { 4715 _newArrowCheck(this, _this11); 4716 const minData = $$.getFilteredDataByValue(v, minMax.min), 4717 maxData = $$.getFilteredDataByValue(v, minMax.max); 4718 if (minData.length) { 4719 min = min.concat(minData); 4720 } 4721 if (maxData.length) { 4722 max = max.concat(maxData); 4723 } 4724 }.bind(this)); 4725 4726 // update the cached data 4727 $$.cache.add(cacheKey, minMaxData = { 4728 min: min, 4729 max: max 4730 }); 4731 } 4732 return minMaxData; 4733 }, 4734 /** 4735 * Get sum of data per index 4736 * @private 4737 * @returns {Array} 4738 */ 4739 getTotalPerIndex: function getTotalPerIndex() { 4740 var _this12 = this; 4741 const $$ = this, 4742 cacheKey = KEY.dataTotalPerIndex; 4743 let sum = $$.cache.get(cacheKey); 4744 if (($$.config.data_groups.length || $$.isStackNormalized()) && !sum) { 4745 sum = [];
4746 $$.data.targets.forEach(function (row) { 4747 var _this13 = this; 4748 _newArrowCheck(this, _this12); 4749 row.values.forEach(function (v, i) { 4750 _newArrowCheck(this, _this13); 4751 if (!sum[i]) { 4752 sum[i] = 0; 4753 } 4754 sum[i] += isNumber(v.value) ? v.value : 0; 4755 }.bind(this)); 4756 }.bind(this)); 4757 } 4758 return sum; 4759 }, 4760 /** 4761 * Get total data sum 4762 * @param {boolean} subtractHidden Subtract hidden data from total 4763 * @returns {number} 4764 * @private 4765 */ 4766 getTotalDataSum: function getTotalDataSum(subtractHidden) { 4767 var _this14 = this; 4768 const $$ = this, 4769 cacheKey = KEY.dataTotalSum; 4770 let total = $$.cache.get(cacheKey); 4771 if (!isNumber(total)) { 4772 const sum = mergeArray($$.data.targets.map(function (t) { 4773 _newArrowCheck(this, _this14); 4774 return t.values; 4775 }.bind(this))).map(function (v) { 4776 _newArrowCheck(this, _this14); 4777 return v.value; 4778 }.bind(this)); 4779 total = sum.length ? sum.reduce(function (p, c) { 4780 _newArrowCheck(this, _this14); 4781 return p + c; 4782 }.bind(this)) : 0; 4783 $$.cache.add(cacheKey, total); 4784 } 4785 if (subtractHidden) { 4786 total -= $$.getHiddenTotalDataSum(); 4787 } 4788 return total; 4789 }, 4790 /** 4791 * Get total hidden data sum 4792 * @returns {number} 4793 * @private 4794 */ 4795 getHiddenTotalDataSum: function getHiddenTotalDataSum() { 4796 var _this15 = this; 4797 const $$ = this, 4798 api = $$.api, 4799 hiddenTargetIds = $$.state.hiddenTargetIds; 4800 let total = 0; 4801 if (hiddenTargetIds.length) { 4802 total = api.data.values.bind(api)(hiddenTargetIds).reduce(function (p, c) { 4803 _newArrowCheck(this, _this15); 4804 return p + c; 4805 }.bind(this)); 4806 } 4807 return total; 4808 }, 4809 /** 4810 * Get filtered data by value 4811 * @param {object} data Data 4812 * @param {number} value Value to be filtered 4813 * @returns {Array} filtered array data 4814 * @private 4815 */ 4816 getFilteredDataByValue: function getFilteredDataByValue(data, value) { 4817 var _this16 = this; 4818 return data.filter(function (t) { 4819 _newArrowCheck(this, _this16); 4820 return this.getBaseValue(t) === value; 4821 }.bind(this)); 4822 }, 4823 /** 4824 * Return the max length of the data 4825 * @returns {number} max data length 4826 * @private 4827 */ 4828 getMaxDataCount: function getMaxDataCount() { 4829 var _this17 = this; 4830 return Math.max.apply(Math, this.data.targets.map(function (t) { 4831 _newArrowCheck(this, _this17); 4832 return t.values.length; 4833 }.bind(this)).concat([0])); 4834 }, 4835 getMaxDataCountTarget: function getMaxDataCountTarget() { 4836 var _this18 = this; 4837 let target = this.filterTargetsToShow() || []; 4838 const length = target.length, 4839 isInverted = this.config.axis_x_inverted; 4840 if (length > 1) { 4841 target = target.map(function (t) { 4842 _newArrowCheck(this, _this18); 4843 return t.values; 4844 }.bind(this)).reduce(function (a, b) { 4845 _newArrowCheck(this, _this18); 4846 return a.concat(b); 4847 }.bind(this)).map(function (v) { 4848 _newArrowCheck(this, _this18); 4849 return v.x; 4850 }.bind(this)); 4851 target = sortValue(getUnique(target)).map(function (x, index, array) { 4852 _newArrowCheck(this, _this18); 4853 return { 4854 x: x, 4855 index: isInverted ? array.length - index - 1 : index 4856 }; 4857 }.bind(this)); 4858 } else if (length) { 4859 target = target[0].values.concat(); 4860 } 4861 return target; 4862 }, 4863 mapToIds: function mapToIds(targets) { 4864 var _this19 = this; 4865 return targets.map(function (d) { 4866 _newArrowCheck(this, _this19); 4867 return d.id; 4868 }.bind(this)); 4869 }, 4870 mapToTargetIds: function mapToTargetIds(ids) { 4871 const $$ = this; 4872 return ids ? isArray(ids) ? ids.concat() : [ids] : $$.mapToIds($$.data.targets); 4873 }, 4874 hasTarget: function hasTarget(targets, id) { 4875 const ids = this.mapToIds(targets); 4876 for (let i = 0, val; val = ids[i]; i++) { 4877 if (val === id) { 4878 return !0; 4879 } 4880 } 4881 return !1; 4882 }, 4883 isTargetToShow: function isTargetToShow(targetId) { 4884 return this.state.hiddenTargetIds.indexOf(targetId) < 0; 4885 }, 4886 isLegendToShow: function isLegendToShow(targetId) { 4887 return this.state.hiddenLegendIds.indexOf(targetId) < 0; 4888 }, 4889 filterTargetsToShow: function filterTargetsToShow(targets) { 4890 var _this20 = this; 4891 const $$ = this; 4892 return (targets || $$.data.targets).filter(function (t) { 4893 _newArrowCheck(this, _this20); 4894 return $$.isTargetToShow(t.id); 4895 }.bind(this)); 4896 }, 4897 mapTargetsToUniqueXs: function mapTargetsToUniqueXs(targets) { 4898 var _this21 = this; 4899 const $$ = this, 4900 axis = $$.axis; 4901 let xs = []; 4902 if (targets != null && targets.length) { 4903 xs = getUnique(mergeArray(targets.map(function (t) { 4904 var _this22 = this; 4905 _newArrowCheck(this, _this21); 4906 return t.values.map(function (v) { 4907 _newArrowCheck(this, _this22); 4908 return +v.x; 4909 }.bind(this)); 4910 }.bind(this)))); 4911 xs = axis != null && axis.isTimeSeries() ? xs.map(function (x) { 4912 _newArrowCheck(this, _this21); 4913 return new Date(+x); 4914 }.bind(this)) : xs.map(Number); 4915 } 4916 return sortValue(xs); 4917 }, 4918 /** 4919 * Add to the state target Ids 4920 * @param {string} type State's prop name 4921 * @param {Array|string} targetIds Target ids array 4922 * @private 4923 */ 4924 addTargetIds: function addTargetIds(type, targetIds) { 4925 var _this23 = this; 4926 const state = this.state, 4927 ids = isArray(targetIds) ? targetIds : [targetIds]; 4928 ids.forEach(function (v) { 4929 _newArrowCheck(this, _this23); 4930 state[type].indexOf(v) < 0 && state[type].push(v); 4931 }.bind(this)); 4932 }, 4933 /** 4934 * Remove from the state target Ids 4935 * @param {string} type State's prop name 4936 * @param {Array|string} targetIds Target ids array 4937 * @private 4938 */ 4939 removeTargetIds: function removeTargetIds(type, targetIds) { 4940 var _this24 = this; 4941 const state = this.state, 4942 ids = isArray(targetIds) ? targetIds : [targetIds]; 4943 ids.forEach(function (v) { 4944 _newArrowCheck(this, _this24); 4945 const index = state[type].indexOf(v); 4946 index >= 0 && state[type].splice(index, 1); 4947 }.bind(this)); 4948 }, 4949 addHiddenTargetIds: function addHiddenTargetIds(targetIds) { 4950 this.addTargetIds("hiddenTargetIds", targetIds); 4951 }, 4952 removeHiddenTargetIds: function removeHiddenTargetIds(targetIds) { 4953 this.removeTargetIds("hiddenTargetIds", targetIds); 4954 }, 4955 addHiddenLegendIds: function addHiddenLegendIds(targetIds) { 4956 this.addTargetIds("hiddenLegendIds", targetIds); 4957 }, 4958 removeHiddenLegendIds: function removeHiddenLegendIds(targetIds) { 4959 this.removeTargetIds("hiddenLegendIds", targetIds); 4960 }, 4961 getValuesAsIdKeyed: function getValuesAsIdKeyed(targets) { 4962 var _this25 = this; 4963 const $$ = this, 4964 hasAxis = $$.state.hasAxis, 4965 ys = {}, 4966 isMultipleX = $$.isMultipleX(), 4967 xs = isMultipleX ? $$.mapTargetsToUniqueXs(targets).map(function (v) { 4968 _newArrowCheck(this, _this25); 4969 return isString(v) ? v : +v; 4970 }.bind(this)) : null;
4971 targets.forEach(function (t) { 4972 var _this26 = this; 4973 _newArrowCheck(this, _this25); 4974 const data = []; 4975 t.values.filter(function (_ref) { 4976 let value = _ref.value; 4977 _newArrowCheck(this, _this26); 4978 return isValue(value) || value === null; 4979 }.bind(this)).forEach(function (v) { 4980 _newArrowCheck(this, _this26); 4981 let value = v.value; 4982 4983 // exclude 'volume' value to correct mis domain calculation 4984 if (value !== null && $$.isCandlestickType(v)) { 4985 value = isArray(value) ? value.slice(0, 4) : [value.open, value.high, value.low, value.close]; 4986 } 4987 if (isArray(value)) { 4988 data.push.apply(data, value); 4989 } else if (isObject(value) && "high" in value) { 4990 data.push.apply(data, Object.values(value)); 4991 } else if ($$.isBubbleZType(v)) { 4992 data.push(hasAxis && $$.getBubbleZData(value, "y")); 4993 } else { 4994 if (isMultipleX) { 4995 data[$$.getIndexByX(v.x, xs)] = value; 4996 } else { 4997 data.push(value); 4998 } 4999 } 5000 }.bind(this)); 5001 ys[t.id] = data; 5002 }.bind(this)); 5003 return ys; 5004 }, 5005 checkValueInTargets: function checkValueInTargets(targets, checker) { 5006 const ids = Object.keys(targets); 5007 let values; 5008 for (let i = 0; i < ids.length; i++) { 5009 values = targets[ids[i]].values; 5010 for (let j = 0; j < values.length; j++) { 5011 if (checker(values[j].value)) { 5012 return !0; 5013 } 5014 } 5015 } 5016 return !1; 5017 }, 5018 hasMultiTargets: function hasMultiTargets() { 5019 return this.filterTargetsToShow().length > 1; 5020 }, 5021 hasNegativeValueInTargets: function hasNegativeValueInTargets(targets) { 5022 var _this27 = this; 5023 return this.checkValueInTargets(targets, function (v) { 5024 _newArrowCheck(this, _this27); 5025 return v < 0; 5026 }.bind(this)); 5027 }, 5028 hasPositiveValueInTargets: function hasPositiveValueInTargets(targets) { 5029 var _this28 = this; 5030 return this.checkValueInTargets(targets, function (v) { 5031 _newArrowCheck(this, _this28); 5032 return v > 0; 5033 }.bind(this)); 5034 }, 5035 /** 5036 * Sort targets data 5037 * Note: For stacked bar, will sort from the total sum of data series, not for each stacked bar 5038 * @param {Array} targetsValue Target value 5039 * @returns {Array} 5040 * @private 5041 */ 5042 orderTargets: function orderTargets(targetsValue) { 5043 const $$ = this, 5044 targets = [].concat(targetsValue), 5045 fn = $$.getSortCompareFn(); 5046 fn && targets.sort(fn); 5047 return targets; 5048 }, 5049 /** 5050 * Get data.order compare function 5051 * @param {boolean} isReversed for Arc & Treemap type sort order needs to be reversed 5052 * @returns {Function} compare function 5053 * @private 5054 */ 5055 getSortCompareFn: function getSortCompareFn(isReversed) { 5056 var _this29 = this; 5057 if (isReversed === void 0) { 5058 isReversed = !1; 5059 } 5060 const $$ = this, 5061 config = $$.config, 5062 order = config.data_order, 5063 orderAsc = /asc/i.test(order), 5064 orderDesc = /desc/i.test(order); 5065 let fn; 5066 if (orderAsc || orderDesc) { 5067 const reducer = function (p, c) { 5068 _newArrowCheck(this, _this29); 5069 return p + Math.abs(c.value); 5070 }.bind(this); 5071 fn = function (t1, t2) { 5072 _newArrowCheck(this, _this29); 5073 const t1Sum = "values" in t1 ? t1.values.reduce(reducer, 0) : t1.value, 5074 t2Sum = "values" in t2 ? t2.values.reduce(reducer, 0) : t2.value; 5075 return isReversed ? orderAsc ? t1Sum - t2Sum : t2Sum - t1Sum : orderAsc ? t2Sum - t1Sum : t1Sum - t2Sum; 5076 }.bind(this); 5077 } else if (isFunction(order)) { 5078 fn = order.bind($$.api); 5079 } 5080 return fn || null; 5081 }, 5082 filterByX: function filterByX(targets, x) { 5083 var _this30 = this; 5084 return mergeArray(targets.map(function (t) { 5085 _newArrowCheck(this, _this30); 5086 return t.values; 5087 }.bind(this))).filter(function (v) { 5088 _newArrowCheck(this, _this30); 5089 return v.x - x === 0; 5090 }.bind(this)); 5091 }, 5092 filterRemoveNull: function filterRemoveNull(data) { 5093 var _this31 = this; 5094 return data.filter(function (d) { 5095 _newArrowCheck(this, _this31); 5096 return isValue(this.getBaseValue(d)); 5097 }.bind(this)); 5098 }, 5099 filterByXDomain: function filterByXDomain(targets, xDomain) { 5100 var _this32 = this; 5101 return targets.map(function (t) { 5102 var _this33 = this; 5103 _newArrowCheck(this, _this32); 5104 return { 5105 id: t.id, 5106 id_org: t.id_org, 5107 values: t.values.filter(function (v) { 5108 _newArrowCheck(this, _this33); 5109 return xDomain[0] <= v.x && v.x <= xDomain[1]; 5110 }.bind(this)) 5111 }; 5112 }.bind(this)); 5113 }, 5114 hasDataLabel: function hasDataLabel() { 5115 const dataLabels = this.config.data_labels; 5116 return isboolean(dataLabels) && dataLabels || isObjectType(dataLabels) && notEmpty(dataLabels); 5117 }, 5118 /** 5119 * Get data index from the event coodinates 5120 * @param {Event} event Event object 5121 * @returns {number} 5122 */ 5123 getDataIndexFromEvent: function getDataIndexFromEvent(event) { 5124 const $$ = this, 5125 config = $$.config, 5126 _$$$state = $$.state, 5127 hasRadar = _$$$state.hasRadar, 5128 inputType = _$$$state.inputType, 5129 _$$$state$eventReceiv = _$$$state.eventReceiver, 5130 coords = _$$$state$eventReceiv.coords, 5131 rect = _$$$state$eventReceiv.rect; 5132 let index; 5133 if (hasRadar) { 5134 let target = event.target; 5135 5136 // in case of multilined axis text 5137 if (/tspan/i.test(target.tagName)) { 5138 target = target.parentNode; 5139 } 5140 const d = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(target).datum(); 5141 index = d && Object.keys(d).length === 1 ? d.index : undefined; 5142 } else { 5143 const isRotated = config.axis_rotated, 5144 e = inputType === "touch" && event.changedTouches ? event.changedTouches[0] : event;
5144 // get data based on the mouse coords 5145 index = findIndex(coords, isRotated ? e.clientY - rect.top : e.clientX - rect.left, 0, coords.length - 1, isRotated); 5146 } 5147 return index; 5148 }, 5149 getDataLabelLength: function getDataLabelLength(min, max, key) { 5150 var _this34 = this; 5151 const $$ = this, 5152 lengths = [0, 0]; 5153 $$.$el.chart.select("svg").selectAll(".dummy").data([min, max]).enter().append("text").text(function (d) { 5154 _newArrowCheck(this, _this34); 5155 return $$.dataLabelFormat(d.id)(d); 5156 }.bind(this)).each(function (d, i) { 5157 lengths[i] = this.getBoundingClientRect()[key] * 1.3; 5158 }).remove(); 5159 return lengths; 5160 }, 5161 isNoneArc: function isNoneArc(d) { 5162 return this.hasTarget(this.data.targets, d.id); 5163 }, 5164 isArc: function isArc(d) { 5165 return "data" in d && this.hasTarget(this.data.targets, d.data.id); 5166 }, 5167 findSameXOfValues: function findSameXOfValues(values, index) { 5168 const targetX = values[index].x, 5169 sames = []; 5170 let i; 5171 for (i = index - 1; i >= 0; i--) { 5172 if (targetX !== values[i].x) { 5173 break; 5174 } 5175 sames.push(values[i]); 5176 } 5177 for (i = index; i < values.length; i++) { 5178 if (targetX !== values[i].x) { 5179 break; 5180 } 5181 sames.push(values[i]); 5182 } 5183 return sames; 5184 }, 5185 findClosestFromTargets: function findClosestFromTargets(targets, pos) { 5186 var _this35 = this; 5187 const $$ = this, 5188 candidates = targets.map(function (target) { 5189 _newArrowCheck(this, _this35); 5190 return $$.findClosest(target.values, pos); 5191 }.bind(this)); 5192 // map to array of closest points of each target 5193 // decide closest point and return 5194 return $$.findClosest(candidates, pos); 5195 }, 5196 findClosest: function findClosest(values, pos) { 5197 var _this36 = this; 5198 const $$ = this, 5199 main = $$.$el.main, 5200 data = values.filter(function (v) { 5201 _newArrowCheck(this, _this36); 5202 return v && isValue(v.value); 5203 }.bind(this)); 5204 let minDist, closest; 5205 // find mouseovering bar/candlestick 5206 // https://github.com/naver/billboard.js/issues/2434 5207 data.filter(function (v) { 5208 _newArrowCheck(this, _this36); 5209 return $$.isBarType(v.id) || $$.isCandlestickType(v.id); 5210 }.bind(this)).forEach(function (v) { 5211 _newArrowCheck(this, _this36); 5212 const selector = $$.isBarType(v.id) ? "." + $BAR.chartBar + "." + $COMMON.target + $$.getTargetSelectorSuffix(v.id) + " ." + $BAR.bar + "-" + v.index : "." + $CANDLESTICK.chartCandlestick + "." + $COMMON.target + $$.getTargetSelectorSuffix(v.id) + " ." + $CANDLESTICK.candlestick + "-" + v.index + " path"; 5213 if (!closest && $$.isWithinBar(main.select(selector).node())) { 5214 closest = v; 5215 } 5216 }.bind(this)); 5217 5218 // find closest point from non-bar/candlestick 5219 data.filter(function (v) { 5220 _newArrowCheck(this, _this36); 5221 return !$$.isBarType(v.id) && !$$.isCandlestickType(v.id); 5222 }.bind(this)).forEach(function (v) { 5223 _newArrowCheck(this, _this36); 5224 const d = $$.dist(v, pos); 5225 minDist = $$.getPointSensitivity(v); 5226 if (d < minDist) { 5227 minDist = d; 5228 closest = v; 5229 } 5230 }.bind(this)); 5231 return closest; 5232 }, 5233 dist: function dist(data, pos) { 5234 const $$ = this, 5235 isRotated = $$.config.axis_rotated, 5236 scale = $$.scale, 5237 y = $$.circleY(data, data.index), 5238 x = (scale.zoom || scale.x)(data.x); 5239 5240 // true: 1, false: 0 5241 // true: 0, false: 1 5242 5243 return Math.sqrt(Math.pow(x - pos[+isRotated], 2) + Math.pow(y - pos[+!isRotated], 2)); 5244 }, 5245 /** 5246 * Convert data for step type 5247 * @param {Array} values Object data values 5248 * @returns {Array} 5249 * @private 5250 */ 5251 convertValuesToStep: function convertValuesToStep(values) { 5252 const $$ = this, 5253 axis = $$.axis, 5254 config = $$.config, 5255 stepType = config.line_step_type, 5256 isCategorized = axis ? axis.isCategorized() : !1, 5257 converted = isArray(values) ? values.concat() : [values]; 5258 if (!(isCategorized || /step\-(after|before)/.test(stepType))) { 5259 return values; 5260 } 5261 5262 // when all datas are null, return empty array 5263 // https://github.com/naver/billboard.js/issues/3124 5264 if (converted.length) { 5265 // insert & append cloning first/last value to be fully rendered covering on each gap sides 5266 const head = converted[0], 5267 tail = converted[converted.length - 1], 5268 id = head.id; 5269 let x = head.x; 5270 5271 // insert head 5272 converted.unshift({ 5273 x: --x, 5274 value: head.value, 5275 id: id 5276 }); 5277 isCategorized && stepType === "step-after" && converted.unshift({ 5278 x: --x, 5279 value: head.value, 5280 id: id 5281 }); 5282 5283 // append tail 5284 x = tail.x; 5285 converted.push({ 5286 x: ++x, 5287 value: tail.value, 5288 id: id 5289 }); 5290 isCategorized && stepType === "step-before" && converted.push({ 5291 x: ++x, 5292 value: tail.value, 5293 id: id 5294 }); 5295 } 5296 return converted; 5297 }, 5298 convertValuesToRange: function convertValuesToRange(values) { 5299 var _this37 = this; 5300 const converted = isArray(values) ? values.concat() : [values], 5301 ranges = []; 5302 converted.forEach(function (range) { 5303 _newArrowCheck(this, _this37); 5304 const x = range.x, 5305 id = range.id; 5306 ranges.push({ 5307 x: x, 5308 id: id, 5309 value: range.value[0] 5310 }); 5311 ranges.push({ 5312 x: x, 5313 id: id, 5314 value: range.value[2] 5315 }); 5316 }.bind(this)); 5317 return ranges; 5318 }, 5319 updateDataAttributes: function updateDataAttributes(name, attrs) { 5320 var _this38 = this; 5321 const $$ = this, 5322 config = $$.config, 5323 current = config["data_" + name]; 5324 if (isUndefined(attrs)) { 5325 return current; 5326 }
5327 Object.keys(attrs).forEach(function (id) { 5328 _newArrowCheck(this, _this38); 5329 current[id] = attrs[id]; 5330 }.bind(this)); 5331 $$.redraw({ 5332 withLegend: !0 5333 }); 5334 return current; 5335 }, 5336 getRangedData: function getRangedData(d, key, type) { 5337 var _this39 = this; 5338 if (key === void 0) { 5339 key = ""; 5340 } 5341 if (type === void 0) { 5342 type = "areaRange"; 5343 } 5344 const value = d == null ? void 0 : d.value; 5345 if (isArray(value)) { 5346 if (type === "bar") { 5347 return value.reduce(function (a, c) { 5348 _newArrowCheck(this, _this39); 5349 return c - a; 5350 }.bind(this)); 5351 } else { 5352 // @ts-ignore 5353 const index = { 5354 areaRange: ["high", "mid", "low"], 5355 candlestick: ["open", "high", "low", "close", "volume"] 5356 }[type].indexOf(key); 5357 return index >= 0 && value ? value[index] : undefined; 5358 } 5359 } else if (value && key) { 5360 return value[key]; 5361 } 5362 return value; 5363 }, 5364 /** 5365 * Set ratio for grouped data 5366 * @param {Array} data Data array 5367 * @private 5368 */ 5369 setRatioForGroupedData: function setRatioForGroupedData(data) { 5370 var _this40 = this; 5371 const $$ = this, 5372 config = $$.config; 5373 // calculate ratio if grouped data exists 5374 if (config.data_groups.length && data.some(function (d) { 5375 _newArrowCheck(this, _this40); 5376 return $$.isGrouped(d.id); 5377 }.bind(this))) { 5378 const setter = function (d) { 5379 _newArrowCheck(this, _this40); 5380 return $$.getRatio("index", d, !0); 5381 }.bind(this); 5382 data.forEach(function (v) { 5383 _newArrowCheck(this, _this40); 5384 "values" in v ? v.values.forEach(setter) : setter(v); 5385 }.bind(this)); 5386 } 5387 }, 5388 /** 5389 * Get ratio value 5390 * @param {string} type Ratio for given type 5391 * @param {object} d Data value object 5392 * @param {boolean} asPercent Convert the return as percent or not 5393 * @returns {number} Ratio value 5394 * @private 5395 */ 5396 getRatio: function getRatio(type, d, asPercent) { 5397 var _this41 = this; 5398 if (asPercent === void 0) { 5399 asPercent = !1; 5400 } 5401 const $$ = this, 5402 config = $$.config, 5403 state = $$.state, 5404 api = $$.api; 5405 let ratio = 0; 5406 if (d && api.data.shown().length) { 5407 ratio = d.ratio || d.value; 5408 if (type === "arc") { 5409 // if has padAngle set, calculate rate based on value 5410 if ($$.pie.padAngle()()) { 5411 ratio = d.value / $$.getTotalDataSum(!0); 5412 5413 // otherwise, based on the rendered angle value 5414 } else { 5415 const gaugeArcLength = config.gauge_fullCircle ? $$.getArcLength() : $$.getGaugeStartAngle() * -2, 5416 arcLength = $$.hasType("gauge") ? gaugeArcLength : Math.PI * 2; 5417 ratio = (d.endAngle - d.startAngle) / arcLength; 5418 } 5419 } else if (type === "index") { 5420 const dataValues = api.data.values.bind(api); 5421 let total = this.getTotalPerIndex(); 5422 if (state.hiddenTargetIds.length) { 5423 let hiddenSum = dataValues(state.hiddenTargetIds, !1); 5424 if (hiddenSum.length) { 5425 hiddenSum = hiddenSum.reduce(function (acc, curr) { 5426 var _this42 = this; 5427 _newArrowCheck(this, _this41); 5428 return acc.map(function (v, i) { 5429 _newArrowCheck(this, _this42); 5430 return (isNumber(v) ? v : 0) + curr[i]; 5431 }.bind(this)); 5432 }.bind(this)); 5433 total = total.map(function (v, i) { 5434 _newArrowCheck(this, _this41); 5435 return v - hiddenSum[i]; 5436 }.bind(this)); 5437 } 5438 } 5439 const divisor = total[d.index]; 5440 d.ratio = isNumber(d.value) && total && divisor ? d.value / divisor : 0; 5441 ratio = d.ratio; 5442 } else if (type === "radar") { 5443 ratio = parseFloat(Math.max(d.value, 0) + "") / state.current.dataMax * config.radar_size_ratio; 5444 } else if (type === "bar") { 5445 const yScale = $$.getYScaleById.bind($$)(d.id), 5446 max = yScale.domain().reduce(function (a, c) { 5447 _newArrowCheck(this, _this41); 5448 return c - a; 5449 }.bind(this)); 5450 // when all data are 0, return 0 5451 ratio = max === 0 ? 0 : Math.abs($$.getRangedData(d, null, type) / max); 5452 } else if (type === "treemap") { 5453 ratio /= $$.getTotalDataSum(!0); 5454 } 5455 } 5456 return asPercent && ratio ? ratio * 100 : ratio; 5457 }, 5458 /** 5459 * Sort data index to be aligned with x axis. 5460 * @param {Array} tickValues Tick array values 5461 * @private 5462 */ 5463 updateDataIndexByX: function updateDataIndexByX(tickValues) { 5464 var _this43 = this; 5465 const $$ = this, 5466 tickValueMap = tickValues.reduce(function (out, tick, index) { 5467 _newArrowCheck(this, _this43); 5468 out[+tick.x] = index; 5469 return out; 5470 }.bind(this), {});
5471 $$.data.targets.forEach(function (t) { 5472 var _this44 = this; 5473 _newArrowCheck(this, _this43); 5474 t.values.forEach(function (value, valueIndex) { 5475 _newArrowCheck(this, _this44); 5476 let index = tickValueMap[+value.x]; 5477 if (index === undefined) { 5478 index = valueIndex; 5479 } 5480 value.index = index; 5481 }.bind(this)); 5482 }.bind(this)); 5483 }, 5484 /** 5485 * Determine if bubble has dimension data 5486 * @param {object|Array} d data value 5487 * @returns {boolean} 5488 * @private 5489 */ 5490 isBubbleZType: function isBubbleZType(d) { 5491 const $$ = this; 5492 return $$.isBubbleType(d) && (isObject(d.value) && ("z" in d.value || "y" in d.value) || isArray(d.value) && d.value.length >= 2); 5493 }, 5494 /** 5495 * Determine if bar has ranged data 5496 * @param {Array} d data value 5497 * @returns {boolean} 5498 * @private 5499 */ 5500 isBarRangeType: function isBarRangeType(d) { 5501 var _this45 = this; 5502 const $$ = this, 5503 value = d.value; 5504 return $$.isBarType(d) && isArray(value) && value.length >= 2 && value.every(function (v) { 5505 _newArrowCheck(this, _this45); 5506 return isNumber(v); 5507 }.bind(this)); 5508 }, 5509 /** 5510 * Get data object by id 5511 * @param {string} id data id 5512 * @returns {object} 5513 * @private 5514 */ 5515 getDataById: function getDataById(id) { 5516 var _d$; 5517 const d = this.cache.get(id) || this.api.data(id); 5518 return (_d$ = d == null ? void 0 : d[0]) != null ? _d$ : d; 5519 } 5520}); 5521;// CONCATENATED MODULE: ./src/ChartInternal/data/load.ts 5522 5523/** 5524 * Copyright (c) 2017 ~ present NAVER Corp. 5525 * billboard.js project is licensed under the MIT license 5526 */ 5527 5528 5529 5530/** 5531 * Call done callback with resize after transition 5532 * @param {Function} fn Callback function 5533 * @param {boolean} resizeAfter Weather to resize chart after the load 5534 * @private 5535 */ 5536function callDone(fn, resizeAfter) { 5537 if (resizeAfter === void 0) { 5538 resizeAfter = !1; 5539 } 5540 const $$ = this, 5541 api = $$.api; 5542 resizeAfter && $$.api.flush(!0); 5543 fn == null || fn.call(api); 5544} 5545/* harmony default export */ var load = ({ 5546 load: function load(rawTargets, args) { 5547 var _this = this; 5548 const $$ = this, 5549 data = $$.data, 5550 append = args.append; 5551 let targets = rawTargets; 5552 if (targets) { 5553 // filter loading targets if needed 5554 if (args.filter) { 5555 targets = targets.filter(args.filter); 5556 } 5557 5558 // set type if args.types || args.type specified 5559 if (args.type || args.types) { 5560 targets.forEach(function (t) { 5561 var _args$types; 5562 _newArrowCheck(this, _this); 5563 const type = ((_args$types = args.types) == null ? void 0 : _args$types[t.id]) || args.type; 5564 $$.setTargetType(t.id, type); 5565 }.bind(this)); 5566 } 5567 5568 // Update/Add data 5569 data.targets.forEach(function (d) { 5570 _newArrowCheck(this, _this); 5571 for (let i = 0; i < targets.length; i++) { 5572 if (d.id === targets[i].id) { 5573 d.values = append ? d.values.concat(targets[i].values) : targets[i].values; 5574 targets.splice(i, 1); 5575 break; 5576 } 5577 } 5578 }.bind(this)); 5579 data.targets = data.targets.concat(targets); // add remained 5580 } 5581 5582 // Set targets 5583 $$.updateTargets(data.targets); 5584 5585 // Redraw with new targets 5586 $$.redraw({ 5587 withUpdateOrgXDomain: !0, 5588 withUpdateXDomain: !0, 5589 withLegend: !0 5590 }); 5591 5592 // Update current state chart type and elements list after redraw 5593 $$.updateTypesElements(); 5594 callDone.call($$, args.done, args.resizeAfter); 5595 }, 5596 loadFromArgs: function loadFromArgs(args) { 5597 var _this2 = this; 5598 const $$ = this; 5599 5600 // prevent load when chart is already destroyed 5601 if (!$$.config) { 5602 return; 5603 } 5604 5605 // reset internally cached data 5606 $$.cache.reset(); 5607 $$.convertData(args, function (d) { 5608 _newArrowCheck(this, _this2); 5609 const data = args.data || d; 5610 args.append && (data.__append__ = !0); 5611 data && $$.load($$.convertDataToTargets(data), args); 5612 }.bind(this)); 5613 }, 5614 unload: function unload(rawTargetIds, customDoneCb) { 5615 var _this3 = this; 5616 const $$ = this, 5617 state = $$.state, 5618 $el = $$.$el, 5619 $T = $$.$T; 5620 let done = customDoneCb, 5621 targetIds = rawTargetIds; 5622 // reset internally cached data 5623 $$.cache.reset(); 5624 if (!done) { 5625 done = function () { 5626 _newArrowCheck(this, _this3); 5627 }.bind(this); 5628 } 5629 5630 // filter existing target 5631 targetIds = targetIds.filter(function (id) { 5632 _newArrowCheck(this, _this3); 5633 return $$.hasTarget($$.data.targets, id); 5634 }.bind(this)); 5635 5636 // If no target, call done and return 5637 if (!targetIds || targetIds.length === 0) { 5638 done(); 5639 return; 5640 } 5641 const targets = $el.svg.selectAll(targetIds.map(function (id) { 5642 _newArrowCheck(this, _this3); 5643 return $$.selectorTarget(id); 5644 }.bind(this))); 5645 $T(targets).style("opacity", "0").remove().call(endall, done); 5646 targetIds.forEach(function (id) { 5647 var _this4 = this; 5648 _newArrowCheck(this, _this3); 5649 // Reset fadein for future load 5650 state.withoutFadeIn[id] = !1; 5651 5652 // Remove target's elements 5653 if ($el.legend) { 5654 $el.legend.selectAll("." + $LEGEND.legendItem + $$.getTargetSelectorSuffix(id)).remove(); 5655 } 5656 5657 // Remove target 5658 $$.data.targets = $$.data.targets.filter(function (t) { 5659 _newArrowCheck(this, _this4); 5660 return t.id !== id; 5661 }.bind(this)); 5662 }.bind(this)); 5663 5664 // since treemap uses different data types, it needs to be transformed 5665 state.hasTreemap && $$.updateTargetsForTreemap($$.data.targets); 5666 5667 // Update current state chart type and elements list after redraw 5668 $$.updateTypesElements(); 5669 } 5670}); 5671// EXTERNAL MODULE: external {"commonjs":"d3-drag","commonjs2":"d3-drag","amd":"d3-drag","root":"d3"} 5672var external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_ = __webpack_require__(7); 5673;// CONCATENATED MODULE: ./src/ChartInternal/interactions/interaction.ts 5674 5675/** 5676 * Copyright (c) 2017 ~ present NAVER Corp. 5677 * billboard.js project is licensed under the MIT license 5678 */ 5679 5680 5681 5682 5683 5684/* harmony default export */ var interactions_interaction = ({ 5685 /** 5686 * Expand data shape/point 5687 * @param {number} index Index number 5688 * @param {string} id Data id 5689 * @param {boolean} reset Reset expand state 5690 * @private 5691 */ 5692 setExpand: function setExpand(index, id, reset) { 5693 const $$ = this, 5694 config = $$.config, 5695 circle = $$.$el.circle; 5696 circle && config.point_focus_expand_enabled && $$.expandCircles(index, id, reset); 5697 5698 // bar, candlestick 5699 $$.expandBarTypeShapes(!0, index, id, reset); 5700 }, 5701 /** 5702 * Expand/Unexpand bar type shapes 5703 * @param {boolean} expand Expand or unexpand 5704 * @param {number} i Shape index 5705 * @param {string} id Data id 5706 * @param {boolean} reset Reset expand style 5707 * @private 5708 */ 5709 expandBarTypeShapes: function expandBarTypeShapes(expand, i, id, reset) { 5710 var _this = this; 5711 if (expand === void 0) { 5712 expand = !0; 5713 } 5714 const $$ = this; 5715 ["bar", "candlestick"].filter(function (v) { 5716 _newArrowCheck(this, _this); 5717 return $$.$el[v]; 5718 }
5718.bind(this)).forEach(function (v) { 5719 _newArrowCheck(this, _this); 5720 reset && $$.$el[v].classed($COMMON.EXPANDED, !1); 5721 $$.getShapeByIndex(v, i, id).classed($COMMON.EXPANDED, expand); 5722 }.bind(this)); 5723 }, 5724 /** 5725 * Handle data.onover/out callback options 5726 * @param {boolean} isOver Over or not 5727 * @param {number|object} d data object 5728 * @private 5729 */ 5730 setOverOut: function setOverOut(isOver, d) { 5731 var _this3 = this; 5732 const $$ = this, 5733 config = $$.config, 5734 _$$$state = $$.state, 5735 hasRadar = _$$$state.hasRadar, 5736 hasTreemap = _$$$state.hasTreemap, 5737 main = $$.$el.main, 5738 isArcTreemap = isObject(d); 5739 // Call event handler 5740 if (isArcTreemap || d !== -1) { 5741 const callback = config[isOver ? "data_onover" : "data_onout"].bind($$.api); 5742 config.color_onover && $$.setOverColor(isOver, d, isArcTreemap); 5743 if (isArcTreemap && "id") { 5744 const selector = hasTreemap ? $TREEMAP.treemap : $ARC.arc; 5745 callback(d, main.select("." + selector + $$.getTargetSelectorSuffix(d.id)).node()); 5746 } else if (!config.tooltip_grouped) { 5747 const last = $$.cache.get(KEY.setOverOut) || [], 5748 shapesAtIndex = main.selectAll("." + $SHAPE.shape + "-" + d).filter(function (d) { 5749 return $$.isWithinShape(this, d); 5750 }), 5751 shape = shapesAtIndex.filter(function () { 5752 var _this2 = this; 5753 return last.every(function (v) { 5754 _newArrowCheck(this, _this2); 5755 return v !== this; 5756 }.bind(this)); 5757 }); // select based on the index 5758 // filter if has new selection 5759 // call onout callback 5760 if (!isOver || shapesAtIndex.empty() || last.length === shape.size() && shape.nodes().every(function (v, i) { 5761 _newArrowCheck(this, _this3); 5762 return v !== last[i]; 5763 }.bind(this))) { 5764 while (last.length) { 5765 const target = last.pop(); 5766 config.data_onout.bind($$.api)((0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(target).datum(), target); 5767 } 5768 } 5769 5770 // call onover callback 5771 shape.each(function () { 5772 if (isOver) { 5773 callback((0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).datum(), this); 5774 last.push(this); 5775 } 5776 }); 5777 $$.cache.add(KEY.setOverOut, last); 5778 } else { 5779 if (isOver) { 5780 hasRadar && $$.isPointFocusOnly() ? $$.showCircleFocus($$.getAllValuesOnIndex(d, !0)) : $$.setExpand(d, null, !0); 5781 } 5782 $$.isMultipleX() || main.selectAll("." + $SHAPE.shape + "-" + d).each(function (d) { 5783 callback(d, this); 5784 }); 5785 } 5786 } 5787 }, 5788 /** 5789 * Call data.onover/out callback for touch event 5790 * @param {number|object} d target index or data object for Arc type 5791 * @private 5792 */ 5793 callOverOutForTouch: function callOverOutForTouch(d) { 5794 const $$ = this, 5795 last = $$.cache.get(KEY.callOverOutForTouch); 5796 if (isObject(d) && last ? d.id !== last.id : d !== last) { 5797 (last || isNumber(last)) && $$.setOverOut(!1, last); 5798 (d || isNumber(d)) && $$.setOverOut(!0, d); 5799 $$.cache.add(KEY.callOverOutForTouch, d); 5800 } 5801 }, 5802 /** 5803 * Return draggable selection function 5804 * @returns {Function} 5805 * @private 5806 */ 5807 getDraggableSelection: function getDraggableSelection() { 5808 var _this4 = this; 5809 const $$ = this, 5810 config = $$.config, 5811 state = $$.state; 5812 return config.interaction_enabled && config.data_selection_draggable && $$.drag ? (0,external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_.drag)().on("drag", function (event) { 5813 state.event = event; 5814 $$.drag(getPointer(event, this)); 5815 }).on("start", function (event) { 5816 state.event = event; 5817 $$.dragstart(getPointer(event, this)); 5818 }).on("end", function (event) { 5819 _newArrowCheck(this, _this4); 5820 state.event = event; 5821 $$.dragend(); 5822 }.bind(this)) : function () { 5823 _newArrowCheck(this, _this4); 5824 }.bind(this); 5825 }, 5826 /** 5827 * Dispatch a mouse event. 5828 * @private 5829 * @param {string} type event type 5830 * @param {number} index Index of eventRect 5831 * @param {Array} mouse x and y coordinate value 5832 */ 5833 dispatchEvent: function dispatchEvent(type, index, mouse) { 5834 var _ref; 5835 const $$ = this, 5836 config = $$.config, 5837 _$$$state2 = $$.state, 5838 eventReceiver = _$$$state2.eventReceiver, 5839 hasAxis = _$$$state2.hasAxis, 5840 hasRadar = _$$$state2.hasRadar, 5841 hasTreemap = _$$$state2.hasTreemap, 5842 _$$$$el = $$.$el, 5843 eventRect = _$$$$el.eventRect, 5844 radar = _$$$$el.radar, 5845 treemap = _$$$$el.treemap, 5846 element = (_ref = hasTreemap && eventReceiver.rect || hasRadar && radar.axes.select("." + $AXIS.axis + "-" + index + " text") || eventRect || ($$.getArcElementByIdOrIndex == null ? void 0 : $$.getArcElementByIdOrIndex(index))) == null ? void 0 : _ref.node(); 5847 if (element) { 5848 const isMultipleX = $$.isMultipleX(), 5849 isRotated = config.axis_rotated; 5850 let _element$getBoundingC = element.getBoundingClientRect(), 5851 width = _element$getBoundingC.width, 5852 left = _element$getBoundingC.left, 5853 top = _element$getBoundingC.top; 5854 if (hasAxis && !hasRadar && !isMultipleX) { 5855 const coords = eventReceiver.coords[index]; 5856 if (coords) { 5857 width = coords.w; 5858 left += coords.x; 5859 top += coords.y; 5860 } else { 5861 width = 0; 5862 left = 0; 5863 top = 0; 5864 } 5865 } 5866 const x = left + (mouse ? mouse[0] : 0) + (isMultipleX || isRotated ? 0 : width / 2), 5867 y = top + (mouse ? mouse[1] : 0) + (isRotated ? 4 : 0); // value 4, is to adjust coordinate value set from: scale.ts - updateScales(): $$.getResettedPadding(1) 5868 emulateEvent[/^(mouse|click)/.test(type) ? "mouse" : "touch"](hasTreemap ? treemap.node() : element, type, { 5869 screenX: x, 5870 screenY: y, 5871 clientX: x, 5872 clientY: y 5873 }); 5874 } 5875 }, 5876 setDragStatus: function setDragStatus(isDragging) { 5877 this.state.dragging = isDragging; 5878 }, 5879 /** 5880 * Unbind zoom events 5881 * @private 5882 */ 5883 unbindZoomEvent: function unbindZoomEvent() { 5884 const $$ = this, 5885 _$$$$el2 = $$.$el, 5886 eventRect = _$$$$el2.eventRect, 5887 zoomResetBtn = _$$$$el2.zoomResetBtn; 5888 eventRect == null || eventRect.on(".zoom wheel.zoom .drag", null); 5889 zoomResetBtn == null || zoomResetBtn.on("click", null).style("display", "none"); 5890 }, 5891 /** 5892 * Unbind all attached events 5893 * @private 5894 */ 5895 unbindAllEvents: function unbindAllEvents() { 5896 var _this5 = this; 5897 const $$ = this, 5898 _$$$$el3 = $$.$el, 5899 arcs = _$$$$el3.arcs, 5900 eventRect = _$$$$el3.eventRect, 5901 legend = _$$$$el3.legend,
5902 region = _$$$$el3.region, 5903 svg = _$$$$el3.svg, 5904 treemap = _$$$$el3.treemap, 5905 brush = $$.brush; 5906 // detach all possible event types 5907 [svg, eventRect, region == null ? void 0 : region.list, brush == null ? void 0 : brush.getSelection(), arcs == null ? void 0 : arcs.selectAll("path"), legend == null ? void 0 : legend.selectAll("g"), treemap].forEach(function (v) { 5908 _newArrowCheck(this, _this5); 5909 return v == null ? void 0 : v.on("wheel click mouseover mousemove mouseout touchstart touchmove touchend touchstart.eventRect touchmove.eventRect touchend.eventRect .brush .drag .zoom wheel.zoom dblclick.zoom", null); 5910 }.bind(this)); 5911 $$.unbindZoomEvent == null || $$.unbindZoomEvent(); 5912 } 5913}); 5914;// CONCATENATED MODULE: ./src/ChartInternal/internals/class.ts 5915 5916/** 5917 * Copyright (c) 2017 ~ present NAVER Corp. 5918 * billboard.js project is licensed under the MIT license 5919 */ 5920 5921/* harmony default export */ var internals_class = ({ 5922 generateClass: function generateClass(prefix, targetId) { 5923 return " " + prefix + " " + (prefix + this.getTargetSelectorSuffix(targetId)); 5924 }, 5925 /** 5926 * Get class string 5927 * @param {string} type Shape type 5928 * @param {boolean} withShape Get with shape prefix 5929 * @returns {string} Class string 5930 * @private 5931 */ 5932 getClass: function getClass(type, withShape) { 5933 var _this = this; 5934 const isPlural = /s$/.test(type), 5935 useIdKey = /^(area|arc|line|treemap)s?$/.test(type), 5936 key = isPlural ? "id" : "index"; 5937 return function (d) { 5938 _newArrowCheck(this, _this); 5939 const data = d.data || d, 5940 result = (withShape ? this.generateClass(classes[isPlural ? "shapes" : "shape"], data[key]) : "") + this.generateClass(classes[type], data[useIdKey ? "id" : key]); 5941 return result.trim(); 5942 }.bind(this); 5943 }, 5944 /** 5945 * Get chart class string 5946 * @param {string} type Shape type 5947 * @returns {string} Class string 5948 * @private 5949 */ 5950 getChartClass: function getChartClass(type) { 5951 var _this2 = this; 5952 return function (d) { 5953 _newArrowCheck(this, _this2); 5954 return classes["chart" + type] + this.classTarget((d.data ? d.data : d).id); 5955 }.bind(this); 5956 }, 5957 generateExtraLineClass: function generateExtraLineClass() { 5958 const $$ = this, 5959 classes = $$.config.line_classes || [], 5960 ids = []; 5961 return function (d) { 5962 var _d$data; 5963 const id = d.id || ((_d$data = d.data) == null ? void 0 : _d$data.id) || d; 5964 if (ids.indexOf(id) < 0) { 5965 ids.push(id); 5966 } 5967 return classes[ids.indexOf(id) % classes.length]; 5968 }; 5969 }, 5970 classRegion: function classRegion(d, i) { 5971 return this.generateClass(classes.region, i) + " " + ("class" in d ? d.class : ""); 5972 }, 5973 classTarget: function classTarget(id) { 5974 const additionalClassSuffix = this.config.data_classes[id]; 5975 let additionalClass = ""; 5976 if (additionalClassSuffix) { 5977 additionalClass = " " + classes.target + "-" + additionalClassSuffix; 5978 } 5979 return this.generateClass(classes.target, id) + additionalClass; 5980 }, 5981 classFocus: function classFocus(d) { 5982 return this.classFocused(d) + this.classDefocused(d); 5983 }, 5984 classFocused: function classFocused(d) { 5985 return " " + (this.state.focusedTargetIds.indexOf(d.id) >= 0 ? classes.focused : ""); 5986 }, 5987 classDefocused: function classDefocused(d) { 5988 return " " + (this.state.defocusedTargetIds.indexOf(d.id) >= 0 ? classes.defocused : ""); 5989 }, 5990 getTargetSelectorSuffix: function getTargetSelectorSuffix(targetId) { 5991 const targetStr = targetId || targetId === 0 ? "-" + targetId : ""; 5992 return targetStr.replace(/([\s?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\])/g, "-"); 5993 }, 5994 selectorTarget: function selectorTarget(id, prefix, postfix) { 5995 if (prefix === void 0) { 5996 prefix = ""; 5997 } 5998 if (postfix === void 0) { 5999 postfix = ""; 6000 } 6001 const target = this.getTargetSelectorSuffix(id); 6002 6003 // select target & circle 6004 return prefix + "." + (classes.target + target) + " " + postfix + ", " + prefix + "." + (classes.circles + target) + " " + postfix; 6005 }, 6006 selectorTargets: function selectorTargets(idsValue, prefix) { 6007 var _this3 = this; 6008 const ids = idsValue || []; 6009 return ids.length ? ids.map(function (id) { 6010 _newArrowCheck(this, _this3); 6011 return this.selectorTarget(id, prefix); 6012 }.bind(this)) : null; 6013 }, 6014 selectorLegend: function selectorLegend(id) { 6015 return "." + (classes.legendItem + this.getTargetSelectorSuffix(id)); 6016 }, 6017 selectorLegends: function selectorLegends(ids) { 6018 var _this4 = this; 6019 return ids != null && ids.length ? ids.map(function (id) { 6020 _newArrowCheck(this, _this4); 6021 return this.selectorLegend(id); 6022 }.bind(this)) : null; 6023 } 6024}); 6025;// CONCATENATED MODULE: ./src/ChartInternal/internals/category.ts 6026/** 6027 * Copyright (c) 2017 ~ present NAVER Corp. 6028 * billboard.js project is licensed under the MIT license 6029 */ 6030/* harmony default export */ var category = ({ 6031 /** 6032 * Category Name 6033 * @param {number} i Index number 6034 * @returns {string} category Name 6035 * @private 6036 */ 6037 categoryName: function categoryName(i) { 6038 var _axis_x_categories$i; 6039 const axis_x_categories = this.config.axis_x_categories; 6040 return (_axis_x_categories$i = axis_x_categories == null ? void 0 : axis_x_categories[i]) != null ? _axis_x_categories$i : i; 6041 } 6042}); 6043// EXTERNAL MODULE: external {"commonjs":"d3-scale","commonjs2":"d3-scale","amd":"d3-scale","root":"d3"} 6044var external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_ = __webpack_require__(6); 6045;// CONCATENATED MODULE: ./src/ChartInternal/internals/color.ts 6046 6047var color_this = undefined; 6048/** 6049 * Copyright (c) 2017 ~ present NAVER Corp. 6050 * billboard.js project is licensed under the MIT license 6051 */ 6052 6053 6054 6055 6056 6057 6058/** 6059 * Set pattern's background color 6060 * (it adds a <rect> element to simulate bg-color) 6061 * @param {SVGPatternElement} pattern SVG pattern element 6062 * @param {string} color Color string 6063 * @param {string} id ID to be set 6064 * @returns {{id: string, node: SVGPatternElement}} 6065 * @private 6066 */ 6067const colorizePattern = function (pattern, color, id) { 6068 _newArrowCheck(this, color_this); 6069 const node = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(pattern.cloneNode(!0)); 6070 node.attr("id", id).insert("rect", ":first-child").attr("width", node.attr("width")).attr("height", node.attr("height")).style("fill", color); 6071 return { 6072 id: id, 6073 node: node.node() 6074 }; 6075}.bind(undefined); 6076 6077/** 6078 * Get color pattern from CSS file 6079 * CSS should be defined as: background-image: url("#00c73c;#fa7171; ..."); 6080 * @param {d3Selection} element Chart element 6081 * @returns {Array} 6082 * @private 6083 */ 6084function getColorFromCss(element) { 6085 var _this2 = this; 6086 const cacheKey = KEY.colorPattern, 6087 body = browser_doc.body; 6088 let pattern = body[cacheKey]; 6089 if (!pattern) { 6090 const content = element.classed($COLOR.colorPattern, !0).style("background-image"); 6091 element.classed($COLOR.colorPattern, !1); 6092 if (content.indexOf(";") > -1) { 6093 pattern = content.replace(/url[^#]*|["'()]|(\s|%20)/g, "").split(";").map(function (v) { 6094 _newArrowCheck(this, _this2); 6095 return v.trim().replace(/[\"'\s]/g, ""); 6096 }
6096.bind(this)).filter(Boolean); 6097 body[cacheKey] = pattern; 6098 } 6099 } 6100 return pattern; 6101} 6102 6103// Replacement of d3.schemeCategory10. 6104// Contained differently depend on d3 version: v4(d3-scale), v5(d3-scale-chromatic) 6105const schemeCategory10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]; 6106/* harmony default export */ var internals_color = ({ 6107 generateColor: function generateColor() { 6108 var _this3 = this; 6109 const $$ = this, 6110 $el = $$.$el, 6111 config = $$.config, 6112 colors = config.data_colors, 6113 callback = config.data_color, 6114 ids = []; 6115 let pattern = notEmpty(config.color_pattern) ? config.color_pattern : (0,external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleOrdinal)(getColorFromCss($el.chart) || schemeCategory10).range(); 6116 const originalColorPattern = pattern; 6117 if (isFunction(config.color_tiles)) { 6118 const tiles = config.color_tiles.bind($$.api)(), 6119 colorizedPatterns = pattern.map(function (p, index) { 6120 _newArrowCheck(this, _this3); 6121 const color = p.replace(/[#\(\)\s,]/g, ""), 6122 id = $$.state.datetimeId + "-pattern-" + color + "-" + index; 6123 return colorizePattern(tiles[index % tiles.length], p, id); 6124 }.bind(this)); // Add background color to patterns 6125 pattern = colorizedPatterns.map(function (p) { 6126 _newArrowCheck(this, _this3); 6127 return "url(#" + p.id + ")"; 6128 }.bind(this)); 6129 $$.patterns = colorizedPatterns; 6130 } 6131 return function (d) { 6132 var _data; 6133 const id = d.id || ((_data = d.data) == null ? void 0 : _data.id) || d, 6134 isLine = $$.isTypeOf(id, ["line", "spline", "step"]) || !config.data_types[id]; 6135 let color; 6136 6137 // if callback function is provided 6138 if (isFunction(colors[id])) { 6139 color = colors[id].bind($$.api)(d); 6140 6141 // if specified, choose that color 6142 } else if (colors[id]) { 6143 color = colors[id]; 6144 6145 // if not specified, choose from pattern 6146 } else { 6147 if (ids.indexOf(id) < 0) { 6148 ids.push(id); 6149 } 6150 color = isLine ? originalColorPattern[ids.indexOf(id) % originalColorPattern.length] : pattern[ids.indexOf(id) % pattern.length]; 6151 colors[id] = color; 6152 } 6153 return isFunction(callback) ? callback.bind($$.api)(color, d) : color; 6154 }; 6155 }, 6156 generateLevelColor: function generateLevelColor() { 6157 const $$ = this, 6158 config = $$.config, 6159 colors = config.color_pattern, 6160 threshold = config.color_threshold, 6161 asValue = threshold.unit === "value", 6162 max = threshold.max || 100, 6163 values = threshold.values && threshold.values.length ? threshold.values : []; 6164 return notEmpty(threshold) ? function (value) { 6165 const v = asValue ? value : value * 100 / max; 6166 let color = colors[colors.length - 1]; 6167 for (let i = 0, l = values.length; i < l; i++) { 6168 if (v <= values[i]) { 6169 color = colors[i]; 6170 break; 6171 } 6172 } 6173 return color; 6174 } : null; 6175 }, 6176 /** 6177 * Append data backgound color filter definition 6178 * @param {string} color Color string 6179 * @private 6180 */ 6181 generateDataLabelBackgroundColorFilter: function generateDataLabelBackgroundColorFilter(color) { 6182 var _this4 = this; 6183 const $$ = this, 6184 $el = $$.$el, 6185 config = $$.config, 6186 state = $$.state, 6187 backgroundColors = color || config.data_labels_backgroundColors; 6188 if (backgroundColors) { 6189 let ids = []; 6190 if (isString(backgroundColors)) { 6191 ids.push(""); 6192 } else if (isObject(backgroundColors)) { 6193 ids = Object.keys(backgroundColors); 6194 } 6195 ids.forEach(function (v) { 6196 _newArrowCheck(this, _this4); 6197 const id = state.datetimeId + "-labels-bg" + $$.getTargetSelectorSuffix(v) + (color ? $$.getTargetSelectorSuffix(color) : ""); 6198 $el.defs.append("filter").attr("x", "0").attr("y", "0").attr("width", "1").attr("height", "1").attr("id", id).html("<feFlood flood-color=\"" + (v === "" ? backgroundColors : backgroundColors[v]) + "\" /><feComposite in=\"SourceGraphic\"/>"); 6199 }.bind(this)); 6200 } 6201 }, 6202 /** 6203 * Get data gradient color url 6204 * @param {string} id Data id 6205 * @returns {string} 6206 * @private 6207 */ 6208 getGradienColortUrl: function getGradienColortUrl(id) { 6209 return "url(#" + this.state.datetimeId + "-gradient" + this.getTargetSelectorSuffix(id) + ")"; 6210 }, 6211 /** 6212 * Update linear/radial gradient definition 6213 * - linear: area & bar only 6214 * - radial: type which has data points only 6215 * @private 6216 */ 6217 updateLinearGradient: function updateLinearGradient() { 6218 var _this5 = this; 6219 const $$ = this, 6220 config = $$.config, 6221 targets = $$.data.targets, 6222 datetimeId = $$.state.datetimeId, 6223 defs = $$.$el.defs;
6224 targets.forEach(function (d) { 6225 var _this6 = this; 6226 _newArrowCheck(this, _this5); 6227 const id = datetimeId + "-gradient" + $$.getTargetSelectorSuffix(d.id), 6228 radialGradient = $$.hasPointType() && config.point_radialGradient, 6229 supportedType = $$.isAreaType(d) && "area" || $$.isBarType(d) && "bar"; 6230 if ((radialGradient || supportedType) && defs.select("#" + id).empty()) { 6231 const color = $$.color(d), 6232 gradient = { 6233 defs: null, 6234 stops: [] 6235 }; 6236 if (radialGradient) { 6237 const _radialGradient = radialGradient, 6238 _radialGradient$cx = _radialGradient.cx, 6239 cx = _radialGradient$cx === void 0 ? .3 : _radialGradient$cx, 6240 _radialGradient$cy = _radialGradient.cy, 6241 cy = _radialGradient$cy === void 0 ? .3 : _radialGradient$cy, 6242 _radialGradient$r = _radialGradient.r, 6243 r = _radialGradient$r === void 0 ? .7 : _radialGradient$r, 6244 _radialGradient$stops = _radialGradient.stops, 6245 stops = _radialGradient$stops === void 0 ? [[.1, color, 0], [.9, color, 1]] : _radialGradient$stops; 6246 gradient.stops = stops; 6247 gradient.defs = defs.append("radialGradient").attr("id", "" + id).attr("cx", cx).attr("cy", cy).attr("r", r); 6248 } else { 6249 const isRotated = config.axis_rotated, 6250 _config = config[supportedType + "_linearGradient"], 6251 _config$x = _config.x, 6252 x = _config$x === void 0 ? isRotated ? [1, 0] : [0, 0] : _config$x, 6253 _config$y = _config.y, 6254 y = _config$y === void 0 ? isRotated ? [0, 0] : [0, 1] : _config$y, 6255 _config$stops = _config.stops, 6256 stops = _config$stops === void 0 ? [[0, color, 1], [1, color, 0]] : _config$stops; 6257 gradient.stops = stops; 6258 gradient.defs = defs.append("linearGradient").attr("id", "" + id).attr("x1", x[0]).attr("x2", x[1]).attr("y1", y[0]).attr("y2", y[1]); 6259 } 6260 gradient.stops.forEach(function (v) { 6261 _newArrowCheck(this, _this6); 6262 const offset = v[0], 6263 stopColor = v[1], 6264 stopOpacity = v[2], 6265 colorValue = isFunction(stopColor) ? stopColor.bind($$.api)(d.id) : stopColor; 6266 gradient.defs && gradient.defs.append("stop").attr("offset", offset).attr("stop-color", colorValue || color).attr("stop-opacity", stopOpacity); 6267 }.bind(this)); 6268 } 6269 }.bind(this)); 6270 }, 6271 /** 6272 * Set the data over color. 6273 * When is out, will restate in its previous color value 6274 * @param {boolean} isOver true: set overed color, false: restore 6275 * @param {number|object} d target index or data object for Arc type 6276 * @private 6277 */ 6278 setOverColor: function setOverColor(isOver, d) { 6279 var _this7 = this; 6280 const $$ = this, 6281 config = $$.config, 6282 main = $$.$el.main, 6283 onover = config.color_onover; 6284 let color = isOver ? onover : $$.color; 6285 if (isObject(color)) { 6286 color = function (_ref) { 6287 let id = _ref.id; 6288 _newArrowCheck(this, _this7); 6289 return id in onover ? onover[id] : $$.color(id); 6290 }.bind(this); 6291 } else if (isString(color)) { 6292 color = function () { 6293 _newArrowCheck(this, _this7); 6294 return onover; 6295 }.bind(this); 6296 } else if (isFunction(onover)) { 6297 color = color.bind($$.api); 6298 } 6299 main.selectAll(isObject(d) ? // when is Arc type 6300 "." + $ARC.arc + $$.getTargetSelectorSuffix(d.id) : "." + $SHAPE.shape + "-" + d).style("fill", color); 6301 } 6302}); 6303;// CONCATENATED MODULE: ./src/ChartInternal/internals/domain.ts 6304 6305/** 6306 * Copyright (c) 2017 ~ present NAVER Corp. 6307 * billboard.js project is licensed under the MIT license 6308 */ 6309 6310 6311/* harmony default export */ var domain = ({ 6312 getYDomainMinMax: function getYDomainMinMax(targets, type) { 6313 var _this = this; 6314 const $$ = this, 6315 axis = $$.axis, 6316 config = $$.config, 6317 isMin = type === "min", 6318 dataGroups = config.data_groups, 6319 ids = $$.mapToIds(targets), 6320 ys = $$.getValuesAsIdKeyed(targets); 6321 if (dataGroups.length > 0) { 6322 const hasValue = $$["has" + (isMin ? "Negative" : "Positive") + "ValueInTargets"](targets); 6323 dataGroups.forEach(function (groupIds) { 6324 var _this2 = this; 6325 _newArrowCheck(this, _this); 6326 // Determine baseId 6327 const idsInGroup = groupIds.filter(function (v) { 6328 _newArrowCheck(this, _this2); 6329 return ids.indexOf(v) >= 0; 6330 }.bind(this)); 6331 if (idsInGroup.length) { 6332 const baseId = idsInGroup[0], 6333 baseAxisId = axis.getId(baseId); 6334 // Initialize base value. Set to 0 if not match with the condition 6335 if (hasValue && ys[baseId]) { 6336 ys[baseId] = ys[baseId].map(function (v) { 6337 _newArrowCheck(this, _this2); 6338 return (isMin ? v < 0 : v > 0) ? v : 0; 6339 }.bind(this)); 6340 } 6341 idsInGroup.filter(function (v, i) { 6342 _newArrowCheck(this, _this2); 6343 return i > 0; 6344 }
6344.bind(this)).forEach(function (id) { 6345 var _this3 = this; 6346 _newArrowCheck(this, _this2); 6347 if (ys[id]) { 6348 const axisId = axis.getId(id); 6349 ys[id].forEach(function (v, i) { 6350 _newArrowCheck(this, _this3); 6351 const val = +v, 6352 meetCondition = isMin ? val > 0 : val < 0; 6353 if (axisId === baseAxisId && !(hasValue && meetCondition)) { 6354 ys[baseId][i] += val; 6355 } 6356 }.bind(this)); 6357 } 6358 }.bind(this)); 6359 } 6360 }.bind(this)); 6361 } 6362 return getMinMax(type, Object.keys(ys).map(function (key) { 6363 _newArrowCheck(this, _this); 6364 return getMinMax(type, ys[key]); 6365 }.bind(this))); 6366 }, 6367 /** 6368 * Check if hidden targets bound to the given axis id 6369 * @param {string} id ID to be checked 6370 * @returns {boolean} 6371 * @private 6372 */ 6373 isHiddenTargetWithYDomain: function isHiddenTargetWithYDomain(id) { 6374 var _this4 = this; 6375 const $$ = this; 6376 return $$.state.hiddenTargetIds.some(function (v) { 6377 _newArrowCheck(this, _this4); 6378 return $$.axis.getId(v) === id; 6379 }.bind(this)); 6380 }, 6381 getYDomain: function getYDomain(targets, axisId, xDomain) { 6382 var _this5 = this; 6383 const $$ = this, 6384 axis = $$.axis, 6385 config = $$.config, 6386 scale = $$.scale, 6387 pfx = "axis_" + axisId; 6388 if ($$.isStackNormalized()) { 6389 return [0, 100]; 6390 } 6391 const isLog = (scale == null ? void 0 : scale[axisId]) && scale[axisId].type === "log", 6392 targetsByAxisId = targets.filter(function (t) { 6393 _newArrowCheck(this, _this5); 6394 return axis.getId(t.id) === axisId; 6395 }.bind(this)), 6396 yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId; 6397 if (yTargets.length === 0) { 6398 // use domain of the other axis if target of axisId is none 6399 if ($$.isHiddenTargetWithYDomain(axisId)) { 6400 return scale[axisId].domain(); 6401 } else { 6402 return axisId === "y2" ? scale.y.domain() : 6403 // When all data bounds to y2, y Axis domain is called prior y2. 6404 // So, it needs to call to get y2 domain here 6405 $$.getYDomain(targets, "y2", xDomain); 6406 } 6407 } 6408 const yMin = config[pfx + "_min"], 6409 yMax = config[pfx + "_max"], 6410 center = config[pfx + "_center"], 6411 isInverted = config[pfx + "_inverted"], 6412 showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated, 6413 showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated; 6414 let yDomainMin = $$.getYDomainMinMax(yTargets, "min"),
6415 yDomainMax = $$.getYDomainMinMax(yTargets, "max"), 6416 isZeroBased = [TYPE.BAR, TYPE.BUBBLE, TYPE.SCATTER].concat(TYPE_BY_CATEGORY.Line).some(function (v) { 6417 _newArrowCheck(this, _this5); 6418 const type = v.indexOf("area") > -1 ? "area" : v; 6419 return $$.hasType(v, yTargets, !0) && config[type + "_zerobased"]; 6420 }.bind(this)); 6421 // MEMO: avoid inverting domain unexpectedly 6422 yDomainMin = isValue(yMin) ? yMin : isValue(yMax) ? yDomainMin <= yMax ? yDomainMin : yMax - 10 : yDomainMin; 6423 yDomainMax = isValue(yMax) ? yMax : isValue(yMin) ? yMin <= yDomainMax ? yDomainMax : yMin + 10 : yDomainMax; 6424 if (isNaN(yDomainMin)) { 6425 // set minimum to zero when not number 6426 yDomainMin = 0; 6427 } 6428 if (isNaN(yDomainMax)) { 6429 // set maximum to have same value as yDomainMin 6430 yDomainMax = yDomainMin; 6431 } 6432 if (yDomainMin === yDomainMax) { 6433 yDomainMin < 0 ? yDomainMax = 0 : yDomainMin = 0; 6434 } 6435 const isAllPositive = yDomainMin >= 0 && yDomainMax >= 0, 6436 isAllNegative = yDomainMin <= 0 && yDomainMax <= 0; 6437 // Cancel zerobased if axis_*_min / axis_*_max specified 6438 if (isValue(yMin) && isAllPositive || isValue(yMax) && isAllNegative) { 6439 isZeroBased = !1; 6440 } 6441 6442 // Bar/Area chart should be 0-based if all positive|negative 6443 if (isZeroBased) { 6444 isAllPositive && (yDomainMin = 0); 6445 isAllNegative && (yDomainMax = 0); 6446 } 6447 const domainLength = Math.abs(yDomainMax - yDomainMin); 6448 let padding = { 6449 top: domainLength * .1, 6450 bottom: domainLength * .1 6451 }; 6452 if (isDefined(center)) { 6453 const yDomainAbs = Math.max(Math.abs(yDomainMin), Math.abs(yDomainMax)); 6454 yDomainMax = center + yDomainAbs; 6455 yDomainMin = center - yDomainAbs; 6456 } 6457 6458 // add padding for data label 6459 if (showHorizontalDataLabel) { 6460 const diff = diffDomain(scale.y.range()), 6461 ratio = $$.getDataLabelLength(yDomainMin, yDomainMax, "width").map(function (v) { 6462 _newArrowCheck(this, _this5); 6463 return v / diff; 6464 }.bind(this)); 6465 ["bottom", "top"].forEach(function (v, i) { 6466 _newArrowCheck(this, _this5); 6467 padding[v] += domainLength * (ratio[i] / (1 - ratio[0] - ratio[1])); 6468 }.bind(this)); 6469 } else if (showVerticalDataLabel) { 6470 const lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, "height"); 6471 ["bottom", "top"].forEach(function (v, i) { 6472 _newArrowCheck(this, _this5); 6473 padding[v] += $$.convertPixelToScale("y", lengths[i], domainLength); 6474 }.bind(this)); 6475 } 6476 padding = $$.getResettedPadding(padding); 6477 6478 // if padding is set, the domain will be updated relative the current domain value 6479 // ex) $$.height=300, padding.top=150, domainLength=4 --> domain=6 6480 const p = config[pfx + "_padding"]; 6481 if (notEmpty(p)) { 6482 ["bottom", "top"].forEach(function (v) { 6483 _newArrowCheck(this, _this5); 6484 padding[v] = axis.getPadding(p, v, padding[v], domainLength); 6485 }.bind(this)); 6486 } 6487 6488 // Bar/Area chart should be 0-based if all positive|negative 6489 if (isZeroBased) { 6490 isAllPositive && (padding.bottom = yDomainMin); 6491 isAllNegative && (padding.top = -yDomainMax); 6492 } 6493 const domain = isLog ? [yDomainMin, yDomainMax].map(function (v) { 6494 _newArrowCheck(this, _this5); 6495 return v < 0 ? 0 : v; 6496 }.bind(this)) : [yDomainMin - padding.bottom, yDomainMax + padding.top]; 6497 return isInverted ? domain.reverse() : domain; 6498 }, 6499 getXDomainMinMax: function getXDomainMinMax(targets, type) { 6500 var _this6 = this, 6501 _$$$axis; 6502 const $$ = this, 6503 configValue = $$.config["axis_x_" + type], 6504 dataValue = getMinMax(type, targets.map(function (t) { 6505 var _this7 = this; 6506 _newArrowCheck(this, _this6); 6507 return getMinMax(type, t.values.map(function (v) { 6508 _newArrowCheck(this, _this7); 6509 return v.x; 6510 }.bind(this))); 6511 }.bind(this))); 6512 let value = isObject(configValue) ? configValue.value : configValue; 6513 value = isDefined(value) && (_$$$axis = $$.axis) != null && _$$$axis.isTimeSeries() ? parseDate.bind(this)(value) : value; 6514 if (isObject(configValue) && configValue.fit && (type === "min" && value < dataValue || type === "max" && value > dataValue)) { 6515 value = undefined; 6516 } 6517 return isDefined(value) ? value : dataValue; 6518 }, 6519 /** 6520 * Get x Axis padding 6521 * @param {Array} domain x Axis domain 6522 * @param {number} tickCount Tick count 6523 * @returns {object} Padding object values with 'left' & 'right' key 6524 * @private 6525 */ 6526 getXDomainPadding: function getXDomainPadding(domain, tickCount) { 6527 const $$ = this, 6528 axis = $$.axis, 6529 config = $$.config, 6530 padding = config.axis_x_padding, 6531 isTimeSeriesTickCount = axis.isTimeSeries() && tickCount, 6532 diff = diffDomain(domain); 6533 let defaultValue; 6534 6535 // determine default padding value 6536 if (axis.isCategorized() || isTimeSeriesTickCount) { 6537 defaultValue = 0; 6538 } else if ($$.hasType("bar")) { 6539 const maxDataCount = $$.getMaxDataCount(); 6540 defaultValue = maxDataCount > 1 ? diff / (maxDataCount - 1) / 2 : .5; 6541 } else { 6542 defaultValue = $$.getResettedPadding(diff * .01); 6543 } 6544 let _ref = isNumber(padding) ? { 6545 left: padding, 6546 right: padding 6547 } : padding, 6548 _ref$left = _ref.left, 6549 left = _ref$left === void 0 ? defaultValue : _ref$left, 6550 _ref$right = _ref.right, 6551 right = _ref$right === void 0 ? defaultValue : _ref$right; 6552 6553 // when the unit is pixel, convert pixels to axis scale value 6554 if (padding.unit === "px") { 6555 const domainLength = Math.abs(diff + diff * .2); 6556 left = axis.getPadding(padding, "left", defaultValue, domainLength); 6557 right = axis.getPadding(padding, "right", defaultValue, domainLength); 6558 } else { 6559 const range = diff + left + right; 6560 if (isTimeSeriesTickCount && range) { 6561 const relativeTickWidth = diff / tickCount / range; 6562 left = left / range / relativeTickWidth; 6563 right = right / range / relativeTickWidth; 6564 } 6565 } 6566 return { 6567 left: left, 6568 right: right 6569 }; 6570 }, 6571 /** 6572 * Get x Axis domain 6573 * @param {Array} targets targets 6574 * @returns {Array} x Axis domain 6575 * @private 6576 */ 6577 getXDomain: function getXDomain(targets) { 6578 const $$ = this, 6579 axis = $$.axis, 6580 config = $$.config, 6581 x = $$.scale.x, 6582 isInverted = config.axis_x_inverted, 6583 domain = [$$.getXDomainMinMax(targets, "min"), $$.getXDomainMinMax(targets, "max")]; 6584 let _domain$ = domain[0], 6585 min = _domain$ === void 0 ? 0 : _domain$, 6586 _domain$2 = domain[1], 6587 max = _domain$2 === void 0 ? 0 : _domain$2; 6588 if (x.type !== "log") { 6589 const isCategorized = axis.isCategorized(), 6590 isTimeSeries = axis.isTimeSeries(), 6591 padding = $$.getXDomainPadding(domain); 6592 let firstX = domain[0], 6593 lastX = domain[1]; 6594 6595 // show center of x domain if min and max are the same 6596 if (firstX - lastX === 0 && !isCategorized) { 6597 if (isTimeSeries) { 6598 firstX = new Date(firstX.getTime() * .5); 6599 lastX = new Date(lastX.getTime() * 1.5); 6600 } else { 6601 firstX = firstX === 0 ? 1 : firstX * .5; 6602 lastX = lastX === 0 ? -1 : lastX * 1.5; 6603 } 6604 } 6605 if (firstX || firstX === 0) { 6606 min = isTimeSeries ? new Date(firstX.getTime() - padding.left) : firstX - padding.left; 6607 } 6608 if (lastX || lastX === 0) { 6609 max = isTimeSeries ? new Date(lastX.getTime() + padding.right) : lastX + padding.right; 6610 } 6611 } 6612 return isInverted ? [max, min] : [min, max]; 6613 }, 6614 updateXDomain: function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain, withTrim, domain) { 6615 const $$ = this, 6616 config = $$.config, 6617 org = $$.org, 6618 _$$$scale = $$.scale, 6619 x = _$$$scale.x, 6620 subX = _$$$scale.subX, 6621 zoomEnabled = config.zoom_enabled; 6622 if (withUpdateOrgXDomain) { 6623 var _$$$brush; 6624 x.domain(domain || sortValue($$.getXDomain(targets), !config.axis_x_inverted)); 6625 org.xDomain = x.domain(); 6626 6627 // zoomEnabled && $$.zoom.updateScaleExtent(); 6628 6629 subX.domain(x.domain()); 6630 (_$$$brush = $$.brush) == null || _$$$brush.scale(subX); 6631 } 6632 if (withUpdateXDomain) { 6633 const domainValue = domain || !$$.brush || brushEmpty($$) ? org.xDomain : getBrushSelection($$).map(subX.invert); 6634 x.domain(domainValue); 6635 // zoomEnabled && $$.zoom.updateScaleExtent(); 6636 } 6637 6638 if (withUpdateOrgXDomain || withUpdateXDomain) { 6639 zoomEnabled && $$.zoom.updateScaleExtent(); 6640 } 6641
6642 // Trim domain when too big by zoom mousemove event 6643 withTrim && x.domain($$.trimXDomain(x.orgDomain())); 6644 return x.domain(); 6645 }, 6646 /** 6647 * Trim x domain when given domain surpasses the range 6648 * @param {Array} domain Domain value 6649 * @returns {Array} Trimed domain if given domain is out of range 6650 * @private 6651 */ 6652 trimXDomain: function trimXDomain(domain) { 6653 const $$ = this, 6654 isInverted = $$.config.axis_x_inverted, 6655 zoomDomain = $$.getZoomDomain(), 6656 _zoomDomain = zoomDomain, 6657 min = _zoomDomain[0], 6658 max = _zoomDomain[1]; 6659 if (isInverted ? domain[0] >= min : domain[0] <= min) { 6660 domain[1] = +domain[1] + (min - domain[0]); 6661 domain[0] = min; 6662 } 6663 if (isInverted ? domain[1] <= max : domain[1] >= max) { 6664 domain[0] = +domain[0] - (domain[1] - max); 6665 domain[1] = max; 6666 } 6667 return domain; 6668 }, 6669 /** 6670 * Get subchart/zoom domain 6671 * @param {string} type "subX" or "zoom" 6672 * @param {boolean} getCurrent Get current domain if true 6673 * @returns {Array} zoom domain 6674 * @private 6675 */ 6676 getZoomDomain: function getZoomDomain(type, getCurrent) { 6677 if (type === void 0) { 6678 type = "zoom"; 6679 } 6680 if (getCurrent === void 0) { 6681 getCurrent = !1; 6682 } 6683 const $$ = this, 6684 config = $$.config, 6685 scale = $$.scale, 6686 org = $$.org; 6687 let _ref2 = getCurrent && scale[type] ? scale[type].domain() : org.xDomain, 6688 min = _ref2[0], 6689 max = _ref2[1]; 6690 if (type === "zoom") { 6691 if (isDefined(config.zoom_x_min)) { 6692 min = getMinMax("min", [min, config.zoom_x_min]); 6693 } 6694 if (isDefined(config.zoom_x_max)) { 6695 max = getMinMax("max", [max, config.zoom_x_max]); 6696 } 6697 } 6698 return [min, max]; 6699 }, 6700 /** 6701 * Converts pixels to axis' scale values 6702 * @param {string} type Axis type 6703 * @param {number} pixels Pixels 6704 * @param {number} domainLength Domain length 6705 * @returns {number} 6706 * @private 6707 */ 6708 convertPixelToScale: function convertPixelToScale(type, pixels, domainLength) { 6709 const $$ = this, 6710 config = $$.config, 6711 state = $$.state, 6712 isRotated = config.axis_rotated; 6713 let length; 6714 if (type === "x") { 6715 length = isRotated ? "height" : "width"; 6716 } else { 6717 length = isRotated ? "width" : "height"; 6718 } 6719 return domainLength * (pixels / state[length]); 6720 }, 6721 /** 6722 * Check if the given domain is within subchart/zoom range 6723 * @param {Array} domain Target domain value 6724 * @param {Array} current Current subchart/zoom domain value 6725 * @param {Array} range subchart/zoom range value 6726 * @returns {boolean} 6727 * @private 6728 */ 6729 withinRange: function withinRange(domain, current, range) { 6730 var _this8 = this; 6731 const $$ = this, 6732 isInverted = $$.config.axis_x_inverted, 6733 _ref3 = range, 6734 min = _ref3[0], 6735 max = _ref3[1]; 6736 if (Array.isArray(domain)) { 6737 const target = [].concat(domain); 6738 isInverted && target.reverse(); 6739 if (target[0] < target[1]) { 6740 return domain.every(function (v, i) { 6741 var _this9 = this; 6742 _newArrowCheck(this, _this8); 6743 return (i === 0 ? isInverted ? +v <= min : +v >= min : isInverted ? +v >= max : +v <= max) && !domain.every(function (v, i) { 6744 _newArrowCheck(this, _this9); 6745 return v === current[i]; 6746 }.bind(this)); 6747 }.bind(this)); 6748 } 6749 } 6750 return !1; 6751 } 6752}); 6753;// CONCATENATED MODULE: ./src/ChartInternal/internals/format.ts 6754 6755/** 6756 * Copyright (c) 2017 ~ present NAVER Corp. 6757 * billboard.js project is licensed under the MIT license 6758 */ 6759 6760/** 6761 * Get formatted 6762 * @param {object} $$ Context 6763 * @param {string} typeValue Axis type 6764 * @param {number} v Value to be formatted 6765 * @returns {number | string} 6766 * @private 6767 */ 6768function getFormat($$, typeValue, v) { 6769 const config = $$.config, 6770 type = "axis_" + typeValue + "_tick_format", 6771 format = config[type] ? config[type] : $$.defaultValueFormat; 6772 return format.call($$.api, v); 6773} 6774/* harmony default export */ var format = ({ 6775 yFormat: function yFormat(v) { 6776 return getFormat(this, "y", v); 6777 }, 6778 y2Format: function y2Format(v) { 6779 return getFormat(this, "y2", v); 6780 }, 6781 /** 6782 * Get default value format function 6783 * @returns {Function} formatter function 6784 * @private 6785 */ 6786 getDefaultValueFormat: function getDefaultValueFormat() { 6787 const $$ = this, 6788 defaultArcValueFormat = $$.defaultArcValueFormat, 6789 yFormat = $$.yFormat, 6790 y2Format = $$.y2Format, 6791 hasArc = $$.hasArcType(null, ["gauge", "polar", "radar"]); 6792 return function (v, ratio, id) { 6793 const format = hasArc ? defaultArcValueFormat : $$.axis && $$.axis.getId(id) === "y2" ? y2Format : yFormat; 6794 return format.call($$, v, ratio); 6795 }; 6796 }, 6797 defaultValueFormat: function defaultValueFormat(v) { 6798 return isArray(v) ? v.join("~") : isValue(v) ? +v : ""; 6799 }, 6800 defaultArcValueFormat: function defaultArcValueFormat(v, ratio) { 6801 return (ratio * 100).toFixed(1) + "%"; 6802 }, 6803 defaultPolarValueFormat: function defaultPolarValueFormat(v) { 6804 return "" + v; 6805 }, 6806 dataLabelFormat: function dataLabelFormat(targetId) { 6807 var _this = this; 6808 const $$ = this, 6809 dataLabels = $$.config.data_labels, 6810 defaultFormat = function (v) { 6811 _newArrowCheck(this, _this); 6812 const delimiter = "~"; 6813 let res = v; 6814 if (isArray(v)) { 6815 res = v.join(delimiter); 6816 } else if (isObject(v)) { 6817 res = Object.values(v).join(delimiter); 6818 } 6819 return res; 6820 }.bind(this); 6821 let format = defaultFormat; 6822 6823 // find format according to axis id 6824 if (isFunction(dataLabels.format)) { 6825 format = dataLabels.format; 6826 } else if (isObjectType(dataLabels.format)) { 6827 if (dataLabels.format[targetId]) { 6828 format = dataLabels.format[targetId] === !0 ? defaultFormat : dataLabels.format[targetId]; 6829 } else { 6830 format = function () { 6831 _newArrowCheck(this, _this); 6832 return ""; 6833 }.bind(this); 6834 } 6835 } 6836 return format.bind($$.api); 6837 } 6838}); 6839;// CONCATENATED MODULE: ./src/ChartInternal/internals/legend.ts 6840 6841/** 6842 * Copyright (c) 2017 ~ present NAVER Corp. 6843 * billboard.js project is licensed under the MIT license 6844 */ 6845 6846 6847 6848 6849 6850 6851/** 6852 * Get color string for given data id 6853 * @param {string} id Data id 6854 * @returns {string} Color string 6855 * @private 6856 */
6857function getLegendColor(id) { 6858 const $$ = this, 6859 data = $$.getDataById(id), 6860 color = $$.levelColor ? $$.levelColor(data.values[0].value) : $$.color(data); 6861 return color; 6862} 6863/* harmony default export */ var internals_legend = ({ 6864 /** 6865 * Initialize the legend. 6866 * @private 6867 */ 6868 initLegend: function initLegend() { 6869 const $$ = this, 6870 config = $$.config, 6871 $el = $$.$el; 6872 $$.legendItemTextBox = {}; 6873 $$.state.legendHasRendered = !1; 6874 if (config.legend_show) { 6875 if (!config.legend_contents_bindto) { 6876 $el.legend = $$.$el.svg.append("g").classed($LEGEND.legend, !0).attr("transform", $$.getTranslate("legend")); 6877 } 6878 6879 // MEMO: call here to update legend box and translate for all 6880 // MEMO: translate will be updated by this, so transform not needed in updateLegend() 6881 $$.updateLegend(); 6882 } else { 6883 $$.state.hiddenLegendIds = $$.mapToIds($$.data.targets); 6884 } 6885 }, 6886 /** 6887 * Update legend element 6888 * @param {Array} targetIds ID's of target 6889 * @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. 6890 * @param {object} transitions Return value of the generateTransitions 6891 * @private 6892 */ 6893 updateLegend: function updateLegend(targetIds, options, transitions) { 6894 var _$el$legend; 6895 const $$ = this, 6896 config = $$.config, 6897 state = $$.state, 6898 scale = $$.scale, 6899 $el = $$.$el, 6900 optionz = options || { 6901 withTransform: !1, 6902 withTransitionForTransform: !1, 6903 withTransition: !1 6904 }; 6905 optionz.withTransition = getOption(optionz, "withTransition", !0); 6906 optionz.withTransitionForTransform = getOption(optionz, "withTransitionForTransform", !0); 6907 if (config.legend_contents_bindto && config.legend_contents_template) { 6908 $$.updateLegendTemplate(); 6909 } else if (!state.hasTreemap) { 6910 $$.updateLegendElement(targetIds || $$.mapToIds($$.data.targets), optionz, transitions); 6911 } 6912 6913 // toggle legend state 6914 (_$el$legend = $el.legend) == null || _$el$legend.selectAll("." + $LEGEND.legendItem).classed($LEGEND.legendItemHidden, function (id) { 6915 const hide = !$$.isTargetToShow(id); 6916 if (hide) { 6917 this.style.opacity = null; 6918 } 6919 return hide; 6920 }); 6921 6922 // Update size and scale 6923 $$.updateScales(!1, !scale.zoom); 6924 $$.updateSvgSize(); 6925 6926 // Update g positions 6927 $$.transformAll(optionz.withTransitionForTransform, transitions); 6928 state.legendHasRendered = !0; 6929 }, 6930 /** 6931 * Update legend using template option 6932 * @private 6933 */ 6934 updateLegendTemplate: function updateLegendTemplate() { 6935 var _this = this; 6936 const $$ = this, 6937 config = $$.config, 6938 $el = $$.$el, 6939 wrapper = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(config.legend_contents_bindto), 6940 template = config.legend_contents_template; 6941 if (!wrapper.empty()) { 6942 const targets = $$.mapToIds($$.data.targets), 6943 ids = []; 6944 let html = ""; 6945 targets.forEach(function (v) { 6946 _newArrowCheck(this, _this); 6947 const content = isFunction(template) ? template.bind($$.api)(v, $$.color(v), $$.api.data(v)[0].values) : tplProcess(template, { 6948 COLOR: $$.color(v), 6949 TITLE: v 6950 }); 6951 if (content) { 6952 ids.push(v); 6953 html += content; 6954 } 6955 }.bind(this)); 6956 const legendItem = wrapper.html(html).selectAll(function () { 6957 return this.childNodes; 6958 }).data(ids); 6959 $$.setLegendItem(legendItem); 6960 $el.legend = wrapper; 6961 } 6962 }, 6963 /** 6964 * Update the size of the legend. 6965 * @param {Obejct} size Size object 6966 * @private 6967 */ 6968 updateSizeForLegend: function updateSizeForLegend(size) { 6969 const $$ = this, 6970 config = $$.config, 6971 _$$$state = $$.state, 6972 isLegendTop = _$$$state.isLegendTop, 6973 isLegendLeft = _$$$state.isLegendLeft, 6974 isLegendRight = _$$$state.isLegendRight, 6975 isLegendInset = _$$$state.isLegendInset, 6976 current = _$$$state.current, 6977 width = size.width, 6978 height = size.height, 6979 insetLegendPosition = { 6980 top: isLegendTop ? $$.getCurrentPaddingByDirection("top") + config.legend_inset_y + 5.5 : current.height - height - $$.getCurrentPaddingByDirection("bottom") - config.legend_inset_y, 6981 left: isLegendLeft ? $$.getCurrentPaddingByDirection("left") + config.legend_inset_x + .5 : current.width - width - $$.getCurrentPaddingByDirection("right") - config.legend_inset_x + .5 6982 }; 6983 $$.state.margin3 = { 6984 top: isLegendRight ? 0 : isLegendInset ? insetLegendPosition.top : current.height - height, 6985 right: NaN, 6986 bottom: 0, 6987 left: isLegendRight ? current.width - width : isLegendInset ? insetLegendPosition.left : 0 6988 }; 6989 }, 6990 /** 6991 * Transform Legend 6992 * @param {boolean} withTransition whether or not to transition. 6993 * @private 6994 */ 6995 transformLegend: function transformLegend(withTransition) { 6996 const $$ = this, 6997 legend = $$.$el.legend, 6998 $T = $$.$T; 6999 $T(legend, withTransition).attr("transform", $$.getTranslate("legend")); 7000 }, 7001 /** 7002 * Update the legend step 7003 * @param {number} step Step value 7004 * @private 7005 */ 7006 updateLegendStep: function updateLegendStep(step) { 7007 this.state.legendStep = step; 7008 }, 7009 /** 7010 * Update legend item width 7011 * @param {number} width Width value 7012 * @private 7013 */ 7014 updateLegendItemWidth: function updateLegendItemWidth(width) { 7015 this.state.legendItemWidth = width; 7016 }, 7017 /** 7018 * Update legend item height 7019 * @param {number} height Height value 7020 * @private 7021 */ 7022 updateLegendItemHeight: function updateLegendItemHeight(height) { 7023 this.state.legendItemHeight = height; 7024 }, 7025 /** 7026 * Update legend item color 7027 * @param {string} id Corresponding data ID value 7028 * @param {string} color Color value 7029 * @private 7030 */ 7031 updateLegendItemColor: function updateLegendItemColor(id, color) { 7032 const legend = this.$el.legend; 7033 if (legend) { 7034 legend.select("." + $LEGEND.legendItem + "-" + id + " line").style("stroke", color); 7035 } 7036 }, 7037 /** 7038 * Get the width of the legend 7039 * @returns {number} width 7040 * @private 7041 */ 7042 getLegendWidth: function getLegendWidth() { 7043 const $$ = this, 7044 _$$$state2 = $$.state, 7045 width = _$$$state2.current.width, 7046 isLegendRight = _$$$state2.isLegendRight, 7047 isLegendInset = _$$$state2.isLegendInset, 7048 legendItemWidth = _$$$state2.legendItemWidth, 7049 legendStep = _$$$state2.legendStep; 7050 return $$.config.legend_show ? isLegendRight || isLegendInset ? legendItemWidth * (legendStep + 1) : width : 0; 7051 }, 7052 /** 7053 * Get the height of the legend 7054 * @returns {number} height 7055 * @private 7056 */ 7057 getLegendHeight: function getLegendHeight() { 7058 var _$$$config$padding; 7059 const $$ = this, 7060 _$$$state3 = $$.state, 7061 current = _$$$state3.current, 7062 isLegendRight = _$$$state3.isLegendRight, 7063 legendItemHeight = _$$$state3.legendItemHeight, 7064 legendStep = _$$$state3.legendStep, 7065 isFitPadding = ((_$$$config$padding = $$.config.padding) == null ? void 0 : _$$$config$padding.mode) === "fit"; 7066 return $$.config.legend_show ? isLegendRight ? current.height : (isFitPadding ? 10 : Math.max(20, legendItemHeight)) * (legendStep + 1) : 0; 7067 }, 7068 /** 7069 * Get the opacity of the legend that is unfocused 7070 * @param {d3.selection} legendItem Legend item node 7071 * @returns {string|null} opacity 7072 * @private 7073 */ 7074 opacityForUnfocusedLegend: function opacityForUnfocusedLegend(legendItem) { 7075 return legendItem.classed($LEGEND.legendItemHidden) ? null : "0.3"; 7076 }, 7077 /** 7078 * Toggles the focus of the legend 7079 * @param {Array} targetIds ID's of target 7080 * @param {boolean}
7080 focus whether or not to focus. 7081 * @private 7082 */ 7083 toggleFocusLegend: function toggleFocusLegend(targetIds, focus) { 7084 var _this2 = this; 7085 const $$ = this, 7086 legend = $$.$el.legend, 7087 $T = $$.$T, 7088 targetIdz = $$.mapToTargetIds(targetIds); 7089 legend && $T(legend.selectAll("." + $LEGEND.legendItem).filter(function (id) { 7090 _newArrowCheck(this, _this2); 7091 return targetIdz.indexOf(id) >= 0; 7092 }.bind(this)).classed($FOCUS.legendItemFocused, focus)).style("opacity", function () { 7093 return focus ? null : $$.opacityForUnfocusedLegend.call($$, (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this)); 7094 }); 7095 }, 7096 /** 7097 * Revert the legend to its default state 7098 * @private 7099 */ 7100 revertLegend: function revertLegend() { 7101 const $$ = this, 7102 legend = $$.$el.legend, 7103 $T = $$.$T; 7104 legend && $T(legend.selectAll("." + $LEGEND.legendItem).classed($FOCUS.legendItemFocused, !1)).style("opacity", null); 7105 }, 7106 /** 7107 * Shows the legend 7108 * @param {Array} targetIds ID's of target 7109 * @private 7110 */ 7111 showLegend: function showLegend(targetIds) { 7112 const $$ = this, 7113 config = $$.config, 7114 $el = $$.$el, 7115 $T = $$.$T; 7116 if (!config.legend_show) { 7117 config.legend_show = !0; 7118 $el.legend ? $el.legend.style("visibility", null) : $$.initLegend(); 7119 $$.state.legendHasRendered || $$.updateLegend(); 7120 } 7121 $$.removeHiddenLegendIds(targetIds); 7122 $T($el.legend.selectAll($$.selectorLegends(targetIds)).style("visibility", null)).style("opacity", null); 7123 }, 7124 /** 7125 * Hide the legend 7126 * @param {Array} targetIds ID's of target 7127 * @private 7128 */ 7129 hideLegend: function hideLegend(targetIds) { 7130 const $$ = this, 7131 config = $$.config, 7132 legend = $$.$el.legend; 7133 if (config.legend_show && isEmpty(targetIds)) { 7134 config.legend_show = !1; 7135 legend.style("visibility", "hidden"); 7136 } 7137 $$.addHiddenLegendIds(targetIds); 7138 legend.selectAll($$.selectorLegends(targetIds)).style("opacity", "0").style("visibility", "hidden"); 7139 }, 7140 /** 7141 * Get legend item textbox dimension 7142 * @param {string} id Data ID 7143 * @param {HTMLElement|d3.selection} textElement Text node element 7144 * @returns {object} Bounding rect 7145 * @private 7146 */ 7147 getLegendItemTextBox: function getLegendItemTextBox(id, textElement) { 7148 const $$ = this, 7149 cache = $$.cache, 7150 state = $$.state; 7151 let data; 7152 7153 // do not prefix w/'$', to not be resetted cache in .load() call 7154 const cacheKey = KEY.legendItemTextBox; 7155 if (id) { 7156 data = !state.redrawing && cache.get(cacheKey) || {}; 7157 if (!data[id]) { 7158 data[id] = $$.getTextRect(textElement, $LEGEND.legendItem); 7159 cache.add(cacheKey, data); 7160 } 7161 data = data[id]; 7162 } 7163 return data; 7164 }, 7165 /** 7166 * Set legend item style & bind events 7167 * @param {d3.selection} item Item node 7168 * @private 7169 */ 7170 setLegendItem: function setLegendItem(item) { 7171 var _this3 = this; 7172 const $$ = this, 7173 $el = $$.$el, 7174 api = $$.api, 7175 config = $$.config, 7176 state = $$.state, 7177 isTouch = state.inputType === "touch", 7178 hasGauge = $$.hasType("gauge"), 7179 useCssRule = config.boost_useCssRule, 7180 interaction = config.legend_item_interaction; 7181 item.attr("class", function (id) { 7182 const node = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 7183 itemClass = !node.empty() && node.attr("class") || ""; 7184 return itemClass + $$.generateClass($LEGEND.legendItem, id); 7185 }).style("visibility", function (id) { 7186 _newArrowCheck(this, _this3); 7187 return $$.isLegendToShow(id) ? null : "hidden"; 7188 }.bind(this)); 7189 if (config.interaction_enabled) { 7190 if (useCssRule) { 7191 [["." + $LEGEND.legendItem, "cursor:pointer"], ["." + $LEGEND.legendItem + " text", "pointer-events:none"], ["." + $LEGEND.legendItemPoint + " text", "pointer-events:none"], ["." + $LEGEND.legendItemTile, "pointer-events:none"], ["." + $LEGEND.legendItemEvent, "fill-opacity:0"]].forEach(function (v) { 7192 _newArrowCheck(this, _this3); 7193 const selector = v[0], 7194 props = v[1]; 7195 $$.setCssRule(!1, selector, [props])($el.legend); 7196 }.bind(this)); 7197 } 7198 item.on(interaction.dblclick ? "dblclick" : "click", interaction || isFunction(config.legend_item_onclick) ? function (event, id) { 7199 if (!callFn(config.legend_item_onclick, api, id)) { 7200 const altKey = event.altKey, 7201 target = event.target, 7202 type = event.type; 7203 if (type === "dblclick" || altKey) {
7204 // when focused legend is clicked(with altKey or double clicked), reset all hiding. 7205 if (state.hiddenTargetIds.length && target.parentNode.getAttribute("class").indexOf($LEGEND.legendItemHidden) === -1) { 7206 api.show(); 7207 } else { 7208 api.hide(); 7209 api.show(id); 7210 } 7211 } else { 7212 api.toggle(id); 7213 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($FOCUS.legendItemFocused, !1); 7214 } 7215 } 7216 isTouch && $$.hideTooltip(); 7217 } : null); 7218 isTouch || item.on("mouseout", interaction || isFunction(config.legend_item_onout) ? function (event, id) { 7219 if (!callFn(config.legend_item_onout, api, id)) { 7220 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($FOCUS.legendItemFocused, !1); 7221 if (hasGauge) { 7222 $$.undoMarkOverlapped($$, "." + $GAUGE.gaugeValue); 7223 } 7224 $$.api.revert(); 7225 } 7226 } : null).on("mouseover", interaction || isFunction(config.legend_item_onover) ? function (event, id) { 7227 if (!callFn(config.legend_item_onover, api, id)) { 7228 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($FOCUS.legendItemFocused, !0); 7229 if (hasGauge) { 7230 $$.markOverlapped(id, $$, "." + $GAUGE.gaugeValue); 7231 } 7232 if (!state.transiting && $$.isTargetToShow(id)) { 7233 api.focus(id); 7234 } 7235 } 7236 } : null); 7237 7238 // set cursor when has some interaction 7239 !item.empty() && item.on("click mouseout mouseover") && item.style("cursor", $$.getStylePropValue("pointer")); 7240 } 7241 }, 7242 /** 7243 * Update the legend 7244 * @param {Array} targetIds ID's of target 7245 * @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. 7246 * @private 7247 */ 7248 updateLegendElement: function updateLegendElement(targetIds, options) { 7249 var _this4 = this; 7250 const $$ = this, 7251 config = $$.config, 7252 state = $$.state, 7253 legend = $$.$el.legend, 7254 $T = $$.$T, 7255 legendType = config.legend_item_tile_type, 7256 isRectangle = legendType !== "circle", 7257 legendItemR = config.legend_item_tile_r, 7258 itemTileSize = { 7259 width: isRectangle ? config.legend_item_tile_width : legendItemR * 2, 7260 height: isRectangle ? config.legend_item_tile_height : legendItemR * 2 7261 }, 7262 dimension = { 7263 padding: { 7264 top: 4, 7265 right: 10 7266 }, 7267 max: { 7268 width: 0, 7269 height: 0 7270 }, 7271 posMin: 10, 7272 step: 0, 7273 tileWidth: itemTileSize.width + 5, 7274 totalLength: 0 7275 }, 7276 sizes = { 7277 offsets: {}, 7278 widths: {}, 7279 heights: {}, 7280 margins: [0], 7281 steps: {} 7282 }; 7283 let xForLegend, yForLegend, background; 7284 // Skip elements when their name is set to null 7285 const targetIdz = targetIds.filter(function (id) { 7286 _newArrowCheck(this, _this4); 7287 return !isDefined(config.data_names[id]) || config.data_names[id] !== null; 7288 }.bind(this)), 7289 withTransition = options.withTransition, 7290 updatePositions = $$.getUpdateLegendPositions(targetIdz, dimension, sizes); 7291 if (state.isLegendInset) { 7292 dimension.step = config.legend_inset_step ? config.legend_inset_step : targetIdz.length; 7293 $$.updateLegendStep(dimension.step); 7294 } 7295 if (state.isLegendRight) { 7296 xForLegend = function (id) { 7297 _newArrowCheck(this, _this4); 7298 return dimension.max.width * sizes.steps[id]; 7299 }.bind(this); 7300 yForLegend = function (id) { 7301 _newArrowCheck(this, _this4); 7302 return sizes.margins[sizes.steps[id]] + sizes.offsets[id]; 7303 }.bind(this); 7304 } else if (state.isLegendInset) { 7305 xForLegend = function (id) { 7306 _newArrowCheck(this, _this4); 7307 return dimension.max.width * sizes.steps[id] + 10; 7308 }.bind(this); 7309 yForLegend = function (id) { 7310 _newArrowCheck(this, _this4); 7311 return sizes.margins[sizes.steps[id]] + sizes.offsets[id]; 7312 }.bind(this); 7313 } else { 7314 xForLegend = function (id) { 7315 _newArrowCheck(this, _this4); 7316 return sizes.margins[sizes.steps[id]] + sizes.offsets[id]; 7317 }.bind(this); 7318 yForLegend = function (id) { 7319 _newArrowCheck(this, _this4); 7320 return dimension.max.height * sizes.steps[id]; 7321 }.bind(this); 7322 } 7323 const posFn = { 7324 xText: function xText(id, i) { 7325 _newArrowCheck(this, _this4); 7326 return xForLegend(id, i) + 4 + itemTileSize.width; 7327 }.bind(this), 7328 xRect: function xRect(id, i) { 7329 _newArrowCheck(this, _this4); 7330 return xForLegend(id, i); 7331 }.bind(this), 7332 x1Tile: function x1Tile(id, i) { 7333 _newArrowCheck(this, _this4); 7334 return xForLegend(id, i) - 2; 7335 }.bind(this), 7336 x2Tile: function x2Tile(id, i) { 7337 _newArrowCheck(this, _this4); 7338 return xForLegend(id, i) - 2 + itemTileSize.width; 7339 }.bind(this), 7340 yText: function yText(id, i) { 7341 _newArrowCheck(this, _this4); 7342 return yForLegend(id, i) + 9; 7343 }.bind(this), 7344 yRect: function yRect(id, i) { 7345 _newArrowCheck(this, _this4); 7346 return yForLegend(id, i) - 5; 7347 }.bind(this), 7348 yTile: function yTile(id, i) { 7349 _newArrowCheck(this, _this4); 7350 return yForLegend(id, i) + 4; 7351 }.bind(this) 7352 }; 7353 $$.generateLegendItem(targetIdz, itemTileSize, updatePositions, posFn); 7354 7355 // Set background for inset legend
7356 background = legend.select("." + $LEGEND.legendBackground + " rect"); 7357 if (state.isLegendInset && dimension.max.width > 0 && background.size() === 0) { 7358 background = legend.insert("g", "." + $LEGEND.legendItem).attr("class", $LEGEND.legendBackground).append("rect"); 7359 } 7360 const texts = legend.selectAll("text").data(targetIdz).text(function (id) { 7361 _newArrowCheck(this, _this4); 7362 return isDefined(config.data_names[id]) ? config.data_names[id] : id; 7363 }.bind(this)) // MEMO: needed for update 7364 .each(function (id, i) { 7365 updatePositions(this, id, i); 7366 }); 7367 $T(texts, withTransition).attr("x", posFn.xText).attr("y", posFn.yText); 7368 const rects = legend.selectAll("rect." + $LEGEND.legendItemEvent).data(targetIdz); 7369 $T(rects, withTransition).attr("width", function (id) { 7370 _newArrowCheck(this, _this4); 7371 return sizes.widths[id]; 7372 }.bind(this)).attr("height", function (id) { 7373 _newArrowCheck(this, _this4); 7374 return sizes.heights[id]; 7375 }.bind(this)).attr("x", posFn.xRect).attr("y", posFn.yRect); 7376 7377 // update legend items position 7378 $$.updateLegendItemPos(targetIdz, withTransition, posFn); 7379 if (background) { 7380 $T(background, withTransition).attr("height", $$.getLegendHeight() - 12).attr("width", dimension.max.width * (dimension.step + 1) + 10); 7381 } 7382 7383 // Update all to reflect change of legend 7384 $$.updateLegendItemWidth(dimension.max.width); 7385 $$.updateLegendItemHeight(dimension.max.height); 7386 $$.updateLegendStep(dimension.step); 7387 }, 7388 /** 7389 * Get position update function 7390 * @param {Array} targetIdz Data ids 7391 * @param {object} dimension Dimension object 7392 * @param {object} sizes Size object 7393 * @returns {Function} Update position function 7394 * @private 7395 */ 7396 getUpdateLegendPositions: function getUpdateLegendPositions(targetIdz, dimension, sizes) { 7397 const $$ = this, 7398 config = $$.config, 7399 state = $$.state, 7400 isLegendRightOrInset = state.isLegendRight || state.isLegendInset; 7401 return function (textElement, id, index) { 7402 var _this5 = this; 7403 const isLast = index === targetIdz.length - 1, 7404 box = $$.getLegendItemTextBox(id, textElement), 7405 itemWidth = box.width + dimension.tileWidth + (isLast && !isLegendRightOrInset ? 0 : dimension.padding.right) + config.legend_padding, 7406 itemHeight = box.height + dimension.padding.top, 7407 itemLength = isLegendRightOrInset ? itemHeight : itemWidth, 7408 areaLength = isLegendRightOrInset ? $$.getLegendHeight() : $$.getLegendWidth(); 7409 let margin; 7410 7411 // MEMO: care about condifion of step, totalLength 7412 const updateValues = function (id2, withoutStep) { 7413 if (!withoutStep) { 7414 margin = (areaLength - dimension.totalLength - itemLength) / 2; 7415 if (margin < dimension.posMin) { 7416 margin = (areaLength - itemLength) / 2; 7417 dimension.totalLength = 0; 7418 dimension.step++; 7419 } 7420 } 7421 sizes.steps[id2] = dimension.step; 7422 sizes.margins[dimension.step] = state.isLegendInset ? 10 : margin; 7423 sizes.offsets[id2] = dimension.totalLength; 7424 dimension.totalLength += itemLength; 7425 }; 7426 if (index === 0) { 7427 dimension.totalLength = 0; 7428 dimension.step = 0; 7429 dimension.max.width = 0; 7430 dimension.max.height = 0; 7431 } 7432 if (config.legend_show && !$$.isLegendToShow(id)) { 7433 sizes.widths[id] = 0; 7434 sizes.heights[id] = 0; 7435 sizes.steps[id] = 0; 7436 sizes.offsets[id] = 0; 7437 return; 7438 } 7439 sizes.widths[id] = itemWidth; 7440 sizes.heights[id] = itemHeight; 7441 if (!dimension.max.width || itemWidth >= dimension.max.width) { 7442 dimension.max.width = itemWidth; 7443 } 7444 if (!dimension.max.height || itemHeight >= dimension.max.height) { 7445 dimension.max.height = itemHeight; 7446 } 7447 const maxLength = isLegendRightOrInset ? dimension.max.height : dimension.max.width; 7448 if (config.legend_equally) { 7449 Object.keys(sizes.widths).forEach(function (id2) { 7450 _newArrowCheck(this, _this5); 7451 return sizes.widths[id2] = dimension.max.width; 7452 }.bind(this));
7453 Object.keys(sizes.heights).forEach(function (id2) { 7454 _newArrowCheck(this, _this5); 7455 return sizes.heights[id2] = dimension.max.height; 7456 }.bind(this)); 7457 margin = (areaLength - maxLength * targetIdz.length) / 2; 7458 if (margin < dimension.posMin) { 7459 dimension.totalLength = 0; 7460 dimension.step = 0; 7461 targetIdz.forEach(function (id2) { 7462 _newArrowCheck(this, _this5); 7463 return updateValues(id2); 7464 }.bind(this)); 7465 } else { 7466 updateValues(id, !0); 7467 } 7468 } else { 7469 updateValues(id); 7470 } 7471 }; 7472 }, 7473 /** 7474 * Generate legend item elements 7475 * @param {Array} targetIdz Data ids 7476 * @param {object} itemTileSize Item tile size {width, height} 7477 * @param {Function} updatePositions Update position function 7478 * @param {object} posFn Position functions 7479 * @private 7480 */ 7481 generateLegendItem: function generateLegendItem(targetIdz, itemTileSize, updatePositions, posFn) { 7482 var _this6 = this; 7483 const $$ = this, 7484 config = $$.config, 7485 state = $$.state, 7486 legend = $$.$el.legend, 7487 usePoint = config.legend_usePoint, 7488 legendItemR = config.legend_item_tile_r, 7489 legendType = config.legend_item_tile_type, 7490 isRectangle = legendType !== "circle", 7491 isLegendRightOrInset = state.isLegendRight || state.isLegendInset, 7492 pos = -200, 7493 l = legend.selectAll("." + $LEGEND.legendItem).data(targetIdz).enter().append("g"); 7494 7495 // Define g for legend area 7496 7497 $$.setLegendItem(l); 7498 l.append("text").text(function (id) { 7499 _newArrowCheck(this, _this6); 7500 return isDefined(config.data_names[id]) ? config.data_names[id] : id; 7501 }.bind(this)).each(function (id, i) { 7502 updatePositions(this, id, i); 7503 }).style("pointer-events", $$.getStylePropValue("none")).attr("x", isLegendRightOrInset ? posFn.xText : -200).attr("y", isLegendRightOrInset ? -200 : posFn.yText); 7504 l.append("rect").attr("class", $LEGEND.legendItemEvent).style("fill-opacity", $$.getStylePropValue("0")).attr("x", isLegendRightOrInset ? posFn.xRect : -200).attr("y", isLegendRightOrInset ? -200 : posFn.yRect); 7505 if (usePoint) { 7506 const ids = []; 7507 l.append(function (d) { 7508 _newArrowCheck(this, _this6); 7509 const pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type]; 7510 ids.indexOf(d) === -1 && ids.push(d); 7511 let point = pattern[ids.indexOf(d) % pattern.length]; 7512 if (point === "rectangle") { 7513 point = "rect"; 7514 } 7515 return browser_doc.createElementNS(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.namespaces.svg, "hasValidPointType" in $$ && $$.hasValidPointType(point) ? point : "use"); 7516 }.bind(this)).attr("class", $LEGEND.legendItemPoint).style("fill", getLegendColor.bind($$)).style("pointer-events", $$.getStylePropValue("none")).attr("href", function (data, idx, selection) { 7517 _newArrowCheck(this, _this6); 7518 const node = selection[idx], 7519 nodeName = node.nodeName.toLowerCase(), 7520 id = $$.getTargetSelectorSuffix(data); 7521 return nodeName === "use" ? "#" + state.datetimeId + "-point" + id : undefined; 7522 }.bind(this)); 7523 } else { 7524 l.append(isRectangle ? "line" : legendType).attr("class", $LEGEND.legendItemTile).style("stroke", getLegendColor.bind($$)).style("pointer-events", $$.getStylePropValue("none")).call(function (selection) { 7525 _newArrowCheck(this, _this6); 7526 if (legendType === "circle") { 7527 selection.attr("r", legendItemR).style("fill", getLegendColor.bind($$)).attr("cx", isLegendRightOrInset ? posFn.x2Tile : pos).attr("cy", isLegendRightOrInset ? pos : posFn.yTile); 7528 } else if (isRectangle) { 7529 selection.attr("stroke-width", itemTileSize.height).attr("x1", isLegendRightOrInset ? posFn.x1Tile : pos).attr("y1", isLegendRightOrInset ? pos : posFn.yTile).attr("x2", isLegendRightOrInset ? posFn.x2Tile : pos).attr("y2", isLegendRightOrInset ? pos : posFn.yTile); 7530 } 7531 }.bind(this)); 7532 } 7533 }, 7534 /** 7535 * Update legend item position 7536 * @param {Array} targetIdz Data ids 7537 * @param {boolean} withTransition Whether or not to apply transition 7538 * @param {object} posFn Position functions 7539 * @private 7540 */ 7541 updateLegendItemPos: function updateLegendItemPos(targetIdz, withTransition, posFn) { 7542 var _this8 = this; 7543 const $$ = this, 7544 config = $$.config, 7545 legend = $$.$el.legend, 7546 $T = $$.$T, 7547 usePoint = config.legend_usePoint,
7548 legendType = config.legend_item_tile_type; 7549 if (usePoint) { 7550 const tiles = legend.selectAll("." + $LEGEND.legendItemPoint).data(targetIdz); 7551 $T(tiles, withTransition).each(function () { 7552 var _this7 = this; 7553 const nodeName = this.nodeName.toLowerCase(), 7554 pointR = config.point_r; 7555 let x = "x", 7556 y = "y", 7557 xOffset = 2, 7558 yOffset = 2.5, 7559 radius = null, 7560 width = null, 7561 height = null; 7562 if (nodeName === "circle") { 7563 const size = pointR * .2; 7564 x = "cx"; 7565 y = "cy"; 7566 radius = pointR + size; 7567 xOffset = pointR * 2; 7568 yOffset = -size; 7569 } else if (nodeName === "rect") { 7570 const size = pointR * 2.5; 7571 width = size; 7572 height = size; 7573 yOffset = 3; 7574 } 7575 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).attr(x, function (d) { 7576 _newArrowCheck(this, _this7); 7577 return posFn.x1Tile(d) + xOffset; 7578 }.bind(this)).attr(y, function (d) { 7579 _newArrowCheck(this, _this7); 7580 return posFn.yTile(d) - yOffset; 7581 }.bind(this)).attr("r", radius).attr("width", width).attr("height", height); 7582 }); 7583 } else { 7584 const tiles = legend.selectAll("." + $LEGEND.legendItemTile).data(targetIdz); 7585 $T(tiles, withTransition).style("stroke", getLegendColor.bind($$)).call(function (selection) { 7586 var _this9 = this; 7587 _newArrowCheck(this, _this8); 7588 if (legendType === "circle") { 7589 selection.attr("cx", function (d) { 7590 _newArrowCheck(this, _this9); 7591 const x2 = posFn.x2Tile(d); 7592 return x2 - (x2 - posFn.x1Tile(d)) / 2; 7593 }.bind(this)).attr("cy", posFn.yTile); 7594 } else if (legendType !== "circle") { 7595 selection.attr("x1", posFn.x1Tile).attr("y1", posFn.yTile).attr("x2", posFn.x2Tile).attr("y2", posFn.yTile); 7596 } 7597 }.bind(this)); 7598 } 7599 } 7600}); 7601// EXTERNAL MODULE: external {"commonjs":"d3-transition","commonjs2":"d3-transition","amd":"d3-transition","root":"d3"} 7602var external_commonjs_d3_transition_commonjs2_d3_transition_amd_d3_transition_root_d3_ = __webpack_require__(8); 7603;// CONCATENATED MODULE: ./src/ChartInternal/internals/redraw.ts 7604 7605/** 7606 * Copyright (c) 2017 ~ present NAVER Corp. 7607 * billboard.js project is licensed under the MIT license 7608 */ 7609 7610 7611 7612 7613/* harmony default export */ var redraw = ({ 7614 redraw: function redraw(options) { 7615 var _$$$axis, 7616 _this = this; 7617 if (options === void 0) { 7618 options = {}; 7619 } 7620 const $$ = this, 7621 config = $$.config, 7622 state = $$.state, 7623 $el = $$.$el, 7624 _$el = $el, 7625 main = _$el.main, 7626 treemap = _$el.treemap; 7627 state.redrawing = !0; 7628 const targetsToShow = $$.filterTargetsToShow($$.data.targets), 7629 _options = options, 7630 flow = _options.flow, 7631 initializing = _options.initializing, 7632 wth = $$.getWithOption(options), 7633 duration = wth.Transition ? config.transition_duration : 0, 7634 durationForExit = wth.TransitionForExit ? duration : 0, 7635 durationForAxis = wth.TransitionForAxis ? duration : 0, 7636 transitions = (_$$$axis = $$.axis) == null ? void 0 : _$$$axis.generateTransitions(durationForAxis); 7637 $$.updateSizes(initializing); 7638 7639 // update legend and transform each g 7640 if (wth.Legend && config.legend_show) { 7641 options.withTransition = !!duration; 7642 treemap || $$.updateLegend($$.mapToIds($$.data.targets), options, transitions); 7643 } else if (wth.Dimension) { 7644 // need to update dimension (e.g. axis.y.tick.values) because y tick values should change 7645 // no need to update axis in it because they will be updated in redraw() 7646 $$.updateDimension(!0); 7647 } 7648 7649 // Data empty label positioning and text. 7650 config.data_empty_label_text && main.select("text." + $TEXT.text + "." + $COMMON.empty).attr("x", state.width / 2).attr("y", state.height / 2).text(config.data_empty_label_text).style("display", targetsToShow.length ? "none" : null); 7651 7652 // update axis 7653 if (state.hasAxis) { 7654 // @TODO: Make 'init' state to be accessible everywhere not passing as argument. 7655 $$.axis.redrawAxis(targetsToShow, wth, transitions, flow, initializing); 7656 7657 // grid 7658 $$.hasGrid() && $$.updateGrid(); 7659 7660 // rect for regions 7661 config.regions.length && $$.updateRegion(); 7662 ["bar", "candlestick", "line", "area"].forEach(function (v) { 7663 _newArrowCheck(this, _this); 7664 const name = capitalize(v); 7665 if (/^(line|area)$/.test(v) && $$.hasTypeOf(name) || $$.hasType(v)) { 7666 $$["update" + name](wth.TransitionForExit); 7667 } 7668 }.bind(this)); 7669 7670 // circles for select 7671 $el.text && main.selectAll("." + $SELECT.selectedCircles).filter($$.isBarType.bind($$)).selectAll("circle").remove(); 7672 7673 // event rects will redrawn when flow called 7674 if (config.interaction_enabled && !flow && wth.EventRect) { 7675 $$.redrawEventRect(); 7676 $$.bindZoomEvent == null || $$.bindZoomEvent(); 7677 } 7678 } else { 7679 // arc 7680 $el.arcs && $$.redrawArc(duration, durationForExit, wth.Transform); 7681 7682 // radar 7683 $el.radar && $$.redrawRadar(); 7684 7685 // polar 7686 $el.polar && $$.redrawPolar(); 7687 7688 // treemap 7689 treemap && $$.updateTreemap(durationForExit); 7690 } 7691 7692 // @TODO: Axis & Radar type 7693 if (!state.resizing && !treemap && ($$.hasPointType() || state.hasRadar)) { 7694 $$.updateCircle(); 7695 } 7696 7697 // text 7698 $$.hasDataLabel() && !$$.hasArcType(null, ["radar"]) && $$.updateText(); 7699 7700 // title 7701 $$.redrawTitle == null || $$.redrawTitle(); 7702 initializing && $$.updateTypesElements(); 7703 $$.generateRedrawList(targetsToShow, flow, duration, wth.Subchart); 7704 $$.updateTooltipOnRedraw(); 7705 $$.callPluginHook("$redraw", options, duration); 7706 }, 7707 /** 7708 * Generate redraw list 7709 * @param {object} targets targets data to be shown 7710 * @param {object} flow flow object 7711 * @param {number} duration duration value 7712 * @param {boolean} withSubchart whether or not to show subchart 7713 * @private 7714 */ 7715 generateRedrawList: function generateRedrawList(targets, flow, duration, withSubchart) { 7716 var _this2 = this; 7717 const $$ = this, 7718 config = $$.config, 7719 state = $$.state, 7720 shape = $$.getDrawShape(); 7721 if (state.hasAxis) { 7722 // subchart 7723 config.subchart_show && $$.redrawSubchart(withSubchart, duration, shape); 7724 } 7725 7726 // generate flow 7727 const flowFn = flow && $$.generateFlow({ 7728 targets: targets, 7729 flow: flow, 7730 duration: flow.duration, 7731 shape: shape, 7732 xv: $$.xv.bind($$) 7733 }), 7734 withTransition = (duration || flowFn) && isTabVisible(), 7735 redrawList = $$.getRedrawList(shape, flow, flowFn, withTransition), 7736 afterRedraw = function () { 7737 _newArrowCheck(this, _this2); 7738 flowFn && flowFn(); 7739 state.redrawing = !1; 7740 callFn(config.onrendered, $$.api); 7741 }.bind(this); // redraw list 7742 // callback function after redraw ends 7743 if (afterRedraw) { 7744 // Only use transition when current tab is visible. 7745 if (withTransition && redrawList.length) { 7746 // Wait for end of transitions for callback 7747 const waitForDraw = generateWait(); 7748 7749 // transition should be derived from one transition 7750 (0,external_commonjs_d3_transition_commonjs2_d3_transition_amd_d3_transition_root_d3_.transition)().duration(duration).each(function () { 7751 var _this3 = this; 7752 _newArrowCheck(this, _this2); 7753 redrawList.reduce(function (acc, t1) { 7754 _newArrowCheck(this, _this3); 7755 return acc.concat(t1); 7756 }
7756.bind(this), []).forEach(function (t) { 7757 _newArrowCheck(this, _this3); 7758 return waitForDraw.add(t); 7759 }.bind(this)); 7760 }.bind(this)).call(waitForDraw, afterRedraw); 7761 } else if (!state.transiting) { 7762 afterRedraw(); 7763 } 7764 } 7765 7766 // update fadein condition 7767 $$.mapToIds($$.data.targets).forEach(function (id) { 7768 _newArrowCheck(this, _this2); 7769 state.withoutFadeIn[id] = !0; 7770 }.bind(this)); 7771 }, 7772 getRedrawList: function getRedrawList(shape, flow, flowFn, withTransition) { 7773 var _this4 = this; 7774 const $$ = this, 7775 config = $$.config, 7776 _$$$state = $$.state, 7777 hasAxis = _$$$state.hasAxis, 7778 hasRadar = _$$$state.hasRadar, 7779 hasTreemap = _$$$state.hasTreemap, 7780 grid = $$.$el.grid, 7781 _shape$pos = shape.pos, 7782 cx = _shape$pos.cx, 7783 cy = _shape$pos.cy, 7784 xForText = _shape$pos.xForText, 7785 yForText = _shape$pos.yForText, 7786 list = []; 7787 if (hasAxis) { 7788 if (config.grid_x_lines.length || config.grid_y_lines.length) { 7789 list.push($$.redrawGrid(withTransition)); 7790 } 7791 if (config.regions.length) { 7792 list.push($$.redrawRegion(withTransition)); 7793 } 7794 Object.keys(shape.type).forEach(function (v) { 7795 _newArrowCheck(this, _this4); 7796 const name = capitalize(v), 7797 drawFn = shape.type[v]; 7798 if (/^(area|line)$/.test(v) && $$.hasTypeOf(name) || $$.hasType(v)) { 7799 list.push($$["redraw" + name](drawFn, withTransition)); 7800 } 7801 }.bind(this)); 7802 !flow && grid.main && list.push($$.updateGridFocus()); 7803 } 7804 if (!$$.hasArcType() || hasRadar) { 7805 notEmpty(config.data_labels) && config.data_labels !== !1 && list.push($$.redrawText(xForText, yForText, flow, withTransition)); 7806 } 7807 if (($$.hasPointType() || hasRadar) && !$$.isPointFocusOnly()) { 7808 $$.redrawCircle && list.push($$.redrawCircle(cx, cy, withTransition, flowFn)); 7809 } 7810 if (hasTreemap) { 7811 list.push($$.redrawTreemap(withTransition)); 7812 } 7813 return list; 7814 }, 7815 updateAndRedraw: function updateAndRedraw(options) { 7816 if (options === void 0) { 7817 options = {}; 7818 } 7819 const $$ = this, 7820 config = $$.config, 7821 state = $$.state; 7822 let transitions; 7823 7824 // same with redraw 7825 options.withTransition = getOption(options, "withTransition", !0); 7826 options.withTransform = getOption(options, "withTransform", !1); 7827 options.withLegend = getOption(options, "withLegend", !1); 7828 7829 // NOT same with redraw 7830 options.withUpdateXDomain = !0; 7831 options.withUpdateOrgXDomain = !0; 7832 options.withTransitionForExit = !1; 7833 options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition); 7834 7835 // MEMO: called in updateLegend in redraw if withLegend 7836 if (!(options.withLegend && config.legend_show)) { 7837 if (state.hasAxis) { 7838 transitions = $$.axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0); 7839 } 7840 7841 // Update scales 7842 $$.updateScales(); 7843 $$.updateSvgSize(); 7844 7845 // Update g positions 7846 $$.transformAll(options.withTransitionForTransform, transitions); 7847 } 7848 7849 // Draw with new sizes & scales 7850 $$.redraw(options, transitions); 7851 } 7852}); 7853;// CONCATENATED MODULE: ./src/ChartInternal/internals/scale.ts 7854 7855/** 7856 * Copyright (c) 2017 ~ present NAVER Corp. 7857 * billboard.js project is licensed under the MIT license 7858 */ 7859 7860 7861/** 7862 * Get scale 7863 * @param {string} [type='linear'] Scale type 7864 * @param {number} [min] Min range 7865 * @param {number} [max] Max range 7866 * @returns {d3.scaleLinear|d3.scaleTime} scale 7867 * @private 7868 */ 7869function getScale(type, min, max) { 7870 if (type === void 0) { 7871 type = "linear"; 7872 } 7873 if (min === void 0) { 7874 min = 0; 7875 } 7876 if (max === void 0) { 7877 max = 1; 7878 } 7879 const scale = { 7880 linear: external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleLinear, 7881 log: external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleSymlog, 7882 _log: external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleLog, 7883 time: external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleTime, 7884 utc: external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleUtc 7885 }[type](); 7886 scale.type = type; 7887 /_?log/.test(type) && scale.clamp(!0); 7888 return scale.range([min, max]); 7889} 7890/* harmony default export */ var scale = ({ 7891 /** 7892 * Get x Axis scale function 7893 * @param {number} min Min value 7894 * @param {number} max Max value 7895 * @param {Array} domain Domain value 7896 * @param {Function} offset The offset getter to be sum 7897 * @returns {Function} scale 7898 * @private 7899 */ 7900 getXScale: function getXScale(min, max, domain, offset) { 7901 const $$ = this, 7902 scale = $$.scale.zoom || getScale($$.axis.getAxisType("x"), min, max); 7903 return $$.getCustomizedXScale(domain ? scale.domain(domain) : scale, offset); 7904 }, 7905 /** 7906 * Get y Axis scale function 7907 * @param {string} id Axis id: 'y' or 'y2' 7908 * @param {number} min Min value 7909 * @param {number} max Max value 7910 * @param {Array} domain Domain value 7911 * @returns {Function} Scale function 7912 * @private 7913 */ 7914 getYScale: function getYScale(id, min, max, domain) { 7915 const $$ = this, 7916 scale = getScale($$.axis.getAxisType(id), min, max); 7917 domain && scale.domain(domain); 7918 return scale; 7919 }, 7920 /** 7921 * Get y Axis scale 7922 * @param {string} id Axis id 7923 * @param {boolean} isSub Weather is sub Axis 7924 * @returns {Function} Scale function 7925 * @private 7926 */ 7927 getYScaleById: function getYScaleById(id, isSub) { 7928 var _this$axis; 7929 if (isSub === void 0) { 7930 isSub = !1; 7931 } 7932 const isY2 = ((_this$axis = this.axis) == null ? void 0 : _this$axis.getId(id)) === "y2", 7933 key = isSub ? isY2 ? "subY2" : "subY" : isY2 ? "y2" : "y"; 7934 return this.scale[key]; 7935 }, 7936 /** 7937 * Get customized x axis scale 7938 * @param {d3.scaleLinear|d3.scaleTime} scaleValue Scale function 7939 * @param {Function} offsetValue Offset getter to be sum 7940 * @returns {Function} Scale function 7941 * @private 7942 */ 7943 getCustomizedXScale: function getCustomizedXScale(scaleValue, offsetValue) { 7944 var _this = this; 7945 const $$ = this, 7946 offset = offsetValue || function () { 7947 _newArrowCheck(this, _this); 7948 return $$.axis.x.tickOffset(); 7949 }.bind(this), 7950 isInverted = $$.config.axis_x_inverted, 7951 scale = function (d, raw) { 7952 const v = scaleValue(d) + offset();
7953 return raw ? v : Math.ceil(v); 7954 }; 7955 // copy original scale methods 7956 for (const key in scaleValue) { 7957 scale[key] = scaleValue[key]; 7958 } 7959 scale.orgDomain = function () { 7960 _newArrowCheck(this, _this); 7961 return scaleValue.domain(); 7962 }.bind(this); 7963 scale.orgScale = function () { 7964 _newArrowCheck(this, _this); 7965 return scaleValue; 7966 }.bind(this); 7967 7968 // define custom domain() for categorized axis 7969 if ($$.axis.isCategorized()) { 7970 scale.domain = function (domainValue) { 7971 let domain = domainValue; 7972 if (!arguments.length) { 7973 domain = this.orgDomain(); 7974 return isInverted ? [domain[0] + 1, domain[1]] : [domain[0], domain[1] + 1]; 7975 } 7976 scaleValue.domain(domain); 7977 return scale; 7978 }; 7979 } 7980 return scale; 7981 }, 7982 /** 7983 * Update scale 7984 * @param {boolean} isInit Param is given at the init rendering 7985 * @param {boolean} updateXDomain If update x domain 7986 * @private 7987 */ 7988 updateScales: function updateScales(isInit, updateXDomain) { 7989 var _this2 = this; 7990 if (updateXDomain === void 0) { 7991 updateXDomain = !0; 7992 } 7993 const $$ = this, 7994 axis = $$.axis, 7995 config = $$.config, 7996 format = $$.format, 7997 org = $$.org, 7998 scale = $$.scale, 7999 _$$$state = $$.state, 8000 current = _$$$state.current, 8001 width = _$$$state.width, 8002 height = _$$$state.height, 8003 width2 = _$$$state.width2, 8004 height2 = _$$$state.height2, 8005 hasAxis = _$$$state.hasAxis, 8006 hasTreemap = _$$$state.hasTreemap; 8007 if (hasAxis) { 8008 var _scale$x; 8009 const isRotated = config.axis_rotated, 8010 resettedPadding = $$.getResettedPadding(1), 8011 min = { 8012 x: isRotated ? resettedPadding : 0, 8013 y: isRotated ? 0 : height, 8014 subX: isRotated ? 1 : 0, 8015 subY: isRotated ? 0 : height2 8016 }, 8017 max = { 8018 x: isRotated ? height : width, 8019 y: isRotated ? width : resettedPadding, 8020 subX: isRotated ? height : width, 8021 subY: isRotated ? width2 : 1 8022 }, 8023 xDomain = updateXDomain && ((_scale$x = scale.x) == null ? void 0 : _scale$x.orgDomain()), 8024 xSubDomain = updateXDomain && org.xDomain; // update edges 8025 // update scales 8026 // x Axis 8027 scale.x = $$.getXScale(min.x, max.x, xDomain, function () { 8028 _newArrowCheck(this, _this2); 8029 return axis.x.tickOffset(); 8030 }.bind(this)); 8031 scale.subX = $$.getXScale(min.x, max.x, xSubDomain, function (d) { 8032 var _axis$subX; 8033 _newArrowCheck(this, _this2); 8034 return d % 1 ? 0 : ((_axis$subX = axis.subX) != null ? _axis$subX : axis.x).tickOffset(); 8035 }.bind(this)); 8036 format.xAxisTick = axis.getXAxisTickFormat(); 8037 format.subXAxisTick = axis.getXAxisTickFormat(!0); 8038 axis.setAxis("x", scale.x, config.axis_x_tick_outer, isInit); 8039 if (config.subchart_show) { 8040 axis.setAxis("subX", scale.subX, config.axis_x_tick_outer, isInit); 8041 } 8042 8043 // y Axis 8044 scale.y = $$.getYScale("y", min.y, max.y, scale.y ? scale.y.domain() : config.axis_y_default); 8045 scale.subY = $$.getYScale("y", min.subY, max.subY, scale.subY ? scale.subY.domain() : config.axis_y_default); 8046 axis.setAxis("y", scale.y, config.axis_y_tick_outer, isInit); 8047 8048 // y2 Axis 8049 if (config.axis_y2_show) { 8050 scale.y2 = $$.getYScale("y2", min.y, max.y, scale.y2 ? scale.y2.domain() : config.axis_y2_default); 8051 scale.subY2 = $$.getYScale("y2", min.subY, max.subY, scale.subY2 ? scale.subY2.domain() : config.axis_y2_default); 8052 axis.setAxis("y2", scale.y2, config.axis_y2_tick_outer, isInit); 8053 } 8054 } else if (hasTreemap) { 8055 const padding = $$.getCurrentPadding(); 8056 scale.x = (0,external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleLinear)().rangeRound([padding.left, current.width - padding.right]); 8057 scale.y = (0,external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_.scaleLinear)().rangeRound([padding.top, current.height - padding.bottom]); 8058 } else { 8059 // update for arc 8060 $$.updateArc == null || $$.updateArc(); 8061 } 8062 }, 8063 /** 8064 * Get the zoom or unzoomed scaled value 8065 * @param {Date|number|object} d Data value 8066 * @returns {number|null} 8067 * @private 8068 */ 8069 xx: function xx(d) { 8070 const $$ = this, 8071 config = $$.config, 8072 _$$$scale = $$.scale, 8073 x = _$$$scale.x, 8074 zoom = _$$$scale.zoom, 8075 fn = config.zoom_enabled && zoom ? zoom : x; 8076 return d ? fn(isValue(d.x) ? d.x : d) : null; 8077 }, 8078 xv: function xv(d) { 8079 const $$ = this, 8080 axis = $$.axis, 8081 config = $$.config, 8082 _$$$scale2 = $$.scale, 8083 x = _$$$scale2.x, 8084 zoom = _$$$scale2.zoom, 8085 fn = config.zoom_enabled && zoom ? zoom : x; 8086 let value = $$.getBaseValue(d); 8087 if (axis.isTimeSeries()) { 8088 value = parseDate.call($$, value); 8089 } else if (axis.isCategorized() && isString(value)) { 8090 value = config.axis_x_categories.indexOf(value); 8091 } 8092 return Math.ceil(fn(value)); 8093 }, 8094 yv: function yv(d) { 8095 const $$ = this, 8096 _$$$scale3 = $$.scale, 8097 y = _$$$scale3.y, 8098 y2 = _$$$scale3.y2,
8099 yScale = d.axis && d.axis === "y2" ? y2 : y; 8100 return Math.ceil(yScale($$.getBaseValue(d))); 8101 }, 8102 subxx: function subxx(d) { 8103 return d ? this.scale.subX(d.x) : null; 8104 } 8105}); 8106// EXTERNAL MODULE: external {"commonjs":"d3-shape","commonjs2":"d3-shape","amd":"d3-shape","root":"d3"} 8107var external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_ = __webpack_require__(9); 8108;// CONCATENATED MODULE: ./src/ChartInternal/shape/shape.ts 8109 8110/** 8111 * Copyright (c) 2017 ~ present NAVER Corp. 8112 * billboard.js project is licensed under the MIT license 8113 */ 8114 8115 8116 8117 8118/** 8119 * Get grouped data point function for y coordinate 8120 * - Note: Grouped(stacking) works only for line and bar types 8121 * @param {object} d data vlaue 8122 * @returns {Function|undefined} 8123 * @private 8124 */ 8125function getGroupedDataPointsFn(d) { 8126 const $$ = this; 8127 let fn; 8128 if ($$.isLineType(d)) { 8129 fn = $$.generateGetLinePoints($$.getShapeIndices($$.isLineType)); 8130 } else if ($$.isBarType(d)) { 8131 fn = $$.generateGetBarPoints($$.getShapeIndices($$.isBarType)); 8132 } 8133 return fn; 8134} 8135/* harmony default export */ var shape = ({ 8136 /** 8137 * Get the shape draw function 8138 * @returns {object} 8139 * @private 8140 */ 8141 getDrawShape: function getDrawShape() { 8142 var _this = this; 8143 const $$ = this, 8144 isRotated = $$.config.axis_rotated, 8145 _$$$state = $$.state, 8146 hasRadar = _$$$state.hasRadar, 8147 hasTreemap = _$$$state.hasTreemap, 8148 shape = { 8149 type: {}, 8150 indices: {}, 8151 pos: {} 8152 }; 8153 hasTreemap || ["bar", "candlestick", "line", "area"].forEach(function (v) { 8154 _newArrowCheck(this, _this); 8155 const name = capitalize(/^(bubble|scatter)$/.test(v) ? "line" : v); 8156 if ($$.hasType(v) || $$.hasTypeOf(name) || v === "line" && ($$.hasType("bubble") || $$.hasType("scatter"))) { 8157 const indices = $$.getShapeIndices($$["is" + name + "Type"]), 8158 drawFn = $$["generateDraw" + name]; 8159 shape.indices[v] = indices; 8160 shape.type[v] = drawFn ? drawFn.bind($$)(indices, !1) : undefined; 8161 } 8162 }.bind(this)); 8163 if (!$$.hasArcType() || hasRadar || hasTreemap) { 8164 let cx, cy; 8165 // generate circle x/y functions depending on updated params 8166 if (!hasTreemap) { 8167 cx = hasRadar ? $$.radarCircleX : isRotated ? $$.circleY : $$.circleX; 8168 cy = hasRadar ? $$.radarCircleY : isRotated ? $$.circleX : $$.circleY; 8169 } 8170 shape.pos = { 8171 xForText: $$.generateXYForText(shape.indices, !0), 8172 yForText: $$.generateXYForText(shape.indices, !1), 8173 cx: (cx || function () {}).bind($$), 8174 cy: (cy || function () {}).bind($$) 8175 }; 8176 } 8177 return shape; 8178 }, 8179 /** 8180 * Get shape's indices according it's position within each axis tick. 8181 * 8182 * From the below example, indices will be: 8183 * ==> {data1: 0, data2: 0, data3: 1, data4: 1, __max__: 1} 8184 * 8185 * data1 data3 data1 data3 8186 * data2 data4 data2 data4 8187 * ------------------------- 8188 * 0 1 8189 * @param {Function} typeFilter Chart type filter function 8190 * @returns {object} Indices object with its position 8191 */ 8192 getShapeIndices: function getShapeIndices(typeFilter) { 8193 var _this2 = this; 8194 const $$ = this, 8195 config = $$.config, 8196 xs = config.data_xs, 8197 hasXs = notEmpty(xs), 8198 indices = {}; 8199 let i = hasXs ? {} : 0; 8200 if (hasXs) { 8201 getUnique(Object.keys(xs).map(function (v) { 8202 _newArrowCheck(this, _this2); 8203 return xs[v]; 8204 }.bind(this))).forEach(function (v) { 8205 _newArrowCheck(this, _this2); 8206 i[v] = 0; 8207 indices[v] = {}; 8208 }.bind(this)); 8209 } 8210 $$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$)).forEach(function (d) { 8211 _newArrowCheck(this, _this2); 8212 const xKey = d.id in xs ? xs[d.id] : "", 8213 ind = xKey ? indices[xKey] : indices; 8214 for (let j = 0, groups; groups = config.data_groups[j]; j++) { 8215 if (groups.indexOf(d.id) < 0) { 8216 continue; 8217 } 8218 for (let k = 0, key; key = groups[k]; k++) { 8219 if (key in ind) { 8220 ind[d.id] = ind[key]; 8221 break; 8222 } 8223 8224 // for same grouped data, add other data to same indices 8225 if (d.id !== key && xKey) { 8226 var _ind$d$id; 8227 ind[key] = (_ind$d$id = ind[d.id]) != null ? _ind$d$id : i[xKey]; 8228 } 8229 } 8230 } 8231 if (isUndefined(ind[d.id])) { 8232 ind[d.id] = xKey ? i[xKey]++ : i++; 8233 ind.__max__ = (xKey ? i[xKey] : i) - 1; 8234 } 8235 }.bind(this)); 8236 return indices; 8237 }, 8238 /** 8239 * Get indices value based on data ID value 8240 * @param {object} indices Indices object 8241 * @param {object} d Data row 8242 * @param {string} caller Caller function name (Used only for 'sparkline' plugin) 8243 * @returns {object} Indices object 8244 * @private 8245 */ 8246 getIndices: function getIndices(indices, d) { 8247 var _this3 = this; 8248 // eslint-disable-line 8249 const $$ = this, 8250 _$$$config = $$.config, 8251 xs = _$$$config.data_xs, 8252 removeNull = _$$$config.bar_indices_removeNull, 8253 id = d.id, 8254 index = d.index; 8255 if ($$.isBarType(id) && removeNull) { 8256 const ind = {}; 8257 8258 // redefine bar indices order
8259 $$.getAllValuesOnIndex(index, !0).forEach(function (v, i) { 8260 _newArrowCheck(this, _this3); 8261 ind[v.id] = i; 8262 ind.__max__ = i; 8263 }.bind(this)); 8264 return ind; 8265 } 8266 return notEmpty(xs) ? indices[xs[id]] : indices; 8267 }, 8268 /** 8269 * Get indices max number 8270 * @param {object} indices Indices object 8271 * @returns {number} Max number 8272 * @private 8273 */ 8274 getIndicesMax: function getIndicesMax(indices) { 8275 var _this4 = this; 8276 return notEmpty(this.config.data_xs) ? 8277 // if is multiple xs, return total sum of xs' __max__ value 8278 Object.keys(indices).map(function (v) { 8279 _newArrowCheck(this, _this4); 8280 return indices[v].__max__ || 0; 8281 }.bind(this)).reduce(function (acc, curr) { 8282 _newArrowCheck(this, _this4); 8283 return acc + curr; 8284 }.bind(this)) : indices.__max__; 8285 }, 8286 getShapeX: function getShapeX(offset, indices, isSub) { 8287 var _this5 = this; 8288 const $$ = this, 8289 config = $$.config, 8290 scale = $$.scale, 8291 currScale = isSub ? scale.subX : scale.zoom || scale.x, 8292 barOverlap = config.bar_overlap, 8293 barPadding = config.bar_padding, 8294 sum = function (p, c) { 8295 _newArrowCheck(this, _this5); 8296 return p + c; 8297 }.bind(this), 8298 halfWidth = isObjectType(offset) && (offset._$total.length ? offset._$total.reduce(sum) / 2 : 0); 8299 8300 // total shapes half width 8301 8302 return function (d) { 8303 _newArrowCheck(this, _this5); 8304 const ind = $$.getIndices(indices, d, "getShapeX"), 8305 index = d.id in ind ? ind[d.id] : 0, 8306 targetsNum = (ind.__max__ || 0) + 1; 8307 let x = 0; 8308 if (notEmpty(d.x)) { 8309 const xPos = currScale(d.x, !0); 8310 if (halfWidth) { 8311 const offsetWidth = offset[d.id] || offset._$width; 8312 x = barOverlap ? xPos - offsetWidth / 2 : xPos - offsetWidth + offset._$total.slice(0, index + 1).reduce(sum) - halfWidth; 8313 } else { 8314 x = xPos - (isNumber(offset) ? offset : offset._$width) * (targetsNum / 2 - (barOverlap ? 1 : index)); 8315 } 8316 } 8317 8318 // adjust x position for bar.padding option 8319 if (offset && x && targetsNum > 1 && barPadding) { 8320 if (index) { 8321 x += barPadding * index; 8322 } 8323 if (targetsNum > 2) { 8324 x -= (targetsNum - 1) * barPadding / 2; 8325 } else if (targetsNum === 2) { 8326 x -= barPadding / 2; 8327 } 8328 } 8329 return x; 8330 }.bind(this); 8331 }, 8332 getShapeY: function getShapeY(isSub) { 8333 var _this6 = this; 8334 const $$ = this, 8335 isStackNormalized = $$.isStackNormalized(); 8336 return function (d) { 8337 _newArrowCheck(this, _this6); 8338 let value = d.value; 8339 if (isNumber(d)) { 8340 value = d; 8341 } else if ($$.isAreaRangeType(d)) { 8342 value = $$.getBaseValue(d, "mid"); 8343 } else if (isStackNormalized) { 8344 value = $$.getRatio("index", d, !0); 8345 } else if ($$.isBubbleZType(d)) { 8346 value = $$.getBubbleZData(d.value, "y"); 8347 } else if ($$.isBarRangeType(d)) { 8348 // TODO use range.getEnd() like method 8349 value = value[1]; 8350 } 8351 return $$.getYScaleById(d.id, isSub)(value); 8352 }.bind(this); 8353 }, 8354 /** 8355 * Get shape based y Axis min value 8356 * @param {string} id Data id 8357 * @returns {number} 8358 * @private 8359 */ 8360 getShapeYMin: function getShapeYMin(id) { 8361 const $$ = this, 8362 axisId = $$.axis.getId(id), 8363 scale = $$.scale[axisId], 8364 _scale$domain = scale.domain(), 8365 yMin = _scale$domain[0], 8366 inverted = $$.config["axis_" + axisId + "_inverted"]; 8367 return !$$.isGrouped(id) && !inverted && yMin > 0 ? yMin : 0; 8368 }, 8369 /** 8370 * Get Shape's offset data 8371 * @param {Function} typeFilter Type filter function 8372 * @returns {object} 8373 * @private 8374 */ 8375 getShapeOffsetData: function getShapeOffsetData(typeFilter) { 8376 var _this7 = this; 8377 const $$ = this, 8378 targets = $$.orderTargets($$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$))), 8379 isStackNormalized = $$.isStackNormalized(), 8380 shapeOffsetTargets = targets.map(function (target) { 8381 var _this8 = this; 8382 _newArrowCheck(this, _this7); 8383 let rowValues = target.values; 8384 const values = {}; 8385 if ($$.isStepType(target)) { 8386 rowValues = $$.convertValuesToStep(rowValues); 8387 } 8388 const rowValueMapByXValue = rowValues.reduce(function (out, d) { 8389 _newArrowCheck(this, _this8);
8390 const key = +d.x; 8391 out[key] = d; 8392 values[key] = isStackNormalized ? $$.getRatio("index", d, !0) : d.value; 8393 return out; 8394 }.bind(this), {}); 8395 return { 8396 id: target.id, 8397 rowValues: rowValues, 8398 rowValueMapByXValue: rowValueMapByXValue, 8399 values: values 8400 }; 8401 }.bind(this)), 8402 indexMapByTargetId = targets.reduce(function (out, _ref, index) { 8403 let id = _ref.id; 8404 _newArrowCheck(this, _this7); 8405 out[id] = index; 8406 return out; 8407 }.bind(this), {}); 8408 return { 8409 indexMapByTargetId: indexMapByTargetId, 8410 shapeOffsetTargets: shapeOffsetTargets 8411 }; 8412 }, 8413 getShapeOffset: function getShapeOffset(typeFilter, indices, isSub) { 8414 var _this9 = this; 8415 const $$ = this, 8416 _$$$getShapeOffsetDat = $$.getShapeOffsetData(typeFilter), 8417 shapeOffsetTargets = _$$$getShapeOffsetDat.shapeOffsetTargets, 8418 indexMapByTargetId = _$$$getShapeOffsetDat.indexMapByTargetId, 8419 groupsZeroAs = $$.config.data_groupsZeroAs; 8420 return function (d, idx) { 8421 var _this10 = this; 8422 _newArrowCheck(this, _this9); 8423 const id = d.id, 8424 value = d.value, 8425 x = d.x, 8426 ind = $$.getIndices(indices, d), 8427 scale = $$.getYScaleById(id, isSub); 8428 if ($$.isBarRangeType(d)) { 8429 // TODO use range.getStart() 8430 return scale(value[0]); 8431 } 8432 const dataXAsNumber = +x, 8433 y0 = scale(groupsZeroAs === "zero" ? 0 : $$.getShapeYMin(id)); 8434 let offset = y0; 8435 shapeOffsetTargets.filter(function (t) { 8436 _newArrowCheck(this, _this10); 8437 return t.id !== id && ind[t.id] === ind[id]; 8438 }.bind(this)).forEach(function (t) { 8439 _newArrowCheck(this, _this10); 8440 const tid = t.id, 8441 rowValueMapByXValue = t.rowValueMapByXValue, 8442 rowValues = t.rowValues, 8443 tvalues = t.values; 8444 8445 // for same stacked group (ind[tid] === ind[id]) 8446 if (indexMapByTargetId[tid] < indexMapByTargetId[id]) { 8447 var _row; 8448 const rValue = tvalues[dataXAsNumber]; 8449 let row = rowValues[idx]; 8450 8451 // check if the x values line up 8452 if (!row || +row.x !== dataXAsNumber) { 8453 row = rowValueMapByXValue[dataXAsNumber]; 8454 } 8455 if (((_row = row) == null ? void 0 : _row.value) * value >= 0 && isNumber(rValue)) { 8456 const addOffset = value === 0 ? groupsZeroAs === "positive" && rValue > 0 || groupsZeroAs === "negative" && rValue < 0 : !0; 8457 if (addOffset) { 8458 offset += scale(rValue) - y0; 8459 } 8460 } 8461 } 8462 }.bind(this)); 8463 return offset; 8464 }.bind(this); 8465 }, 8466 /** 8467 * Get data's y coordinate 8468 * @param {object} d Target data 8469 * @param {number} i Index number 8470 * @returns {number} y coordinate 8471 * @private 8472 */ 8473 circleY: function circleY(d, i) { 8474 const $$ = this, 8475 id = d.id; 8476 let points; 8477 if ($$.isGrouped(id)) { 8478 points = getGroupedDataPointsFn.bind($$)(d); 8479 } 8480 return points ? points(d, i)[0][1] : $$.getYScaleById(id)($$.getBaseValue(d)); 8481 }, 8482 getBarW: function getBarW(type, axis, targetsNum) { 8483 var _this11 = this; 8484 const $$ = this, 8485 config = $$.config, 8486 org = $$.org, 8487 scale = $$.scale, 8488 maxDataCount = $$.getMaxDataCount(), 8489 isGrouped = type === "bar" && config.data_groups.length, 8490 configName = type + "_width", 8491 tickInterval = scale.zoom && !$$.axis.isCategorized() ? org.xDomain.map(function (v) { 8492 _newArrowCheck(this, _this11); 8493 return scale.zoom(v); 8494 }.bind(this)).reduce(function (a, c) { 8495 _newArrowCheck(this, _this11); 8496 return Math.abs(a) + c; 8497 }.bind(this)) / maxDataCount : axis.tickInterval(maxDataCount), 8498 getWidth = function (id) { 8499 _newArrowCheck(this, _this11); 8500 const width = id ? config[configName][id] : config[configName], 8501 ratio = id ? width.ratio : config[configName + "_ratio"], 8502 max = id ? width.max : config[configName + "_max"], 8503 w = isNumber(width) ? width : targetsNum ? tickInterval * ratio / targetsNum : 0; 8504 return max && w > max ? max : w; 8505 }.bind(this); 8506 let result = getWidth(); 8507 if (!isGrouped && isObjectType(config[configName])) { 8508 result = { 8509 _$width: result, 8510 _$total: [] 8511 };
8512 $$.filterTargetsToShow($$.data.targets).forEach(function (v) { 8513 _newArrowCheck(this, _this11); 8514 if (config[configName][v.id]) { 8515 result[v.id] = getWidth(v.id); 8516 result._$total.push(result[v.id] || result._$width); 8517 } 8518 }.bind(this)); 8519 } 8520 return result; 8521 }, 8522 /** 8523 * Get shape element 8524 * @param {string} shapeName Shape string 8525 * @param {number} i Index number 8526 * @param {string} id Data series id 8527 * @returns {d3Selection} 8528 * @private 8529 */ 8530 getShapeByIndex: function getShapeByIndex(shapeName, i, id) { 8531 var _this12 = this; 8532 const $$ = this, 8533 $el = $$.$el, 8534 suffix = isValue(i) ? "-" + i : ""; 8535 let shape = $el[shapeName]; 8536 8537 // filter from shape reference if has 8538 if (shape && !shape.empty()) { 8539 shape = shape.filter(function (d) { 8540 _newArrowCheck(this, _this12); 8541 return id ? d.id === id : !0; 8542 }.bind(this)).filter(function (d) { 8543 _newArrowCheck(this, _this12); 8544 return isValue(i) ? d.index === i : !0; 8545 }.bind(this)); 8546 } else { 8547 shape = (id ? $el.main.selectAll("." + classes[shapeName + "s"] + $$.getTargetSelectorSuffix(id)) : $el.main).selectAll("." + classes[shapeName] + suffix); 8548 } 8549 return shape; 8550 }, 8551 isWithinShape: function isWithinShape(that, d) { 8552 const $$ = this, 8553 shape = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(that); 8554 let isWithin; 8555 if (!$$.isTargetToShow(d.id)) { 8556 isWithin = !1; 8557 } else if ($$.hasValidPointType != null && $$.hasValidPointType(that.nodeName)) { 8558 isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScaleById(d.id)(d.value)) : $$.isWithinCircle(that, $$.isBubbleType(d) ? $$.pointSelectR(d) * 1.5 : 0); 8559 } else if (that.nodeName === "path") { 8560 isWithin = shape.classed(classes.bar) ? $$.isWithinBar(that) : !0; 8561 } 8562 return isWithin; 8563 }, 8564 getInterpolate: function getInterpolate(d) { 8565 const $$ = this, 8566 interpolation = $$.getInterpolateType(d); 8567 return { 8568 "basis": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveBasis, 8569 "basis-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveBasisClosed, 8570 "basis-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveBasisOpen, 8571 "bundle": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveBundle, 8572 "cardinal": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCardinal, 8573 "cardinal-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCardinalClosed, 8574 "cardinal-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCardinalOpen, 8575 "catmull-rom": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCatmullRom, 8576 "catmull-rom-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCatmullRomClosed, 8577 "catmull-rom-open": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveCatmullRomOpen, 8578 "monotone-x": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveMonotoneX, 8579 "monotone-y": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveMonotoneY, 8580 "natural": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveNatural, 8581 "linear-closed": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveLinearClosed, 8582 "linear": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveLinear, 8583 "step": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveStep, 8584 "step-after": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveStepAfter, 8585 "step-before": external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.curveStepBefore 8586 }[interpolation]; 8587 }, 8588 getInterpolateType: function getInterpolateType(d) { 8589 const $$ = this, 8590 config = $$.config, 8591 type = config.spline_interpolation_type, 8592 interpolation = $$.isInterpolationType(type) ? type : "cardinal"; 8593 return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? config.line_step_type : "linear"; 8594 }, 8595 isWithinBar: function isWithinBar(that) { 8596 const mouse = getPointer(this.state.event, that), 8597 list = getRectSegList(that), 8598 _list = list, 8599 seg0 = _list[0], 8600 seg1 = _list[1], 8601 x = Math.min(seg0.x, seg1.x), 8602 y = Math.min(seg0.y, seg1.y), 8603 offset = this.config.bar_sensitivity, 8604 _that$getBBox = that.getBBox(), 8605 width = _that$getBBox.width, 8606 height = _that$getBBox.height, 8607 isWithin = x - offset < mouse[0] && mouse[0] < x + width + offset && y - offset < mouse[1] && mouse[1] < y + height + offset; 8608 return isWithin; 8609 } 8610}); 8611;// CONCATENATED MODULE: ./src/ChartInternal/internals/size.ts 8612 8613/** 8614 * Copyright (c) 2017 ~ present NAVER Corp. 8615 * billboard.js project is licensed under the MIT license 8616 */ 8617 8618 8619 8620/* harmony default export */ var size = ({ 8621 /** 8622 * Update container size 8623 * @private 8624 */ 8625 setContainerSize: function setContainerSize() { 8626 const $$ = this, 8627 state = $$.state; 8628 state.current.width = $$.getCurrentWidth(); 8629 state.current.height = $$.getCurrentHeight(); 8630 }, 8631 getCurrentWidth: function getCurrentWidth() { 8632 const $$ = this; 8633 return $$.config.size_width || $$.getParentWidth(); 8634 }, 8635 getCurrentHeight: function getCurrentHeight() { 8636 const $$ = this, 8637 config = $$.config, 8638 h = config.size_height || $$.getParentHeight(); 8639 return h > 0 ? h : 320 / ($$.hasType("gauge") && !config.gauge_fullCircle ? 2 : 1); 8640 }, 8641 /** 8642 * Get the parent rect element's size 8643 * @param {string} key property/attribute name 8644 * @returns {number} 8645 * @private 8646 */ 8647 getParentRectValue: function getParentRectValue(key) { 8648 const offsetName = "offset" + capitalize(key); 8649 let parent = this.$el.chart.node(), 8650 v = 0; 8651 while (v < 30 && parent && parent.tagName !== "BODY") {
8652 try { 8653 v = parent.getBoundingClientRect()[key]; 8654 } catch (e) { 8655 if (offsetName in parent) { 8656 // In IE in certain cases getBoundingClientRect 8657 // will cause an "unspecified error" 8658 v = parent[offsetName]; 8659 } 8660 } 8661 parent = parent.parentNode; 8662 } 8663 8664 // Sometimes element's dimension value is incorrect(ex. flex container) 8665 // In this case, use body's offset instead. 8666 const bodySize = browser_doc.body[offsetName]; 8667 v > bodySize && (v = bodySize); 8668 return v; 8669 }, 8670 getParentWidth: function getParentWidth() { 8671 return this.getParentRectValue("width"); 8672 }, 8673 getParentHeight: function getParentHeight() { 8674 const h = this.$el.chart.style("height"); 8675 let height = 0; 8676 if (h) { 8677 height = /px$/.test(h) ? parseInt(h, 10) : this.getParentRectValue("height"); 8678 } 8679 return height; 8680 }, 8681 getSvgLeft: function getSvgLeft(withoutRecompute) { 8682 const $$ = this, 8683 config = $$.config, 8684 hasAxis = $$.state.hasAxis, 8685 $el = $$.$el, 8686 isRotated = config.axis_rotated, 8687 hasLeftAxisRect = isRotated || !isRotated && !config.axis_y_inner, 8688 leftAxisClass = isRotated ? $AXIS.axisX : $AXIS.axisY, 8689 leftAxis = $el.main.select("." + leftAxisClass).node(), 8690 leftLabel = hasAxis && config["axis_" + (isRotated ? "x" : "y") + "_label"]; 8691 let labelWidth = 0; 8692 8693 // if axis label position set to inner, exclude from the value 8694 if (hasAxis && (isString(leftLabel) || isString(leftLabel.text) || /^inner-/.test(leftLabel == null ? void 0 : leftLabel.position))) { 8695 const label = $el.main.select("." + leftAxisClass + "-label"); 8696 if (!label.empty()) { 8697 labelWidth = label.node().getBoundingClientRect().left; 8698 } 8699 } 8700 const svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : { 8701 right: 0 8702 }, 8703 chartRectLeft = $el.chart.node().getBoundingClientRect().left + labelWidth, 8704 hasArc = $$.hasArcType(), 8705 svgLeft = svgRect.right - chartRectLeft - (hasArc ? 0 : $$.getCurrentPaddingByDirection("left", withoutRecompute)); 8706 return svgLeft > 0 ? svgLeft : 0; 8707 }, 8708 updateDimension: function updateDimension(withoutAxis) { 8709 const $$ = this, 8710 config = $$.config, 8711 hasAxis = $$.state.hasAxis, 8712 $el = $$.$el; 8713 if (hasAxis && !withoutAxis && $$.axis.x && config.axis_rotated) { 8714 var _$$$axis$subX; 8715 (_$$$axis$subX = $$.axis.subX) == null || _$$$axis$subX.create($el.axis.subX); 8716 } 8717 8718 // pass 'withoutAxis' param to not animate at the init rendering 8719 $$.updateScales(withoutAxis); 8720 $$.updateSvgSize(); 8721 $$.transformAll(!1); 8722 }, 8723 updateSvgSize: function updateSvgSize() { 8724 const $$ = this, 8725 _$$$state = $$.state, 8726 clip = _$$$state.clip, 8727 current = _$$$state.current, 8728 hasAxis = _$$$state.hasAxis, 8729 width = _$$$state.width, 8730 height = _$$$state.height, 8731 svg = $$.$el.svg; 8732 svg.attr("width", current.width).attr("height", current.height); 8733 if (hasAxis) { 8734 const brush = svg.select("." + $SUBCHART.brush + " .overlay"), 8735 brushSize = { 8736 width: 0, 8737 height: 0 8738 }; 8739 if (brush.size()) { 8740 brushSize.width = +brush.attr("width"); 8741 brushSize.height = +brush.attr("height"); 8742 } 8743 svg.selectAll(["#" + clip.id, "#" + clip.idGrid]).select("rect").attr("width", width).attr("height", height); 8744 svg.select("#" + clip.idXAxis).select("rect").call($$.setXAxisClipPath.bind($$)); 8745 svg.select("#" + clip.idYAxis).select("rect").call($$.setYAxisClipPath.bind($$)); 8746 clip.idSubchart && svg.select("#" + clip.idSubchart).select("rect").attr("width", width).attr("height", brushSize.height); 8747 } 8748 }, 8749 /** 8750 * Get padding by the direction. 8751 * @param {string} type "top" | "bottom" | "left" | "right" 8752 * @param {boolean} [withoutRecompute=false] If set true, do not recompute the padding value. 8753 * @param {boolean} [withXAxisTickTextOverflow=false] If set true, calculate x axis tick text overflow. 8754 * @returns {number} padding value 8755 * @private 8756 */ 8757 getCurrentPaddingByDirection: function getCurrentPaddingByDirection(type, withoutRecompute, withXAxisTickTextOverflow) { 8758 var _config$padding; 8759 if (withoutRecompute === void 0) { 8760 withoutRecompute = !1; 8761 } 8762 if (withXAxisTickTextOverflow === void 0) { 8763 withXAxisTickTextOverflow = !1; 8764 } 8765 const $$ = this, 8766 config = $$.config, 8767 $el = $$.$el, 8768 hasAxis = $$.state.hasAxis, 8769 isRotated = config.axis_rotated, 8770 isFitPadding = ((_config$padding = config.padding) == null ? void 0 : _config$padding.mode) === "fit", 8771 paddingOption = isNumber(config["padding_" + type]) ? config["padding_" + type] : undefined, 8772 axisId = hasAxis ? { 8773 top: isRotated ? "y2" : null, 8774 bottom: isRotated ? "y" : "x", 8775 left: isRotated ? "x" : "y", 8776 right: isRotated ? null : "y2" 8777 }[type] : null, 8778 isLeftRight = /^(left|right)$/.test(type), 8779 isAxisInner = axisId && config["axis_" + axisId + "_inner"], 8780 isAxisShow = axisId && config["axis_" + axisId + "_show"], 8781 axesLen = axisId ? config["axis_" + axisId + "_axes"].length : 0; 8782 let axisSize = axisId ? isLeftRight ? $$.getAxisWidthByAxisId(axisId, withoutRecompute) : $$.getHorizontalAxisHeight(
8782axisId) : 0; 8783 const defaultPadding = 20; 8784 let gap = 0; 8785 if (!isFitPadding && isLeftRight) { 8786 axisSize = ceil10(axisSize); 8787 } 8788 let padding = hasAxis && isLeftRight && (isAxisInner || isUndefined(paddingOption) && !isAxisShow) ? 0 : isFitPadding ? (isAxisShow ? axisSize : 0) + (paddingOption != null ? paddingOption : 0) : isUndefined(paddingOption) ? axisSize : paddingOption; 8789 if (isLeftRight && hasAxis) { 8790 if (axisId && (isFitPadding || isAxisInner) && config["axis_" + axisId + "_label"].text) { 8791 padding += $$.axis.getAxisLabelPosition(axisId).isOuter ? defaultPadding : 0; 8792 } 8793 if (type === "right") { 8794 padding += isRotated ? !isFitPadding && isUndefined(paddingOption) ? 10 : 2 : !isAxisShow || isAxisInner ? isFitPadding ? 2 : 1 : 0; 8795 padding += withXAxisTickTextOverflow ? $$.axis.getXAxisTickTextY2Overflow(defaultPadding) : 0; 8796 } else if (type === "left" && isRotated && isUndefined(paddingOption)) { 8797 padding = !config.axis_x_show ? 1 : isFitPadding ? axisSize : Math.max(axisSize, 40); 8798 } 8799 } else { 8800 if (type === "top") { 8801 if ($el.title && $el.title.node()) { 8802 padding += $$.getTitlePadding(); 8803 } 8804 gap = isRotated && !isAxisInner ? axesLen : 0; 8805 } else if (type === "bottom" && hasAxis && isRotated && !isAxisShow) { 8806 padding += 1; 8807 } 8808 } 8809 return padding + axisSize * axesLen - gap; 8810 }, 8811 getCurrentPadding: function getCurrentPadding(withXAxisTickTextOverflow) { 8812 var _this = this; 8813 if (withXAxisTickTextOverflow === void 0) { 8814 withXAxisTickTextOverflow = !1; 8815 } 8816 const $$ = this, 8817 _map = ["top", "bottom", "left", "right"].map(function (v) { 8818 _newArrowCheck(this, _this); 8819 return $$.getCurrentPaddingByDirection(v, null, withXAxisTickTextOverflow); 8820 }.bind(this)), 8821 top = _map[0], 8822 bottom = _map[1], 8823 left = _map[2], 8824 right = _map[3]; 8825 return { 8826 top: top, 8827 bottom: bottom, 8828 left: left, 8829 right: right 8830 }; 8831 }, 8832 /** 8833 * Get resetted padding values when 'padding=false' option is set 8834 * https://github.com/naver/billboard.js/issues/2367 8835 * @param {number|object} v Padding values to be resetted 8836 * @returns {number|object} Padding value 8837 * @private 8838 */ 8839 getResettedPadding: function getResettedPadding(v) { 8840 var _this2 = this; 8841 const $$ = this, 8842 config = $$.config, 8843 isNum = isNumber(v); 8844 let p = isNum ? 0 : {}; 8845 if (config.padding === !1) { 8846 isNum || Object.keys(v).forEach(function (key) { 8847 _newArrowCheck(this, _this2); 8848 // when data.lables=true, do not reset top padding 8849 p[key] = !isEmpty(config.data_labels) && config.data_labels !== !1 && key === "top" ? v[key] : 0; 8850 }.bind(this)); 8851 } else { 8852 p = v; 8853 } 8854 return p; 8855 }, 8856 /** 8857 * Update size values 8858 * @param {boolean} isInit If is called at initialization 8859 * @private 8860 */ 8861 updateSizes: function updateSizes(isInit) { 8862 var _config$padding2; 8863 const $$ = this, 8864 config = $$.config, 8865 state = $$.state, 8866 legend = $$.$el.legend, 8867 isRotated = config.axis_rotated, 8868 isNonAxis = $$.hasArcType() || state.hasTreemap, 8869 isFitPadding = ((_config$padding2 = config.padding) == null ? void 0 : _config$padding2.mode) === "fit"; 8870 isInit || $$.setContainerSize(); 8871 const currLegend = { 8872 width: legend ? $$.getLegendWidth() : 0, 8873 height: legend ? $$.getLegendHeight() : 0 8874 }; 8875 if (!isNonAxis && config.axis_x_show && config.axis_x_tick_autorotate) { 8876 $$.updateXAxisTickClip(); 8877 } 8878 const legendSize = { 8879 right: config.legend_show && state.isLegendRight ? $$.getLegendWidth() + (isFitPadding ? 0 : 20) : 0, 8880 bottom: !config.legend_show || state.isLegendRight || state.isLegendInset ? 0 : currLegend.height 8881 }, 8882 xAxisHeight = isRotated || isNonAxis ? 0 : $$.getHorizontalAxisHeight("x"), 8883 subchartXAxisHeight = config.subchart_axis_x_show && config.subchart_axis_x_tick_text_show ? xAxisHeight : 30, 8884 subchartHeight = config.subchart_show && !isNonAxis ? config.subchart_size_height + subchartXAxisHeight : 0, 8885 gaugeHeight = $$.hasType("gauge") && config.arc_needle_show && !config.gauge_fullCircle && !config.gauge_label_show ? 10 : 0, 8886 padding = $$.getCurrentPadding(!0); // when needle is shown with legend, it need some bottom space to not overlap with legend text 8887 // for main 8888 state.margin = !isNonAxis && isRotated ? { 8889 top: padding.top, 8890 right: isNonAxis ? 0 : padding.right + legendSize.right, 8891 bottom: legendSize.bottom + padding.bottom, 8892 left: subchartHeight + (isNonAxis ? 0 : padding.left) 8893 } : { 8894 top: (isFitPadding ? 0 : 4) + padding.top, 8895 // for top tick text 8896 right: isNonAxis ? 0 : padding.right + legendSize.right, 8897 bottom: gaugeHeight + subchartHeight + legendSize.bottom + padding.bottom, 8898 left: isNonAxis ? 0 : padding.left 8899 }; 8900 state.margin = $$.getResettedPadding(state.margin); 8901 8902 // for subchart 8903 state.margin2 = isRotated ? { 8904 top: state.margin.top, 8905 right: NaN, 8906 bottom: 20 + legendSize.bottom, 8907 left: $$.state.rotatedPadding.left 8908 } : { 8909 top: state.current.height - subchartHeight - legendSize.bottom, 8910 right: NaN, 8911 bottom: subchartXAxisHeight + legendSize.bottom, 8912 left: state.margin.left 8913 }; 8914 8915 // for legend 8916 state.margin3 = { 8917 top: 0, 8918 right: NaN, 8919 bottom: 0, 8920 left: 0 8921 }; 8922 $$.updateSizeForLegend == null || $$.updateSizeForLegend(currLegend); 8923 state.width = state.current.width - state.margin.left - state.margin.right; 8924 state.height = state.current.height - state.margin.top - state.margin.bottom; 8925 if (state.width < 0) { 8926 state.width = 0; 8927 } 8928 if (state.height < 0) { 8929 state.height = 0; 8930 } 8931 state.width2 = isRotated ? state.margin.left - state.rotatedPadding.left - state.rotatedPadding.right : state.width; 8932 state.height2 = isRotated ? state.height : state.current.height - state.margin2.top - state.margin2.bottom; 8933 if (state.width2 < 0) { 8934 state.width2 = 0; 8935 } 8936 if (state.height2 < 0) { 8937 state.height2 = 0; 8938 } 8939 8940 // for arc 8941 if ($$.hasArcType()) { 8942 const hasGauge = $$.hasType("gauge"), 8943 isLegendRight = config.legend_show && state.isLegendRight; 8944 state.arcWidth = state.width - (isLegendRight ? currLegend.width + 10 : 0); 8945 state.arcHeight = state.height - (isLegendRight && !hasGauge ? 0 : 10); 8946 if (hasGauge && !config.gauge_fullCircle) { 8947 state.arcHeight += state.height - $$.getPaddingBottomForGauge(); 8948 } 8949 $$.updateRadius == null || $$.updateRadius(); 8950 } 8951 if (state.isLegendRight && isNonAxis) { 8952 state.margin3.left = state.arcWidth / 2 + state.radiusExpanded * 1.1; 8953 } 8954 } 8955}); 8956;// CONCATENATED MODULE: ./src/ChartInternal/internals/style.ts 8957 8958/** 8959 * Copyright (c) 2017 ~ present NAVER Corp. 8960 * billboard.js project is licensed under the MIT license 8961 */ 8962 8963 8964/* harmony default export */ var style = ({ 8965 /** 8966 * Add props color css rule to given selector 8967 * @param {boolean} withShape Set shpes' prefix class 8968 * @param {string} selector CSS selector 8969 * @param {Array} props CSS props list 8970 * @param {Function} propsFn Function to retrieve value or determine for props 8971 * @returns {Function} 8972 * @private 8973 */ 8974 setCssRule: function setCssRule(withShape, selector, props, propsFn) { 8975 var _this = this; 8976 const $$ = this, 8977 config = $$.config, 8978 _$$$state = $$.state, 8979 cssRule = _$$$state.cssRule, 8980 style = _$$$state.style; 8981 return config.boost_useCssRule ? function (selection) { 8982 var _this2 = this; 8983 _newArrowCheck(this, _this); 8984 selection.each(function (d) { 8985 var _this3 = this; 8986 _newArrowCheck(this, _this2); 8987 const res = propsFn && (propsFn == null ? void 0 : propsFn.call($$, d)), 8988 shapeSelector = "" + (withShape ? "." + ($SHAPE.shapes + $$.getTargetSelectorSuffix(d.id)) : "") + selector; 8989 selector in cssRule && style.sheet.deleteRule(cssRule[shapeSelector]); 8990 $$.state.cssRule[shapeSelector] = addCssRules(style, shapeSelector, props.filter(
8990Boolean).map(function (v) { 8991 _newArrowCheck(this, _this3); 8992 return isString(res) && v.indexOf(":") === -1 ? v + ": " + res : v || ""; 8993 }.bind(this))); 8994 }.bind(this)); 8995 }.bind(this) : function () { 8996 _newArrowCheck(this, _this); 8997 }.bind(this); 8998 }, 8999 /** 9000 * Get style prop value 9001 * @param {Function|string} v Value 9002 * @returns {string|null} 9003 * @private 9004 */ 9005 getStylePropValue: function getStylePropValue(v) { 9006 const useCssRule = this.config.boost_useCssRule; 9007 return useCssRule ? null : isFunction(v) ? v.bind(this) : v; 9008 } 9009}); 9010;// CONCATENATED MODULE: ./src/ChartInternal/internals/text.ts 9011 9012/** 9013 * Copyright (c) 2017 ~ present NAVER Corp. 9014 * billboard.js project is licensed under the MIT license 9015 */ 9016 9017 9018 9019 9020/** 9021 * Get text-anchor according text.labels.rotate angle 9022 * @param {number} angle Angle value 9023 * @returns {string} Anchor string value 9024 * @private 9025 */ 9026function getRotateAnchor(angle) { 9027 let anchor = "middle"; 9028 if (angle > 0 && angle <= 170) { 9029 anchor = "end"; 9030 } else if (angle > 190 && angle <= 360) { 9031 anchor = "start"; 9032 } 9033 return anchor; 9034} 9035 9036/** 9037 * Set rotated position coordinate according text.labels.rotate angle 9038 * @param {object} d Data object 9039 * @param {object} pos Position object 9040 * @param {object} pos.x x coordinate 9041 * @param {object} pos.y y coordinate 9042 * @param {string} anchor string value 9043 * @param {boolean} isRotated If axis is rotated 9044 * @param {boolean} isInverted If axis is inverted 9045 * @returns {object} x, y coordinate 9046 * @private 9047 */ 9048function setRotatePos(d, pos, anchor, isRotated, isInverted) { 9049 var _$$$getCandlestickDat; 9050 const $$ = this, 9051 value = d.value, 9052 isCandlestickType = $$.isCandlestickType(d), 9053 isNegative = isNumber(value) && value < 0 || isCandlestickType && !((_$$$getCandlestickDat = $$.getCandlestickData(d)) != null && _$$$getCandlestickDat._isUp); 9054 let x = pos.x, 9055 y = pos.y; 9056 const gap = 4, 9057 doubleGap = 8; 9058 if (isRotated) { 9059 if (anchor === "start") { 9060 x += isNegative ? 0 : doubleGap; 9061 y += gap; 9062 } else if (anchor === "middle") { 9063 x += doubleGap; 9064 y -= doubleGap; 9065 } else if (anchor === "end") { 9066 isNegative && (x -= doubleGap); 9067 y += gap; 9068 } 9069 } else { 9070 if (anchor === "start") { 9071 x += gap; 9072 isNegative && (y += doubleGap * 2); 9073 } else if (anchor === "middle") { 9074 y -= doubleGap; 9075 } else if (anchor === "end") { 9076 x -= gap; 9077 isNegative && (y += doubleGap * 2); 9078 } 9079 if (isInverted) { 9080 y += isNegative ? -17 : isCandlestickType ? 13 : 7; 9081 } 9082 } 9083 return { 9084 x: x, 9085 y: y 9086 }; 9087} 9088 9089/** 9090 * Get data.labels.position value 9091 * @param {object} d Data object 9092 * @param {string} type x | y 9093 * @returns {number} Position value 9094 * @private 9095 */ 9096function getTextPos(d, type) { 9097 var _ref; 9098 const position = this.config.data_labels_position, 9099 id = d.id, 9100 index = d.index, 9101 value = d.value; 9102 return (_ref = isFunction(position) ? position.bind(this.api)(type, value, id, index, this.$el.text) : (id in position ? position[id] : position)[type]) != null ? _ref : 0; 9103} 9104/* harmony default export */ var internals_text = ({ 9105 opacityForText: function opacityForText(d) { 9106 const $$ = this; 9107 return $$.isBarType(d) && !$$.meetsLabelThreshold(Math.abs($$.getRatio("bar", d)), "bar") ? "0" : $$.hasDataLabel ? null : "0"; 9108 }, 9109 /** 9110 * Initializes the text 9111 * @private 9112 */ 9113 initText: function initText() { 9114 const $el = this.$el; 9115 $el.main.select("." + $COMMON.chart).append("g").attr("class", $TEXT.chartTexts).style("pointer-events", $el.treemap ? "none" : null); 9116 }, 9117 /** 9118 * Update chartText 9119 * @param {object} targets $$.data.targets 9120 * @private 9121 */ 9122 updateTargetsForText: function updateTargetsForText(targets) { 9123 var _this = this; 9124 const $$ = this, 9125 classChartText = $$.getChartClass("Text"), 9126 classTexts = $$.getClass("texts", "id"), 9127 classFocus = $$.classFocus.bind($$), 9128 mainTextUpdate = $$.$el.main.select("." + $TEXT.chartTexts).selectAll("." + $TEXT.chartText).data(targets).attr("class", function (d) { 9129 _newArrowCheck(this, _this); 9130 return ("" + classChartText(d) + classFocus(d)).trim(); 9131 }.bind(this)), 9132 mainTextEnter = mainTextUpdate.enter().append("g").style("opacity", "0").attr("class", classChartText).call($$.setCssRule(!0, " ." + $TEXT.text, ["fill", "pointer-events:none"], $$.updateTextColor)); 9133 mainTextEnter.append("g").attr("class", classTexts); 9134 }, 9135 /** 9136 * Update text 9137 * @private 9138 */ 9139 updateText: function updateText() { 9140 var _this2 = this; 9141 const $$ = this, 9142 $el = $$.$el, 9143 $T = $$.$T, 9144 config = $$.config, 9145 axis = $$.axis, 9146 classText = $$.getClass("text", "index"), 9147 labelsCentered = config.data_labels.centered, 9148 text = $el.main.selectAll("." + $TEXT.texts).selectAll("." + $TEXT.text).data($$.labelishData.bind($$)); 9149 $T(text.exit()).style("fill-opacity", "0").remove();
9150 $el.text = text.enter().append("text").merge(text).attr("class", classText).attr("text-anchor", function (d) { 9151 _newArrowCheck(this, _this2); 9152 const isInverted = config["axis_" + (axis == null ? void 0 : axis.getId(d.id)) + "_inverted"]; 9153 9154 // when value is negative or 9155 let isEndAnchor = isInverted ? d.value > 0 : d.value < 0; 9156 if ($$.isCandlestickType(d)) { 9157 const data = $$.getCandlestickData(d); 9158 isEndAnchor = !(data != null && data._isUp); 9159 } else if ($$.isTreemapType(d)) { 9160 return labelsCentered ? "middle" : "start"; 9161 } 9162 return config.axis_rotated ? isEndAnchor ? "end" : "start" : "middle"; 9163 }.bind(this)).style("fill", $$.getStylePropValue($$.updateTextColor)).style("fill-opacity", "0").each(function (d, i, texts) { 9164 const node = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 9165 let value = d.value; 9166 if ($$.isBubbleZType(d)) { 9167 value = $$.getBubbleZData(value, "z"); 9168 } else if ($$.isCandlestickType(d)) { 9169 const data = $$.getCandlestickData(d); 9170 if (data) { 9171 value = data.close; 9172 } 9173 } 9174 value = $$.isTreemapType(d) ? $$.treemapDataLabelFormat(d)(node) : $$.dataLabelFormat(d.id)(value, d.id, d.index, texts); 9175 if (isNumber(value)) { 9176 this.textContent = value; 9177 } else { 9178 setTextValue(node, value); 9179 } 9180 }); 9181 }, 9182 updateTextColor: function updateTextColor(d) { 9183 const $$ = this, 9184 config = $$.config, 9185 labelColors = config.data_labels_colors, 9186 defaultColor = $$.isArcType(d) && !$$.isRadarType(d) || $$.isTreemapType(d) ? null : $$.color(d); 9187 let color; 9188 if (isString(labelColors)) { 9189 color = labelColors; 9190 } else if (isObject(labelColors)) { 9191 const _ref2 = d.data || d, 9192 id = _ref2.id; 9193 color = labelColors[id]; 9194 } else if (isFunction(labelColors)) { 9195 color = labelColors.bind($$.api)(defaultColor, d); 9196 } 9197 if ($$.isCandlestickType(d) && !isFunction(labelColors)) { 9198 const value = $$.getCandlestickData(d); 9199 if (!(value != null && value._isUp)) { 9200 const downColor = config.candlestick_color_down; 9201 color = isObject(downColor) ? downColor[d.id] : downColor; 9202 } 9203 } 9204 return color || defaultColor; 9205 }, 9206 /** 9207 * Update data label text background color 9208 * @param {object} d Data object 9209 * @returns {string|null} 9210 * @private 9211 */ 9212 updateTextBackgroundColor: function updateTextBackgroundColor(d) { 9213 const $$ = this, 9214 $el = $$.$el, 9215 config = $$.config, 9216 backgroundColor = config.data_labels_backgroundColors; 9217 let color = ""; 9218 if (isString(backgroundColor) || isObject(backgroundColor)) { 9219 const id = isString(backgroundColor) ? "" : $$.getTargetSelectorSuffix("id" in d ? d.id : d.data.id), 9220 filter = $el.defs.select(["filter[id*='labels-bg", "']"].join(id)); 9221 if (filter.size()) { 9222 color = "url(#" + filter.attr("id") + ")"; 9223 } 9224 } 9225 return color || null; 9226 }, 9227 /** 9228 * Redraw chartText 9229 * @param {Function} getX Positioning function for x 9230 * @param {Function} getY Positioning function for y 9231 * @param {boolean} forFlow Weather is flow 9232 * @param {boolean} withTransition transition is enabled 9233 * @returns {Array} 9234 * @private 9235 */ 9236 redrawText: function redrawText(getX, getY, forFlow, withTransition) { 9237 const $$ = this, 9238 $T = $$.$T, 9239 axis = $$.axis, 9240 config = $$.config, 9241 hasTreemap = $$.state.hasTreemap, 9242 t = getRandom(!0), 9243 isRotated = config.axis_rotated, 9244 angle = config.data_labels.rotate, 9245 anchorString = getRotateAnchor(angle), 9246 rotateString = angle ? "rotate(" + angle + ")" : ""; 9247 $$.$el.text.style("fill", $$.getStylePropValue($$.updateTextColor)).attr("filter", $$.updateTextBackgroundColor.bind($$)).style("fill-opacity", forFlow ? 0 : $$.opacityForText.bind($$)).each(function (d, i) { 9248 // do not apply transition for newly added text elements 9249 const node = $T(hasTreemap && this.childElementCount ? this.parentNode : this, !!(withTransition && this.getAttribute("x")), t), 9250 isInverted = config["axis_" + (axis == null ? void 0 : axis.getId(d.id)) + "_inverted"]; 9251 let pos = { 9252 x: getX.bind(this)(d, i), 9253 y: getY.bind(this)(d, i) 9254 }; 9255 if (angle) { 9256 pos = setRotatePos.bind($$)(d, pos, anchorString, isRotated, isInverted); 9257 node.attr("text-anchor", anchorString); 9258 } 9259 9260 // when is multiline 9261 if (this.childElementCount || angle) { 9262 node.attr("transform", "translate(" + pos.x + " " + pos.y + ") " + rotateString); 9263 } else { 9264 node.attr("x", pos.x).attr("y", pos.y); 9265 } 9266 }); 9267 9268 // need to return 'true' as of being pushed to the redraw list 9269 // ref: getRedrawList() 9270 return !0; 9271 }, 9272 /** 9273 * Gets the getBoundingClientRect value of the element 9274 * @param {HTMLElement|d3.selection} element Target element 9275 * @param {string} className Class name 9276 * @returns {object} value of element.getBoundingClientRect() 9277 * @private 9278 */
9279 getTextRect: function getTextRect(element, className) { 9280 var _this3 = this; 9281 const $$ = this; 9282 let base = element.node ? element.node() : element; 9283 if (!/text/i.test(base.tagName)) { 9284 base = base.querySelector("text"); 9285 } 9286 const text = base.textContent, 9287 cacheKey = KEY.textRect + "-" + text.replace(/\W/g, "_"); 9288 let rect = $$.cache.get(cacheKey); 9289 if (!rect) { 9290 $$.$el.svg.append("text").style("visibility", "hidden").style("font", (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(base).style("font")).classed(className, !0).text(text).call(function (v) { 9291 _newArrowCheck(this, _this3); 9292 rect = getBoundingRect(v.node()); 9293 }.bind(this)).remove(); 9294 $$.cache.add(cacheKey, rect); 9295 } 9296 return rect; 9297 }, 9298 /** 9299 * Gets the x or y coordinate of the text 9300 * @param {object} indices Indices values 9301 * @param {boolean} forX whether or not to x 9302 * @returns {number} coordinates 9303 * @private 9304 */ 9305 generateXYForText: function generateXYForText(indices, forX) { 9306 var _this4 = this; 9307 const $$ = this, 9308 _$$$state = $$.state, 9309 hasRadar = _$$$state.hasRadar, 9310 hasTreemap = _$$$state.hasTreemap, 9311 types = Object.keys(indices), 9312 points = {}, 9313 getter = forX ? $$.getXForText : $$.getYForText; 9314 hasRadar && types.push("radar"); 9315 hasTreemap && types.push("treemap"); 9316 types.forEach(function (v) { 9317 _newArrowCheck(this, _this4); 9318 points[v] = $$["generateGet" + capitalize(v) + "Points"](indices[v], !1); 9319 }.bind(this)); 9320 return function (d, i) { 9321 const type = $$.isAreaType(d) && "area" || $$.isBarType(d) && "bar" || $$.isCandlestickType(d) && "candlestick" || $$.isRadarType(d) && "radar" || $$.isTreemapType(d) && "treemap" || "line"; 9322 return getter.call($$, points[type](d, i), d, this); 9323 }; 9324 }, 9325 /** 9326 * Get centerized text position for bar type data.label.text 9327 * @param {object} d Data object 9328 * @param {Array} points Data points position 9329 * @param {HTMLElement} textElement Data label text element 9330 * @param {string} type 'x' or 'y' 9331 * @returns {number} Position value 9332 * @private 9333 */ 9334 getCenteredTextPos: function getCenteredTextPos(d, points, textElement, type) { 9335 const $$ = this, 9336 config = $$.config, 9337 isRotated = config.axis_rotated, 9338 isBarType = $$.isBarType(d), 9339 isTreemapType = $$.isTreemapType(d); 9340 if (config.data_labels.centered && (isBarType || isTreemapType)) { 9341 const rect = getBoundingRect(textElement); 9342 if (isBarType) { 9343 const isPositive = $$.getRangedData(d, null, "bar") >= 0; 9344 if (isRotated) { 9345 const w = (isPositive ? points[1][1] - points[0][1] : points[0][1] - points[1][1]) / 2 + rect.width / 2; 9346 return isPositive ? -w - 3 : w + 2; 9347 } else { 9348 const h = (isPositive ? points[0][1] - points[1][1] : points[1][1] - points[0][1]) / 2 + rect.height / 2; 9349 return isPositive ? h : -h - 2; 9350 } 9351 } else if (isTreemapType) { 9352 return type === "x" ? (points[1][0] - points[0][0]) / 2 : (points[1][1] - points[0][1]) / 2 + rect.height / 2; 9353 } 9354 } 9355 return 0; 9356 }, 9357 /** 9358 * Gets the x coordinate of the text 9359 * @param {object} points Data points position 9360 * @param {object} d Data object 9361 * @param {HTMLElement} textElement Data label text element 9362 * @returns {number} x coordinate 9363 * @private 9364 */ 9365 getXForText: function getXForText(points, d, textElement) { 9366 const $$ = this, 9367 config = $$.config, 9368 isRotated = config.axis_rotated, 9369 isTreemapType = $$.isTreemapType(d); 9370 let xPos = points[0][0]; 9371 if ($$.isCandlestickType(d)) { 9372 if (isRotated) { 9373 var _$$$getCandlestickDat2; 9374 xPos = (_$$$getCandlestickDat2 = $$.getCandlestickData(d)) != null && _$$$getCandlestickDat2._isUp ? points[2][2] + 4 : points[2][1] - 4; 9375 } else { 9376 xPos += (points[1][0] - xPos) / 2; 9377 } 9378 } else if (isTreemapType) { 9379 xPos += config.data_labels.centered ? 0 : 5; 9380 } else { 9381 if (isRotated) { 9382 const isInverted = config["axis_" + $$.axis.getId(d.id) + "_inverted"], 9383 padding = $$.isBarType(d) ? 4 : 6, 9384 value = d.value; 9385 xPos = points[2][1]; 9386 if (isInverted) { 9387 xPos -= padding * (value > 0 ? 1 : -1); 9388 } else { 9389 xPos += padding * (value < 0 ? -1 : 1); 9390 } 9391 } else { 9392 xPos = $$.hasType("bar") ? (points[2][0] + points[0][0]) / 2 : xPos; 9393 } 9394 } 9395 if (isRotated || isTreemapType) { 9396 xPos += $$.getCenteredTextPos(d, points, textElement, "x"); 9397 } 9398 return xPos + getTextPos.call(this, d, "x"); 9399 }, 9400 /** 9401 * Gets the y coordinate of the text 9402 * @param {object} points Data points position 9403 * @param {object} d Data object 9404 * @param {HTMLElement} textElement Data label text element 9405 * @returns {number}
9405 y coordinate 9406 * @private 9407 */ 9408 getYForText: function getYForText(points, d, textElement) { 9409 const $$ = this, 9410 axis = $$.axis, 9411 config = $$.config, 9412 state = $$.state, 9413 isRotated = config.axis_rotated, 9414 isInverted = config["axis_" + (axis == null ? void 0 : axis.getId(d.id)) + "_inverted"], 9415 isBarType = $$.isBarType(d), 9416 isTreemapType = $$.isTreemapType(d), 9417 r = config.point_r, 9418 rect = getBoundingRect(textElement); 9419 let value = d.value, 9420 baseY = 3, 9421 yPos; 9422 if ($$.isCandlestickType(d)) { 9423 value = $$.getCandlestickData(d); 9424 if (isRotated) { 9425 yPos = points[0][0]; 9426 yPos += (points[1][0] - yPos) / 2 + baseY; 9427 } else { 9428 yPos = value && value._isUp ? points[2][2] - baseY : points[2][1] + baseY * 4; 9429 if (isInverted) { 9430 yPos += 15 * (value._isUp ? 1 : -1); 9431 } 9432 } 9433 } else if (isTreemapType) { 9434 yPos = points[0][1] + (config.data_labels.centered ? 0 : rect.height + 5); 9435 } else { 9436 if (isRotated) { 9437 yPos = (points[0][0] + points[2][0] + rect.height * .6) / 2; 9438 } else { 9439 yPos = points[2][1]; 9440 if (isNumber(r) && r > 5 && ($$.isLineType(d) || $$.isScatterType(d))) { 9441 baseY += config.point_r / 2.3; 9442 } 9443 if (value < 0 || value === 0 && !state.hasPositiveValue && state.hasNegativeValue) { 9444 yPos += isInverted ? isBarType ? -3 : -5 : rect.height + (isBarType ? -baseY : baseY); 9445 } else { 9446 let diff = -baseY * 2; 9447 if (isBarType) { 9448 diff = -baseY; 9449 } else if ($$.isBubbleType(d)) { 9450 diff = baseY; 9451 } 9452 if (isInverted) { 9453 diff = isBarType ? 10 : 15; 9454 } 9455 yPos += diff; 9456 } 9457 } 9458 } 9459 if (!isRotated || isTreemapType) { 9460 yPos += $$.getCenteredTextPos(d, points, textElement, "y"); 9461 } 9462 return yPos + getTextPos.call(this, d, "y"); 9463 }, 9464 /** 9465 * Calculate if two or more text nodes are overlapping 9466 * Mark overlapping text nodes with "text-overlapping" class 9467 * @param {string} id Axis id 9468 * @param {ChartInternal} $$ ChartInternal context 9469 * @param {string} selector Selector string 9470 * @private 9471 */ 9472 markOverlapped: function markOverlapped(id, $$, selector) { 9473 var _this5 = this; 9474 const textNodes = $$.$el.arcs.selectAll(selector), 9475 filteredTextNodes = textNodes.filter(function (node) { 9476 _newArrowCheck(this, _this5); 9477 return node.data.id !== id; 9478 }.bind(this)), 9479 textNode = textNodes.filter(function (node) { 9480 _newArrowCheck(this, _this5); 9481 return node.data.id === id; 9482 }.bind(this)), 9483 translate = getTranslation(textNode.node()), 9484 calcHypo = function (x, y) { 9485 _newArrowCheck(this, _this5); 9486 return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); 9487 }.bind(this); // Calculates the length of the hypotenuse 9488 textNode.node() && filteredTextNodes.each(function () { 9489 const coordinate = getTranslation(this), 9490 filteredTextNode = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 9491 nodeForWidth = calcHypo(translate.e, translate.f) > calcHypo(coordinate.e, coordinate.f) ? textNode : filteredTextNode, 9492 overlapsX = Math.ceil(Math.abs(translate.e - coordinate.e)) < Math.
9492ceil(nodeForWidth.node().getComputedTextLength()), 9493 overlapsY = Math.ceil(Math.abs(translate.f - coordinate.f)) < parseInt(textNode.style("font-size"), 10); 9494 filteredTextNode.classed($TEXT.TextOverlapping, overlapsX && overlapsY); 9495 }); 9496 }, 9497 /** 9498 * Calculate if two or more text nodes are overlapping 9499 * Remove "text-overlapping" class on selected text nodes 9500 * @param {ChartInternal} $$ ChartInternal context 9501 * @param {string} selector Selector string 9502 * @private 9503 */ 9504 undoMarkOverlapped: function undoMarkOverlapped($$, selector) { 9505 $$.$el.arcs.selectAll(selector).each(function () { 9506 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.selectAll)([this, this.previousSibling]).classed($TEXT.TextOverlapping, !1); 9507 }); 9508 }, 9509 /** 9510 * Check if meets the ratio to show data label text 9511 * @param {number} ratio ratio to meet 9512 * @param {string} type chart type 9513 * @returns {boolean} 9514 * @private 9515 */ 9516 meetsLabelThreshold: function meetsLabelThreshold(ratio, type) { 9517 if (ratio === void 0) { 9518 ratio = 0; 9519 } 9520 const $$ = this, 9521 config = $$.config, 9522 threshold = config[type + "_label_threshold"] || 0; 9523 return ratio >= threshold; 9524 } 9525}); 9526;// CONCATENATED MODULE: ./src/ChartInternal/internals/title.ts 9527/** 9528 * Copyright (c) 2017 ~ present NAVER Corp. 9529 * billboard.js project is licensed under the MIT license 9530 */ 9531 9532 9533 9534/** 9535 * Get the text position 9536 * @param {string} pos right, left or center 9537 * @param {number} width chart width 9538 * @returns {string|number} text-anchor value or position in pixel 9539 * @private 9540 */ 9541function getTextXPos(pos, width) { 9542 if (pos === void 0) { 9543 pos = "left"; 9544 } 9545 const isNum = isNumber(width); 9546 let position; 9547 if (pos.indexOf("center") > -1) { 9548 position = isNum ? width / 2 : "middle"; 9549 } else if (pos.indexOf("right") > -1) { 9550 position = isNum ? width : "end"; 9551 } else { 9552 position = isNum ? 0 : "start"; 9553 } 9554 return position; 9555} 9556/* harmony default export */ var internals_title = ({ 9557 /** 9558 * Initializes the title 9559 * @private 9560 */ 9561 initTitle: function initTitle() { 9562 const $$ = this, 9563 config = $$.config, 9564 $el = $$.$el; 9565 if (config.title_text) { 9566 $el.title = $el.svg.append("g"); 9567 const text = $el.title.append("text").style("text-anchor", getTextXPos(config.title_position)).attr("class", $TEXT.title); 9568 setTextValue(text, config.title_text, [.3, 1.5]); 9569 } 9570 }, 9571 /** 9572 * Redraw title 9573 * @private 9574 */ 9575 redrawTitle: function redrawTitle() { 9576 const $$ = this, 9577 config = $$.config, 9578 current = $$.state.current, 9579 title = $$.$el.title; 9580 if (title) { 9581 const x = getTextXPos(config.title_position, current.width), 9582 y = (config.title_padding.top || 0) + $$.getTextRect($$.$el.title, $TEXT.title).height; 9583 title.attr("transform", "translate(" + x + ", " + y + ")"); 9584 } 9585 }, 9586 /** 9587 * Get title padding 9588 * @returns {number} padding value 9589 * @private 9590 */ 9591 getTitlePadding: function getTitlePadding() { 9592 const $$ = this, 9593 $el = $$.$el, 9594 config = $$.config; 9595 return (config.title_padding.top || 0) + $$.getTextRect($el.title, $TEXT.title).height + (config.title_padding.bottom || 0); 9596 } 9597}); 9598;// CONCATENATED MODULE: ./src/ChartInternal/internals/tooltip.ts 9599 9600/** 9601 * Copyright (c) 2017 ~ present NAVER Corp. 9602 * billboard.js project is licensed under the MIT license 9603 */ 9604 9605 9606 9607 9608/* harmony default export */ var internals_tooltip = ({ 9609 /** 9610 * Initializes the tooltip 9611 * @private 9612 */ 9613 initTooltip: function initTooltip() { 9614 const $$ = this, 9615 config = $$.config, 9616 $el = $$.$el; 9617 $el.tooltip = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(config.tooltip_contents.bindto); 9618 if ($el.tooltip.empty()) { 9619 $el.tooltip = $el.chart.append("div").attr("class", $TOOLTIP.tooltipContainer).style("position", "absolute").style("pointer-events", "none").style("display", "none"); 9620 } 9621 $$.bindTooltipResizePos(); 9622 }, 9623 /** 9624 * Show tooltip at initialization. 9625 * Is called only when tooltip.init.show=true option is set 9626 * @private 9627 */ 9628 initShowTooltip: function initShowTooltip() { 9629 const $$ = this, 9630 config = $$.config, 9631 $el = $$.$el, 9632 _$$$state = $$.state, 9633 hasAxis = _$$$state.hasAxis, 9634 hasRadar = _$$$state.hasRadar; 9635 // Show tooltip if needed 9636 if (config.tooltip_init_show) { 9637 var _$$$axis, _data; 9638 if ((_$$$axis = $$.axis) != null && _$$$axis.isTimeSeries() && isString(config.tooltip_init_x)) { 9639 config.tooltip_init_x = parseDate.call($$, config.tooltip_init_x); 9640 } 9641 $$.api.tooltip.show({ 9642 data: (_data = {}, _data[!(hasAxis || hasRadar) ? "index" : "x"] = config.tooltip_init_x, _data) 9643 }); 9644 const position = config.tooltip_init_position; 9645 if (!config.tooltip_contents.bindto && !isEmpty(position)) { 9646 const _position$top = position.top, 9647 top = _position$top === void 0 ? 0 : _position$top, 9648 _position$left = position.left, 9649 left = _position$left === void 0 ? 50 : _position$left; 9650 $el.tooltip.style("top", isString(top) ? top : top + "px").style("left", isString(left) ? left : left + "px").style("display", null); 9651 } 9652 } 9653 }, 9654 /** 9655 * Get the tooltip HTML string 9656 * @param {Array} args Arguments 9657 * @returns {string} Formatted HTML string 9658 * @private 9659 */ 9660 getTooltipHTML: function getTooltipHTML() { 9661 const $$ = this, 9662 api = $$.api, 9663 config = $$.config; 9664 return isFunction(config.tooltip_contents) ? config.tooltip_contents.bind(api).apply(void 0, arguments) : $$.getTooltipContent.apply($$, arguments); 9665 }, 9666 /** 9667 * Returns the tooltip content(HTML string) 9668 * @param {object} d data 9669 * @param {Function} defaultTitleFormat Default title format 9670 * @param {Function} defaultValueFormat Default format for each data value in the tooltip. 9671 * @param {Function} color Color function 9672 * @returns {string} html 9673 * @private 9674 */ 9675 getTooltipContent: function getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) { 9676 var _this = this; 9677 const $$ = this, 9678 api = $$.api, 9679 config = $$.config, 9680 state = $$.state, 9681 $el = $$.$el,
9682 _map = ["title", "name", "value"].map(function (v) { 9683 _newArrowCheck(this, _this); 9684 const fn = config["tooltip_format_" + v]; 9685 return isFunction(fn) ? fn.bind(api) : fn; 9686 }.bind(this)), 9687 titleFn = _map[0], 9688 nameFn = _map[1], 9689 valueFn = _map[2], 9690 titleFormat = function () { 9691 _newArrowCheck(this, _this); 9692 return sanitize((titleFn || defaultTitleFormat).apply(void 0, arguments)); 9693 }.bind(this), 9694 nameFormat = function () { 9695 var _this2 = this; 9696 _newArrowCheck(this, _this); 9697 return sanitize((nameFn || function (name) { 9698 _newArrowCheck(this, _this2); 9699 return name; 9700 }.bind(this)).apply(void 0, arguments)); 9701 }.bind(this), 9702 valueFormat = function () { 9703 var _this3 = this; 9704 _newArrowCheck(this, _this); 9705 const fn = valueFn || (state.hasTreemap || $$.isStackNormalized() ? function (v, ratio) { 9706 _newArrowCheck(this, _this3); 9707 return (ratio * 100).toFixed(2) + "%"; 9708 }.bind(this) : defaultValueFormat); 9709 return sanitize(fn.apply(void 0, arguments)); 9710 }.bind(this), 9711 order = config.tooltip_order, 9712 getRowValue = function (row) { 9713 _newArrowCheck(this, _this); 9714 return $$.axis && $$.isBubbleZType(row) ? $$.getBubbleZData(row.value, "z") : $$.getBaseValue(row); 9715 }.bind(this), 9716 getBgColor = $$.levelColor ? function (row) { 9717 _newArrowCheck(this, _this); 9718 return $$.levelColor(row.value); 9719 }.bind(this) : function (row) { 9720 _newArrowCheck(this, _this); 9721 return color(row); 9722 }.bind(this), 9723 contents = config.tooltip_contents, 9724 tplStr = contents.template, 9725 targetIds = $$.mapToTargetIds(); 9726 9727 // get formatter function 9728 9729 // determine fotmatter function with sanitization 9730 9731 if (order === null && config.data_groups.length) { 9732 // for stacked data, order should aligned with the visually displayed data 9733 const ids = $$.orderTargets($$.data.targets).map(function (i2) { 9734 _newArrowCheck(this, _this); 9735 return i2.id; 9736 }.bind(this)).reverse(); 9737 d.sort(function (a, b) { 9738 _newArrowCheck(this, _this); 9739 let v1 = a ? a.value : null, 9740 v2 = b ? b.value : null; 9741 if (v1 > 0 && v2 > 0) { 9742 v1 = a.id ? ids.indexOf(a.id) : null; 9743 v2 = b.id ? ids.indexOf(b.id) : null; 9744 } 9745 return v1 - v2; 9746 }.bind(this)); 9747 } else if (/^(asc|desc)$/.test(order)) { 9748 d.sort(function (a, b) { 9749 _newArrowCheck(this, _this); 9750 const v1 = a ? getRowValue(a) : null, 9751 v2 = b ? getRowValue(b) : null; 9752 return order === "asc" ? v1 - v2 : v2 - v1; 9753 }.bind(this)); 9754 } else if (isFunction(order)) { 9755 d.sort(order.bind(api)); 9756 } 9757 const tpl = $$.getTooltipContentTemplate(tplStr), 9758 len = d.length; 9759 let text, row, param, value, i; 9760 for (i = 0; i < len; i++) { 9761 row = d[i]; 9762 if (!row || !(getRowValue(row) || getRowValue(row) === 0)) { 9763 continue; 9764 } 9765 if (isUndefined(text)) { 9766 const title = (state.hasAxis || state.hasRadar) && titleFormat(row.x); 9767 text = tplProcess(tpl[0], { 9768 CLASS_TOOLTIP: $TOOLTIP.tooltip, 9769 TITLE: isValue(title) ? tplStr ? title : "<tr><th colspan=\"2\">" + title + "</th></tr>" : "" 9770 }); 9771 } 9772 if (!row.ratio && $el.arcs) { 9773 param = ["arc", $$.$el.arcs.select("path." + $ARC.arc + "-" + row.id).data()[0]]; 9774 row.ratio = $$.getRatio.apply($$, param); 9775 } 9776 9777 // arrange param to be passed to formatter 9778 param = [row.ratio, row.id, row.index]; 9779 if ($$.isAreaRangeType(row)) { 9780 const _map2 = ["high", "low"].map(function (v) { 9781 _newArrowCheck(this, _this); 9782 return valueFormat.apply(void 0, [$$.getRangedData(row, v)].concat(param)); 9783 }.bind(this)), 9784 high = _map2[0], 9785 low = _map2[1], 9786 mid = valueFormat.apply(void 0, [getRowValue(row)].concat(param)); 9787 value = "<b>Mid:</b> " + mid + " <b>High:</b> " + high + " <b>Low:</b> " + low; 9788 } else if ($$.isCandlestickType(row)) { 9789 const _map3 = ["open", "high", "low", "close", "volume"].map(function (v) { 9790 _newArrowCheck(this, _this); 9791 const value = $$.getRangedData(row, v, "candlestick"); 9792 return value ? valueFormat.apply(void 0, [$$.getRangedData(row, v, "candlestick")].concat(param)) : undefined; 9793 }.bind(this)), 9794 open = _map3[0], 9795 high = _map3[1], 9796 low = _map3[2], 9797 close = _map3[3], 9798 volume = _map3[4]; 9799 value = "<b>Open:</b> " + open + " <b>High:</b> " + high + " <b>Low:</b> " + low + " <b>Close:</b> " + close + (volume ? " <b>Volume:</b> " + volume : ""); 9800 } else if ($$.isBarRangeType(row)) { 9801 const _row = row, 9802 rangeValue = _row.value, 9803 id = _row.id, 9804 index = _row.index; 9805 value = "" + valueFormat(rangeValue, undefined, id, index); 9806 } else { 9807 value = valueFormat.apply(void 0, [getRowValue(row)].concat(param)); 9808 } 9809 if (value !== undefined) { 9810 // Skip elements when their name is set to null 9811 if (row.name === null) { 9812 continue; 9813 } 9814 const name = nameFormat.apply(void 0, [row.name].concat(param)), 9815 color = getBgColor(row), 9816 contentValue = { 9817 CLASS_TOOLTIP_NAME: $TOOLTIP.tooltipName + $$.getTargetSelectorSuffix(row.id), 9818 COLOR: tplStr || !$$.patterns ? color : "<svg><rect style=\"fill:" + color + "\" width=\"10\" height=\"10\"></rect></svg>", 9819 NAME: name, 9820 VALUE: value 9821 }; 9822 if (tplStr && isObject(contents.text)) { 9823 const index = targetIds.indexOf(row.id); 9824 Object.keys(contents.text).forEach(function (key) { 9825 _newArrowCheck(this, _this); 9826 contentValue[key] = contents.text[key][index]; 9827 }.bind(this)); 9828 } 9829 text += tplProcess(tpl[1], contentValue); 9830 } 9831 }
9832 return text + "</table>"; 9833 }, 9834 /** 9835 * Get the content template string 9836 * @param {string} tplStr Tempalte string 9837 * @returns {Array} Template string 9838 * @private 9839 */ 9840 getTooltipContentTemplate: function getTooltipContentTemplate(tplStr) { 9841 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\">" + (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(/{{(.*)}}/); 9842 }, 9843 /** 9844 * Update tooltip position coordinate 9845 * @param {object} dataToShow Data object 9846 * @param {SVGElement} eventTarget Event element 9847 * @private 9848 */ 9849 setTooltipPosition: function setTooltipPosition(dataToShow, eventTarget) { 9850 var _this4 = this; 9851 const $$ = this, 9852 config = $$.config, 9853 scale = $$.scale, 9854 state = $$.state, 9855 _$$$$el = $$.$el, 9856 eventRect = _$$$$el.eventRect, 9857 tooltip = _$$$$el.tooltip, 9858 bindto = config.tooltip_contents.bindto, 9859 isRotated = config.axis_rotated, 9860 datum = tooltip == null ? void 0 : tooltip.datum(); 9861 if (!bindto && datum) { 9862 var _config$tooltip_posit, _config$tooltip_posit2; 9863 const data = dataToShow != null ? dataToShow : JSON.parse(datum.current), 9864 _getPointer = getPointer(state.event, eventTarget != null ? eventTarget : eventRect == null ? void 0 : eventRect.node()), 9865 x = _getPointer[0], 9866 y = _getPointer[1], 9867 currPos = { 9868 x: x, 9869 y: y 9870 }; 9871 // get mouse event position 9872 9873 if (state.hasAxis && scale.x && datum && "x" in datum) { 9874 const getYPos = function (value, id, axisId) { 9875 var _$$$axis2; 9876 if (value === void 0) { 9877 value = 0; 9878 } 9879 if (axisId === void 0) { 9880 axisId = "y"; 9881 } 9882 _newArrowCheck(this, _this4); 9883 const scaleFn = scale[id ? (_$$$axis2 = $$.axis) == null ? void 0 : _$$$axis2.getId(id) : axisId]; 9884 return scaleFn ? scaleFn(value) + (isRotated ? state.margin.left : state.margin.top) : 0; 9885 }.bind(this); 9886 currPos.xAxis = scale.x(datum.x) + ( 9887 // add margin only when user specified tooltip.position function 9888 config.tooltip_position ? isRotated ? state.margin.top : state.margin.left : 0); 9889 if (data.length === 1) { 9890 currPos.yAxis = getYPos(data[0].value, data[0].id); 9891 } else { 9892 currPos.yAxis = getYPos; 9893 } 9894 } 9895 const _datum$width = datum.width, 9896 width = _datum$width === void 0 ? 0 : _datum$width, 9897 _datum$height = datum.height, 9898 height = _datum$height === void 0 ? 0 : _datum$height, 9899 pos = (_config$tooltip_posit = (_config$tooltip_posit2 = config.tooltip_position) == null ? void 0 : _config$tooltip_posit2.bind($$.api)(data, width, height, eventRect == null ? void 0 : eventRect.node(), currPos)) != null ? _config$tooltip_posit : $$.getTooltipPosition.bind($$)(width, height, currPos); // Get tooltip position 9900 ["top", "left"].forEach(function (v) { 9901 _newArrowCheck(this, _this4); 9902 const value = pos[v]; 9903 tooltip.style(v, value + "px"); 9904 9905 // Remember left pos in percentage to be used on resize call 9906 if (v === "left" && !datum.xPosInPercent) { 9907 datum.xPosInPercent = value / state.current.width * 100; 9908 } 9909 }.bind(this)); 9910 } 9911 }, 9912 /** 9913 * Returns the position of the tooltip 9914 * @param {string} tWidth Width value of tooltip element 9915 * @param {string} tHeight Height value of tooltip element 9916 * @param {object} currPos Current mouse position 9917 * @returns {object} top, left value 9918 * @private 9919 */ 9920 getTooltipPosition: function getTooltipPosition(tWidth, tHeight, currPos) { 9921 var _this5 = this; 9922 const $$ = this, 9923 config = $$.config, 9924 scale = $$.scale, 9925 state = $$.state, 9926 _state = state, 9927 width = _state.width, 9928 height = _state.height, 9929 current = _state.current, 9930 isLegendRight = _state.isLegendRight, 9931 inputType = _state.inputType, 9932 hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle, 9933 hasTreemap = state.hasTreemap, 9934 isRotated = config.axis_rotated, 9935 hasArcType = $$.hasArcType(), 9936 svgLeft = $$.getSvgLeft(!0);
9937 let chartRight = svgLeft + current.width - $$.getCurrentPaddingByDirection("right"); 9938 const size = 20; 9939 let x = currPos.x, 9940 y = currPos.y; 9941 9942 // Determine tooltip position 9943 if (hasArcType) { 9944 const raw = inputType === "touch" || $$.hasType("radar"); 9945 if (!raw) { 9946 x += (width - (isLegendRight ? $$.getLegendWidth() : 0)) / 2; 9947 y += hasGauge ? height : height / 2; 9948 } 9949 } else if (!hasTreemap) { 9950 const padding = { 9951 top: $$.getCurrentPaddingByDirection("top", !0), 9952 left: $$.getCurrentPaddingByDirection("left", !0) 9953 }; 9954 if (isRotated) { 9955 x += svgLeft + padding.left + size; 9956 y = padding.top + currPos.xAxis + size; 9957 chartRight -= svgLeft; 9958 } else { 9959 x = svgLeft + padding.left + size + (scale.zoom ? x : currPos.xAxis); 9960 y += padding.top - 5; 9961 } 9962 } 9963 9964 // when tooltip left + tWidth > chart's width 9965 if (x + tWidth + 15 > chartRight) { 9966 x -= tWidth + (hasTreemap || hasArcType ? 0 : isRotated ? 40 : 38); 9967 } 9968 if (y + tHeight > current.height) { 9969 const gap = hasTreemap ? 0 : 30; 9970 y -= hasGauge ? tHeight * 3 : tHeight + gap; 9971 } 9972 const pos = { 9973 top: y, 9974 left: x 9975 }; 9976 9977 // make sure to not be positioned out of viewport
9978 Object.keys(pos).forEach(function (v) { 9979 _newArrowCheck(this, _this5); 9980 if (pos[v] < 0) { 9981 pos[v] = 0; 9982 } 9983 }.bind(this)); 9984 return pos; 9985 }, 9986 /** 9987 * Show the tooltip 9988 * @param {object} selectedData Data object 9989 * @param {SVGElement} eventTarget Event element 9990 * @private 9991 */ 9992 showTooltip: function showTooltip(selectedData, eventTarget) { 9993 var _this6 = this; 9994 const $$ = this, 9995 config = $$.config, 9996 tooltip = $$.$el.tooltip, 9997 dataToShow = selectedData.filter(function (d) { 9998 _newArrowCheck(this, _this6); 9999 return d && isValue($$.getBaseValue(d)); 10000 }.bind(this)); 10001 if (!tooltip || dataToShow.length === 0 || !config.tooltip_show) { 10002 return; 10003 } 10004 let datum = tooltip.datum(); 10005 const dataStr = JSON.stringify(selectedData); 10006 if (!datum || datum.current !== dataStr) { 10007 const _selectedData$concat$ = selectedData.concat().sort()[0], 10008 index = _selectedData$concat$.index, 10009 x = _selectedData$concat$.x; 10010 callFn(config.tooltip_onshow, $$.api, selectedData); 10011 10012 // set tooltip content 10013 tooltip.html($$.getTooltipHTML(selectedData, 10014 // data 10015 $$.axis ? $$.axis.getXAxisTickFormat() : $$.categoryName.bind($$), 10016 // defaultTitleFormat 10017 $$.getDefaultValueFormat(), 10018 // defaultValueFormat 10019 $$.color // color 10020 )).style("display", null).style("visibility", null) // for IE9 10021 .datum(datum = { 10022 index: index, 10023 x: x, 10024 current: dataStr, 10025 width: tooltip.property("offsetWidth"), 10026 height: tooltip.property("offsetHeight") 10027 }); 10028 callFn(config.tooltip_onshown, $$.api, selectedData); 10029 $$._handleLinkedCharts(!0, index); 10030 } 10031 $$.setTooltipPosition(dataToShow, eventTarget); 10032 }, 10033 /** 10034 * Adjust tooltip position on resize event 10035 * @private 10036 */ 10037 bindTooltipResizePos: function bindTooltipResizePos() { 10038 var _this7 = this; 10039 const $$ = this, 10040 resizeFunction = $$.resizeFunction, 10041 state = $$.state, 10042 tooltip = $$.$el.tooltip; 10043 resizeFunction.add(function () { 10044 _newArrowCheck(this, _this7); 10045 if (tooltip.style("display") === "block") { 10046 const current = state.current, 10047 _tooltip$datum = tooltip.datum(), 10048 width = _tooltip$datum.width, 10049 xPosInPercent = _tooltip$datum.xPosInPercent; 10050 let value = current.width / 100 * xPosInPercent; 10051 const diff = current.width - (value + width); 10052 10053 // if tooltip size overs current viewport size 10054 if (diff < 0) { 10055 value += diff; 10056 } 10057 tooltip.style("left", value + "px"); 10058 } 10059 }.bind(this)); 10060 }, 10061 /** 10062 * Hide the tooltip 10063 * @param {boolean} force Force to hide 10064 * @private 10065 */ 10066 hideTooltip: function hideTooltip(force) { 10067 const $$ = this, 10068 api = $$.api, 10069 config = $$.config, 10070 tooltip = $$.$el.tooltip; 10071 if (tooltip && tooltip.style("display") !== "none" && (!config.tooltip_doNotHide || force)) { 10072 var _tooltip$datum$curren; 10073 const selectedData = JSON.parse((_tooltip$datum$curren = tooltip.datum().current) != null ? _tooltip$datum$curren : {}); 10074 callFn(config.tooltip_onhide, api, selectedData); 10075 10076 // hide tooltip 10077 tooltip.style("display", "none").style("visibility", "hidden") // for IE9 10078 .datum(null); 10079 callFn(config.tooltip_onhidden, api, selectedData); 10080 } 10081 }, 10082 /** 10083 * Toggle display for linked chart instances 10084 * @param {boolean} show true: show, false: hide 10085 * @param {number} index x Axis index 10086 * @private 10087 */ 10088 _handleLinkedCharts: function _handleLinkedCharts(show, index) { 10089 var _this8 = this; 10090 const $$ = this, 10091 charts = $$.charts, 10092 config = $$.config, 10093 event = $$.state.event; 10094 // Prevent propagation among instances if isn't instantiated from the user's event 10095 // https://github.com/naver/billboard.js/issues/1979 10096 if (event != null && event.isTrusted && config.tooltip_linked && charts.length > 1) { 10097 const linkedName = config.tooltip_linked_name; 10098 charts.filter(function (c) { 10099 _newArrowCheck(this, _this8); 10100 return c !== $$.api; 10101 }
10101.bind(this)).forEach(function (c) { 10102 _newArrowCheck(this, _this8); 10103 const _c$internal = c.internal, 10104 config = _c$internal.config, 10105 $el = _c$internal.$el, 10106 isLinked = config.tooltip_linked, 10107 name = config.tooltip_linked_name, 10108 isInDom = browser_doc.body.contains($el.chart.node()); 10109 if (isLinked && linkedName === name && isInDom) { 10110 const data = $el.tooltip.data()[0], 10111 isNotSameIndex = index !== (data == null ? void 0 : data.index); 10112 try { 10113 c.tooltip[show && isNotSameIndex ? "show" : "hide"]({ 10114 index: index 10115 }); 10116 } catch (e) {} 10117 } 10118 }.bind(this)); 10119 } 10120 }, 10121 /** 10122 * Update tooltip content on redraw 10123 * - In a situation where tooltip is displayed and data load happens, it should reflect loaded data to tooltip 10124 * @param {d3Selection} context Event rect element 10125 * @param {number} index Data index 10126 * @private 10127 */ 10128 updateTooltipOnRedraw: function updateTooltipOnRedraw(context, index) { 10129 var _this9 = this; 10130 const $$ = this, 10131 config = $$.config, 10132 _$$$$el2 = $$.$el, 10133 eventRect = _$$$$el2.eventRect, 10134 svg = _$$$$el2.svg, 10135 tooltip = _$$$$el2.tooltip, 10136 _$$$state2 = $$.state, 10137 event = _$$$state2.event, 10138 hasAxis = _$$$state2.hasAxis, 10139 hasRadar = _$$$state2.hasRadar, 10140 hasTreemap = _$$$state2.hasTreemap; 10141 // Update tooltip, when tooltip is in shown state 10142 if ((tooltip == null ? void 0 : tooltip.style("display")) === "block" && event) { 10143 var _ref; 10144 const rect = context != null ? context : (_ref = hasRadar ? svg : eventRect) == null ? void 0 : _ref.node(); 10145 10146 // for Axis based & Radar 10147 if (hasAxis || hasRadar) { 10148 if ($$.isMultipleX()) { 10149 $$.selectRectForMultipleXs(rect, !1); 10150 } else { 10151 const idx = index != null ? index : $$.getDataIndexFromEvent(event); 10152 if (index === -1) { 10153 $$.api.tooltip.hide(); 10154 } else { 10155 $$.selectRectForSingle(rect, idx); 10156 $$.setExpand(idx, null, !0); 10157 } 10158 } 10159 10160 // for Arc & Treemap 10161 } else { 10162 const clientX = event.clientX, 10163 clientY = event.clientY; 10164 setTimeout(function () { 10165 _newArrowCheck(this, _this9); 10166 let target = browser_doc.elementFromPoint(clientX, clientY); 10167 const data = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(target).datum(); 10168 if (data) { 10169 const d = $$.hasArcType() ? $$.convertToArcData($$.updateAngle(data)) : data == null ? void 0 : data.data; 10170 hasTreemap && (target = svg.node()); 10171 d && $$.showTooltip([d], target); 10172 } else { 10173 $$.api.tooltip.hide(); 10174 } 10175 }.bind(this), config.transition_duration); 10176 } 10177 } 10178 } 10179}); 10180;// CONCATENATED MODULE: ./src/ChartInternal/internals/transform.ts 10181/** 10182 * Copyright (c) 2017 ~ present NAVER Corp. 10183 * billboard.js project is licensed under the MIT license 10184 */ 10185 10186 10187/* harmony default export */ var transform = ({ 10188 getTranslate: function getTranslate(target, index) { 10189 if (index === void 0) { 10190 index = 0; 10191 } 10192 const $$ = this, 10193 config = $$.config, 10194 state = $$.state, 10195 isRotated = config.axis_rotated; 10196 let padding = 0, 10197 x, 10198 y; 10199 if (index && /^(x|y2?)$/.test(target)) { 10200 padding = $$.getAxisSize(target) * index; 10201 } 10202 if (target === "main") { 10203 x = asHalfPixel(state.margin.left); 10204 y = asHalfPixel(state.margin.top); 10205 } else if (target === "context") { 10206 x = asHalfPixel(state.margin2.left); 10207 y = asHalfPixel(state.margin2.top); 10208 } else if (target === "legend") { 10209 x = state.margin3.left; 10210 y = state.margin3.top; 10211 } else if (target === "x") { 10212 x = isRotated ? -padding : 0; 10213 y = isRotated ? 0 : state.height + padding; 10214 } else if (target === "y") { 10215 x = isRotated ? 0 : -padding; 10216 y = isRotated ? state.height + padding : 0; 10217 } else if (target === "y2") { 10218 x = isRotated ? 0 : state.width + padding; 10219 y = isRotated ? -padding - 1 : 0; 10220 } else if (target === "subX") { 10221 x = 0; 10222 y = isRotated ? 0 : state.height2; 10223 } else if (target === "arc") { 10224 x = state.arcWidth / 2; 10225 y = state.arcHeight / 2; 10226 } else if (target === "polar") { 10227 x = state.arcWidth / 2; 10228 y = state.arcHeight / 2; 10229 } else if (target === "radar") { 10230 const _$$$getRadarSize = $$.getRadarSize(), 10231 width = _$$$getRadarSize[0]; 10232 x = state.width / 2 - width; 10233 y = asHalfPixel(state.margin.top); 10234 } 10235 return "translate(" + x + ", " + y + ")"; 10236 }, 10237 transformMain: function transformMain(withTransition, transitions) { 10238 const $$ = this, 10239 main = $$.$el.main, 10240 $T = $$.$T, 10241 xAxis = transitions != null && transitions.axisX ? transitions.axisX : $T(main.select("." + $AXIS.axisX), withTransition), 10242 yAxis = transitions != null && transitions.axisY ? transitions.axisY : $T(main.select("." + $AXIS.axisY), withTransition), 10243 y2Axis = transitions != null && transitions.axisY2 ? transitions.axisY2 : $T(main.select("." + $AXIS.axisY2), withTransition); 10244 $T(main, withTransition).attr("transform", $$.getTranslate("main")); 10245 xAxis.attr("transform", $$.getTranslate("x")); 10246 yAxis.attr("transform", $$.getTranslate("y")); 10247 y2Axis.attr("transform", $$.getTranslate("y2")); 10248 main.select("." + $ARC.chartArcs).attr("transform", $$.getTranslate("arc")); 10249 }, 10250 transformAll: function transformAll(withTransition, transitions) { 10251 const $$ = this, 10252 config = $$.config, 10253 _$$$state = $$.state, 10254 hasAxis = _$$$state.hasAxis, 10255 hasTreemap = _$$$state.hasTreemap, 10256 $el = $$.$el; 10257 hasTreemap || $$.transformMain(withTransition, transitions); 10258 hasAxis && config.subchart_show && $$.transformContext(withTransition, transitions); 10259 $el.legend && $$.transformLegend(withTransition); 10260 } 10261}); 10262;// CONCATENATED MODULE: ./src/ChartInternal/internals/type.ts 10263 10264/** 10265 * Copyright (c) 2017 ~ present NAVER Corp. 10266 * billboard.js project is licensed under the MIT license 10267 */ 10268 10269 10270/* harmony default export */ var type = ({ 10271 /** 10272 * Check if the given chart type is valid 10273 * @param {string} type Chart type string 10274 * @returns {boolean} 10275 * @private 10276 */ 10277 isValidChartType: function isValidChartType(type) { 10278 return !!(type && Object.values(TYPE).indexOf(type) > -1); 10279 }, 10280 setTargetType: function setTargetType(targetIds, type) { 10281 var _this = this; 10282 const $$ = this, 10283 config = $$.config, 10284 withoutFadeIn = $$.state.withoutFadeIn;
10285 $$.mapToTargetIds(targetIds).forEach(function (id) { 10286 _newArrowCheck(this, _this); 10287 withoutFadeIn[id] = type === config.data_types[id]; 10288 config.data_types[id] = type; 10289 }.bind(this)); 10290 if (!targetIds) { 10291 config.data_type = type; 10292 } 10293 }, 10294 /** 10295 * Updte current used chart types 10296 * @private 10297 */ 10298 updateTypesElements: function updateTypesElements() { 10299 var _this2 = this; 10300 const $$ = this, 10301 current = $$.state.current; 10302 Object.keys(TYPE).forEach(function (v) { 10303 _newArrowCheck(this, _this2); 10304 const t = TYPE[v], 10305 has = $$.hasType(t, null, !0), 10306 idx = current.types.indexOf(t); 10307 if (idx === -1 && has) { 10308 current.types.push(t); 10309 } else if (idx > -1 && !has) { 10310 current.types.splice(idx, 1); 10311 } 10312 }.bind(this)); 10313 10314 // Update current chart elements reference 10315 $$.setChartElements(); 10316 }, 10317 /** 10318 * Check if given chart types exists 10319 * @param {string} type Chart type 10320 * @param {Array} targetsValue Data array 10321 * @param {boolean} checkFromData Force to check type cotains from data targets 10322 * @returns {boolean} 10323 * @private 10324 */ 10325 hasType: function hasType(type, targetsValue, checkFromData) { 10326 var _current$types, 10327 _this3 = this; 10328 if (checkFromData === void 0) { 10329 checkFromData = !1; 10330 } 10331 const $$ = this, 10332 config = $$.config, 10333 current = $$.state.current, 10334 types = config.data_types, 10335 targets = targetsValue || $$.data.targets; 10336 let has = !1; 10337 if (!checkFromData && ((_current$types = current.types) == null ? void 0 : _current$types.indexOf(type)) > -1) { 10338 has = !0; 10339 } else if (targets != null && targets.length) { 10340 targets.forEach(function (target) { 10341 _newArrowCheck(this, _this3); 10342 const t = types[target.id]; 10343 if (t === type || !t && type === "line") { 10344 has = !0; 10345 } 10346 }.bind(this)); 10347 } else if (Object.keys(types).length) { 10348 Object.keys(types).forEach(function (id) { 10349 _newArrowCheck(this, _this3); 10350 if (types[id] === type) { 10351 has = !0; 10352 } 10353 }.bind(this)); 10354 } else { 10355 has = config.data_type === type; 10356 } 10357 return has; 10358 }, 10359 /** 10360 * Check if contains given chart types 10361 * @param {string} type Type key 10362 * @param {object} targets Target data 10363 * @param {Array} exclude Excluded types 10364 * @returns {boolean} 10365 * @private 10366 */ 10367 hasTypeOf: function hasTypeOf(type, targets, exclude) { 10368 var _this4 = this; 10369 if (exclude === void 0) { 10370 exclude = []; 10371 } 10372 if (type in TYPE_BY_CATEGORY) { 10373 return !TYPE_BY_CATEGORY[type].filter(function (v) { 10374 _newArrowCheck(this, _this4); 10375 return exclude.indexOf(v) === -1; 10376 }.bind(this)).every(function (v) { 10377 _newArrowCheck(this, _this4); 10378 return !this.hasType(v, targets); 10379 }.bind(this)); 10380 } 10381 return !1; 10382 }, 10383 /** 10384 * Check if given data is certain chart type 10385 * @param {object} d Data object 10386 * @param {string|Array} type chart type 10387 * @returns {boolean} 10388 * @private 10389 */ 10390 isTypeOf: function isTypeOf(d, type) { 10391 const id = isString(d) ? d : d.id, 10392 dataType = this.config.data_types[id] || this.config.data_type; 10393 return isArray(type) ? type.indexOf(dataType) >= 0 : dataType === type; 10394 }, 10395 hasPointType: function hasPointType() { 10396 const $$ = this; 10397 return $$.hasTypeOf("Line") || $$.hasType("bubble") || $$.hasType("scatter"); 10398 }, 10399 /** 10400 * Check if contains arc types chart 10401 * @param {object} targets Target data 10402 * @param {Array} exclude Excluded types 10403 * @returns {boolean} 10404 * @private 10405 */ 10406 hasArcType: function hasArcType(targets, exclude) { 10407 return this.hasTypeOf("Arc", targets, exclude); 10408 }, 10409 hasMultiArcGauge: function hasMultiArcGauge() { 10410 return this.hasType("gauge") && this.config.gauge_type === "multi"; 10411 }, 10412 isLineType: function isLineType(d) { 10413 const id = isString(d) ? d : d.id; 10414 return !this.config.data_types[id] || this.isTypeOf(id, TYPE_BY_CATEGORY.Line); 10415 }, 10416 isStepType: function isStepType(d) { 10417 return this.isTypeOf(d, TYPE_BY_CATEGORY.Step); 10418 }, 10419 isSplineType: function isSplineType(d) { 10420 return this.isTypeOf(d, TYPE_BY_CATEGORY.Spline); 10421 }, 10422 isAreaType: function isAreaType(d) { 10423 return this.isTypeOf(d, TYPE_BY_CATEGORY.Area); 10424 }, 10425 isAreaRangeType: function isAreaRangeType(d) { 10426 return this.isTypeOf(d, TYPE_BY_CATEGORY.AreaRange); 10427 }, 10428 isBarType: function isBarType(d) { 10429 return this.isTypeOf(d, "bar"); 10430 }, 10431 isBubbleType: function isBubbleType(d) { 10432 return this.isTypeOf(d, "bubble"); 10433 }, 10434 isCandlestickType: function isCandlestickType(d) { 10435 return this.isTypeOf(d, "candlestick"); 10436 }, 10437 isScatterType: function isScatterType(d) { 10438 return this.isTypeOf(d, "scatter"); 10439 }, 10440 isTreemapType: function isTreemapType(d) { 10441 return this.isTypeOf(d, "treemap"); 10442 }, 10443 isPieType: function isPieType(d) { 10444 return this.isTypeOf(d, "pie"); 10445 }, 10446 isGaugeType: function isGaugeType(d) { 10447 return this.isTypeOf(d, "gauge"); 10448 }, 10449 isDonutType: function isDonutType(d) { 10450 return this.isTypeOf(d, "donut"); 10451 }, 10452 isPolarType: function isPolarType(d) { 10453 return this.isTypeOf(d, "polar"); 10454 }, 10455 isRadarType: function isRadarType(d) { 10456 return this.isTypeOf(d, "radar"); 10457 }, 10458 isArcType: function isArcType(d) { 10459 return this.isPieType(d) || this.isDonutType(d) || this.isGaugeType(d) || this.isPolarType(d) || this.isRadarType(d); 10460 }, 10461 // determine if is 'circle' data point 10462 isCirclePoint: function isCirclePoint(node) { 10463 const config = this.config, 10464 pattern = config.point_pattern; 10465 let isCircle = !1; 10466 if ((node == null ? void 0 : node.tagName) === "circle") { 10467 isCircle = !0; 10468 } else { 10469 isCircle = config.point_type === "circle" && (!pattern || isArray(pattern) && pattern.length === 0); 10470 } 10471 return isCircle; 10472 }, 10473 lineData: function lineData(d) { 10474 return this.isLineType(d) ? [d] : []; 10475 }, 10476 arcData: function arcData(d) { 10477 return this.isArcType(d.data) ? [d] : []; 10478 }, 10479 /** 10480 * Get data adapt for data label showing 10481 * @param {object} d Data object 10482 * @returns {Array} 10483 * @private 10484 */ 10485 labelishData: function labelishData(d) { 10486 var _this5 = this; 10487 return this.isBarType(d) || this.isLineType(d) || this.isScatterType(d) || this.isBubbleType(d) || this.isCandlestickType(d) || this.isRadarType(d) || this.isTreemapType(d) ? d.values.filter(function (v) { 10488 _newArrowCheck(this, _this5); 10489 return isNumber(v.value) || !!v.value; 10490 }.bind(this)) : []; 10491 }, 10492 barLineBubbleData: function barLineBubbleData(d) { 10493 return this.isBarType(d) || this.isLineType(d) || this.isBubbleType(d) ? d.values : []; 10494 }, 10495 // https://github.com/d3/d3-shape#curves 10496 isInterpolationType: function isInterpolationType(type) { 10497 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; 10498 } 10499}); 10500;// CONCATENATED MODULE: ./src/ChartInternal/ChartInternal.ts 10501 10502/** 10503 * Copyright (c) 2017 ~ present NAVER Corp. 10504 * billboard.js project is licensed under the MIT license 10505 * @ignore 10506 */ 10507 10508 10509 10510 10511 10512 10513 10514 10515 10516 10517 10518// data 10519 10520 10521 10522 10523// interactions 10524 10525 10526// internals 10527 10528 // used to retrieve radar Axis name 10529 10530 10531 10532 10533 10534 10535 10536 10537 10538 10539 10540 10541 10542 10543 10544/**
10545 * Internal chart class. 10546 * - Note: Instantiated internally, not exposed for public. 10547 * @class ChartInternal 10548 * @ignore 10549 * @private 10550 */ 10551let ChartInternal = /*#__PURE__*/function () { 10552 function ChartInternal(api) { 10553 this.api = void 0; 10554 // API interface 10555 this.config = void 0; 10556 // config object 10557 this.cache = void 0; 10558 // cache instance 10559 this.$el = void 0; 10560 // elements 10561 this.state = void 0; 10562 // state variables 10563 this.charts = void 0; 10564 // all Chart instances array within page (equivalent of 'bb.instances') 10565 // data object 10566 this.data = { 10567 xs: {}, 10568 targets: [] 10569 }; 10570 // Axis 10571 this.axis = void 0; 10572 // Axis 10573 // scales 10574 this.scale = { 10575 x: null, 10576 y: null, 10577 y2: null, 10578 subX: null, 10579 subY: null, 10580 subY2: null, 10581 zoom: null 10582 }; 10583 // original values 10584 this.org = { 10585 xScale: null, 10586 xDomain: null 10587 }; 10588 // formatter function 10589 this.color = void 0; 10590 this.patterns = void 0; 10591 this.levelColor = void 0; 10592 this.point = void 0; 10593 this.brush = void 0; 10594 // format function 10595 this.format = { 10596 extraLineClasses: null, 10597 xAxisTick: null, 10598 dataTime: null, 10599 // dataTimeFormat 10600 defaultAxisTime: null, 10601 // defaultAxisTimeFormat 10602 axisTime: null // axisTimeFormat 10603 }; 10604 10605 const $$ = this; 10606 $$.api = api; // Chart class instance alias 10607 $$.config = new Options(); 10608 $$.cache = new Cache(); 10609 const store = new Store(); 10610 $$.$el = store.getStore("element"); 10611 $$.state = store.getStore("state"); 10612 $$.$T = $$.$T.bind($$); 10613 } 10614 10615 /** 10616 * Get the selection based on transition config 10617 * @param {SVGElement|d3Selection} selection Target selection 10618 * @param {boolean} force Force transition 10619 * @param {string} name Transition name 10620 * @returns {d3Selection} 10621 * @private 10622 */ 10623 var _proto = ChartInternal.prototype; 10624 _proto.$T = function $T(selection, force, name) { 10625 const config = this.config, 10626 state = this.state, 10627 duration = config.transition_duration, 10628 subchart = config.subchart_show; 10629 let t = selection; 10630 if (t) { 10631 // in case of non d3 selection, wrap with d3 selection 10632 if ("tagName" in t) { 10633 t = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(t); 10634 } 10635 10636 // do not transit on: 10637 // - wheel zoom (state.zooming = true) 10638 // - when has no subchart 10639 // - initialization 10640 // - resizing 10641 const transit = (force !== !1 && duration || force) && (!state.zooming || state.dragging) && !state.resizing && state.rendered && !subchart; 10642 t = transit ? t.transition(name).duration(duration) : t; 10643 } 10644 return t; 10645 }; 10646 _proto.beforeInit = function beforeInit() { 10647 const $$ = this; 10648 $$.callPluginHook("$beforeInit"); 10649 10650 // can do something 10651 callFn($$.config.onbeforeinit, $$.api); 10652 }; 10653 _proto.afterInit = function afterInit() { 10654 const $$ = this; 10655 $$.callPluginHook("$afterInit"); 10656 10657 // can do something 10658 callFn($$.config.onafterinit, $$.api); 10659 }; 10660 _proto.init = function init() { 10661 const $$ = this, 10662 config = $$.config, 10663 state = $$.state, 10664 $el = $$.$el, 10665 useCssRule = config.boost_useCssRule; 10666 checkModuleImport($$); 10667 state.hasRadar = !state.hasAxis && $$.hasType("radar"); 10668 state.hasTreemap = !state.hasAxis && $$.hasType("treemap"); 10669 state.hasAxis = !$$.hasArcType() && !state.hasTreemap; 10670 10671 // datetime to be used for uniqueness 10672 state.datetimeId = "bb-" + +new Date() * getRandom(); 10673 if (useCssRule) { 10674 // append style element 10675 const styleEl = browser_doc.createElement("style"); 10676 10677 // styleEl.id = styleId; 10678 styleEl.type = "text/css"; 10679 browser_doc.head.appendChild(styleEl); 10680 state.style = { 10681 rootSelctor: "." + state.datetimeId, 10682 sheet: styleEl.sheet 10683 }; 10684 10685 // used on .destroy() 10686 $el.style = styleEl; 10687 } 10688 const bindto = { 10689 element: config.bindto, 10690 classname: "bb" 10691 }; 10692 if (isObject(config.bindto)) { 10693 bindto.element = config.bindto.element || "#chart"; 10694 bindto.classname = config.bindto.classname || bindto.classname; 10695 } 10696 10697 // select bind element 10698 $el.chart = isFunction(bindto.element.node) ? config.bindto.element : (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(bindto.element || []); 10699 if ($el.chart.empty()) { 10700 $el.chart = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(browser_doc.body.appendChild(browser_doc.createElement("div"))); 10701 } 10702 $el.chart.html("").classed(bindto.classname, !0).classed(state.datetimeId, useCssRule).style("position", "relative"); 10703 $$.initParams(); 10704 $$.initToRender(); 10705 } 10706 10707 /** 10708 * Initialize the rendering process 10709 * @param {boolean} forced Force to render process 10710 * @private 10711 */; 10712 _proto.initToRender = function initToRender(forced) { 10713 var _this = this; 10714 const $$ = this, 10715 config = $$.config, 10716 state = $$.state, 10717 chart = $$.$el.chart, 10718 isHidden = function () { 10719 _newArrowCheck(this, _this); 10720 return chart.style("display") === "none" || chart.style("visibility") === "hidden"; 10721 }.bind(this), 10722 isLazy = config.render.lazy || isHidden(), 10723 MutationObserver = win.MutationObserver; 10724 if (isLazy && MutationObserver && config.render.observe !== !1 && !forced) { 10725 new MutationObserver(function (mutation, observer) { 10726 _newArrowCheck(this, _this); 10727 if (!isHidden()) { 10728 observer.disconnect(); 10729 state.rendered || $$.initToRender(!0); 10730 } 10731 }.bind(this)).observe(chart.node(), { 10732 attributes: !0, 10733 attributeFilter: ["class", "style"] 10734 }); 10735 } 10736 if (!isLazy || forced) { 10737 $$.convertData(config, function (res) { 10738 _newArrowCheck(this, _this); 10739 $$.initWithData(res); 10740 $$.afterInit(); 10741 }.bind(this)); 10742 } 10743 }; 10744 _proto.initParams = function initParams() { 10745 var _this2 = this; 10746 const $$ = this, 10747 config = $$.config, 10748 format = $$.format, 10749 state = $$.state, 10750 isRotated = config.axis_rotated; 10751 // color settings 10752 $$.color = $$.generateColor(); 10753 $$.levelColor = $$.generateLevelColor(); 10754 10755 // when 'padding=false' is set, disable axes and subchart. Because they are useless. 10756 if (config.padding === !1) { 10757 config.axis_x_show = !1; 10758 config.axis_y_show = !1; 10759 config.axis_y2_show = !1; 10760 config.subchart_show = !1; 10761 } 10762 if ($$.hasPointType()) { 10763 $$.point = $$.generatePoint(); 10764 } 10765 if (state.hasAxis) { 10766 $$.initClip(); 10767 format.extraLineClasses = $$.generateExtraLineClass(); 10768 format.dataTime = 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; 10769 format.axisTime = 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; 10770 const isDragZoom = $$.config.zoom_enabled && $$.config.zoom_type === "drag"; 10771 format.defaultAxisTime = function (d) { 10772 _newArrowCheck(this, _this2); 10773 const _$$$scale = $$.scale, 10774 x = _$$$scale.x, 10775 zoom = _$$$scale.zoom, 10776 isZoomed = isDragZoom ? zoom : zoom && x.orgDomain().toString() !== zoom.domain().toString(), 10777 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"; 10778 return format.axisTime(specifier)(d); 10779 }.bind(this); 10780 } 10781 state.isLegendRight = config.legend_position === "right"; 10782 state.isLegendInset = config.legend_position === "inset";
10783 state.isLegendTop = config.legend_inset_anchor === "top-left" || config.legend_inset_anchor === "top-right"; 10784 state.isLegendLeft = config.legend_inset_anchor === "top-left" || config.legend_inset_anchor === "bottom-left"; 10785 state.rotatedPadding.top = $$.getResettedPadding(state.rotatedPadding.top); 10786 state.rotatedPadding.right = isRotated && !config.axis_x_show ? 0 : 30; 10787 state.inputType = convertInputType(config.interaction_inputType_mouse, config.interaction_inputType_touch); 10788 }; 10789 _proto.initWithData = function initWithData(data) { 10790 var _this3 = this; 10791 const $$ = this, 10792 config = $$.config, 10793 scale = $$.scale, 10794 state = $$.state, 10795 $el = $$.$el, 10796 org = $$.org, 10797 _state = state, 10798 hasAxis = _state.hasAxis, 10799 hasTreemap = _state.hasTreemap, 10800 hasInteraction = config.interaction_enabled, 10801 hasPolar = $$.hasType("polar"); 10802 // for arc type, set axes to not be shown 10803 // $$.hasArcType() && ["x", "y", "y2"].forEach(id => (config[`axis_${id}_show`] = false)); 10804 if (hasAxis) { 10805 $$.axis = $$.getAxisInstance(); 10806 config.zoom_enabled && $$.initZoom(); 10807 } 10808 10809 // Init data as targets 10810 $$.data.xs = {}; 10811 $$.data.targets = $$.convertDataToTargets(data); 10812 if (config.data_filter) { 10813 $$.data.targets = $$.data.targets.filter(config.data_filter.bind($$.api)); 10814 } 10815 10816 // Set targets to hide if needed 10817 if (config.data_hide) { 10818 $$.addHiddenTargetIds(config.data_hide === !0 ? $$.mapToIds($$.data.targets) : config.data_hide); 10819 } 10820 if (config.legend_hide) { 10821 $$.addHiddenLegendIds(config.legend_hide === !0 ? $$.mapToIds($$.data.targets) : config.legend_hide); 10822 } 10823 10824 // Init sizes and scales 10825 $$.updateSizes(); 10826 $$.updateScales(!0); 10827 10828 // retrieve scale after the 'updateScales()' is called 10829 if (hasAxis) { 10830 const x = scale.x, 10831 y = scale.y, 10832 y2 = scale.y2, 10833 subX = scale.subX, 10834 subY = scale.subY, 10835 subY2 = scale.subY2; 10836 10837 // Set domains for each scale 10838 if (x) { 10839 x.domain(sortValue($$.getXDomain($$.data.targets), !config.axis_x_inverted)); 10840 subX.domain(x.domain()); 10841 10842 // Save original x domain for zoom update 10843 org.xDomain = x.domain(); 10844 } 10845 if (y) { 10846 y.domain($$.getYDomain($$.data.targets, "y")); 10847 subY.domain(y.domain()); 10848 } 10849 if (y2) { 10850 y2.domain($$.getYDomain($$.data.targets, "y2")); 10851 subY2 && subY2.domain(y2.domain()); 10852 } 10853 } 10854 10855 // -- Basic Elements -- 10856 $el.svg = $el.chart.append("svg").style("overflow", "hidden").style("display", "block"); 10857 if (hasInteraction && state.inputType) { 10858 const isTouch = state.inputType === "touch", 10859 onclick = config.onclick, 10860 onover = config.onover, 10861 onout = config.onout; 10862 $el.svg.on("click", (onclick == null ? void 0 : onclick.bind($$.api)) || null).on(isTouch ? "touchstart" : "mouseenter", (onover == null ? void 0 : onover.bind($$.api)) || null).on(isTouch ? "touchend" : "mouseleave", (onout == null ? void 0 : onout.bind($$.api)) || null); 10863 } 10864 config.svg_classname && $el.svg.attr("class", config.svg_classname); 10865 10866 // Define defs 10867 const hasColorPatterns = isFunction(config.color_tiles) && $$.patterns; 10868 if (hasAxis || hasColorPatterns || hasPolar || hasTreemap || config.data_labels_backgroundColors) { 10869 $el.defs = $el.svg.append("defs"); 10870 if (hasAxis) { 10871 ["id", "idXAxis", "idYAxis", "idGrid"].forEach(function (v) { 10872 _newArrowCheck(this, _this3); 10873 $$.appendClip($el.defs, state.clip[v]); 10874 }.bind(this)); 10875 } 10876 10877 // Append data background color filter definition 10878 $$.generateDataLabelBackgroundColorFilter(); 10879 10880 // set color patterns 10881 if (hasColorPatterns) { 10882 $$.patterns.forEach(function (p) { 10883 var _this4 = this; 10884 _newArrowCheck(this, _this3); 10885 return $el.defs.append(function () { 10886 _newArrowCheck(this, _this4); 10887 return p.node; 10888 }.bind(this)); 10889 }.bind(this)); 10890 } 10891 } 10892 $$.updateSvgSize(); 10893 10894 // Bind resize event 10895 $$.bindResize(); 10896 10897 // Define regions 10898 const main = $el.svg.append("g").classed($COMMON.main, !0).attr("transform", hasTreemap ? null : $$.getTranslate("main")); 10899 $el.main = main; 10900 10901 // initialize subchart when subchart show option is set 10902 config.subchart_show && $$.initSubchart(); 10903 config.tooltip_show && $$.initTooltip(); 10904 config.title_text && $$.initTitle(); 10905 !hasTreemap && config.legend_show && $$.initLegend(); 10906 10907 // -- Main Region -- 10908 10909 // text when empty 10910 if (config.data_empty_label_text) { 10911 main.append("text").attr("class", $TEXT.text + " " + $COMMON.empty).attr("text-anchor", "middle") // horizontal centering of text at x position in all browsers. 10912 .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE. 10913 } 10914 10915 if (hasAxis) { 10916 // Regions 10917 config.regions.length && $$.initRegion(); 10918 10919 // Add Axis here, when clipPath is 'false' 10920 config.clipPath || $$.axis.init(); 10921 } 10922 10923 // Define g for chart area 10924 main.append("g").classed($COMMON.chart, !0).attr("clip-path", hasAxis ? state.clip.path : null); 10925 $$.callPluginHook("$init"); 10926 $$.initChartElements(); 10927 if (hasAxis) { 10928 var _$$$axis; 10929 // Cover whole with rects for events 10930 hasInteraction && ($$.initEventRect == null ? void 0 : $$.initEventRect()); 10931 10932 // Grids 10933 $$.initGrid(); 10934 10935 // Add Axis here, when clipPath is 'true' 10936 config.clipPath && ((_$$$axis = $$.axis) == null ? void 0 : _$$$axis.init()); 10937 } 10938 10939 // Set targets 10940 $$.updateTargets($$.data.targets); 10941 10942 // Draw with targets 10943 $$.updateDimension(); 10944 10945 // oninit callback 10946 callFn(config.oninit, $$.api); 10947 10948 // Set background
10949 $$.setBackground(); 10950 $$.redraw({ 10951 withTransition: !1, 10952 withTransform: !0, 10953 withUpdateXDomain: !0, 10954 withUpdateOrgXDomain: !0, 10955 withTransitionForAxis: !1, 10956 initializing: !0 10957 }); 10958 10959 // data.onmin/max callback 10960 if (config.data_onmin || config.data_onmax) { 10961 const minMax = $$.getMinMaxData(); 10962 callFn(config.data_onmin, $$.api, minMax.min); 10963 callFn(config.data_onmax, $$.api, minMax.max); 10964 } 10965 config.tooltip_show && $$.initShowTooltip(); 10966 state.rendered = !0; 10967 } 10968 10969 /** 10970 * Initialize chart elements 10971 * @private 10972 */; 10973 _proto.initChartElements = function initChartElements() { 10974 var _this5 = this; 10975 const $$ = this, 10976 _$$$state = $$.state, 10977 hasAxis = _$$$state.hasAxis, 10978 hasRadar = _$$$state.hasRadar, 10979 hasTreemap = _$$$state.hasTreemap, 10980 types = []; 10981 if (hasAxis) { 10982 const shapes = ["bar", "bubble", "candlestick", "line"]; 10983 if ($$.config.bar_front) { 10984 shapes.push(shapes.shift()); 10985 } 10986 shapes.forEach(function (v) { 10987 _newArrowCheck(this, _this5); 10988 const name = capitalize(v); 10989 if (v === "line" && $$.hasTypeOf(name) || $$.hasType(v)) { 10990 types.push(name); 10991 } 10992 }.bind(this)); 10993 } else if (hasTreemap) { 10994 types.push("Treemap"); 10995 } else { 10996 const hasPolar = $$.hasType("polar"); 10997 if (!hasRadar) { 10998 types.push("Arc", "Pie"); 10999 } 11000 if ($$.hasType("gauge")) { 11001 types.push("Gauge"); 11002 } else if (hasRadar) { 11003 types.push("Radar"); 11004 } else if (hasPolar) { 11005 types.push("Polar"); 11006 } 11007 } 11008 types.forEach(function (v) { 11009 _newArrowCheck(this, _this5); 11010 $$["init" + v](); 11011 }.bind(this)); 11012 notEmpty($$.config.data_labels) && !$$.hasArcType(null, ["radar"]) && $$.initText(); 11013 } 11014 11015 /** 11016 * Set chart elements 11017 * @private 11018 */; 11019 _proto.setChartElements = function setChartElements() { 11020 const $$ = this, 11021 _$$$$el = $$.$el, 11022 chart = _$$$$el.chart, 11023 svg = _$$$$el.svg, 11024 defs = _$$$$el.defs, 11025 main = _$$$$el.main, 11026 tooltip = _$$$$el.tooltip, 11027 legend = _$$$$el.legend, 11028 title = _$$$$el.title, 11029 grid = _$$$$el.grid, 11030 needle = _$$$$el.needle, 11031 arc = _$$$$el.arcs, 11032 circles = _$$$$el.circle, 11033 bars = _$$$$el.bar, 11034 candlestick = _$$$$el.candlestick, 11035 lines = _$$$$el.line, 11036 areas = _$$$$el.area, 11037 texts = _$$$$el.text; 11038 // public 11039 $$.api.$ = { 11040 chart: chart, 11041 svg: svg, 11042 defs: defs, 11043 main: main, 11044 tooltip: tooltip, 11045 legend: legend, 11046 title: title, 11047 grid: grid, 11048 arc: arc, 11049 circles: circles, 11050 bar: { 11051 bars: bars 11052 }, 11053 candlestick: candlestick, 11054 line: { 11055 lines: lines, 11056 areas: areas 11057 }, 11058 needle: needle, 11059 text: { 11060 texts: texts 11061 } 11062 }; 11063 } 11064 11065 /** 11066 * Set background element/image 11067 * @private 11068 */; 11069 _proto.setBackground = function setBackground() { 11070 const $$ = this, 11071 bg = $$.config.background, 11072 state = $$.state, 11073 svg = $$.$el.svg; 11074 if (notEmpty(bg)) { 11075 const element = svg.select("g").insert(bg.imgUrl ? "image" : "rect", ":first-child"); 11076 if (bg.imgUrl) { 11077 element.attr("href", bg.imgUrl); 11078 } else if (bg.color) { 11079 element.style("fill", bg.color).attr("clip-path", state.clip.path); 11080 } 11081 element.attr("class", bg.class || null).attr("width", "100%").attr("height", "100%"); 11082 } 11083 } 11084 11085 /** 11086 * Update targeted element with given data 11087 * @param {object} targets Data object formatted as 'target' 11088 * @private 11089 */; 11090 _proto.updateTargets = function updateTargets(targets) { 11091 var _this6 = this; 11092 const $$ = this, 11093 _$$$state2 = $$.state, 11094 hasAxis = _$$$state2.hasAxis, 11095 hasRadar = _$$$state2.hasRadar, 11096 hasTreemap = _$$$state2.hasTreemap, 11097 helper = function (type) { 11098 _newArrowCheck(this, _this6); 11099 return $$["updateTargetsFor" + type](targets.filter($$["is" + type + "Type"].bind($$))); 11100 }.bind(this); 11101 // Text 11102 $$.updateTargetsForText(targets); 11103 if (hasAxis) { 11104 ["bar", "candlestick", "line"].forEach(function (v) { 11105 _newArrowCheck(this, _this6); 11106 const name = capitalize(v); 11107 if (v === "line" && $$.hasTypeOf(name) || $$.hasType(v)) { 11108 helper(name); 11109 } 11110 }.bind(this)); 11111 11112 // Sub Chart 11113 $$.updateTargetsForSubchart && $$.updateTargetsForSubchart(targets); 11114 11115 // Arc, Polar, Radar 11116 } else if ($$.hasArcType(targets)) { 11117 let type = "Arc"; 11118 if (hasRadar) { 11119 type = "Radar"; 11120 } else if ($$.hasType("polar")) { 11121 type = "Polar"; 11122 } 11123 helper(type); 11124 // Arc, Polar, Radar 11125 } else if (hasTreemap) { 11126 helper("Treemap"); 11127 } 11128 11129 // Point types 11130 const hasPointType = $$.hasType("bubble") || $$.hasType("scatter"); 11131 if (hasPointType) { 11132 $$.updateTargetForCircle == null || $$.updateTargetForCircle(); 11133 } 11134
11135 // Fade-in each chart 11136 $$.filterTargetsToShowAtInit(hasPointType); 11137 } 11138 11139 /** 11140 * Display targeted elements at initialization 11141 * @param {boolean} hasPointType whether has point type(bubble, scatter) or not 11142 * @private 11143 */; 11144 _proto.filterTargetsToShowAtInit = function filterTargetsToShowAtInit(hasPointType) { 11145 var _this7 = this; 11146 if (hasPointType === void 0) { 11147 hasPointType = !1; 11148 } 11149 const $$ = this, 11150 svg = $$.$el.svg, 11151 $T = $$.$T; 11152 let selector = "." + $COMMON.target; 11153 if (hasPointType) { 11154 selector += ", ." + $CIRCLE.chartCircles + " > ." + $CIRCLE.circles; 11155 } 11156 $T(svg.selectAll(selector).filter(function (d) { 11157 _newArrowCheck(this, _this7); 11158 return $$.isTargetToShow(d.id); 11159 }.bind(this))).style("opacity", null); 11160 }; 11161 _proto.getWithOption = function getWithOption(options) { 11162 var _this8 = this; 11163 const withOptions = { 11164 Dimension: !0, 11165 EventRect: !0, 11166 Legend: !1, 11167 Subchart: !0, 11168 Transform: !1, 11169 Transition: !0, 11170 TrimXDomain: !0, 11171 UpdateXAxis: "UpdateXDomain", 11172 UpdateXDomain: !1, 11173 UpdateOrgXDomain: !1, 11174 TransitionForExit: "Transition", 11175 TransitionForAxis: "Transition", 11176 Y: !0 11177 }; 11178 Object.keys(withOptions).forEach(function (key) { 11179 _newArrowCheck(this, _this8); 11180 let defVal = withOptions[key]; 11181 if (isString(defVal)) { 11182 defVal = withOptions[defVal]; 11183 } 11184 withOptions[key] = getOption(options, "with" + key, defVal); 11185 }.bind(this)); 11186 return withOptions; 11187 }; 11188 _proto.initialOpacity = function initialOpacity(d) { 11189 const $$ = this, 11190 withoutFadeIn = $$.state.withoutFadeIn, 11191 r = $$.getBaseValue(d) !== null && withoutFadeIn[d.id] ? null : "0"; 11192 return r; 11193 }; 11194 _proto.bindResize = function bindResize() { 11195 var _this9 = this; 11196 const $$ = this, 11197 config = $$.config, 11198 state = $$.state, 11199 resizeFunction = generateResize(config.resize_timer), 11200 list = []; 11201 list.push(function () { 11202 _newArrowCheck(this, _this9); 11203 return callFn(config.onresize, $$.api); 11204 }.bind(this)); 11205 if (config.resize_auto) { 11206 list.push(function () { 11207 _newArrowCheck(this, _this9); 11208 state.resizing = !0; 11209 11210 // https://github.com/naver/billboard.js/issues/2650 11211 if (config.legend_show) { 11212 $$.updateSizes(); 11213 $$.updateLegend(); 11214 } 11215 $$.api.flush(!1); 11216 }.bind(this)); 11217 } 11218 list.push(function () { 11219 _newArrowCheck(this, _this9); 11220 callFn(config.onresized, $$.api); 11221 state.resizing = !1; 11222 }.bind(this)); 11223 11224 // add resize functions 11225 list.forEach(function (v) { 11226 _newArrowCheck(this, _this9); 11227 return resizeFunction.add(v); 11228 }.bind(this)); 11229 $$.resizeFunction = resizeFunction; 11230 11231 // attach resize event 11232 win.addEventListener("resize", $$.resizeFunction = resizeFunction); 11233 } 11234 11235 /** 11236 * Call plugin hook 11237 * @param {string} phase The lifecycle phase 11238 * @param {Array} args Arguments 11239 * @private 11240 */; 11241 _proto.callPluginHook = function callPluginHook(phase) { 11242 for (var _this10 = this, _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 11243 args[_key - 1] = arguments[_key]; 11244 } 11245 this.config.plugins.forEach(function (v) { 11246 _newArrowCheck(this, _this10); 11247 if (phase === "$beforeInit") { 11248 v.$$ = this; 11249 this.api.plugins.push(v); 11250 } 11251 v[phase].apply(v, args); 11252 }.bind(this)); 11253 }; 11254 return ChartInternal; 11255}(); 11256 11257extend(ChartInternal.prototype, [ 11258// common 11259convert, data_data, load, category, internals_class, internals_color, domain, interactions_interaction, format, internals_legend, redraw, scale, shape, size, style, internals_text, internals_title, internals_tooltip, transform, type]); 11260;// CONCATENATED MODULE: ./src/config/config.ts 11261 11262/** 11263 * Copyright (c) 2017 ~ present NAVER Corp. 11264 * billboard.js project is licensed under the MIT license 11265 */ 11266 11267/** 11268 * Load configuration option 11269 * @param {object} config User's generation config value 11270 * @private 11271 */ 11272function loadConfig(config) { 11273 var _this = this; 11274 const thisConfig = this.config; 11275 let target, keys, read; 11276 const _find = function find() { 11277 _newArrowCheck(this, _this);
11278 const key = keys.shift(); 11279 if (key && target && isObjectType(target) && key in target) { 11280 target = target[key]; 11281 return _find(); 11282 } else if (!key) { 11283 return target; 11284 } 11285 return undefined; 11286 }.bind(this); 11287 Object.keys(thisConfig).forEach(function (key) { 11288 _newArrowCheck(this, _this); 11289 target = config; 11290 keys = key.split("_"); 11291 read = _find(); 11292 if (isDefined(read)) { 11293 thisConfig[key] = read; 11294 } 11295 }.bind(this)); 11296 11297 // only should run in the ChartInternal context 11298 if (this.api) { 11299 this.state.orgConfig = config; 11300 } 11301} 11302;// CONCATENATED MODULE: ./src/Chart/api/chart.ts 11303 11304/** 11305 * Copyright (c) 2017 ~ present NAVER Corp. 11306 * billboard.js project is licensed under the MIT license 11307 */ 11308 11309 11310/* harmony default export */ var chart = ({ 11311 /** 11312 * Resize the chart. 11313 * @function resize 11314 * @instance 11315 * @memberof Chart 11316 * @param {object} size This argument should include width and height in pixels. 11317 * @param {number} [size.width] width value 11318 * @param {number} [size.height] height value 11319 * @example 11320 * // Resize to 640x480 11321 * chart.resize({ 11322 * width: 640, 11323 * height: 480 11324 * }); 11325 */ 11326 resize: function resize(size) { 11327 const $$ = this.internal, 11328 config = $$.config, 11329 state = $$.state; 11330 if (state.rendered) { 11331 config.size_width = size ? size.width : null; 11332 config.size_height = size ? size.height : null; 11333 state.resizing = !0; 11334 this.flush(!1); 11335 $$.resizeFunction(); 11336 } 11337 }, 11338 /** 11339 * Force to redraw. 11340 * - **NOTE:** When zoom/subchart is used, the zoomed state will be resetted. 11341 * @function flush 11342 * @instance 11343 * @memberof Chart 11344 * @param {boolean} [soft] For soft redraw. 11345 * @example 11346 * chart.flush(); 11347 * 11348 * // for soft redraw 11349 * chart.flush(true); 11350 */ 11351 flush: function flush(soft) { 11352 const $$ = this.internal, 11353 state = $$.state, 11354 zoomResetBtn = $$.$el.zoomResetBtn; 11355 if (state.rendered) { 11356 // reset possible zoom scale when is called from resize event 11357 // eslint-disable-next-line prefer-rest-params 11358 if (state.resizing) { 11359 var _$$$brush; 11360 // arguments[1] is given when is called from resize 11361 (_$$$brush = $$.brush) == null || _$$$brush.updateResize(); 11362 } else { 11363 var _$$$axis; 11364 // re-update config info 11365 (_$$$axis = $$.axis) == null || _$$$axis.setOrient(); 11366 } 11367 11368 // hide possible reset zoom button 11369 // https://github.com/naver/billboard.js/issues/2201 11370 zoomResetBtn == null || zoomResetBtn.style("display", "none"); 11371 $$.scale.zoom = null; 11372 soft ? $$.redraw({ 11373 withTransform: !0, 11374 withUpdateXDomain: !0, 11375 withUpdateOrgXDomain: !0, 11376 withLegend: !0 11377 }) : $$.updateAndRedraw({ 11378 withLegend: !0, 11379 withTransition: !1, 11380 withTransitionForTransform: !1 11381 }); 11382 11383 // reset subchart selection & selection state 11384 if (!state.resizing && $$.brush) { 11385 $$.brush.getSelection().call($$.brush.move); 11386 $$.unselectRect(); 11387 } 11388 } else { 11389 $$.initToRender(!0); 11390 } 11391 }, 11392 /** 11393 * Reset the chart object and remove element and events completely. 11394 * @function destroy 11395 * @instance 11396 * @memberof Chart 11397 * @returns {null} 11398 * @example 11399 * chart.destroy(); 11400 */ 11401 destroy: function destroy() { 11402 var _this = this; 11403 const $$ = this.internal, 11404 _$$$$el = $$.$el, 11405 chart = _$$$$el.chart, 11406 style = _$$$$el.style, 11407 svg = _$$$$el.svg; 11408 if (notEmpty($$)) { 11409 $$.callPluginHook("$willDestroy"); 11410 $$.charts.splice($$.charts.indexOf(this), 1); 11411 11412 // detach events 11413 $$.unbindAllEvents(); 11414 11415 // clear timers && pending transition 11416 svg.select("*").interrupt(); 11417 $$.resizeFunction.clear(); 11418 win.removeEventListener("resize", $$.resizeFunction); 11419 chart.classed("bb", !1).style("position", null).selectChildren().remove(); 11420 11421 // remove <style> element added by boost.useCssRule option 11422 style && style.parentNode.removeChild(style); 11423 11424 // releasing own references 11425 Object.keys(this).forEach(function (key) { 11426 var _this2 = this; 11427 _newArrowCheck(this, _this); 11428 key === "internal" && Object.keys($$).forEach(function (k) { 11429 _newArrowCheck(this, _this2); 11430 $$[k] = null; 11431 }.bind(this)); 11432 this[key] = null; 11433 delete this[key]; 11434 }.bind(this)); 11435 11436 // release prototype chains 11437 for (const key in this) { 11438 this[key] = function () { 11439 _newArrowCheck(this, _this); 11440 }.bind(this); 11441 } 11442 } 11443 return null; 11444 }, 11445 /** 11446 * Get or set config option value. 11447 * - **NOTE** 11448 * - The option key name must be specified as the last level. 11449 * - when no argument is given, will return all specified generation options object only. (will exclude any other options not specified at the initialization) 11450 * @function config 11451 * @instance 11452 * @memberof Chart 11453 * @param {string} name The option key name. 11454 * @param {*} [value] The value accepted for indicated option. 11455 * @param {boolean} [redraw] Set to redraw with the new option changes. 11456 * - **NOTE:** Doesn't guarantee work in all circumstances. It can be applied for limited options only. 11457 * @returns {*} 11458 * @example 11459 * 11460 * // Getter 11461 * chart.config("gauge.max"); 11462 * 11463 * // Getter specified with top level key name will not work. 11464 * // The option key name must be specified as the last level. 11465 * // chart.config("gauge"); // will not work 11466 * 11467 * // without any arguments, it returns generation config object 11468 * chart.config(); // {data: { ... }, axis: { ... }, ...} 11469 *
11470 * // Setter 11471 * chart.config("gauge.max", 100); 11472 * 11473 * // Setter specified with top level key name will not work. 11474 * // The option key name must be specified as the last level. 11475 * // chart.config("gauge", {min: 10, max: 20}); // will not work 11476 * 11477 * // Setter & redraw with the new option 11478 * chart.config("gauge.max", 100, true); 11479 */ 11480 config: function (name, value, redraw) { 11481 const $$ = this.internal, 11482 config = $$.config, 11483 state = $$.state, 11484 key = name == null ? void 0 : name.replace(/\./g, "_"); 11485 let res; 11486 if (name && key in config) { 11487 if (isDefined(value)) { 11488 config[key] = value; 11489 res = value; 11490 redraw && this.flush(); 11491 } else { 11492 res = config[key]; 11493 } 11494 } else if (arguments.length === 0 || isEmpty(name)) { 11495 res = state.orgConfig; 11496 } 11497 return res; 11498 } 11499}); 11500;// CONCATENATED MODULE: ./src/Chart/api/color.ts 11501/** 11502 * Copyright (c) 2017 ~ present NAVER Corp. 11503 * billboard.js project is licensed under the MIT license 11504 */ 11505/* harmony default export */ var api_color = ({ 11506 /** 11507 * Get the color 11508 * @function color 11509 * @instance 11510 * @memberof Chart 11511 * @param {string} id id to get the color 11512 * @returns {string} 11513 * @example 11514 * chart.color("data1"); 11515 */ 11516 color: function color(id) { 11517 return this.internal.color(id); // more patterns 11518 } 11519}); 11520;// CONCATENATED MODULE: ./src/Chart/api/data.ts 11521 11522/** 11523 * Copyright (c) 2017 ~ present NAVER Corp. 11524 * billboard.js project is licensed under the MIT license 11525 */ 11526 11527 11528/** 11529 * Get data loaded in the chart. 11530 * @function data 11531 * @instance 11532 * @memberof Chart 11533 * @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. 11534 * @returns {Array} Data objects 11535 * @example 11536 * // Get only data1 data 11537 * chart.data("data1"); 11538 * // --> [{id: "data1", id_org: "data1", values: Array(6)}, ...] 11539 * 11540 * // Get data1 and data2 data 11541 * chart.data(["data1", "data2"]); 11542 * 11543 * // Get all data 11544 * chart.data(); 11545 */ 11546const api_data_data = function (targetIds) { 11547 var _this = this; 11548 const targets = this.internal.data.targets; 11549 if (!isUndefined(targetIds)) { 11550 const ids = isArray(targetIds) ? targetIds : [targetIds]; 11551 return targets.filter(function (t) { 11552 var _this2 = this; 11553 _newArrowCheck(this, _this); 11554 return ids.some(function (v) { 11555 _newArrowCheck(this, _this2); 11556 return v === t.id; 11557 }.bind(this)); 11558 }.bind(this)); 11559 } 11560 return targets; 11561}; 11562extend(api_data_data, { 11563 /** 11564 * Get data shown in the chart. 11565 * @function dataâ¤shown 11566 * @instance 11567 * @memberof Chart 11568 * @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. 11569 * @returns {Array} Data objects 11570 * @example 11571 * // Get shown data by filtering to include only data1 data 11572 * chart.data.shown("data1"); 11573 * // --> [{id: "data1", id_org: "data1", values: Array(6)}, ...] 11574 * 11575 * // Get shown data by filtering to include data1 and data2 data 11576 * chart.data.shown(["data1", "data2"]); 11577 * 11578 * // Get all shown data 11579 * chart.data.shown(); 11580 */ 11581 shown: function shown(targetIds) { 11582 return this.internal.filterTargetsToShow(this.data(targetIds)); 11583 }, 11584 /** 11585 * Get values of the data loaded in the chart. 11586 * @function dataâ¤values 11587 * @instance 11588 * @memberof Chart 11589 * @param {string|Array|null} targetIds This API returns the values of specified target. If this argument is not given, null will be retruned 11590 * @param {boolean} [flat=true] Get flatten values 11591 * @returns {Array} Data values 11592 * @example 11593 * // Get data1 values 11594 * chart.data.values("data1"); 11595 * // --> [10, 20, 30, 40] 11596 */ 11597 values: function (targetIds, flat) { 11598 var _this3 = this; 11599 if (flat === void 0) { 11600 flat = !0; 11601 } 11602 let values = null; 11603 if (targetIds) { 11604 const targets = this.data(targetIds); 11605 if (isArray(targets)) { 11606 values = []; 11607 targets.forEach(function (v) { 11608 var _this4 = this; 11609 _newArrowCheck(this, _this3); 11610 const dataValue = v.values.map(function (d) { 11611 _newArrowCheck(this, _this4); 11612 return d.value; 11613 }.bind(this)); 11614 flat ? values = values.concat(dataValue) : values.push(dataValue); 11615 }.bind(this)); 11616 } 11617 } 11618 return values; 11619 }, 11620 /** 11621 * Get and set names of the data loaded in the chart. 11622 * @function dataâ¤names 11623 * @instance 11624 * @memberof Chart 11625 * @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 [data.names](./Options.html#.data%25E2%2580%25A4names). 11626 * @returns {object} Corresponding names according its key value, if specified names values. 11627 * @example 11628 * // Get current names 11629 * chart.data.names(); 11630 * // --> {data1: "test1", data2: "test2"} 11631 * 11632 * // Update names 11633 * chart.data.names({ 11634 * data1: "New Name 1", 11635 * data2: "New Name 2" 11636 *}); 11637 */ 11638 names: function names(_names) { 11639 const $$ = this.internal; 11640 return $$.updateDataAttributes("names", _names); 11641 }, 11642 /** 11643 * Get and set colors of the data loaded in the chart. 11644 * @function dataâ¤colors 11645 * @instance 11646 * @memberof Chart 11647 * @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). 11648 * @returns {object} Corresponding data color value according its key value. 11649 * @example 11650 * // Get current colors 11651 * chart.data.colors(); 11652 * // --> {data1: "#00c73c", data2: "#fa7171"} 11653 * 11654 * // Update colors 11655 * chart.data.colors({ 11656 * data1: "#FFFFFF", 11657 * data2: "#000000" 11658 * }); 11659 */ 11660 colors: function colors(_colors) { 11661 return this.internal.updateDataAttributes("colors", _colors); 11662 }, 11663 /** 11664 * Get and set axes of the data loaded in the chart. 11665 * - **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 11666 * @function dataâ¤axes 11667 * @instance 11668 * @memberof Chart 11669 * @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 11670 * @returns {object} Corresponding axes value for data, if specified axes value. 11671 * @example 11672 * // Get current axes 11673 * chart.data.axes(); 11674 * // --> {data1: "y"} 11675 * 11676 * // Update axes 11677 * chart.data.axes({ 11678 * data1: "y", 11679 * data2: "y2" 11680 * }); 11681 */ 11682 axes: function axes(_axes) { 11683 return this.internal.updateDataAttributes("axes", _axes); 11684 }, 11685 /** 11686 * Get the minimum data value bound to the chart 11687 * @function dataâ¤min 11688 * @instance 11689 * @memberof Chart 11690 * @returns {Array} Data objects 11691 * @example 11692 * // Get current axes 11693 * chart.data.min(); 11694 * // --> [{x: 0, value: 30, id: "data1", index: 0}, ...] 11695 */ 11696 min: function min() { 11697 return this.internal.getMinMaxData().min; 11698 }, 11699 /** 11700 * Get the maximum data value bound to the chart 11701 * @function dataâ¤max 11702 * @instance 11703 * @memberof Chart 11704 * @returns {Array} Data objects 11705 * @example 11706 * // Get current axes 11707 * chart.data.max(); 11708 * // --> [{x: 3, value: 400, id: "data1", index: 3}, ...] 11709 */ 11710 max: function max() { 11711 return this.internal.getMinMaxData().max; 11712 } 11713}); 11714/* harmony default export */ var api_data = ({ 11715 data: api_data_data 11716}); 11717;// CONCATENATED MODULE: ./src/Chart/api/export.ts 11718 11719var export_this = undefined; 11720/** 11721 * Copyright (c) 2017 ~ present NAVER Corp. 11722 * billboard.js project is licensed under the MIT license 11723 */ 11724 11725 11726 11727/** 11728 * Encode to base64 11729 * @param {string} str string to be encoded 11730 * @returns {string} 11731 * @private
11732 * @see https://developer.mozilla.org/ko/docs/Web/API/WindowBase64/Base64_encoding_and_decoding 11733 */ 11734const b64EncodeUnicode = function (str) { 11735 var _this2 = this; 11736 _newArrowCheck(this, export_this); 11737 return win.btoa == null ? void 0 : win.btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p) { 11738 _newArrowCheck(this, _this2); 11739 return String.fromCharCode(+("0x" + p)); 11740 }.bind(this))); 11741}.bind(undefined); 11742 11743/** 11744 * Convert svg node to data url 11745 * @param {HTMLElement} node target node 11746 * @param {object} option object containing {width, height, preserveAspectRatio} 11747 * @param {object} orgSize object containing {width, height} 11748 * @returns {string} 11749 * @private 11750 */ 11751function nodeToSvgDataUrl(node, option, orgSize) { 11752 var _this3 = this; 11753 const _ref = option || orgSize, 11754 width = _ref.width, 11755 height = _ref.height, 11756 serializer = new XMLSerializer(), 11757 clone = node.cloneNode(!0), 11758 cssText = getCssRules(toArray(browser_doc.styleSheets)).filter(function (r) { 11759 _newArrowCheck(this, _this3); 11760 return r.cssText; 11761 }.bind(this)).map(function (r) { 11762 _newArrowCheck(this, _this3); 11763 return r.cssText; 11764 }.bind(this)); 11765 clone.setAttribute("xmlns", external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.namespaces.xhtml); 11766 11767 // remove padding & margin 11768 clone.style.margin = "0"; 11769 clone.style.padding = "0"; 11770 11771 // remove text nodes 11772 if (option.preserveFontStyle) { 11773 clone.querySelectorAll("text").forEach(function (t) { 11774 _newArrowCheck(this, _this3); 11775 t.innerHTML = ""; 11776 }.bind(this)); 11777 } 11778 const nodeXml = serializer.serializeToString(clone), 11779 style = browser_doc.createElement("style"); // escape css for XML 11780 style.appendChild(browser_doc.createTextNode(cssText.join("\n"))); 11781 const styleXml = serializer.serializeToString(style), 11782 dataStr = "<svg xmlns=\"" + external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.namespaces.svg + "\" width=\"" + width + "\" height=\"" + height + "\" \n\t\tviewBox=\"0 0 " + orgSize.width + " " + orgSize.height + "\" \n\t\tpreserveAspectRatio=\"" + ((option == null ? void 0 : option.preserveAspectRatio) === !1 ? "none" : "xMinYMid meet") + "\">\n\t\t\t<foreignObject width=\"100%\" height=\"100%\">\n\t\t\t\t" + styleXml + "\n\t\t\t\t" + nodeXml.replace(/(url\()[^#]+/g, "$1") + "\n\t\t\t</foreignObject></svg>"; // foreignObject not supported in IE11 and below 11783 // https://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx 11784 return "data:image/svg+xml;base64," + b64EncodeUnicode(dataStr); 11785} 11786 11787/** 11788 * Get coordinate of the element 11789 * @param {SVGElement} elem Target element 11790 * @param {object} svgOffset SVG offset 11791 * @returns {object} 11792 * @private 11793 */ 11794function getCoords(elem, svgOffset) { 11795 const top = svgOffset.top, 11796 left = svgOffset.left, 11797 _elem$getBBox = elem.getBBox(), 11798 x = _elem$getBBox.x, 11799 y = _elem$getBBox.y, 11800 _elem$getScreenCTM = elem.getScreenCTM(), 11801 a = _elem$getScreenCTM.a, 11802 b = _elem$getScreenCTM.b, 11803 c = _elem$getScreenCTM.c, 11804 d = _elem$getScreenCTM.d, 11805 e = _elem$getScreenCTM.e, 11806 f = _elem$getScreenCTM.f, 11807 _elem$getBoundingClie = elem.getBoundingClientRect(), 11808 width = _elem$getBoundingClie.width, 11809 height = _elem$getBoundingClie.height; 11810 return { 11811 x: a * x + c * y + e - left, 11812 y: b * x + d * y + f - top + (height - Math.round(height / 4)), 11813 width: width, 11814 height: height 11815 }; 11816} 11817 11818/** 11819 * Get text glyph 11820 * @param {SVGTextElement} svg Target svg node 11821 * @returns {Array} 11822 * @private 11823 */ 11824function getGlyph(svg) { 11825 var _this4 = this; 11826 const _svg$getBoundingClien = svg.getBoundingClientRect(), 11827 left = _svg$getBoundingClien.left, 11828 top = _svg$getBoundingClien.top, 11829 filterFn = function (t) { 11830 _newArrowCheck(this, _this4); 11831 return t.textContent || t.childElementCount; 11832 }.bind(this), 11833 glyph = [];
11834 toArray(svg.querySelectorAll("text")).filter(filterFn).forEach(function (t) { 11835 var _this5 = this; 11836 _newArrowCheck(this, _this4); 11837 // eslint-disable-line 11838 const getStyleFn = function (ts) { 11839 var _ref2; 11840 _newArrowCheck(this, _this5); 11841 const _window$getComputedSt = win.getComputedStyle(ts), 11842 fill = _window$getComputedSt.fill, 11843 fontFamily = _window$getComputedSt.fontFamily, 11844 fontSize = _window$getComputedSt.fontSize, 11845 textAnchor = _window$getComputedSt.textAnchor, 11846 transform = _window$getComputedSt.transform, 11847 _getCoords = getCoords(ts, { 11848 left: left, 11849 top: top 11850 }), 11851 x = _getCoords.x, 11852 y = _getCoords.y, 11853 width = _getCoords.width, 11854 height = _getCoords.height; 11855 return _ref2 = {}, _ref2[ts.textContent] = { 11856 x: x, 11857 y: y, 11858 width: width, 11859 height: height, 11860 fill: fill, 11861 fontFamily: fontFamily, 11862 fontSize: fontSize, 11863 textAnchor: textAnchor, 11864 transform: transform 11865 }, _ref2; 11866 }.bind(this); 11867 if (t.childElementCount > 1) { 11868 toArray(t.querySelectorAll("tspan")).filter(filterFn).forEac
11868h(function (ts) { 11869 _newArrowCheck(this, _this5); 11870 glyph.push(getStyleFn(ts)); 11871 }.bind(this)); 11872 return []; 11873 } else { 11874 glyph.push(getStyleFn(t)); 11875 } 11876 }.bind(this)); 11877 return glyph; 11878} 11879 11880/** 11881 * Render text glyph 11882 * - NOTE: Called when the 'preserveFontStyle' option is true 11883 * @param {CanvasRenderingContext2D} ctx Canvas context 11884 * @param {Array} glyph Text glyph array 11885 * @private 11886 */ 11887function renderText(ctx, glyph) { 11888 var _this6 = this; 11889 glyph.forEach(function (g) { 11890 var _this7 = this; 11891 _newArrowCheck(this, _this6); 11892 Object.keys(g).forEach(function (key) { 11893 var _this8 = this; 11894 _newArrowCheck(this, _this7); 11895 const _g$key = g[key], 11896 x = _g$key.x, 11897 y = _g$key.y, 11898 width = _g$key.width, 11899 height = _g$key.height, 11900 fill = _g$key.fill, 11901 fontFamily = _g$key.fontFamily, 11902 fontSize = _g$key.fontSize, 11903 transform = _g$key.transform; 11904 ctx.save(); 11905 ctx.font = fontSize + " " + fontFamily; 11906 ctx.fillStyle = fill; 11907 if (transform === "none") { 11908 ctx.fillText(key, x, y); 11909 } else { 11910 const args = transform.replace(/(matrix|\(|\))/g, "").split(","); 11911 if (args.splice(4).every(function (v) { 11912 _newArrowCheck(this, _this8); 11913 return +v === 0; 11914 }.bind(this))) { 11915 args.push(x + width - width / 4); 11916 args.push(y - height + height / 3); 11917 } else { 11918 args.push(x); 11919 args.push(y); 11920 } 11921 ctx.transform.apply(ctx, args); 11922 ctx.fillText(key, 0, 0); 11923 } 11924 ctx.restore(); 11925 }.bind(this)); 11926 }.bind(this)); 11927} 11928/* harmony default export */ var api_export = ({ 11929 /** 11930 * Export chart as an image. 11931 * - **NOTE:** 11932 * - 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 11933 * - Every style applied to the chart & the basic CSS file(ex. billboard.css) should be at same domain as API call context to get correct styled export image. 11934 * @function export 11935 * @instance 11936 * @memberof Chart 11937 * @param {object} option Export option 11938 * @param {string} [option.mimeType="image/png"] The desired output image format. (ex. 'image/png' for png, 'image/jpeg' for jpeg format) 11939 * @param {number} [option.width={currentWidth}] width 11940 * @param {number} [option.height={currentHeigth}] height 11941 * @param {boolean} [option.preserveAspectRatio=true] Preserve aspect ratio on given size 11942 * @param {boolean} [option.preserveFontStyle=false] Preserve font style(font-family).<br> 11943 * **NOTE:** 11944 * - This option is useful when outlink web font style's `font-family` are applied to chart's text element. 11945 * - Text element's position(especially "transformed") can't be preserved correctly according the page's layout condition. 11946 * - If need to preserve accurate text position, embed the web font data within to the page and set `preserveFontStyle=false`. 11947 * - Checkout the embed example: <a href="https://stackblitz.com/edit/zfbya9-8nf9nn?file=index.html">https://stackblitz.com/edit/zfbya9-8nf9nn?file=index.html</a> 11948 * @param {Function} [callback] The callback to be invoked when export is ready. 11949 * @returns {string} dataURI 11950 * @example 11951 * chart.export(); 11952 * // --> "data:image/svg+xml;base64,PHN..." 11953 * 11954 * // Initialize the download automatically 11955 * chart.export({mimeType: "image/png"}, dataUrl => { 11956 * const link = document.createElement("a"); 11957 * 11958 * link.download = `${Date.now()}.png`; 11959 * link.href = dataUrl; 11960 * link.innerHTML = "Download chart as image"; 11961 * 11962 * document.body.appendChild(link); 11963 * }); 11964 * 11965 * // Resize the exported image 11966 * chart.export( 11967 * { 11968 * width: 800, 11969 * height: 600, 11970 * preserveAspectRatio: false, 11971 * preserveFontStyle: false, 11972 * mimeType: "image/png" 11973 * }, 11974 * dataUrl => { ... } 11975 * ); 11976 */ 11977 export: function _export(option, callback) { 11978 var _this9 = this; 11979 const $$ = this.internal, 11980 state = $$.state, 11981 _$$$$el = $$.$el, 11982 chart = _$$$$el.chart, 11983 svg = _$$$$el.svg, 11984 _state$current = state.current, 11985 width = _state$current.width, 11986 height = _state$current.height, 11987 opt = mergeObj({ 11988 width: width, 11989 height: height, 11990 preserveAspectRatio: !0, 11991 preserveFontStyle: !1, 11992 mimeType: "image/png" 11993 }, option), 11994 svgDataUrl = nodeToSvgDataUrl(chart.node(), opt, { 11995 width: width, 11996 height: height 11997 }), 11998 glyph = opt.preserveFontStyle ? getGlyph(svg.node()) : []; 11999 if (callback && isFunction(callback)) { 12000 const img = new Image(); 12001 img.crossOrigin = "Anonymous"; 12002 img.onload = function () { 12003 _newArrowCheck(this, _this9); 12004 const canvas = browser_doc.createElement("canvas"), 12005 ctx = canvas.getContext("2d"); 12006 canvas.width = opt.width || width; 12007 canvas.height = opt.height || height; 12008 ctx.drawImage(img, 0, 0); 12009 if (glyph.length) { 12010 renderText(ctx, glyph); 12011 12012 // release glyph array 12013 glyph.length = 0; 12014 } 12015 callback.bind(this)(canvas.toDataURL(opt.mimeType)); 12016 }.bind(this); 12017 img.src = svgDataUrl; 12018 } 12019 return svgDataUrl; 12020 } 12021}); 12022;// CONCATENATED MODULE: ./src/Chart/api/focus.ts 12023 12024/** 12025 * Copyright (c) 2017 ~ present NAVER Corp. 12026 * billboard.js project is licensed under the MIT license 12027 */ 12028 12029 12030/* harmony default export */ var api_focus = ({ 12031 /** 12032 * This API highlights specified targets and fade out the others.<br><br> 12033 * 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. 12034 * @function focus 12035 * @instance 12036 * @memberof Chart 12037 * @param {string|Array} targetIdsValue Target ids to be highlighted. 12038 * @example 12039 * // data1 will be highlighted and the others will be faded out 12040 * chart.focus("data1"); 12041 * 12042 * // data1 and data2 will be highlighted and the others will be faded out 12043 * chart.focus(["data1", "data2"]); 12044 * 12045 * // all targets will be highlighted 12046 * chart.focus(); 12047 */ 12048 focus: function focus(targetIdsValue) { 12049 var _this = this; 12050 const $$ = this.internal, 12051 state = $$.state, 12052 targetIds = $$.mapToTargetIds(targetIdsValue), 12053 candidates = $$.$el.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))); 12054 this.revert(); 12055 this.defocus(); 12056 candidates.classed($FOCUS.focused, !0).classed($FOCUS.defocused, !1); 12057 if ($$.hasArcType() && !state.hasRadar) { 12058 $$.expandArc(targetIds); 12059 $$.hasType("gauge") && $$.markOverlapped(targetIdsValue, $$, "." + $GAUGE.gaugeValue); 12060 } 12061 $$.toggleFocusLegend(targetIds, !0); 12062 state.focusedTargetIds = targetIds; 12063 state.defocusedTargetIds = state.defocusedTargetIds.filter(function (id) { 12064 _newArrowCheck(this, _this); 12065 return targetIds.indexOf(id) < 0; 12066 }.bind(this)); 12067 }, 12068 /** 12069 * This API fades out specified targets and reverts the others.<br><br> 12070 * 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. 12071 * @function defocus 12072 * @instance 12073 * @memberof Chart 12074 * @param {string|Array} targetIdsValue Target ids to be faded out. 12075 * @example 12076 * // data1 will be faded out and the others will be reverted. 12077 * chart.defocus("data1"); 12078 * 12079 * // data1 and data2 will be faded out and the others will be reverted. 12080 * chart.defocus(["data1", "data2"]); 12081 * 12082 * // all targets will be faded out. 12083 * chart.defocus(); 12084 */ 12085 defocus: function defocus(targetIdsValue) { 12086 var _this2 = this; 12087 const $$ = this.internal, 12088 state = $$.state, 12089 targetIds = $$.mapToTargetIds(targetIdsValue), 12090 candidates = $$.$el.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))); 12091 candidates.classed($FOCUS.focused, !1).classed($FOCUS.defocused, !0); 12092 if ($$.hasArcType(null, ["polar"])) { 12093 $$.unexpandArc(targetIds);
12094 $$.hasType("gauge") && $$.undoMarkOverlapped($$, "." + $GAUGE.gaugeValue); 12095 } 12096 $$.toggleFocusLegend(targetIds, !1); 12097 state.focusedTargetIds = state.focusedTargetIds.filter(function (id) { 12098 _newArrowCheck(this, _this2); 12099 return targetIds.indexOf(id) < 0; 12100 }.bind(this)); 12101 state.defocusedTargetIds = targetIds; 12102 }, 12103 /** 12104 * Revert focused or defocused state to initial state.<br><br> 12105 * 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. 12106 * @function revert 12107 * @instance 12108 * @memberof Chart 12109 * @param {string|Array} targetIdsValue Target ids to be reverted 12110 * @example 12111 * // 'data1' will be reverted. 12112 * chart.revert("data1"); 12113 * 12114 * // 'data1' and 'data2' will be reverted. 12115 * chart.revert(["data1", "data2"]); 12116 * 12117 * // all targets will be reverted. 12118 * chart.revert(); 12119 */ 12120 revert: function revert(targetIdsValue) { 12121 const $$ = this.internal, 12122 config = $$.config, 12123 state = $$.state, 12124 $el = $$.$el, 12125 targetIds = $$.mapToTargetIds(targetIdsValue), 12126 candidates = $el.svg.selectAll($$.selectorTargets(targetIds)); 12127 // should be for all targets 12128 12129 candidates.classed($FOCUS.focused, !1).classed($FOCUS.defocused, !1); 12130 $$.hasArcType(null, ["polar"]) && $$.unexpandArc(targetIds); 12131 if (config.legend_show) { 12132 $$.showLegend(targetIds.filter($$.isLegendToShow.bind($$))); 12133 $el.legend.selectAll($$.selectorLegends(targetIds)).filter(function () { 12134 return (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($FOCUS.legendItemFocused); 12135 }).classed($FOCUS.legendItemFocused, !1); 12136 } 12137 state.focusedTargetIds = []; 12138 state.defocusedTargetIds = []; 12139 } 12140}); 12141;// CONCATENATED MODULE: ./src/Chart/api/legend.ts 12142/** 12143 * Copyright (c) 2017 ~ present NAVER Corp. 12144 * billboard.js project is licensed under the MIT license 12145 */ 12146/** 12147 * Define legend 12148 * @ignore 12149 */ 12150const legend_legend = { 12151 /** 12152 * Show legend for each target. 12153 * - **NOTE:** Legend APIs aren't supported for `treemap` type. 12154 * @function legendâ¤show 12155 * @instance 12156 * @memberof Chart 12157 * @param {string|Array} targetIds 12158 * - If targetIds is given, specified target's legend will be shown. 12159 * - If only one target is the candidate, String can be passed. 12160 * - If no argument is given, all of target's legend will be shown. 12161 * @example 12162 * // Show legend for data1. 12163 * chart.legend.show("data1"); 12164 * 12165 * // Show legend for data1 and data2. 12166 * chart.legend.show(["data1", "data2"]); 12167 * 12168 * // Show all legend. 12169 * chart.legend.show(); 12170 */ 12171 show: function show(targetIds) { 12172 const $$ = this.internal; 12173 $$.showLegend($$.mapToTargetIds(targetIds)); 12174 $$.updateAndRedraw({ 12175 withLegend: !0 12176 }); 12177 }, 12178 /** 12179 * Hide legend for each target. 12180 * @function legendâ¤hide 12181 * @instance 12182 * @memberof Chart 12183 * @param {string|Array} targetIds 12184 * - If targetIds is given, specified target's legend will be hidden. 12185 * - If only one target is the candidate, String can be passed. 12186 * - If no argument is given, all of target's legend will be hidden. 12187 * @example 12188 * // Hide legend for data1. 12189 * chart.legend.hide("data1"); 12190 * 12191 * // Hide legend for data1 and data2. 12192 * chart.legend.hide(["data1", "data2"]); 12193 * 12194 * // Hide all legend. 12195 * chart.legend.hide(); 12196 */ 12197 hide: function hide(targetIds) { 12198 const $$ = this.internal; 12199 $$.hideLegend($$.mapToTargetIds(targetIds)); 12200 $$.updateAndRedraw({ 12201 withLegend: !0 12202 }); 12203 } 12204}; 12205/* harmony default export */ var api_legend = ({ 12206 legend: legend_legend 12207}); 12208;// CONCATENATED MODULE: ./src/Chart/api/load.ts 12209 12210/** 12211 * Copyright (c) 2017 ~ present NAVER Corp. 12212 * billboard.js project is licensed under the MIT license 12213 */ 12214 12215 12216 12217/* harmony default export */ var api_load = ({ 12218 /** 12219 * Load data to the chart.<br><br> 12220 * 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. 12221 * - <b>Note:</b> 12222 * - unload should be used if some data needs to be unloaded simultaneously. 12223 * 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> 12224 * - done will be called after data loaded, but it's not after rendering. 12225 * It's because rendering will finish after some transition and there is some time lag between loading and rendering 12226 * @function load 12227 * @instance 12228 * @memberof Chart 12229 * @param {object} args The object can consist with following members:<br> 12230 * 12231 * | Key | Type | Description | 12232 * | --- | --- | --- | 12233 * | columns | Array | The `columns` 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 | 12234 * | json | Array | The `json` 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 | 12235 * | rows | Array | The `rows` 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 | 12236 * | url | string | The data from `url` will be loaded. If data that has the same target id is given, the chart will be updated. Otherwise, new target will be added | 12237 * | | | | 12238 * | append | boolean | Load data appending it to the current dataseries.<br>If the existing chart has`x` value, should provide with corresponding `x` value for newly loaded data. | 12239 * | axes | Object | The axes specified by data.axes will be updated. axes must be Object that has target id as keys. | 12240 * | categories | Array | The categories specified by axis.x.categories or data.x will be updated. categories must be Array. | 12241 * | classes | Object | The classes specified by data.classes will be updated. classes must be Object that has target id as keys. | 12242 * | colors | Object | The colors specified by data.colors will be updated. colors must be Object that has target id as keys. | 12243 * | data | Obejct | Data objects to be loaded. Checkout the example. | 12244 * | done | Function | The specified function will be called after data loaded.| 12245 * | headers | string | Set request header if loading via `data.url`.<br>@see [dataâ¤headers](Options.html#.data%25E2%2580%25A4headers) | 12246 * | keys | Object | 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) |
12247 * | mimeType | string | Set 'json' if loading JSON via url.<br>@see [dataâ¤mimeType](Options.html#.data%25E2%2580%25A4mimeType) | 12248 * | names | Object | Same as data.names() | 12249 * | resizeAfter | boolean | Resize after the load. Default value is `false`.<br>- This option won't call `onresize` neither `onresized`.<br>- When set to 'true', will call `.flush(true)` at the end of load. | 12250 * | type | string | The type of targets will be updated. | 12251 * | types | Object | The types of targets will be updated. | 12252 * | unload | Array | 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. | 12253 * | xs | string | Same as data.xs option | 12254 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataFromURL) 12255 * @example 12256 * // Load data1 and unload data2 and data3 12257 * chart.load({ 12258 * columns: [ 12259 * ["data1", 100, 200, 150, ...], 12260 * ... 12261 * ], 12262 * unload: ["data2", "data3"], 12263 * url: "...", 12264 * done: function() { ... } 12265 * resizeAfter: true // will resize after load 12266 * }); 12267 * @example 12268 * const chart = bb.generate({ 12269 * data: { 12270 * columns: [ 12271 * ["data1", 20, 30, 40] 12272 * ] 12273 * } 12274 * }); 12275 * 12276 * chart.load({ 12277 * columns: [ 12278 * // with 'append' option, the 'data1' will have `[20,30,40,50,60]`. 12279 * ["data1", 50, 60] 12280 * ], 12281 * append: true 12282 * }); 12283 * @example 12284 * const chart = bb.generate({ 12285 * data: { 12286 * x: "x", 12287 * xFormat: "%Y-%m-%dT%H:%M:%S", 12288 * columns: [ 12289 * ["x", "2021-01-03T03:00:00", "2021-01-04T12:00:00", "2021-01-05T21:00:00"], 12290 * ["data1", 36, 30, 24] 12291 * ] 12292 * }, 12293 * axis: { 12294 * x: { 12295 * type: "timeseries" 12296 * } 12297 * } 12298 * }; 12299 * 12300 * chart.load({ 12301 * columns: [ 12302 * // when existing chart has `x` value, should provide correponding 'x' value. 12303 * // with 'append' option, the 'data1' will have `[36,30,24,37]`. 12304 * ["x", "2021-02-01T08:00:00"], 12305 * ["data1", 37] 12306 * ], 12307 * append: true 12308 * }); 12309 * @example 12310 * // myAPI.json 12311 * // { 12312 * // "data1": [220, 240, 270, 250, 280], 12313 * // "data2": [180, 150, 300, 70, 120] 12314 * // } 12315 * 12316 * chart.load({ 12317 * url: './data/myAPI.json', 12318 * mimeType: "json", 12319 * 12320 * // set request header if is needed 12321 * headers: { 12322 * "Content-Type": "text/json" 12323 * } 12324 * }); 12325 * @example 12326 * chart.load({ 12327 * data: [ 12328 * // equivalent as: columns: [["data1", 30, 200, 100]] 12329 * {"data1": 30}, {"data1": 200}, {"data1": 100} 12330 * 12331 * // or 12332 * // equivalent as: columns: [["data1", 10, 20], ["data2", 13, 30]] 12333 * // {"data1": 10, "data2": 13}, {"data1": 20, "data2": 30}} 12334 * ] 12335 * }); 12336 * @example 12337 * chart.load({ 12338 * json: [ 12339 * {name: "www.site1.com", upload: 800, download: 500, total: 400}, 12340 * ], 12341 * keys: { 12342 * x: "name", 12343 * value: ["upload", "download"] 12344 * } 12345 * }); 12346 * @example 12347 * chart.load({ 12348 * json: { 12349 * data1:[30, 20, 50, 40, 60, 50], 12350 * data2:[200, 130, 90, 240, 130, 220], 12351 * } 12352 * }); 12353 */ 12354 load: function load(args) { 12355 var _this = this; 12356 const $$ = this.internal, 12357 config = $$.config; 12358 // update xs if specified 12359 args.xs && $$.addXs(args.xs); 12360 12361 // update names if exists 12362 "names" in args && this.data.names(args.names); 12363 12364 // update classes if exists 12365 "classes" in args && Object.keys(args.classes).forEach(function (id) { 12366 _newArrowCheck(this, _this); 12367 config.data_classes[id] = args.classes[id]; 12368 }.bind(this)); 12369 12370 // update categories if exists 12371 if ("categories" in args && $$.axis.isCategorized()) { 12372 config.axis_x_categories = args.categories; 12373 } 12374 12375 // update axes if exists 12376 "axes" in args && Object.keys(args.axes).forEach(function (id) { 12377 _newArrowCheck(this, _this); 12378 config.data_axes[id] = args.axes[id]; 12379 }.bind(this)); 12380 12381 // update colors if exists
12382 "colors" in args && Object.keys(args.colors).forEach(function (id) { 12383 _newArrowCheck(this, _this); 12384 config.data_colors[id] = args.colors[id]; 12385 }.bind(this)); 12386 12387 // unload if needed 12388 if ("unload" in args && args.unload !== !1) { 12389 // TODO: do not unload if target will load (included in url/rows/columns) 12390 $$.unload($$.mapToTargetIds(args.unload === !0 ? null : args.unload), function () { 12391 var _this2 = this; 12392 _newArrowCheck(this, _this); 12393 // to mitigate improper rendering for multiple consecutive calls 12394 // https://github.com/naver/billboard.js/issues/2121 12395 requestIdleCallback(function () { 12396 _newArrowCheck(this, _this2); 12397 return $$.loadFromArgs(args); 12398 }.bind(this)); 12399 }.bind(this)); 12400 } else { 12401 $$.loadFromArgs(args); 12402 } 12403 }, 12404 /** 12405 * Unload data to the chart.<br><br> 12406 * 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. 12407 * - <b>Note:</b> 12408 * 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> 12409 * `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. 12410 * @function unload 12411 * @instance 12412 * @memberof Chart 12413 * @param {object} argsValue 12414 * | key | Type | Description | 12415 * | --- | --- | --- | 12416 * | ids | String | Array | Target id data to be unloaded. If not given, all data will be unloaded. | 12417 * | done | Fuction | Callback after data is unloaded. | 12418 * | resizeAfter | boolean | Resize after the unload. Default value is `false`.<br>- This option won't call `onresize` neither `onresized`.<br>- When set to 'true', will call `.flush(true)` at the end of unload. | 12419 * @example 12420 * // Unload data2 and data3 12421 * chart.unload({ 12422 * ids: ["data2", "data3"], 12423 * done: function() { 12424 * // called after the unloaded 12425 * }, 12426 * resizeAfter: true // will resize after unload 12427 * }); 12428 */ 12429 unload: function unload(argsValue) { 12430 var _this3 = this; 12431 const $$ = this.internal; 12432 let args = argsValue || {}; 12433 12434 // hide possible tooltip display when data is completely unloaded 12435 isEmpty(args) && this.tooltip.hide(); 12436 if (isArray(args)) { 12437 args = { 12438 ids: args 12439 }; 12440 } else if (isString(args)) { 12441 args = { 12442 ids: [args] 12443 }; 12444 } 12445 const ids = $$.mapToTargetIds(args.ids); 12446 $$.unload(ids, function () { 12447 _newArrowCheck(this, _this3); 12448 $$.redraw({ 12449 withUpdateOrgXDomain: !0, 12450 withUpdateXDomain: !0, 12451 withLegend: !0 12452 }); 12453 $$.cache.remove(ids); 12454 callDone.call($$, args.done, args.resizeAfter); 12455 }.bind(this)); 12456 } 12457}); 12458;// CONCATENATED MODULE: ./src/Chart/api/show.ts 12459 12460/** 12461 * Copyright (c) 2017 ~ present NAVER Corp. 12462 * billboard.js project is licensed under the MIT license 12463 */ 12464 12465 12466/** 12467 * Show/Hide data series 12468 * @param {boolean} show Show or hide 12469 * @param {Array} targetIdsValue Target id values 12470 * @param {object} options Options 12471 * @private 12472 */ 12473function showHide(show, targetIdsValue, options) { 12474 var _this = this; 12475 const $$ = this.internal, 12476 targetIds = $$.mapToTargetIds(targetIdsValue), 12477 hiddenIds = $$.state.hiddenTargetIds.map(function (v) { 12478 _newArrowCheck(this, _this); 12479 return targetIds.indexOf(v) > -1 && v; 12480 }.bind(this)).filter(Boolean); 12481 $$.state.toggling = !0; 12482 $$[(show ? "remove" : "add") + "HiddenTargetIds"](targetIds); 12483 const targets = $$.$el.svg.selectAll($$.selectorTargets(targetIds)), 12484 opacity = show ? null : "0"; 12485 if (show && hiddenIds.length) { 12486 targets.style("display", null); 12487 callFn($$.config.data_onshown, this, hiddenIds); 12488 } 12489 $$.$T(targets).style("opacity", opacity, "important").call(endall, function () { 12490 _newArrowCheck(this, _this); 12491 // https://github.com/naver/billboard.js/issues/1758 12492 if (!show && hiddenIds.length === 0) { 12493 targets.style("display", "none"); 12494 callFn($$.config.data_onhidden, this, targetIds); 12495 } 12496 targets.style("opacity", opacity); 12497 }.bind(this)); 12498 options.withLegend && $$[(show ? "show" : "hide") + "Legend"](targetIds); 12499 $$.redraw({ 12500 withUpdateOrgXDomain: !0, 12501 withUpdateXDomain: !0, 12502 withLegend: !0 12503 }); 12504 $$.state.toggling = !1; 12505} 12506/* harmony default export */ var show = ({ 12507 /** 12508 * Show data series on chart 12509 * @function show 12510 * @instance 12511 * @memberof Chart 12512 * @param {string|Array} [targetIdsValue] The target id value. 12513 * @param {object} [options] The object can consist with following members:<br> 12514 * 12515 * | Key | Type | default | Description | 12516 * | --- | --- | --- | --- | 12517 * | withLegend | boolean | false | whether or not display legend | 12518 * 12519 * @example 12520 * // show 'data1' 12521 * chart.show("data1"); 12522 * 12523 * // show 'data1' and 'data3' 12524 * chart.show(["data1", "data3"]); 12525 */ 12526 show: function show(targetIdsValue, options) { 12527 if (options === void 0) { 12528 options = {}; 12529 } 12530 showHide.call(this, !0, targetIdsValue, options); 12531 }, 12532 /** 12533 * Hide data series from chart 12534 * @function hide 12535 * @instance 12536 * @memberof Chart 12537 * @param {string|Array} [targetIdsValue] The target id value. 12538 * @param {object} [options] The object can consist with following members:<br> 12539 * 12540 * | Key | Type | default | Description | 12541 * | --- | --- | --- | --- | 12542 * | withLegend | boolean | false | whether or not display legend | 12543 * 12544 * @example 12545 * // hide 'data1' 12546 * chart.hide("data1"); 12547 * 12548 * // hide 'data1' and 'data3' 12549 * chart.hide(["data1", "data3"]); 12550 */ 12551 hide: function hide(targetIdsValue, options) { 12552 if (options === void 0) { 12553 options = {}; 12554 } 12555 showHide.call(this, !1, targetIdsValue, options); 12556 }, 12557 /** 12558 * Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa. 12559 * @function toggle 12560 * @instance 12561 * @memberof Chart 12562 * @param {string|Array} [targetIds] The target id value. 12563 * @param {object} [options] The object can consist with following members:<br> 12564 * 12565 * | Key | Type | default | Description | 12566 * | --- | --- | --- | --- | 12567 * | withLegend | boolean | false | whether or not display legend | 12568 * 12569 * @example 12570 * // toggle 'data1' 12571 * chart.toggle("data1"); 12572 * 12573 * // toggle 'data1' and 'data3' 12574 * chart.toggle(["data1", "data3"]); 12575 */ 12576 toggle: function toggle(targetIds, options) { 12577 var _this2 = this; 12578 if (options === void 0) { 12579 options = {}; 12580 } 12581 const $$ = this.internal, 12582 targets = { 12583 show: [], 12584 hide: [] 12585 }; 12586 // sort show & hide target ids
12587 $$.mapToTargetIds(targetIds).forEach(function (id) { 12588 _newArrowCheck(this, _this2); 12589 return targets[$$.isTargetToShow(id) ? "hide" : "show"].push(id); 12590 }.bind(this)); 12591 12592 // perform show & hide task separately 12593 // https://github.com/naver/billboard.js/issues/454 12594 targets.show.length && this.show(targets.show, options); 12595 targets.hide.length && setTimeout(function () { 12596 _newArrowCheck(this, _this2); 12597 return this.hide(targets.hide, options); 12598 }.bind(this), 0); 12599 } 12600}); 12601;// CONCATENATED MODULE: ./src/Chart/api/tooltip.ts 12602 12603/** 12604 * Copyright (c) 2017 ~ present NAVER Corp. 12605 * billboard.js project is licensed under the MIT license 12606 */ 12607 12608 12609/** 12610 * Define tooltip 12611 * @ignore 12612 */ 12613const tooltip_tooltip = { 12614 /** 12615 * Show tooltip 12616 * @function tooltipâ¤show 12617 * @instance 12618 * @memberof Chart 12619 * @param {object} args The object can consist with following members:<br> 12620 * 12621 * | Key | Type | Description | 12622 * | --- | --- | --- | 12623 * | index | Number | Determine focus by index | 12624 * | x | Number | Date | Determine focus by x Axis index | 12625 * | 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]` | 12626 * | 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 | 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. | 12627 * 12628 * @example 12629 * // show the 2nd x Axis coordinate tooltip 12630 * // for Arc(gauge, donut & pie) and radar type, approch showing tooltip by using "index" number. 12631 * chart.tooltip.show({ 12632 * index: 1 12633 * }); 12634 * 12635 * // show tooltip for the 3rd x Axis in x:50 and y:100 coordinate of '.bb-event-rect' of the x Axis. 12636 * chart.tooltip.show({ 12637 * x: 2, 12638 * mouse: [50, 100] 12639 * }); 12640 * 12641 * // show tooltip for timeseries x axis 12642 * chart.tooltip.show({ 12643 * x: new Date("2018-01-02 00:00") 12644 * }); 12645 * 12646 * // treemap type can be shown by using "id" only. 12647 * chart.tooltip.show({ 12648 * data: { 12649 * id: "data1" // data id 12650 * } 12651 * }); 12652 * 12653 * // for Arc types, specify 'id' or 'index' 12654 * chart.tooltip.show({ data: { id: "data2" }}); 12655 * chart.tooltip.show({ data: { index: 2 }}); 12656 * 12657 * // when data.xs is used 12658 * chart.tooltip.show({ 12659 * data: { 12660 * x: 3, // x Axis value 12661 * id: "data1", // data id 12662 * value: 500 // data value 12663 * } 12664 * }); 12665 * 12666 * // when data.xs isn't used, but tooltip.grouped=false is set 12667 * chart.tooltip.show({ 12668 * data: { 12669 * index: 3, // or 'x' key value 12670 * id: "data1", // data id 12671 * value: 500 // data value 12672 * } 12673 * }); 12674 */ 12675 show: function show(args) { 12676 var _this = this; 12677 const $$ = this.internal, 12678 $el = $$.$el, 12679 config = $$.config, 12680 _$$$state = $$.state, 12681 eventReceiver = _$$$state.eventReceiver, 12682 hasTreemap = _$$$state.hasTreemap, 12683 inputType = _$$$state.inputType; 12684 let index, mouse; 12685 // determine mouse position on the chart 12686 if (args.mouse) { 12687 mouse = args.mouse; 12688 } 12689 12690 // determine focus data 12691 if (args.data) { 12692 var _$$$getYScaleById; 12693 const data = args.data, 12694 y = (_$$$getYScaleById = $$.getYScaleById(data.id)) == null ? void 0 : _$$$getYScaleById(data.value); 12695 if (hasTreemap && data.id) { 12696 eventReceiver.rect = $el.main.select("" + $$.selectorTarget(data.id, undefined, "rect")); 12697 } else if ($$.isMultipleX()) { 12698 // if multiple xs, target point will be determined by mouse 12699 mouse = [$$.xx(data), y]; 12700 } else { 12701 var _data$index, _$$$getArcElementById; 12702 if (!config.tooltip_grouped) { 12703 mouse = [0, y]; 12704 } 12705 index = (_data$index = data.index) != null ? _data$index : $$.hasArcType() && data.id ? (_$$$getArcElementById = $$.getArcElementByIdOrIndex(data.id)) == null ? void 0 : _$$$getArcElementById.datum(
12705).index : $$.getIndexByX(data.x); 12706 } 12707 } else if (isDefined(args.x)) { 12708 index = $$.getIndexByX(args.x); 12709 } else if (isDefined(args.index)) { 12710 index = args.index; 12711 } 12712 (inputType === "mouse" ? ["mouseover", "mousemove"] : ["touchstart"]).forEach(function (eventName) { 12713 _newArrowCheck(this, _this); 12714 $$.dispatchEvent(eventName, index, mouse); 12715 }.bind(this)); 12716 }, 12717 /** 12718 * Hide tooltip 12719 * @function tooltipâ¤hide 12720 * @instance 12721 * @memberof Chart 12722 */ 12723 hide: function hide() { 12724 var _this2 = this; 12725 const $$ = this.internal, 12726 inputType = $$.state.inputType, 12727 tooltip = $$.$el.tooltip, 12728 data = tooltip == null ? void 0 : tooltip.datum(); 12729 if (data) { 12730 const index = JSON.parse(data.current)[0].index; 12731 12732 // make to finalize, possible pending event flow set from '.tooltip.show()' call 12733 (inputType === "mouse" ? ["mouseout"] : ["touchend"]).forEach(function (eventName) { 12734 _newArrowCheck(this, _this2); 12735 $$.dispatchEvent(eventName, index); 12736 }.bind(this)); 12737 } 12738 12739 // reset last touch point index 12740 inputType === "touch" && $$.callOverOutForTouch(); 12741 $$.hideTooltip(!0); 12742 $$.hideGridFocus == null || $$.hideGridFocus(); 12743 $$.unexpandCircles == null || $$.unexpandCircles(); 12744 $$.expandBarTypeShapes == null || $$.expandBarTypeShapes(!1); 12745 } 12746}; 12747/* harmony default export */ var api_tooltip = ({ 12748 tooltip: tooltip_tooltip 12749}); 12750;// CONCATENATED MODULE: ./src/Chart/Chart.ts 12751 12752/** 12753 * Copyright (c) 2017 ~ present NAVER Corp. 12754 * billboard.js project is licensed under the MIT license 12755 */ 12756 12757 12758 12759 12760 12761 12762 12763 12764 12765 12766 12767 12768 12769/** 12770 * Main chart class. 12771 * - Note: Instantiated via `bb.generate()`. 12772 * @class Chart 12773 * @example 12774 * var chart = bb.generate({ 12775 * data: { 12776 * columns: [ 12777 * ["x", "2015-11-02", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01"], 12778 * ["count1", 11, 8, 7, 6, 5 ], 12779 * ["count2", 9, 3, 6, 2, 8 ] 12780 * ]} 12781 * } 12782 * @see {@link bb.generate} for the initialization. 12783 */ 12784/** 12785 * Access instance's primary node elements 12786 * @member {object} $ 12787 * @property {object} $ Access instance's primary node elements 12788 * @property {d3.selection} $.chart Wrapper element 12789 * @property {d3.selection} $.svg Main svg element 12790 * @property {d3.selection} $.defs Definition element 12791 * @property {d3.selection} $.main Main grouping element 12792 * @property {d3.selection} $.needle Needle element 12793 * - **NOTE:** 12794 * - The element will have `bb-needle` as class name. 12795 * - Will provide speical helper `.updateHelper(value: number, updateConfig: boolean)` method to facilitate needle position update. 12796 * @property {d3.selection} $.tooltip Tooltip element 12797 * @property {d3.selection} $.legend Legend element 12798 * @property {d3.selection} $.title Title element 12799 * @property {d3.selection} $.grid Grid element 12800 * @property {d3.selection} $.arc Arc element 12801 * @property {d3.selection} $.circles Data point circle elements 12802 * @property {object} $.bar Bar element object 12803 * @property {d3.selection} $.bar.bars Bar elements 12804 * @property {d3.selection} $.candlestick Candlestick elements 12805 * @property {object} $.line Line element object 12806 * @property {d3.selection} $.line.lines Line elements 12807 * @property {d3.selection} $.line.areas Areas elements 12808 * @property {object} $.text Text element object 12809 * @property {d3.selection} $.text.texts Data label text elements 12810 * @memberof Chart 12811 * @example 12812 * const chart = bb.generate({ ... }); 12813 * 12814 * chart.$.chart; // wrapper element 12815 * chart.$.line.circles; // all data point circle elements 12816 * @example 12817 * // Update arc needle position 12818 * const chart = bb.generate({ 12819 * data: { 12820 * type: "donut" 12821 * }, 12822 * arc: { 12823 * needle: { 12824 * show: true, 12825 * ... 12826 * } 12827 * } 12828 * }); 12829 * 12830 * chart.$.needle.updateHelper(70); // update needle position to point value 70. 12831 * 12832 * // update needle position to point value 70 and the config value. 12833 * // NOTE: updating config value, will update needle pointer initial value too. 12834 * chart.$.needle.updateHelper(70, true); 12835 * 12836 * // update needle point position every 1 second 12837 * let i = 0; 12838 * setInterval(() => { 12839 * chart.$.needle.updateHelper(i += 10); 12840 * }, 1000) 12841 */ 12842/** 12843 * Plugin instance array 12844 * @member {Array} plugins 12845 * @memberof Chart 12846 * @example 12847 * var chart = bb.generate({ 12848 * ... 12849 * plugins: [ 12850 * new bb.plugin.stanford({ ... }), 12851 * new PluginA() 12852 * ] 12853 * }); 12854 * 12855 * chart.plugins; // [Stanford, PluginA] - instance array 12856 */ 12857let Chart = function Chart(options) { 12858 this.plugins = []; 12859 this.internal = void 0; 12860 const $$ = new ChartInternal(this); 12861 this.internal = $$; 12862 12863 // bind to namespaced APIs 12864 (function bindThis(fn, target, argThis) { 12865 var _this = this;
12866 Object.keys(fn).forEach(function (key) { 12867 _newArrowCheck(this, _this); 12868 const isFunc = isFunction(fn[key]), 12869 isChild = target !== argThis, 12870 isNotNil = notEmpty(fn[key]), 12871 hasChild = isNotNil && Object.keys(fn[key]).length > 0; 12872 if (isFunc && (!isChild && hasChild || isChild)) { 12873 target[key] = fn[key].bind(argThis); 12874 } else if (isNotNil && !isFunc) { 12875 target[key] = {}; 12876 } else { 12877 target[key] = fn[key]; 12878 } 12879 hasChild && bindThis(fn[key], target[key], argThis); 12880 }.bind(this)); 12881 })(Chart.prototype, this, this); 12882 loadConfig.call($$, options); 12883 $$.beforeInit(); 12884 $$.init(); 12885}; // extend common APIs as part of Chart class 12886 12887extend(Chart.prototype, [chart, api_color, api_data, api_export, api_focus, api_legend, api_load, show, api_tooltip]); 12888;// CONCATENATED MODULE: ./src/Chart/api/axis.ts 12889 12890/** 12891 * Copyright (c) 2017 ~ present NAVER Corp. 12892 * billboard.js project is licensed under the MIT license 12893 */ 12894 12895/** 12896 * Set the min/max value 12897 * @param {Chart} $$ Chart instance 12898 * @param {string} type Set type 'min' or 'max' 12899 * @param {object} value Value to be set 12900 * @private 12901 */ 12902function setMinMax($$, type, value) { 12903 var _this = this; 12904 const config = $$.config, 12905 helper = function (key, value) { 12906 _newArrowCheck(this, _this); 12907 const v = isNumber(value) ? value : value === !1 ? undefined : null; 12908 if (v !== null) { 12909 config["axis_" + key + "_" + type] = v; 12910 } 12911 }.bind(this); 12912 if (isDefined(value)) { 12913 if (isObjectType(value)) { 12914 Object.keys(value).forEach(function (key) { 12915 _newArrowCheck(this, _this); 12916 helper(key, value[key]); 12917 }.bind(this)); 12918 } else if (isNumber(value) || value === !1) { 12919 // shorthand values affects only y and y2. 12920 ["y", "y2"].forEach(function (key) { 12921 _newArrowCheck(this, _this); 12922 helper(key, value); 12923 }.bind(this)); 12924 } 12925 $$.redraw({ 12926 withUpdateOrgXDomain: !0, 12927 withUpdateXDomain: !0 12928 }); 12929 } 12930} 12931 12932/** 12933 * Get the min/max value 12934 * @param {Chart} $$ Chart instance 12935 * @param {string} type Set type 'min' or 'max' 12936 * @returns {{x, y, y2}} 12937 * @private 12938 */ 12939function axis_getMinMax($$, type) { 12940 const config = $$.config; 12941 return { 12942 x: config["axis_x_" + type], 12943 y: config["axis_y_" + type], 12944 y2: config["axis_y2_" + type] 12945 }; 12946} 12947 12948/** 12949 * Define axis 12950 * @ignore 12951 */ 12952const axis = { 12953 /** 12954 * Get and set axis labels. 12955 * - **NOTE:** Only applicable for chart types which has x and y axes. 12956 * @function axisâ¤labels 12957 * @instance 12958 * @memberof Chart 12959 * @param {object} labels specified axis' label to be updated. 12960 * @param {string} [labels.x] x Axis string 12961 * @param {string} [labels.y] y Axis string 12962 * @param {string} [labels.y2] y2 Axis string 12963 * @returns {object|undefined} axis labels text object 12964 * @example 12965 * // Update axis' label 12966 * chart.axis.labels({ 12967 * x: "New X Axis Label", 12968 * y: "New Y Axis Label", 12969 * y2: "New Y2 Axis Label" 12970 * }); 12971 * 12972 * chart.axis.labels(); 12973 * // --> { 12974 * // x: "New X Axis Label", 12975 * // y: "New Y Axis Label", 12976 * // y2: "New Y2 Axis Label" 12977 * // } 12978 */ 12979 labels: function labels(_labels) { 12980 var _this2 = this; 12981 const $$ = this.internal; 12982 let labelText; 12983 if (_labels) { 12984 Object.keys(_labels).forEach(function (axisId) { 12985 _newArrowCheck(this, _this2); 12986 $$.axis.setLabelText(axisId, _labels[axisId]); 12987 }.bind(this)); 12988 $$.axis.updateLabels(); 12989 } 12990 ["x", "y", "y2"].forEach(function (v) { 12991 _newArrowCheck(this, _this2); 12992 const text = $$.axis.getLabelText(v); 12993 if (text) { 12994 labelText || (labelText = {}); 12995 labelText[v] = text; 12996 } 12997 }.bind(this)); 12998 return labelText; 12999 }, 13000 /** 13001 * Get and set axis min value. 13002 * - **NOTE:** Only applicable for chart types which has x and y axes. 13003 * @function axisâ¤min 13004 * @instance 13005 * @memberof Chart 13006 * @param {object} min If min is given, specified axis' min value will be updated.<br> 13007 * If no argument is given, the min values set on generating option for each axis will be returned. 13008 * If not set any min values on generation, it will return `undefined`.<br> 13009 * To unset specific axis max, set `false` to each of them. 13010 * @returns {object|undefined} 13011 * @example 13012 * // Update axis' min 13013 * chart.axis.min({ 13014 * x: -10, 13015 * y: 1000, 13016 * y2: 100 13017 * }); 13018 * 13019 * // To unset specific axis min, set false to each of them. 13020 * chart.axis.min({ 13021 * x: false, 13022 * y: false, 13023 * y2: false 13024 * }); 13025 * 13026 * // shorthand (only affects y and y2 axis) 13027 * chart.axis.min(-50); 13028 * chart.axis.min(false); 13029 */ 13030 min: function min(_min) { 13031 const $$ = this.internal; 13032 return isValue(_min) || _min === !1 ? setMinMax($$, "min", _min) : axis_getMinMax($$, "min"); 13033 }, 13034 /** 13035 * Get and set axis max value. 13036 * - **NOTE:** Only applicable for chart types which has x and y axes. 13037 * @function axisâ¤max 13038 * @instance 13039 * @memberof Chart 13040 * @param {object} max If max is given, specified axis' max value will be updated.<br> 13041 * If no argument is given, the max values set on generating option for each axis will be returned. 13042 * If not set any max values on generation, it will return `undefined`.<br> 13043 * To unset specific axis max, set `false` to each of them. 13044 * @returns {object|undefined} 13045 * @example 13046 * // Update axis' label 13047 * chart.axis.max({ 13048 * x: 100, 13049 * y: 1000, 13050 * y2: 10000 13051 * }); 13052 * 13053 * // To unset specific axis max, set false to each of them. 13054 * chart.axis.max({ 13055 * x: false, 13056 * y: false, 13057 * y2: false 13058 * }); 13059 * 13060 * // shorthand (only affects y and y2 axis) 13061 * chart.axis.max(10); 13062 * chart.axis.max(false); 13063 */ 13064 max: function max(_max) { 13065 const $$ = this.internal; 13066 return isValue(_max) || _max === !1 ? setMinMax($$, "max", _max) : axis_getMinMax($$, "max"); 13067 }, 13068 /** 13069 * Get and set axis min and max value. 13070 * - **NOTE:** Only applicable for chart types which has x and y axes. 13071 * @function axisâ¤range 13072 * @instance 13073 * @memberof Chart 13074 * @param {object} range If range is given, specified axis' min and max value will be updated. 13075 * If no argument is given, the current min and max values for each axis will be returned.<br> 13076 * To unset specific axis max, set `false` to each of them. 13077 * @returns {object|undefined} 13078 * @example 13079 * // Update axis' label 13080 * chart.axis.range({ 13081 * min: { 13082 * x: -10, 13083 * y: -1000, 13084 * y2: -10000 13085 * }, 13086 * max: { 13087 * x: 100, 13088 * y: 1000, 13089 * y2: 10000 13090 * }, 13091 * }); 13092 * 13093 * // To unset specific axis max, set false to each of them. 13094 * chart.axis.range({ 13095 * min: { 13096 * x: false, 13097 * y: false, 13098 * y2: false 13099 * }, 13100 * max: { 13101 * x: false, 13102 * y: false, 13103 * y2: false 13104 * }, 13105 * }); 13106 * 13107 * // shorthand (only affects y and y2 axis) 13108 * chart.axis.range({ min: -50, max: 1000 }); 13109 * chart.axis.range({ min: false, max: false }); 13110 */ 13111 range: function range(_range) { 13112 const axis = this.axis; 13113 if (arguments.length) { 13114 const min = _range.min, 13115 max = _range.max; 13116 isDefined(max) && axis.max(max); 13117 isDefined(min) && axis.min(min); 13118 } else { 13119 return { 13120 max: axis.max(), 13121 min: axis.min() 13122 }; 13123 } 13124 return undefined; 13125 } 13126}; 13127/* harmony default export */ var api_axis = ({ 13128 axis: axis 13129}); 13130;// CONCATENATED MODULE: ./src/Chart/api/category.ts 13131/** 13132 * Copyright (c) 2017 ~ present NAVER Corp. 13133 * billboard.js project is licensed under the MIT license 13134 */ 13135 13136/* harmony default export */ var api_category = ({ 13137 /** 13138 * Set specified category name on category axis. 13139 * @function category 13140 * @instance 13141 * @memberof Chart 13142 * @param {number} i index of category to be changed 13143 * @param {string} category category value to be changed 13144 * @returns {string} 13145 * @example 13146 * chart.category(2, "Category 3"); 13147 */ 13148 category: function category(i, _category) { 13149 const $$ = this.internal, 13150 config = $$.config; 13151 if (arguments.length > 1) { 13152 config.axis_x_categories[i] = _category; 13153 $$.redraw(); 13154 } 13155 return config.axis_x_categories[i]; 13156 }, 13157 /** 13158 * Set or get category names on category axis. 13159 * @function categories 13160 * @instance 13161 * @memberof Chart 13162 * @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. 13163 * @returns {Array} 13164 * @example 13165 * chart.categories([ 13166 * "Category 1", "Category 2", ... 13167 * ]); 13168 */ 13169 categories: function categories(_categories) { 13170 const $$ = this.internal, 13171 config = $$.config; 13172 if (!_categories || !Array.isArray(_categories)) { 13173 const cat = config.axis_x_categories; 13174 return isEmpty(cat) ? Object.values($$.data.xs)[0] : cat; 13175 }
13176 config.axis_x_categories = _categories; 13177 $$.redraw(); 13178 return config.axis_x_categories; 13179 } 13180}); 13181;// CONCATENATED MODULE: ./src/Chart/api/grid.ts 13182/** 13183 * Copyright (c) 2017 ~ present NAVER Corp. 13184 * billboard.js project is licensed under the MIT license 13185 */ 13186 13187/** 13188 * Update grid lines. 13189 * @param {Array} grids grid lines to update 13190 * @param {string} axisId axis' id: "x" or "y" 13191 * @returns {Array} 13192 * @private 13193 */ 13194function grid(grids, axisId) { 13195 const $$ = this.internal, 13196 config = $$.config, 13197 withTransition = config.transition_duration && isTabVisible(), 13198 gridPropLines = "grid_" + axisId + "_lines"; 13199 if (!grids) { 13200 return config[gridPropLines]; 13201 } 13202 config[gridPropLines] = grids; 13203 $$.updateGrid(); 13204 $$.redrawGrid(withTransition); 13205 return config[gridPropLines]; 13206} 13207 13208/** 13209 * Add grid lines. 13210 * @param {Array|object} grids grid lines to add 13211 * @param {string} axisId axis' id: "x" or "y" 13212 * @returns {Array} 13213 * @private 13214 */ 13215function _add(grids, axisId) { 13216 return grid.bind(this)(this.internal.config["grid_" + axisId + "_lines"].concat(grids || []), axisId); 13217} 13218 13219/** 13220 * Remove grid lines. 13221 * @param {object} grids grid lines to remove 13222 * @param {boolean} isXAxis weather is x axis or not 13223 * @private 13224 */ 13225function _remove(grids, isXAxis) { 13226 this.internal.removeGridLines(grids, isXAxis); 13227} 13228 13229/** 13230 * Update x grid lines. 13231 * @function xgrids 13232 * @instance 13233 * @memberof Chart 13234 * @param {Array} grids X grid lines will be replaced with this argument. The format of this argument is the same as grid.x.lines. 13235 * @returns {Array} 13236 * @example 13237 * // Show 2 x grid lines 13238 * chart.xgrids([ 13239 * {value: 1, text: "Label 1"}, 13240 * {value: 4, text: "Label 4"} 13241 * ]); 13242 * // --> Returns: [{value: 1, text: "Label 1"}, {value: 4, text: "Label 4"}] 13243 */ 13244const xgrids = function (grids) { 13245 return grid.bind(this)(grids, "x"); 13246}; 13247extend(xgrids, { 13248 /** 13249 * Add x grid lines.<br> 13250 * This API adds new x grid lines instead of replacing like xgrids. 13251 * @function xgridsâ¤add 13252 * @instance 13253 * @memberof Chart 13254 * @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. 13255 * @returns {Array} 13256 * @example 13257 * // Add a new x grid line 13258 * chart.xgrids.add( 13259 * {value: 4, text: "Label 4"} 13260 * ); 13261 * 13262 * // Add new x grid lines 13263 * chart.xgrids.add([ 13264 * {value: 2, text: "Label 2"}, 13265 * {value: 4, text: "Label 4"} 13266 * ]); 13267 */ 13268 add: function add(grids) { 13269 return _add.bind(this)(grids, "x"); 13270 }, 13271 /** 13272 * Remove x grid lines.<br> 13273 * This API removes x grid lines. 13274 * @function xgridsâ¤remove 13275 * @instance 13276 * @memberof Chart 13277 * @param {object} grids 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. 13278 * @param {number} [grids.value] target value 13279 * @param {string} [grids.class] target class 13280 * @returns {void} 13281 * @example 13282 * // x grid line on x = 2 will be removed 13283 * chart.xgrids.remove({value: 2}); 13284 * 13285 * // x grid lines that have 'grid-A' will be removed 13286 * chart.xgrids.remove({ 13287 * class: "grid-A" 13288 * }); 13289 * 13290 * // all of x grid lines will be removed 13291 * chart.xgrids.remove(); 13292 */ 13293 remove: function remove(grids) { 13294 // TODO: multiple 13295 return _remove.bind(this)(grids, !0); 13296 } 13297}); 13298 13299/** 13300 * Update y grid lines. 13301 * @function ygrids 13302 * @instance 13303 * @memberof Chart 13304 * @param {Array} grids Y grid lines will be replaced with this argument. The format of this argument is the same as grid.y.lines. 13305 * @returns {object} 13306 * @example 13307 * // Show 2 y grid lines 13308 * chart.ygrids([ 13309 * {value: 100, text: "Label 1"}, 13310 * {value: 400, text: "Label 4"} 13311 * ]); 13312 * // --> Returns: [{value: 100, text: "Label 1"}, {value: 400, text: "Label 4"}] 13313 */ 13314const ygrids = function (grids) { 13315 return grid.bind(this)(grids, "y"); 13316}; 13317extend(ygrids, { 13318 /** 13319 * Add y grid lines.<br> 13320 * This API adds new y grid lines instead of replacing like ygrids. 13321 * @function ygridsâ¤add 13322 * @instance 13323 * @memberof Chart 13324 * @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. 13325 * @returns {object} 13326 * @example 13327 * // Add a new x grid line 13328 * chart.ygrids.add( 13329 * {value: 400, text: "Label 4"} 13330 * ); 13331 * 13332 * // Add new x grid lines 13333 * chart.ygrids.add([ 13334 * {value: 200, text: "Label 2"}, 13335 * {value: 400, text: "Label 4"} 13336 * ]); 13337 */ 13338 add: function add(grids) { 13339 return _add.bind(this)(grids, "y"); 13340 }, 13341 /** 13342 * Remove y grid lines.<br> 13343 * This API removes x grid lines. 13344 * @function ygridsâ¤remove 13345 * @instance 13346 * @memberof Chart 13347 * @param {object} grids 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. 13348 * @param {number} [grids.value] target value 13349 * @param {string} [grids.class] target class 13350 * @returns {void} 13351 * @example 13352 * // y grid line on y = 200 will be removed 13353 * chart.ygrids.remove({value: 200}); 13354 * 13355 * // y grid lines that have 'grid-A' will be removed 13356 * chart.ygrids.remove({ 13357 * class: "grid-A" 13358 * }); 13359 * 13360 * // all of y grid lines will be removed 13361 * chart.ygrids.remove(); 13362 */
13363 remove: function remove(grids) { 13364 // TODO: multiple 13365 return _remove.bind(this)(grids, !1); 13366 } 13367}); 13368/* harmony default export */ var api_grid = ({ 13369 xgrids: xgrids, 13370 ygrids: ygrids 13371}); 13372;// CONCATENATED MODULE: ./src/Chart/api/group.ts 13373/** 13374 * Copyright (c) 2017 ~ present NAVER Corp. 13375 * billboard.js project is licensed under the MIT license 13376 */ 13377 13378/* harmony default export */ var group = ({ 13379 /** 13380 * Update groups for the targets. 13381 * @function groups 13382 * @instance 13383 * @memberof Chart 13384 * @param {Array} groups This argument needs to be an Array that includes one or more Array that includes target ids to be grouped. 13385 * @returns {Array} Grouped data names array 13386 * @example 13387 * // data1 and data2 will be a new group. 13388 * chart.groups([ 13389 * ["data1", "data2"] 13390 * ]); 13391 */ 13392 groups: function groups(_groups) { 13393 const $$ = this.internal, 13394 config = $$.config; 13395 if (isUndefined(_groups)) { 13396 return config.data_groups; 13397 } 13398 config.data_groups = _groups; 13399 $$.redraw(); 13400 return config.data_groups; 13401 } 13402}); 13403;// CONCATENATED MODULE: ./src/Chart/api/regions.ts 13404 13405/** 13406 * Copyright (c) 2017 ~ present NAVER Corp. 13407 * billboard.js project is licensed under the MIT license 13408 */ 13409 13410 13411/** 13412 * Region add/update function 13413 * @param {Array} regions Regions will be replaced with this argument. The format of this argument is the same as regions. 13414 * @param {boolean} isAdd If true, add new regions, otherwise update regions 13415 * @returns {Array} regions 13416 * @private 13417 */ 13418function regionsFn(regions, isAdd) { 13419 if (isAdd === void 0) { 13420 isAdd = !1; 13421 } 13422 const $$ = this.internal, 13423 config = $$.config, 13424 withTransition = config.transition_duration && isTabVisible(); 13425 if (!regions) { 13426 return config.regions; 13427 } 13428 config.regions = isAdd ? config.regions.concat(regions) : regions; 13429 $$.updateRegion(); 13430 $$.redrawRegion(withTransition); 13431 return isAdd ? config.regions : regions; 13432} 13433 13434/** 13435 * Update regions. 13436 * @function regions 13437 * @instance 13438 * @memberof Chart 13439 * @param {Array} regions Regions will be replaced with this argument. The format of this argument is the same as regions. 13440 * @returns {Array} regions 13441 * @example 13442 * // Show 2 regions 13443 * chart.regions([ 13444 * {axis: "x", start: 5, class: "regionX"}, 13445 * {axis: "y", end: 50, class: "regionY"} 13446 * ]); 13447 */ 13448const regions = function (_regions) { 13449 return regionsFn.bind(this)(_regions); 13450}; 13451extend(regions, { 13452 /** 13453 * Add new region.<br><br> 13454 * This API adds new region instead of replacing like regions. 13455 * @function regionsâ¤add 13456 * @instance 13457 * @memberof Chart 13458 * @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. 13459 * @returns {Array} regions 13460 * @example 13461 * // Add a new region 13462 * chart.regions.add( 13463 * {axis: "x", start: 5, class: "regionX"} 13464 * ); 13465 * 13466 * // Add new regions 13467 * chart.regions.add([ 13468 * {axis: "x", start: 5, class: "regionX"}, 13469 * {axis: "y", end: 50, class: "regionY"} 13470 *]); 13471 */ 13472 add: function add(regions) { 13473 return regionsFn.bind(this)(regions, !0); 13474 }, 13475 /** 13476 * Remove regions.<br><br> 13477 * This API removes regions. 13478 * @function regionsâ¤remove 13479 * @instance 13480 * @memberof Chart 13481 * @param {object} optionsValue 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. 13482 * @returns {Array} regions Removed regions 13483 * @example 13484 * // regions that have 'region-A' or 'region-B' will be removed. 13485 * chart.regions.remove({ 13486 * classes: [ 13487 * "region-A", "region-B" 13488 * ] 13489 * }); 13490 * 13491 * // all of regions will be removed. 13492 * chart.regions.remove(); 13493 */ 13494 remove: function remove(optionsValue) { 13495 var _this = this; 13496 const $$ = this.internal, 13497 config = $$.config, 13498 $T = $$.$T, 13499 options = optionsValue || {}, 13500 classes = getOption(options, "classes", [$REGION.region]); 13501 let regions = $$.$el.main.select("." + $REGION.regions).selectAll(classes.map(function (c) { 13502 _newArrowCheck(this, _this); 13503 return "." + c; 13504 }.bind(this))); 13505 $T(regions).style("opacity", "0").remove(); 13506 regions = config.regions; 13507 if (Object.keys(options).length) { 13508 regions = regions.filter(function (region) { 13509 var _this2 = this; 13510 _newArrowCheck(this, _this); 13511 let found = !1; 13512 if (!region.class) { 13513 return !0; 13514 } 13515 region.class.split(" ").forEach(function (c) { 13516 _newArrowCheck(this, _this2); 13517 if (classes.indexOf(c) >= 0) { 13518 found = !0; 13519 } 13520 }.bind(this)); 13521 return !found; 13522 }.bind(this)); 13523 config.regions = regions; 13524 } else { 13525 config.regions = []; 13526 } 13527 return regions; 13528 } 13529}); 13530/* harmony default export */ var api_regions = ({ 13531 regions: regions 13532}); 13533;// CONCATENATED MODULE: ./src/Chart/api/x.ts 13534/** 13535 * Copyright (c) 2017 ~ present NAVER Corp. 13536 * billboard.js project is licensed under the MIT license 13537 */ 13538 13539/* harmony default export */ var x = ({ 13540 /** 13541 * Get and set x values for the chart. 13542 * @function x 13543 * @instance 13544 * @memberof Chart 13545 * @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. 13546 * @returns {object} xs 13547 * @example 13548 * // Get current x values 13549 * chart.x(); 13550 * 13551 * // Update x values for all targets 13552 * chart.x([100, 200, 300, 400, ...]); 13553 */ 13554 x: function x(_x) { 13555 const $$ = this.internal, 13556 axis = $$.axis, 13557 data = $$.data, 13558 isCategorized = axis.isCustomX() && axis.isCategorized(); 13559 if (isArray(_x)) { 13560 if (isCategorized) { 13561 this.categories(_x); 13562 } else { 13563 $$.updateTargetX(data.targets, _x); 13564 $$.redraw({ 13565 withUpdateOrgXDomain: !0, 13566 withUpdateXDomain: !0 13567 }); 13568 } 13569 } 13570 return isCategorized ? this.categories() : data.xs; 13571 }, 13572 /** 13573 * Get and set x values for the chart. 13574 * @function xs 13575 * @instance 13576 * @memberof Chart 13577 * @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. 13578 * @returns {object} xs 13579 * @example 13580 * // Get current x values 13581 * chart.xs(); 13582 * 13583 * // Update x values for all targets 13584 * chart.xs({ 13585 * data1: [10, 20, 30, 40, ...], 13586 * data2: [100, 200, 300, 400, ...] 13587 * }); 13588 */ 13589 xs: function xs(_xs) { 13590 const $$ = this.internal; 13591 if (isObject(_xs)) { 13592 $$.updateTargetXs($$.data.targets, _xs); 13593 $$.redraw({ 13594 withUpdateOrgXDomain: !0, 13595 withUpdateXDomain: !0 13596 }); 13597 } 13598 return $$.data.xs; 13599 } 13600}); 13601;// CONCATENATED MODULE: ./src/Chart/api/flow.ts 13602 13603/** 13604 * Copyright (c) 2017 ~ present NAVER Corp. 13605 * billboard.js project is licensed under the MIT license 13606 */ 13607 13608/* harmony default export */ var flow = ({ 13609 /** 13610 * Flow data to the chart.<br><br> 13611 * By this API, you can append new data points to the chart. 13612 * @function flow 13613 * @instance 13614 * @memberof Chart 13615 * @param {object} args The object can consist with following members:<br> 13616 * 13617 * | Key | Type | Description | 13618 * | --- | --- | --- | 13619 * | json | Object | Data as JSON format (@see [dataâ¤json](Options.html#.data%25E2%2580%25A4json)) | 13620 * | rows | Array | Data in array as row format (@see [dataâ¤rows](Options.html#.data%25E2%2580%25A4json)) | 13621 * | columns | Array | Data in array as column format (@see [dataâ¤columns](Options.html#.data%25E2%2580%25A4columns)) | 13622 * | 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 | 13623 * | length | Number | The lower x edge will move by the number of this argument | 13624 * | duration | Number | The duration of the transition will be specified value. If not given, transition.duration will be used as default | 13625 * | done | Function | The specified function will be called when flow ends | 13626 * 13627 * - **NOTE:** 13628 * - If json, rows and columns given, the data will be loaded. 13629 * - If data that has the same target id is given, the chart will be appended. 13630 * - Otherwise, new target will be added. One of these is required when calling. 13631 * - If json specified, keys is required as well as data.json. 13632 * - If tab isn't visible(by evaluating `document.hidden`), will not be executed to prevent unnecessary work. 13633 * @example 13634 * // 2 data points will be apprended to the tail and popped from the head. 13635 * // After that, 4 data points will be appended and no data points will be poppoed. 13636 * chart.flow({ 13637 * columns: [ 13638 * ["x", "2018-01-11", "2018-01-21"], 13639 * ["data1", 500, 200], 13640 * ["data2", 100, 300], 13641 * ["data3", 200, 120] 13642 * ], 13643 * to: "2013-01-11", 13644 * done: function () { 13645 * chart.flow({ 13646 * columns: [ 13647 * ["x", "2018-02-11", "2018-02-12", "2018-02-13", "2018-02-14"], 13648 * ["data1", 200, 300, 100, 250], 13649 * ["data2", 100, 90, 40, 120], 13650 * ["data3", 100, 100, 300, 500] 13651 * ], 13652 * length: 2, 13653 * duration: 1500 13654 * }); 13655 * } 13656 * }); 13657 */ 13658 flow: function flow(args) { 13659 var _this = this; 13660 const $$ = this.internal; 13661 let data; 13662 if (args.json || args.rows || args.columns) { 13663 $$.convertData(args, function (res) { 13664 _newArrowCheck(this, _this); 13665 data = res; 13666 _(); 13667 }.bind(this)); 13668 } 13669 13670 /** 13671 * Process flows 13672 * @private 13673 */ 13674 function _() { 13675 var _this2 = this; 13676 let domain, 13677 length = 0, 13678 tail = 0, 13679 diff, 13680 to; 13681 if ($$.state.redrawing || !data || !isTabVisible()) { 13682 return; 13683 } 13684 const notfoundIds = [], 13685 orgDataCount = $$.getMaxDataCount(), 13686 targets = $$.convertDataToTargets(data, !0), 13687 isTimeSeries = $$.axis.isTimeSeries(); 13688 // Update/Add data
13689 $$.data.targets.forEach(function (t) { 13690 _newArrowCheck(this, _this2); 13691 let found = !1; 13692 for (let i = 0; i < targets.length; i++) { 13693 if (t.id === targets[i].id) { 13694 found = !0; 13695 if (t.values[t.values.length - 1]) { 13696 tail = t.values[t.values.length - 1].index + 1; 13697 } 13698 length = targets[i].values.length; 13699 for (let j = 0; j < length; j++) { 13700 targets[i].values[j].index = tail + j; 13701 if (!isTimeSeries) { 13702 targets[i].values[j].x = tail + j; 13703 } 13704 } 13705 t.values = t.values.concat(targets[i].values); 13706 targets.splice(i, 1); 13707 break; 13708 } 13709 } 13710 found || notfoundIds.push(t.id); 13711 }.bind(this)); 13712 13713 // Append null for not found targets 13714 $$.data.targets.forEach(function (t) { 13715 _newArrowCheck(this, _this2); 13716 for (let i = 0; i < notfoundIds.length; i++) { 13717 if (t.id === notfoundIds[i]) { 13718 tail = t.values[t.values.length - 1].index + 1; 13719 for (let j = 0; j < length; j++) { 13720 t.values.push({ 13721 id: t.id, 13722 index: tail + j, 13723 x: isTimeSeries ? $$.getOtherTargetX(tail + j) : tail + j, 13724 value: null 13725 }); 13726 } 13727 } 13728 } 13729 }.bind(this)); 13730 13731 // Generate null values for new target 13732 if ($$.data.targets.length) { 13733 targets.forEach(function (t) { 13734 var _this3 = this; 13735 _newArrowCheck(this, _this2); 13736 const missing = []; 13737 for (let i = $$.data.targets[0].values[0].index; i < tail; i++) { 13738 missing.push({ 13739 id: t.id, 13740 index: i, 13741 x: isTimeSeries ? $$.getOtherTargetX(i) : i, 13742 value: null 13743 }); 13744 } 13745 t.values.forEach(function (v) { 13746 _newArrowCheck(this, _this3); 13747 v.index += tail; 13748 if (!isTimeSeries) { 13749 v.x += tail; 13750 } 13751 }.bind(this)); 13752 t.values = missing.concat(t.values); 13753 }.bind(this)); 13754 } 13755 $$.data.targets = $$.data.targets.concat(targets); // add remained 13756 13757 // check data count because behavior needs to change when it"s only one 13758 // const dataCount = $$.getMaxDataCount(); 13759 const baseTarget = $$.data.targets[0], 13760 baseValue = baseTarget.values[0]; 13761 // Update length to flow if needed 13762 if (isDefined(args.to)) { 13763 length = 0; 13764 to = isTimeSeries ? parseDate.call($$, args.to) : args.to; 13765 baseTarget.values.forEach(function (v) { 13766 _newArrowCheck(this, _this2); 13767 v.x < to && length++; 13768 }.bind(this)); 13769 } else if (isDefined(args.length)) { 13770 length = args.length; 13771 } 13772 13773 // If only one data, update the domain to flow from left edge of the chart 13774 if (!orgDataCount) { 13775 if (isTimeSeries) { 13776 diff = baseTarget.values.length > 1 ? baseTarget.values[baseTarget.values.length - 1].x - baseValue.x : baseValue.x - $$.getXDomain($$.data.targets)[0]; 13777 } else { 13778 diff = 1; 13779 } 13780 domain = [baseValue.x - diff, baseValue.x]; 13781 } else if (orgDataCount === 1 && isTimeSeries) { 13782 diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2; 13783 domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)]; 13784 } 13785 domain && $$.updateXDomain(null, !0, !0, !1, domain); 13786 13787 // Set targets 13788 $$.updateTargets($$.data.targets); 13789 13790 // Redraw with new targets 13791 $$.redraw({ 13792 flow: { 13793 index: baseValue.index, 13794 length: length, 13795 duration: isValue(args.duration) ? args.duration : $$.config.transition_duration, 13796 done: args.done, 13797 orgDataCount: orgDataCount 13798 }, 13799 withLegend: !0, 13800 withTransition: orgDataCount > 1, 13801 withTrimXDomain: !1, 13802 withUpdateXAxis: !0 13803 }); 13804 } 13805 } 13806}); 13807// EXTERNAL MODULE: external {"commonjs":"d3-axis","commonjs2":"d3-axis","amd":"d3-
13807axis","root":"d3"} 13808var external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_ = __webpack_require__(10); 13809;// CONCATENATED MODULE: ./src/ChartInternal/Axis/AxisRendererHelper.ts 13810 13811/** 13812 * Copyright (c) 2017 ~ present NAVER Corp. 13813 * billboard.js project is licensed under the MIT license 13814 * @ignore 13815 */ 13816 13817 13818let AxisRendererHelper = /*#__PURE__*/function () { 13819 function AxisRendererHelper(owner) { 13820 this.owner = void 0; 13821 this.config = void 0; 13822 this.scale = void 0; 13823 const scale = getScale(), 13824 config = owner.config, 13825 params = owner.params; 13826 this.owner = owner; 13827 this.config = config; 13828 this.scale = scale; 13829 if (config.noTransition || !params.config.transition_duration) { 13830 config.withoutTransition = !0; 13831 } 13832 13833 // set range 13834 config.range = this.scaleExtent((params.orgXScale || scale).range()); 13835 } 13836 13837 /** 13838 * Compute a character dimension 13839 * @param {d3.selection} node <g class=tick> node 13840 * @returns {{w: number, h: number}} 13841 * @private 13842 */ 13843 AxisRendererHelper.getSizeFor1Char = function getSizeFor1Char(node) { 13844 var _this = this; 13845 // default size for one character 13846 const size = { 13847 w: 5.5, 13848 h: 11.5 13849 }; 13850 node.empty() || node.select("text").text("0").call(function (el) { 13851 _newArrowCheck(this, _this); 13852 try { 13853 const _el$node$getBBox = el.node().getBBox(), 13854 width = _el$node$getBBox.width, 13855 height = _el$node$getBBox.height; 13856 if (width && height) { 13857 size.w = width; 13858 size.h = height; 13859 } 13860 } catch (e) {} finally { 13861 el.text(""); 13862 } 13863 }.bind(this)); 13864 this.getSizeFor1Char = function () { 13865 _newArrowCheck(this, _this); 13866 return size; 13867 }.bind(this); 13868 return size; 13869 } 13870 13871 /** 13872 * Get tick transform setter function 13873 * @param {string} id Axis id 13874 * @returns {Function} transfrom setter function 13875 * @private 13876 */; 13877 var _proto = AxisRendererHelper.prototype; 13878 _proto.getTickTransformSetter = function getTickTransformSetter(id) { 13879 var _this2 = this; 13880 const config = this.config, 13881 fn = id === "x" ? function (value) { 13882 _newArrowCheck(this, _this2); 13883 return "translate(" + (value + config.tickOffset) + ",0)"; 13884 }.bind(this) : function (value) { 13885 _newArrowCheck(this, _this2); 13886 return "translate(0," + value + ")"; 13887 }.bind(this); 13888 return function (selection, scale) { 13889 var _this3 = this; 13890 _newArrowCheck(this, _this2); 13891 selection.attr("transform", function (d) { 13892 _newArrowCheck(this, _this3); 13893 return isValue(d) ? fn(Math.ceil(scale(d))) : null; 13894 }.bind(this)); 13895 }.bind(this); 13896 }; 13897 _proto.scaleExtent = function scaleExtent(domain) { 13898 const start = domain[0], 13899 stop = domain[domain.length - 1]; 13900 return start < stop ? [start, stop] : [stop, start]; 13901 }; 13902 _proto.generateTicks = function generateTicks(scale, isYAxes) { 13903 var _this4 = this; 13904 const tickStepSize = this.owner.params.tickStepSize, 13905 _scale$domain = scale.domain(), 13906 start = _scale$domain[0], 13907 end = _scale$domain[1]; 13908 let ticks = []; 13909 13910 // When 'axis[y|y2].tick.stepSize' option is set 13911 if (isYAxes && tickStepSize) { 13912 let interval = Math.round(start); 13913 while (interval <= end) { 13914 ticks.push(interval); 13915 interval += tickStepSize; 13916 } 13917 } else if (scale.ticks) { 13918 const tickArguments = this.config.tickArguments; 13919 13920 // adjust excessive tick count show 13921 if (scale.type === "log" && !tickArguments) { 13922 // nicer symlog ticks didn't implemented yet: https://github.com/d3/d3-scale/issues/162 13923 // get ticks values from logScale 13924 const s = getScale("_log").domain([start > 0 ? start : 1, end]).range(scale.range()); 13925 ticks = s.ticks(); 13926 for (let cnt = end.toFixed().length; ticks.length > 15; cnt--) { 13927 ticks = s.ticks(cnt); 13928 } 13929 ticks.splice(0, 1, start); 13930 ticks.splice(ticks.length - 1, 1, end); 13931 } else { 13932 ticks = scale.ticks.apply(scale, this.config.tickArguments || []); 13933 } 13934 ticks = ticks.map(function (v) { 13935 _newArrowCheck(this, _this4); 13936 // round the tick value if is number 13937 const r = isString(v) && isNumber(v) && !isNaN(v) && Math.round(v * 10) / 10 || v; 13938 return r; 13939 }.bind(this)); 13940 } 13941 return ticks; 13942 }; 13943 _proto.copyScale = function copyScale() { 13944 const newScale = this.scale.copy(); 13945 if (!newScale.domain().length) { 13946 newScale.domain(this.scale.domain()); 13947 } 13948 newScale.type = this.scale.type; 13949 return newScale; 13950 }; 13951 _proto.textFormatted = function textFormatted(v) { 13952 const tickFormat = this.config.tickFormat, 13953 value = /\d+\.\d+0{5,}\d$/.test(v) ? +(v + "").replace(/0+\d$/, "") : v, 13954 formatted = tickFormat ? tickFormat(value) : value; // to round float numbers from 'binary floating point' 13955 // https://en.wikipedia.org/wiki/Double-precision_floating-point_format 13956 // https://stackoverflow.com/questions/17849101/laymans-explanation-for-why-javascript-has-weird-floating-math-ieee-754-stand 13957 return isDefined(formatted) ? formatted : ""; 13958 }; 13959 _proto.transitionise = function transitionise(selection) { 13960 const config = this.config; 13961 let transitionSelection = selection; 13962 if (config.withoutTransition) { 13963 transitionSelection = selection.interrupt(); 13964 } else if (config.transition || !this.owner.params.noTransition) { 13965 // prevent for 'transition not found' case 13966 // https://github.com/naver/billboard.js/issues/2140
13967 try { 13968 transitionSelection = selection.transition(config.transition); 13969 } catch (e) {} 13970 } 13971 return transitionSelection; 13972 }; 13973 return AxisRendererHelper; 13974}(); 13975 13976;// CONCATENATED MODULE: ./src/ChartInternal/Axis/AxisRenderer.ts 13977 13978/** 13979 * Copyright (c) 2017 ~ present NAVER Corp. 13980 * billboard.js project is licensed under the MIT license 13981 * @ignore 13982 */ 13983 13984 13985 13986let AxisRenderer = /*#__PURE__*/function () { 13987 function AxisRenderer(params) { 13988 if (params === void 0) { 13989 params = {}; 13990 } 13991 this.helper = void 0; 13992 this.config = void 0; 13993 this.params = void 0; 13994 this.g = void 0; 13995 this.generatedTicks = void 0; 13996 const config = { 13997 innerTickSize: 6, 13998 outerTickSize: params.outerTick ? 6 : 0, 13999 orient: "bottom", 14000 range: [], 14001 tickArguments: null, 14002 tickCentered: null, 14003 tickCulling: !0, 14004 tickFormat: null, 14005 tickLength: 9, 14006 tickOffset: 0, 14007 tickPadding: 3, 14008 tickValues: null, 14009 transition: null, 14010 noTransition: params.noTransition 14011 }; 14012 config.tickLength = Math.max(config.innerTickSize, 0) + config.tickPadding; 14013 this.config = config; 14014 this.params = params; 14015 this.helper = new AxisRendererHelper(this); 14016 } 14017 14018 /** 14019 * Create axis element 14020 * @param {d3.selection} g Axis selection 14021 * @private 14022 */ 14023 var _proto = AxisRenderer.prototype; 14024 _proto.create = function create(g) { 14025 const ctx = this, 14026 config = ctx.config, 14027 helper = ctx.helper, 14028 params = ctx.params, 14029 scale = helper.scale, 14030 orient = config.orient, 14031 splitTickText = this.splitTickText.bind(ctx), 14032 isLeftRight = /^(left|right)$/.test(orient), 14033 isTopBottom = /^(top|bottom)$/.test(orient), 14034 tickTransform = helper.getTickTransformSetter(isTopBottom ? "x" : "y"), 14035 axisPx = tickTransform === helper.axisX ? "y" : "x", 14036 sign = /^(top|left)$/.test(orient) ? -1 : 1, 14037 rotate = params.tickTextRotate; 14038 14039 // line/text enter and path update 14040 14041 // tick text helpers 14042 14043 this.config.range = scale.rangeExtent ? scale.rangeExtent() : helper.scaleExtent((params.orgXScale || scale).range()); 14044 const innerTickSize = config.innerTickSize, 14045 tickLength = config.tickLength, 14046 range = config.range, 14047 id = params.id, 14048 tickTextPos = id && /^(x|y|y2)$/.test(id) ? params.config["axis_" + id + "_tick_text_position"] : { 14049 x: 0, 14050 y: 0 14051 }, 14052 prefix = id === "subX" ? "subchart_axis_x" : "axis_" + id, 14053 axisShow = params.config[prefix + "_show"], 14054 tickShow = { 14055 tick: axisShow ? params.config[prefix + "_tick_show"] : !1, 14056 text: axisShow ? params.config[prefix + "_tick_text_show"] : !1 14057 }; // // get the axis' tick position configuration 14058 // tick visiblity 14059 let $g; 14060 g.each(function () { 14061 var _this = this; 14062 const g = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 14063 let scale0 = this.__chart__ || scale, 14064 scale1 = helper.copyScale(); 14065 $g = g; 14066 this.__chart__ = scale1; 14067 config.tickOffset = params.isCategory ? Math.ceil((scale1(1) - scale1(0)) / 2) : 0; 14068 14069 // update selection - data join 14070 const path = g.selectAll(".domain").data([0]); 14071 14072 // enter + update selection 14073 path.enter().append("path").attr("class", "domain") 14074 // https://observablehq.com/@d3/d3-selection-2-0 14075 .merge(path).attr("d", function () { 14076 _newArrowCheck(this, _this); 14077 const outerTickSized = config.outerTickSize * sign; 14078 return isTopBottom ? "M" + range[0] + "," + outerTickSized + "V0H" + range[1] + "V" + outerTickSized : "M" + outerTickSized + "," + range[0] + "H0V" + range[1] + "H" + outerTickSized; 14079 }.bind(this)); 14080 if (tickShow.tick || tickShow.text) { 14081 // count of tick data in array 14082 const ticks = config.tickValues || helper.generateTicks(scale1, isLeftRight); 14083 14084 // set generated ticks 14085 ctx.generatedTicks = ticks; 14086 14087 // update selection 14088 let tick = g.selectAll(".tick").data(ticks, scale1); 14089 14090 // enter selection 14091 const tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick"), 14092 tickExit = tick.exit().remove(); // MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks. 14093 // enter + update selection 14094 tick = tickEnter.merge(tick); 14095 tickShow.tick && tickEnter.append("line"); 14096 tickShow.text && tickEnter.append("text"); 14097 const sizeFor1Char = AxisRendererHelper.getSizeFor1Char(tick), 14098 counts = []; 14099 let tspan = tick.select("text").selectAll("tspan").data(function (d, index) { 14100 var _this2 = this; 14101 _newArrowCheck(this, _this); 14102 const split = params.tickMultiline ? splitTickText(d, scale1, ticks, isLeftRight, sizeFor1Char.w) : isArray(helper.textFormatted(d)) ? helper.textFormatted(d).concat() : [helper.textFormatted(d)]; 14103 counts[index] = split.length; 14104 return split.map(function (splitted) { 14105 _newArrowCheck(this, _this2); 14106 return { 14107 index: index, 14108 splitted: splitted 14109 }; 14110 }.bind(this)); 14111 }.bind(this)); 14112 tspan.exit().remove(); 14113 tspan = tspan.enter().append("tspan").merge(tspan).text(function (d) { 14114 _newArrowCheck(this, _this); 14115 return d.splitted; 14116 }.bind(this)); 14117 14118 // set <tspan>'s position 14119 tspan.attr("x", isTopBottom ? 0 : tickLength * sign).attr("dx", function () { 14120 _newArrowCheck(this, _this); 14121 let dx = 0; 14122 if (/(top|bottom)/.test(orient) && rotate) { 14123 dx = 8 * Math.sin(Math.PI * (rotate / 180)) * (orient === "top" ? -1 : 1); 14124 } 14125 return dx + (tickTextPos.x || 0); 14126 }.bind(this)()).attr("dy", function (d, i) { 14127 _newArrowCheck(this, _this); 14128 let dy = 0; 14129 if (orient !== "top") { 14130 dy = sizeFor1Char.h; 14131 if (i === 0) { 14132 dy = isLeftRight ? -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - 3) : tickTextPos.y === 0 ? ".71em" : 0; 14133 } 14134 } 14135 return isNumber(dy) && tickTextPos.y ? dy + tickTextPos.y : dy || ".71em"; 14136 }.bind(this)); 14137 const lineUpdate = tick.select("line"), 14138 textUpdate = tick.select("text"); 14139 tickEnter.select("line").attr(axisPx + "2", innerTickSize * sign); 14140 tickEnter.select("text").attr(axisPx, tickLength * sign); 14141 ctx.setTickLineTextPosition(lineUpdate, textUpdate); 14142 14143 // Append <title> for tooltip display 14144 if (params.tickTitle) { 14145 const title = textUpdate.select("title"); 14146 (title.empty() ? textUpdate.append("title") : title).text(function (index) { 14147 _newArrowCheck(this, _this); 14148 return params.tickTitle[index]; 14149 }.bind(this)); 14150 } 14151 if (scale1.bandwidth) { 14152 const x = scale1, 14153 dx = x.bandwidth() / 2; 14154 scale0 = function (d) { 14155 _newArrowCheck(this, _this); 14156 return x(d) + dx; 14157 }.bind(this); 14158 scale1 = scale0; 14159 } else if (scale0.bandwidth) { 14160 scale0 = scale1; 14161 } else { 14162 tickTransform(tickExit, scale1); 14163 } 14164 14165 // when .flow(), it should follow flow's transition config 14166 // otherwise make to use ChartInternals.$T() 14167 tick = params.owner.state.flowing ? helper.transitionise(tick) : params.owner.$T(tick); 14168 tickTransform(tickEnter, scale0); 14169 tickTransform(tick.style("opacity", null), scale1); 14170 } 14171 }); 14172 this.g = $g; 14173 } 14174 14175 /** 14176 * Get generated ticks 14177 * @param {number}
14177 count Count of ticks 14178 * @returns {Array} Generated ticks 14179 * @private 14180 */; 14181 _proto.getGeneratedTicks = function getGeneratedTicks(count) { 14182 var _this$generatedTicks, 14183 _this3 = this; 14184 const len = ((_this$generatedTicks = this.generatedTicks) == null ? void 0 : _this$generatedTicks.length) - 1; 14185 let res = this.generatedTicks; 14186 if (len > count) { 14187 const interval = Math.round(len / count + .1); 14188 res = this.generatedTicks.map(function (v, i) { 14189 _newArrowCheck(this, _this3); 14190 return i % interval === 0 ? v : null; 14191 }.bind(this)).filter(function (v) { 14192 _newArrowCheck(this, _this3); 14193 return v !== null; 14194 }.bind(this)).splice(0, count); 14195 } 14196 return res; 14197 } 14198 14199 /** 14200 * Get tick x/y coordinate 14201 * @returns {{x: number, y: number}} 14202 * @private 14203 */; 14204 _proto.getTickXY = function getTickXY() { 14205 const config = this.config, 14206 pos = { 14207 x: 0, 14208 y: 0 14209 }; 14210 if (this.params.isCategory) { 14211 pos.x = config.tickCentered ? 0 : config.tickOffset; 14212 pos.y = config.tickCentered ? config.tickOffset : 0; 14213 } 14214 return pos; 14215 } 14216 14217 /** 14218 * Get tick size 14219 * @param {object} d data object 14220 * @returns {number} 14221 * @private 14222 */; 14223 _proto.getTickSize = function getTickSize(d) { 14224 const scale = this.helper.scale, 14225 config = this.config, 14226 _config2 = config, 14227 innerTickSize = _config2.innerTickSize, 14228 range = _config2.range, 14229 tickPosition = scale(d) + (config.tickCentered ? 0 : config.tickOffset); 14230 return range[0] < tickPosition && tickPosition < range[1] ? innerTickSize : 0; 14231 } 14232 14233 /** 14234 * Set tick's line & text position 14235 * @param {d3.selection} lineUpdate Line selection 14236 * @param {d3.selection} textUpdate Text selection 14237 * @private 14238 */; 14239 _proto.setTickLineTextPosition = function setTickLineTextPosition(lineUpdate, textUpdate) { 14240 var _this4 = this; 14241 const tickPos = this.getTickXY(), 14242 _this$config = this.config, 14243 innerTickSize = _this$config.innerTickSize, 14244 orient = _this$config.orient, 14245 tickLength = _this$config.tickLength, 14246 tickOffset = _this$config.tickOffset, 14247 rotate = this.params.tickTextRotate, 14248 textAnchorForText = function (r) { 14249 _newArrowCheck(this, _this4); 14250 const value = ["start", "end"]; 14251 orient === "top" && value.reverse(); 14252 return !r ? "middle" : value[r > 0 ? 0 : 1]; 14253 }.bind(this), 14254 textTransform = function (r) { 14255 _newArrowCheck(this, _this4); 14256 return r ? "rotate(" + r + ")" : null; 14257 }.bind(this), 14258 yForText = function (r) { 14259 _newArrowCheck(this, _this4); 14260 const r2 = r / (orient === "bottom" ? 15 : 23); 14261 return r ? 11.5 - 2.5 * r2 * (r > 0 ? 1 : -1) : tickLength; 14262 }.bind(this); 14263 switch (orient) { 14264 case "bottom": 14265 lineUpdate.attr("x1", tickPos.x).attr("x2", tickPos.x).attr("y2", this.getTickSize.bind(this)); 14266 textUpdate.attr("x", 0).attr("y", yForText(rotate)).style("text-anchor", textAnchorForText(rotate)).attr("transform", textTransform(rotate)); 14267 break; 14268 case "top": 14269 lineUpdate.attr("x2", 0).attr("y2", -innerTickSize); 14270 textUpdate.attr("x", 0).attr("y", -yForText(rotate) * 2).style("text-anchor", textAnchorForText(rotate)).attr("transform", textTransform(rotate)); 14271 break; 14272 case "left": 14273 lineUpdate.attr("x2", -innerTickSize).attr("y1", tickPos.y).attr("y2", tickPos.y); 14274 textUpdate.attr("x", -tickLength).attr("y", tickOffset).style("text-anchor", "end"); 14275 break; 14276 case "right": 14277 lineUpdate.attr("x2", innerTickSize).attr("y2", 0); 14278 textUpdate.attr("x", tickLength).attr("y", 0).style("text-anchor", "start"); 14279 } 14280 } 14281 14282 // this should be called only when category axis 14283 ; 14284 _proto.splitTickText = function splitTickText(d, scale, ticks, isLeftRight, charWidth) { 14285 const params = this.params, 14286 tickText = this.helper.textFormatted(d), 14287 splitted = isString(tickText) && tickText.indexOf("\n") > -1 ? tickText.split("\n") : []; 14288 if (splitted.length) { 14289 return splitted; 14290 } 14291 if (isArray(tickText)) { 14292 return tickText; 14293 } 14294 let tickWidth = params.tickWidth; 14295 if (!tickWidth || tickWidth <= 0) { 14296 tickWidth = isLeftRight ? 95 : params.isCategory ? Math.ceil(params.isInverted ? scale(ticks[0])
14296- scale(ticks[1]) : scale(ticks[1]) - scale(ticks[0])) - 12 : 110; 14297 } 14298 14299 // split given text by tick width size 14300 // eslint-disable-next-line 14301 function split(splitted, text) { 14302 let subtext, spaceIndex, textWidth; 14303 for (let i = 1; i < text.length; i++) { 14304 if (text.charAt(i) === " ") { 14305 spaceIndex = i; 14306 } 14307 subtext = text.substr(0, i + 1); 14308 textWidth = charWidth * subtext.length; 14309 14310 // if text width gets over tick width, split by space index or current index 14311 if (tickWidth < textWidth) { 14312 return split(splitted.concat(text.substr(0, spaceIndex || i)), text.slice(spaceIndex ? spaceIndex + 1 : i)); 14313 } 14314 } 14315 return splitted.concat(text); 14316 } 14317 return split(splitted, tickText + ""); 14318 }; 14319 _proto.scale = function scale(x) { 14320 if (!arguments.length) { 14321 return this.helper.scale; 14322 } 14323 this.helper.scale = x; 14324 return this; 14325 }; 14326 _proto.orient = function orient(x) { 14327 if (!arguments.length) { 14328 return this.config.orient; 14329 } 14330 this.config.orient = x in { 14331 top: 1, 14332 right: 1, 14333 bottom: 1, 14334 left: 1 14335 } ? x + "" : "bottom"; 14336 return this; 14337 }; 14338 _proto.tickFormat = function tickFormat(format) { 14339 const config = this.config; 14340 if (!arguments.length) { 14341 return config.tickFormat; 14342 } 14343 config.tickFormat = format; 14344 return this; 14345 }; 14346 _proto.tickCentered = function tickCentered(isCentered) { 14347 const config = this.config; 14348 if (!arguments.length) { 14349 return config.tickCentered; 14350 } 14351 config.tickCentered = isCentered; 14352 return this; 14353 } 14354 14355 /** 14356 * Return tick's offset value. 14357 * The value will be set for 'category' axis type. 14358 * @returns {number} 14359 * @private 14360 */; 14361 _proto.tickOffset = function tickOffset() { 14362 return this.config.tickOffset; 14363 } 14364 14365 /** 14366 * Get tick interval count 14367 * @private 14368 * @param {number} size Total data size 14369 * @returns {number} 14370 */; 14371 _proto.tickInterval = function tickInterval(size) { 14372 var _this5 = this; 14373 const _this$config2 = this.config, 14374 outerTickSize = _this$config2.outerTickSize, 14375 tickOffset = _this$config2.tickOffset, 14376 tickValues = _this$config2.tickValues; 14377 let interval; 14378 if (this.params.isCategory) { 14379 interval = tickOffset * 2; 14380 } else { 14381 const length = this.g.select("path.domain").node().getTotalLength() - outerTickSize * 2; 14382 interval = length / (size || this.g.selectAll("line").size()); 14383 14384 // get the interval by its values 14385 const intervalByValue = tickValues ? tickValues.map(function (v, i, arr) { 14386 _newArrowCheck(this, _this5); 14387 const next = i + 1; 14388 return next < arr.length ? this.helper.scale(arr[next]) - this.helper.scale(v) : null; 14389 }.bind(this)).filter(Boolean) : []; 14390 interval = Math.min.apply(Math, intervalByValue.concat([interval])); 14391 } 14392 return interval === Infinity ? 0 : interval; 14393 }; 14394 _proto.ticks = function ticks() { 14395 const config = this.config; 14396 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 14397 args[_key] = arguments[_key]; 14398 } 14399 if (!args.length) { 14400 return config.tickArguments; 14401 } 14402 config.tickArguments = toArray(args); 14403 return this; 14404 }; 14405 _proto.tickCulling = function tickCulling(culling) { 14406 const config = this.config; 14407 if (!arguments.length) { 14408 return config.tickCulling; 14409 } 14410 config.tickCulling = culling; 14411 return this; 14412 }; 14413 _proto.tickValues = function tickValues(x) { 14414 var _this6 = this; 14415 const config = this.config; 14416 if (isFunction(x)) { 14417 config.tickValues = function () { 14418 _newArrowCheck(this, _this6); 14419 return x(this.helper.scale.domain()); 14420 }.bind(this); 14421 } else { 14422 if (!arguments.length) { 14423 return config.tickValues; 14424 } 14425 config.tickValues = x; 14426 } 14427 return this; 14428 }; 14429 _proto.setTransition = function setTransition(t) { 14430 this.config.transition = t; 14431 return this; 14432 }; 14433 return AxisRenderer; 14434}(); 14435 14436;// CONCATENATED MODULE: ./src/ChartInternal/Axis/Axis.ts 14437 14438/** 14439 * Copyright (c) 2017 ~ present NAVER Corp. 14440 * billboard.js project is licensed under the MIT license 14441 */ 14442 14443 14444 14445 14446 14447/* harmony default export */ var Axis = ({ 14448 getAxisInstance: function getAxisInstance() { 14449 return this.axis || new Axis_Axis(this); 14450 } 14451}); 14452let Axis_Axis = /*#__PURE__*/function () { 14453 function Axis(owner) { 14454 this.owner = void 0; 14455 this.x = void 0; 14456 this.subX = void 0; 14457 this.y = void 0; 14458 this.y2 = void 0; 14459 this.axesList = {}; 14460 this.tick = { 14461 x: null, 14462 y: null, 14463 y2: null 14464 }; 14465 this.xs = []; 14466 this.orient = { 14467 x: "bottom", 14468 y: "left", 14469 y2: "right", 14470 subX: "bottom" 14471 }; 14472 this.owner = owner; 14473 this.setOrient(); 14474 } 14475 var _proto = Axis.prototype; 14476 _proto.getAxisClassName = function getAxisClassName(id) { 14477 return $AXIS.axis + " " + $AXIS["axis" + capitalize(id)]; 14478 }; 14479 _proto.isHorizontal = function isHorizontal($$, forHorizontal) { 14480 const isRotated = $$.config.axis_rotated; 14481 return forHorizontal ? isRotated : !isRotated; 14482 }; 14483 _proto.isCategorized = function isCategorized() { 14484 const _this$owner = this.owner, 14485 config = _this$owner.config, 14486 state = _this$owner.state; 14487 return config.axis_x_type.indexOf("category") >= 0 || state.hasRadar; 14488 }; 14489 _proto.isCustomX = function isCustomX() { 14490 const config = this.owner.config; 14491 return !this.isTimeSeries() && (config.data_x || notEmpty(config.data_xs)); 14492 }; 14493 _proto.isTimeSeries = function isTimeSeries(id) { 14494 if (id === void 0) { 14495 id = "x"; 14496 } 14497 return this.owner.config["axis_" + id + "_type"] === "timeseries"; 14498 }; 14499 _proto.isLog = function isLog(id) { 14500 if (id === void 0) { 14501 id = "x"; 14502 } 14503 return this.owner.config["axis_" + id + "_type"] === "log"; 14504 }; 14505 _proto.isTimeSeriesY = function isTimeSeriesY() { 14506 return this.isTimeSeries("y"); 14507 }; 14508 _proto.getAxisType = function getAxisType(id) { 14509 if (id === void 0) { 14510 id = "x"; 14511 } 14512 let type = "linear"; 14513 if (this.isTimeSeries(id)) { 14514 type = this.owner.config.axis_x_localtime ? "time" : "utc"; 14515 } else if (this.isLog(id)) { 14516 type = "log"; 14517 } 14518 return type; 14519 };
14520 _proto.init = function init() { 14521 var _this = this; 14522 const $$ = this.owner, 14523 config = $$.config, 14524 _$$$$el = $$.$el, 14525 main = _$$$$el.main, 14526 axis = _$$$$el.axis, 14527 clip = $$.state.clip, 14528 isRotated = config.axis_rotated, 14529 target = ["x", "y"]; 14530 config.axis_y2_show && target.push("y2"); 14531 target.forEach(function (v) { 14532 var _this2 = this; 14533 _newArrowCheck(this, _this); 14534 const classAxis = this.getAxisClassName(v), 14535 classLabel = $AXIS["axis" + v.toUpperCase() + "Label"]; 14536 axis[v] = main.append("g").attr("class", classAxis).attr("clip-path", function () { 14537 _newArrowCheck(this, _this2); 14538 let res = null; 14539 if (v === "x") { 14540 res = clip.pathXAxis; 14541 } else if (v === "y") { 14542 // || v === "y2") { 14543 res = clip.pathYAxis; 14544 } 14545 return res; 14546 }.bind(this)).attr("transform", $$.getTranslate(v)).style("visibility", config["axis_" + v + "_show"] ? null : "hidden"); 14547 axis[v].append("text").attr("class", classLabel).attr("transform", ["rotate(-90)", null][v === "x" ? +!isRotated : +isRotated]).style("text-anchor", function () { 14548 _newArrowCheck(this, _this2); 14549 return this.textAnchorForAxisLabel(v); 14550 }.bind(this)); 14551 this.generateAxes(v); 14552 }.bind(this)); 14553 } 14554 14555 /** 14556 * Set axis orient according option value 14557 * @private 14558 */; 14559 _proto.setOrient = function setOrient() { 14560 const $$ = this.owner, 14561 _$$$config = $$.config, 14562 isRotated = _$$$config.axis_rotated, 14563 yInner = _$$$config.axis_y_inner, 14564 y2Inner = _$$$config.axis_y2_inner; 14565 this.orient = { 14566 x: isRotated ? "left" : "bottom", 14567 y: isRotated ? yInner ? "top" : "bottom" : yInner ? "right" : "left", 14568 y2: isRotated ? y2Inner ? "bottom" : "top" : y2Inner ? "left" : "right", 14569 subX: isRotated ? "left" : "bottom" 14570 }; 14571 } 14572 14573 /** 14574 * Generate axes 14575 * It's used when axis' axes option is set 14576 * @param {string} id Axis id 14577 * @private 14578 */; 14579 _proto.generateAxes = function generateAxes(id) { 14580 var _this3 = this; 14581 const $$ = this.owner, 14582 config = $$.config, 14583 axes = [], 14584 axesConfig = config["axis_" + id + "_axes"], 14585 isRotated = config.axis_rotated; 14586 let d3Axis; 14587 if (id === "x") { 14588 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; 14589 } else if (id === "y") { 14590 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; 14591 } else if (id === "y2") { 14592 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; 14593 } 14594 if (axesConfig.length) { 14595 axesConfig.forEach(function (v) { 14596 var _this4 = this; 14597 _newArrowCheck(this, _this3); 14598 const tick = v.tick || {}, 14599 scale = $$.scale[id].copy(); 14600 v.domain && scale.domain(v.domain); 14601 axes.push(d3Axis(scale).ticks(tick.count).tickFormat(isFunction(tick.format) ? tick.format.bind($$.api) : function (x) { 14602 _newArrowCheck(this, _this4); 14603 return x; 14604 }.bind(this)).tickValues(tick.values).tickSizeOuter(tick.outer === !1 ? 0 : 6)); 14605 }.bind(this)); 14606 } 14607 this.axesList[id] = axes; 14608 } 14609 14610 /** 14611 * Update axes nodes 14612 * @private 14613 */; 14614 _proto.updateAxes = function updateAxes() { 14615 var _this5 = this; 14616 const $$ = this.owner, 14617 config = $$.config, 14618 main = $$.$el.main, 14619 $T = $$.$T; 14620 Object.keys(this.axesList).forEach(function (id) { 14621 var _this6 = this; 14622 _newArrowCheck(this, _this5); 14623 const axesConfig = config["axis_" + id + "_axes"], 14624 scale = $$.scale[id].copy(), 14625 range = scale.range(); 14626 this.axesList[id].forEach(function (v, i) { 14627 var _this7 = this; 14628 _newArrowCheck(this, _this6); 14629 const axisRange = v.scale().range(); 14630 14631 // adjust range value with the current 14632 // https://github.com/naver/billboard.js/issues/859 14633 if (!range.every(function (v, i) { 14634 _newArrowCheck(this, _this7); 14635 return v === axisRange[i]; 14636 }.bind(this))) { 14637 v.scale().range(range); 14638 } 14639 const className = this.getAxisClassName(id) + "-" + (i + 1); 14640 let g = main.select("." + className.replace(/\s/, ".")); 14641 if (g.empty()) { 14642 g = main.append("g").attr("class", className).style("visibility", config["axis_" + id + "_show"] ? null : "hidden").call(v); 14643 } else { 14644 axesConfig[i].domain && scale.domain(axesConfig[i].domain); 14645 $T(g).call(v.scale(scale)); 14646 } 14647 g.attr("transform", $$.getTranslate(id, i + 1)); 14648 }.bind(this)); 14649 }.bind(this)); 14650 } 14651 14652 /** 14653 * Set Axis & tick values 14654 * called from: updateScales() 14655 * @param {string} id Axis id string 14656 * @param {d3Scale}
14656 scale Scale 14657 * @param {boolean} outerTick If show outer tick 14658 * @param {boolean} noTransition If with no transition 14659 * @private 14660 */; 14661 _proto.setAxis = function setAxis(id, scale, outerTick, noTransition) { 14662 const $$ = this.owner; 14663 if (id !== "subX") { 14664 this.tick[id] = this.getTickValues(id); 14665 } 14666 14667 // @ts-ignore 14668 this[id] = this.getAxis(id, scale, outerTick, 14669 // do not transit x Axis on zoom and resizing 14670 // https://github.com/naver/billboard.js/issues/1949 14671 id === "x" && ($$.scale.zoom || $$.config.subchart_show || $$.state.resizing) ? !0 : noTransition); 14672 } 14673 14674 // called from : getMaxTickSize() 14675 ; 14676 _proto.getAxis = function getAxis(id, scale, outerTick, noTransition, noTickTextRotate) { 14677 var _this8 = this; 14678 const $$ = this.owner, 14679 config = $$.config, 14680 isX = /^(x|subX)$/.test(id), 14681 type = isX ? "x" : id, 14682 isCategory = isX && this.isCategorized(), 14683 orient = this.orient[id], 14684 tickTextRotate = noTickTextRotate ? 0 : $$.getAxisTickRotate(type); 14685 let tickFormat; 14686 if (isX) { 14687 tickFormat = id === "subX" ? $$.format.subXAxisTick : $$.format.xAxisTick; 14688 } else { 14689 const fn = config["axis_" + id + "_tick_format"]; 14690 if (isFunction(fn)) { 14691 tickFormat = fn.bind($$.api); 14692 } 14693 } 14694 let tickValues = this.tick[type]; 14695 const axisParams = mergeObj({ 14696 outerTick: outerTick, 14697 noTransition: noTransition, 14698 config: config, 14699 id: id, 14700 tickTextRotate: tickTextRotate, 14701 owner: $$ 14702 }, isX && { 14703 isCategory: isCategory, 14704 isInverted: config.axis_x_inverted, 14705 tickMultiline: config.axis_x_tick_multiline, 14706 tickWidth: config.axis_x_tick_width, 14707 tickTitle: isCategory && config.axis_x_tick_tooltip && $$.api.categories(), 14708 orgXScale: $$.scale.x 14709 }); 14710 if (!isX) { 14711 axisParams.tickStepSize = config["axis_" + type + "_tick_stepSize"]; 14712 } 14713 const axis = new AxisRenderer(axisParams).scale(isX && $$.scale.zoom || scale).orient(orient); 14714 if (isX && this.isTimeSeries() && tickValues && !isFunction(tickValues)) { 14715 const fn = parseDate.bind($$); 14716 tickValues = tickValues.map(function (v) { 14717 _newArrowCheck(this, _this8); 14718 return fn(v); 14719 }.bind(this)); 14720 } else if (!isX && this.isTimeSeriesY()) { 14721 // https://github.com/d3/d3/blob/master/CHANGES.md#time-intervals-d3-time 14722 axis.ticks(config.axis_y_tick_time_value); 14723 tickValues = null; 14724 } 14725 tickValues && axis.tickValues(tickValues); 14726 14727 // Set tick 14728 axis.tickFormat(tickFormat || !isX && $$.isStackNormalized() && function (x) { 14729 _newArrowCheck(this, _this8); 14730 return x + "%"; 14731 }.bind(this)); 14732 if (isCategory) { 14733 axis.tickCentered(config.axis_x_tick_centered); 14734 if (isEmpty(config.axis_x_tick_culling)) { 14735 config.axis_x_tick_culling = !1; 14736 } 14737 } 14738 const tickCount = config["axis_" + type + "_tick_count"]; 14739 tickCount && axis.ticks(tickCount); 14740 return axis; 14741 }; 14742 _proto.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) { 14743 const $$ = this.owner, 14744 config = $$.config, 14745 fit = config.axis_x_tick_fit;
14746 let count = config.axis_x_tick_count, 14747 values; 14748 if (fit || count && fit) { 14749 values = $$.mapTargetsToUniqueXs(targets); 14750 14751 // if given count is greater than the value length, then limit the count. 14752 if (this.isCategorized() && count > values.length) { 14753 count = values.length; 14754 } 14755 values = this.generateTickValues(values, count, this.isTimeSeries()); 14756 } 14757 if (axis) { 14758 axis.tickValues(values); 14759 } else if (this.x) { 14760 var _this$subX; 14761 this.x.tickValues(values); 14762 (_this$subX = this.subX) == null || _this$subX.tickValues(values); 14763 } 14764 return values; 14765 }; 14766 _proto.getId = function getId(id) { 14767 const _this$owner2 = this.owner, 14768 config = _this$owner2.config, 14769 scale = _this$owner2.scale; 14770 let axis = config.data_axes[id]; 14771 14772 // when data.axes option has 'y2', but 'axis.y2.show=true' isn't set will return 'y' 14773 if (!axis || !scale[axis]) { 14774 axis = "y"; 14775 } 14776 return axis; 14777 }; 14778 _proto.getXAxisTickFormat = function getXAxisTickFormat(forSubchart) { 14779 var _this9 = this; 14780 const $$ = this.owner, 14781 config = $$.config, 14782 format = $$.format, 14783 tickFormat = forSubchart ? config.subchart_axis_x_tick_format || config.axis_x_tick_format : config.axis_x_tick_format, 14784 isTimeSeries = this.isTimeSeries(), 14785 isCategorized = this.isCategorized(); 14786 14787 // enable different tick format for x and subX - subX format defaults to x format if not defined 14788 14789 let currFormat; 14790 if (tickFormat) { 14791 if (isFunction(tickFormat)) { 14792 currFormat = tickFormat.bind($$.api); 14793 } else if (isTimeSeries) { 14794 currFormat = function (date) { 14795 _newArrowCheck(this, _this9); 14796 return date ? format.axisTime(tickFormat)(date) : ""; 14797 }.bind(this); 14798 } 14799 } else { 14800 currFormat = isTimeSeries ? format.defaultAxisTime : isCategorized ? $$.categoryName : function (v) { 14801 _newArrowCheck(this, _this9); 14802 return v < 0 ? v.toFixed(0) : v; 14803 }.bind(this); 14804 } 14805 return isFunction(currFormat) ? function (v) { 14806 _newArrowCheck(this, _this9); 14807 return currFormat.apply($$, isCategorized ? [v, $$.categoryName(v)] : [v]); 14808 }.bind(this) : currFormat; 14809 }; 14810 _proto.getTickValues = function getTickValues(id) { 14811 const $$ = this.owner, 14812 tickValues = $$.config["axis_" + id + "_tick_values"], 14813 axis = $$[id + "Axis"]; 14814 return (isFunction(tickValues) ? tickValues.call($$.api) : tickValues) || (axis ? axis.tickValues() : undefined); 14815 }; 14816 _proto.getLabelOptionByAxisId = function getLabelOptionByAxisId(id) { 14817 return this.owner.config["axis_" + id + "_label"]; 14818 }; 14819 _proto.getLabelText = function getLabelText(id) { 14820 const option = this.getLabelOptionByAxisId(id); 14821 return isString(option) ? option : option ? option.text : null; 14822 }; 14823 _proto.setLabelText = function setLabelText(id, text) { 14824 const $$ = this.owner, 14825 config = $$.config, 14826 option = this.getLabelOptionByAxisId(id); 14827 if (isString(option)) { 14828 config["axis_" + id + "_label"] = text; 14829 } else if (option) { 14830 option.text = text; 14831 } 14832 }; 14833 _proto.getLabelPosition = function getLabelPosition(id, defaultPosition) { 14834 var _this10 = this; 14835 const isRotated = this.owner.config.axis_rotated, 14836 option = this.getLabelOptionByAxisId(id), 14837 position = isObjectType(option) && option.position ? option.position : defaultPosition[+!isRotated], 14838 has = function (v) { 14839 _newArrowCheck(this, _this10); 14840 return !!~position.indexOf(v); 14841 }.bind(this); 14842 return { 14843 isInner: has("inner"), 14844 isOuter: has("outer"), 14845 isLeft: has("left"), 14846 isCenter: has("center"), 14847 isRight: has("right"), 14848 isTop: has("top"), 14849 isMiddle: has("middle"), 14850 isBottom: has("bottom") 14851 }; 14852 }; 14853 _proto.getAxisLabelPosition = function getAxisLabelPosition(id) { 14854 return this.getLabelPosition(id, id === "x" ? ["inner-top", "inner-right"] : ["inner-right", "inner-top"]); 14855 }; 14856 _proto.getLabelPositionById = function getLabelPositionById(id) { 14857 return this.getAxisLabelPosition(id); 14858 }; 14859 _proto.xForAxisLabel = function xForAxisLabel(id) { 14860 const $$ = this.owner, 14861 _$$$state = $$.state, 14862 width = _$$$state.width, 14863 height = _$$$state.height, 14864 position = this.getAxisLabelPosition(id); 14865 let x = position.isMiddle ? -height / 2 : 0; 14866 if (this.isHorizontal($$, id !== "x")) { 14867 x = position.isLeft ? 0 : position.isCenter ? width / 2 : width; 14868 } else if (position.isBottom) { 14869 x = -height; 14870 } 14871 return x; 14872 }; 14873 _proto.dxForAxisLabel = function dxForAxisLabel(id) { 14874 const $$ = this.owner, 14875 position = this.getAxisLabelPosition(id); 14876 let dx = position.isBottom ? "0.5em" : "0"; 14877 if (this.isHorizontal($$, id !== "x")) { 14878 dx = position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0"; 14879 } else if (position.isTop) { 14880 dx = "-0.5em"; 14881 } 14882 return dx; 14883 }; 14884 _proto.textAnchorForAxisLabel = function textAnchorForAxisLabel(id) { 14885 const $$ = this.owner, 14886 position = this.getAxisLabelPosition(id); 14887 let anchor = position.isMiddle ? "middle" : "end"; 14888 if (this.isHorizontal($$, id !== "x")) { 14889 anchor = position.isLeft ? "start" : position.isCenter ? "middle" : "end"; 14890 } else if (position.isBottom) { 14891 anchor = "start"; 14892 } 14893 return anchor; 14894 }; 14895 _proto.dyForAxisLabel = function dyForAxisLabel(id) { 14896 const $$ = this.owner, 14897 config = $$.config, 14898 isRotated = config.axis_rotated, 14899 isInner = this.getAxisLabelPosition(id).isInner, 14900 tickRotate = config["axis_" + id + "_tick_rotate"] ? $$.getHorizontalAxisHeight(id) : 0, 14901 _this$getMaxTickSize = this.getMaxTickSize(id), 14902 maxTickWidth = _this$getMaxTickSize.width; 14903 let dy; 14904 if (id === "x") { 14905 const xHeight = config.axis_x_height; 14906 if (isRotated) { 14907 dy = isInner ? "1.2em" : -25 - maxTickWidth; 14908 } else if (isInner) { 14909 dy = "-0.5em"; 14910 } else if (xHeight) { 14911 dy = xHeight - 10; 14912 } else if (tickRotate) { 14913 dy = tickRotate - 10; 14914 } else { 14915 dy = "3em"; 14916 } 14917 } else { 14918 dy = { 14919 y: ["-0.5em", 10, "3em", "1.2em", 10], 14920 y2: ["1.2em", -20, "-2.2em", "-0.5em", 15] 14921 }[id]; 14922 if (isRotated) { 14923 if (isInner) { 14924 dy = dy[0]; 14925 } else if (tickRotate) { 14926 dy = tickRotate * (id === "y2" ? -1 : 1) - dy[1]; 14927 } else { 14928 dy = dy[2]; 14929 } 14930 } else { 14931 dy = isInner ? dy[3] : (dy[4] + (config["axis_" + id + "_inner"] ? 0 : maxTickWidth + dy[4])) * (id === "y" ? -1 : 1); 14932 } 14933 } 14934 return dy; 14935 } 14936 14937 /** 14938 * Get max tick size 14939 * @param {string} id axis id string 14940 * @param {boolean} withoutRecompute wheather or not to recompute 14941 * @returns {object} {width, height} 14942 * @private 14943 */; 14944 _proto.getMaxTickSize = function getMaxTickSize(id, withoutRecompute) { 14945 var _this11 = this; 14946 const $$ = this.owner, 14947 config = $$.config, 14948 current = $$.state.current, 14949 _$$$$el2 = $$.$el, 14950 svg = _$$$$el2.svg, 14951 chart = _$$$$el2.chart, 14952 currentTickMax = current.maxTickSize[id], 14953 configPrefix = "axis_" + id, 14954 max = { 14955 width: 0, 14956 height: 0 14957 }; 14958 if (withoutRecompute || !config[configPrefix + "_show"] || currentTickMax.width > 0 && $$.filterTargetsToShow().length === 0) { 14959 return currentTickMax; 14960 } 14961 if (svg) { 14962 const isYAxis = /^y2?$/.test(id),
14963 targetsToShow = $$.filterTargetsToShow($$.data.targets), 14964 scale = $$.scale[id].copy().domain($$["get" + (isYAxis ? "Y" : "X") + "Domain"](targetsToShow, id)), 14965 domain = scale.domain(), 14966 isDomainSame = domain[0] === domain[1] && domain.every(function (v) { 14967 _newArrowCheck(this, _this11); 14968 return v > 0; 14969 }.bind(this)), 14970 isCurrentMaxTickDomainSame = isArray(currentTickMax.domain) && currentTickMax.domain[0] === currentTickMax.domain[1] && currentTickMax.domain.every(function (v) { 14971 _newArrowCheck(this, _this11); 14972 return v > 0; 14973 }.bind(this)); 14974 // do not compute if domain or currentMaxTickDomain is same 14975 if (isDomainSame || isCurrentMaxTickDomainSame) { 14976 return currentTickMax.size; 14977 } else { 14978 currentTickMax.domain = domain; 14979 } 14980 14981 // reset old max state value to prevent from new data loading 14982 if (!isYAxis) { 14983 currentTickMax.ticks.splice(0); 14984 } 14985 const axis = this.getAxis(id, scale, !1, !1, !0), 14986 tickRotate = config[configPrefix + "_tick_rotate"], 14987 tickCount = config[configPrefix + "_tick_count"], 14988 tickValues = config[configPrefix + "_tick_values"]; 14989 // Make to generate the final tick text to be rendered 14990 // https://github.com/naver/billboard.js/issues/920 14991 // Do not generate if 'tick values' option is given 14992 // https://github.com/naver/billboard.js/issues/1251 14993 if (!tickValues && tickCount) { 14994 axis.tickValues(this.generateTickValues(domain, tickCount, isYAxis ? this.isTimeSeriesY() : this.isTimeSeries())); 14995 } 14996 isYAxis || this.updateXAxisTickValues(targetsToShow, axis); 14997 const dummy = chart.append("svg").style("visibility", "hidden").style("position", "fixed").style("top", "0").style("left", "0"); 14998 axis.create(dummy); 14999 dummy.selectAll("text").attr("transform", isNumber(tickRotate) ? "rotate(" + tickRotate + ")" : null).each(function (d, i) { 15000 const _this$getBoundingClie = this.getBoundingClientRect(), 15001 width = _this$getBoundingClie.width, 15002 height = _this$getBoundingClie.height; 15003 max.width = Math.max(max.width, width); 15004 max.height = Math.max(max.height, height); 15005 15006 // cache tick text width for getXAxisTickTextY2Overflow() 15007 if (!isYAxis) { 15008 currentTickMax.ticks[i] = width; 15009 } 15010 }); 15011 dummy.remove(); 15012 } 15013 Object.keys(max).forEach(function (key) { 15014 _newArrowCheck(this, _this11); 15015 if (max[key] > 0) { 15016 currentTickMax[key] = max[key]; 15017 } 15018 }.bind(this)); 15019 return currentTickMax; 15020 }; 15021 _proto.getXAxisTickTextY2Overflow = function getXAxisTickTextY2Overflow(defaultPadding) { 15022 const $$ = this.owner, 15023 axis = $$.axis, 15024 config = $$.config, 15025 state = $$.state, 15026 xAxisTickRotate = $$.getAxisTickRotate("x"); 15027 if ((axis.isCategorized() || axis.isTimeSeries()) && config.axis_x_tick_fit && (!config.axis_x_tick_culling || isEmpty(config.axis_x_tick_culling)) && !config.axis_x_tick_multiline && xAxisTickRotate > 0 && xAxisTickRotate < 90) { 15028 const widthWithoutCurrentPaddingLeft = state.current.width - $$.getCurrentPaddingByDirection("left"), 15029 maxOverflow = this.getXAxisTickMaxOverflow(xAxisTickRotate, widthWithoutCurrentPaddingLeft - defaultPadding), 15030 xAxisTickTextY2Overflow = Math.max(0, maxOverflow) + defaultPadding; 15031 // for display inconsistencies between browsers 15032 15033 return Math.min(xAxisTickTextY2Overflow, widthWithoutCurrentPaddingLeft / 2); 15034 } 15035 return 0; 15036 }; 15037 _proto.getXAxisTickMaxOverflow = function getXAxisTickMaxOverflow(xAxisTickRotate, widthWithoutCurrentPaddingLeft) { 15038 const $$ = this.owner, 15039 axis = $$.axis, 15040 config = $$.config, 15041 state = $$.state, 15042 isTimeSeries = axis.isTimeSeries(), 15043 tickTextWidths = state.current.maxTickSize.x.ticks, 15044 tickCount = tickTextWidths.length, 15045 _state$axis$x$padding = state.axis.x.padding, 15046 left = _state$axis$x$padding.left, 15047 right = _state$axis$x$padding.right; 15048 let maxOverflow = 0; 15049 const remaining = tickCount - (isTimeSeries && config.axis_x_tick_fit ? .5 : 0); 15050 for (let i = 0; i < tickCount; i++) { 15051 const tickIndex = i + 1, 15052 rotatedTickTextWidth = Math.cos(Math.PI * xAxisTickRotate / 180) * tickTextWidths[i], 15053 ticksBeforeTickText = tickIndex - (isTimeSeries ? 1 : .5) + left; 15054 // Skip ticks if there are no ticks before them 15055 if (ticksBeforeTickText <= 0) { 15056 continue; 15057 } 15058 const tickLength = (widthWithoutCurrentPaddingLeft - rotatedTickTextWidth) / ticksBeforeTickText; 15059 maxOverflow = Math.max(maxOverflow, rotatedTickTextWidth - tickLength / 2 - ((remaining - tickIndex) * tickLength + right * tickLength)); 15060 } 15061 const filteredTargets = $$.filterTargetsToShow($$.data.targets); 15062 let tickOffset = 0; 15063 if (!isTimeSeries && config.axis_x_tick_count <= filteredTargets.length && filteredTargets[0].values.length) { 15064 const scale = getScale($$.axis.getAxisType("x"), 0, widthWithoutCurrentPaddingLeft - maxOverflow).domain([left * -1, $$.getXDomainMax($$.data.targets) + 1 + right]);
15065 tickOffset = Math.ceil((scale(1) - scale(0)) / 2); 15066 } 15067 return maxOverflow + tickOffset; 15068 }; 15069 _proto.updateLabels = function updateLabels(withTransition) { 15070 var _this12 = this; 15071 const $$ = this.owner, 15072 main = $$.$el.main, 15073 $T = $$.$T, 15074 labels = { 15075 x: main.select("." + $AXIS.axisX + " ." + $AXIS.axisXLabel), 15076 y: main.select("." + $AXIS.axisY + " ." + $AXIS.axisYLabel), 15077 y2: main.select("." + $AXIS.axisY2 + " ." + $AXIS.axisY2Label) 15078 }; 15079 Object.keys(labels).filter(function (id) { 15080 _newArrowCheck(this, _this12); 15081 return !labels[id].empty(); 15082 }.bind(this)).forEach(function (v) { 15083 var _this13 = this; 15084 _newArrowCheck(this, _this12); 15085 const node = labels[v]; 15086 15087 // @check $$.$T(node, withTransition) 15088 $T(node, withTransition).attr("x", function () { 15089 _newArrowCheck(this, _this13); 15090 return this.xForAxisLabel(v); 15091 }.bind(this)).attr("dx", function () { 15092 _newArrowCheck(this, _this13); 15093 return this.dxForAxisLabel(v); 15094 }.bind(this)).attr("dy", function () { 15095 _newArrowCheck(this, _this13); 15096 return this.dyForAxisLabel(v); 15097 }.bind(this)).text(function () { 15098 _newArrowCheck(this, _this13); 15099 return this.getLabelText(v); 15100 }.bind(this)); 15101 }.bind(this)); 15102 } 15103 15104 /** 15105 * Get axis padding value 15106 * @param {number|object} padding Padding object 15107 * @param {string} key Key string of padding 15108 * @param {Date|number} defaultValue Default value 15109 * @param {number} domainLength Domain length 15110 * @returns {number} Padding value in scale 15111 * @private 15112 */; 15113 _proto.getPadding = function getPadding(padding, key, defaultValue, domainLength) { 15114 const p = isNumber(padding) ? padding : padding[key]; 15115 if (!isValue(p)) { 15116 return defaultValue; 15117 } 15118 return this.owner.convertPixelToScale(/(bottom|top)/.test(key) ? "y" : "x", p, domainLength); 15119 }; 15120 _proto.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) { 15121 var _this14 = this; 15122 let tickValues = values; 15123 if (tickCount) { 15124 const targetCount = isFunction(tickCount) ? tickCount() : tickCount; 15125 15126 // compute ticks according to tickCount 15127 if (targetCount === 1) { 15128 tickValues = [values[0]]; 15129 } else if (targetCount === 2) { 15130 tickValues = [values[0], values[values.length - 1]]; 15131 } else if (targetCount > 2) { 15132 const isCategorized = this.isCategorized(), 15133 count = targetCount - 2, 15134 start = values[0], 15135 end = values[values.length - 1]; 15136 let tickValue; 15137 15138 // re-construct unique values 15139 tickValues = [start]; 15140 for (let i = 0; i < count; i++) { 15141 tickValue = +start + (end - start) / (count + 1) * (i + 1); 15142 tickValues.push(forTimeSeries ? new Date(tickValue) : isCategorized ? Math.round(tickValue) : tickValue); 15143 } 15144 tickValues.push(end); 15145 } 15146 } 15147 if (!forTimeSeries) { 15148 tickValues = tickValues.sort(function (a, b) { 15149 _newArrowCheck(this, _this14); 15150 return a - b; 15151 }.bind(this)); 15152 } 15153 return tickValues; 15154 }; 15155 _proto.generateTransitions = function generateTransitions(withTransition) { 15156 var _this15 = this; 15157 const $$ = this.owner, 15158 axis = $$.$el.axis, 15159 $T = $$.$T, 15160 _map = ["x", "y", "y2", "subX"].map(function (v) { 15161 _newArrowCheck(this, _this15); 15162 return $T(axis[v], withTransition); 15163 }.bind(this)), 15164 axisX = _map[0], 15165 axisY = _map[1], 15166 axisY2 = _map[2], 15167 axisSubX = _map[3]; 15168 return { 15169 axisX: axisX, 15170 axisY: axisY, 15171 axisY2: axisY2, 15172 axisSubX: axisSubX 15173 }; 15174 }; 15175 _proto.redraw = function redraw(transitions, isHidden, isInit) { 15176 var _this16 = this; 15177 const $$ = this.owner, 15178 config = $$.config, 15179 $el = $$.$el, 15180 opacity = isHidden ? "0" : null; 15181 ["x", "y", "y2", "subX"].forEach(function (id) { 15182 _newArrowCheck(this, _this16); 15183 const axis = this[id], 15184 $axis = $el.axis[id]; 15185 if (axis && $axis) { 15186 if (!isInit && !config.transition_duration) { 15187 axis.config.withoutTransition = !0; 15188 } 15189 $axis.style("opacity", opacity); 15190 axis.create(transitions["axis" + capitalize(id)]); 15191 } 15192 }.bind(this)); 15193 this.updateAxes(); 15194 } 15195 15196 /** 15197 * Redraw axis 15198 * @param {Array} targetsToShow targets data to be shown 15199 * @param {object} wth option object 15200 * @param {d3.Transition} transitions Transition object 15201 * @param {object} flow flow object 15202 * @param {boolean} isInit called from initialization 15203 * @private 15204 */; 15205 _proto.redrawAxis = function redrawAxis(targetsToShow, wth, transitions, flow, isInit) { 15206 var _this17 = this; 15207 const $$ = this.owner, 15208 config = $$.config, 15209 scale = $$.scale, 15210 $el = $$.$el, 15211 hasZoom = !!scale.zoom; 15212 let xDomainForZoom; 15213 if (!hasZoom && this.isCategorized() && targetsToShow.length === 0) { 15214 scale.x.domain([0, $el.axis.x.selectAll(".tick").size()]); 15215 } 15216 if (scale.x && targetsToShow.length) { 15217 hasZoom || $$.updateXDomain(targetsToShow, wth.UpdateXDomain, wth.UpdateOrgXDomain, wth.TrimXDomain); 15218 if (!config.axis_x_tick_values) { 15219 this.updateXAxisTickValues(targetsToShow); 15220 } 15221 } else if (this.x) { 15222 var _this$subX2; 15223 this.x.tickValues([]); 15224 (_this$subX2 = this.subX) == null || _this$subX2.tickValues([]); 15225 } 15226 if (config.zoom_rescale && !flow) { 15227 xDomainForZoom = scale.x.orgDomain(); 15228 } 15229 ["y", "y2"].forEach(function (key) { 15230 var _this18 = this; 15231 _newArrowCheck(this, _this17); 15232 const prefix = "axis_" + key + "_", 15233 axisScale = scale[key]; 15234 if (axisScale) { 15235 const tickValues = config[prefix + "tick_values"], 15236 tickCount = config[prefix + "tick_count"]; 15237 axisScale.domain($$.getYDomain(targetsToShow, key, xDomainForZoom)); 15238 if (!tickValues && tickCount) { 15239 const axis = $$.axis[key], 15240 domain = axisScale.domain(); 15241 axis.tickValues(this.generateTickValues(domain, domain.every(function (v) { 15242 _newArrowCheck(this, _this18); 15243 return v === 0; 15244 }.bind(this)) ? 1 : tickCount, this.isTimeSeriesY())); 15245 } 15246 } 15247 }.bind(this)); 15248 15249 // axes 15250 this.redraw(transitions, $$.hasArcType(), isInit); 15251 15252 // Update axis label 15253 this.updateLabels(wth.Transition); 15254 15255 // show/hide if manual culling needed 15256 if ((wth.UpdateXDomain || wth.UpdateXAxis || wth.Y) && targetsToShow.length) {
15257 this.setCulling(); 15258 } 15259 15260 // Update sub domain 15261 if (wth.Y) { 15262 var _scale$subY, _scale$subY2; 15263 (_scale$subY = scale.subY) == null || _scale$subY.domain($$.getYDomain(targetsToShow, "y")); 15264 (_scale$subY2 = scale.subY2) == null || _scale$subY2.domain($$.getYDomain(targetsToShow, "y2")); 15265 } 15266 } 15267 15268 /** 15269 * Set manual culling 15270 * @private 15271 */; 15272 _proto.setCulling = function setCulling() { 15273 var _this19 = this; 15274 const $$ = this.owner, 15275 config = $$.config, 15276 _$$$state2 = $$.state, 15277 clip = _$$$state2.clip, 15278 current = _$$$state2.current, 15279 $el = $$.$el; 15280 ["subX", "x", "y", "y2"].forEach(function (type) { 15281 _newArrowCheck(this, _this19); 15282 const axis = $el.axis[type], 15283 id = type === "subX" ? "x" : type, 15284 cullingOptionPrefix = "axis_" + id + "_tick_culling", 15285 toCull = config[cullingOptionPrefix]; // subchart x axis should be aligned with x axis culling 15286 if (axis && toCull) { 15287 const tickNodes = axis.selectAll(".tick"), 15288 tickValues = sortValue(tickNodes.data()), 15289 tickSize = tickValues.length, 15290 cullingMax = config[cullingOptionPrefix + "_max"], 15291 lines = config[cullingOptionPrefix + "_lines"]; 15292 let intervalForCulling; 15293 if (tickSize) { 15294 for (let i = 1; i < tickSize; i++) { 15295 if (tickSize / i < cullingMax) { 15296 intervalForCulling = i; 15297 break; 15298 } 15299 } 15300 tickNodes.each(function (d) { 15301 const node = lines ? this.querySelector("text") : this; 15302 if (node) { 15303 node.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : null; 15304 } 15305 }); 15306 } else { 15307 tickNodes.style("display", null); 15308 } 15309 15310 // set/unset x_axis_tick_clippath 15311 if (type === "x") { 15312 const clipPath = current.maxTickSize.x.clipPath ? clip.pathXAxisTickTexts : null; 15313 $el.svg.selectAll("." + $AXIS.axisX + " .tick text").attr("clip-path", clipPath); 15314 } 15315 } 15316 }.bind(this)); 15317 }; 15318 return Axis; 15319}(); 15320;// CONCATENATED MODULE: ./src/ChartInternal/interactions/eventrect.ts 15321 15322/** 15323 * Copyright (c) 2017 ~ present NAVER Corp. 15324 * billboard.js project is licensed under the MIT license 15325 */ 15326 15327 15328/* harmony default export */ var eventrect = ({ 15329 /** 15330 * Initialize the area that detects the event. 15331 * Add a container for the zone that detects the event. 15332 * @private 15333 */ 15334 initEventRect: function initEventRect() { 15335 const $$ = this; 15336 $$.$el.main.select("." + $COMMON.chart).append("g").attr("class", $EVENT.eventRects).style("fill-opacity", "0"); 15337 }, 15338 /** 15339 * Redraws the area that detects the event. 15340 * @private 15341 */ 15342 redrawEventRect: function redrawEventRect() { 15343 var _this = this; 15344 const $$ = this, 15345 config = $$.config, 15346 state = $$.state, 15347 $el = $$.$el, 15348 isMultipleX = $$.isMultipleX(), 15349 isInverted = config.axis_x_inverted; 15350 if ($el.eventRect) { 15351 $$.updateEventRect($el.eventRect, !0); 15352 15353 // do not initialize eventRect when data is empty 15354 } else if ($$.data.targets.length) { 15355 const eventRects = $$.$el.main.select("." + $EVENT.eventRects).style("cursor", config.zoom_enabled && config.zoom_type !== "drag" ? config.axis_rotated ? "ns-resize" : "ew-resize" : null).classed($EVENT.eventRectsMultiple, isMultipleX).classed($EVENT.eventRectsSingle, !isMultipleX), 15356 eventRectUpdate = eventRects.selectAll("." + $EVENT.eventRect).data([0]).enter().append("rect"); // append event <rect> 15357 $$.updateEventRect(eventRectUpdate); 15358 15359 // bind event to <rect> element 15360 isMultipleX ? $$.generateEventRectsForMultipleXs(eventRectUpdate) : $$.generateEventRectsForSingleX(eventRectUpdate); 15361 15362 // bind draggable selection 15363 eventRectUpdate.call($$.getDraggableSelection()); 15364 $el.eventRect = eventRectUpdate; 15365 if ($$.state.inputType === "touch" && !$el.svg.on("touchstart.eventRect") && !$$.hasArcType()) { 15366 $$.bindTouchOnEventRect(); 15367 } 15368 15369 // when initilazed with empty data and data loaded later, need to update eventRect 15370 state.rendered && $$.updateEventRect($el.eventRect, !0); 15371 } 15372 if (!isMultipleX) { 15373 // Set data and update eventReceiver.data 15374 const xAxisTickValues = $$.getMaxDataCountTarget(); 15375 if (!config.data_xSort || isInverted) { 15376 xAxisTickValues.sort(function (a, b) { 15377 _newArrowCheck(this, _this); 15378 return isInverted ? b.x - a.x : a.x - b.x; 15379 }.bind(this)); 15380 } 15381 15382 // update data's index value to be alinged with the x Axis 15383 $$.updateDataIndexByX(xAxisTickValues); 15384 $$.updateXs(xAxisTickValues); 15385 $$.updatePointClass == null || $$.updatePointClass(!0); 15386 state.eventReceiver.data = xAxisTickValues; 15387 } 15388 $$.updateEventRectData(); 15389 }, 15390 bindTouchOnEventRect: function bindTouchOnEventRect() { 15391 var _this2 = this; 15392 const $$ = this, 15393 config = $$.config, 15394 state = $$.state, 15395 _$$$$el = $$.$el, 15396 eventRect = _$$$$el.eventRect, 15397 svg = _$$$$el.svg, 15398 selectRect = function (context) { 15399 _newArrowCheck(this, _this2); 15400 if ($$.isMultipleX()) { 15401 $$.selectRectForMultipleXs(context); 15402 } else { 15403 const index = $$.getDataIndexFromEvent(state.event); 15404 $$.callOverOutForTouch(index); 15405 index === -1 ? $$.unselectRect() : $$.selectRectForSingle(context, index); 15406 } 15407 }.bind(this), 15408 unselectRect = function () { 15409 _newArrowCheck(this, _this2); 15410 $$.unselectRect(); 15411 $$.callOverOutForTouch(); 15412 }.bind(this), 15413 preventDefault = config.interaction_inputType_touch.preventDefault, 15414 isPrevented = isboolean(preventDefault) && preventDefault || !1, 15415 preventThreshold = !isNaN(preventDefault) && preventDefault || null; 15416 15417 // call event.preventDefault() 15418 // according 'interaction.inputType.touch.preventDefault' option 15419 15420 let startPx; 15421 const preventEvent = function (event) { 15422 _newArrowCheck(this, _this2); 15423 const eventType = event.type, 15424 touch = event.changedTouches[0], 15425 currentXY = touch["client" + (config.axis_rotated ? "Y" : "X")]; 15426 // prevent document scrolling 15427 if (eventType === "touchstart") { 15428 if (isPrevented) { 15429 event.preventDefault(); 15430 } else if (preventThreshold !== null) { 15431 startPx = currentXY; 15432 } 15433 } else if (eventType === "touchmove") { 15434 if (isPrevented || startPx === !0 || preventThreshold !== null && Math.abs(startPx - currentXY) >= preventThreshold) { 15435 // once prevented, keep prevented during whole 'touchmove' context 15436 startPx = !0; 15437 event.preventDefault(); 15438 } 15439 } 15440 }.bind(this); 15441 15442 // bind touch events 15443 eventRect.on("touchstart", function (event) { 15444 _newArrowCheck(this, _this2); 15445 state.event = event; 15446 $$.updateEventRect(); 15447 }.bind(this)).on("touchstart.eventRect touchmove.eventRect", function (event) { 15448 _newArrowCheck(this, _this2); 15449 state.event = event; 15450 if (!eventRect.empty() && eventRect.classed($EVENT.eventRect)) { 15451 // if touch points are > 1, means doing zooming interaction. In this case do not execute tooltip codes. 15452 if (state.dragging || state.flowing || $$.hasArcType() || event.touches.length > 1) { 15453 return; 15454 } 15455 preventEvent(event); 15456 selectRect(eventRect.node()); 15457 } else { 15458 unselectRect(); 15459 } 15460 }.bind(this), !0).on("touchend.eventRect", function (event) { 15461 _newArrowCheck(this, _this2); 15462 state.event = event; 15463 if (!eventRect.empty() && eventRect.classed($EVENT.eventRect)) { 15464 if ($$.hasArcType() || !$$.toggleShape || state.cancelClick) { 15465 state.cancelClick && (state.cancelClick = !1); 15466 } 15467 } 15468 }.bind(this), !0); 15469 svg.on("touchstart", function (event) { 15470 _newArrowCheck(this, _this2); 15471 state.event = event; 15472 const target = event.target; 15473 if (target && target !== eventRect.node()) { 15474 unselectRect(); 15475 } 15476 }.bind(this)); 15477 }, 15478 /** 15479 * Update event rect size 15480 * @param {d3Selection} eventRect Event <rect> element 15481 * @param {boolean} force Force to update 15482 * @private 15483 */ 15484 updateEventRect: function updateEventRect(eventRect, force) { 15485 var _this3 = this; 15486 if (force === void 0) { 15487 force = !1; 15488 } 15489 const $$ = this, 15490 state = $$.state, 15491 $el = $$.$el, 15492 _state = state, 15493 eventReceiver = _state.eventReceiver, 15494 width = _state.width, 15495 height = _state.height, 15496 rendered = _state.rendered, 15497 resizing = _state.resizing, 15498 rectElement = eventRect || $el.eventRect, 15499 updateClientRect = function () { 15500 _newArrowCheck(this, _this3); 15501 eventReceiver && (eventReceiver.rect = rectElement.node().getBoundingClientRect()); 15502 }.bind(this); 15503 if (!rendered || resizing || force) { 15504 rectElement.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height); 15505 15506 // only for init 15507 if (!rendered || force) { 15508 rectElement.classed($EVENT.eventRect, !0); 15509 } 15510 } 15511 updateClientRect(); 15512 }, 15513 /** 15514 * Updates the location and size of the eventRect. 15515 * @private 15516 */ 15517 updateEventRectData: function updateEventRectData() { 15518 var _this4 = this; 15519 const $$ = this, 15520 config = $$.config, 15521 scale = $$.scale, 15522 state = $$.state, 15523 xScale = scale.zoom || scale.x, 15524 isRotated = config.axis_rotated; 15525 let x, y, w, h; 15526 if ($$.isMultipleX()) { 15527 // TODO: rotated not supported yet 15528 x = 0; 15529 y = 0; 15530 w = state.width; 15531 h = state.height; 15532 } else { 15533 let rectW, rectX; 15534 if ($$.axis.isCategorized()) { 15535 rectW = $$.getEventRectWidth(); 15536 rectX = function (d) { 15537 _newArrowCheck(this, _this4); 15538 return xScale(d.x) - rectW / 2; 15539 }.bind(this); 15540 } else { 15541 const getPrevNextX = function (_ref) { 15542 let index = _ref.index; 15543 _newArrowCheck(this, _this4); 15544 return { 15545 prev: $$.getPrevX(index), 15546 next: $$.getNextX(index) 15547 }; 15548 }.bind(this); 15549 rectW = function (d) { 15550 var _this5 = this; 15551 _newArrowCheck(this, _this4); 15552 const x = getPrevNextX(d), 15553 xDomain = xScale.domain(); 15554 let val; 15555 15556 // if there this is a single data point make the eventRect full width (or height) 15557 if (x.prev === null && x.next === null) { 15558 val = isRotated ? state.height : state.width; 15559 } else if (x.prev === null) { 15560 val = (xScale(x.next) + xScale(d.x)) / 2; 15561 } else if (x.next === null) {
15562 val = xScale(xDomain[1]) - (xScale(x.prev) + xScale(d.x)) / 2; 15563 } else { 15564 Object.keys(x).forEach(function (key, i) { 15565 var _x$key; 15566 _newArrowCheck(this, _this5); 15567 x[key] = (_x$key = x[key]) != null ? _x$key : xDomain[i]; 15568 }.bind(this)); 15569 val = Math.max(0, (xScale(x.next) - xScale(x.prev)) / 2); 15570 } 15571 return val; 15572 }.bind(this); 15573 rectX = function (d) { 15574 _newArrowCheck(this, _this4); 15575 const x = getPrevNextX(d); 15576 let val; 15577 15578 // if there this is a single data point position the eventRect at 0 15579 if (x.prev === null && x.next === null) { 15580 val = 0; 15581 } else if (x.prev === null) { 15582 val = xScale(xScale.domain()[0]); 15583 } else { 15584 val = (xScale(d.x) + xScale(x.prev)) / 2; 15585 } 15586 return val; 15587 }.bind(this); 15588 } 15589 x = isRotated ? 0 : rectX; 15590 y = isRotated ? rectX : 0; 15591 w = isRotated ? state.width : rectW; 15592 h = isRotated ? rectW : state.height; 15593 } 15594 const eventReceiver = state.eventReceiver, 15595 call = function (fn, v) { 15596 _newArrowCheck(this, _this4); 15597 return isFunction(fn) ? fn(v) : fn; 15598 }.bind(this); 15599 // reset for possible remains coords data before the data loading 15600 eventReceiver.coords.splice(eventReceiver.data.length); 15601 eventReceiver.data.forEach(function (d, i) { 15602 _newArrowCheck(this, _this4); 15603 eventReceiver.coords[i] = { 15604 x: call(x, d), 15605 y: call(y, d), 15606 w: call(w, d), 15607 h: call(h, d) 15608 }; 15609 }.bind(this)); 15610 }, 15611 /** 15612 * Seletct rect for single x value 15613 * @param {d3Selection} context Event rect element 15614 * @param {number} index x Axis index 15615 * @private 15616 */ 15617 selectRectForSingle: function selectRectForSingle(context, index) { 15618 var _this6 = this; 15619 const $$ = this, 15620 config = $$.config, 15621 _$$$$el2 = $$.$el, 15622 main = _$$$$el2.main, 15623 circle = _$$$$el2.circle, 15624 isSelectionEnabled = config.data_selection_enabled, 15625 isSelectionGrouped = config.data_selection_grouped, 15626 isSelectable = config.data_selection_isselectable, 15627 isTooltipGrouped = config.tooltip_grouped, 15628 selectedData = $$.getAllValuesOnIndex(index); 15629 if (isTooltipGrouped) { 15630 $$.showTooltip(selectedData, context); 15631 $$.showGridFocus == null || $$.showGridFocus(selectedData); 15632 if (!isSelectionEnabled || isSelectionGrouped) { 15633 return; 15634 } 15635 } 15636 15637 // remove possible previous focused state 15638 circle || main.selectAll("." + $COMMON.EXPANDED + ":not(." + $SHAPE.shape + "-" + index + ")").classed($COMMON.EXPANDED, !1); 15639 const shapeAtIndex = main.selectAll("." + $SHAPE.shape + "-" + index).classed($COMMON.EXPANDED, !0).style("cursor", isSelectable ? "pointer" : null).filter(function (d) { 15640 return $$.isWithinShape(this, d); 15641 }); 15642 if (shapeAtIndex.empty() && !isTooltipGrouped) { 15643 $$.hideGridFocus == null || $$.hideGridFocus(); 15644 $$.hideTooltip(); 15645 isSelectionGrouped || $$.setExpand(index); 15646 } 15647 shapeAtIndex.call(function (selected) { 15648 var _this7 = this; 15649 _newArrowCheck(this, _this6); 15650 const d = selected.data(); 15651 if (isSelectionEnabled && (isSelectionGrouped || isSelectable != null && isSelectable.bind($$.api)(d))) { 15652 context.style.cursor = "pointer"; 15653 } 15654 if (!isTooltipGrouped) { 15655 $$.showTooltip(d, context); 15656 $$.showGridFocus == null || $$.showGridFocus(d); 15657 $$.unexpandCircles == null || $$.unexpandCircles(); 15658 selected.each(function (d) { 15659 _newArrowCheck(this, _this7); 15660 return $$.setExpand(index, d.id); 15661 }.bind(this)); 15662 } 15663 }.bind(this)); 15664 }, 15665 /** 15666 * Select rect for multiple x values 15667 * @param {d3Selection} context Event rect element 15668 * @param {boolean} [triggerEvent=true] Whether trigger event or not 15669 * @private 15670 */ 15671 selectRectForMultipleXs: function selectRectForMultipleXs(context, triggerEvent) { 15672 var _this8 = this; 15673 if (triggerEvent === void 0) { 15674 triggerEvent = !0; 15675 } 15676 const $$ = this, 15677 config = $$.config, 15678 state = $$.state,
15679 targetsToShow = $$.filterTargetsToShow($$.data.targets); 15680 // do nothing when dragging 15681 if (state.dragging || $$.hasArcType(targetsToShow)) { 15682 return; 15683 } 15684 const mouse = getPointer(state.event, context), 15685 closest = $$.findClosestFromTargets(targetsToShow, mouse); 15686 if (triggerEvent && state.mouseover && (!closest || closest.id !== state.mouseover.id)) { 15687 config.data_onout.call($$.api, state.mouseover); 15688 state.mouseover = undefined; 15689 } 15690 if (!closest) { 15691 $$.unselectRect(); 15692 return; 15693 } 15694 const sameXData = $$.isBubbleType(closest) || $$.isScatterType(closest) || !config.tooltip_grouped ? [closest] : $$.filterByX(targetsToShow, closest.x), 15695 selectedData = sameXData.map(function (d) { 15696 _newArrowCheck(this, _this8); 15697 return $$.addName(d); 15698 }.bind(this)); // show tooltip when cursor is close to some point 15699 $$.showTooltip(selectedData, context); 15700 15701 // expand points 15702 $$.setExpand(closest.index, closest.id, !0); 15703 15704 // Show xgrid focus line 15705 $$.showGridFocus(selectedData); 15706 const dist = $$.dist(closest, mouse); 15707 15708 // Show cursor as pointer if point is close to mouse position 15709 if ($$.isBarType(closest.id) || dist < $$.getPointSensitivity(closest)) { 15710 $$.$el.svg.select("." + $EVENT.eventRect).style("cursor", "pointer"); 15711 if (triggerEvent && !state.mouseover) { 15712 config.data_onover.call($$.api, closest); 15713 state.mouseover = closest; 15714 } 15715 } 15716 }, 15717 /** 15718 * Unselect EventRect. 15719 * @private 15720 */ 15721 unselectRect: function unselectRect() { 15722 const $$ = this, 15723 _$$$$el3 = $$.$el, 15724 circle = _$$$$el3.circle, 15725 tooltip = _$$$$el3.tooltip; 15726 $$.$el.svg.select("." + $EVENT.eventRect).style("cursor", null); 15727 $$.hideGridFocus(); 15728 if (tooltip) { 15729 $$.hideTooltip(); 15730 $$._handleLinkedCharts(!1); 15731 } 15732 circle && !$$.isPointFocusOnly() && $$.unexpandCircles(); 15733 $$.expandBarTypeShapes(!1); 15734 }, 15735 /** 15736 * Create eventRect for each data on the x-axis. 15737 * Register touch and drag events. 15738 * @param {object} eventRectEnter d3.select($EVENT.eventRects) object. 15739 * @returns {object} d3.select($EVENT.eventRects) object. 15740 * @private 15741 */ 15742 generateEventRectsForSingleX: function generateEventRectsForSingleX(eventRectEnter) { 15743 var _this9 = this; 15744 const $$ = this, 15745 config = $$.config, 15746 state = $$.state, 15747 eventReceiver = state.eventReceiver, 15748 rect = eventRectEnter.style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null).on("click", function (event) { 15749 state.event = event; 15750 const currentIdx = eventReceiver.currentIdx, 15751 data = eventReceiver.data, 15752 d = data[currentIdx === -1 ? $$.getDataIndexFromEvent(event) : currentIdx]; 15753 $$.clickHandlerForSingleX.bind(this)(d, $$); 15754 }); 15755 if (state.inputType === "mouse") { 15756 const getData = function (event) { 15757 _newArrowCheck(this, _this9); 15758 const index = event ? $$.getDataIndexFromEvent(event) : eventReceiver.currentIdx; 15759 return index > -1 ? eventReceiver.data[index] : null; 15760 }.bind(this); 15761 rect.on("mouseover", function (event) { 15762 _newArrowCheck(this, _this9); 15763 state.event = event; 15764 $$.updateEventRect(); 15765 }.bind(this)).on("mousemove", function (event) { 15766 const d = getData(event); 15767 state.event = event; 15768 if (!d) { 15769 return; 15770 } 15771 let index = d.index; 15772 const stepType = config.line_step_type; 15773 15774 // tooltip position match for step-before & step-after 15775 if (config.line_step_tooltipMatch && $$.hasType("step") && /^step\-(before|after)$/.test(stepType)) { 15776 const scale = $$.scale.zoom || $$.scale.x, 15777 xs = $$.axis.xs[index], 15778 inverted = scale.invert(getPointer(event, this)[0]); 15779 if (stepType === "step-after" && inverted < xs) { 15780 index -= 1; 15781 } else if (stepType === "step-before" && inverted > xs) { 15782 index += 1; 15783 } 15784 } 15785 const eventOnSameIdx = config.tooltip_grouped && index === eventReceiver.currentIdx; 15786 15787 // do nothing while dragging/flowing 15788 if (state.dragging || state.flowing || $$.hasArcType() || eventOnSameIdx) { 15789 config.tooltip_show && eventOnSameIdx && $$.setTooltipPosition(); 15790 return; 15791 } 15792 if (index !== eventReceiver.currentIdx) { 15793 $$.setOverOut(!1, eventReceiver.currentIdx); 15794 eventReceiver.currentIdx = index; 15795 } 15796 index === -1 ? $$.unselectRect() : $$.selectRectForSingle(this, index); 15797 15798 // As of individual data point(or <path>) element can't bind mouseover/out event 15799 // to determine current interacting element, so use 'mousemove' event instead. 15800 $$.setOverOut(index !== -1, index); 15801 }).on("mouseout", function (event) { 15802 _newArrowCheck(this, _this9); 15803 state.event = event; 15804 15805 // chart is destroyed 15806 if (!config || $$.hasArcType() || eventReceiver.currentIdx === -1) { 15807 return; 15808 } 15809 $$.unselectRect(); 15810 $$.setOverOut(!1, eventReceiver.currentIdx); 15811 15812 // reset the event current index 15813 eventReceiver.currentIdx = -1; 15814 }.bind(this)); 15815 } 15816 return rect; 15817 }, 15818 clickHandlerForSingleX: function clickHandlerForSingleX(d, ctx) { 15819 const $$ = ctx, 15820 config = $$.config, 15821 state = $$.state, 15822 main = $$.$el.main; 15823 if (!d || $$.hasArcType() || state.cancelClick) { 15824 state.cancelClick && (state.cancelClick = !1); 15825 return; 15826 } 15827 const index = d.index; 15828 main.selectAll("." + $SHAPE.shape + "-" + index).each(function (d2) { 15829 if (config.data_selection_grouped || $$.isWithinShape(this, d2)) { 15830 $$.toggleShape == null || $$.toggleShape(this, d2, index); 15831 config.data_onclick.bind($$.api)(d2, this); 15832 } 15833 }); 15834 }, 15835 /** 15836 * Create an eventRect, 15837 * Register touch and drag events. 15838 * @param {object} eventRectEnter d3.select($EVENT.eventRects) object. 15839 * @private 15840 */ 15841 generateEventRectsForMultipleXs: function generateEventRectsForMultipleXs(eventRectEnter) { 15842 var _this10 = this; 15843 const $$ = this, 15844 state = $$.state; 15845 eventRectEnter.on("click", function (event) { 15846 state.event = event; 15847 $$.clickHandlerForMultipleXS.bind(this)($$); 15848 }); 15849 if (state.inputType === "mouse") { 15850 eventRectEnter.on("mouseover mousemove", function (event) { 15851 state.event = event; 15852 $$.selectRectForMultipleXs(this); 15853 }).on("mouseout", function (event) { 15854 _newArrowCheck(this, _this10); 15855 state.event = event; 15856 15857 // chart is destroyed 15858 if (!$$.config || $$.hasArcType()) { 15859 return; 15860 } 15861 $$.unselectRect(); 15862 }.bind(this)); 15863 } 15864 }, 15865 clickHandlerForMultipleXS: function clickHandlerForMultipleXS(ctx) { 15866 const $$ = ctx, 15867 config = $$.config, 15868 state = $$.state,
15869 targetsToShow = $$.filterTargetsToShow($$.data.targets); 15870 if ($$.hasArcType(targetsToShow)) { 15871 return; 15872 } 15873 const mouse = getPointer(state.event, this), 15874 closest = $$.findClosestFromTargets(targetsToShow, mouse), 15875 sensitivity = config.point_sensitivity === "radius" ? closest.r : config.point_sensitivity; 15876 if (!closest) { 15877 return; 15878 } 15879 15880 // select if selection enabled 15881 if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < sensitivity) { 15882 $$.$el.main.selectAll("." + $SHAPE.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll("." + $SHAPE.shape + "-" + closest.index).each(function () { 15883 if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { 15884 $$.toggleShape == null || $$.toggleShape(this, closest, closest.index); 15885 config.data_onclick.bind($$.api)(closest, this); 15886 } 15887 }); 15888 } 15889 } 15890}); 15891// EXTERNAL MODULE: external {"commonjs":"d3-ease","commonjs2":"d3-ease","amd":"d3-ease","root":"d3"} 15892var external_commonjs_d3_ease_commonjs2_d3_ease_amd_d3_ease_root_d3_ = __webpack_require__(11); 15893;// CONCATENATED MODULE: ./src/ChartInternal/interactions/flow.ts 15894 15895/** 15896 * Copyright (c) 2017 ~ present NAVER Corp. 15897 * billboard.js project is licensed under the MIT license 15898 */ 15899 15900 15901 15902 15903/* harmony default export */ var interactions_flow = ({ 15904 /** 15905 * Generate flow 15906 * @param {object} args option object 15907 * @returns {Function} 15908 * @private 15909 */ 15910 generateFlow: function generateFlow(args) { 15911 const $$ = this, 15912 data = $$.data, 15913 state = $$.state, 15914 $el = $$.$el; 15915 return function () { 15916 var _this = this; 15917 const flowLength = args.flow.length; 15918 15919 // set flag 15920 state.flowing = !0; 15921 15922 // remove head data after rendered 15923 data.targets.forEach(function (d) { 15924 _newArrowCheck(this, _this); 15925 d.values.splice(0, flowLength); 15926 }.bind(this)); 15927 15928 // update elements related to x scale 15929 if ($$.updateXGrid) { 15930 $$.updateXGrid(!0); 15931 } 15932 15933 // target elements 15934 const elements = {}; 15935 ["axis.x", "grid.x", "gridLines.x", "region.list", "text", "bar", "line", "area", "circle"].forEach(function (v) { 15936 var _node; 15937 _newArrowCheck(this, _this); 15938 const name = v.split("."); 15939 let node = $el[name[0]]; 15940 if (node && name.length > 1) { 15941 node = node[name[1]]; 15942 } 15943 if ((_node = node) != null && _node.size()) { 15944 elements[v] = node; 15945 } 15946 }.bind(this)); 15947 $$.hideGridFocus(); 15948 $$.setFlowList(elements, args); 15949 }; 15950 }, 15951 /** 15952 * Set flow list 15953 * @param {object} elements Target elements 15954 * @param {object} args option object 15955 * @private 15956 */ 15957 setFlowList: function setFlowList(elements, args) { 15958 var _this2 = this; 15959 const $$ = this, 15960 flow = args.flow, 15961 targets = args.targets, 15962 _flow = flow, 15963 _flow$duration = _flow.duration, 15964 duration = _flow$duration === void 0 ? args.duration : _flow$duration, 15965 flowIndex = _flow.index, 15966 flowLength = _flow.length, 15967 orgDataCount = _flow.orgDataCount, 15968 transform = $$.getFlowTransform(targets, orgDataCount, flowIndex, flowLength), 15969 wait = generateWait(); 15970 let n; 15971 wait.add(Object.keys(elements).map(function (v) { 15972 var _this3 = this; 15973 _newArrowCheck(this, _this2); 15974 n = elements[v].transition().ease(external_commonjs_d3_ease_commonjs2_d3_ease_amd_d3_ease_root_d3_.easeLinear).duration(duration); 15975 if (v === "axis.x") { 15976 n = n.call(function (g) { 15977 _newArrowCheck(this, _this3); 15978 $$.axis.x.setTransition(g).create(g); 15979 }.bind(this)); 15980 } else if (v === "region.list") { 15981 n = n.filter($$.isRegionOnX).attr("transform", transform); 15982 } else { 15983 n = n.attr("transform", transform); 15984 } 15985 return n; 15986 }.bind(this))); 15987 n.call(wait, function () { 15988 _newArrowCheck(this, _this2); 15989 $$.cleanUpFlow(elements, args); 15990 }.bind(this)); 15991 }, 15992 /** 15993 * Clean up flow 15994 * @param {object} elements Target elements 15995 * @param {object} args option object 15996 * @private 15997 */ 15998 cleanUpFlow: function cleanUpFlow(elements, args) { 15999 var _this4 = this; 16000 const $$ = this, 16001 config = $$.config, 16002 state = $$.state, 16003 svg = $$.$el.svg, 16004 isRotated = config.axis_rotated, 16005 flow = args.flow, 16006 shape = args.shape, 16007 xv = args.xv, 16008 _shape$pos = shape.pos, 16009 cx = _shape$pos.cx, 16010 cy = _shape$pos.cy, 16011 xForText = _shape$pos.xForText, 16012 yForText = _shape$pos.yForText, 16013 _flow2 = flow, 16014 _flow2$done = _flow2.done, 16015 done = _flow2$done === void 0 ? function () { 16016 _newArrowCheck(this, _this4); 16017 }.bind(this) : _flow2$done, 16018 flowLength = _flow2.length; 16019 // Remove flowed elements 16020 if (flowLength) { 16021 ["circle", "text", "shape", "eventRect"].forEach(function (v) { 16022 _newArrowCheck(this, _this4); 16023 const target = []; 16024 for (let i = 0;
16024 i < flowLength; i++) { 16025 target.push("." + classes[v] + "-" + i); 16026 } 16027 svg.selectAll("." + classes[v + "s"]) // circles, shapes, texts, eventRects 16028 .selectAll(target).remove(); 16029 }.bind(this)); 16030 svg.select("." + classes.xgrid).remove(); 16031 } 16032 16033 // draw again for removing flowed elements and reverting attr 16034 Object.keys(elements).forEach(function (v) { 16035 var _this5 = this; 16036 _newArrowCheck(this, _this4); 16037 const n = elements[v]; 16038 if (v !== "axis.x") { 16039 n.attr("transform", null); 16040 } 16041 if (v === "grid.x") { 16042 n.attr(state.xgridAttr); 16043 } else if (v === "gridLines.x") { 16044 n.attr("x1", isRotated ? 0 : xv).attr("x2", isRotated ? state.width : xv); 16045 n.select("text").attr("x", isRotated ? state.width : 0).attr("y", xv); 16046 } else if (/^(area|bar|line)$/.test(v)) { 16047 n.attr("d", shape.type[v]); 16048 } else if (v === "text") { 16049 n.attr("x", xForText).attr("y", yForText).style("fill-opacity", $$.opacityForText.bind($$)); 16050 } else if (v === "circle") { 16051 if ($$.isCirclePoint()) { 16052 n.attr("cx", cx).attr("cy", cy); 16053 } else { 16054 const xFunc = function (d) { 16055 _newArrowCheck(this, _this5); 16056 return cx(d) - config.point_r; 16057 }.bind(this), 16058 yFunc = function (d) { 16059 _newArrowCheck(this, _this5); 16060 return cy(d) - config.point_r; 16061 }.bind(this); 16062 n.attr("x", xFunc).attr("y", yFunc); 16063 } 16064 } else if (v === "region.list") { 16065 n.select("rect").filter($$.isRegionOnX).attr("x", $$.regionX.bind($$)).attr("width", $$.regionWidth.bind($$)); 16066 } 16067 }.bind(this)); 16068 config.interaction_enabled && $$.redrawEventRect(); 16069 16070 // callback for end of flow 16071 done.call($$.api); 16072 state.flowing = !1; 16073 }, 16074 /** 16075 * Get flow transform value 16076 * @param {object} targets target 16077 * @param {number} orgDataCount original data count 16078 * @param {number} flowIndex flow index 16079 * @param {number} flowLength flow length 16080 * @returns {string} 16081 * @private 16082 */ 16083 getFlowTransform: function getFlowTransform(targets, orgDataCount, flowIndex, flowLength) { 16084 var _flowStart, _flowEnd; 16085 const $$ = this, 16086 data = $$.data, 16087 x = $$.scale.x, 16088 dataValues = data.targets[0].values; 16089 let flowStart = $$.getValueOnIndex(dataValues, flowIndex), 16090 flowEnd = $$.getValueOnIndex(dataValues, flowIndex + flowLength), 16091 translateX; 16092 // update x domain to generate axis elements for flow 16093 const orgDomain = x.domain(), 16094 domain = $$.updateXDomain(targets, !0, !0); 16095 // generate transform to flow 16096 if (!orgDataCount) { 16097 // if empty 16098 if (dataValues.length !== 1) { 16099 translateX = x(orgDomain[0]) - x(domain[0]); 16100 } else { 16101 if ($$.axis.isTimeSeries()) { 16102 flowStart = $$.getValueOnIndex(dataValues, 0); 16103 flowEnd = $$.getValueOnIndex(dataValues, dataValues.length - 1); 16104 translateX = x(flowStart.x) - x(flowEnd.x); 16105 } else { 16106 translateX = diffDomain(domain) / 2; 16107 } 16108 } 16109 } else if (orgDataCount === 1 || ((_flowStart = flowStart) == null ? void 0 : _flowStart.x) === ((_flowEnd = flowEnd) == null ? void 0 : _flowEnd.x)) { 16110 translateX = x(orgDomain[0]) - x(domain[0]); 16111 } else { 16112 var _flowStart2; 16113 translateX = $$.axis.isTimeSeries() ? x(orgDomain[0]) - x(domain[0]) : x(((_flowStart2 = flowStart) == null ? void 0 : _flowStart2.x) || 0) - x(flowEnd.x); 16114 } 16115 const scaleX = diffDomain(orgDomain) / diffDomain(domain); 16116 return "translate(" + translateX + ",0) scale(" + scaleX + ",1)"; 16117 } 16118}); 16119;// CONCATENATED MODULE: ./src/ChartInternal/internals/clip.ts 16120/** 16121 * Copyright (c) 2017 ~ present NAVER Corp. 16122 * billboard.js project is licensed under the MIT license 16123 */ 16124 16125/* harmony default export */ var clip = ({ 16126 initClip: function initClip() { 16127 const $$ = this, 16128 _$$$state = $$.state, 16129 clip = _$$$state.clip, 16130 datetimeId = _$$$state.datetimeId;
16131 // MEMO: clipId needs to be unique because it conflicts when multiple charts exist 16132 clip.id = datetimeId + "-clip"; 16133 clip.idXAxis = clip.id + "-xaxis"; 16134 clip.idYAxis = clip.id + "-yaxis"; 16135 clip.idGrid = clip.id + "-grid"; 16136 16137 // Define 'clip-path' attribute values 16138 clip.path = $$.getClipPath(clip.id); 16139 clip.pathXAxis = $$.getClipPath(clip.idXAxis); 16140 clip.pathYAxis = $$.getClipPath(clip.idYAxis); 16141 clip.pathGrid = $$.getClipPath(clip.idGrid); 16142 }, 16143 getClipPath: function getClipPath(id) { 16144 const $$ = this, 16145 config = $$.config; 16146 if (!config.clipPath && /-clip$/.test(id) || !config.axis_x_clipPath && /-clip-xaxis$/.test(id) || !config.axis_y_clipPath && /-clip-yaxis$/.test(id)) { 16147 return null; 16148 } 16149 const isIE9 = win.navigator ? win.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0 : !1; 16150 return "url(" + (isIE9 ? "" : browser_doc.URL.split("#")[0]) + "#" + id + ")"; 16151 }, 16152 appendClip: function appendClip(parent, id) { 16153 id && parent.append("clipPath").attr("id", id).append("rect"); 16154 }, 16155 /** 16156 * Set x Axis clipPath dimension 16157 * @param {d3Selecton} node clipPath <rect> selection 16158 * @private 16159 */ 16160 setXAxisClipPath: function setXAxisClipPath(node) { 16161 const $$ = this, 16162 config = $$.config, 16163 _$$$state2 = $$.state, 16164 margin = _$$$state2.margin, 16165 width = _$$$state2.width, 16166 height = _$$$state2.height, 16167 isRotated = config.axis_rotated, 16168 left = Math.max(30, margin.left) - (isRotated ? 0 : 20), 16169 h = (isRotated ? margin.top + height + 10 : margin.bottom) + 20, 16170 x = isRotated ? -(1 + left) : -(left - 1), 16171 w = isRotated ? margin.left + 20 : width + 10 + left; 16172 16173 // less than 20 is not enough to show the axis label 'outer' without legend 16174 16175 // -Math.max(15, margin.top); 16176 16177 node.attr("x", x).attr("y", -15).attr("width", w).attr("height", h); 16178 }, 16179 /** 16180 * Set y Axis clipPath dimension 16181 * @param {d3Selection} node clipPath <rect> selection 16182 * @private 16183 */ 16184 setYAxisClipPath: function setYAxisClipPath(node) { 16185 const $$ = this, 16186 config = $$.config, 16187 _$$$state3 = $$.state, 16188 margin = _$$$state3.margin, 16189 width = _$$$state3.width, 16190 height = _$$$state3.height, 16191 isRotated = config.axis_rotated, 16192 left = Math.max(30, margin.left) - (isRotated ? 20 : 0), 16193 isInner = config.axis_y_inner, 16194 x = isInner && !isRotated ? config.axis_y_label.text ? -20 : -1 : isRotated ? -(1 + left) : -(left - 1), 16195 y = -(isRotated ? 20 : margin.top), 16196 w = (isRotated ? width + 15 + left : margin.left + 20) + (isInner ? 20 : 0), 16197 h = (isRotated ? margin.bottom + 10 : margin.top + height) + 10; 16198 node.attr("x", x).attr("y", y).attr("width", w).attr("height", h); 16199 }, 16200 updateXAxisTickClip: function updateXAxisTickClip() { 16201 const $$ = this, 16202 config = $$.config, 16203 _$$$state4 = $$.state, 16204 clip = _$$$state4.clip, 16205 xAxisHeight = _$$$state4.xAxisHeight, 16206 defs = $$.$el.defs, 16207 newXAxisHeight = $$.getHorizontalAxisHeight("x"); 16208 if (defs && !clip.idXAxisTickTexts) { 16209 const clipId = clip.id + "-xaxisticktexts"; 16210 $$.appendClip(defs, clipId); 16211 clip.pathXAxisTickTexts = $$.getClipPath(clip.idXAxisTickTexts); 16212 clip.idXAxisTickTexts = clipId; 16213 } 16214 if (!config.axis_x_tick_multiline && $$.getAxisTickRotate("x") && newXAxisHeight !== xAxisHeight) { 16215 $$.setXAxisTickClipWidth(); 16216 $$.setXAxisTickTextClipPathWidth(); 16217 } 16218 $$.state.xAxisHeight = newXAxisHeight; 16219 }, 16220 setXAxisTickClipWidth: function setXAxisTickClipWidth() { 16221 const $$ = this, 16222 config = $$.config, 16223 maxTickSize = $$.state.current.maxTickSize, 16224 xAxisTickRotate = $$.getAxisTickRotate("x"); 16225 if (!config.axis_x_tick_multiline && xAxisTickRotate) { 16226 const sinRotation = Math.sin(Math.PI / 180 * Math.abs(xAxisTickRotate)); 16227 maxTickSize.x.clipPath = ($$.getHorizontalAxisHeight("x") - 20) / sinRotation; 16228 } else { 16229 maxTickSize.x.clipPath = null; 16230 } 16231 }, 16232 setXAxisTickTextClipPathWidth: function setXAxisTickTextClipPathWidth() { 16233 const $$ = this, 16234 _$$$state5 = $$.state, 16235 clip = _$$$state5.clip, 16236 current = _$$$state5.current, 16237 svg = $$.$el.svg; 16238 if (svg) { 16239 svg.select("#" + clip.idXAxisTickTexts + " rect").attr("width", current.maxTickSize.x.clipPath).attr("height", 30); 16240 } 16241 } 16242}); 16243;// CONCATENATED MODULE: ./src/ChartInternal/internals/grid.ts 16244 16245var grid_this = undefined; 16246/** 16247 * Copyright (c) 2017 ~ present NAVER Corp. 16248 * billboard.js project is licensed under the MIT license 16249 */ 16250 16251 16252 16253 16254// Grid position and text anchor helpers 16255const getGridTextAnchor = function (d) { 16256 _newArrowCheck(this, grid_this); 16257 return isValue(d.position) || "end"; 16258 }.bind(undefined), 16259 getGridTextDx = function (d) { 16260 _newArrowCheck(this, grid_this); 16261 return d.position === "start" ? 4 : d.position === "middle" ? 0 : -4; 16262 }.bind(undefined); 16263/** 16264 * Get grid text x value getter function 16265 * @param {boolean} isX Is x Axis 16266 * @param {number} width Width value 16267 * @param {number} height Height value 16268 * @returns {Function} 16269 * @private 16270 */ 16271function getGridTextX(isX, width, height) { 16272 var _this2 = this; 16273 return function (d) { 16274 _newArrowCheck(this, _this2); 16275 let x = isX ? 0 : width; 16276 if (d.position === "start") { 16277 x = isX ? -height : 0; 16278 } else if (d.position === "middle") { 16279 x = (isX ? -height : width) / 2; 16280 } 16281 return x; 16282 }.bind(this); 16283} 16284 16285/** 16286 * Update coordinate attributes value 16287 * @param {d3.selection} el Target node 16288 * @param {string} type Type 16289 * @private 16290 */ 16291function smoothLines(el, type) { 16292 if (type === "grid") { 16293 el.each(function () { 16294 var _this3 = this; 16295 const g = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 16296 ["x1", "x2", "y1", "y2"].forEach(function (v) { 16297 _newArrowCheck(this, _this3); 16298 return g.attr(v, Math.ceil(+g.attr(v))); 16299 }.bind(this)); 16300 }); 16301 } 16302} 16303/* harmony default export */ var internals_grid = ({ 16304 hasGrid: function hasGrid() { 16305 var _this4 = this; 16306 const config = this.config; 16307 return ["x", "y"].some(function (v) { 16308 _newArrowCheck(this, _this4); 16309 return config["grid_" + v + "_show"] || config["grid_" + v + "_lines"].length; 16310 }.bind(this)); 16311 }, 16312 initGrid: function initGrid() { 16313 const $$ = this; 16314 $$.hasGrid() && $$.initGridLines(); 16315 $$.initFocusGrid(); 16316 }, 16317 initGridLines: function initGridLines() { 16318 const $$ = this, 16319 config = $$.config, 16320 clip = $$.state.clip, 16321 $el = $$.$el; 16322 if (config.grid_x_lines.length || config.grid_y_lines.length) { 16323 $el.gridLines.main = $el.main.insert("g", "." + $COMMON.chart + (config.grid_lines_front ? " + *" : "")).attr("clip-path", clip.pathGrid).attr("class", $GRID.grid + " " + $GRID.gridLines); 16324 $el.gridLines.main.append("g").attr("class", $GRID.xgridLines); 16325 $el.gridLines.main.append("g").attr("class", $GRID.ygridLines); 16326 $el.gridLines.x = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.selectAll)([]); 16327 } 16328 }, 16329 updateXGrid: function updateXGrid(withoutUpdate) { 16330 var _this5 = this; 16331 const $$ = this, 16332 config = $$.config, 16333 scale = $$.scale, 16334 state = $$.state, 16335 _$$$$el = $$.$el, 16336 main = _$$$$el.main, 16337 grid = _$$$$el.grid, 16338 isRotated = config.axis_rotated, 16339 xgridData = $$.generateGridData(config.grid_x_type, scale.x), 16340 tickOffset = $$.axis.isCategorized() ? $$.axis.x.tickOffset() : 0, 16341 pos = function (d) { 16342 _newArrowCheck(this, _this5); 16343 return (scale.zoom || scale.x)(d) + tickOffset * (isRotated ? -1 : 1); 16344 }.bind(this); 16345 state.xgridAttr = isRotated ? { 16346 "x1": 0, 16347 "x2": state.width, 16348 "y1": pos, 16349 "y2": pos 16350 } : { 16351 "x1": pos, 16352 "x2": pos, 16353 "y1": 0, 16354 "y2": state.height 16355 }; 16356 grid.x = main.select("." + $GRID.xgrids).selectAll("." + $GRID.xgrid).data(xgridData); 16357 grid.x.exit().remove(); 16358 grid.x = grid.x.enter().append("line").attr("class", $GRID.xgrid).merge(grid.x); 16359 if (!withoutUpdate) { 16360 grid.x.each(function () { 16361 var _this6 = this; 16362 const grid = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 16363 Object.keys(state.xgridAttr).forEach(function (id) { 16364 var _this7 = this; 16365 _newArrowCheck(this, _this6); 16366 grid.attr(id, state.xgridAttr[id]).style("opacity", function () { 16367 _newArrowCheck(this, _this7); 16368 return grid.attr(isRotated ? "y1" : "x1") === (isRotated ? state.height : 0) ? "0" : null; 16369 }.bind(this)); 16370 }.bind(this)); 16371 }); 16372 } 16373 }, 16374 updateYGrid: function updateYGrid() { 16375 var _this8 = this; 16376 const $$ = this, 16377 axis = $$.axis, 16378 config = $$.config, 16379 scale = $$.scale, 16380 state = $$.state, 16381 _$$$$el2 = $$.$el, 16382 grid = _$$$$el2.grid, 16383 main = _$$$$el2.main, 16384 isRotated = config.axis_rotated, 16385 pos = function (d) { 16386 _newArrowCheck(this, _this8); 16387 return Math.ceil(scale.y(d)); 16388 }.bind(this), 16389 gridValues = axis.y.getGeneratedTicks(config.grid_y_ticks) || $$.scale.y.ticks(config.grid_y_ticks); 16390 grid.y = main.select("." + $GRID.ygrids).selectAll("." + $GRID.ygrid).data(gridValues); 16391 grid.y.exit().remove(); 16392 grid.y = grid.y.enter().append("line").attr("class", $GRID.ygrid).merge(grid.y); 16393 grid.y.attr("x1", isRotated ? pos : 0).attr("x2", isRotated ? pos : state.width).attr("y1", isRotated ? 0 : pos).attr("y2", isRotated ? state.height : pos); 16394 smoothLines(grid.y, "grid"); 16395 }, 16396 updateGrid: function updateGrid() { 16397 const $$ = this, 16398 _$$$$el3 = $$.$el, 16399 grid = _$$$$el3.grid, 16400 gridLines = _$$$$el3.gridLines; 16401 gridLines.main || $$.initGridLines(); 16402 16403 // hide if arc type 16404 grid.main.style("visibility", $$.hasArcType() ? "hidden" : null); 16405 $$.hideGridFocus(); 16406 $$.updateGridLines("x"); 16407 $$.updateGridLines("y"); 16408 }, 16409 /** 16410 * Update Grid lines 16411 * @param {string} type x | y 16412 * @private 16413 */ 16414 updateGridLines: function updateGridLines(type) { 16415 var _this9 = this; 16416 const $$ = this, 16417 config = $$.config, 16418 _$$$$el4 = $$.$el, 16419 gridLines = _$$$$el4.gridLines, 16420 main = _$$$$el4.main, 16421 $T = $$.$T, 16422 isRotated = config.axis_rotated; 16423 config["grid_" + type + "_show"] && $$["update" + type.toUpperCase() + "Grid"](); 16424 let lines = main.select("." + $GRID[type + "gridLines"]).selectAll("." + $GRID[type + "gridLine"]).data(config["grid_" + type + "_lines"]); 16425 16426 // exit
16427 $T(lines.exit()).style("opacity", "0").remove(); 16428 16429 // enter 16430 const gridLine = lines.enter().append("g"); 16431 gridLine.append("line").style("opacity", "0"); 16432 lines = gridLine.merge(lines); 16433 lines.each(function (d) { 16434 const g = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 16435 if (g.select("text").empty() && d.text) { 16436 g.append("text").style("opacity", "0"); 16437 } 16438 }); 16439 $T(lines.attr("class", function (d) { 16440 _newArrowCheck(this, _this9); 16441 return ($GRID[type + "gridLine"] + " " + (d.class || "")).trim(); 16442 }.bind(this)).select("text").attr("text-anchor", getGridTextAnchor).attr("transform", function () { 16443 _newArrowCheck(this, _this9); 16444 return type === "x" ? isRotated ? null : "rotate(-90)" : isRotated ? "rotate(-90)" : null; 16445 }.bind(this)).attr("dx", getGridTextDx).attr("dy", -5)).text(function (d) { 16446 var _d$text; 16447 return (_d$text = d.text) != null ? _d$text : this.remove(); 16448 }); 16449 gridLines[type] = lines; 16450 }, 16451 redrawGrid: function redrawGrid(withTransition) { 16452 const $$ = this, 16453 isRotated = $$.config.axis_rotated, 16454 _$$$state = $$.state, 16455 width = _$$$state.width, 16456 height = _$$$state.height, 16457 gridLines = $$.$el.gridLines, 16458 $T = $$.$T, 16459 xv = $$.xv.bind($$), 16460 yv = $$.yv.bind($$); 16461 let xLines = gridLines.x.select("line"), 16462 xTexts = gridLines.x.select("text"), 16463 yLines = gridLines.y.select("line"), 16464 yTexts = gridLines.y.select("text"); 16465 xLines = $T(xLines, withTransition).attr("x1", isRotated ? 0 : xv).attr("x2", isRotated ? width : xv).attr("y1", isRotated ? xv : 0).attr("y2", isRotated ? xv : height); 16466 xTexts = $T(xTexts, withTransition).attr("x", getGridTextX(!isRotated, width, height)).attr("y", xv); 16467 yLines = $T(yLines, withTransition).attr("x1", isRotated ? yv : 0).attr("x2", isRotated ? yv : width).attr("y1", isRotated ? 0 : yv).attr("y2", isRotated ? height : yv); 16468 yTexts = $T(yTexts, withTransition).attr("x", getGridTextX(isRotated, width, height)).attr("y", yv); 16469 return [xLines.style("opacity", null), xTexts.style("opacity", null), yLines.style("opacity", null), yTexts.style("opacity", null)]; 16470 }, 16471 initFocusGrid: function initFocusGrid() { 16472 const $$ = this, 16473 config = $$.config, 16474 clip = $$.state.clip, 16475 $el = $$.$el, 16476 isFront = config.grid_front, 16477 className = "." + (isFront && $el.gridLines.main ? $GRID.gridLines : $COMMON.chart) + (isFront ? " + *" : ""), 16478 grid = $el.main.insert("g", className).attr("clip-path", clip.pathGrid).attr("class", $GRID.grid); 16479 $el.grid.main = grid; 16480 config.grid_x_show && grid.append("g").attr("class", $GRID.xgrids); 16481 config.grid_y_show && grid.append("g").attr("class", $GRID.ygrids); 16482 if (config.interaction_enabled && config.grid_focus_show) { 16483 grid.append("g").attr("class", $FOCUS.xgridFocus).append("line").attr("class", $FOCUS.xgridFocus); 16484 16485 // to show xy focus grid line, should be 'tooltip.grouped=false' 16486 if (config.grid_focus_y && !config.tooltip_grouped) { 16487 grid.append("g").attr("class", $FOCUS.ygridFocus).append("line").attr("class", $FOCUS.ygridFocus); 16488 } 16489 } 16490 }, 16491 /** 16492 * Show grid focus line 16493 * @param {Array} data Selected data 16494 * @private 16495 */ 16496 showGridFocus: function showGridFocus(data) { 16497 var _this10 = this; 16498 const $$ = this, 16499 config = $$.config, 16500 _$$$state2 = $$.state, 16501 width = _$$$state2.width, 16502 height = _$$$state2.height, 16503 isRotated = config.axis_rotated, 16504 focusEl = $$.$el.main.selectAll("line." + $FOCUS.xgridFocus + ", line." + $FOCUS.ygridFocus), 16505 dataToShow = (data || [focusEl.datum()]).filter(function (d) { 16506 _newArrowCheck(this, _this10); 16507 return d && isValue($$.getBaseValue(d)); 16508 }.bind(this)); 16509 // Hide when bubble/scatter/stanford plot exists 16510 if (!config.tooltip_show || dataToShow.length === 0 || $$.hasType("bubble") || $$.hasArcType()) { 16511 return; 16512 } 16513 const isEdge = config.grid_focus_edge && !config.tooltip_grouped, 16514 xx = $$.xx.bind($$); 16515 focusEl.style("visibility", null).data(dataToShow.concat(dataToShow)).each(function (d) { 16516 var _this11 = this; 16517 const el = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 16518 pos = { 16519 x: xx(d), 16520 y: $$.getYScaleById(d.id)(d.value) 16521 }; 16522 let xy;
16523 if (el.classed($FOCUS.xgridFocus)) { 16524 // will contain 'x1, y1, x2, y2' order 16525 xy = isRotated ? [null, 16526 // x1 16527 pos.x, 16528 // y1 16529 isEdge ? pos.y : width, 16530 // x2 16531 pos.x // y2 16532 ] : [pos.x, isEdge ? pos.y : null, pos.x, height]; 16533 } else { 16534 const isY2 = $$.axis.getId(d.id) === "y2"; 16535 xy = isRotated ? [pos.y, 16536 // x1 16537 isEdge && !isY2 ? pos.x : null, 16538 // y1 16539 pos.y, 16540 // x2 16541 isEdge && isY2 ? pos.x : height // y2 16542 ] : [isEdge && isY2 ? pos.x : null, pos.y, isEdge && !isY2 ? pos.x : width, pos.y]; 16543 } 16544 ["x1", "y1", "x2", "y2"].forEach(function (v, i) { 16545 _newArrowCheck(this, _this11); 16546 return el.attr(v, xy[i]); 16547 }.bind(this)); 16548 }); 16549 smoothLines(focusEl, "grid"); 16550 $$.showCircleFocus == null || $$.showCircleFocus(data); 16551 }, 16552 hideGridFocus: function hideGridFocus() { 16553 const $$ = this, 16554 _$$$state3 = $$.state, 16555 inputType = _$$$state3.inputType, 16556 resizing = _$$$state3.resizing, 16557 main = $$.$el.main; 16558 if (inputType === "mouse" || !resizing) { 16559 main.selectAll("line." + $FOCUS.xgridFocus + ", line." + $FOCUS.ygridFocus).style("visibility", "hidden"); 16560 $$.hideCircleFocus == null || $$.hideCircleFocus(); 16561 } 16562 }, 16563 updateGridFocus: function updateGridFocus() { 16564 const $$ = this, 16565 _$$$state4 = $$.state, 16566 inputType = _$$$state4.inputType, 16567 width = _$$$state4.width, 16568 height = _$$$state4.height, 16569 resizing = _$$$state4.resizing, 16570 grid = $$.$el.grid, 16571 xgridFocus = grid.main.select("line." + $FOCUS.xgridFocus); 16572 if (inputType === "touch") { 16573 if (xgridFocus.empty()) { 16574 resizing && ($$.showCircleFocus == null ? void 0 : $$.showCircleFocus()); 16575 } else { 16576 $$.showGridFocus(); 16577 } 16578 } else { 16579 const isRotated = $$.config.axis_rotated; 16580 xgridFocus.attr("x1", isRotated ? 0 : -10).attr("x2", isRotated ? width : -10).attr("y1", isRotated ? -10 : 0).attr("y2", isRotated ? -10 : height); 16581 } 16582 16583 // need to return 'true' as of being pushed to the redraw list 16584 // ref: getRedrawList() 16585 return !0; 16586 }, 16587 generateGridData: function generateGridData(type, scale) { 16588 var _this12 = this; 16589 const $$ = this, 16590 tickNum = $$.$el.main.select("." + $AXIS.axisX).selectAll(".tick").size(); 16591 let gridData = []; 16592 if (type === "year") { 16593 const xDomain = $$.getXDomain(), 16594 _xDomain$map = xDomain.map(function (v) { 16595 _newArrowCheck(this, _this12); 16596 return v.getFullYear(); 16597 }.bind(this)), 16598 firstYear = _xDomain$map[0], 16599 lastYear = _xDomain$map[1]; 16600 for (let i = firstYear; i <= lastYear; i++) { 16601 gridData.push(new Date(i + "-01-01 00:00:00")); 16602 } 16603 } else { 16604 gridData = scale.ticks(10); 16605 if (gridData.length > tickNum) { 16606 // use only int 16607 gridData = gridData.filter(function (d) { 16608 _newArrowCheck(this, _this12); 16609 return (d + "").indexOf(".") < 0; 16610 }.bind(this)); 16611 } 16612 } 16613 return gridData; 16614 }, 16615 getGridFilterToRemove: function getGridFilterToRemove(params) { 16616 var _this13 = this; 16617 return params ? function (line) { 16618 var _this14 = this; 16619 _newArrowCheck(this, _this13); 16620 let found = !1; 16621 (isArray(params) ? params.concat() : [params]).forEach(function (param) { 16622 _newArrowCheck(this, _this14); 16623 if ("value" in param && line.value === param.value || "class" in param && line.class === param.class) { 16624 found = !0; 16625 } 16626 }.bind(this)); 16627 return found; 16628 }.bind(this) : function () { 16629 _newArrowCheck(this, _this13); 16630 return !0; 16631 }.bind(this); 16632 }, 16633 removeGridLines: function removeGridLines(params, forX) { 16634 var _this15 = this; 16635 const $$ = this, 16636 config = $$.config, 16637 $T = $$.$T, 16638 toRemove = $$.getGridFilterToRemove(params), 16639 toShow = function (line) { 16640 _newArrowCheck(this, _this15); 16641 return !toRemove(line); 16642 }.bind(this), 16643 classLines = forX ? $GRID.xgridLines : $GRID.ygridLines, 16644 classLine = forX ? $GRID.xgridLine : $GRID.ygridLine; 16645 $T($$.$el.main.select("." + classLines).selectAll("." + classLine).filter(toRemove)).style("opacity", "0").remove(); 16646 const gridLines = "grid_" + (forX ? "x" : "y") + "_lines"; 16647 config[gridLines] = config[gridLines].filter(toShow); 16648 } 16649}); 16650;// CONCATENATED MODULE: ./src/ChartInternal/internals/region.ts 16651 16652/** 16653 * Copyright (c) 2017 ~ present NAVER Corp. 16654 * billboard.js project is licensed under the MIT license 16655 */ 16656 // selection 16657 16658 16659/* harmony default export */ var region = ({ 16660 initRegion: function initRegion() { 16661 const $$ = this, 16662 $el = $$.$el; 16663 $el.region.main = $el.main.insert("g", ":first-child").attr("clip-path", $$.state.clip.path).attr("class", $REGION.regions); 16664 }, 16665 updateRegion: function updateRegion() { 16666 const $$ = this, 16667 config = $$.config, 16668 region = $$.$el.region, 16669 $T = $$.$T; 16670 if (!region.main) { 16671 $$.initRegion(); 16672 } 16673 16674 // hide if arc type 16675 region.main.style("visibility", $$.hasArcType() ? "hidden" : null); 16676 16677 // select <g> element 16678 const regions = region.main.selectAll("." + $REGION.region).data(config.regions); 16679 $T(regions.exit()).style("opacity", "0").remove(); 16680 const regionsEnter = regions.enter().append("g"); 16681 regionsEnter.append("rect").style("fill-opacity", "0"); 16682 region.list = regionsEnter.merge(regions).attr("class", $$.classRegion.bind($$)); 16683 region.list.each(function (d) { 16684 var _d$label; 16685 const g = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 16686 if (g.select("text").empty() && (_d$label = d.label) != null && _d$label.text) { 16687 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).append("text").style("opacity", "0"); 16688 } 16689 }); 16690 }, 16691 redrawRegion: function redrawRegion(withTransition) { 16692 var _this = this; 16693 const $$ = this, 16694 region = $$.$el.region, 16695 $T = $$.$T; 16696 let regions = region.list.select("rect"), 16697 label = region.list.selectAll("text"); 16698 regions = $T(regions, withTransition).attr("x", $$.regionX.bind($$)).attr("y", $$.regionY.bind($$)).attr("width", $$.regionWidth.bind($$)).attr("height", $$.regionHeight.bind($$)); 16699 label = $T(label, withTransition).attr("transform", function (d) { 16700 var _d$label2; 16701 _newArrowCheck(this, _this); 16702 const _ref = (_d$label2 = d.label) != null ? _d$label2 : {}, 16703 _ref$x = _ref.x, 16704 x = _ref$x === void 0 ? 0 : _ref$x, 16705 _ref$y = _ref.y, 16706 y = _ref$y === void 0 ? 0 : _ref$y, 16707 _ref$rotated = _ref.rotated, 16708 rotated = _ref$rotated === void 0 ? !1 : _ref$rotated; 16709 return "translate(" + ($$.regionX.bind($$)(d) + x) + ", " + ($$.regionY.bind($$)(d) + y) + ")" + (rotated ? " rotate(-90)" : ""); 16710 }.bind(this)).attr("text-anchor", function (d) { 16711 var _d$label3; 16712 _newArrowCheck(this, _this); 16713 return (_d$label3 = d.label) != null && _d$label3.rotated ? "end" : null; 16714 }.bind(this)).attr("dy", "1em").style("fill", function (d) { 16715 var _d$label$color, _d$label4; 16716 _newArrowCheck(this, _this); 16717 return (_d$label$color = (_d$label4 = d.label) == null ? void 0 : _d$label4.color) != null ? _d$label$color : null; 16718 }.bind(this)).text(function (d) { 16719 var _d$label5; 16720 _newArrowCheck(this, _this); 16721 return (_d$label5 = d.label) == null ? void 0 : _d$label5.text; 16722 }.bind(this)); 16723 return [regions.style("fill-opacity", function (d) { 16724 _newArrowCheck(this, _this); 16725 return isValue(d.opacity) ? d.opacity : null; 16726 }.bind(this)).on("end", function () { 16727 // remove unnecessary rect after transition 16728 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this.parentNode).selectAll("rect:not([x])").remove(); 16729 }), label.style("opacity", null)]; 16730 }, 16731 getRegionXY: function getRegionXY(type, d) { 16732 const $$ = this, 16733 config = $$.config, 16734 scale = $$.scale, 16735 isRotated = config.axis_rotated, 16736 isX = type === "x"; 16737 let key = "start", 16738 currScale, 16739 pos = 0; 16740 if (d.axis === "y" || d.axis === "y2") { 16741 if (!isX) { 16742 key = "end"; 16743 } 16744 if ((isX ? isRotated : !isRotated) && key in d) { 16745 currScale = scale[d.axis]; 16746 pos = currScale(d[key]); 16747 } 16748 } else if ((isX ? !isRotated : isRotated) && key in d) { 16749 currScale = scale.zoom || scale.x; 16750 pos = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : d[key]); 16751 } 16752 return pos; 16753 }, 16754 regionX: function regionX(d) { 16755 return this.getRegionXY("x", d); 16756 }, 16757 regionY: function regionY(d) { 16758 return this.getRegionXY("y", d); 16759 }, 16760 getRegionSize: function getRegionSize(type, d) { 16761 const $$ = this, 16762 config = $$.config, 16763 scale = $$.scale, 16764 state = $$.state, 16765 isRotated = config.axis_rotated, 16766 isWidth = type === "width",
16767 start = $$[isWidth ? "regionX" : "regionY"](d); 16768 let currScale, 16769 key = "end", 16770 end = state[type]; 16771 if (d.axis === "y" || d.axis === "y2") { 16772 if (!isWidth) { 16773 key = "start"; 16774 } 16775 if ((isWidth ? isRotated : !isRotated) && key in d) { 16776 currScale = scale[d.axis]; 16777 end = currScale(d[key]); 16778 } 16779 } else if ((isWidth ? !isRotated : isRotated) && key in d) { 16780 currScale = scale.zoom || scale.x; 16781 end = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : d[key]); 16782 } 16783 return end < start ? 0 : end - start; 16784 }, 16785 regionWidth: function regionWidth(d) { 16786 return this.getRegionSize("width", d); 16787 }, 16788 regionHeight: function regionHeight(d) { 16789 return this.getRegionSize("height", d); 16790 }, 16791 isRegionOnX: function isRegionOnX(d) { 16792 return !d.axis || d.axis === "x"; 16793 } 16794}); 16795;// CONCATENATED MODULE: ./src/ChartInternal/internals/size.axis.ts 16796/** 16797 * Copyright (c) 2017 ~ present NAVER Corp. 16798 * billboard.js project is licensed under the MIT license 16799 */ 16800 16801/* harmony default export */ var size_axis = ({ 16802 /** 16803 * Get Axis size according its position 16804 * @param {string} id Axis id value - x, y or y2 16805 * @returns {number} size Axis size value 16806 * @private 16807 */ 16808 getAxisSize: function getAxisSize(id) { 16809 const $$ = this, 16810 isRotated = $$.config.axis_rotated; 16811 return isRotated && id === "x" || !isRotated && /y2?/.test(id) ? $$.getAxisWidthByAxisId(id, !0) : $$.getHorizontalAxisHeight(id); 16812 }, 16813 getAxisWidthByAxisId: function getAxisWidthByAxisId(id, withoutRecompute) { 16814 const $$ = this; 16815 if ($$.axis) { 16816 var _$$$axis, _$$$config$padding; 16817 const position = (_$$$axis = $$.axis) == null ? void 0 : _$$$axis.getLabelPositionById(id), 16818 _$$$axis$getMaxTickSi = $$.axis.getMaxTickSize(id, withoutRecompute), 16819 width = _$$$axis$getMaxTickSi.width, 16820 gap = width === 0 ? .5 : 0; 16821 return width + (((_$$$config$padding = $$.config.padding) == null ? void 0 : _$$$config$padding.mode) === "fit" ? position.isInner ? 10 + gap : 10 : position.isInner ? 20 + gap : 40); 16822 } else { 16823 return 40; 16824 } 16825 }, 16826 getHorizontalAxisHeight: function getHorizontalAxisHeight(id) { 16827 var _config$padding, _config$padding2; 16828 const $$ = this, 16829 config = $$.config, 16830 state = $$.state, 16831 _state = state, 16832 rotatedPadding = _state.rotatedPadding, 16833 isLegendRight = _state.isLegendRight, 16834 isLegendInset = _state.isLegendInset, 16835 isRotated = config.axis_rotated, 16836 isFitPadding = ((_config$padding = config.padding) == null ? void 0 : _config$padding.mode) === "fit", 16837 isInner = config["axis_" + id + "_inner"], 16838 hasLabelText = config["axis_" + id + "_label"].text; 16839 let h = ((_config$padding2 = config.padding) == null ? void 0 : _config$padding2.mode) === "fit" ? isInner && !hasLabelText ? id === "y" ? 1 : 0 : 20 : 30; 16840 if (id === "x" && !config.axis_x_show) { 16841 return 8; 16842 } 16843 if (id === "x" && isNumber(config.axis_x_height)) { 16844 return config.axis_x_height; 16845 } 16846 if (id === "y" && !config.axis_y_show) { 16847 return config.legend_show && !isLegendRight && !isLegendInset ? 10 : 1; 16848 } 16849 if (id === "y2" && !config.axis_y2_show) { 16850 return isFitPadding ? 0 : rotatedPadding.top; 16851 } 16852 const maxtickSize = $$.axis.getMaxTickSize(id); 16853 if (maxtickSize.height > 13) { 16854 h += maxtickSize.height - 13; 16855 } 16856 return h + ($$.axis.getLabelPositionById(id).isInner ? 0 : 10) + (id === "y2" && !isRotated ? -10 : 0); 16857 }, 16858 getEventRectWidth: function getEventRectWidth() { 16859 const $$ = this, 16860 config = $$.config, 16861 axis = $$.axis, 16862 isInverted = config.axis_x_inverted, 16863 tickInterval = axis.x.tickInterval(); 16864 return Math.max(0, isInverted ? Math.abs(tickInterval) : tickInterval); 16865 }, 16866 /** 16867 * Get axis tick test rotate value 16868 * @param {string} id Axis id 16869 * @returns {number} rotate value 16870 * @private 16871 */ 16872 getAxisTickRotate: function getAxisTickRotate(id) { 16873 const $$ = this, 16874 axis = $$.axis, 16875 config = $$.config, 16876 state = $$.state, 16877 $el = $$.$el; 16878 let rotate = config["axis_" + id + "_tick_rotate"]; 16879 if (id === "x") { 16880 const allowedXAxisTypes = axis.isCategorized() || axis.isTimeSeries(); 16881 if (config.axis_x_tick_fit && allowedXAxisTypes) { 16882 const xTickCount = config.axis_x_tick_count, 16883 currentXTicksLength = state.current.maxTickSize.x.ticks.length; 16884 let tickCount = 0; 16885 if (xTickCount) { 16886 tickCount = xTickCount > currentXTicksLength ? currentXTicksLength : xTickCount; 16887 } else if (currentXTicksLength) { 16888 tickCount = currentXTicksLength; 16889 } 16890 if (tickCount !== state.axis.x.tickCount) { 16891 const targets = $$.data.targets; 16892 state.axis.x.padding = $$.getXDomainPadding([$$.getXDomainMinMax(targets, "min"), $$.getXDomainMinMax(targets, "max")], tickCount); 16893 } 16894 state.axis.x.tickCount = tickCount; 16895 } 16896 if ($el.svg && config.axis_x_tick_autorotate && config.axis_x_tick_fit && !config.axis_x_tick_multiline && !config.axis_x_tick_culling && allowedXAxisTypes) { 16897 rotate = $$.needToRotateXAxisTickTexts() ? config.axis_x_tick_rotate : 0; 16898 } 16899 } 16900 return rotate; 16901 }, 16902 /** 16903 * Check weather axis tick text needs to be rotated 16904 * @returns {boolean} 16905 * @private 16906 */ 16907 needToRotateXAxisTickTexts: function needToRotateXAxisTickTexts() { 16908 const $$ = this, 16909 _$$$state = $$.state, 16910 axis = _$$$state.axis, 16911 current = _$$$state.current, 16912 xAxisLength = current.width - $$.getCurrentPaddingByDirection("left") - $$.getCurrentPaddingByDirection("right"), 16913 tickCountWithPadding = axis.x.tickCount + axis.x.padding.left + axis.x.padding.right, 16914 _$$$axis$getMaxTickSi2 = $$.axis.getMaxTickSize("x"),
16915 width = _$$$axis$getMaxTickSi2.width, 16916 tickLength = tickCountWithPadding ? xAxisLength / tickCountWithPadding : 0; 16917 return width > tickLength; 16918 } 16919}); 16920;// CONCATENATED MODULE: ./src/config/Options/data/axis.ts 16921/** 16922 * Copyright (c) 2017 ~ present NAVER Corp. 16923 * billboard.js project is licensed under the MIT license 16924 */ 16925 16926/** 16927 * Axis based chart data config options 16928 */ 16929/* harmony default export */ var data_axis = ({ 16930 /** 16931 * Specify the keys of the x values for each data.<br><br> 16932 * This option can be used if we want to show the data that has different x values. 16933 * @name dataâ¤xs 16934 * @memberof Options 16935 * @type {object} 16936 * @default {} 16937 * @example 16938 * data: { 16939 * xs: { 16940 * data1: "x1", 16941 * data2: "x2" 16942 * } 16943 * } 16944 */ 16945 data_xs: {}, 16946 /** 16947 * Set a format specifier to parse string specifed as x. 16948 * @name dataâ¤xFormat 16949 * @memberof Options 16950 * @type {string} 16951 * @default %Y-%m-%d 16952 * @example 16953 * data: { 16954 * x: "x", 16955 * columns: [ 16956 * ["x", "01012019", "02012019", "03012019"], 16957 * ["data1", 30, 200, 100] 16958 * ], 16959 * // Format specifier to parse as datetime for given 'x' string value 16960 * xFormat: "%m%d%Y" 16961 * }, 16962 * axis: { 16963 * x: { 16964 * type: "timeseries" 16965 * } 16966 * } 16967 * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format) 16968 */ 16969 data_xFormat: "%Y-%m-%d", 16970 /** 16971 * Set localtime format to parse x axis. 16972 * @name dataâ¤xLocaltime 16973 * @memberof Options 16974 * @type {boolean} 16975 * @default true 16976 * @example 16977 * data: { 16978 * xLocaltime: false 16979 * } 16980 */ 16981 data_xLocaltime: !0, 16982 /** 16983 * Sort on x axis. 16984 * - **NOTE:** This option works for lineish(area/line/spline/step) types only. 16985 * @name dataâ¤xSort 16986 * @memberof Options 16987 * @type {boolean} 16988 * @default true 16989 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataXSort) 16990 * @example 16991 * data: { 16992 * xSort: false, 16993 * x: "x", 16994 * columns: [ 16995 * // The line graph will start to be drawn following the x axis sequence 16996 * // Below data, wil start drawing x=1: 200, x=2: 300, x=3: 100 16997 * ["x", 3, 1, 2], 16998 * ["data1", 100, 200, 300] 16999 * ] 17000 * } 17001 */ 17002 data_xSort: !0, 17003 /** 17004 * Set y axis the data related to. y and y2 can be used. 17005 * - **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 17006 * @name dataâ¤axes 17007 * @memberof Options 17008 * @type {object} 17009 * @default {} 17010 * @example 17011 * data: { 17012 * axes: { 17013 * data1: "y", 17014 * data2: "y2" 17015 * } 17016 * } 17017 */ 17018 data_axes: {}, 17019 /** 17020 * Define regions for each data.<br> 17021 * The values must be an array for each data and it should include an object that has `start`, `end` and `style`. 17022 * - The object type should be as: 17023 * - start {number}: Start data point number. If not set, the start will be the first data point. 17024 * - [end] {number}: End data point number. If not set, the end will be the last data point. 17025 * - [style.dasharray="2 2"] {object}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area. 17026 * - **NOTE:** Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions. 17027 * @name dataâ¤regions 17028 * @memberof Options 17029 * @type {object} 17030 * @default {} 17031 * @example 17032 * data: { 17033 * regions: { 17034 * data1: [{ 17035 * start: 1, 17036 * end: 2, 17037 * style: { 17038 * dasharray: "5 2" 17039 * } 17040 * }, { 17041 * start: 3 17042 * }], 17043 * ... 17044 * } 17045 * } 17046 */ 17047 data_regions: {}, 17048 /** 17049 * Set the stacking to be normalized 17050 * - **NOTE:** 17051 * - For stacking, '[data.groups](#.data%25E2%2580%25A4groups)' option should be set 17052 * - y Axis will be set in percentage value (0 ~ 100%) 17053 * - Must have postive values 17054 * @name dataâ¤stackâ¤normalize 17055 * @memberof Options 17056 * @type {boolean} 17057 * @default false 17058 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataStackNormalized) 17059 * @example 17060 * data: { 17061 * stack: { 17062 * normalize: true 17063 * } 17064 * } 17065 */ 17066 data_stack_normalize: !1 17067}); 17068;// CONCATENATED MODULE: ./src/config/Options/axis/x.ts 17069/** 17070 * Copyright (c) 2017 ~ present NAVER Corp. 17071 * billboard.js project is licensed under the MIT license 17072 */ 17073/** 17074 * x Axis config options 17075 */ 17076/* harmony default export */ var axis_x = ({ 17077 /** 17078 * Set clip-path attribute for x axis element 17079 * @name axisâ¤xâ¤clipPath 17080 * @memberof Options 17081 * @type {boolean} 17082 * @default true 17083 * @see [Demo]() 17084 * @example 17085 * // don't set 'clip-path' attribute
17086 * clipPath: false 17087 */ 17088 axis_x_clipPath: !0, 17089 /** 17090 * Show or hide x axis. 17091 * @name axisâ¤xâ¤show 17092 * @memberof Options 17093 * @type {boolean} 17094 * @default true 17095 * @example 17096 * axis: { 17097 * x: { 17098 * show: false 17099 * } 17100 * } 17101 */ 17102 axis_x_show: !0, 17103 /** 17104 * Set type of x axis.<br><br> 17105 * **Available Values:** 17106 * - category 17107 * - indexed 17108 * - log 17109 * - timeseries 17110 * 17111 * **NOTE:**<br> 17112 * - **log** type: 17113 * - the x values specified by [`data.x`](#.data%25E2%2580%25A4x)(or by any equivalent option), must be exclusively-positive. 17114 * - x axis min value should be >= 0. 17115 * - for 'category' type, `data.xs` option isn't supported. 17116 * 17117 * @name axisâ¤xâ¤type 17118 * @memberof Options 17119 * @type {string} 17120 * @default indexed 17121 * @see [Demo: indexed](https://naver.github.io/billboard.js/demo/#Chart.AreaChart) 17122 * @see [Demo: timeseries](https://naver.github.io/billboard.js/demo/#Chart.TimeseriesChart) 17123 * @see [Demo: category](https://naver.github.io/billboard.js/demo/#Data.CategoryData) 17124 * @see [Demo: log](https://naver.github.io/billboard.js/demo/#Axis.LogScales) 17125 * @example 17126 * axis: { 17127 * x: { 17128 * type: "timeseries" 17129 * } 17130 * } 17131 */ 17132 axis_x_type: "indexed", 17133 /** 17134 * Set how to treat the timezone of x values.<br> 17135 * If true, treat x value as localtime. If false, convert to UTC internally. 17136 * @name axisâ¤xâ¤localtime 17137 * @memberof Options 17138 * @type {boolean} 17139 * @default true 17140 * @example 17141 * axis: { 17142 * x: { 17143 * localtime: false 17144 * } 17145 * } 17146 */ 17147 axis_x_localtime: !0, 17148 /** 17149 * Set category names on category axis. 17150 * 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. 17151 * @name axisâ¤xâ¤categories 17152 * @memberof Options 17153 * @type {Array} 17154 * @default [] 17155 * @example 17156 * axis: { 17157 * x: { 17158 * categories: ["Category 1", "Category 2", ...] 17159 * } 17160 * } 17161 */ 17162 axis_x_categories: [], 17163 /** 17164 * centerize ticks on category axis. 17165 * @name axisâ¤xâ¤tickâ¤centered 17166 * @memberof Options 17167 * @type {boolean} 17168 * @default false 17169 * @example 17170 * axis: { 17171 * x: { 17172 * tick: { 17173 * centered: true 17174 * } 17175 * } 17176 * } 17177 */ 17178 axis_x_tick_centered: !1, 17179 /** 17180 * A function to format tick value. Format string is also available for timeseries data. 17181 * @name axisâ¤xâ¤tickâ¤format 17182 * @memberof Options 17183 * @type {Function|string} 17184 * @default undefined 17185 * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format) 17186 * @example 17187 * axis: { 17188 * x: { 17189 * tick: { 17190 * // for timeseries, a 'datetime' object is given as parameter 17191 * format: function(x) { 17192 * return x.getFullYear(); 17193 * } 17194 * 17195 * // for category, index(Number) and categoryName(String) are given as parameter 17196 * format: function(index, categoryName) { 17197 * return categoryName.substr(0, 10); 17198 * }, 17199 * 17200 * // for timeseries format specifier 17201 * format: "%Y-%m-%d %H:%M:%S" 17202 * } 17203 * } 17204 * } 17205 */ 17206 axis_x_tick_format: undefined, 17207 /** 17208 * Setting for culling ticks. 17209 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br> 17210 * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.x.tick.culling.lines=false`. 17211 * - `false`: all of ticks will be shown.<br><br> 17212 * The number of ticks to be shown can be chaned by `axis.x.tick.culling.max`. 17213 * @name axisâ¤xâ¤tickâ¤culling 17214 * @memberof Options 17215 * @type {boolean} 17216 * @default 17217 * `true` for indexed axis and timeseries axis, `false` for category axis 17218 * @example 17219 * axis: { 17220 * x: { 17221 * tick: { 17222 * culling: false 17223 * } 17224 * } 17225 * } 17226 */ 17227 axis_x_tick_culling: {}, 17228 /** 17229 * The number of tick texts will be adjusted to less than this value. 17230 * @name axisâ¤xâ¤tickâ¤cullingâ¤max 17231 * @memberof Options 17232 * @type {number} 17233 * @default 10 17234 * @example 17235 * axis: { 17236 * x: { 17237 * tick: { 17238 * culling: { 17239 * max: 5 17240 * } 17241 * } 17242 * } 17243 * } 17244 */ 17245 axis_x_tick_culling_max: 10, 17246 /** 17247 * Control visibility of tick lines within culling option, along with tick text. 17248 * @name axisâ¤xâ¤tickâ¤cullingâ¤lines 17249 * @memberof Options 17250 * @type {boolean} 17251 * @default true 17252 * @example 17253 * axis: { 17254 * x: { 17255 * tick: { 17256 * culling: { 17257 * lines: false, 17258 * } 17259 * } 17260 * } 17261 * } 17262 */ 17263 axis_x_tick_culling_lines: !0, 17264 /** 17265 * The number of x axis ticks to show.<br><br> 17266 * 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). 17267 * @name axisâ¤xâ¤tickâ¤count 17268 * @memberof Options 17269 * @type {number} 17270 * @default undefined 17271 * @example 17272 * axis: { 17273 * x: { 17274 * tick: { 17275 * count: 5 17276 * } 17277 * } 17278 * } 17279 */ 17280 axis_x_tick_count: undefined, 17281 /** 17282 * Show or hide x axis tick line. 17283 * @name axisâ¤xâ¤tickâ¤show 17284 * @memberof Options 17285 * @type {boolean} 17286 * @default true 17287 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 17288 * @example 17289 * axis: { 17290 * x: { 17291 * tick: { 17292 * show: false 17293 * } 17294 * } 17295 * } 17296 */ 17297 axis_x_tick_show: !0, 17298 /** 17299 * Show or hide x axis tick text. 17300 * @name axisâ¤xâ¤tickâ¤textâ¤show 17301 * @memberof Options 17302 * @type {boolean} 17303 * @default true 17304 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 17305 * @example 17306 * axis: { 17307 * x: { 17308 * tick: { 17309 * text: { 17310 * show: false 17311 * } 17312 * } 17313 * } 17314 * } 17315 */ 17316 axis_x_tick_text_show: !0, 17317 /** 17318 * Set the x Axis tick text's position relatively its original position 17319 * @name axisâ¤xâ¤tickâ¤textâ¤position 17320 * @memberof Options 17321 * @type {object} 17322 * @default {x: 0, y:0} 17323 * @example 17324 * axis: { 17325 * x: { 17326 * tick: { 17327 * text: { 17328 * position: { 17329 * x: 10, 17330 * y: 10 17331 * } 17332 * } 17333 * } 17334 * } 17335 * } 17336 */ 17337 axis_x_tick_text_position: { 17338 x: 0, 17339 y: 0 17340 }, 17341 /** 17342 * Fit x axis ticks. 17343 * - **true**: ticks will be shown according to x value of the data points. 17344 * - **false**: ticks will be shown as to have same intervals. 17345 * @name axisâ¤xâ¤tickâ¤fit 17346 * @memberof Options 17347 * @type {boolean} 17348 * @default true 17349 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickFitting) 17350 * @see [Demo: for timeseries zoom](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickTimeseries) 17351 * @example 17352 * axis: { 17353 * x: { 17354 * tick: { 17355 * fit: false 17356 * } 17357 * } 17358 * } 17359 */ 17360 axis_x_tick_fit: !0, 17361 /** 17362 * Set the x values of ticks manually.<br><br> 17363 * If this option is provided, the position of the ticks will be determined based on those values.<br> 17364 * This option works with `timeseries` data and the x values will be parsed accoding to the type of the value and data.xFormat option. 17365 * @name axisâ¤xâ¤tickâ¤values 17366 * @memberof Options 17367 * @type {Array|Function} 17368 * @default null 17369 * @example 17370 * axis: { 17371 * x: { 17372 * tick: { 17373 * values: [1, 2, 4, 8, 16, 32, ...], 17374 * 17375 * // an Array value should be returned 17376 * values: function() { 17377 * return [ ... ]; 17378 * } 17379 * } 17380 * } 17381 * } 17382 */ 17383 axis_x_tick_values: null, 17384 /** 17385 * Rotate x axis tick text if there is not enough space for 'category' and 'timeseries' type axis. 17386 * - **NOTE:** The conditions where `autorotate` is enabled are: 17387 * - axis.x.type='category' or 'timeseries 17388 * - axis.x.tick.multiline=false 17389 * - axis.x.tick.culling=false 17390 * - axis.x.tick.fit=true 17391 * - **NOTE:** axis.x.tick.clippath=false is necessary for calculating the overflow padding between the end of x axis and the width of the SVG 17392 * @name axisâ¤xâ¤tickâ¤autorotate 17393 * @memberof Options 17394 * @type {boolean} 17395 * @default false 17396 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickAutorotate) 17397 * @example 17398 * axis: { 17399 * x: { 17400 * tick: { 17401 * rotate: 15, 17402 * autorotate: true, 17403 * multiline: false, 17404 * culling: false, 17405 * fit: true 17406 * },
17407 * clipPath: false 17408 * } 17409 * } 17410 */ 17411 axis_x_tick_autorotate: !1, 17412 /** 17413 * Rotate x axis tick text. 17414 * - If you set negative value, it will rotate to opposite direction. 17415 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `false`. 17416 * - 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. 17417 * @name axisâ¤xâ¤tickâ¤rotate 17418 * @memberof Options 17419 * @type {number} 17420 * @default 0 17421 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.RotateXAxisTickText) 17422 * @example 17423 * axis: { 17424 * x: { 17425 * tick: { 17426 * rotate: 60 17427 * } 17428 * } 17429 * } 17430 */ 17431 axis_x_tick_rotate: 0, 17432 /** 17433 * Show x axis outer tick. 17434 * @name axisâ¤xâ¤tickâ¤outer 17435 * @memberof Options 17436 * @type {boolean} 17437 * @default true 17438 * @example 17439 * axis: { 17440 * x: { 17441 * tick: { 17442 * outer: false 17443 * } 17444 * } 17445 * } 17446 */ 17447 axis_x_tick_outer: !0, 17448 /** 17449 * Set tick text to be multiline 17450 * - **NOTE:** 17451 * > When x tick text contains `\n`, it's used as line break and 'axis.x.tick.width' option is ignored. 17452 * @name axisâ¤xâ¤tickâ¤multiline 17453 * @memberof Options 17454 * @type {boolean} 17455 * @default true 17456 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.XAxisTickMultiline) 17457 * @example 17458 * axis: { 17459 * x: { 17460 * tick: { 17461 * multiline: false 17462 * } 17463 * } 17464 * } 17465 * @example 17466 * // example of line break with '\n' 17467 * // In this case, 'axis.x.tick.width' is ignored 17468 * data: { 17469 * x: "x", 17470 * columns: [ 17471 * ["x", "long\ntext", "Another\nLong\nText"], 17472 * ... 17473 * ], 17474 * } 17475 */ 17476 axis_x_tick_multiline: !0, 17477 /** 17478 * Set tick width 17479 * - **NOTE:** 17480 * > When x tick text contains `\n`, this option is ignored. 17481 * @name axisâ¤xâ¤tickâ¤width 17482 * @memberof Options 17483 * @type {number} 17484 * @default null 17485 * @example 17486 * axis: { 17487 * x: { 17488 * tick: { 17489 * width: 50 17490 * } 17491 * } 17492 * } 17493 */ 17494 axis_x_tick_width: null, 17495 /** 17496 * Set to display system tooltip(via 'title' attribute) for tick text 17497 * - **NOTE:** Only available for category axis type (`axis.x.type='category'`) 17498 * @name axisâ¤xâ¤tickâ¤tooltip 17499 * @memberof Options 17500 * @type {boolean} 17501 * @default false 17502 * @example 17503 * axis: { 17504 * x: { 17505 * tick: { 17506 * tooltip: true 17507 * } 17508 * } 17509 * } 17510 */ 17511 axis_x_tick_tooltip: !1, 17512 /** 17513 * Set max value of x axis range. 17514 * @name axisâ¤xâ¤max 17515 * @memberof Options 17516 * @property {number} max Set the max value 17517 * @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. 17518 * - **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`. 17519 * @property {number} [max.value] Set the max value 17520 * @example 17521 * axis: { 17522 * x: { 17523 * max: 100, 17524 * 17525 * max: { 17526 * // 'fit=true' will make x axis max to be limited as the bound data value max when 'max.value' is greater. 17527 * // - when bound data max is '10' and max.value: '100' ==> x axis max will be '10' 17528 * // - when bound data max is '1000' and max.value: '100' ==> x axis max will be '100' 17529 * fit: true, 17530 * value: 100 17531 * } 17532 * } 17533 * } 17534 */ 17535 axis_x_max: undefined, 17536 /** 17537 * Set min value of x axis range. 17538 * @name axisâ¤xâ¤min 17539 * @memberof Options 17540 * @property {number} min Set the min value 17541 * @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. 17542 * - **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`. 17543 * @property {number} [min.value] Set the min value 17544 * @example 17545 * axis: { 17546 * x: { 17547 * min: -100, 17548 * 17549 * min: { 17550 * // 'fit=true' will make x axis min to be limited as the bound data value min when 'min.value' is lower. 17551 * // - when bound data min is '-10' and min.value: '-100' ==> x axis min will be '-10' 17552 * // - when bound data min is '-1000' and min.value: '-100' ==> x axis min will be '-100' 17553 * fit: true, 17554 * value: -100 17555 * } 17556 * } 17557 * } 17558 */ 17559 axis_x_min: undefined, 17560 /** 17561 * Change the direction of x axis.<br><br> 17562 * If true set, the direction will be `right -> left`. 17563 * @name axisâ¤xâ¤inverted 17564 * @memberof Options 17565 * @type {boolean} 17566 * @default false 17567 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis) 17568 * @example 17569 * axis: { 17570 * x: { 17571 * inverted: true 17572 * } 17573 * } 17574 */ 17575 axis_x_inverted: !1, 17576 /** 17577 * Set padding for x axis.<br><br> 17578 * If this option is set, the range of x axis will increase/decrease according to the values. 17579 * If no padding is needed in the rage of x axis, 0 should be set. 17580 * By default, left/right padding are set depending on x axis type or chart types. 17581 * - **NOTE:** 17582 * - The meaning of padding values, differs according axis types:<br> 17583 * - **category/indexed:** The unit of tick value 17584 * ex. the given value `1`, is same as the width of 1 tick width 17585 * - **timeseries:** Numeric time value 17586 * 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 17587 * - If want values to be treated as pixels, specify `unit:"px"`. 17588 * - The pixel value will be convered based on the scale values. Hence can not reflect accurate padding result. 17589 * @name axisâ¤xâ¤padding 17590 * @memberof Options 17591 * @type {object|number} 17592 * @default {} 17593 * @example 17594 * axis: { 17595 * x: { 17596 * padding: { 17597 * // when axis type is 'category' 17598 * left: 1, // set left padding width of equivalent value of a tick's width
17599 * right: 0.5 // set right padding width as half of equivalent value of tick's width 17600 * 17601 * // when axis type is 'timeseries' 17602 * left: 1000*60*60*24, // set left padding width of equivalent value of a day tick's width 17603 * right: 1000*60*60*12 // set right padding width as half of equivalent value of a day tick's width 17604 * }, 17605 * 17606 * // or set both values at once. 17607 * padding: 10, 17608 * 17609 * // or set padding values as pixel unit. 17610 * padding: { 17611 * left: 100, 17612 * right: 50, 17613 * unit: "px" 17614 * }, 17615 * } 17616 * } 17617 */ 17618 axis_x_padding: {}, 17619 /** 17620 * Set height of x axis.<br><br> 17621 * 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. 17622 * @name axisâ¤xâ¤height 17623 * @memberof Options 17624 * @type {number} 17625 * @default undefined 17626 * @example 17627 * axis: { 17628 * x: { 17629 * height: 20 17630 * } 17631 * } 17632 */ 17633 axis_x_height: undefined, 17634 /** 17635 * Set default extent for subchart and zoom. This can be an array or function that returns an array. 17636 * @name axisâ¤xâ¤extent 17637 * @memberof Options 17638 * @type {Array|Function} 17639 * @default undefined 17640 * @example 17641 * axis: { 17642 * x: { 17643 * // extent range as a pixel value 17644 * extent: [0, 200], 17645 * 17646 * // when axis is 'timeseries', parsable datetime string 17647 * extent: ["2019-03-01", "2019-03-05"], 17648 * 17649 * // return extent value 17650 * extent: function(domain, scale) { 17651 * var extent = domain.map(function(v) { 17652 * return scale(v); 17653 * }); 17654 * 17655 * // it should return a format of array 17656 * // ex) [0, 584] 17657 * return extent; 17658 * } 17659 * } 17660 * } 17661 */ 17662 axis_x_extent: undefined, 17663 /** 17664 * Set label on x axis.<br><br> 17665 * You can set x axis label and change its position by this option. 17666 * `string` and `object` can be passed and we can change the poisiton by passing object that has position key.<br> 17667 * Available position differs according to the axis direction (vertical or horizontal). 17668 * If string set, the position will be the default. 17669 * 17670 * - **If it's horizontal axis:** 17671 * - inner-right [default] 17672 * - inner-center 17673 * - inner-left 17674 * - outer-right 17675 * - outer-center 17676 * - outer-left 17677 * - **If it's vertical axis:** 17678 * - inner-top [default] 17679 * - inner-middle 17680 * - inner-bottom 17681 * - outer-top 17682 * - outer-middle 17683 * - outer-bottom 17684 * @name axisâ¤xâ¤label 17685 * @memberof Options 17686 * @type {string|object} 17687 * @default undefined 17688 * @example 17689 * axis: { 17690 * x: { 17691 * label: "Your X Axis" 17692 * } 17693 * } 17694 * 17695 * axis: { 17696 * x: { 17697 * label: { 17698 * text: "Your X Axis", 17699 * position: "outer-center" 17700 * } 17701 * } 17702 * } 17703 */ 17704 axis_x_label: {}, 17705 /** 17706 * Set additional axes for x Axis. 17707 * - **NOTE:** Axis' scale is based on x Axis value if domain option isn't set. 17708 * 17709 * Each axis object should consist with following options: 17710 * 17711 * | Name | Type | Default | Description | 17712 * | --- | --- | --- | --- | 17713 * | domain | Array | - | Set the domain value | 17714 * | tick.outer | boolean | true | Show outer tick | 17715 * | tick.format | Function | - | Set formatter for tick text | 17716 * | tick.count | Number | - | Set the number of y axis ticks | 17717 * | tick.values | Array | - | Set tick values manually | 17718 * @name axisâ¤xâ¤axes 17719 * @memberof Options 17720 * @type {Array} 17721 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes) 17722 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain) 17723 * @example 17724 * x: { 17725 * axes: [ 17726 * { 17727 * // if set, will not be correlated with the main x Axis domain value 17728 * domain: [0, 1000], 17729 * tick: { 17730 * outer: false, 17731 * format: function(x) { 17732 * return x + "%"; 17733 * }, 17734 * count: 2, 17735 * values: [10, 20, 30] 17736 * } 17737 * }, 17738 * ... 17739 * ] 17740 * } 17741 */ 17742 axis_x_axes: [] 17743}); 17744;// CONCATENATED MODULE: ./src/config/Options/axis/y.ts 17745/** 17746 * Copyright (c) 2017 ~ present NAVER Corp. 17747 * billboard.js project is licensed under the MIT license 17748 */ 17749/** 17750 * y Axis config options 17751 */ 17752/* harmony default export */ var y = ({ 17753 /** 17754 * Set clip-path attribute for y axis element 17755 * - **NOTE**: `clip-path` attribute for y Axis is set only when `axis.y.inner` option is true. 17756 * @name axisâ¤yâ¤clipPath 17757 * @memberof Options 17758 * @type {boolean} 17759 * @default true 17760 * @example 17761 * // don't set 'clip-path' attribute
17762 * clipPath: false 17763 */ 17764 axis_y_clipPath: !0, 17765 /** 17766 * Show or hide y axis. 17767 * @name axisâ¤yâ¤show 17768 * @memberof Options 17769 * @type {boolean} 17770 * @default true 17771 * @example 17772 * axis: { 17773 * y: { 17774 * show: false 17775 * } 17776 * } 17777 */ 17778 axis_y_show: !0, 17779 /** 17780 * Set type of y axis.<br><br> 17781 * **Available Values:** 17782 * - indexed 17783 * - log 17784 * - timeseries 17785 * 17786 * **NOTE:**<br> 17787 * - **log** type: 17788 * - the bound data values must be exclusively-positive. 17789 * - y axis min value should be >= 0. 17790 * - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported. 17791 * 17792 * @name axisâ¤yâ¤type 17793 * @memberof Options 17794 * @type {string} 17795 * @default "indexed" 17796 * @see [Demo: log](https://naver.github.io/billboard.js/demo/#Axis.LogScales) 17797 * @example 17798 * axis: { 17799 * y: { 17800 * type: "log" 17801 * } 17802 * } 17803 */ 17804 axis_y_type: "indexed", 17805 /** 17806 * Set max value of y axis. 17807 * - **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). 17808 * @name axisâ¤yâ¤max 17809 * @memberof Options 17810 * @type {number} 17811 * @default undefined 17812 * @example 17813 * axis: { 17814 * y: { 17815 * max: 1000 17816 * } 17817 * } 17818 */ 17819 axis_y_max: undefined, 17820 /** 17821 * Set min value of y axis. 17822 * - **NOTE:** 17823 * 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). 17824 * @name axisâ¤yâ¤min 17825 * @memberof Options 17826 * @type {number} 17827 * @default undefined 17828 * @example 17829 * axis: { 17830 * y: { 17831 * min: 1000 17832 * } 17833 * } 17834 */ 17835 axis_y_min: undefined, 17836 /** 17837 * Change the direction of y axis.<br><br> 17838 * If true set, the direction will be `top -> bottom`. 17839 * @name axisâ¤yâ¤inverted 17840 * @memberof Options 17841 * @type {boolean} 17842 * @default false 17843 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis) 17844 * @example 17845 * axis: { 17846 * y: { 17847 * inverted: true 17848 * } 17849 * } 17850 */ 17851 axis_y_inverted: !1, 17852 /** 17853 * Set center value of y axis. 17854 * @name axisâ¤yâ¤center 17855 * @memberof Options 17856 * @type {number} 17857 * @default undefined 17858 * @example 17859 * axis: { 17860 * y: { 17861 * center: 0 17862 * } 17863 * } 17864 */ 17865 axis_y_center: undefined, 17866 /** 17867 * Show y axis inside of the chart. 17868 * @name axisâ¤yâ¤inner 17869 * @memberof Options 17870 * @type {boolean} 17871 * @default false 17872 * @example 17873 * axis: { 17874 * y: { 17875 * inner: true 17876 * } 17877 * } 17878 */ 17879 axis_y_inner: !1, 17880 /** 17881 * Set label on y axis.<br><br> 17882 * 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). 17883 * @name axisâ¤yâ¤label 17884 * @memberof Options 17885 * @type {string|object} 17886 * @default {} 17887 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value. 17888 * @example 17889 * axis: { 17890 * y: { 17891 * label: "Your Y Axis" 17892 * } 17893 * } 17894 * 17895 * axis: { 17896 * y: { 17897 * label: { 17898 * text: "Your Y Axis", 17899 * position: "outer-middle" 17900 * } 17901 * } 17902 * } 17903 */ 17904 axis_y_label: {}, 17905 /** 17906 * Set formatter for y axis tick text.<br><br> 17907 * This option accepts d3.format object as well as a function you define. 17908 * @name axisâ¤yâ¤tickâ¤format 17909 * @memberof Options 17910 * @type {Function} 17911 * @default undefined 17912 * @example 17913 * axis: { 17914 * y: { 17915 * tick: { 17916 * format: function(x) { 17917 * return x.getFullYear(); 17918 * } 17919 * } 17920 * } 17921 * } 17922 */ 17923 axis_y_tick_format: undefined, 17924 /** 17925 * Setting for culling ticks. 17926 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br> 17927 * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y.tick.culling.lines=false`. 17928 * - `false`: all of ticks will be shown.<br><br> 17929 * The number of ticks to be shown can be chaned by `axis.y.tick.culling.max`. 17930 * @name axisâ¤yâ¤tickâ¤culling 17931 * @memberof Options 17932 * @type {boolean} 17933 * @default false 17934 * @example 17935 * axis: { 17936 * y: { 17937 * tick: { 17938 * culling: false 17939 * } 17940 * } 17941 * } 17942 */ 17943 axis_y_tick_culling: !1, 17944 /** 17945 * The number of tick texts will be adjusted to less than this value. 17946 * @name axisâ¤yâ¤tickâ¤cullingâ¤max 17947 * @memberof Options 17948 * @type {number} 17949 * @default 5 17950 * @example 17951 * axis: { 17952 * y: { 17953 * tick: { 17954 * culling: { 17955 * max: 5 17956 * } 17957 * } 17958 * } 17959 * } 17960 */ 17961 axis_y_tick_culling_max: 5, 17962 /** 17963 * Control visibility of tick lines within culling option, along with tick text. 17964 * @name axisâ¤yâ¤tickâ¤cullingâ¤lines 17965 * @memberof Options 17966 * @type {boolean} 17967 * @default true 17968 * @example 17969 * axis: { 17970 * y: { 17971 * tick: { 17972 * culling: { 17973 * lines: false, 17974 * } 17975 * } 17976 * } 17977 * } 17978 */ 17979 axis_y_tick_culling_lines: !0, 17980 /** 17981 * Show y axis outer tick. 17982 * @name axisâ¤yâ¤tickâ¤outer 17983 * @memberof Options 17984 * @type {boolean} 17985 * @default true 17986 * @example 17987 * axis: { 17988 * y: { 17989 * tick: { 17990 * outer: false 17991 * } 17992 * } 17993 * } 17994 */ 17995 axis_y_tick_outer: !0, 17996 /** 17997 * Set y axis tick values manually. 17998 * @name axisâ¤yâ¤tickâ¤values 17999 * @memberof Options 18000 * @type {Array|Function} 18001 * @default null 18002 * @example 18003 * axis: { 18004 * y: { 18005 * tick: { 18006 * values: [100, 1000, 10000], 18007 * 18008 * // an Array value should be returned 18009 * values: function() { 18010 * return [ ... ]; 18011 * } 18012 * } 18013 * } 18014 * } 18015 */ 18016 axis_y_tick_values: null, 18017 /** 18018 * Rotate y axis tick text. 18019 * - If you set negative value, it will rotate to opposite direction. 18020 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`. 18021 * @name axisâ¤yâ¤tickâ¤rotate 18022 * @memberof Options 18023 * @type {number} 18024 * @default 0 18025 * @example 18026 * axis: { 18027 * y: { 18028 * tick: { 18029 * rotate: 60 18030 * } 18031 * } 18032 * } 18033 */ 18034 axis_y_tick_rotate: 0, 18035 /** 18036 * Set the number of y axis ticks.<br><br> 18037 * - **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. 18038 * @name axisâ¤yâ¤tickâ¤count 18039 * @memberof Options 18040 * @type {number} 18041 * @default undefined 18042 * @example 18043 * axis: { 18044 * y: { 18045 * tick: { 18046 * count: 5 18047 * } 18048 * } 18049 * } 18050 */ 18051 axis_y_tick_count: undefined, 18052 /** 18053 * Show or hide y axis tick line. 18054 * @name axisâ¤yâ¤tickâ¤show 18055 * @memberof Options 18056 * @type {boolean} 18057 * @default true 18058 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 18059 * @example 18060 * axis: { 18061 * y: { 18062 * tick: { 18063 * show: false 18064 * } 18065 * } 18066 * } 18067 */ 18068 axis_y_tick_show: !0, 18069 /** 18070 * Set axis tick step(interval) size. 18071 * - **NOTE:** Will be ignored if `axis.y.tick.count` or `axis.y.tick.values` options are set. 18072 * @name axisâ¤yâ¤tickâ¤stepSize 18073 * @memberof Options 18074 * @type {number} 18075 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis) 18076 * @example 18077 * axis: { 18078 * y: { 18079 * tick: { 18080 * // tick value will step as indicated interval value. 18081 * // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60] 18082 * stepSize: 15 18083 * } 18084 * } 18085 * } 18086 */ 18087 axis_y_tick_stepSize: null, 18088 /** 18089 * Show or hide y axis tick text. 18090 * @name axisâ¤yâ¤tickâ¤textâ¤show 18091 * @memberof Options 18092 * @type {boolean} 18093 * @default true 18094 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 18095 * @example 18096 * axis: { 18097 * y: { 18098 * tick: { 18099 * text: { 18100 * show: false 18101 * } 18102 * } 18103 * } 18104 * } 18105 */ 18106 axis_y_tick_text_show: !0, 18107 /** 18108 * Set the y Axis tick text's position relatively its original position 18109 * @name axisâ¤yâ¤tickâ¤textâ¤position 18110 * @memberof Options 18111 * @type {object} 18112 * @default {x: 0, y:0} 18113 * @example 18114 * axis: { 18115 * y: { 18116 * tick: { 18117 * text: { 18118 * position: { 18119 * x: 10, 18120 * y: 10 18121 * } 18122 * } 18123 * } 18124 * } 18125 * } 18126 */ 18127 axis_y_tick_text_position: { 18128 x: 0, 18129 y: 0 18130 }, 18131 /** 18132 * Set the number of y axis ticks.<br><br> 18133 * - **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. 18134 * @name axisâ¤yâ¤tickâ¤time 18135 * @memberof Options 18136 * @private 18137 * @type {object} 18138 * @property {object} time time object 18139 * @property {Function} [time.value] D3's time interval function (https://github.com/d3/d3-time#intervals) 18140 * @example 18141 * axis: { 18142 * y: { 18143 * tick: { 18144 * time: { 18145 * // ticks at 15-minute intervals 18146 * // https://github.com/d3/d3-scale/blob/master/README.md#time_ticks 18147 * value: d3.timeMinute.every(15) 18148 * } 18149 * } 18150 * } 18151 * } 18152 */ 18153 // @TODO: not fully implemented yet 18154 axis_y_tick_time_value: undefined, 18155 /** 18156 * Set padding for y axis.<br><br> 18157 * You can set padding for y axis to create more space on the edge of the axis. 18158 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels. 18159 * 18160 * - **NOTE:** 18161 * - Given values are translated relative to the y Axis domain value for padding 18162 * - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom. 18163 * @name axisâ¤yâ¤padding 18164 * @memberof Options 18165 * @type {object|number} 18166 * @default {} 18167 * @example 18168 * axis: { 18169 * y: { 18170 * padding: { 18171 * top: 0, 18172 * bottom: 0 18173 * }, 18174 * 18175 * // or set both values at once. 18176 * padding: 10 18177 * } 18178 * } 18179 */ 18180 axis_y_padding: {}, 18181 /** 18182 * Set default range of y axis.<br><br> 18183 * This option set the default value for y axis when there is no data on init. 18184 * @name axisâ¤yâ¤default 18185 * @memberof Options 18186 * @type {Array} 18187 * @default undefined 18188 * @example 18189 * axis: { 18190 * y: { 18191 * default: [0, 1000] 18192 * } 18193 * } 18194 */ 18195 axis_y_default: undefined, 18196 /** 18197 * Set additional axes for y Axis. 18198 * - **NOTE:** Axis' scale is based on y Axis value if domain option isn't set. 18199 * 18200 * Each axis object should consist with following options: 18201 * 18202 * | Name | Type | Default | Description | 18203 * | --- | --- | --- | --- | 18204 * | domain | Array | - | Set the domain value | 18205 * | tick.outer | boolean | true | Show outer tick | 18206 * | tick.format | Function | - | Set formatter for tick text | 18207 * | tick.count | Number | - | Set the number of y axis ticks | 18208 * | tick.values | Array | - | Set tick values manually |
18209 * @name axisâ¤yâ¤axes 18210 * @memberof Options 18211 * @type {Array} 18212 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes) 18213 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain) 18214 * @example 18215 * y: { 18216 * axes: [ 18217 * { 18218 * // if set, will not be correlated with the main y Axis domain value 18219 * domain: [0, 1000], 18220 * tick: { 18221 * outer: false, 18222 * format: function(x) { 18223 * return x + "%"; 18224 * }, 18225 * count: 2, 18226 * values: [10, 20, 30] 18227 * } 18228 * }, 18229 * ... 18230 * ] 18231 * } 18232 */ 18233 axis_y_axes: [] 18234}); 18235;// CONCATENATED MODULE: ./src/config/Options/axis/y2.ts 18236/** 18237 * Copyright (c) 2017 ~ present NAVER Corp. 18238 * billboard.js project is licensed under the MIT license 18239 */ 18240/** 18241 * y2 Axis config options 18242 */ 18243/* harmony default export */ var y2 = ({ 18244 /** 18245 * Show or hide y2 axis. 18246 * - **NOTE**: 18247 * - When set to `false` will not generate y2 axis node. In this case, all 'y2' axis related functionality won't work properly. 18248 * - If need to use 'y2' related options while y2 isn't visible, set the value `true` and control visibility by css display property. 18249 * @name axisâ¤y2â¤show 18250 * @memberof Options 18251 * @type {boolean} 18252 * @default false 18253 * @example 18254 * axis: { 18255 * y2: { 18256 * show: true 18257 * } 18258 * } 18259 */ 18260 axis_y2_show: !1, 18261 /** 18262 * Set type of y2 axis.<br><br> 18263 * **Available Values:** 18264 * - indexed 18265 * - log 18266 * - timeseries 18267 * 18268 * **NOTE:**<br> 18269 * - **log** type: 18270 * - the bound data values must be exclusively-positive. 18271 * - y2 axis min value should be >= 0. 18272 * - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported. 18273 * 18274 * @name axisâ¤y2â¤type 18275 * @memberof Options 18276 * @type {string} 18277 * @default "indexed" 18278 * @see [Demo: log](https://naver.github.io/billboard.js/demo/#Axis.LogScales) 18279 * @example 18280 * axis: { 18281 * y2: { 18282 * type: "indexed" 18283 * } 18284 * } 18285 */ 18286 axis_y2_type: "indexed", 18287 /** 18288 * Set max value of y2 axis. 18289 * @name axisâ¤y2â¤max 18290 * @memberof Options 18291 * @type {number} 18292 * @default undefined 18293 * @example 18294 * axis: { 18295 * y2: { 18296 * max: 1000 18297 * } 18298 * } 18299 */ 18300 axis_y2_max: undefined, 18301 /** 18302 * Set min value of y2 axis. 18303 * @name axisâ¤y2â¤min 18304 * @memberof Options 18305 * @type {number} 18306 * @default undefined 18307 * @example 18308 * axis: { 18309 * y2: { 18310 * min: -1000 18311 * } 18312 * } 18313 */ 18314 axis_y2_min: undefined, 18315 /** 18316 * Change the direction of y2 axis.<br><br> 18317 * If true set, the direction will be `top -> bottom`. 18318 * @name axisâ¤y2â¤inverted 18319 * @memberof Options 18320 * @type {boolean} 18321 * @default false 18322 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis) 18323 * @example 18324 * axis: { 18325 * y2: { 18326 * inverted: true 18327 * } 18328 * } 18329 */ 18330 axis_y2_inverted: !1, 18331 /** 18332 * Set center value of y2 axis. 18333 * @name axisâ¤y2â¤center 18334 * @memberof Options 18335 * @type {number} 18336 * @default undefined 18337 * @example 18338 * axis: { 18339 * y2: { 18340 * center: 0 18341 * } 18342 * } 18343 */ 18344 axis_y2_center: undefined, 18345 /** 18346 * Show y2 axis inside of the chart. 18347 * @name axisâ¤y2â¤inner 18348 * @memberof Options 18349 * @type {boolean} 18350 * @default false 18351 * @example 18352 * axis: { 18353 * y2: { 18354 * inner: true 18355 * } 18356 * } 18357 */ 18358 axis_y2_inner: !1, 18359 /** 18360 * Set label on y2 axis.<br><br> 18361 * 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). 18362 * @name axisâ¤y2â¤label 18363 * @memberof Options 18364 * @type {string|object} 18365 * @default {} 18366 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value. 18367 * @example 18368 * axis: { 18369 * y2: { 18370 * label: "Your Y2 Axis" 18371 * } 18372 * } 18373 * 18374 * axis: { 18375 * y2: { 18376 * label: { 18377 * text: "Your Y2 Axis", 18378 * position: "outer-middle" 18379 * } 18380 * } 18381 * } 18382 */ 18383 axis_y2_label: {}, 18384 /** 18385 * Set formatter for y2 axis tick text.<br><br> 18386 * This option works in the same way as axis.y.format. 18387 * @name axisâ¤y2â¤tickâ¤format 18388 * @memberof Options 18389 * @type {Function} 18390 * @default undefined 18391 * @example 18392 * axis: { 18393 * y2: { 18394 * tick: { 18395 * format: d3.format("$,") 18396 * //or format: function(d) { return "$" + d; } 18397 * } 18398 * } 18399 * } 18400 */ 18401 axis_y2_tick_format: undefined, 18402 /** 18403 * Setting for culling ticks.
18404 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br> 18405 * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y2.tick.culling.lines=false`. 18406 * - `false`: all of ticks will be shown.<br><br> 18407 * The number of ticks to be shown can be chaned by `axis.y2.tick.culling.max`. 18408 * @name axisâ¤y2â¤tickâ¤culling 18409 * @memberof Options 18410 * @type {boolean} 18411 * @default false 18412 * @example 18413 * axis: { 18414 * y2: { 18415 * tick: { 18416 * culling: false 18417 * } 18418 * } 18419 * } 18420 */ 18421 axis_y2_tick_culling: !1, 18422 /** 18423 * The number of tick texts will be adjusted to less than this value. 18424 * @name axisâ¤y2â¤tickâ¤cullingâ¤max 18425 * @memberof Options 18426 * @type {number} 18427 * @default 5 18428 * @example 18429 * axis: { 18430 * y2: { 18431 * tick: { 18432 * culling: { 18433 * max: 5 18434 * } 18435 * } 18436 * } 18437 * } 18438 */ 18439 axis_y2_tick_culling_max: 5, 18440 /** 18441 * Control visibility of tick lines within culling option, along with tick text. 18442 * @name axisâ¤y2â¤tickâ¤cullingâ¤lines 18443 * @memberof Options 18444 * @type {boolean} 18445 * @default true 18446 * @example 18447 * axis: { 18448 * y2: { 18449 * tick: { 18450 * culling: { 18451 * lines: false, 18452 * } 18453 * } 18454 * } 18455 * } 18456 */ 18457 axis_y2_tick_culling_lines: !0, 18458 /** 18459 * Show or hide y2 axis outer tick. 18460 * @name axisâ¤y2â¤tickâ¤outer 18461 * @memberof Options 18462 * @type {boolean} 18463 * @default true 18464 * @example 18465 * axis: { 18466 * y2: { 18467 * tick: { 18468 * outer: false 18469 * } 18470 * } 18471 * } 18472 */ 18473 axis_y2_tick_outer: !0, 18474 /** 18475 * Set y2 axis tick values manually. 18476 * @name axisâ¤y2â¤tickâ¤values 18477 * @memberof Options 18478 * @type {Array|Function} 18479 * @default null 18480 * @example 18481 * axis: { 18482 * y2: { 18483 * tick: { 18484 * values: [100, 1000, 10000], 18485 * 18486 * // an Array value should be returned 18487 * values: function() { 18488 * return [ ... ]; 18489 * } 18490 * } 18491 * } 18492 * } 18493 */ 18494 axis_y2_tick_values: null, 18495 /** 18496 * Rotate y2 axis tick text. 18497 * - If you set negative value, it will rotate to opposite direction. 18498 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`. 18499 * @name axisâ¤y2â¤tickâ¤rotate 18500 * @memberof Options 18501 * @type {number} 18502 * @default 0 18503 * @example 18504 * axis: { 18505 * y2: { 18506 * tick: { 18507 * rotate: 60 18508 * } 18509 * } 18510 * } 18511 */ 18512 axis_y2_tick_rotate: 0, 18513 /** 18514 * Set the number of y2 axis ticks. 18515 * - **NOTE:** This works in the same way as axis.y.tick.count. 18516 * @name axisâ¤y2â¤tickâ¤count 18517 * @memberof Options 18518 * @type {number} 18519 * @default undefined 18520 * @example 18521 * axis: { 18522 * y2: { 18523 * tick: { 18524 * count: 5 18525 * } 18526 * } 18527 * } 18528 */ 18529 axis_y2_tick_count: undefined, 18530 /** 18531 * Show or hide y2 axis tick line. 18532 * @name axisâ¤y2â¤tickâ¤show 18533 * @memberof Options 18534 * @type {boolean} 18535 * @default true 18536 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 18537 * @example 18538 * axis: { 18539 * y2: { 18540 * tick: { 18541 * show: false 18542 * } 18543 * } 18544 * } 18545 */ 18546 axis_y2_tick_show: !0, 18547 /** 18548 * Set axis tick step(interval) size. 18549 * - **NOTE:** Will be ignored if `axis.y2.tick.count` or `axis.y2.tick.values` options are set. 18550 * @name axisâ¤y2â¤tickâ¤stepSize 18551 * @memberof Options 18552 * @type {number} 18553 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis) 18554 * @example 18555 * axis: { 18556 * y2: { 18557 * tick: { 18558 * // tick value will step as indicated interval value. 18559 * // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60] 18560 * stepSize: 15 18561 * } 18562 * } 18563 * } 18564 */ 18565 axis_y2_tick_stepSize: null, 18566 /** 18567 * Show or hide y2 axis tick text. 18568 * @name axisâ¤y2â¤tickâ¤textâ¤show 18569 * @memberof Options 18570 * @type {boolean} 18571 * @default true 18572 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText) 18573 * @example 18574 * axis: { 18575 * y2: { 18576 * tick: { 18577 * text: { 18578 * show: false 18579 * } 18580 * } 18581 * } 18582 * } 18583 */ 18584 axis_y2_tick_text_show: !0, 18585 /** 18586 * Set the y2 Axis tick text's position relatively its original position 18587 * @name axisâ¤y2â¤tickâ¤textâ¤position 18588 * @memberof Options 18589 * @type {object} 18590 * @default {x: 0, y:0} 18591 * @example 18592 * axis: { 18593 * y2: { 18594 * tick: { 18595 * text: { 18596 * position: { 18597 * x: 10, 18598 * y: 10 18599 * } 18600 * } 18601 * } 18602 * } 18603 * } 18604 */ 18605 axis_y2_tick_text_position: { 18606 x: 0, 18607 y: 0 18608 }, 18609 /** 18610 * Set padding for y2 axis.<br><br> 18611 * You can set padding for y2 axis to create more space on the edge of the axis. 18612 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels. 18613 * 18614 * - **NOTE:** 18615 * - Given values are translated relative to the y2 Axis domain value for padding 18616 * - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom. 18617 * @name axisâ¤y2â¤padding 18618 * @memberof Options 18619 * @type {object|number} 18620 * @default {} 18621 * @example 18622 * axis: { 18623 * y2: { 18624 * padding: { 18625 * top: 100,
18626 * bottom: 100 18627 * } 18628 * 18629 * // or set both values at once. 18630 * padding: 10 18631 * } 18632 */ 18633 axis_y2_padding: {}, 18634 /** 18635 * Set default range of y2 axis.<br><br> 18636 * This option set the default value for y2 axis when there is no data on init. 18637 * @name axisâ¤y2â¤default 18638 * @memberof Options 18639 * @type {Array} 18640 * @default undefined 18641 * @example 18642 * axis: { 18643 * y2: { 18644 * default: [0, 1000] 18645 * } 18646 * } 18647 */ 18648 axis_y2_default: undefined, 18649 /** 18650 * Set additional axes for y2 Axis. 18651 * - **NOTE:** Axis' scale is based on y2 Axis value if domain option isn't set. 18652 * 18653 * Each axis object should consist with following options: 18654 * 18655 * | Name | Type | Default | Description | 18656 * | --- | --- | --- | --- | 18657 * | domain | Array | - | Set the domain value | 18658 * | tick.outer | boolean | true | Show outer tick | 18659 * | tick.format | Function | - | Set formatter for tick text | 18660 * | tick.count | Number | - | Set the number of y axis ticks | 18661 * | tick.values | Array | - | Set tick values manually | 18662 * @name axisâ¤y2â¤axes 18663 * @memberof Options 18664 * @type {Array} 18665 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes) 18666 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain) 18667 * @example 18668 * y2: { 18669 * axes: [ 18670 * { 18671 * // if set, will not be correlated with the main y2 Axis domain value 18672 * domain: [0, 1000], 18673 * tick: { 18674 * outer: false, 18675 * format: function(x) { 18676 * return x + "%"; 18677 * }, 18678 * count: 2, 18679 * values: [10, 20, 30] 18680 * } 18681 * }, 18682 * ... 18683 * ] 18684 * } 18685 */ 18686 axis_y2_axes: [] 18687}); 18688;// CONCATENATED MODULE: ./src/config/Options/axis/axis.ts 18689 18690function axis_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 18691function axis_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {}; r % 2 ? axis_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : axis_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 18692/** 18693 * Copyright (c) 2017 ~ present NAVER Corp. 18694 * billboard.js project is licensed under the MIT license 18695 */ 18696 18697 18698 18699 18700/** 18701 * y Axis config options 18702 */ 18703/* harmony default export */ var axis_axis = (axis_objectSpread(axis_objectSpread(axis_objectSpread({ 18704 /** 18705 * Switch x and y axis position. 18706 * @name axisâ¤rotated 18707 * @memberof Options 18708 * @type {boolean} 18709 * @default false 18710 * @example 18711 * axis: { 18712 * rotated: true 18713 * } 18714 */ 18715 axis_rotated: !1 18716}, axis_x), y), y2)); 18717;// CONCATENATED MODULE: ./src/config/Options/common/grid.ts 18718/** 18719 * Copyright (c) 2017 ~ present NAVER Corp. 18720 * billboard.js project is licensed under the MIT license 18721 */ 18722/** 18723 * grid config options 18724 */ 18725 18726/* harmony default export */ var common_grid = ({ 18727 /** 18728 * Set related options 18729 * @name grid 18730 * @memberof Options 18731 * @type {object} 18732 * @property {boolean} [front=false] Set 'grid & focus lines' to be positioned over grid lines and chart elements. 18733 * @property {object} x Grid x object 18734 * @property {boolean} [x.show=false] Show grids along x axis. 18735 * @property {Array} [x.lines=[]] Show additional grid lines along x axis.<br> 18736 * 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. 18737 * 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. 18738 * @property {object} y Grid y object 18739 * @property {boolean} [y.show=false] Show grids along x axis. 18740 * @property {Array} [y.lines=[]] Show additional grid lines along y axis.<br> 18741 * This option accepts array including object that has value, text, position and class. 18742 * @property {number}
18742 [y.ticks=undefined] Number of y grids to be shown. 18743 * @property {object} focus Grid focus object 18744 * @property {boolean} [focus.edge=false] Show edged focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set. 18745 * @property {boolean} [focus.show=true] Show grid line when focus. 18746 * @property {boolean} [focus.y=false] Show y coordinate focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set. 18747 * @property {object} lines Grid lines object 18748 * @property {boolean} [lines.front=true] Set grid lines to be positioned over chart elements. 18749 * @default undefined 18750 * @see [Demo](https://naver.github.io/billboard.js/demo/#Grid.GridLines) 18751 * @see [Demo: X Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalXGridLines) 18752 * @see [Demo: Y Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalYGridLines) 18753 * @example 18754 * grid: { 18755 * x: { 18756 * show: true, 18757 * lines: [ 18758 * {value: 2, text: "Label on 2"}, 18759 * {value: 5, text: "Label on 5", class: "label-5"}, 18760 * {value: 6, text: "Label on 6", position: "start"} 18761 * ] 18762 * }, 18763 * y: { 18764 * show: true, 18765 * lines: [ 18766 * {value: 100, text: "Label on 100"}, 18767 * {value: 200, text: "Label on 200", class: "label-200"}, 18768 * {value: 300, text: "Label on 300", position: 'middle'} 18769 * ], 18770 * ticks: 5 18771 * }, 18772 * front: true, 18773 * focus: { 18774 * show: false, 18775 * 18776 * // Below options are available when 'tooltip.grouped=false' option is set 18777 * edge: true, 18778 * y: true 18779 * }, 18780 * lines: { 18781 * front: false 18782 * } 18783 * } 18784 */ 18785 grid_x_show: !1, 18786 grid_x_type: "tick", 18787 grid_x_lines: [], 18788 grid_y_show: !1, 18789 grid_y_lines: [], 18790 grid_y_ticks: undefined, 18791 grid_focus_edge: !1, 18792 grid_focus_show: !0, 18793 grid_focus_y: !1, 18794 grid_front: !1, 18795 grid_lines_front: !0 18796}); 18797;// CONCATENATED MODULE: ./src/config/resolver/axis.ts 18798/** 18799 * Copyright (c) 2017 ~ present NAVER Corp. 18800 * billboard.js project is licensed under the MIT license 18801 */ 18802/** 18803 * Modules exports for Axis based chart 18804 */ 18805// Chart 18806 18807 18808 18809 18810 18811 18812 18813 18814// ChartInternal 18815 18816 18817 18818 18819 18820 18821 18822 18823// Axis based options 18824 18825 18826 18827const api = [api_axis, api_category, flow, api_grid, group, api_regions, x]; 18828const internal = [Axis, clip, eventrect, interactions_flow, internals_grid, region, size_axis]; 18829const options = [data_axis, axis_axis, common_grid]; 18830// EXTERNAL MODULE: external {"commonjs":"d3-interpolate","commonjs2":"d3-interpolate","amd":"d3-interpolate","root":"d3"} 18831var external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_ = __webpack_require__(12); 18832;// CONCATENATED MODULE: ./src/ChartInternal/shape/arc.ts 18833 18834 18835function arc_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 18836function arc_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {}; r % 2 ? arc_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : arc_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 18837/** 18838 * Copyright (c) 2017 ~ present NAVER Corp. 18839 * billboard.js project is licensed under the MIT license 18840 */ 18841 18842 18843 18844 18845 18846 18847/** 18848 * Get radius functions 18849 * @param {number} expandRate Expand rate number. 18850 * - If 0, means for "normal" radius. 18851 * - If > 0, means for "expanded" radius. 18852 * @returns {object} radius functions 18853 * @private 18854 */ 18855function getRadiusFn(expandRate) { 18856 if (expandRate === void 0) { 18857 expandRate = 0; 18858 } 18859 const $$ = this, 18860 config = $$.config, 18861 state = $$.state, 18862 hasMultiArcGauge = $$.hasMultiArcGauge(), 18863 singleArcWidth = state.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length, 18864 expandWidth = expandRate ? Math.min(state.radiusExpanded * expandRate - state.radius, singleArcWidth * .8 - (1 - expandRate) * 100) : 0; 18865 return { 18866 /** 18867 * Getter of arc innerRadius value 18868 * @param {IArcData} d Data object 18869 * @returns {number} innerRadius value 18870 * @private 18871 */ 18872 inner: function inner(d) { 18873 const _$$$getRadius = $$.getRadius(d), 18874 innerRadius = _$$$getRadius.innerRadius; 18875 return hasMultiArcGauge ? state.radius - singleArcWidth * (d.index + 1) : isNumber(innerRadius) ? innerRadius : 0; 18876 }, 18877 /** 18878 * Getter of arc outerRadius value 18879 * @param {IArcData} d Data object 18880 * @returns {number} outerRadius value 18881 * @private 18882 */ 18883 outer: function outer(d) { 18884 const _$$$getRadius2 = $$.getRadius(d), 18885 outerRadius = _$$$getRadius2.outerRadius; 18886 let radius; 18887 if (hasMultiArcGauge) { 18888 radius = state.radius - singleArcWidth * d.index + expandWidth; 18889 } else if ($$.hasType("polar") && !expandRate) { 18890 radius = $$.getPolarOuterRadius(d, outerRadius); 18891 } else { 18892 radius = outerRadius; 18893 if (expandRate) { 18894 let radiusExpanded = state.radiusExpanded; 18895 if (state.radius !== outerRadius) { 18896 radiusExpanded -= Math.abs(state.radius - outerRadius); 18897 }
18898 radius = radiusExpanded * expandRate; 18899 } 18900 } 18901 return radius; 18902 }, 18903 /** 18904 * Getter of arc cornerRadius value 18905 * @param {IArcData} d Data object 18906 * @param {number} outerRadius outer radius value 18907 * @returns {number} cornerRadius value 18908 * @private 18909 */ 18910 corner: function (d, outerRadius) { 18911 const _config$arc_cornerRad = config.arc_cornerRadius_ratio, 18912 ratio = _config$arc_cornerRad === void 0 ? 0 : _config$arc_cornerRad, 18913 _config$arc_cornerRad2 = config.arc_cornerRadius, 18914 cornerRadius = _config$arc_cornerRad2 === void 0 ? 0 : _config$arc_cornerRad2, 18915 id = d.data.id, 18916 value = d.value; 18917 let corner = 0; 18918 if (ratio) { 18919 corner = ratio * outerRadius; 18920 } else { 18921 corner = isNumber(cornerRadius) ? cornerRadius : cornerRadius.call($$.api, id, value, outerRadius); 18922 } 18923 return corner; 18924 } 18925 }; 18926} 18927 18928/** 18929 * Get attrTween function to get interpolated value on transition 18930 * @param {Function} fn Arc function to execute 18931 * @returns {Function} attrTween function 18932 * @private 18933 */ 18934function getAttrTweenFn(fn) { 18935 return function (d) { 18936 var _this2 = this; 18937 const getAngleKeyValue = function (_ref) { 18938 let _ref$startAngle = _ref.startAngle, 18939 startAngle = _ref$startAngle === void 0 ? 0 : _ref$startAngle, 18940 _ref$endAngle = _ref.endAngle, 18941 endAngle = _ref$endAngle === void 0 ? 0 : _ref$endAngle, 18942 _ref$padAngle = _ref.padAngle, 18943 padAngle = _ref$padAngle === void 0 ? 0 : _ref$padAngle; 18944 _newArrowCheck(this, _this2); 18945 return { 18946 startAngle: startAngle, 18947 endAngle: endAngle, 18948 padAngle: padAngle 18949 }; 18950 }.bind(this), 18951 interpolate = (0,external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_.interpolate)(getAngleKeyValue(this._current), getAngleKeyValue(d)); // d3.interpolate interpolates id value, if id is given as color string(ex. gold, silver, etc) 18952 // to avoid unexpected behavior, interpolate only angle values 18953 // https://github.com/naver/billboard.js/issues/3321 18954 this._current = d; 18955 return function (t) { 18956 const interpolated = interpolate(t), 18957 data = d.data, 18958 index = d.index, 18959 value = d.value; 18960 return fn(arc_objectSpread(arc_objectSpread({}, interpolated), {}, { 18961 data: data, 18962 index: index, 18963 value: value 18964 })); 18965 }; 18966 }; 18967} 18968/* harmony default export */ var arc = ({ 18969 initPie: function initPie() { 18970 var _this3 = this; 18971 const $$ = this, 18972 config = $$.config, 18973 dataType = config.data_type, 18974 padding = config[dataType + "_padding"], 18975 startingAngle = config[dataType + "_startingAngle"] || 0, 18976 padAngle = (padding ? padding * .01 : config[dataType + "_padAngle"]) || 0; 18977 $$.pie = (0,external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.pie)().startAngle(startingAngle).endAngle(startingAngle + 2 * Math.PI).padAngle(padAngle).value(function (d) { 18978 var _this4 = this; 18979 _newArrowCheck(this, _this3); 18980 return d.values.reduce(function (a, b) { 18981 _newArrowCheck(this, _this4); 18982 return a + b.value; 18983 }.bind(this), 0); 18984 }.bind(this)).sort($$.getSortCompareFn.bind($$)(!0)); 18985 }, 18986 updateRadius: function updateRadius() { 18987 const $$ = this, 18988 config = $$.config, 18989 state = $$.state, 18990 dataType = config.data_type, 18991 padding = config[dataType + "_padding"], 18992 w = config.gauge_width || config.donut_width, 18993 gaugeArcWidth = $$.filterTargetsToShow($$.data.targets).length * config.gauge_arcs_minWidth; 18994 // determine radius 18995 state.radiusExpanded = Math.min(state.arcWidth, state.arcHeight) / 2 * ($$.hasMultiArcGauge() && config.gauge_label_show ? .85 : 1); 18996 state.radius = state.radiusExpanded * .95; 18997 state.innerRadiusRatio = w ? (state.radius - w) / state.radius : .6; 18998 state.gaugeArcWidth = w || (gaugeArcWidth <= state.radius - state.innerRadius ? state.radius - state.innerRadius : gaugeArcWidth <= state.radius ? gaugeArcWidth : state.radius); 18999 const innerRadius = config.pie_innerRadius || (padding ? padding * (state.innerRadiusRatio + .1) : 0); 19000 19001 // NOTE: inner/outerRadius can be an object by user setting, only for 'pie' type 19002 state.outerRadius = config.pie_outerRadius; 19003 state.innerRadius = $$.hasType("donut") || $$.hasType("gauge") ? state.radius * state.innerRadiusRatio : innerRadius; 19004 }, 19005 /** 19006 * Get pie's inner & outer radius value 19007 * @param {object|undefined} d Data object 19008 * @returns {object} 19009 * @private 19010 */ 19011 getRadius: function getRadius(d) { 19012 const $$ = this, 19013 data = d == null ? void 0 : d.data; 19014 let _$$$state = $$.state, 19015 innerRadius = _$$$state.innerRadius, 19016 outerRadius = _$$$state.outerRadius; 19017 if (!isNumber(innerRadius) && data) { 19018 innerRadius = innerRadius[data.id] || 0; 19019 } 19020 if (isObject(outerRadius) && data && data.id in outerRadius) { 19021 outerRadius = outerRadius[data.id]; 19022 } else if (!isNumber(outerRadius)) { 19023 outerRadius = $$.state.radius; 19024 } 19025 return { 19026 innerRadius: innerRadius, 19027 outerRadius: outerRadius 19028 }; 19029 }, 19030 updateArc: function updateArc() { 19031 const $$ = this; 19032 $$.updateRadius(); 19033 $$.svgArc = $$.getSvgArc(); 19034 $$.svgArcExpanded = $$.getSvgArcExpanded(); 19035 }, 19036 getArcLength: function getArcLength() { 19037 const $$ = this, 19038 config = $$.config, 19039 arcLengthInPercent = config.gauge_arcLength * 3.6; 19040 let len = 2 * (arcLengthInPercent / 360); 19041 if (arcLengthInPercent < -360) { 19042 len = -2; 19043 } else if (arcLengthInPercent > 360) { 19044 len = 2; 19045 } 19046 return len * Math.PI; 19047 }, 19048 getGaugeStartAngle: function getGaugeStartAngle() { 19049 const $$ = this, 19050 config = $$.config, 19051 isFullCircle = config.gauge_fullCircle, 19052 defaultStartAngle = -1 * Math.PI / 2, 19053 defaultEndAngle = Math.PI / 2; 19054 let startAngle = config.gauge_startingAngle; 19055 if (!isFullCircle && startAngle <= defaultStartAngle) { 19056 startAngle = defaultStartAngle; 19057 } else if (!isFullCircle && startAngle >= defaultEndAngle) { 19058 startAngle = defaultEndAngle; 19059 } else if (startAngle > Math.PI || startAngle < -1 * Math.PI) { 19060 startAngle = Math.PI; 19061 } 19062 return startAngle; 19063 }, 19064 updateAngle: function updateAngle(dValue) { 19065 var _this5 = this; 19066 const $$ = this, 19067 config = $$.config, 19068 state = $$.state; 19069 let pie = $$.pie, 19070 d = dValue, 19071 found = !1; 19072 if (!config) { 19073 return null; 19074 } 19075 const gStart = $$.getGaugeStartAngle(), 19076 radius = config.gauge_fullCircle ? $$.getArcLength() : gStart * -2; 19077 if (d.data && $$.isGaugeType(d.data) && !$$.hasMultiArcGauge()) { 19078 const min = config.gauge_min, 19079 max = config.gauge_max, 19080 totalSum = $$.getTotalDataSum(state.rendered); // to prevent excluding total data sum during the init(when data.hide option is used), use $$.rendered state value 19081 // https://github.com/naver/billboard.js/issues/2123 19082 pie = pie.startAngle(gStart).endAngle(radius * ((totalSum - min) / (max - min)) + gStart); 19083 }
19084 pie($$.filterTargetsToShow()).forEach(function (t, i) { 19085 var _d$data; 19086 _newArrowCheck(this, _this5); 19087 if (!found && t.data.id === ((_d$data = d.data) == null ? void 0 : _d$data.id)) { 19088 found = !0; 19089 d = t; 19090 d.index = i; 19091 } 19092 }.bind(this)); 19093 if (isNaN(d.startAngle)) { 19094 d.startAngle = 0; 19095 } 19096 if (isNaN(d.endAngle)) { 19097 d.endAngle = d.startAngle; 19098 } 19099 if (d.data && $$.hasMultiArcGauge()) { 19100 const gMin = config.gauge_min, 19101 gMax = config.gauge_max, 19102 gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : gMax - gMin; 19103 d.startAngle = gStart; 19104 d.endAngle = gStart + radius / (gMax - gMin) * gValue; 19105 } 19106 return found ? d : null; 19107 }, 19108 getSvgArc: function getSvgArc() { 19109 const $$ = this, 19110 _getRadiusFn$call = getRadiusFn.call($$), 19111 inner = _getRadiusFn$call.inner, 19112 outer = _getRadiusFn$call.outer, 19113 corner = _getRadiusFn$call.corner, 19114 arc = (0,external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.arc)().innerRadius(inner).outerRadius(outer), 19115 newArc = function (d, withoutUpdate) { 19116 let path = "M 0 0"; 19117 if (d.value || d.data) { 19118 var _$$$updateAngle; 19119 const data = withoutUpdate ? d : (_$$$updateAngle = $$.updateAngle(d)) != null ? _$$$updateAngle : null; 19120 if (data) { 19121 path = arc.cornerRadius(corner(data, outer(data)))(data); 19122 } 19123 } 19124 return path; 19125 }; 19126 // TODO: extends all function 19127 newArc.centroid = arc.centroid; 19128 return newArc; 19129 }, 19130 /** 19131 * Get expanded arc path function 19132 * @param {number} rate Expand rate 19133 * @returns {Function} Expanded arc path getter function 19134 * @private 19135 */ 19136 getSvgArcExpanded: function getSvgArcExpanded(rate) { 19137 var _this6 = this; 19138 if (rate === void 0) { 19139 rate = 1; 19140 } 19141 const $$ = this, 19142 _getRadiusFn$call2 = getRadiusFn.call($$, rate), 19143 inner = _getRadiusFn$call2.inner, 19144 outer = _getRadiusFn$call2.outer, 19145 corner = _getRadiusFn$call2.corner, 19146 arc = (0,external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.arc)().innerRadius(inner).outerRadius(outer); 19147 return function (d) { 19148 _newArrowCheck(this, _this6); 19149 const updated = $$.updateAngle(d), 19150 outerR = outer(updated); 19151 let cornerR = 0; 19152 if (updated) { 19153 cornerR = corner(updated, outerR); 19154 } 19155 return updated ? arc.cornerRadius(cornerR)(updated) : "M 0 0"; 19156 }.bind(this); 19157 }, 19158 getArc: function getArc(d, withoutUpdate, force) { 19159 return force || this.isArcType(d.data) ? this.svgArc(d, withoutUpdate) : "M 0 0"; 19160 }, 19161 /** 19162 * Set transform attributes to arc label text 19163 * @param {object} d Data object 19164 * @returns {string} Translate attribute string 19165 * @private 19166 */ 19167 transformForArcLabel: function transformForArcLabel(d) { 19168 var _this7 = this; 19169 const $$ = this, 19170 config = $$.config, 19171 radiusExpanded = $$.state.radiusExpanded, 19172 updated = $$.updateAngle(d); 19173 let translate = ""; 19174 if (updated) { 19175 if ($$.hasMultiArcGauge()) { 19176 const y1 = Math.sin(updated.endAngle - Math.PI / 2), 19177 x = Math.cos(updated.endAngle - Math.PI / 2) * (radiusExpanded + 25), 19178 y = y1 * (radiusExpanded + 15 - Math.abs(y1 * 10)) + 3; 19179 translate = "translate(" + x + "," + y + ")"; 19180 } else if (!$$.hasType("gauge") || $$.data.targets.length > 1) { 19181 var _filter$map; 19182 let _$$$getRadius3 = $$.getRadius(d), 19183 outerRadius = _$$$getRadius3.outerRadius; 19184 if ($$.hasType("polar")) { 19185 outerRadius = $$.getPolarOuterRadius(d, outerRadius); 19186 } 19187 const c = this.svgArc.centroid(updated), 19188 _c$map = c.map(function (v) { 19189 _newArrowCheck(this, _this7); 19190 return isNaN(v) ? 0 : v; 19191 }.bind(this)), 19192 x = _c$map[0], 19193 y = _c$map[1], 19194 h = Math.sqrt(x * x + y * y); 19195 let ratio = (_filter$map = ["donut", "pie", "polar"].filter($$.hasType.bind($$)).map(function (v) { 19196 _newArrowCheck(this, _this7); 19197 return config[v + "_label_ratio"]; 19198 }.bind(this))) == null ? void 0 : _filter$map[0]; 19199 if (ratio) {
19200 ratio = isFunction(ratio) ? ratio.bind($$.api)(d, outerRadius, h) : ratio; 19201 } else { 19202 ratio = outerRadius && (h ? (36 / outerRadius > .375 ? 1.175 - 36 / outerRadius : .8) * outerRadius / h : 0); 19203 } 19204 translate = "translate(" + x * ratio + "," + y * ratio + ")"; 19205 } 19206 } 19207 return translate; 19208 }, 19209 convertToArcData: function convertToArcData(d) { 19210 return this.addName({ 19211 id: "data" in d ? d.data.id : d.id, 19212 value: d.value, 19213 ratio: this.getRatio("arc", d), 19214 index: d.index 19215 }); 19216 }, 19217 textForArcLabel: function textForArcLabel(selection) { 19218 const $$ = this, 19219 hasGauge = $$.hasType("gauge"); 19220 if ($$.shouldShowArcLabel()) { 19221 selection.style("fill", $$.updateTextColor.bind($$)).attr("filter", $$.updateTextBackgroundColor.bind($$)).each(function (d) { 19222 var _filter; 19223 const node = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 19224 updated = $$.updateAngle(d), 19225 ratio = $$.getRatio("arc", updated), 19226 isUnderThreshold = $$.meetsLabelThreshold(ratio, (_filter = ["donut", "gauge", "pie", "polar"].filter($$.hasType.bind($$))) == null ? void 0 : _filter[0]); 19227 if (isUnderThreshold) { 19228 const value = (updated || d).value, 19229 text = ($$.getArcLabelFormat() || $$.defaultArcValueFormat)(value, ratio, d.data.id).toString(); 19230 setTextValue(node, text, [-1, 1], hasGauge); 19231 } else { 19232 node.text(""); 19233 } 19234 }); 19235 } 19236 }, 19237 expandArc: function expandArc(targetIds) { 19238 var _this8 = this; 19239 const $$ = this, 19240 transiting = $$.state.transiting, 19241 $el = $$.$el; 19242 // MEMO: avoid to cancel transition 19243 if (transiting) { 19244 const interval = setInterval(function () { 19245 _newArrowCheck(this, _this8); 19246 if (!transiting) { 19247 clearInterval(interval); 19248 $el.legend.selectAll("." + $FOCUS.legendItemFocused).size() > 0 && $$.expandArc(targetIds); 19249 } 19250 }.bind(this), 10); 19251 return; 19252 } 19253 const newTargetIds = $$.mapToTargetIds(targetIds); 19254 $el.svg.selectAll($$.selectorTargets(newTargetIds, "." + $ARC.chartArc)).each(function (d) { 19255 if (!$$.shouldExpand(d.data.id)) { 19256 return; 19257 } 19258 const expandDuration = $$.getExpandConfig(d.data.id, "duration"), 19259 svgArcExpandedSub = $$.getSvgArcExpanded($$.getExpandConfig(d.data.id, "rate")); 19260 (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).selectAll("path").transition().duration(expandDuration).attrTween("d", getAttrTweenFn($$.svgArcExpanded.bind($$))).transition().duration(expandDuration * 2).attrTween("d", getAttrTweenFn(svgArcExpandedSub.bind($$))); 19261 }); 19262 }, 19263 unexpandArc: function unexpandArc(targetIds) { 19264 var _this9 = this; 19265 const $$ = this, 19266 transiting = $$.state.transiting, 19267 svg = $$.$el.svg; 19268 if (transiting) { 19269 return; 19270 } 19271 const newTargetIds = $$.mapToTargetIds(targetIds); 19272 svg.selectAll($$.selectorTargets(newTargetIds, "." + $ARC.chartArc)).selectAll("path").transition().duration(function (d) { 19273 _newArrowCheck(this, _this9); 19274 return $$.getExpandConfig(d.data.id, "duration"); 19275 }.bind(this)).attrTween("d", getAttrTweenFn($$.svgArc.bind($$))); 19276 svg.selectAll("" + $ARC.arc).style("opacity", null); 19277 }, 19278 /** 19279 * Get expand config value 19280 * @param {string} id data ID 19281 * @param {string} key config key: 'duration | rate' 19282 * @returns {number} 19283 * @private 19284 */ 19285 getExpandConfig: function getExpandConfig(id, key) { 19286 const $$ = this, 19287 config = $$.config; 19288 let type; 19289 if ($$.isDonutType(id)) { 19290 type = "donut"; 19291 } else if ($$.isGaugeType(id)) { 19292 type = "gauge"; 19293 } else if ($$.isPieType(id)) { 19294 type = "pie"; 19295 } 19296 return type ? config[type + "_expand_" + key] : { 19297 duration: 50, 19298 rate: .98 19299 }[key]; 19300 }, 19301 shouldExpand: function shouldExpand(id) { 19302 const $$ = this, 19303 config = $$.config; 19304 return $$.isDonutType(id) && config.donut_expand || $$.isGaugeType(id) && config.gauge_expand || $$.isPieType(id) && config.pie_expand; 19305 }, 19306 shouldShowArcLabel: function shouldShowArcLabel() { 19307 var _this10 = this; 19308 const $$ = this, 19309 config = $$.config; 19310 return ["donut", "gauge", "pie", "polar"].some(function (v) { 19311 _newArrowCheck(this, _this10); 19312 return $$.hasType(v) && config[v + "_label_show"]; 19313 }.bind(this)); 19314 }, 19315 getArcLabelFormat: function getArcLabelFormat() { 19316 var _this11 = this; 19317 const $$ = this, 19318 config = $$.config; 19319 let format = function (v) { 19320 _newArrowCheck(this, _this11); 19321 return v; 19322 }.bind(this); 19323 ["donut", "gauge", "pie", "polar"].filter($$.hasType.bind($$)).forEac
19323h(function (v) { 19324 _newArrowCheck(this, _this11); 19325 format = config[v + "_label_format"]; 19326 }.bind(this)); 19327 return isFunction(format) ? format.bind($$.api) : format; 19328 }, 19329 updateTargetsForArc: function updateTargetsForArc(targets) { 19330 var _this12 = this; 19331 const $$ = this, 19332 $el = $$.$el, 19333 hasGauge = $$.hasType("gauge"), 19334 classChartArc = $$.getChartClass("Arc"), 19335 classArcs = $$.getClass("arcs", !0), 19336 classFocus = $$.classFocus.bind($$), 19337 chartArcs = $el.main.select("." + $ARC.chartArcs), 19338 mainPieUpdate = chartArcs.selectAll("." + $ARC.chartArc).data($$.pie(targets)).attr("class", function (d) { 19339 _newArrowCheck(this, _this12); 19340 return classChartArc(d) + classFocus(d.data); 19341 }.bind(this)), 19342 mainPieEnter = mainPieUpdate.enter().append("g").attr("class", classChartArc).call(this.setCssRule(!1, "." + $ARC.chartArcs + " text", ["pointer-events:none", "text-anchor:middle"])); 19343 mainPieEnter.append("g").attr("class", classArcs).merge(mainPieUpdate); 19344 mainPieEnter.append("text").attr("dy", hasGauge && !$$.hasMultiTargets() ? "-.1em" : ".35em").style("opacity", "0").style("text-anchor", $$.getStylePropValue("middle")).style("pointer-events", $$.getStylePropValue("none")); 19345 $el.text = chartArcs.selectAll("." + $COMMON.target + " text"); 19346 // MEMO: can not keep same color..., but not bad to update color in redraw 19347 // mainPieUpdate.exit().remove(); 19348 }, 19349 initArc: function initArc() { 19350 const $$ = this, 19351 $el = $$.$el; 19352 $el.arcs = $el.main.select("." + $COMMON.chart).append("g").attr("class", $ARC.chartArcs).attr("transform", $$.getTranslate("arc")); 19353 $$.setArcTitle(); 19354 }, 19355 /** 19356 * Set arc title text 19357 * @param {string} str Title text 19358 * @private 19359 */ 19360 setArcTitle: function setArcTitle(str) { 19361 const $$ = this, 19362 title = str || $$.getArcTitle(), 19363 hasGauge = $$.hasType("gauge"); 19364 if (title) { 19365 const className = hasGauge ? $GAUGE.chartArcsGaugeTitle : $ARC.chartArcsTitle; 19366 let text = $$.$el.arcs.select("." + className); 19367 if (text.empty()) { 19368 text = $$.$el.arcs.append("text").attr("class", className).style("text-anchor", "middle"); 19369 } 19370 hasGauge && text.attr("dy", "-0.3em"); 19371 setTextValue(text, title, hasGauge ? undefined : [-.6, 1.35], !0); 19372 } 19373 }, 19374 /** 19375 * Return arc title text 19376 * @returns {string} Arc title text 19377 * @private 19378 */ 19379 getArcTitle: function getArcTitle() { 19380 const $$ = this, 19381 type = $$.hasType("donut") && "donut" || $$.hasType("gauge") && "gauge"; 19382 return type ? $$.config[type + "_title"] : ""; 19383 }, 19384 /** 19385 * Get arc title text with needle value 19386 * @returns {string|boolean} When title contains needle template string will return processed string, otherwise false 19387 * @private 19388 */ 19389 getArcTitleWithNeedleValue: function getArcTitleWithNeedleValue() { 19390 const $$ = this, 19391 config = $$.config, 19392 state = $$.state, 19393 title = $$.getArcTitle(); 19394 if (title && $$.config.arc_needle_show && /{=[A-Z_]+}/.test(title)) { 19395 let value = state.current.needle; 19396 if (!isNumber(value)) { 19397 value = config.arc_needle_value; 19398 } 19399 return tplProcess(title, { 19400 NEEDLE_VALUE: isNumber(value) ? value : 0 19401 }); 19402 } 19403 return !1; 19404 }, 19405 redrawArc: function redrawArc(duration, durationForExit, withTransform) { 19406 var _this13 = this; 19407 const $$ = this, 19408 config = $$.config, 19409 state = $$.state, 19410 main = $$.$el.main, 19411 hasInteraction = config.interaction_enabled, 19412 isSelectable = hasInteraction && config.data_selection_isselectable; 19413 let mainArc = main.selectAll("." + $ARC.arcs).selectAll("." + $ARC.arc).data($$.arcData.bind($$)); 19414 mainArc.exit().transition().duration(durationForExit).style("opacity", "0").remove(); 19415 mainArc = mainArc.enter().append("path").attr("class", $$.getClass("arc", !0)).style("fill", function (d) { 19416 _newArrowCheck(this, _this13); 19417 return $$.color(d.data); 19418 }.bind(this)).style("cursor", function (d) { 19419 _newArrowCheck(this, _this13); 19420 return isSelectable != null && isSelectable.bind != null && isSelectable.bind($$.api)(d) ? "pointer" : null; 19421 }.bind(this)).style("opacity", "0").each(function (d) { 19422 if ($$.isGaugeType(d.data)) { 19423 d.startAngle = config.gauge_startingAngle; 19424 d.endAngle = config.gauge_startingAngle; 19425 } 19426 this._current = d; 19427 }).merge(mainArc); 19428 if ($$.hasType("gauge")) { 19429 $$.updateGaugeMax(); 19430 $$.hasMultiArcGauge() && $$.redrawMultiArcGauge(); 19431 } 19432 mainArc.attr("transform", function (d) { 19433 _newArrowCheck(this, _this13); 19434 return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; 19435 }.bind(this)).style("opacity", function (d) { 19436 return d === this._current ? "0" : null; 19437 }).each(function () { 19438 _newArrowCheck(this, _this13); 19439 state.transiting = !0; 19440 }.bind(this)).transition().duration(duration).attrTween("d", function (d) { 19441 var _this14 = this; 19442 const updated = $$.updateAngle(d); 19443 if (!updated) { 19444 return function () { 19445 _newArrowCheck(this, _this14); 19446 return "M 0 0"; 19447 }.bind(this); 19448 } 19449 if (isNaN(this._current.startAngle)) { 19450 this._current.startAngle = 0; 19451 } 19452 if (isNaN(this._current.endAngle)) { 19453 this._current.endAngle = this._current.startAngle; 19454 } 19455 const interpolate = (0,external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_.interpolate)(this._current, updated); 19456 this._current = interpolate(0); 19457 return function (t) { 19458 const interpolated = interpolate(t); 19459 interpolated.data = d.data; // data.id will be updated by interporator 19460 19461 return $$.getArc(interpolated, !0); 19462 }; 19463 }).attr("transform", withTransform ? "scale(1)" : "").style("fill", function (d) { 19464 _newArrowCheck(this, _this13); 19465 let color; 19466 if ($$.levelColor) { 19467 color = $$.levelColor(d.data.values[0].value); 19468 19469 // update data's color 19470 config.data_colors[d.data.id] = color; 19471 } else { 19472 color = $$.color(d.data); 19473 } 19474 return color; 19475 }.bind(this)) 19476 // Where gauge reading color would receive customization. 19477 .style("opacity", null).call(endall, function () { 19478 if ($$.levelColor) { 19479 const path = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 19480 d = path.datum(this._current); 19481 $$.updateLegendItemColor(d.data.id, path.style("fill")); 19482 } 19483 state.transiting = !1; 19484 callFn(config.onrendered, $$.api); 19485 }); 19486 19487 // bind arc events 19488 hasInteraction && $$.bindArcEvent(mainArc); 19489 $$.hasType("polar") && $$.redrawPolar();
19490 $$.hasType("gauge") && $$.redrawBackgroundArcs(); 19491 config.arc_needle_show && $$.redrawNeedle(); 19492 $$.redrawArcText(duration); 19493 }, 19494 /** 19495 * Update needle element 19496 * @private 19497 */ 19498 redrawNeedle: function redrawNeedle() { 19499 var _this15 = this; 19500 const $$ = this, 19501 $el = $$.$el, 19502 config = $$.config, 19503 _$$$state2 = $$.state, 19504 hiddenTargetIds = _$$$state2.hiddenTargetIds, 19505 radius = _$$$state2.radius, 19506 length = (radius - 1) / 100 * config.arc_needle_length, 19507 hasDataToShow = hiddenTargetIds.length !== $$.data.targets.length; 19508 let needle = $$.$el.arcs.select("." + $ARC.needle); 19509 19510 // needle options 19511 const pathFn = config.arc_needle_path, 19512 baseWidth = config.arc_needle_bottom_width / 2, 19513 topWidth = config.arc_needle_top_width / 2, 19514 topRx = config.arc_needle_top_rx, 19515 topRy = config.arc_needle_top_ry, 19516 bottomLen = config.arc_needle_bottom_len, 19517 bottomRx = config.arc_needle_bottom_rx, 19518 bottomRy = config.arc_needle_bottom_ry, 19519 needleAngle = $$.getNeedleAngle(), 19520 updateNeedleValue = function () { 19521 _newArrowCheck(this, _this15); 19522 const title = $$.getArcTitleWithNeedleValue(); 19523 title && $$.setArcTitle(title); 19524 }.bind(this); 19525 updateNeedleValue(); 19526 if (needle.empty()) { 19527 needle = $el.arcs.append("path").classed($ARC.needle, !0); 19528 $el.needle = needle; 19529 19530 /** 19531 * Function to be exposed as public to facilitate updating needle 19532 * @param {number} v Value to be updated 19533 * @param {boolean} updateConfig Weather update config's value 19534 * @private 19535 */ 19536 $el.needle.updateHelper = function (v, updateConfig) { 19537 var _this16 = this; 19538 if (updateConfig === void 0) { 19539 updateConfig = !1; 19540 } 19541 _newArrowCheck(this, _this15); 19542 if ($el.needle.style("display") !== "none") { 19543 $$.$T($el.needle).style("transform", "rotate(" + $$.getNeedleAngle(v) + "deg)").call(endall, function () { 19544 _newArrowCheck(this, _this16); 19545 updateConfig && (config.arc_needle_value = v); 19546 updateNeedleValue(); 19547 }.bind(this)); 19548 } 19549 }.bind(this); 19550 } 19551 if (hasDataToShow) { 19552 const path = isFunction(pathFn) ? pathFn.call($$, length) : "M-" + baseWidth + " " + bottomLen + " A" + bottomRx + " " + bottomRy + " 0 0 0 " + baseWidth + " " + bottomLen + " L" + topWidth + " -" + length + " A" + topRx + " " + topRy + " 0 0 0 -" + topWidth + " -" + length + " L-" + baseWidth + " " + bottomLen + " Z"; 19553 $$.$T(needle).attr("d", path).style("fill", config.arc_needle_color).style("display", null).style("transform", "rotate(" + needleAngle + "deg)"); 19554 } else { 19555 needle.style("display", "none"); 19556 } 19557 }, 19558 /** 19559 * Get needle angle value relative given value 19560 * @param {number} v Value to be calculated angle 19561 * @returns {number} angle value 19562 * @private 19563 */ 19564 getNeedleAngle: function getNeedleAngle(v) { 19565 const $$ = this, 19566 config = $$.config, 19567 state = $$.state, 19568 arcLength = $$.getArcLength(), 19569 hasGauge = $$.hasType("gauge"), 19570 total = $$.getTotalDataSum(!0); 19571 let value = isDefined(v) ? v : config.arc_needle_value, 19572 startingAngle = config[config.data_type + "_startingAngle"] || 0, 19573 radian = 0; 19574 if (!isNumber(value)) { 19575 value = hasGauge && $$.data.targets.length === 1 ? total : 0; 19576 } 19577 state.current.needle = value; 19578 if (hasGauge) { 19579 startingAngle = $$.getGaugeStartAngle(); 19580 const radius = config.gauge_fullCircle ? arcLength : startingAngle * -2, 19581 min = config.gauge_min, 19582 max = config.gauge_max; 19583 radian = radius * ((value - min) / (max - min)); 19584 } else { 19585 radian = arcLength * (value / total); 19586 } 19587 return (startingAngle + radian) * (180 / Math.PI); 19588 }, 19589 redrawBackgroundArcs: function redrawBackgroundArcs() { 19590 var _this17 = this; 19591 const $$ = this, 19592 config = $$.config, 19593 state = $$.state, 19594 hasMultiArcGauge = $$.hasMultiArcGauge(), 19595 isFullCircle = config.gauge_fullCircle, 19596 showEmptyTextLabel = $$.filterTargetsToShow($$.data.targets).length === 0 && !!config.data_empty_label_text, 19597 startAngle = $$.getGaugeStartAngle(), 19598 endAngle = isFullCircle ? startAngle + $$.getArcLength() : startAngle * -1; 19599 let backgroundArc = $$.$el.arcs.select((hasMultiArcGauge ? "g" : "") + "." + $ARC.chartArcsBackgroun
19599d); 19600 if (hasMultiArcGauge) { 19601 let index = 0; 19602 backgroundArc = backgroundArc.selectAll("path." + $ARC.chartArcsBackground).data($$.data.targets); 19603 backgroundArc.enter().append("path").attr("class", function (d, i) { 19604 _newArrowCheck(this, _this17); 19605 return $ARC.chartArcsBackground + " " + $ARC.chartArcsBackground + "-" + i; 19606 }.bind(this)).merge(backgroundArc).style("fill", config.gauge_background || null).attr("d", function (_ref3) { 19607 let id = _ref3.id; 19608 _newArrowCheck(this, _this17); 19609 if (showEmptyTextLabel || state.hiddenTargetIds.indexOf(id) >= 0) { 19610 return "M 0 0"; 19611 } 19612 const d = { 19613 data: [{ 19614 value: config.gauge_max 19615 }], 19616 startAngle: startAngle, 19617 endAngle: endAngle, 19618 index: index++ 19619 }; 19620 return $$.getArc(d, !0, !0); 19621 }.bind(this)); 19622 backgroundArc.exit().remove(); 19623 } else { 19624 backgroundArc.attr("d", showEmptyTextLabel ? "M 0 0" : function () { 19625 _newArrowCheck(this, _this17); 19626 const d = { 19627 data: [{ 19628 value: config.gauge_max 19629 }], 19630 startAngle: startAngle, 19631 endAngle: endAngle 19632 }; 19633 return $$.getArc(d, !0, !0); 19634 }.bind(this)); 19635 } 19636 }, 19637 bindArcEvent: function bindArcEvent(arc) { 19638 var _this18 = this; 19639 const $$ = this, 19640 config = $$.config, 19641 state = $$.state, 19642 isTouch = state.inputType === "touch", 19643 isMouse = state.inputType === "mouse"; 19644 // eslint-disable-next-line 19645 function selectArc(_this, arcData, id) { 19646 // transitions 19647 $$.expandArc(id); 19648 $$.api.focus(id); 19649 $$.toggleFocusLegend(id, !0); 19650 $$.showTooltip([arcData], _this); 19651 } 19652 19653 // eslint-disable-next-line 19654 function unselectArc(arcData) { 19655 const id = (arcData == null ? void 0 : arcData.id) || undefined; 19656 $$.unexpandArc(id); 19657 $$.api.revert(); 19658 $$.revertLegend(); 19659 $$.hideTooltip(); 19660 } 19661 arc.on("click", function (event, d, i) { 19662 const updated = $$.updateAngle(d); 19663 let arcData; 19664 if (updated) { 19665 arcData = $$.convertToArcData(updated); 19666 $$.toggleShape == null || $$.toggleShape(this, arcData, i); 19667 config.data_onclick.bind($$.api)(arcData, this); 19668 } 19669 }); 19670 19671 // mouse events 19672 if (isMouse) { 19673 arc.on("mouseover", function (event, d) { 19674 var _arcData; 19675 if (state.transiting) { 19676 // skip while transiting 19677 return; 19678 } 19679 state.event = event; 19680 const updated = $$.updateAngle(d), 19681 arcData = updated ? $$.convertToArcData(updated) : null, 19682 id = ((_arcData = arcData) == null ? void 0 : _arcData.id) || undefined; 19683 selectArc(this, arcData, id); 19684 $$.setOverOut(!0, arcData); 19685 }).on("mouseout", function (event, d) { 19686 _newArrowCheck(this, _this18); 19687 if (state.transiting) { 19688 // skip while transiting 19689 return; 19690 } 19691 state.event = event; 19692 const updated = $$.updateAngle(d), 19693 arcData = updated ? $$.convertToArcData(updated) : null; 19694 unselectArc(); 19695 $$.setOverOut(!1, arcData); 19696 }.bind(this)).on("mousemove", function (event, d) { 19697 const updated = $$.updateAngle(d), 19698 arcData = updated ? $$.convertToArcData(updated) : null; 19699 state.event = event; 19700 $$.showTooltip([arcData], this); 19701 }); 19702 } 19703 19704 // touch events 19705 if (isTouch && $$.hasArcType() && !$$.radars) { 19706 const getEventArc = function (event) { 19707 var _event$changedTouches, _event$changedTouches2; 19708 _newArrowCheck(this, _this18); 19709 const _ref4 = (_event$changedTouches = (_event$changedTouches2 = event.changedTouches) == null ? void 0 : _event$changedTouches2[0]) != null ? _event$changedTouches : { 19710 clientX: 0, 19711 clientY: 0 19712 }, 19713 clientX = _ref4.clientX, 19714 clientY = _ref4.clientY, 19715 eventArc = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(browser_doc.elementFromPoint(clientX, clientY)); 19716 return eventArc; 19717 }.bind(this); 19718 $$.$el.svg.on("touchstart touchmove", function (event) { 19719 var _datum, _arcData2; 19720 if (state.transiting) { 19721 // skip while transiting 19722 return; 19723 } 19724 state.event = event; 19725 const eventArc = getEventArc(event),
19726 datum = eventArc.datum(), 19727 updated = (_datum = datum) != null && _datum.data && datum.data.id ? $$.updateAngle(datum) : null, 19728 arcData = updated ? $$.convertToArcData(updated) : null, 19729 id = ((_arcData2 = arcData) == null ? void 0 : _arcData2.id) || undefined; 19730 $$.callOverOutForTouch(arcData); 19731 isUndefined(id) ? unselectArc() : selectArc(this, arcData, id); 19732 }); 19733 } 19734 }, 19735 redrawArcText: function redrawArcText(duration) { 19736 var _this19 = this; 19737 const $$ = this, 19738 config = $$.config, 19739 state = $$.state, 19740 _$$$$el = $$.$el, 19741 main = _$$$$el.main, 19742 arcs = _$$$$el.arcs, 19743 hasGauge = $$.hasType("gauge"), 19744 hasMultiArcGauge = $$.hasMultiArcGauge(); 19745 let text; 19746 19747 // for gauge type, update text when has no title & multi data 19748 if (!(hasGauge && $$.data.targets.length === 1 && config.gauge_title)) { 19749 text = main.selectAll("." + $ARC.chartArc).select("text").style("opacity", "0").attr("class", function (d) { 19750 _newArrowCheck(this, _this19); 19751 return $$.isGaugeType(d.data) ? $GAUGE.gaugeValue : null; 19752 }.bind(this)).call($$.textForArcLabel.bind($$)).attr("transform", $$.transformForArcLabel.bind($$)).style("font-size", function (d) { 19753 _newArrowCheck(this, _this19); 19754 return $$.isGaugeType(d.data) && $$.data.targets.length === 1 && !hasMultiArcGauge ? Math.round(state.radius / 5) + "px" : null; 19755 }.bind(this)).transition().duration(duration).style("opacity", function (d) { 19756 _newArrowCheck(this, _this19); 19757 return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? null : "0"; 19758 }.bind(this)); 19759 hasMultiArcGauge && text.attr("dy", "-.1em"); 19760 } 19761 main.select("." + $ARC.chartArcsTitle).style("opacity", $$.hasType("donut") || hasGauge ? null : "0"); 19762 if (hasGauge) { 19763 var _text; 19764 const isFullCircle = config.gauge_fullCircle; 19765 isFullCircle && ((_text = text) == null ? void 0 : _text.attr("dy", "" + (hasMultiArcGauge ? 0 : Math.round(state.radius / 14)))); 19766 if (config.gauge_label_show) { 19767 arcs.select("." + $GAUGE.chartArcsGaugeUnit).attr("dy", (isFullCircle ? 1.5 : .75) + "em").text(config.gauge_units); 19768 arcs.select("." + $GAUGE.chartArcsGaugeMin).attr("dx", -1 * (state.innerRadius + (state.radius - state.innerRadius) / (isFullCircle ? 1 : 2)) + "px").attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_min, !1)); 19769 19770 // show max text when isn't fullCircle 19771 isFullCircle || arcs.select("." + $GAUGE.chartArcsGaugeMax).attr("dx", state.innerRadius + (state.radius - state.innerRadius) / 2 + "px").attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_max, !0)); 19772 } 19773 } 19774 }, 19775 /** 19776 * Get Arc element by id or index 19777 * @param {string|number} value id or index of Arc 19778 * @returns {d3Selection} Arc path element 19779 * @private 19780 */ 19781 getArcElementByIdOrIndex: function getArcElementByIdOrIndex(value) { 19782 var _this20 = this; 19783 const $$ = this, 19784 arcs = $$.$el.arcs, 19785 filterFn = isNumber(value) ? function (d) { 19786 _newArrowCheck(this, _this20); 19787 return d.index === value; 19788 }.bind(this) : function (d) { 19789 _newArrowCheck(this, _this20); 19790 return d.data.id === value; 19791 }.bind(this); 19792 return arcs == null ? void 0 : arcs.selectAll("." + $COMMON.target + " path").filter(filterFn); 19793 } 19794}); 19795;// CONCATENATED MODULE: ./src/ChartInternal/shape/area.ts 19796 19797/** 19798 * Copyright (c) 2017 ~ present NAVER Corp. 19799 * billboard.js project is licensed under the MIT license 19800 */ 19801 19802 19803 19804 19805/* harmony default export */ var shape_area = ({ 19806 initArea: function initArea(mainLine) { 19807 const $$ = this, 19808 config = $$.config; 19809 mainLine.insert("g", "." + (config.area_front ? $CIRCLE.circles : $LINE.lines)).attr("class", $$.getClass("areas", !0)); 19810 }, 19811 /** 19812 * Update area color 19813 * @param {object} d Data object 19814 * @returns {string} Color string 19815 * @private 19816 */ 19817 updateAreaColor: function updateAreaColor(d) { 19818 const $$ = this; 19819 return $$.config.area_linearGradient ? $$.getGradienColortUrl(d.id) : $$.color(d); 19820 }, 19821 /** 19822 * Generate/Update elements 19823 * @param {boolean} withTransition Transition for exit elements 19824 * @param {boolean} isSub Subchart draw 19825 * @private 19826 */ 19827 updateArea: function updateArea(withTransition, isSub) { 19828 if (isSub === void 0) { 19829 isSub = !1; 19830 } 19831 const $$ = this, 19832 config = $$.config, 19833 state = $$.state, 19834 $el = $$.$el, 19835 $T = $$.$T, 19836 $root = isSub ? $el.subchart : $el; 19837 config.area_linearGradient && $$.updateLinearGradient(); 19838 const area = $root.main.selectAll("." + $AREA.areas).selectAll("." + $AREA.area).data($$.lineData.bind($$)); 19839 $T(area.exit(), withTransition).style("opacity", "0").remove(); 19840 $root.area = area.enter().append("path").attr("class", $$.getClass("area", !0)).style("fill", $$.updateAreaColor.bind($$)).style("opacity", function () { 19841 state.orgAreaOpacity = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).style("opacity"); 19842 return "0"; 19843 }).merge(area); 19844 area.style("opacity", state.orgAreaOpacity); 19845 19846 // calculate ratio if grouped data exists 19847 $$.setRatioForGroupedData($root.area.data()); 19848 }, 19849 /** 19850 * Redraw function 19851 * @param {Function} drawFn Retuned functino from .generateDrawCandlestick() 19852 * @param {boolean} withTransition With or without transition 19853 * @param {boolean} isSub Subchart draw 19854 * @returns {Array} 19855 */ 19856 redrawArea: function redrawArea(drawFn, withTransition, isSub) { 19857 var _this = this; 19858 if (isSub === void 0) { 19859 isSub = !1; 19860 } 19861 const $$ = this, 19862 _ref = isSub ? this.$el.subchart : this.$el, 19863 area = _ref.area, 19864 orgAreaOpacity = $$.state.orgAreaOpacity; 19865 return [$$.$T(area, withTransition, getRandom()).attr("d", drawFn).style("fill", $$.updateAreaColor.bind($$)).style("opacity", function (d) { 19866 _newArrowCheck(this, _this); 19867 return ($$.isAreaRangeType(d) ? orgAreaOpacity / 1.75 : orgAreaOpacity) + ""; 19868 }.bind(this))]; 19869 }, 19870 /** 19871 * Generate area path data 19872 * @param {object} areaIndices Indices 19873 * @param {boolean} isSub Weather is sub axis 19874 * @returns {Function} 19875 * @private 19876 */ 19877 generateDrawArea: function generateDrawArea(areaIndices, isSub) { 19878 var _this2 = this; 19879 const $$ = this, 19880 config = $$.config, 19881 lineConnectNull = config.line_connectNull, 19882 isRotated = config.axis_rotated, 19883 getPoints = $$.generateGetAreaPoints(areaIndices, isSub), 19884 yScale = $$.getYScaleById.bind($$), 19885 xValue = function (d) { 19886 _newArrowCheck(this, _this2); 19887 return (isSub ? $$.subxx : $$.xx).call($$, d); 19888 }.bind(this), 19889 value0 = function (d, i) { 19890 _newArrowCheck(this, _this2); 19891 return $$.isGrouped(d.id) ? getPoints(d, i)[0][1] : yScale(d.id, isSub)($$.isAreaRangeType(d) ? $$.getRangedData(d, "high") : $$.getShapeYMin(d.id)); 19892 }.bind(this), 19893 value1 = function (d, i) { 19894 _newArrowCheck(this, _this2); 19895 return $$.isGrouped(d.id) ? getPoints(d, i)[1][1] : yScale(d.id, isSub)($$.isAreaRangeType(d) ? $$.getRangedData(d, "low") : d.value); 19896 }.bind(this); 19897 return function (d) { 19898 var _this3 = this; 19899 _newArrowCheck(this, _this2); 19900 let values = lineConnectNull ? $$.filterRemoveNull(d.values) : d.values, 19901 x0 = 0, 19902 y0 = 0, 19903 path; 19904 if ($$.isAreaType(d)) { 19905 let area = (0,external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.area)(); 19906 area = isRotated ? area.y(xValue).x0(value0).x1(value1) : area.x(xValue).y0(config.area_above ? 0 : config.area_below ? $$.state.height : value0).y1(value1); 19907 if (!lineConnectNull) { 19908 area = area.defined(function (d) { 19909 _newArrowCheck(this, _this3); 19910 return $$.getBaseValue(d) !== null; 19911 }.bind(this)); 19912 } 19913 if ($$.isStepType(d)) { 19914 values = $$.convertValuesToStep(values); 19915 } 19916 path = area.curve($$.getCurve(d))(values); 19917 } else { 19918 if (values[0]) { 19919 x0 = $$.scale.x(values[0].x); 19920 y0 = $$.getYScaleById(d.id)(values[0].value); 19921 } 19922 path = isRotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; 19923 } 19924 return path || "M 0 0"; 19925 }.bind(this); 19926 }, 19927 generateGetAreaPoints: function generateGetAreaPoints(areaIndices, isSub) { 19928 // partial duplication of generateGetBarPoints 19929 const $$ = this, 19930 config = $$.config, 19931 x = $$.getShapeX(0, areaIndices, isSub), 19932 y = $$.getShapeY(!!isSub), 19933 areaOffset = $$.getShapeOffset($$.isAreaType, areaIndices, isSub), 19934 yScale = $$.getYScaleById.bind($$); 19935 return function (d, i) { 19936 const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id)), 19937 offset = areaOffset(d, i) || y0, 19938 posX = x(d), 19939 value = d.value; // offset is for stacked area chart 19940 let posY = y(d); 19941 19942 // fix posY not to overflow opposite quadrant 19943 if (config.axis_rotated && (value > 0 && posY < y0 || value < 0 && y0 < posY)) { 19944 posY = y0; 19945 } 19946 19947 // 1 point that marks the area position 19948 return [[posX, offset], [posX, posY - (y0 - offset)], [posX, posY - (y0 - offset)],
19949 // needed for compatibility 19950 [posX, offset] // needed for compatibility 19951 ]; 19952 }; 19953 } 19954}); 19955;// CONCATENATED MODULE: ./src/ChartInternal/shape/bar.ts 19956 19957/** 19958 * Copyright (c) 2017 ~ present NAVER Corp. 19959 * billboard.js project is licensed under the MIT license 19960 */ 19961 19962 19963 19964/* harmony default export */ var bar = ({ 19965 initBar: function initBar() { 19966 const $el = this.$el, 19967 config = this.config, 19968 clip = this.state.clip; 19969 $el.bar = $el.main.select("." + $COMMON.chart); 19970 $el.bar = config.bar_front ? $el.bar.append("g") : $el.bar.insert("g", ":first-child"); 19971 $el.bar.attr("class", $BAR.chartBars).call(this.setCssRule(!1, "." + $BAR.chartBars, ["pointer-events:none"])); 19972 19973 // set clip-path attribute when condition meet 19974 // https://github.com/naver/billboard.js/issues/2421 19975 if (config.clipPath === !1 && (config.bar_radius || config.bar_radius_ratio)) { 19976 $el.bar.attr("clip-path", clip.pathXAxis.replace(/#[^)]*/, "#" + clip.id)); 19977 } 19978 }, 19979 updateTargetsForBar: function updateTargetsForBar(targets) { 19980 var _this = this; 19981 const $$ = this, 19982 config = $$.config, 19983 $el = $$.$el, 19984 classChartBar = $$.getChartClass("Bar"), 19985 classBars = $$.getClass("bars", !0), 19986 classFocus = $$.classFocus.bind($$), 19987 isSelectable = config.interaction_enabled && config.data_selection_isselectable; 19988 if (!$el.bar) { 19989 $$.initBar(); 19990 } 19991 const mainBarUpdate = $el.main.select("." + $BAR.chartBars).selectAll("." + $BAR.chartBar).data( 19992 // remove 19993 targets.filter(function (v) { 19994 var _this2 = this; 19995 _newArrowCheck(this, _this); 19996 return v.values.some(function (d) { 19997 _newArrowCheck(this, _this2); 19998 return isNumber(d.value) || $$.isBarRangeType(d); 19999 }.bind(this)); 20000 }.bind(this))).attr("class", function (d) { 20001 _newArrowCheck(this, _this); 20002 return classChartBar(d) + classFocus(d); 20003 }.bind(this)), 20004 mainBarEnter = mainBarUpdate.enter().append("g").attr("class", classChartBar).style("opacity", "0").style("pointer-events", $$.getStylePropValue("none")); 20005 // Bars for each data 20006 mainBarEnter.append("g").attr("class", classBars).style("cursor", function (d) { 20007 _newArrowCheck(this, _this); 20008 return isSelectable != null && isSelectable.bind != null && isSelectable.bind($$.api)(d) ? "pointer" : null; 20009 }.bind(this)).call($$.setCssRule(!0, " ." + $BAR.bar, ["fill"], $$.color)); 20010 }, 20011 /** 20012 * Generate/Update elements 20013 * @param {boolean} withTransition Transition for exit elements 20014 * @param {boolean} isSub Subchart draw 20015 * @private 20016 */ 20017 updateBar: function updateBar(withTransition, isSub) { 20018 if (isSub === void 0) { 20019 isSub = !1; 20020 } 20021 const $$ = this, 20022 config = $$.config, 20023 $el = $$.$el, 20024 $T = $$.$T, 20025 $root = isSub ? $el.subchart : $el, 20026 classBar = $$.getClass("bar", !0), 20027 initialOpacity = $$.initialOpacity.bind($$); 20028 config.bar_linearGradient && $$.updateLinearGradient(); 20029 const bar = $root.main.selectAll("." + $BAR.bars).selectAll("." + $BAR.bar).data($$.labelishData.bind($$)); 20030 $T(bar.exit(), withTransition).style("opacity", "0").remove(); 20031 $root.bar = bar.enter().append("path").attr("class", classBar).style("fill", $$.updateBarColor.bind($$)).merge(bar).style("opacity", initialOpacity); 20032 20033 // calculate ratio if grouped data exists 20034 $$.setRatioForGroupedData($root.bar.data()); 20035 }, 20036 /** 20037 * Update bar color 20038 * @param {object} d Data object 20039 * @returns {string} Color string 20040 * @private 20041 */ 20042 updateBarColor: function updateBarColor(d) { 20043 const $$ = this, 20044 fn = $$.getStylePropValue($$.color); 20045 return $$.config.bar_linearGradient ? $$.getGradienColortUrl(d.id) : fn ? fn(d) : null; 20046 }, 20047 /** 20048 * Redraw function 20049 * @param {Function} drawFn Retuned function from .getDrawShape() => .generateDrawBar() 20050 * @param {boolean} withTransition With or without transition 20051 * @param {boolean} isSub Subchart draw 20052 * @returns {Array} 20053 * @private 20054 */ 20055 redrawBar: function redrawBar(drawFn, withTransition, isSub) { 20056 var _this3 = this; 20057 if (isSub === void 0) { 20058 isSub = !1; 20059 } 20060 const $$ = this, 20061 _ref = isSub ? $$.$el.subchart : $$.$el, 20062 bar = _ref.bar; 20063 return [$$.$T(bar, withTransition, getRandom()).attr("d", function (d) { 20064 _newArrowCheck(this, _this3); 20065 return (isNumber(d.value) || $$.isBarRangeType(d)) && drawFn(d); 20066 }.bind(this)).style("fill", $$.updateBarColor.bind($$)).style("opacity", null)]; 20067 }, 20068 /** 20069 * Generate draw function 20070 * @param {object} barIndices data order within x axis. 20071 * barIndices ==> {data1: 0, data2: 0, data3: 1, data4: 1, __max__: 1} 20072 * 20073 * When gropus given as: 20074 * groups: [ 20075 * ["data1", "data2"], 20076 * ["data3", "data4"] 20077 * ], 20078 * 20079 * Will be rendered as: 20080 * data1 data3 data1 data3 20081 * data2 data4 data2 data4 20082 * ------------------------- 20083 * 0 1 20084 * @param {boolean} isSub If is for subchart 20085 * @returns {Function} 20086 * @private 20087 */ 20088 generateDrawBar: function generateDrawBar(barIndices, isSub) { 20089 var _this4 = this; 20090 const $$ = this, 20091 config = $$.config, 20092 getPoints = $$.generateGetBarPoints(barIndices, isSub), 20093 isRotated = config.axis_rotated, 20094 barRadius = config.bar_radius, 20095 barRadiusRatio = config.bar_radius_ratio, 20096 getRadius = isNumber(barRadius) && barRadius > 0 ? function () { 20097 _newArrowCheck(this, _this4); 20098 return barRadius; 20099 }.bind(this) : isNumber(barRadiusRatio) ? function (w) { 20100 _newArrowCheck(this, _this4); 20101 return w * barRadiusRatio; 20102 }.bind(this) : null; 20103 20104 // get the bar radius 20105 20106 return function (d, i) { 20107 _newArrowCheck(this, _this4); 20108 // 4 points that make a bar 20109 const points = getPoints(d, i), 20110 indexX = +isRotated, 20111 indexY = +!indexX, 20112 isUnderZero = d.value < 0, 20113 isInverted = config["axis_" + $$.axis.getId(d.id) + "_inverted"], 20114 isNegative = !isInverted && isUnderZero || isInverted && !isUnderZero, 20115 pathRadius = ["", ""]; // switch points if axis is rotated, not applicable for sub chart 20116 let radius = 0; 20117 const isGrouped = $$.isGrouped(d.id), 20118 isRadiusData = getRadius && isGrouped ? $$.isStackingRadiusData(d) : !1; 20119 if (getRadius) { 20120 const index = isRotated ? indexY : indexX, 20121 barW = points[2][index] - points[0][index]; 20122 radius = !isGrouped || isRadiusData ? getRadius(barW) : 0;
20123 const arc = "a" + radius + "," + radius + " " + (isNegative ? "1 0 0" : "0 0 1") + " "; 20124 pathRadius[+!isRotated] = "" + arc + radius + "," + radius; 20125 pathRadius[+isRotated] = "" + arc + [-radius, radius][isRotated ? "sort" : "reverse"](); 20126 isNegative && pathRadius.reverse(); 20127 } 20128 20129 // path string data shouldn't be containing new line chars 20130 // https://github.com/naver/billboard.js/issues/530 20131 const path = isRotated ? "H" + (points[1][indexX] + (isNegative ? radius : -radius)) + " " + pathRadius[0] + "V" + (points[2][indexY] - radius) + " " + pathRadius[1] + "H" + points[3][indexX] : "V" + (points[1][indexY] + (isNegative ? -radius : radius)) + " " + pathRadius[0] + "H" + (points[2][indexX] - radius) + " " + pathRadius[1] + "V" + points[3][indexY]; 20132 return "M" + points[0][indexX] + "," + points[0][indexY] + path + "z"; 20133 }.bind(this); 20134 }, 20135 /** 20136 * Determine if given stacking bar data is radius type 20137 * @param {object} d Data row 20138 * @returns {boolean} 20139 */ 20140 isStackingRadiusData: function isStackingRadiusData(d) { 20141 var _this5 = this; 20142 const $$ = this, 20143 $el = $$.$el, 20144 config = $$.config, 20145 data = $$.data, 20146 state = $$.state, 20147 id = d.id, 20148 index = d.index, 20149 value = d.value; 20150 // when the data is hidden, check if has rounded edges 20151 if (state.hiddenTargetIds.indexOf(id) > -1) { 20152 const target = $el.bar.filter(function (d) { 20153 _newArrowCheck(this, _this5); 20154 return d.id === id && d.value === value; 20155 }.bind(this)); 20156 return !target.empty() && /a\d+/i.test(target.attr("d")); 20157 } 20158 20159 // Find same grouped ids 20160 const keys = config.data_groups.find(function (v) { 20161 _newArrowCheck(this, _this5); 20162 return v.indexOf(id) > -1; 20163 }.bind(this)), 20164 sortedList = $$.orderTargets($$.filterTargetsToShow(data.targets.filter($$.isBarType, $$))).filter(function (v) { 20165 _newArrowCheck(this, _this5); 20166 return keys.indexOf(v.id) > -1; 20167 }.bind(this)), 20168 sortedIds = sortedList.map(function (v) { 20169 var _this6 = this; 20170 _newArrowCheck(this, _this5); 20171 return v.values.filter(function (v2) { 20172 _newArrowCheck(this, _this6); 20173 return v2.index === index && (isNumber(value) && value > 0 ? v2.value > 0 : v2.value < 0); 20174 }.bind(this))[0]; 20175 }.bind(this)).filter(Boolean).map(function (v) { 20176 _newArrowCheck(this, _this5); 20177 return v.id; 20178 }.bind(this)); // Get sorted list 20179 // Get sorted Ids. Filter positive or negative values Ids from given value 20180 // If the given id stays in the last position, then radius should be applied. 20181 return value !== 0 && sortedIds.indexOf(id) === sortedIds.length - 1; 20182 }, 20183 /** 20184 * Generate bar coordinate points data 20185 * @param {object} barIndices Data order within x axis. 20186 * @param {boolean} isSub If is for subchart 20187 * @returns {Array} Array of coordinate points 20188 * @private 20189 */ 20190 generateGetBarPoints: function generateGetBarPoints(barIndices, isSub) { 20191 var _this7 = this; 20192 const $$ = this, 20193 config = $$.config, 20194 axis = isSub ? $$.axis.subX : $$.axis.x, 20195 barTargetsNum = $$.getIndicesMax(barIndices) + 1, 20196 barW = $$.getBarW("bar", axis, barTargetsNum), 20197 barX = $$.getShapeX(barW, barIndices, !!isSub), 20198 barY = $$.getShapeY(!!isSub), 20199 barOffset = $$.getShapeOffset($$.isBarType, barIndices, !!isSub), 20200 yScale = $$.getYScaleById.bind($$); 20201 return function (d, i) { 20202 _newArrowCheck(this, _this7); 20203 const id = d.id, 20204 y0 = yScale.call($$, id, isSub)($$.getShapeYMin(id)), 20205 offset = barOffset(d, i) || y0, 20206 width = isNumber(barW) ? barW : barW[d.id] || barW._$width, 20207 isInverted = config["axis_" + $$.axis.getId(id) + "_inverted"], 20208 value = d.value, 20209 posX = barX(d); 20210 20211 // offset is for stacked bar chart 20212 20213 let posY = barY(d); 20214 20215 // fix posY not to overflow opposite quadrant 20216 if (config.axis_rotated && !isInverted && (value > 0 && posY < y0 || value < 0 && y0 < posY)) { 20217 posY = y0; 20218 } 20219 if (!$$.isBarRangeType(d)) { 20220 posY -= y0 - offset; 20221 } 20222 const startPosX = posX + width; 20223 20224 // 4 points that make a bar 20225 return [[posX, offset], [posX, posY], [startPosX, posY], [startPosX, offset]]; 20226 }.bind(this); 20227 } 20228}); 20229;// CONCATENATED MODULE: ./src/ChartInternal/shape/candlestick.ts 20230 20231 20232function candlestick_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 20233function candlestick_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {};
20233 r % 2 ? candlestick_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : candlestick_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 20234/** 20235 * Copyright (c) 2017 ~ present NAVER Corp. 20236 * billboard.js project is licensed under the MIT license 20237 */ 20238 20239 20240 20241/* harmony default export */ var candlestick = ({ 20242 initCandlestick: function initCandlestick() { 20243 const $el = this.$el; 20244 $el.candlestick = $el.main.select("." + $COMMON.chart) 20245 // should positioned at the beginning of the shape node to not overlap others 20246 .append("g").attr("class", $CANDLESTICK.chartCandlesticks); 20247 }, 20248 /** 20249 * Update targets by its data 20250 * called from: ChartInternal.updateTargets() 20251 * @param {Array} targets Filtered target by type 20252 * @private 20253 */ 20254 updateTargetsForCandlestick: function updateTargetsForCandlestick(targets) { 20255 const $$ = this, 20256 $el = $$.$el, 20257 classChart = $$.getChartClass("Candlestick"); 20258 if (!$el.candlestick) { 20259 $$.initCandlestick(); 20260 } 20261 const mainUpdate = $$.$el.main.select("." + $CANDLESTICK.chartCandlesticks).selectAll("." + $CANDLESTICK.chartCandlestick).data(targets); 20262 mainUpdate.enter().append("g").attr("class", classChart).style("pointer-events", "none"); 20263 }, 20264 /** 20265 * Generate/Update elements 20266 * @param {boolean} withTransition Transition for exit elements 20267 * @param {boolean} isSub Subchart draw 20268 * @private 20269 */ 20270 updateCandlestick: function updateCandlestick(withTransition, isSub) { 20271 var _this = this; 20272 if (isSub === void 0) { 20273 isSub = !1; 20274 } 20275 const $$ = this, 20276 $el = $$.$el, 20277 $T = $$.$T, 20278 $root = isSub ? $el.subchart : $el, 20279 classSetter = $$.getClass("candlestick", !0), 20280 initialOpacity = $$.initialOpacity.bind($$), 20281 candlestick = $root.main.selectAll("." + $CANDLESTICK.chartCandlestick).selectAll("." + $CANDLESTICK.candlestick).data($$.labelishData.bind($$)); 20282 $T(candlestick.exit(), withTransition).style("opacity", "0").remove(); 20283 const candlestickEnter = candlestick.enter().filter(function (d) { 20284 _newArrowCheck(this, _this); 20285 return d.value; 20286 }.bind(this)).append("g").attr("class", classSetter); 20287 candlestickEnter.append("line"); 20288 candlestickEnter.append("path"); 20289 $root.candlestick = candlestick.merge(candlestickEnter).style("opacity", initialOpacity); 20290 }, 20291 /** 20292 * Get draw function 20293 * @param {object} indices Indice data 20294 * @param {boolean} isSub Subchart draw 20295 * @returns {Function} 20296 * @private 20297 */ 20298 generateDrawCandlestick: function generateDrawCandlestick(indices, isSub) { 20299 var _this2 = this; 20300 const $$ = this, 20301 config = $$.config, 20302 getPoints = $$.generateGetCandlestickPoints(indices, isSub), 20303 isRotated = config.axis_rotated, 20304 downColor = config.candlestick_color_down; 20305 return function (d, i, g) { 20306 var _value, 20307 _this3 = this; 20308 _newArrowCheck(this, _this2); 20309 const points = getPoints(d, i), 20310 value = $$.getCandlestickData(d), 20311 isUp = (_value = value) == null ? void 0 : _value._isUp, 20312 indexX = +isRotated; // switch points if axis is rotated, not applicable for sub chart 20313 if (g.classed) { 20314 g.classed($CANDLESTICK[isUp ? "valueUp" : "valueDown"], !0); 20315 } 20316 const path = isRotated ? "H" + points[1][1] + " V" + points[1][0] + " H" + points[0][1] : "V" + points[1][1] + " H" + points[1][0] + " V" + points[0][1]; 20317 g.select("path").attr("d", "M" + points[0][indexX] + "," + points[0][+!indexX] + path + "z").style("fill", function (d) { 20318 _newArrowCheck(this, _this3); 20319 const color = isUp ? $$.color(d) : isObject(downColor) ? downColor[d.id] : downColor; 20320 return color || $$.color(d); 20321 }.bind(this)); 20322 20323 // set line position 20324 const line = g.select("line"), 20325 pos = isRotated ? { 20326 x1: points[2][1], 20327 x2: points[2][2], 20328 y1: points[2][0], 20329 y2: points[2][0] 20330 } : { 20331 x1: points[2][0], 20332 x2: points[2][0], 20333 y1: points[2][1], 20334 y2: points[2][2] 20335 }; 20336 for (const x in pos) { 20337 line.attr(x, pos[x]); 20338 } 20339 }.bind(this); 20340 }, 20341 /** 20342 * Generate shape drawing points 20343 * @param {object} indices Indice data 20344 * @param {boolean} isSub Subchart draw 20345 * @returns {Function} 20346 */ 20347 generateGetCandlestickPoints: function generateGetCandlestickPoints(indices, isSub) { 20348 var _this4 = this; 20349 if (isSub === void 0) { 20350 isSub = !1; 20351 } 20352 const $$ = this, 20353 axis = isSub ? $$.axis.subX : $$.axis.x, 20354 targetsNum = $$.getIndicesMax(indices) + 1, 20355 barW = $$.getBarW("candlestick", axis, targetsNum), 20356 x = $$.getShapeX(barW, indices, !!isSub), 20357 y = $$.getShapeY(!!isSub), 20358 shapeOffset = $$.getShapeOffset($$.isBarType, indices, !!isSub), 20359 yScale = $$.getYScaleById.bind($$); 20360 return function (d, i) { 20361 _newArrowCheck(this, _this4); 20362 const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id)), 20363 offset = shapeOffset(d, i) || y0, 20364 width = isNumber(barW) ? barW : barW[d.id] || barW._$width, 20365 value = $$.getCandlestickData(d); // offset is for stacked bar chart 20366 let points; 20367 if (value && isNumber(value.open) && isNumber(value.close)) { 20368 const posX = { 20369 start: x(d), 20370 end: 0 20371 }; 20372 posX.end = posX.start + width; 20373 const posY = { 20374 start: y(value.open), 20375 end: y(value.close) 20376 }, 20377 posLine = { 20378 x: posX.start + width / 2, 20379 high: y(value.high), 20380 low: y(value.low) 20381 }; 20382 posY.start -= y0 - offset; 20383 points = [[posX.start, posY.start], [posX.end, posY.end], [posLine.x, posLine.low, posLine.high]]; 20384 } else { 20385 points = [[0, 0], [0, 0], [0, 0, 0]]; 20386 } 20387 return points; 20388 }.bind(this); 20389 }, 20390 /** 20391 * Redraw function 20392 * @param {Function} drawFn Retuned functino from .generateDrawCandlestick() 20393 * @param {boolean} withTransition With or without transition 20394 * @param {boolean} isSub Subchart draw 20395 * @returns {Array} 20396 */ 20397 redrawCandlestick: function redrawCandlestick(drawFn, withTransition, isSub) { 20398 if (isSub === void 0) { 20399 isSub = !1; 20400 } 20401 const $$ = this, 20402 $el = $$.$el, 20403 $T = $$.$T, 20404 _ref = isSub ? $el.subchart : $el, 20405 candlestick = _ref.candlestick, 20406 rand = getRandom(!0); 20407 return [candlestick.each(function (d, i) { 20408 const g = $T((0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), withTransition, rand); 20409 drawFn(d, i, g); 20410 }).style("opacity", null)]; 20411 }, 20412 /** 20413 * Get candlestick data as object 20414 * @param {object} param Data object 20415 * @param {Array|object} param.value Data value 20416 * @returns {object|null} Converted data object 20417 * @private 20418 */ 20419 getCandlestickData: function getCandlestickData(_ref2) { 20420 let value = _ref2.value, 20421 d; 20422 if (isArray(value)) { 20423 const open = value[0], 20424 high = value[1], 20425 low = value[2], 20426 close = value[3], 20427 _value$ = value[4], 20428 volume = _value$ === void 0 ? !1 : _value$; 20429 d = { 20430 open: open, 20431 high: high, 20432 low: low, 20433 close: close 20434 }; 20435 if (volume !== !1) { 20436 d.volume = volume; 20437 } 20438 } else if (isObject(value)) { 20439 d = candlestick_objectSpread({}, value); 20440 } 20441 if (d) { 20442 d._isUp = d.close >= d.open; 20443 } 20444 return d || null; 20445 } 20446}); 20447;// CONCATENATED MODULE: ./src/ChartInternal/shape/gauge.ts 20448 20449/** 20450 * Copyright (c) 2017 ~ present NAVER Corp. 20451 * billboard.js project is licensed under the MIT license 20452 */ 20453 20454 20455 20456/* harmony default export */ var gauge = ({ 20457 initGauge: function initGauge() { 20458 var _this = this; 20459 const $$ = this, 20460 config = $$.config, 20461 arcs = $$.$el.arcs, 20462 appendText = function (className) { 20463 _newArrowCheck(this, _this); 20464 arcs.append("text").attr("class", className).style("text-anchor", "middle").style("pointer-events", "none"); 20465 }.bind(this); 20466 if ($$.hasType("gauge")) { 20467 const hasMulti = $$.hasMultiArcGauge(); 20468 arcs.append(hasMulti ? "g" : "path").attr("class", $ARC.chartArcsBackgroun
20468d).style("fill", !hasMulti && config.gauge_background || null); 20469 config.gauge_units && appendText($GAUGE.chartArcsGaugeUnit); 20470 if (config.gauge_label_show) { 20471 appendText($GAUGE.chartArcsGaugeMin); 20472 config.gauge_fullCircle || appendText($GAUGE.chartArcsGaugeMax); 20473 } 20474 } 20475 }, 20476 updateGaugeMax: function updateGaugeMax() { 20477 const $$ = this, 20478 config = $$.config, 20479 state = $$.state, 20480 hasMultiGauge = $$.hasMultiArcGauge(), 20481 max = hasMultiGauge ? $$.getMinMaxData().max[0].value : $$.getTotalDataSum(state.rendered); 20482 20483 // to prevent excluding total data sum during the init(when data.hide option is used), use $$.rendered state value 20484 20485 // if gauge_max less than max, make max to max value 20486 if (max + config.gauge_min * (config.gauge_min > 0 ? -1 : 1) > config.gauge_max) { 20487 config.gauge_max = max - config.gauge_min; 20488 } 20489 }, 20490 redrawMultiArcGauge: function redrawMultiArcGauge() { 20491 var _this2 = this; 20492 const $$ = this, 20493 config = $$.config, 20494 state = $$.state, 20495 $el = $$.$el, 20496 hiddenTargetIds = $$.state.hiddenTargetIds, 20497 arcLabelLines = $el.main.selectAll("." + $ARC.arcs).selectAll("." + $ARC.arcLabelLine).data($$.arcData.bind($$)), 20498 mainArcLabelLine = arcLabelLines.enter().append("rect").attr("class", function (d) { 20499 _newArrowCheck(this, _this2); 20500 return $ARC.arcLabelLine + " " + $COMMON.target + " " + $COMMON.target + "-" + d.data.id; 20501 }.bind(this)).merge(arcLabelLines); 20502 mainArcLabelLine.style("fill", function (d) { 20503 _newArrowCheck(this, _this2); 20504 return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data); 20505 }.bind(this)).style("display", config.gauge_label_show ? null : "none").each(function (d) { 20506 let lineLength = 0; 20507 let x = 0, 20508 y = 0, 20509 transform = ""; 20510 if (hiddenTargetIds.indexOf(d.data.id) < 0) { 20511 const updated = $$.updateAngle(d), 20512 innerLineLength = state.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length * (updated.index + 1), 20513 lineAngle = updated.endAngle - Math.PI / 2, 20514 arcInnerRadius = state.radius - innerLineLength, 20515 linePositioningAngle = lineAngle - (arcInnerRadius === 0 ? 0 : 1 / arcInnerRadius); 20516 lineLength = state.radiusExpanded - state.radius + innerLineLength; 20517 x = Math.cos(linePositioningAngle) * arcInnerRadius; 20518 y = Math.sin(linePositioningAngle) * arcInnerRadius; 20519 transform = "rotate(" + lineAngle * 180 / Math.PI + ", " + x + ", " + y + ")"; 20520 } 20521 (0,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", 2).attr("transform", transform).style("stroke-dasharray", "0, " + (lineLength + 2) + ", 0"); 20522 }); 20523 }, 20524 textForGaugeMinMax: function textForGaugeMinMax(value, isMax) { 20525 const $$ = this, 20526 config = $$.config, 20527 format = config.gauge_label_extents; 20528 return isFunction(format) ? format.bind($$.api)(value, isMax) : value; 20529 }, 20530 getGaugeLabelHeight: function getGaugeLabelHeight() { 20531 const config = this.config; 20532 return this.config.gauge_label_show && !config.gauge_fullCircle ? 20 : 0; 20533 }, 20534 getPaddingBottomForGauge: function getPaddingBottomForGauge() { 20535 const $$ = this; 20536 return $$.getGaugeLabelHeight() * ($$.config.gauge_label_show ? 2 : 2.5); 20537 } 20538}); 20539;// CONCATENATED MODULE: ./src/ChartInternal/shape/bubble.ts 20540 20541/** 20542 * Copyright (c) 2017 ~ present NAVER Corp. 20543 * billboard.js project is licensed under the MIT license 20544 */ 20545 20546 20547/* harmony default export */ var bubble = ({ 20548 /** 20549 * Initializer 20550 * @private 20551 */ 20552 initBubble: function initBubble() { 20553 const $$ = this, 20554 config = $$.config; 20555 if ($$.hasType("bubble")) { 20556 config.point_show = !0; 20557 config.point_type = "circle"; 20558 } 20559 }, 20560 /** 20561 * Get user agent's computed value 20562 * @returns {number} 20563 * @private 20564 */ 20565 getBaseLength: function getBaseLength() { 20566 const $$ = this, 20567 _$$$state = $$.state, 20568 width = _$$$state.width, 20569 height = _$$$state.height, 20570 cacheKey = KEY.bubbleBaseLength; 20571 let baseLength = $$.cache.get(cacheKey); 20572 if (!baseLength) { 20573 $$.cache.add(cacheKey, baseLength = getMinMax("min", [width, height])); 20574 } 20575 return baseLength; 20576 }, 20577 /** 20578 * Get the radius value for bubble circle 20579 * @param {object} d Data object 20580 * @returns {number} 20581 * @private 20582 */ 20583 getBubbleR: function getBubbleR(d) { 20584 var _this = this; 20585 const $$ = this; 20586 let maxR = $$.config.bubble_maxR; 20587 if (isFunction(maxR)) { 20588 maxR = maxR.bind($$.api)(d); 20589 } else if (!isNumber(maxR)) { 20590 maxR = $$.getBaseLength() / ($$.getMaxDataCount() * 2) + 12; 20591 } 20592 const max = getMinMax("max", $$.getMinMaxData().max.map(function (d) { 20593 _newArrowCheck(this, _this); 20594 return $$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "y") : isObject(d.value) ? d.value.mid : d.value; 20595 }.bind(this))), 20596 maxArea = maxR * maxR * Math.PI, 20597 area = ($$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "z")
20597: d.value) * (maxArea / max); 20598 return Math.sqrt(area / Math.PI); 20599 }, 20600 /** 20601 * Get bubble dimension data 20602 * @param {object|Array} d data value 20603 * @param {string} type - y or z 20604 * @returns {number} 20605 * @private 20606 */ 20607 getBubbleZData: function getBubbleZData(d, type) { 20608 return isObject(d) ? d[type] : d[type === "y" ? 0 : 1]; 20609 } 20610}); 20611;// CONCATENATED MODULE: ./src/ChartInternal/shape/line.ts 20612 20613/** 20614 * Copyright (c) 2017 ~ present NAVER Corp. 20615 * billboard.js project is licensed under the MIT license 20616 */ 20617 20618 20619 20620 20621/* harmony default export */ var line = ({ 20622 initLine: function initLine() { 20623 const $el = this.$el; 20624 $el.line = $el.main.select("." + $COMMON.chart).append("g").attr("class", $LINE.chartLines).call(this.setCssRule(!1, "." + $LINE.chartLines, ["pointer-events:none"])); 20625 }, 20626 updateTargetsForLine: function updateTargetsForLine(t) { 20627 var _this = this; 20628 const $$ = this, 20629 _$$$$el = $$.$el, 20630 area = _$$$$el.area, 20631 line = _$$$$el.line, 20632 main = _$$$$el.main, 20633 classChartLine = $$.getChartClass("Line"), 20634 classLines = $$.getClass("lines", !0), 20635 classFocus = $$.classFocus.bind($$); 20636 if (!line) { 20637 $$.initLine(); 20638 } 20639 const targets = t.filter(function (d) { 20640 _newArrowCheck(this, _this); 20641 return !($$.isScatterType(d) || $$.isBubbleType(d)); 20642 }.bind(this)), 20643 mainLineUpdate = main.select("." + $LINE.chartLines).selectAll("." + $LINE.chartLine).data(targets).attr("class", function (d) { 20644 _newArrowCheck(this, _this); 20645 return classChartLine(d) + classFocus(d); 20646 }.bind(this)), 20647 mainLineEnter = mainLineUpdate.enter().append("g").attr("class", classChartLine).style("opacity", "0").style("pointer-events", $$.getStylePropValue("none")); 20648 // Lines for each data 20649 mainLineEnter.append("g").attr("class", classLines); 20650 20651 // Areas 20652 if ($$.hasTypeOf("Area")) { 20653 const mainLine = (!area && mainLineEnter.empty() ? mainLineUpdate : mainLineEnter).filter($$.isAreaType.bind($$)); 20654 $$.initArea(mainLine); 20655 } 20656 $$.updateTargetForCircle(targets, mainLineEnter); 20657 }, 20658 /** 20659 * Generate/Update elements 20660 * @param {boolean} withTransition Transition for exit elements 20661 * @param {boolean} isSub Subchart draw 20662 * @private 20663 */ 20664 updateLine: function updateLine(withTransition, isSub) { 20665 var _this2 = this; 20666 if (isSub === void 0) { 20667 isSub = !1; 20668 } 20669 const $$ = this, 20670 extraLineClasses = $$.format.extraLineClasses, 20671 $el = $$.$el, 20672 $T = $$.$T, 20673 $root = isSub ? $el.subchart : $el, 20674 line = $root.main.selectAll("." + $LINE.lines).selectAll("." + $LINE.line).data($$.lineData.bind($$)); 20675 $T(line.exit(), withTransition).style("opacity", "0").remove(); 20676 $root.line = line.enter().append("path").attr("class", function (d) { 20677 _newArrowCheck(this, _this2); 20678 return $$.getClass("line", !0)(d) + " " + (extraLineClasses(d) || ""); 20679 }.bind(this)).style("stroke", $$.color).merge(line).style("opacity", $$.initialOpacity.bind($$)).attr("transform", null); 20680 }, 20681 /** 20682 * Redraw function 20683 * @param {Function} drawFn Retuned functino from .generateDrawCandlestick() 20684 * @param {boolean} withTransition With or without transition 20685 * @param {boolean} isSub Subchart draw 20686 * @returns {Array} 20687 */ 20688 redrawLine: function redrawLine(drawFn, withTransition, isSub) { 20689 if (isSub === void 0) { 20690 isSub = !1; 20691 } 20692 const $$ = this, 20693 $el = $$.$el, 20694 $T = $$.$T, 20695 _ref = isSub ? $el.subchart : $el, 20696 line = _ref.line; 20697 return [$T(line, withTransition, getRandom()).attr("d", drawFn).style("stroke", this.color).style("opacity", null)]; 20698 }, 20699 /** 20700 * Get the curve interpolate 20701 * @param {Array} d Data object 20702 * @returns {Function} 20703 * @private 20704 */ 20705 getCurve: function getCurve(d) { 20706 var _this3 = this; 20707 const $$ = this, 20708 isRotatedStepType = $$.config.axis_rotated && $$.isStepType(d); 20709 // when is step & rotated, should be computed in different way 20710 // https://github.com/naver/billboard.js/issues/471 20711 return isRotatedStepType ? function (context) { 20712 _newArrowCheck(this, _this3); 20713 const step = $$.getInterpolate(d)(context); 20714 20715 // keep the original method 20716 step.orgPoint = step.point; 20717 20718 // to get rotated path data 20719 step.pointRotated = function (x, y) { 20720 this._point === 1 && (this._point = 2); 20721 const y1 = this._y * (1 - this._t) + y * this._t; 20722 this._context.lineTo(this._x, y1); 20723 this._context.lineTo(x, y1); 20724 this._x = x; 20725 this._y = y; 20726 }; 20727 step.point = function (x, y) { 20728 this._point === 0 ? this.orgPoint(x, y) : this.pointRotated(x, y); 20729 }; 20730 return step; 20731 }.bind(this) : $$.getInterpolate(d); 20732 },
20733 generateDrawLine: function generateDrawLine(lineIndices, isSub) { 20734 var _this4 = this; 20735 const $$ = this, 20736 config = $$.config, 20737 scale = $$.scale, 20738 lineConnectNull = config.line_connectNull, 20739 isRotated = config.axis_rotated, 20740 getPoints = $$.generateGetLinePoints(lineIndices, isSub), 20741 yScale = $$.getYScaleById.bind($$), 20742 xValue = function (d) { 20743 _newArrowCheck(this, _this4); 20744 return (isSub ? $$.subxx : $$.xx).call($$, d); 20745 }.bind(this), 20746 yValue = function (d, i) { 20747 _newArrowCheck(this, _this4); 20748 return $$.isGrouped(d.id) ? getPoints(d, i)[0][1] : yScale(d.id, isSub)($$.getBaseValue(d)); 20749 }.bind(this); 20750 let line = (0,external_commonjs_d3_shape_commonjs2_d3_shape_amd_d3_shape_root_d3_.line)(); 20751 line = isRotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue); 20752 if (!lineConnectNull) { 20753 line = line.defined(function (d) { 20754 _newArrowCheck(this, _this4); 20755 return $$.getBaseValue(d) !== null; 20756 }.bind(this)); 20757 } 20758 const x = isSub ? scale.subX : scale.x; 20759 return function (d) { 20760 _newArrowCheck(this, _this4); 20761 const y = yScale(d.id, isSub); 20762 let values = lineConnectNull ? $$.filterRemoveNull(d.values) : d.values, 20763 x0 = 0, 20764 y0 = 0, 20765 path; 20766 if ($$.isLineType(d)) { 20767 const regions = config.data_regions[d.id]; 20768 if (regions) { 20769 path = $$.lineWithRegions(values, scale.zoom || x, y, regions); 20770 } else { 20771 if ($$.isStepType(d)) { 20772 values = $$.convertValuesToStep(values); 20773 } 20774 path = line.curve($$.getCurve(d))(values); 20775 } 20776 } else { 20777 if (values[0]) { 20778 x0 = x(values[0].x); 20779 y0 = y(values[0].value); 20780 } 20781 path = isRotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; 20782 } 20783 return path || "M 0 0"; 20784 }.bind(this); 20785 }, 20786 lineWithRegions: function lineWithRegions(d, x, y, _regions) { 20787 var _this5 = this; 20788 const $$ = this, 20789 config = $$.config, 20790 isRotated = config.axis_rotated, 20791 isTimeSeries = $$.axis.isTimeSeries(), 20792 regions = [], 20793 dasharray = "2 2"; 20794 // default value 20795 let xp, yp, diff, diffx2; 20796 // Check start/end of regions 20797 if (isDefined(_regions)) { 20798 const getValue = function (v, def) { 20799 _newArrowCheck(this, _this5); 20800 return isUndefined(v) ? def : isTimeSeries ? parseDate.call($$, v) : v; 20801 }.bind(this); 20802 for (let i = 0, reg; reg = _regions[i]; i++) { 20803 const start = getValue(reg.start, d[0].x), 20804 end = getValue(reg.end, d[d.length - 1].x), 20805 style = reg.style || { 20806 dasharray: dasharray 20807 }; 20808 regions[i] = { 20809 start: start, 20810 end: end, 20811 style: style 20812 }; 20813 } 20814 } 20815 20816 // Set scales 20817 const xValue = isRotated ? function (dt) { 20818 _newArrowCheck(this, _this5); 20819 return y(dt.value); 20820 }.bind(this) : function (dt) { 20821 _newArrowCheck(this, _this5); 20822 return x(dt.x); 20823 }.bind(this), 20824 yValue = isRotated ? function (dt) { 20825 _newArrowCheck(this, _this5); 20826 return x(dt.x); 20827 }.bind(this) : function (dt) { 20828 _newArrowCheck(this, _this5); 20829 return y(dt.value); 20830 }.bind(this), 20831 generateM = function (points) { 20832 _newArrowCheck(this, _this5); 20833 return "M" + points[0][0] + "," + points[0][1] + "L" + points[1][0] + "," + points[1][1]; 20834 }.bind(this), 20835 sWithRegion = isTimeSeries ? function (d0, d1, k, timeseriesDiff) { 20836 _newArrowCheck(this, _this5); 20837 const x0 = d0.x.getTime(), 20838 xDiff = d1.x - d0.x, 20839 xv0 = new Date(x0 + xDiff * k), 20840 xv1 = new Date(x0 + xDiff * (k + timeseriesDiff)), 20841 points = isRotated ? [[y(yp(k)), x(xv0)], [y(yp(k + diff)), x(xv1)]] : [[x(xv0), y(yp(k))], [x(xv1), y(yp(k + diff))]]; 20842 return generateM(points); 20843 }.bind(this) : function (d0, d1, k, otherDiff) { 20844 _newArrowCheck(this, _this5); 20845 const 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))]]; 20846 return generateM(points); 20847 }.bind(this), 20848 axisType = { 20849 x: $$.axis.getAxisType("x"), 20850 y: $$.axis.getAxisType("y") 20851 }; // Define svg generator function for region 20852 // Generate 20853 let path = ""; 20854 for (let i = 0, data; data = d[i]; i++) { 20855 const prevData = d[i - 1], 20856 hasPrevData = prevData && isValue(prevData.value); 20857 let style = $$.isWithinRegions(data.x, regions); 20858 20859 // https://github.com/naver/billboard.js/issues/1172 20860 if (!isValue(data.value)) { 20861 continue; 20862 } 20863 20864 // Draw as normal 20865 if (isUndefined(regions) || !style || !hasPrevData) { 20866 path += "" + (i && hasPrevData ? "L" : "M") + xValue(data) + "," + yValue(data); 20867 } else if (hasPrevData) { 20868 try { 20869 style = style.dasharray.split(" "); 20870 } catch (e) { 20871 style = dasharray.split(" "); 20872 } 20873 20874 // Draw with region // TODO: Fix for horizotal charts 20875 xp = getScale(axisType.x, prevData.x, data.x); 20876 yp = getScale(axisType.y, prevData.value, data.value); 20877 const dx = x(data.x) - x(prevData.x), 20878 dy = y(data.value) - y(prevData.value), 20879 dd = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); 20880 diff = style[0] / dd; 20881 diffx2 = diff * style[1]; 20882 for (let j = diff; j <= 1; j += diffx2) { 20883 path += sWithRegion(prevData, data, j, diff); 20884 20885 // to make sure correct line drawing 20886 if (j + diffx2 >= 1) { 20887 path += sWithRegion(prevData, data, 1, 0); 20888 } 20889 } 20890 } 20891 } 20892 return path; 20893 }, 20894 isWithinRegions: function isWithinRegions(withinX, withinRegions) { 20895 for (let i = 0, reg; reg = withinRegions[i]; i++) { 20896 if (reg.start < withinX && withinX <= reg.end) { 20897 return reg.style; 20898 } 20899 } 20900 return !1; 20901 }, 20902 isWithinStep: function isWithinStep(that, y) { 20903 return Math.abs(y - getPointer(this.state.event, that)[1]) < 30; 20904 }, 20905 shouldDrawPointsForLine: function shouldDrawPointsForLine(d) { 20906 const linePoint = this.config.line_point; 20907 return linePoint === !0 || isArray(linePoint) && linePoint.indexOf(d.id) !== -1; 20908 } 20909}); 20910;// CONCATENATED MODULE: ./src/ChartInternal/shape/point.ts 20911 20912var point_this = undefined; 20913/** 20914 * Copyright (c) 2017 ~ present NAVER Corp. 20915 * billboard.js project is licensed under the MIT license 20916 */ 20917 20918 20919 20920 20921const getTransitionName = function () { 20922 _newArrowCheck(this, point_this); 20923 return getRandom(); 20924}.bind(undefined); 20925/* harmony default export */ var point = ({ 20926 hasValidPointType: function hasValidPointType(type) { 20927 return /^(circle|rect(angle)?|polygon|ellipse|use)$/i.test(type || this.config.point_type); 20928 }, 20929 hasValidPointDrawMethods: function hasValidPointDrawMethods(type) { 20930 const pointType = type || this.config.point_type; 20931 return isObjectType(pointType) && isFunction(pointType.create) && isFunction(pointType.update); 20932 }, 20933 initialOpacityForCircle: function initialOpacityForCircle(d) { 20934 const config = this.config, 20935 withoutFadeIn = this.state.withoutFadeIn; 20936 let opacity = config.point_opacity; 20937 if (isUndefined(opacity)) { 20938 opacity = this.getBaseValue(d) !== null && withoutFadeIn[d.id] ? this.opacityForCircle(d) : "0"; 20939 } 20940 return opacity; 20941 }, 20942 opacityForCircle: function opacityForCircle(d) { 20943 const config = this.config; 20944 let opacity = config.point_opacity; 20945 if (isUndefined(opacity)) { 20946 var _this$isPointFocusOnl; 20947 opacity = config.point_show && !((_this$isPointFocusOnl = this.isPointFocusOnl
20947y) != null && _this$isPointFocusOnl.call(this)) ? null : "0"; 20948 opacity = isValue(this.getBaseValue(d)) ? this.isBubbleType(d) || this.isScatterType(d) ? "0.5" : opacity : "0"; 20949 } 20950 return opacity; 20951 }, 20952 initCircle: function initCircle() { 20953 const $$ = this, 20954 main = $$.$el.main; 20955 $$.point = $$.generatePoint(); 20956 if (($$.hasType("bubble") || $$.hasType("scatter")) && main.select("." + $CIRCLE.chartCircles).empty()) { 20957 main.select("." + $COMMON.chart).append("g").attr("class", $CIRCLE.chartCircles); 20958 } 20959 }, 20960 updateTargetForCircle: function updateTargetForCircle(targetsValue, enterNodeValue) { 20961 var _this2 = this; 20962 const $$ = this, 20963 config = $$.config, 20964 data = $$.data, 20965 $el = $$.$el, 20966 selectionEnabled = config.interaction_enabled && config.data_selection_enabled, 20967 isSelectable = selectionEnabled && config.data_selection_isselectable, 20968 classCircles = $$.getClass("circles", !0); 20969 if (!config.point_show) { 20970 return; 20971 } 20972 $el.circle || $$.initCircle(); 20973 let targets = targetsValue, 20974 enterNode = enterNodeValue; 20975 // only for scatter & bubble type should generate seprate <g> node 20976 if (!targets) { 20977 targets = data.targets.filter(function (d) { 20978 _newArrowCheck(this, _this2); 20979 return this.isScatterType(d) || this.isBubbleType(d); 20980 }.bind(this)); 20981 const mainCircle = $el.main.select("." + $CIRCLE.chartCircles).style("pointer-events", "none").selectAll("." + $CIRCLE.circles).data(targets); 20982 mainCircle.exit().remove(); 20983 enterNode = mainCircle.enter(); 20984 } 20985 20986 // Circles for each data point on lines 20987 selectionEnabled && enterNode.append("g").attr("class", function (d) { 20988 _newArrowCheck(this, _this2); 20989 return $$.generateClass($SELECT.selectedCircles, d.id); 20990 }.bind(this)); 20991 enterNode.append("g").attr("class", classCircles).call(function (selection) { 20992 _newArrowCheck(this, _this2); 20993 $$.setCssRule(!0, "." + $CIRCLE.circles, ["cursor:pointer"], isSelectable)(selection); 20994 $$.setCssRule(!0, " ." + $CIRCLE.circle, ["fill", "stroke"], $$.color)(selection); 20995 }.bind(this)).style("opacity", function () { 20996 const parent = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this.parentNode); 20997 20998 // if the parent node is .bb-chart-circles (bubble, scatter), initialize <g bb-circles> with opacity "0" 20999 return parent.attr("class").indexOf($CIRCLE.chartCircles) > -1 ? "0" : null; 21000 }); 21001 21002 // Update date for selected circles 21003 selectionEnabled && targets.forEach(function (t) { 21004 var _this3 = this; 21005 _newArrowCheck(this, _this2); 21006 $el.main.selectAll("." + $SELECT.selectedCircles + $$.getTargetSelectorSuffix(t.id)).selectAll("" + $SELECT.selectedCircle).each(function (d) { 21007 _newArrowCheck(this, _this3); 21008 d.value = t.values[d.index].value; 21009 }.bind(this)); 21010 }.bind(this)); 21011 }, 21012 updateCircle: function updateCircle(isSub) { 21013 var _this4 = this; 21014 if (isSub === void 0) { 21015 isSub = !1; 21016 } 21017 const $$ = this, 21018 config = $$.config, 21019 state = $$.state, 21020 $el = $$.$el, 21021 focusOnly = $$.isPointFocusOnly(), 21022 $root = isSub ? $el.subchart : $el; 21023 if (config.point_show && !state.toggling) { 21024 config.point_radialGradient && $$.updateLinearGradient(); 21025 const circles = $root.main.selectAll("." + $CIRCLE.circles).selectAll("." + $CIRCLE.circle).data(function (d) { 21026 _newArrowCheck(this, _this4); 21027 return $$.isLineType(d) && $$.shouldDrawPointsForLine(d) || $$.isBubbleType(d) || $$.isRadarType(d) || $$.isScatterType(d) ? focusOnly ? [d.values[0]] : d.values : []; 21028 }.bind(this)); 21029 circles.exit().remove(); 21030 circles.enter().filter(Boolean).append($$.point("create", this, $$.pointR.bind($$), $$.updateCircleColor.bind($$))); 21031 $root.circle = $root.main.selectAll("." + $CIRCLE.circles + " ." + $CIRCLE.circle).style("stroke", $$.getStylePropValue($$.color)).style("opacity", $$.initialOpacityForCircle.bind($$)); 21032 } 21033 }, 21034 /** 21035 * Update circle color 21036 * @param {object} d Data object 21037 * @returns {string} Color string 21038 * @private 21039 */ 21040 updateCircleColor: function updateCircleColor(d) { 21041 const $$ = this, 21042 fn = $$.getStylePropValue($$.color); 21043 return $$.config.point_radialGradient ? $$.getGradienColortUrl(d.id) : fn ? fn(d) : null; 21044 }, 21045 redrawCircle: function redrawCircle(cx, cy, withTransition, flow, isSub) { 21046 if (isSub === void 0) { 21047 isSub = !1; 21048 } 21049 const $$ = this, 21050 rendered = $$.state.rendered, 21051 $el = $$.$el, 21052 $T = $$.$T, 21053 $root = isSub ? $el.subchart : $el, 21054 selectedCircles = $root.main.selectAll("." + $SELECT.selectedCircle); 21055 if (!$$.config.point_show) { 21056 return []; 21057 } 21058 const fn = $$.point("update", $$, cx, cy, $$.updateCircleColor.bind($$), withTransition, flow, selectedCircles), 21059 posAttr = $$.isCirclePoint() ? "c" : "", 21060 t = getRandom(), 21061 opacityStyleFn = $$.opacityForCircle.bind($$), 21062 mainCircles = []; 21063 $root.circle.each(function (d) { 21064 let result = fn.bind(this)(d); 21065 result = $T(result, withTransition || !rendered, t).style("opacity", opacityStyleFn); 21066 mainCircles.push(result); 21067 }); 21068 return [mainCircles, $T(selectedCircles, withTransition).attr(posAttr + "x", cx).attr(posAttr + "y", cy)]; 21069 }, 21070 /** 21071 * Show focused data point circle 21072 * @param {object} d Selected data 21073 * @private 21074 */ 21075 showCircleFocus: function showCircleFocus(d) { 21076 const $$ = this, 21077 _$$$state = $$.state, 21078 hasRadar = _$$$state.hasRadar, 21079 resizing = _$$$state.resizing, 21080 toggling = _$$$state.toggling, 21081 transiting = _$$$state.transiting, 21082 $el = $$.$el;
21083 let circle = $el.circle; 21084 if (transiting === !1 && circle && $$.isPointFocusOnly()) { 21085 const cx = (hasRadar ? $$.radarCircleX : $$.circleX).bind($$), 21086 cy = (hasRadar ? $$.radarCircleY : $$.circleY).bind($$), 21087 withTransition = toggling || isUndefined(d), 21088 fn = $$.point("update", $$, cx, cy, $$.getStylePropValue($$.color), resizing ? !1 : withTransition); 21089 if (d) { 21090 circle = circle.filter(function (t) { 21091 var _this5 = this; 21092 const data = d.filter == null ? void 0 : d.filter(function (v) { 21093 _newArrowCheck(this, _this5); 21094 return v.id === t.id; 21095 }.bind(this)); 21096 return data.length ? (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).datum(data[0]) : !1; 21097 }); 21098 } 21099 circle.attr("class", this.updatePointClass.bind(this)).style("opacity", null).each(function (d) { 21100 const id = d.id, 21101 index = d.index, 21102 value = d.value; 21103 let visibility = "hidden"; 21104 if (isValue(value)) { 21105 fn.bind(this)(d); 21106 $$.expandCircles(index, id); 21107 visibility = ""; 21108 } 21109 this.style.visibility = visibility; 21110 }); 21111 } 21112 }, 21113 /** 21114 * Hide focused data point circle 21115 * @private 21116 */ 21117 hideCircleFocus: function hideCircleFocus() { 21118 const $$ = this, 21119 circle = $$.$el.circle; 21120 if ($$.isPointFocusOnly() && circle) { 21121 $$.unexpandCircles(); 21122 circle.style("visibility", "hidden"); 21123 } 21124 }, 21125 circleX: function circleX(d) { 21126 return this.xx(d); 21127 }, 21128 updateCircleY: function updateCircleY(isSub) { 21129 var _this6 = this; 21130 if (isSub === void 0) { 21131 isSub = !1; 21132 } 21133 const $$ = this, 21134 getPoints = $$.generateGetLinePoints($$.getShapeIndices($$.isLineType), isSub); 21135 return function (d, i) { 21136 _newArrowCheck(this, _this6); 21137 const id = d.id; 21138 return $$.isGrouped(id) ? getPoints(d, i)[0][1] : $$.getYScaleById(id, isSub)($$.getBaseValue(d)); 21139 }.bind(this); 21140 }, 21141 expandCircles: function expandCircles(i, id, reset) { 21142 const $$ = this, 21143 r = $$.pointExpandedR.bind($$); 21144 reset && $$.unexpandCircles(); 21145 const circles = $$.getShapeByIndex("circle", i, id).classed($COMMON.EXPANDED, !0), 21146 scale = r(circles) / $$.config.point_r, 21147 ratio = 1 - scale; 21148 if ($$.isCirclePoint()) { 21149 circles.attr("r", r); 21150 } else { 21151 // transform must be applied to each node individually 21152 circles.each(function () { 21153 const point = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 21154 if (this.tagName === "circle") { 21155 point.attr("r", r); 21156 } else { 21157 const _this$getBBox = this.getBBox(), 21158 width = _this$getBBox.width, 21159 height = _this$getBBox.height, 21160 x = ratio * (+point.attr("x") + width / 2), 21161 y = ratio * (+point.attr("y") + height / 2); 21162 point.attr("transform", "translate(" + x + " " + y + ") scale(" + scale + ")"); 21163 } 21164 }); 21165 } 21166 }, 21167 unexpandCircles: function unexpandCircles(i) { 21168 const $$ = this, 21169 r = $$.pointR.bind($$), 21170 circles = $$.getShapeByIndex("circle", i).filter(function () { 21171 return (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($COMMON.EXPANDED); 21172 }).classed($COMMON.EXPANDED, !1); 21173 circles.attr("r", r); 21174 if (!$$.isCirclePoint()) { 21175 const scale = r(circles) / $$.config.point_r; 21176 circles.attr("transform", scale !== 1 ? "scale(" + scale + ")" : null); 21177 } 21178 }, 21179 pointR: function (d) { 21180 const $$ = this, 21181 config = $$.config, 21182 pointR = config.point_r; 21183 let r = pointR; 21184 if ($$.isBubbleType(d)) { 21185 r = $$.getBubbleR(d); 21186 } else if (isFunction(pointR)) { 21187 r = pointR.bind($$.api)(d); 21188 } 21189 d.r = r; 21190 return r; 21191 }, 21192 pointExpandedR: function pointExpandedR(d) { 21193 const $$ = this, 21194 config = $$.config, 21195 scale = $$.isBubbleType(d) ? 1.15 : 1.75; 21196 return config.point_focus_expand_enabled ? config.point_focus_expand_r || $$.pointR(d) * scale : $$.pointR(d); 21197 }, 21198 pointSelectR: function pointSelectR(d) { 21199 const $$ = this, 21200 selectR = $$.config.point_select_r; 21201 return isFunction(selectR) ? selectR(d) : selectR || $$.pointR(d) * 4; 21202 }, 21203 /** 21204 * Check if point.focus.only option can be applied. 21205 * @returns {boolean} 21206 * @private 21207 */
21208 isPointFocusOnly: function isPointFocusOnly() { 21209 const $$ = this; 21210 return $$.config.point_focus_only && !$$.hasType("bubble") && !$$.hasType("scatter") && !$$.hasArcType(null, ["radar"]); 21211 }, 21212 isWithinCircle: function isWithinCircle(node, r) { 21213 const config = this.config, 21214 state = this.state, 21215 mouse = getPointer(state.event, node), 21216 element = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(node), 21217 prefix = this.isCirclePoint(node) ? "c" : "", 21218 sensitivity = config.point_sensitivity === "radius" ? node.getAttribute("r") : config.point_sensitivity; 21219 let cx = +element.attr(prefix + "x"), 21220 cy = +element.attr(prefix + "y"); 21221 // if node don't have cx/y or x/y attribute value 21222 if (!(cx || cy) && node.nodeType === 1) { 21223 const _getBoundingRect = getBoundingRect(node), 21224 x = _getBoundingRect.x, 21225 y = _getBoundingRect.y; 21226 cx = x; 21227 cy = y; 21228 } 21229 return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < (r || sensitivity); 21230 }, 21231 /** 21232 * Get data point sensitivity radius 21233 * @param {object} d Data point object 21234 * @returns {number} return the sensitivity value 21235 */ 21236 getPointSensitivity: function getPointSensitivity(d) { 21237 const $$ = this; 21238 let sensitivity = $$.config.point_sensitivity; 21239 if (isFunction(sensitivity)) { 21240 sensitivity = sensitivity.call($$.api, d); 21241 } else if (sensitivity === "radius") { 21242 sensitivity = d.r; 21243 } 21244 return sensitivity; 21245 }, 21246 insertPointInfoDefs: function insertPointInfoDefs(point, id) { 21247 var _this7 = this, 21248 _node$childNodes; 21249 const $$ = this, 21250 copyAttr = function (from, target) { 21251 _newArrowCheck(this, _this7); 21252 const attribs = from.attributes; 21253 for (let i = 0, name; name = attribs[i]; i++) { 21254 name = name.name; 21255 target.setAttribute(name, from.getAttribute(name)); 21256 } 21257 }.bind(this), 21258 doc = new DOMParser().parseFromString(point, "image/svg+xml"), 21259 node = doc.documentElement, 21260 clone = browser_doc.createElementNS(external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.namespaces.svg, node.nodeName.toLowerCase()); 21261 clone.id = id; 21262 clone.style.fill = "inherit"; 21263 clone.style.stroke = "inherit"; 21264 copyAttr(node, clone); 21265 if ((_node$childNodes = node.childNodes) != null && _node$childNodes.length) { 21266 const parent = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(clone); 21267 if ("innerHTML" in clone) { 21268 parent.html(node.innerHTML); 21269 } else { 21270 toArray(node.childNodes).forEach(function (v) { 21271 _newArrowCheck(this, _this7); 21272 copyAttr(v, parent.append(v.tagName).node()); 21273 }.bind(this)); 21274 } 21275 } 21276 $$.$el.defs.node().appendChild(clone); 21277 }, 21278 pointFromDefs: function pointFromDefs(id) { 21279 return this.$el.defs.select("#" + id); 21280 }, 21281 updatePointClass: function updatePointClass(d) { 21282 const $$ = this, 21283 circle = $$.$el.circle; 21284 let pointClass = !1; 21285 if (isObject(d) || circle) { 21286 pointClass = d === !0 ? circle.each(function (d) { 21287 let className = $$.getClass("circle", !0)(d); 21288 if (this.getAttribute("class").indexOf($COMMON.EXPANDED) > -1) { 21289 className += " " + $COMMON.EXPANDED; 21290 } 21291 this.setAttribute("class", className); 21292 }) : $$.getClass("circle", !0)(d); 21293 } 21294 return pointClass; 21295 }, 21296 generateGetLinePoints: function generateGetLinePoints(lineIndices, isSub) { 21297 var _this8 = this; 21298 // partial duplication of generateGetBarPoints 21299 const $$ = this, 21300 config = $$.config, 21301 x = $$.getShapeX(0, lineIndices, isSub), 21302 y = $$.getShapeY(isSub), 21303 lineOffset = $$.getShapeOffset($$.isLineType, lineIndices, isSub), 21304 yScale = $$.getYScaleById.bind($$); 21305 return function (d, i) { 21306 _newArrowCheck(this, _this8); 21307 const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id)), 21308 offset = lineOffset(d, i) || y0, 21309 posX = x(d); // offset is for stacked area chart 21310 let posY = y(d); 21311 21312 // fix posY not to overflow opposite quadrant 21313 if (config.axis_rotated && (d.value > 0 && posY < y0 || d.value < 0 && y0 < posY)) { 21314 posY = y0; 21315 } 21316 21317 // 1 point that marks the line position 21318 const point = [posX, posY - (y0 - offset)]; 21319 return [point, point,
21320 // from here and below, needed for compatibility 21321 point, point]; 21322 }.bind(this); 21323 }, 21324 generatePoint: function generatePoint() { 21325 const $$ = this, 21326 config = $$.config, 21327 datetimeId = $$.state.datetimeId, 21328 ids = [], 21329 pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type]; 21330 return function (method, context) { 21331 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { 21332 args[_key - 2] = arguments[_key]; 21333 } 21334 return function (d) { 21335 var _d$data; 21336 const id = $$.getTargetSelectorSuffix(d.id || ((_d$data = d.data) == null ? void 0 : _d$data.id) || d), 21337 element = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 21338 ids.indexOf(id) < 0 && ids.push(id); 21339 let point = pattern[ids.indexOf(id) % pattern.length]; 21340 if ($$.hasValidPointType(point)) { 21341 point = $$[point]; 21342 } else if (!$$.hasValidPointDrawMethods(point)) { 21343 const pointId = datetimeId + "-point" + id, 21344 pointFromDefs = $$.pointFromDefs(pointId); 21345 if (pointFromDefs.size() < 1) { 21346 $$.insertPointInfoDefs(point, pointId); 21347 } 21348 if (method === "create") { 21349 return $$.custom.create.bind(context).apply(void 0, [element, pointId].concat(args)); 21350 } else if (method === "update") { 21351 return $$.custom.update.bind(context).apply(void 0, [element].concat(args)); 21352 } 21353 } 21354 return point[method].bind(context).apply(void 0, [element].concat(args)); 21355 }; 21356 }; 21357 }, 21358 custom: { 21359 create: function create(element, id, fillStyleFn) { 21360 return element.append("use").attr("xlink:href", "#" + id).attr("class", this.updatePointClass.bind(this)).style("fill", fillStyleFn).node(); 21361 }, 21362 update: function update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) { 21363 var _this9 = this; 21364 const $$ = this, 21365 _element$node$getBBox = element.node().getBBox(), 21366 width = _element$node$getBBox.width, 21367 height = _element$node$getBBox.height, 21368 xPosFn2 = function (d) { 21369 _newArrowCheck(this, _this9); 21370 return isValue(d.value) ? xPosFn(d) - width / 2 : 0; 21371 }.bind(this), 21372 yPosFn2 = function (d) { 21373 _newArrowCheck(this, _this9); 21374 return isValue(d.value) ? yPosFn(d) - height / 2 : 0; 21375 }.bind(this); 21376 let mainCircles = element; 21377 if (withTransition) { 21378 flow && mainCircles.attr("x", xPosFn2); 21379 mainCircles = $$.$T(mainCircles, withTransition, getTransitionName()); 21380 selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName()); 21381 } 21382 return mainCircles.attr("x", xPosFn2).attr("y", yPosFn2).style("fill", fillStyleFn); 21383 } 21384 }, 21385 // 'circle' data point 21386 circle: { 21387 create: function create(element, sizeFn, fillStyleFn) { 21388 return element.append("circle").attr("class", this.updatePointClass.bind(this)).attr("r", sizeFn).style("fill", fillStyleFn).node(); 21389 }, 21390 update: function update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) { 21391 const $$ = this; 21392 let mainCircles = element; 21393 21394 // when '.load()' called, bubble size should be updated 21395 if ($$.hasType("bubble")) { 21396 mainCircles.attr("r", $$.pointR.bind($$)); 21397 } 21398 if (withTransition) { 21399 flow && mainCircles.attr("cx", xPosFn); 21400 if (mainCircles.attr("cx")) { 21401 mainCircles = $$.$T(mainCircles, withTransition, getTransitionName()); 21402 } 21403 selectedCircles && $$.$T(mainCircles, withTransition, getTransitionName()); 21404 } 21405 return mainCircles.attr("cx", xPosFn).attr("cy", yPosFn).style("fill", fillStyleFn); 21406 } 21407 }, 21408 // 'rectangle' data point 21409 rectangle: { 21410 create: function create(element, sizeFn, fillStyleFn) { 21411 var _this10 = this; 21412 const rectSizeFn = function (d) { 21413 _newArrowCheck(this, _this10); 21414 return sizeFn(d) * 2; 21415 }.bind(this); 21416 return element.append("rect").attr("class", this.updatePointClass.bind(this)).attr("width", rectSizeFn).attr("height", rectSizeFn).style("fill", fillStyleFn).node(); 21417 }, 21418 update: function update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) { 21419 var _this11 = this; 21420 const $$ = this, 21421 r = $$.config.point_r, 21422 rectXPosFn = function (d) { 21423 _newArrowCheck(this, _this11); 21424 return xPosFn(d) - r; 21425 }.bind(this), 21426 rectYPosFn = function (d) { 21427 _newArrowCheck(this, _this11); 21428 return yPosFn(d) - r; 21429 }.bind(this); 21430 let mainCircles = element; 21431 if (withTransition) { 21432 flow && mainCircles.attr("x", rectXPosFn); 21433 mainCircles = $$.$T(mainCircles, withTransition, getTransitionName()); 21434 selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName()); 21435 } 21436 return mainCircles.attr("x", rectXPosFn).attr("y", rectYPosFn).style("fill", fillStyleFn); 21437 } 21438 } 21439}); 21440;// CONCATENATED MODULE: ./src/ChartInternal/shape/polar.ts 21441 21442/** 21443 * Copyright (c) 2017 ~ present NAVER Corp. 21444 * billboard.js project is licensed under the MIT license 21445 */ 21446 21447 21448/** 21449 * Get data max value 21450 * @param {object} $$ ChartInternal instance 21451 * @returns {number} max value 21452 * @private 21453 */ 21454function getDataMax($$) { 21455 const levelMax = $$.config.polar_level_max; 21456 let dataMax = $$.getMinMaxData().max[0].value; 21457 21458 // Apply level max only when is greater than the data max value 21459 if (levelMax && levelMax > dataMax) { 21460 dataMax = levelMax; 21461 } 21462 return dataMax; 21463} 21464/* harmony default export */ var polar = ({ 21465 /** 21466 * Initialize polar 21467 * @private 21468 */ 21469 initPolar: function initPolar() { 21470 const $$ = this, 21471 arcs = $$.$el.arcs, 21472 config = $$.config, 21473 levelTextShow = config.polar_level_text_show, 21474 levelTextBgColor = config.polar_level_text_backgroundColor; 21475 // append <g> for level 21476 arcs.levels = arcs.append("g").attr("class", $LEVEL.levels); 21477 21478 // set level text background color 21479 if (levelTextShow && levelTextBgColor) {
21480 $$.generateDataLabelBackgroundColorFilter(levelTextBgColor); 21481 } 21482 }, 21483 /** 21484 * Get polar outer radius according to the data value 21485 * @param {object} d Data object 21486 * @param {numbet} outerRadius Outer radius 21487 * @returns {number} outer radius 21488 * @private 21489 */ 21490 getPolarOuterRadius: function getPolarOuterRadius(d, outerRadius) { 21491 var _d$data$values$0$valu; 21492 const dataMax = getDataMax(this); 21493 return ((_d$data$values$0$valu = d == null ? void 0 : d.data.values[0].value) != null ? _d$data$values$0$valu : 0) / dataMax * outerRadius; 21494 }, 21495 /** 21496 * Update polar based on given data array 21497 * @param {object} targets Data object 21498 * @private 21499 */ 21500 updateTargetsForPolar: function updateTargetsForPolar(targets) { 21501 // borrow from Arc 21502 this.updateTargetsForArc(targets); 21503 }, 21504 /** 21505 * Called whenever redraw happens 21506 * @private 21507 */ 21508 redrawPolar: function redrawPolar() { 21509 const $$ = this, 21510 config = $$.config; 21511 config.polar_level_show && $$.updatePolarLevel(); 21512 }, 21513 /** 21514 * Update polar level circle 21515 * @private 21516 */ 21517 updatePolarLevel: function updatePolarLevel() { 21518 var _this = this; 21519 const $$ = this, 21520 config = $$.config, 21521 state = $$.state, 21522 levels = $$.$el.arcs.levels, 21523 depth = config.polar_level_depth, 21524 dataMax = getDataMax($$), 21525 levelData = getRange(0, depth), 21526 outerRadius = state.radius, 21527 levelRatio = levelData.map(function (l) { 21528 _newArrowCheck(this, _this); 21529 return outerRadius * ((l + 1) / depth); 21530 }.bind(this)), 21531 levelTextFormat = (config.polar_level_text_format || function () {}).bind($$.api), 21532 level = levels.selectAll("." + $LEVEL.level).data(levelData); 21533 level.exit().remove(); 21534 const levelEnter = level.enter().append("g").attr("class", function (d, i) { 21535 _newArrowCheck(this, _this); 21536 return $LEVEL.level + " " + $LEVEL.level + "-" + i; 21537 }.bind(this)); 21538 21539 // cx, cy, translate: Set center as origin (0,0) so that it can share same center with arcs 21540 levelEnter.append("circle"); 21541 levelEnter.merge(level).selectAll("circle").style("visibility", config.polar_level_show ? null : "hidden").attr("cx", 0).attr("cy", 0).attr("r", function (d) { 21542 _newArrowCheck(this, _this); 21543 return levelRatio[d]; 21544 }.bind(this)); 21545 if (config.polar_level_text_show) { 21546 const levelTextBackgroundColor = config.polar_level_text_backgroundColor, 21547 defsId = "#" + state.datetimeId + "-labels-bg" + $$.getTargetSelectorSuffix(levelTextBackgroundColor); 21548 levelEnter.append("text").style("text-anchor", "middle"); 21549 levelEnter.merge(level).selectAll("text").attr("dy", function (d) { 21550 _newArrowCheck(this, _this); 21551 return -levelRatio[d] + 5; 21552 }.bind(this)).attr("filter", levelTextBackgroundColor ? "url(" + defsId + ")" : null).text(function (d) { 21553 _newArrowCheck(this, _this); 21554 return levelTextFormat(dataMax / levelData.length * (d + 1)); 21555 }.bind(this)); 21556 } 21557 } 21558}); 21559;// CONCATENATED MODULE: ./src/ChartInternal/shape/radar.ts 21560 21561/** 21562 * Copyright (c) 2017 ~ present NAVER Corp. 21563 * billboard.js project is licensed under the MIT license 21564 */ 21565 21566 21567 21568 21569 21570/** 21571 * Get the position value 21572 * @param {boolean} isClockwise If the direction is clockwise 21573 * @param {string} type Coordinate type 'x' or 'y' 21574 * @param {number} edge Number of edge 21575 * @param {number} pos The indexed position 21576 * @param {number} range Range value 21577 * @param {number} ratio Ratio value 21578 * @returns {number} 21579 * @private 21580 */ 21581function getPosition(isClockwise, type, edge, pos, range, ratio) { 21582 const index = isClockwise && pos > 0 ? edge - pos : pos, 21583 r = 2 * Math.PI, 21584 func = type === "x" ? Math.sin : Math.cos; 21585 return range * (1 - ratio * func(index * r / edge)); 21586} 21587 21588// cache key 21589const cacheKey = KEY.radarPoints; 21590/* harmony default export */ var radar = ({ 21591 initRadar: function initRadar() { 21592 const $$ = this, 21593 config = $$.config, 21594 current = $$.state.current, 21595 $el = $$.$el; 21596 if ($$.hasType("radar")) { 21597 $el.radar = $el.main.select("." + $COMMON.chart).append("g").attr("class", $RADAR.chartRadars); 21598 21599 // level 21600 $el.radar.levels = $el.radar.append("g").attr("class", $LEVEL.levels); 21601 21602 // axis 21603 $el.radar.axes = $el.radar.append("g").attr("class", $AXIS.axis); 21604 21605 // shapes 21606 $el.radar.shapes = $el.radar.append("g").attr("class", $SHAPE.shapes); 21607 current.dataMax = config.radar_axis_max || $$.getMinMaxData().max[0].value; 21608 } 21609 }, 21610 getRadarSize: function getRadarSize() { 21611 const $$ = this, 21612 config = $$.config, 21613 _$$$state = $$.state, 21614 arcWidth = _$$$state.arcWidth, 21615 arcHeight = _$$$state.arcHeight, 21616 padding = config.axis_x_categories.length < 4 ? -20 : 10, 21617 size = (Math.min(arcWidth, arcHeight) - padding) / 2; 21618 return [size, size]; 21619 }, 21620 updateTargetsForRadar: function updateTargetsForRadar(targets) { 21621 var _this = this; 21622 const $$ = this, 21623 config = $$.config; 21624 if (isEmpty(config.axis_x_categories)) { 21625 config.axis_x_categories = getRange(0, getMinMax("max", targets.map(function (v) { 21626 _newArrowCheck(this, _this); 21627 return v.values.length; 21628 }.bind(this)))); 21629 } 21630 $$.generateRadarPoints(); 21631 }, 21632 getRadarPosition: function getRadarPosition(type, index, range, ratio) { 21633 var _this2 = this; 21634 const $$ = this, 21635 config = $$.config, 21636 _$$$getRadarSize = $$.getRadarSize(), 21637 width = _$$$getRadarSize[0], 21638 height = _$$$getRadarSize[1], 21639 edge = config.axis_x_categories.length, 21640 isClockwise = config.radar_direction_clockwise, 21641 pos = toArray(type).map(function (v) { 21642 _newArrowCheck(this, _this2); 21643 return getPosition(isClockwise, v, edge, index, isDefined(range) ? range : type === "x" ? width : height, isNumber(ratio) ? ratio : config.radar_size_ratio); 21644 }.bind(this)); 21645 return pos.length === 1 ? pos[0] : pos; 21646 }, 21647 /** 21648 * Generate data points 21649 * @private 21650 */ 21651 generateRadarPoints: function generateRadarPoints() { 21652 var _this3 = this; 21653 const $$ = this, 21654 targets = $$.data.targets, 21655 _$$$getRadarSize2 = $$.getRadarSize(), 21656 width = _$$$getRadarSize2[0], 21657 height = _$$$getRadarSize2[1], 21658 points = $$.cache.get(cacheKey) || {}, 21659 size = points._size; 21660 // recalculate position only when the previous dimension has been changed 21661 if (!size || size.width !== width && size.height !== height) {
21662 targets.forEach(function (d) { 21663 var _this4 = this; 21664 _newArrowCheck(this, _this3); 21665 points[d.id] = d.values.map(function (v, i) { 21666 _newArrowCheck(this, _this4); 21667 return $$.getRadarPosition(["x", "y"], i, undefined, $$.getRatio("radar", v)); 21668 }.bind(this)); 21669 }.bind(this)); 21670 points._size = { 21671 width: width, 21672 height: height 21673 }; 21674 $$.cache.add(cacheKey, points); 21675 } 21676 }, 21677 redrawRadar: function redrawRadar() { 21678 const $$ = this, 21679 _$$$$el = $$.$el, 21680 radar = _$$$$el.radar, 21681 main = _$$$$el.main, 21682 translate = $$.getTranslate("radar"); 21683 // Adjust radar, circles and texts' position 21684 if (translate) { 21685 radar.attr("transform", translate); 21686 main.select("." + $TEXT.chartTexts).attr("transform", translate); 21687 $$.generateRadarPoints(); 21688 $$.updateRadarLevel(); 21689 $$.updateRadarAxes(); 21690 $$.updateRadarShape(); 21691 } 21692 }, 21693 generateGetRadarPoints: function generateGetRadarPoints() { 21694 var _this5 = this; 21695 const points = this.cache.get(cacheKey); 21696 return function (d, i) { 21697 _newArrowCheck(this, _this5); 21698 const point = points[d.id][i]; 21699 return [point, point, point, point]; 21700 }.bind(this); 21701 }, 21702 updateRadarLevel: function updateRadarLevel() { 21703 var _this6 = this; 21704 const $$ = this, 21705 config = $$.config, 21706 state = $$.state, 21707 radar = $$.$el.radar, 21708 _$$$getRadarSize3 = $$.getRadarSize(), 21709 width = _$$$getRadarSize3[0], 21710 height = _$$$getRadarSize3[1], 21711 depth = config.radar_level_depth, 21712 edge = config.axis_x_categories.length, 21713 showText = config.radar_level_text_show, 21714 radarLevels = radar.levels, 21715 levelData = getRange(0, depth), 21716 radius = config.radar_size_ratio * Math.min(width, height), 21717 levelRatio = levelData.map(function (l) { 21718 _newArrowCheck(this, _this6); 21719 return radius * ((l + 1) / depth); 21720 }.bind(this)), 21721 levelTextFormat = (config.radar_level_text_format || function () {}).bind($$.api), 21722 points = levelData.map(function (v) { 21723 var _this7 = this; 21724 _newArrowCheck(this, _this6); 21725 const range = levelRatio[v], 21726 pos = getRange(0, edge).map(function (i) { 21727 _newArrowCheck(this, _this7); 21728 return $$.getRadarPosition(["x", "y"], i, range, 1).join(","); 21729 }.bind(this)); 21730 return pos.join(" "); 21731 }.bind(this)), 21732 level = radarLevels.selectAll("." + $LEVEL.level).data(levelData); 21733 21734 // Generate points 21735 21736 level.exit().remove(); 21737 const levelEnter = level.enter().append("g").attr("class", function (d, i) { 21738 _newArrowCheck(this, _this6); 21739 return $LEVEL.level + " " + $LEVEL.level + "-" + i; 21740 }.bind(this)); 21741 levelEnter.append("polygon").style("visibility", config.radar_level_show ? null : "hidden"); 21742 if (showText) { 21743 if (radarLevels.select("text").empty()) { 21744 radarLevels.append("text").attr("dx", "-.5em").attr("dy", "-.7em").style("text-anchor", "end").text(function () { 21745 _newArrowCheck(this, _this6); 21746 return levelTextFormat(0); 21747 }.bind(this)); 21748 } 21749 levelEnter.append("text").attr("dx", "-.5em").style("text-anchor", "end").text(function (d) { 21750 _newArrowCheck(this, _this6); 21751 return levelTextFormat(state.current.dataMax / levelData.length * (d + 1)); 21752 }.bind(this)); 21753 } 21754 levelEnter.merge(level).attr("transform", function (d) { 21755 _newArrowCheck(this, _this6); 21756 return "translate(" + (width - levelRatio[d]) + ", " + (height - levelRatio[d]) + ")"; 21757 }.bind(this)).selectAll("polygon").attr("points", function (d) { 21758 _newArrowCheck(this, _this6); 21759 return points[d]; 21760 }.bind(this)); 21761 21762 // update level text position 21763 if (showText) { 21764 radarLevels.selectAll("text").attr("x", function (d) { 21765 _newArrowCheck(this, _this6); 21766 return isUndefined(d) ? width : points[d].split(",")[0]; 21767 }.bind(this)).attr("y", function (d) { 21768 _newArrowCheck(this, _this6); 21769 return isUndefined(d) ? height : 0; 21770 }.bind(this)); 21771 } 21772 }, 21773 updateRadarAxes: function updateRadarAxes() { 21774 var _this8 = this; 21775 const $$ = this, 21776 config = $$.config, 21777 radar = $$.$el.radar, 21778 _$$$getRadarSize4 = $$.getRadarSize(), 21779 width = _$$$getRadarSize4[0], 21780 height = _$$$getRadarSize4[1], 21781 categories = config.axis_x_categories; 21782 let axis = radar.axes.selectAll("g").data(categories); 21783 axis.exit().remove(); 21784 const axisEnter = axis.enter().append("g").attr("class", function (d, i) { 21785 _newArrowCheck(this, _this8); 21786 return $AXIS.axis + "-" + i; 21787 }.bind(this)); 21788 config.radar_axis_line_show && axisEnter.append("line"); 21789 config.radar_axis_text_show && axisEnter.append("text"); 21790 axis = axisEnter.merge(axis); 21791 21792 // axis line 21793 if (config.radar_axis_line_show) { 21794 axis.select("line").attr("x1", width).attr("y1", height).attr("x2", function (d, i) { 21795 _newArrowCheck(this, _this8); 21796 return $$.getRadarPosition("x", i); 21797 }.bind(this)).attr("y2", function (d, i) { 21798 _newArrowCheck(this, _this8); 21799 return $$.getRadarPosition("y", i); 21800 }.bind(this)); 21801 } 21802 21803 // axis text 21804 if (config.radar_axis_text_show) { 21805 const _config$radar_axis_te = config.radar_axis_text_position, 21806 _config$radar_axis_te2 = _config$radar_axis_te.x,
21807 x = _config$radar_axis_te2 === void 0 ? 0 : _config$radar_axis_te2, 21808 _config$radar_axis_te3 = _config$radar_axis_te.y, 21809 y = _config$radar_axis_te3 === void 0 ? 0 : _config$radar_axis_te3; 21810 axis.select("text").style("text-anchor", "middle").attr("dy", ".5em").call(function (selection) { 21811 _newArrowCheck(this, _this8); 21812 selection.each(function (d) { 21813 setTextValue((0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), d + "", [-.6, 1.2]); 21814 }); 21815 }.bind(this)).datum(function (d, i) { 21816 _newArrowCheck(this, _this8); 21817 return { 21818 index: i 21819 }; 21820 }.bind(this)).attr("transform", function (d) { 21821 if (isUndefined(this.width)) { 21822 // cache evaluated axis text width 21823 this.width = this.getBoundingClientRect().width / 2; 21824 } 21825 let posX = $$.getRadarPosition("x", d.index, undefined, 1), 21826 posY = Math.round($$.getRadarPosition("y", d.index, undefined, 1)); 21827 if (posX > width) { 21828 posX += this.width + x; 21829 } else if (Math.round(posX) < width) { 21830 posX -= this.width + x; 21831 } 21832 if (posY > height) { 21833 // update vertical centered edge axis text dy position 21834 if (posY / 2 === height && this.firstChild.tagName === "tspan") { 21835 this.firstChild.setAttribute("dy", "0em"); 21836 } 21837 posY += y; 21838 } else if (posY < height) { 21839 posY -= y; 21840 } 21841 return "translate(" + posX + " " + posY + ")"; 21842 }); 21843 } 21844 $$.bindRadarEvent(); 21845 }, 21846 bindRadarEvent: function bindRadarEvent() { 21847 var _this9 = this; 21848 const $$ = this, 21849 config = $$.config, 21850 state = $$.state, 21851 _$$$$el2 = $$.$el, 21852 radar = _$$$$el2.radar, 21853 svg = _$$$$el2.svg, 21854 focusOnly = $$.isPointFocusOnly(), 21855 _state = state, 21856 inputType = _state.inputType, 21857 transiting = _state.transiting; 21858 if (config.interaction_enabled) { 21859 const isMouse = inputType === "mouse", 21860 hide = function (event) { 21861 _newArrowCheck(this, _this9); 21862 state.event = event; 21863 21864 // const index = getIndex(event); 21865 const index = $$.getDataIndexFromEvent(event), 21866 noIndex = isUndefined(index); 21867 if (isMouse || noIndex) { 21868 $$.hideTooltip(); 21869 focusOnly ? $$.hideCircleFocus() : $$.unexpandCircles(); 21870 if (isMouse) { 21871 $$.setOverOut(!1, index); 21872 } else if (noIndex) { 21873 $$.callOverOutForTouch(); 21874 } 21875 } 21876 }.bind(this); 21877 radar.axes.selectAll("text").on(isMouse ? "mouseover " : "touchstart", function (event) { 21878 _newArrowCheck(this, _this9); 21879 if (transiting) { 21880 // skip while transiting 21881 return; 21882 } 21883 state.event = event; 21884 const index = $$.getDataIndexFromEvent(event); 21885 $$.selectRectForSingle(svg.node(), index); 21886 isMouse ? $$.setOverOut(!0, index) : $$.callOverOutForTouch(index); 21887 }.bind(this)).on("mouseout", isMouse ? hide : null); 21888 if (!isMouse) { 21889 svg.on("touchstart", hide); 21890 } 21891 } 21892 }, 21893 updateRadarShape: function updateRadarShape() { 21894 var _this10 = this; 21895 const $$ = this, 21896 targets = $$.data.targets.filter(function (d) { 21897 _newArrowCheck(this, _this10); 21898 return $$.isRadarType(d); 21899 }.bind(this)), 21900 points = $$.cache.get(cacheKey), 21901 areas = $$.$el.radar.shapes.selectAll("polygon").data(targets), 21902 areasEnter = areas.enter().append("g").attr("class", $$.getChartClass("Radar")); 21903 $$.$T(areas.exit()).remove(); 21904 areasEnter.append("polygon").merge(areas).style("fill", $$.color).style("stroke", $$.color).attr("points", function (d) { 21905 _newArrowCheck(this, _this10); 21906 return points[d.id].join(" "); 21907 }.bind(this)); 21908 $$.updateTargetForCircle(targets, areasEnter); 21909 }, 21910 /** 21911 * Get data point x coordinate 21912 * @param {object} d Data object 21913 * @returns {number} 21914 * @private 21915 */ 21916 radarCircleX: function radarCircleX(d) { 21917 return this.cache.get(cacheKey)[d.id][d.index][0]; 21918 }, 21919 /** 21920 * Get data point y coordinate 21921 * @param {object} d Data object 21922 * @returns {number} 21923 * @private 21924 */ 21925 radarCircleY: function radarCircleY(d) { 21926 return this.cache.get(cacheKey)[d.id][d.index][1]; 21927 } 21928}); 21929// EXTERNAL MODULE: external {"commonjs":"d3-hierarchy","commonjs2":"d3-hierarchy","amd":"d3-hierarchy","root":"d3"} 21930var external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_ = __webpack_require__(13); 21931;// CONCATENATED MODULE: ./src/ChartInternal/shape/treemap.ts 21932 21933function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: !0 }; return { done: !1, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 21934function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } 21935function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } 21936/** 21937 * Copyright (c) 2017 ~ present NAVER Corp. 21938 * billboard.js project is licensed under the MIT license 21939 */ 21940 21941 21942 21943 21944/** 21945 * Get treemap elements' position 21946 * @param {d3Selection} group Root selection 21947 * @param {object} root Root data 21948 * @private 21949 */ 21950function position(group, root) { 21951 var _this = this; 21952 const $$ = this, 21953 _$$$scale = $$.scale, 21954 x = _$$$scale.x, 21955 y = _$$$scale.y, 21956 width = $$.state.width; 21957 group.selectAll("g").attr("transform", function (d) { 21958 _newArrowCheck(this, _this); 21959 return "translate(" + (d === root ? "0,0" : x(d.x0) + "," + y(d.y0)) + ")"; 21960 }.bind(this)).select("rect").attr("width", function (d) { 21961 _newArrowCheck(this, _this); 21962 return d === root ? width : x(d.x1) - x(d.x0); 21963 }.bind(this)).attr("height", function (d) { 21964 _newArrowCheck(this, _this); 21965 return d === root ? 0 : y(d.y1) - y(d.y0); 21966 }.bind(this)); 21967} 21968 21969/** 21970 * Convert data for treemap hierarchy 21971 * @param {object} data Data object 21972 * @returns {Array} Array of data for treemap hierarchy 21973 * @private 21974 */ 21975function convertDataToTreemapData(data) { 21976 var _this2 = this; 21977 const $$ = this; 21978 return data.map(function (d) { 21979 _newArrowCheck(this, _this2); 21980 const id = d.id, 21981 values = d.values, 21982 value = values[0].value; 21983 return { 21984 name: id, 21985 id: id, 21986 // needed to keep compatibility on whole code logic 21987 value: value, 21988 ratio: $$.getRatio("treemap", values[0]) 21989 }; 21990 }.bind(this)); 21991} 21992/* harmony default export */ var treemap = ({ 21993 initTreemap: function initTreemap() { 21994 var _this3 = this; 21995 const $$ = this, 21996 $el = $$.$el, 21997 _$$$state = $$.state, 21998 _$$$state$current = _$$$state.current, 21999 width = _$$$state$current.width, 22000 height = _$$$state$current.height, 22001 clip = _$$$state.clip, 22002 datetimeId = _$$$state.datetimeId; 22003 clip.id = datetimeId + "-clip"; 22004 $$.treemap = (0,external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemap)().tile($$.getTreemapTile()); 22005 $$.treemapFn = function (data) { 22006 var _this4 = this; 22007 _newArrowCheck(this, _this3); 22008 const hierarchyData = (0,external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.hierarchy)(data).sum(function (d) { 22009 _newArrowCheck(this, _this4); 22010 return d.value; 22011 }.bind(this)), 22012 sortFn = $$.getSortCompareFn(!0); 22013 return $$.treemap(sortFn ? hierarchyData.sort(sortFn) : hierarchyData); 22014 }.bind(this); 22015 $el.defs.append("clipPath").attr("id", clip.id).append("rect").attr("width", width).attr("height", height); 22016 $el.treemap = $el.main.select("." + $COMMON.chart).attr("clip-path", "url(#" + clip.id + ")").append("g").classed($TREEMAP.chartTreemaps, !0); 22017 $$.bindTreemapEvent(); 22018 }, 22019 /** 22020 * Bind events 22021 * @private 22022 */ 22023 bindTreemapEvent: function bindTreemapEvent() { 22024 var _this5 = this; 22025 const $$ = this, 22026 $el = $$.$el, 22027 config = $$.config, 22028 state = $$.state, 22029 getTarget = function (event) { 22030 var _state$eventReceiver$, _data; 22031 _newArrowCheck(this, _this5); 22032 const target = event.isTrusted ? event.target : (_state$eventReceiver$ = state.eventReceiver.rect) == null ? void 0 : _state$eventReceiver$.node(); 22033 let data; 22034 if (/^rect$/i.test(target.tagName)) { 22035 state.event = event; 22036 data = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(target).datum(); 22037 } 22038 return (_data = data) == null ? void 0 : _data.data; 22039 }.bind(this); 22040 if (config.interaction_enabled) { 22041 const isTouch = state.inputType === "touch"; 22042 $el.treemap.on(isTouch ? "touchstart" : "mouseover mousemove", function (event) { 22043 _newArrowCheck(this, _this5); 22044 const data = getTarget(event); 22045 if (data) { 22046 $$.showTooltip([data], event.currentTarget); 22047 /^(touchstart|mouseover)$/.test(event.type) && $$.setOverOut(!0, data); 22048 } 22049 }.bind(this)).on(isTouch ? "touchend" : "mouseout", function (event) { 22050 _newArrowCheck(this, _this5); 22051 const data = getTarget(event); 22052 $$.hideTooltip(); 22053 $$.setOverOut(!1, data); 22054 }.bind(this)); 22055 } 22056 }, 22057 /** 22058 * Get tiling function 22059 * @returns {Function} 22060 * @private 22061 */ 22062 getTreemapTile: function getTreemapTile() { 22063 var _binary$dice$slice$sl, 22064 _config$treemap_tile, 22065 _this6 = this; 22066 const $$ = this, 22067 config = $$.config, 22068 _$$$state$current2 = $$.state.current, 22069 width = _$$$state$current2.width, 22070 height = _$$$state$current2.height, 22071 tile = (_binary$dice$slice$sl = { 22072 "binary": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapBinary, 22073 "dice": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapDice, 22074 "slice": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapSlice, 22075 "sliceDice": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapSliceDice, 22076 "squarify": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapSquarify, 22077 "resquarify": external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapResquarify 22078 }[(_config$treemap_tile = config.treemap_tile) != null ? _config$treemap_tile : "binary"]) != null ? _binary$dice$slice$sl : external_commonjs_d3_hierarchy_commonjs2_d3_hierarchy_amd_d3_hierarchy_root_d3_.treemapBinary; 22079 return function (node, x0, y0, x1, y1) { 22080 _newArrowCheck(this, _this6); 22081 tile(node, 0, 0, width, height); 22082 for (var _iterator = _createForOfIteratorHelperLoose(node.children), _step; !(_step = _iterator()).done;) { 22083 const child = _step.value; 22084 child.x0 = x0 + child.x0 / width * (x1 - x0); 22085 child.x1 = x0 + child.x1 / width * (x1 - x0); 22086 child.y0 = y0 + child.y0 / height * (y1 - y0); 22087 child.y1 = y0 + child.y1 / height * (y1 - y0); 22088 } 22089 }.bind(this); 22090 }, 22091 /** 22092 * Get treemap hierarchy data 22093 * @param {Array} targets Data targets 22094 * @returns {object} 22095 * @private 22096 */ 22097 getTreemapData: function getTreemapData(targets) { 22098 const $$ = this; 22099 return { 22100 name: "root", 22101 children: convertDataToTreemapData.bind($$)($$.filterTargetsToShow(targets.filter($$.isTreemapType, $$))) 22102 }; 22103 }, 22104 /** 22105 * Update treemap data 22106 * @param {Array} targets Data targets 22107 * @private 22108 */ 22109 updateTargetsForTreemap: function updateTargetsForTreemap(targets) { 22110 const $$ = this, 22111 treemap = $$.$el.treemap, 22112 treemapData = $$.treemapFn($$.getTreemapData(targets != null ? targets : $$.data.targets)); 22113 // using $el.treemap reference can alter data, so select treemap <g> again 22114 treemap.data(treemapData); 22115 }, 22116 /** 22117 * Render treemap 22118 * @param {number} durationForExit Duration for exit transition 22119 * @private 22120 */ 22121 updateTreemap: function updateTreemap(durationForExit) { 22122 var _this7 = this; 22123 const $$ = this, 22124 $el = $$.$el, 22125 $T = $$.$T,
22126 data = $el.treemap.datum(), 22127 classChartTreemap = $$.getChartClass("Treemap"), 22128 treemap = $el.treemap.selectAll("g").data(data.children); 22129 $T(treemap.exit(), durationForExit).style("opacity", "0").remove(); 22130 treemap.enter().append("g").append("rect"); 22131 $el.treemap.selectAll("g").attr("class", classChartTreemap).select("rect").attr("fill", function (d) { 22132 _newArrowCheck(this, _this7); 22133 return $$.color(d.data.name); 22134 }.bind(this)); 22135 }, 22136 /** 22137 * Generate treemap coordinate points data 22138 * @returns {Array} Array of coordinate points 22139 * @private 22140 */ 22141 generateGetTreemapPoints: function generateGetTreemapPoints() { 22142 var _this8 = this; 22143 const $$ = this, 22144 $el = $$.$el, 22145 _$$$scale2 = $$.scale, 22146 x = _$$$scale2.x, 22147 y = _$$$scale2.y, 22148 points = {}; 22149 $el.treemap.selectAll("g").each(function (d) { 22150 _newArrowCheck(this, _this8); 22151 points[d.data.name] = [[x(d.x0), y(d.y0)], [x(d.x1), y(d.y1)]]; 22152 }.bind(this)); 22153 return function (d) { 22154 _newArrowCheck(this, _this8); 22155 return points[d.id]; 22156 }.bind(this); 22157 }, 22158 /** 22159 * Redraw treemap 22160 * @param {boolean} withTransition With or without transition 22161 * @returns {Array} Selections 22162 * @private 22163 */ 22164 redrawTreemap: function redrawTreemap(withTransition) { 22165 const $$ = this, 22166 $el = $$.$el, 22167 _$$$state$current3 = $$.state.current, 22168 width = _$$$state$current3.width, 22169 height = _$$$state$current3.height; 22170 // update defs 22171 $el.defs.select("rect").attr("width", width).attr("height", height); 22172 return [$$.$T($el.treemap, withTransition, getRandom()).call(position.bind($$), $el.treemap.datum())]; 22173 }, 22174 /** 22175 * Get treemap data label format function 22176 * @param {object} d Data object 22177 * @returns {Function} 22178 * @private 22179 */ 22180 treemapDataLabelFormat: function treemapDataLabelFormat(d) { 22181 const $$ = this, 22182 config = $$.config, 22183 id = d.id, 22184 value = d.value, 22185 format = config.treemap_label_format, 22186 ratio = $$.getRatio("treemap", d), 22187 percentValue = (ratio * 100).toFixed(2), 22188 meetLabelThreshold = config.treemap_label_show && $$.meetsLabelThreshold(ratio, "treemap") ? null : "0"; 22189 return function (node) { 22190 node.style("opacity", meetLabelThreshold); 22191 return isFunction(format) ? format.bind($$.api)(value, ratio, id) : id + "\n" + percentValue + "%"; 22192 }; 22193 } 22194}); 22195;// CONCATENATED MODULE: ./src/config/Options/common/point.ts 22196/** 22197 * Copyright (c) 2017 ~ present NAVER Corp. 22198 * billboard.js project is licensed under the MIT license 22199 */ 22200 22201/** 22202 * point config options 22203 */ 22204/* harmony default export */ var common_point = ({ 22205 /** 22206 * Set point options 22207 * @name point 22208 * @memberof Options 22209 * @type {object} 22210 * @property {object} point Point object 22211 * @property {boolean} [point.show=true] Whether to show each point in line. 22212 * @property {number|Function} [point.r=2.5] The radius size of each point. 22213 * - **NOTE:** Disabled for 'bubble' type 22214 * @property {boolean|object} [point.radialGradient=false] Set the radial gradient on point.<br><br> 22215 * Or customize by giving below object value: 22216 * - cx {number}: `cx` value (default: `0.3`) 22217 * - cy {number}: `cy` value (default: `0.3`) 22218 * - r {number}: `r` value (default: `0.7`) 22219 * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values. 22220 * - (default: `[[0.1, $DATA_COLOR, 1], [0.9, $DATA_COLOR, 0]]`) 22221 * @property {boolean} [point.focus.expand.enabled=true] Whether to expand each point on focus. 22222 * @property {number} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus. 22223 * - **NOTE:** For 'bubble' type, the default is `bubbleSize*1.15` 22224 * @property {boolean} [point.focus.only=false] Show point only when is focused. 22225 * @property {number|null} [point.opacity=undefined] Set point opacity value. 22226 * - **NOTE:** 22227 * - `null` will make to not set inline 'opacity' css prop. 22228 * - when no value(or undefined) is set, it defaults to set opacity value according its chart types. 22229 * @property {number|string|Function} [point.sensitivity=10] The senstivity value for interaction boundary. 22230 * - **Available Values:** 22231 * - {number}: Absolute sensitivity value which is the distance from the data point in pixel.
22232 * - "radius": sensitivity based on point's radius 22233 * - Function: callback for each point to determine the sensitivity<br> 22234 * ```js 22235 * sensitivity: function(d) { 22236 * // ex. of argument d: 22237 * // ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296} 22238 * 22239 * // returning d.r, will make sensitivity same as point's radius value. 22240 * return d.r; 22241 * } 22242 * ``` 22243 * @property {number} [point.select.r=point.r*4] The radius size of each point on selected. 22244 * @property {string} [point.type="circle"] The type of point to be drawn 22245 * - **NOTE:** 22246 * - If chart has 'bubble' type, only circle can be used. 22247 * - For IE, non circle point expansions are not supported due to lack of transform support. 22248 * - **Available Values:** 22249 * - circle 22250 * - rectangle 22251 * @property {Array} [point.pattern=[]] The type of point or svg shape as string, to be drawn for each line 22252 * - **NOTE:** 22253 * - This is an `experimental` feature and can have some unexpected behaviors. 22254 * - If chart has 'bubble' type, only circle can be used. 22255 * - For IE, non circle point expansions are not supported due to lack of transform support. 22256 * - **Available Values:** 22257 * - circle 22258 * - rectangle 22259 * - svg shape tag interpreted as string<br> 22260 * (ex. `<polygon points='2.5 0 0 5 5 5'></polygon>`) 22261 * @see [Demo: point type](https://naver.github.io/billboard.js/demo/#Point.RectanglePoints) 22262 * @see [Demo: point focus only](https://naver.github.io/billboard.js/demo/#Point.FocusOnly) 22263 * @see [Demo: point radialGradient](https://naver.github.io/billboard.js/demo/#Point.RadialGradientPoint) 22264 * @see [Demo: point sensitivity](https://naver.github.io/billboard.js/demo/#Point.PointSensitivity) 22265 * @example 22266 * point: { 22267 * show: false, 22268 * r: 5, 22269 * 22270 * // or customize the radius 22271 * r: function(d) { 22272 * ... 22273 * return r; 22274 * }, 22275 * 22276 * // will generate follwing radialGradient: 22277 * // for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient 22278 * // <radualGradient cx="0.3" cy="0.3" r="0.7"> 22279 * // <stop offset="0.1" stop-color="$DATA_COLOR" stop-opacity="1"></stop> 22280 * // <stop offset="0.9" stop-color="$DATA_COLOR" stop-opacity="0"></stop> 22281 * // </radialrGradient> 22282 * radialGradient: true, 22283 * 22284 * // Or customized gradient 22285 * radialGradient: { 22286 * cx: 0.3, // cx attributes 22287 * cy: 0.5, // cy attributes 22288 * r: 0.7, // r attributes 22289 * stops: [ 22290 * // offset, stop-color, stop-opacity 22291 * [0, "#7cb5ec", 1], 22292 * 22293 * // setting 'null' for stop-color, will set its original data color 22294 * [0.5, null, 0], 22295 * 22296 * // setting 'function' for stop-color, will pass data id as argument. 22297 * // It should return color string or null value 22298 * [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0], 22299 * ] 22300 * }, 22301 * 22302 * focus: { 22303 * expand: { 22304 * enabled: true, 22305 * r: 1 22306 * }, 22307 * only: true 22308 * }, 22309 * 22310 * // do not set inline 'opacity' css prop setting 22311 * opacity: null, 22312 * 22313 * // set every data point's opacity value 22314 * opacity: 0.7, 22315 * 22316 * select: { 22317 * r: 3 22318 * }, 22319 * 22320 * // having lower value, means how closer to be for interaction 22321 * sensitivity: 3, 22322 * 22323 * // sensitivity based on point's radius 22324 * sensitivity: "radius", 22325 * 22326 * // callback for each point to determine the sensitivity 22327 * sensitivity: function(d) { 22328 * // ex. of argument d: 22329 * // ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296} 22330 * 22331 * // returning d.r, will make sensitivity same as point's radius value. 22332 * return d.r; 22333 * } 22334 * 22335 * // valid values are "circle" or "rectangle" 22336 * type: "rectangle", 22337 * 22338 * // or indicate as pattern 22339 * pattern: [ 22340 * "circle", 22341 * "rectangle", 22342 * "<polygon points='0 6 4 0 -4 0'></polygon>" 22343 * ], 22344 * } 22345 */ 22346 point_show: !0, 22347 point_r: 2.5, 22348 point_radialGradient: !1, 22349 point_sensitivity: 10, 22350 point_focus_expand_enabled: !0, 22351 point_focus_expand_r: undefined, 22352 point_focus_only: !1, 22353 point_opacity: undefined, 22354 point_pattern: [], 22355 point_select_r: undefined, 22356 point_type: "circle" 22357}); 22358;// CONCATENATED MODULE: ./src/config/Options/shape/area.ts 22359/** 22360 * Copyright (c) 2017 ~ present NAVER Corp. 22361 * billboard.js project is licensed under the MIT license 22362 */ 22363/** 22364 * area config options 22365 */ 22366/* harmony default export */ var Options_shape_area = ({ 22367 /** 22368 * Set area options 22369 * @name area 22370 * @memberof Options 22371 * @type {object} 22372 * @property {object} area Area object 22373 * @property {boolean} [area.above=false] Set background area `above` the data chart line. 22374 * @property {boolean} [area.below=false] Set background area `below` the data chart line. 22375 * - **NOTE**: Can't be used along with `above` option. When above & below options are set to true, `above` will be prioritized. 22376 * @property {boolean} [area.front=true] Set area node to be positioned over line node. 22377 * @property {boolean|object} [area.linearGradient=false] Set the linear gradient on area.<br><br> 22378 * Or customize by giving below object value: 22379 * - x {Array}: `x1`, `x2` value (default: `[0, 0]`) 22380 * - y {Array}: `y1`, `y2` value (default: `[0, 1]`) 22381 * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values. 22382 * - (default: `[[0, $DATA_COLOR, 1], [1, $DATA_COLOR, 0]]`) 22383 * @property {boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart. 22384 * @see [MDN's <linearGradient>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), [<stop>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) 22385 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.AreaChart) 22386 * @see [Demo: above](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Above) 22387 * @see [Demo: below](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Below) 22388 * @see [Demo: linearGradient](https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient) 22389 * @example 22390 * area: { 22391 * above: true, 22392 * below: false,
22393 * zerobased: false, 22394 * 22395 * // <g class='bb-areas'> will be positioned behind the line <g class='bb-lines'> in stacking order 22396 * front: false, 22397 * 22398 * // will generate follwing linearGradient: 22399 * // for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient 22400 * // <linearGradient x1="0" x2="0" y1="0" y2="1"> 22401 * // <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop> 22402 * // <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop> 22403 * // </linearGradient> 22404 * linearGradient: true, 22405 * 22406 * // Or customized gradient 22407 * linearGradient: { 22408 * x: [0, 0], // x1, x2 attributes 22409 * y: [0, 0], // y1, y2 attributes 22410 * stops: [ 22411 * // offset, stop-color, stop-opacity 22412 * [0, "#7cb5ec", 1], 22413 * 22414 * // setting 'null' for stop-color, will set its original data color 22415 * [0.5, null, 0], 22416 * 22417 * // setting 'function' for stop-color, will pass data id as argument. 22418 * // It should return color string or null value 22419 * [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0], 22420 * ] 22421 * } 22422 * } 22423 */ 22424 area_above: !1, 22425 area_below: !1, 22426 area_front: !0, 22427 area_linearGradient: !1, 22428 area_zerobased: !0 22429}); 22430;// CONCATENATED MODULE: ./src/config/Options/shape/bar.ts 22431/** 22432 * Copyright (c) 2017 ~ present NAVER Corp. 22433 * billboard.js project is licensed under the MIT license 22434 */ 22435/** 22436 * bar config options 22437 */ 22438/* harmony default export */ var shape_bar = ({ 22439 /** 22440 * Set bar options 22441 * @name bar 22442 * @memberof Options 22443 * @type {object} 22444 * @property {object} bar Bar object 22445 * @property {boolean} [bar.front=false] Set 'bar' to be positioned over(on the top) other shapes elements. 22446 * @property {number} [bar.indices.removeNull=false] Remove nullish data on bar indices positions. 22447 * @property {number} [bar.label.threshold=0] Set threshold ratio to show/hide labels. 22448 * @property {boolean|object} [bar.linearGradient=false] Set the linear gradient on bar.<br><br> 22449 * Or customize by giving below object value: 22450 * - x {Array}: `x1`, `x2` value (default: `[0, 0]`) 22451 * - y {Array}: `y1`, `y2` value (default: `[0, 1]`) 22452 * - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values. 22453 * - (default: `[[0, $DATA_COLOR, 1], [1, $DATA_COLOR, 0]]`) 22454 * @property {boolean} [bar.overlap=false] Bars will be rendered at same position, which will be overlapped each other. (for non-grouped bars only) 22455 * @property {number} [bar.padding=0] The padding pixel value between each bar. 22456 * @property {number} [bar.radius] Set the radius of bar edge in pixel. 22457 * @property {number} [bar.radius.ratio] Set the radius ratio of bar edge in relative the bar's width. 22458 * @property {number} [bar.sensitivity=2] The senstivity offset value for interaction boundary. 22459 * @property {number} [bar.width] Change the width of bar chart. 22460 * @property {number} [bar.width.ratio=0.6] Change the width of bar chart by ratio. 22461 * @property {number} [bar.width.max] The maximum width value for ratio. 22462 * @property {number} [bar.width.dataname] Change the width of bar for indicated dataset only. 22463 * - **NOTE:** 22464 * - Works only for non-stacked bar 22465 * - Bars are centered accoding its total width value 22466 * @property {number} [bar.width.dataname.ratio=0.6] Change the width of bar chart by ratio. 22467 * @property {number} [bar.width.dataname.max] The maximum width value for ratio. 22468 * @property {boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart. 22469 * @see [Demo: bar front](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarFront) 22470 * @see [Demo: bar indices](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarIndices) 22471 * @see [Demo: bar overlap](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarOverlap) 22472 * @see [Demo: bar padding](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarPadding) 22473 * @see [Demo: bar radius](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarRadius) 22474 * @see [Demo: bar width](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth) 22475 * @see [Demo: bar width variant](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant) 22476 * @example 22477 * bar: { 22478 * // make bar shape to be positioned over the other shape elements 22479 * front: true, 22480 * 22481 * // remove nullish data on bar indices postions 22482 * indices: { 22483 * removeNull: true 22484 * }, 22485 * 22486 * // will generate follwing linearGradient: 22487 * // for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient 22488 * // <linearGradient x1="0" x2="0" y1="0" y2="1"> 22489 * // <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop> 22490 * // <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop> 22491 * // </linearGradient> 22492 * linearGradient: true, 22493 * 22494 * // Or customized gradient 22495 * linearGradient: { 22496 * x: [0, 0], // x1, x2 attributes 22497 * y: [0, 0], // y1, y2 attributes 22498 * stops: [ 22499 * // offset, stop-color, stop-opacity 22500 * [0, "#7cb5ec", 1], 22501 * 22502 * // setting 'null' for stop-color, will set its original data color 22503 * [0.5, null, 0], 22504 * 22505 * // setting 'function' for stop-color, will pass data id as argument. 22506 * // It should return color string or null value 22507 * [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0], 22508 * ] 22509 * }, 22510 * 22511 * // remove nullish da 22512 * overlap: true, 22513 * 22514 * padding: 1, 22515 * 22516 * // bar radius 22517 * radius: 10, 22518 * // or 22519 * radius: { 22520 * ratio: 0.5 22521 * } 22522 * 22523 * label: { 22524 * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the y Axis domain range value. 22525 * // if data value is below than 0.1, text label will be hidden. 22526 * threshold: 0.1, 22527 * }, 22528 * 22529 * // will not have offset between each bar elements for interaction 22530 * sensitivity: 0, 22531 * 22532 * width: 10, 22533 * 22534 * // or 22535 * width: { 22536 * ratio: 0.2, 22537 * max: 20 22538 * }, 22539 * 22540 * // or specify width per dataset 22541 * width: { 22542 * data1: 20, 22543 * data2: { 22544 * ratio: 0.2, 22545 * max: 20 22546 * } 22547 * }, 22548 *
22549 * zerobased: false 22550 * } 22551 */ 22552 bar_front: !1, 22553 bar_indices_removeNull: !1, 22554 bar_label_threshold: 0, 22555 bar_linearGradient: !1, 22556 bar_overlap: !1, 22557 bar_padding: 0, 22558 bar_radius: undefined, 22559 bar_radius_ratio: undefined, 22560 bar_sensitivity: 2, 22561 bar_width: undefined, 22562 bar_width_ratio: .6, 22563 bar_width_max: undefined, 22564 bar_zerobased: !0 22565}); 22566;// CONCATENATED MODULE: ./src/config/Options/shape/bubble.ts 22567/** 22568 * Copyright (c) 2017 ~ present NAVER Corp. 22569 * billboard.js project is licensed under the MIT license 22570 */ 22571/** 22572 * bubble config options 22573 */ 22574/* harmony default export */ var shape_bubble = ({ 22575 /** 22576 * Set bubble options 22577 * @name bubble 22578 * @memberof Options 22579 * @type {object} 22580 * @property {object} bubble bubble object 22581 * @property {number|Function} [bubble.maxR=35] Set the max bubble radius value 22582 * @property {boolean} [bubble.zerobased=false] Set if min or max value will be 0 on bubble chart. 22583 * @example 22584 * bubble: { 22585 * // ex) If 100 is the highest value among data bound, the representation bubble of 100 will have radius of 50. 22586 * // And the lesser will have radius relatively from tha max value. 22587 * maxR: 50, 22588 * 22589 * // or set radius callback 22590 * maxR: function(d) { 22591 * // ex. of d param - {x: Fri Oct 06 2017 00:00:00 GMT+0900, value: 80, id: "data2", index: 5} 22592 * ... 22593 * return Math.sqrt(d.value * 2); 22594 * },
22595 * zerobased: false 22596 * } 22597 */ 22598 bubble_maxR: 35, 22599 bubble_zerobased: !1 22600}); 22601;// CONCATENATED MODULE: ./src/config/Options/shape/candlestick.ts 22602/** 22603 * Copyright (c) 2017 ~ present NAVER Corp. 22604 * billboard.js project is licensed under the MIT license 22605 */ 22606/** 22607 * candlestick config options 22608 */ 22609/* harmony default export */ var shape_candlestick = ({ 22610 /** 22611 * Set candlestick options 22612 * @name candlestick 22613 * @memberof Options 22614 * @type {object} 22615 * @property {object} candlestick Candlestick object 22616 * @property {number} [candlestick.width] Change the width. 22617 * @property {number} [candlestick.width.ratio=0.6] Change the width by ratio. 22618 * @property {number} [candlestick.width.max] The maximum width value for ratio. 22619 * @property {number} [candlestick.width.dataname] Change the width for indicated dataset only. 22620 * @property {number} [candlestick.width.dataname.ratio=0.6] Change the width of bar chart by ratio. 22621 * @property {number} [candlestick.width.dataname.max] The maximum width value for ratio. 22622 * @property {object} [candlestick.color] Color setting. 22623 * @property {string|object} [candlestick.color.down] Change down(bearish) value color. 22624 * @property {string} [candlestick.color.down.dataname] Change down value color for indicated dataset only. 22625 * 22626 * @see [Demo](https://naver.github.io/billboard.js/demo/##Chart.CandlestickChart) 22627 * @example 22628 * candlestick: { 22629 * width: 10, 22630 * 22631 * // or 22632 * width: { 22633 * ratio: 0.2, 22634 * max: 20 22635 * }, 22636 * 22637 * // or specify width per dataset 22638 * width: { 22639 * data1: 20, 22640 * data2: { 22641 * ratio: 0.2, 22642 * max: 20 22643 * } 22644 * }, 22645 * color: { 22646 * // spcify bearish color 22647 * down: "red", 22648 * 22649 * // or specify color per dataset 22650 * down: { 22651 * data1: "red", 22652 * data2: "blue", 22653 * } 22654 * } 22655 * } 22656 */ 22657 candlestick_width: undefined, 22658 candlestick_width_ratio: .6, 22659 candlestick_width_max: undefined, 22660 candlestick_color_down: "red" 22661}); 22662;// CONCATENATED MODULE: ./src/config/Options/shape/line.ts 22663/** 22664 * Copyright (c) 2017 ~ present NAVER Corp. 22665 * billboard.js project is licensed under the MIT license 22666 */ 22667/** 22668 * line config options 22669 */ 22670/* harmony default export */ var shape_line = ({ 22671 /** 22672 * Set line options 22673 * @name line 22674 * @memberof Options 22675 * @type {object} 22676 * @property {object} line Line object 22677 * @property {boolean} [line.connectNull=false] Set if null data point will be connected or not.<br> 22678 * 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. 22679 * @property {Array} [line.classes=undefined] If set, used to set a css class on each line. 22680 * @property {boolean} [line.step.type=step] Change step type for step chart.<br> 22681 * **Available values:** 22682 * - step 22683 * - step-before 22684 * - step-after 22685 * @property {boolean} [line.step.tooltipMatch=false] Set to `true` for `step-before` and `step-after` types to have cursor/tooltip match to hovered step's point instead of nearest point. 22686 * @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. 22687 * @property {boolean} [line.zerobased=false] Set if min or max value will be 0 on line chart. 22688 * @example 22689 * line: { 22690 * connectNull: true, 22691 * classes: [ 22692 * "line-class1", 22693 * "line-class2" 22694 * ], 22695 * step: { 22696 * type: "step-after", 22697 * 22698 * // to have cursor/tooltip match to hovered step's point instead of nearest point. 22699 * tooltipMatch: true 22700 * }, 22701 * 22702 * // hide all data points ('point.show=false' also has similar effect) 22703 * point: false, 22704 * 22705 * // show data points for only indicated datas 22706 * point: [ 22707 * "data1", "data3" 22708 * ], 22709 *
22710 * zerobased: false 22711 * } 22712 */ 22713 line_connectNull: !1, 22714 line_step_type: "step", 22715 line_step_tooltipMatch: !1, 22716 line_zerobased: !1, 22717 line_classes: undefined, 22718 line_point: !0 22719}); 22720;// CONCATENATED MODULE: ./src/config/Options/shape/scatter.ts 22721/** 22722 * Copyright (c) 2017 ~ present NAVER Corp. 22723 * billboard.js project is licensed under the MIT license 22724 */ 22725/** 22726 * scatter config options 22727 */ 22728/* harmony default export */ var scatter = ({ 22729 /** 22730 * Set scatter options 22731 * @name scatter 22732 * @memberof Options 22733 * @type {object} 22734 * @property {object} [scatter] scatter object 22735 * @property {boolean} [scatter.zerobased=false] Set if min or max value will be 0 on scatter chart. 22736 * @example 22737 * scatter: { 22738 * connectNull: true, 22739 * step: { 22740 * type: "step-after" 22741 * }, 22742 * 22743 * // hide all data points ('point.show=false' also has similar effect) 22744 * point: false, 22745 * 22746 * // show data points for only indicated datas 22747 * point: [ 22748 * "data1", "data3" 22749 * ], 22750 *
22751 * zerobased: false 22752 * } 22753 */ 22754 scatter_zerobased: !1 22755}); 22756;// CONCATENATED MODULE: ./src/config/Options/shape/spline.ts 22757/** 22758 * Copyright (c) 2017 ~ present NAVER Corp. 22759 * billboard.js project is licensed under the MIT license 22760 */ 22761/** 22762 * spline config options 22763 */ 22764/* harmony default export */ var spline = ({ 22765 /** 22766 * Set spline options 22767 * - **Available interpolation type values:** 22768 * - basis (d3.curveBasis) 22769 * - basis-closed (d3.curveBasisClosed) 22770 * - basis-open (d3.curveBasisOpen) 22771 * - bundle (d3.curveBundle) 22772 * - cardinal (d3.curveCardinal) 22773 * - cardinal-closed (d3.curveCardinalClosed) 22774 * - cardinal-open (d3.curveCardinalOpen) 22775 * - catmull-rom (d3.curveCatmullRom) 22776 * - catmull-rom-closed (d3.curveCatmullRomClosed) 22777 * - catmull-rom-open (d3.curveCatmullRomOpen) 22778 * - monotone-x (d3.curveMonotoneX) 22779 * - monotone-y (d3.curveMonotoneY) 22780 * - natural (d3.curveNatural) 22781 * - linear-closed (d3.curveLinearClosed) 22782 * - linear (d3.curveLinear) 22783 * - step (d3.curveStep) 22784 * - step-after (d3.curveStepAfter) 22785 * - step-before (d3.curveStepBefore) 22786 * @name spline 22787 * @memberof Options 22788 * @type {object} 22789 * @property {object} spline Spline object 22790 * @property {object} spline.interpolation Spline interpolation object 22791 * @property {string} [spline.interpolation.type="cardinal"] Interpolation type 22792 * @see [Interpolation (d3 v4)](http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502) 22793 * @example 22794 * spline: { 22795 * interpolation: { 22796 * type: "cardinal" 22797 * } 22798 * } 22799 */ 22800 spline_interpolation_type: "cardinal" 22801}); 22802;// CONCATENATED MODULE: ./src/config/Options/shape/arc.ts 22803/** 22804 * Copyright (c) 2017 ~ present NAVER Corp. 22805 * billboard.js project is licensed under the MIT license 22806 */ 22807/** 22808 * arc config options 22809 */ 22810/* harmony default export */ var shape_arc = ({ 22811 /** 22812 * Set arc options 22813 * @name arc 22814 * @memberof Options 22815 * @type {object} 22816 * @property {object} arc Arc object 22817 * @property {number|Function} [arc.cornerRadius=0] Set corner radius of Arc(donut/gauge/pie/polar) shape. 22818 * - **NOTE:** 22819 * - Corner radius can't surpass the `(outerRadius - innerRadius) /2` of indicated shape. 22820 * @property {number} [arc.cornerRadius.ratio=0] Set ratio relative of outer radius. 22821 * @property {object} [arc.needle] Set needle options. 22822 * @property {boolean} [arc.needle.show=false] Show or hide needle. 22823 * @property {string} [arc.needle.color] Set needle filled color. 22824 * @property {Function} [arc.needle.path] Set custom needle path function. 22825 * - **NOTE:** 22826 * - The path should be starting from 0,0 (which is center) to top center coordinate. 22827 * - The function will receive, `length`{number} parameter which indicating the needle length in pixel relative to radius. 22828 * @property {number} [arc.needle.value] Set needle value. 22829 * - **NOTE:** 22830 * - For single gauge chart, needle will point the data value by default, otherwise will point 0(zero). 22831 * @property {number} [arc.needle.length=100] Set needle length in percentages relative to radius. 22832 * @property {object} [arc.needle.top] Set needle top options. 22833 * @property {number} [arc.needle.top.rx=0] Set needle top [rx radius value](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve). 22834 * @property {number} [arc.needle.top.ry=0] Set needle top [ry radius value](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve). 22835 * @property {number} [arc.needle.top.width=0] Set needle top width in pixel. 22836 * @property {object} [arc.needle.bottom] Set needle bottom options. 22837 * @property {number} [arc.needle.bottom.rx=1] Set needle bottom [rx radius value](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve). 22838 * @property {number} [arc.needle.bottom.ry=1] Set needle bottom [ry radius value](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve). 22839 * @property {number} [arc.needle.bottom.width=15] Set needle bottom width in pixel. 22840 * @property {number} [arc.needle.bottom.len=0] Set needle bottom length in pixel. Setting this value, will make bottom larger starting from center. 22841 * @see [Demo: Donut corner radius](https://naver.github.io/billboard.js/demo/#DonutChartOptions.DonutCornerRadius) 22842 * @see [Demo: Gauge corner radius](https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeCornerRadius) 22843 * @see [Demo: Donut corner radius](https://naver.github.io/billboard.js/demo/#PieChartOptions.CornerRadius) 22844 * @see [Demo: Donut needle](https://naver.github.io/billboard.js/demo/#DonutChartOptions.DonutNeedle) 22845 * @see [Demo: Gauge needle](https://naver.github.io/billboard.js/demo/##GaugeChartOptions.GaugeNeedle) 22846 * @example 22847 * arc: { 22848 * cornerRadius: 12, 22849 * 22850 * // can customize corner radius for each data with function callback 22851 * // 22852 * // The function will receive: 22853 * // - id {string}: Data id 22854 * // - value {number}: Data value 22855 * // - outerRadius {number}: Outer radius value 22856 * cornerRadius: function(id, value, outerRadius) { 22857 * return (id === "data1" && value > 10) ? 22858 * 50 : outerRadius * 1.2; 22859 * }, 22860 * 22861 * // set ratio relative of outer radius 22862 * cornerRadius: { 22863 * ratio: 0.5 22864 * }, 22865 * 22866 * needle: { 22867 * show: true, 22868 * color: "red", // any valid CSS color 22869 * path: function(length) { 22870 * const len = length - 20; 22871 * 22872 * // will return upper arrow shape path 22873 * // Note: The path should begun from '0,0' coordinate to top center. 22874 * const path = `M 0 -${len + 20} 22875 * L -12 -${len} 22876 * L -5 -${len} 22877 * L -5 0 22878 * A 1 1 0 0 0 5 0 22879 * L 5 -${len} 22880 * L 12 -${len} Z`; 22881 * 22882 * return path; 22883 * }, 22884 * value: 40, // will make needle to point value 40. 22885 * length: 80, // needle length in percentages relative to radius. 22886 * 22887 * top: { 22888 * // rx and ry are the two radii of the ellipse; 22889 * // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve 22890 * rx: 1, 22891 * ry: 1, 22892 * width: 5 22893 * }, 22894 * bottom: { 22895 * // rx and ry are the two radii of the ellipse; 22896 * // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve 22897 * rx: 1, 22898 * ry: 1, 22899 * width: 10 22900 * len: 10 22901 * } 22902 * } 22903 * } 22904 */ 22905 arc_cornerRadius: 0, 22906 arc_cornerRadius_ratio: 0, 22907 arc_needle_show: !1, 22908 arc_needle_color: undefined, 22909 arc_needle_value: undefined, 22910 arc_needle_path: undefined, 22911 arc_needle_length: 100, 22912 arc_needle_top_rx: 0, 22913 arc_needle_top_ry: 0, 22914 arc_needle_top_width: 0, 22915 arc_needle_bottom_rx: 1, 22916 arc_needle_bottom_ry: 1, 22917 arc_needle_bottom_width: 15, 22918 arc_needle_bottom_len: 0 22919}); 22920;// CONCATENATED MODULE: ./src/config/Options/shape/donut.ts 22921/** 22922 * Copyright (c) 2017 ~ present NAVER Corp. 22923 * billboard.js project is licensed under the MIT license 22924 */ 22925/** 22926 * donut config options 22927 */ 22928/* harmony default export */ var donut = ({ 22929 /** 22930 * Set donut options 22931 * @name donut 22932 * @memberof Options 22933 * @type {object} 22934 * @property {object} donut Donut object 22935 * @property {boolean} [donut.label.show=true] Show or hide label on each donut piece. 22936 * @property {Function} [donut.label.format] Set formatter for the label on each donut piece. 22937 * @property {number} [donut.label.threshold=0.05] Set threshold ratio to show/hide labels. 22938 * @property {number|Function} [donut.label.ratio=undefined] Set ratio of labels position. 22939 * @property {boolean} [donut.expand=true] Enable or disable expanding donut pieces. 22940 * @property {number} [donut.expand.rate=0.98] Set expand rate. 22941 * @property {number} [donut.expand.duration=50] Set expand transition time in ms. 22942 * @property {number} [donut.width] Set width of donut chart. 22943 * @property {string} [donut.title=""] Set title of donut chart. Use `\n` character for line break. 22944 * - **NOTE:** 22945 * - When `arc.needle.show=true` is set, special template `{=NEEDLE_VALUE}` can be used inside the title text to show current needle value. 22946 * @property {number} [donut.padAngle=0] Set padding between data. 22947 * @property {number} [donut.startingAngle=0] Set starting angle where data draws. 22948 * @example 22949 * donut: { 22950 * label: { 22951 * show: false, 22952 * format: function(value, ratio, id) { 22953 * return d3.format("$")(value); 22954 * 22955 * // to multiline, return with '\n' character 22956 * // return value +"%\nLine1\n2Line2"; 22957 * }, 22958 * 22959 * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value. 22960 * // if data value is below than 0.1, text label will be hidden. 22961 * threshold: 0.1, 22962 * 22963 * // set ratio callback. Should return ratio value 22964 * ratio: function(d, radius, h) { 22965 * ... 22966 * return ratio; 22967 * }, 22968 * // or set ratio number 22969 * ratio: 0.5 22970 * }, 22971 * 22972 * // disable expand transition for interaction 22973 * expand: false, 22974 * 22975 * expand: { 22976 * // set duration of expand transition to 500ms. 22977 * duration: 500, 22978 * 22979 * // set expand area rate 22980 * rate: 1 22981 * }, 22982 * 22983 * width: 10, 22984 * padAngle: 0.2, 22985 * startingAngle: 1, 22986 * title: "Donut Title" 22987 * 22988 * // when 'arc.needle.show=true' is set, can show current needle value. 22989 * title: "Needle value:\n{=NEEDLE_VALUE}", 22990 * 22991 * // title with line break 22992 * title: "Title1\nTitle2" 22993 * } 22994 */ 22995 donut_label_show: !0, 22996 donut_label_format: undefined, 22997 donut_label_threshold: .05, 22998 donut_label_ratio: undefined, 22999 donut_width: undefined, 23000 donut_title: "", 23001 donut_expand: {}, 23002 donut_expand_rate: .98, 23003 donut_expand_duration: 50, 23004 donut_padAngle: 0, 23005 donut_startingAngle: 0 23006}); 23007;// CONCATENATED MODULE: ./src/config/Options/shape/gauge.ts 23008/** 23009 * Copyright (c) 2017 ~ present NAVER Corp. 23010 * billboard.js project is licensed under the MIT license 23011 */ 23012/** 23013 * gauge config options 23014 */ 23015/* harmony default export */ var shape_gauge = ({ 23016 /** 23017 * Set gauge options 23018 * @name gauge 23019 * @memberof Options 23020 * @type {object} 23021 * @property {object} gauge Gauge object 23022 * @property {boolean} [gauge.background=""] Set background color. (The `.bb-chart-arcs-background` element) 23023 * @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. 23024 * @property {boolean} [gauge.label.show=true] Show or hide label on gauge. 23025 * @property {Function} [gauge.label.format] Set formatter for the label on gauge. Label text can be multilined with `\n` character.<br> 23026 * Will pass following arguments to the given function: 23027 * - value {number}: absolute value 23028 * - ratio {number}: value's ratio 23029 * - id {string}: data's id value 23030 * @property {Function} [gauge.label.extents] Set customized min/max label text. 23031 * @property {number} [gauge.label.threshold=0] Set threshold ratio to show/hide labels. 23032 * @property {boolean} [gauge.expand=true] Enable or disable expanding gauge. 23033 * @property {number} [gauge.expand.rate=0.98] Set expand rate. 23034 * @property {number} [gauge.expand.duration=50] Set the expand transition time in milliseconds. 23035 * @property {number} [gauge.min=0] Set min value of the gauge. 23036 * @property {number} [gauge.max=100] Set max value of the gauge. 23037 * @property {number} [gauge.startingAngle=-1 * Math.PI / 2] Set starting angle where data draws. 23038 * 23039 * **Limitations:** 23040 * - when `gauge.fullCircle=false`: 23041 * - -1 * Math.PI / 2 <= startingAngle <= Math.PI / 2 23042 * - `startingAngle <= -1 * Math.PI / 2` defaults to `-1 * Math.PI / 2` 23043 * - `startingAngle >= Math.PI / 2` defaults to `Math.PI / 2` 23044 * - when `gauge.fullCircle=true`: 23045 * - -1 * Math.PI < startingAngle < Math.PI 23046 * - `startingAngle < -1 * Math.PI` defaults to `Math.PI` 23047 * - `startingAngle > Math.PI` defaults to `Math.PI` 23048 * @property {number} [gauge.arcLength=100] Set the length of the arc to be drawn in percent from -100 to 100.<br> 23049 * Negative value will draw the arc **counterclockwise**. Need to be used in conjunction with `gauge.fullCircle=true`. 23050 * 23051 * **Limitations:** 23052 * - -100 <= arcLength (in percent) <= 100 23053 * - 'arcLength < -100' defaults to -100 23054 * - 'arcLength > 100' defaults to 100 23055 * @property {string} [gauge.title=""] Set title of gauge chart. Use `\n` character for line break. 23056 * - **NOTE:** 23057 * - When `arc.needle.show=true` is set, special template `{=NEEDLE_VALUE}` can be used inside the title text to show current needle value. 23058 * @property {string} [gauge.units] Set units of the gauge. 23059 * @property {number} [gauge.width] Set width of gauge chart. 23060 * @property {string} [gauge.type="single"] Set type of gauge to be displayed.<br><br> 23061 * **Available Values:** 23062 * - single 23063 * - multi 23064 * @property {number} [gauge.arcs.minWidth=5] Set minimal width of gauge arcs until the innerRadius disappears. 23065 * @see [Demo: archLength](https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeArcLength) 23066 * @see [Demo: startingAngle](https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeStartingAngle) 23067 * @example 23068 * gauge: { 23069 * background: "#eee", // will set 'fill' css prop for '.bb-chart-arcs-background' classed element. 23070 * fullCircle: false, 23071 * label: { 23072 * show: false, 23073 * format: function(value, ratio, id) { 23074 * return value; 23075 * 23076 * // to multiline, return with '\n' character 23077 * // return value +"%\nLine1\n2Line2"; 23078 * }, 23079 * 23080 * extents: function(value, isMax) { 23081 * return (isMax ? "Max:" : "Min:") + value; 23082 * }, 23083 * 23084 * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value. 23085 * // if data value is below than 0.1, text label will be hidden. 23086 * threshold: 0.1, 23087 * }, 23088 * 23089 * // disable expand transition for interaction 23090 * expand: false, 23091 * 23092 * expand: { 23093 * // set duration of expand transition to 500ms. 23094 * duration: 500, 23095 * 23096 * // set expand area rate 23097 * rate: 1 23098 * }, 23099 * 23100 * min: -100, 23101 * max: 200, 23102 * type: "single" // or 'multi' 23103 * title: "Title Text", 23104 * 23105 * // when 'arc.needle.show=true' is set, can show current needle value. 23106 * title: "Needle value:\n{=NEEDLE_VALUE}", 23107 * 23108 * units: "%", 23109 * width: 10, 23110 * startingAngle: -1 * Math.PI / 2, 23111 * arcLength: 100, 23112 * arcs: { 23113 * minWidth: 5 23114 * } 23115 * } 23116 */ 23117 gauge_background: "", 23118 gauge_fullCircle: !1, 23119 gauge_label_show: !0, 23120 gauge_label_format: undefined, 23121 gauge_label_extents: undefined, 23122 gauge_label_threshold: 0, 23123 gauge_min: 0, 23124 gauge_max: 100, 23125 gauge_type: "single", 23126 gauge_startingAngle: -1 * Math.PI / 2, 23127 gauge_arcLength: 100, 23128 gauge_title: "", 23129 gauge_units: undefined, 23130 gauge_width: undefined, 23131 gauge_arcs_minWidth: 5, 23132 gauge_expand: {}, 23133 gauge_expand_rate: .98, 23134 gauge_expand_duration: 50 23135}); 23136;// CONCATENATED MODULE: ./src/config/Options/shape/pie.ts 23137/** 23138 * Copyright (c) 2017 ~ present NAVER Corp. 23139 * billboard.js project is licensed under the MIT license 23140 */ 23141/** 23142 * pie config options 23143 */ 23144/* harmony default export */ var pie = ({ 23145 /** 23146 * Set pie options 23147 * @name pie 23148 * @memberof Options 23149 * @type {object} 23150 * @property {object} pie Pie object 23151 * @property {boolean} [pie.label.show=true] Show or hide label on each pie piece. 23152 * @property {Function} [pie.label.format] Set formatter for the label on each pie piece. 23153 * @property {number} [pie.label.threshold=0.05] Set threshold ratio to show/hide labels. 23154 * @property {number|Function} [pie.label.ratio=undefined] Set ratio of labels position. 23155 * @property {boolean|object} [
23155pie.expand=true] Enable or disable expanding pie pieces. 23156 * @property {number} [pie.expand.rate=0.98] Set expand rate. 23157 * @property {number} [pie.expand.duration=50] Set expand transition time in ms. 23158 * @property {number|object} [pie.innerRadius=0] Sets the inner radius of pie arc. 23159 * @property {number|object|undefined} [pie.outerRadius=undefined] Sets the outer radius of pie arc. 23160 * @property {number} [pie.padAngle=0] Set padding between data. 23161 * @property {number} [pie.padding=0] Sets the gap between pie arcs. 23162 * @property {number} [pie.startingAngle=0] Set starting angle where data draws. 23163 * @see [Demo: expand.rate](https://naver.github.io/billboard.js/demo/#PieChartOptions.ExpandRate) 23164 * @see [Demo: innerRadius](https://naver.github.io/billboard.js/demo/#PieChartOptions.InnerRadius) 23165 * @see [Demo: outerRadius](https://naver.github.io/billboard.js/demo/#PieChartOptions.OuterRadius) 23166 * @see [Demo: startingAngle](https://naver.github.io/billboard.js/demo/#PieChartOptions.StartingAngle) 23167 * @example 23168 * pie: { 23169 * label: { 23170 * show: false, 23171 * format: function(value, ratio, id) { 23172 * return d3.format("$")(value); 23173 * 23174 * // to multiline, return with '\n' character 23175 * // return value +"%\nLine1\n2Line2"; 23176 * }, 23177 * 23178 * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value. 23179 * // if data value is below than 0.1, text label will be hidden. 23180 * threshold: 0.1, 23181 * 23182 * // set ratio callback. Should return ratio value 23183 * ratio: function(d, radius, h) { 23184 * ... 23185 * return ratio; 23186 * }, 23187 * // or set ratio number 23188 * ratio: 0.5 23189 * }, 23190 * 23191 * // disable expand transition for interaction 23192 * expand: false, 23193 * 23194 * expand: { 23195 * // set duration of expand transition to 500ms. 23196 * duration: 500, 23197 * 23198 * // set expand area rate 23199 * rate: 1 23200 * }, 23201 * 23202 * innerRadius: 0, 23203 * 23204 * // set different innerRadius for each data 23205 * innerRadius: { 23206 * data1: 10, 23207 * data2: 0 23208 * }, 23209 * 23210 * outerRadius: 100, 23211 * 23212 * // set different outerRadius for each data 23213 * outerRadius: { 23214 * data1: 50, 23215 * data2: 100 23216 * } 23217 * 23218 * padAngle: 0.1, 23219 * padding: 0, 23220 * startingAngle: 1 23221 * } 23222 */ 23223 pie_label_show: !0, 23224 pie_label_format: undefined, 23225 pie_label_threshold: .05, 23226 pie_label_ratio: undefined, 23227 pie_expand: {}, 23228 pie_expand_rate: .98, 23229 pie_expand_duration: 50, 23230 pie_innerRadius: 0, 23231 pie_outerRadius: undefined, 23232 pie_padAngle: 0, 23233 pie_padding: 0, 23234 pie_startingAngle: 0 23235}); 23236;// CONCATENATED MODULE: ./src/config/Options/shape/polar.ts 23237 23238var polar_this = undefined; 23239/** 23240 * Copyright (c) 2017 ~ present NAVER Corp. 23241 * billboard.js project is licensed under the MIT license 23242 */ 23243/** 23244 * polar config options 23245 */ 23246/* harmony default export */ var shape_polar = ({ 23247 /** 23248 * Set polar options 23249 * @name polar 23250 * @memberof Options 23251 * @type {object} 23252 * @property {object} polar Polar object 23253 * @property {boolean} [polar.label.show=true] Show or hide label on each polar piece. 23254 * @property {Function} [polar.label.format] Set formatter for the label on each polar piece. 23255 * @property {number} [polar.label.threshold=0.05] Set threshold ratio to show/hide labels. 23256 * @property {number|Function} [polar.label.ratio=undefined] Set ratio of labels position. 23257 * @property {number} [polar.level.depth=3] Set the level depth. 23258 * @property {boolean} [polar.level.show=true] Show or hide level. 23259 * @property {string} [polar.level.text.backgroundColor="#fff"] Set label text's background color. 23260 * @property {Function} [polar.level.text.format] Set format function for the level value.<br>- Default value: `(x) => x % 1 === 0 ? x : x.toFixed(2)` 23261 * @property {boolean} [polar.level.text.show=true] Show or hide level text. 23262 * @property {number} [polar.padAngle=0] Set padding between data. 23263 * @property {number} [polar.padding=0] Sets the gap between pie arcs. 23264 * @property {number} [polar.startingAngle=0] Set starting angle where data draws. 23265 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.PolarChart) 23266 * @example 23267 * polar: { 23268 * label: { 23269 * show: false, 23270 * format: function(value, ratio, id) { 23271 * return d3.format("$")(value); 23272 * 23273 * // to multiline, return with '\n' character 23274 * // return value +"%\nLine1\n2Line2"; 23275 * }, 23276 * 23277 * // 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value. 23278 * // if data value is below than 0.1, text label will be hidden. 23279 * threshold: 0.1, 23280 * 23281 * // set ratio callback. Should return ratio value 23282 * ratio: function(d, radius, h) { 23283 * ... 23284 * return ratio; 23285 * }, 23286 * // or set ratio number 23287 * ratio: 0.5 23288 * }, 23289 * level: { 23290 * depth: 3, 23291 * max: 500, 23292 * show: true, 23293 * text: { 23294 * format: function(x) { 23295 * return x + "%"; 23296 * }, 23297 * show: true, 23298 * backgroundColor: "red" 23299 * } 23300 * }, 23301 * padAngle: 0.1, 23302 * padding: 0, 23303 * startingAngle: 1 23304 * } 23305 */ 23306 polar_label_show: !0, 23307 polar_label_format: undefined, 23308 polar_label_threshold: .05, 23309 polar_label_ratio: undefined, 23310 polar_level_depth: 3, 23311 polar_level_max: undefined, 23312 polar_level_show: !0, 23313 polar_level_text_backgroundColor: "#fff", 23314 polar_level_text_format: function polar_level_text_format(x) { 23315 _newArrowCheck(this, polar_this); 23316 return x % 1 === 0 ? x : x.toFixed(2); 23317 }.bind(undefined), 23318 polar_level_text_show: !0, 23319 polar_padAngle: 0, 23320 polar_padding: 0, 23321 polar_startingAngle: 0 23322}); 23323;// CONCATENATED MODULE: ./src/config/Options/shape/radar.ts 23324 23325var radar_this = undefined; 23326/** 23327 * Copyright (c) 2017 ~ present NAVER Corp. 23328 * billboard.js project is licensed under the MIT license 23329 */ 23330/** 23331 * radar config options 23332 */ 23333/* harmony default export */ var shape_radar = ({ 23334 /** 23335 * Set radar options 23336 * - **NOTE:** 23337 * > When x tick text contains `\n`, it's used as line break. 23338 * @name radar 23339 * @memberof Options 23340 * @type {object} 23341 * @property {object} radar Radar object 23342 * @property {number} [radar.axis.max=undefined] The max value of axis. If not given, it'll take the max value from the given data. 23343 * @property {boolean} [radar.axis.line.show=true] Show or hide axis line. 23344 * @property {number} [radar.axis.text.position.x=0] x coordinate position, relative the original. 23345 * @property {number} [radar.axis.text.position.y=0] y coordinate position, relative the original. 23346 * @property {boolean} [radar.axis.text.show=true] Show or hide axis text. 23347 * @property {boolean} [radar.direction.clockwise=false] Set the direction to be drawn. 23348 * @property {number} [radar.level.depth=3] Set the level depth. 23349 * @property {boolean} [radar.level.show=true] Show or hide level. 23350 * @property {Function} [radar.level.text.format] Set format function for the level value.<br>- Default value: `(x) => x % 1 === 0 ? x : x.toFixed(2)` 23351 * @property {boolean} [radar.level.text.show=true] Show or hide level text. 23352 * @property {number} [radar.size.ratio=0.87] Set size ratio. 23353 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.RadarChart) 23354 * @see [Demo: radar axis](https://naver.github.io/billboard.js/demo/#Rad
23354arChartOptions.RadarAxis) 23355 * @see [Demo: radar level](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel) 23356 * @see [Demo: radar size](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarSize) 23357 * @see [Demo: radar axis multiline](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxisMultiline) 23358 * @example 23359 * radar: { 23360 * axis: { 23361 * max: 50, 23362 * line: { 23363 * show: false 23364 * }, 23365 * text: { 23366 * position: { 23367 * x: 0, 23368 * y: 0 23369 * }, 23370 * show: false 23371 * } 23372 * }, 23373 * direction: { 23374 * clockwise: true 23375 * }, 23376 * level: { 23377 * show: false, 23378 * text: { 23379 * format: function(x) { 23380 * return x + "%"; 23381 * }, 23382 * show: true 23383 * } 23384 * }, 23385 * size: { 23386 * ratio: 0.7 23387 * } 23388 * } 23389 */ 23390 radar_axis_max: undefined, 23391 radar_axis_line_show: !0, 23392 radar_axis_text_show: !0, 23393 radar_axis_text_position: {}, 23394 radar_level_depth: 3, 23395 radar_level_show: !0, 23396 radar_level_text_format: function radar_level_text_format(x) { 23397 _newArrowCheck(this, radar_this); 23398 return x % 1 === 0 ? x : x.toFixed(2); 23399 }.bind(undefined), 23400 radar_level_text_show: !0, 23401 radar_size_ratio: .87, 23402 radar_direction_clockwise: !1 23403}); 23404;// CONCATENATED MODULE: ./src/config/Options/shape/treemap.ts 23405/** 23406 * Copyright (c) 2017 ~ present NAVER Corp. 23407 * billboard.js project is licensed under the MIT license 23408 */ 23409/** 23410 * treemap config options 23411 */ 23412/* harmony default export */ var shape_treemap = ({ 23413 /** 23414 * Set treemap options 23415 * @name treemap 23416 * @memberof Options 23417 * @type {object} 23418 * @property {object} treemap Treemap object 23419 * @property {string} [treemap.tile="binary"] Treemap tile type 23420 * - **Available tile type values:** 23421 * - binary ([d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapBinary)) 23422 * - dice ([d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapDice)) 23423 * - slice ([d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSlice)) 23424 * - sliceDice ([d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSliceDice)) 23425 * - squrify ([d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSquarify)) 23426 * - resquarify ([d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapResquarify)) 23427 * @property {Function} [treemap.label.format] Set formatter for the label text. 23428 * @property {number} [treemap.label.threshold=0.05] Set threshold ratio to show/hide labels text. 23429 * @property {number} [treemap.label.show=true] Show or hide label text. 23430 * @see [Demo: treemap](https://naver.github.io/billboard.js/demo/#Chart.TreemapChart) 23431 * @example 23432 * treemap: { 23433 * // "binary", "dice", "slice", "sliceDice", "squrify", "resquarify" 23434 * tile: "dice", 23435 * 23436 * label: { 23437 * // show or hide label text 23438 * show: false, 23439 * 23440 * // set label text formatter 23441 * format: function(value, ratio, id) { 23442 * return d3.format("$")(value); 23443 * 23444 * // to multiline, return with '\n' character 23445 * // return value +"%\nLine1\n2Line2"; 23446 * }, 23447 * 23448 * // set ratio number 23449 * ratio: 0.05 23450 * } 23451 * } 23452 */ 23453 treemap_tile: "binary", 23454 treemap_label_format: undefined, 23455 treemap_label_threshold: .05, 23456 treemap_label_show: !0 23457}); 23458;// CONCATENATED MODULE: ./src/config/resolver/shape.ts 23459 23460var shape_this = undefined; 23461/** 23462 * Copyright (c) 2017 ~ present NAVER Corp. 23463 * billboard.js project is licensed under the MIT license 23464 */ 23465 23466 23467 23468 23469 23470 23471// Axis 23472 23473 23474// Shape 23475 23476 23477 23478 23479 23480 23481 23482 23483 23484 23485 23486 23487// Options 23488 23489 23490 23491 23492 23493 23494 23495 23496 23497// Non-Axis based 23498 23499 23500 23501 23502 23503 23504 23505 23506 23507/** 23508 * Extend Axis 23509 * @param {Array} module Module to be extended 23510 * @param {Array} option Option object to be extended 23511 * @private 23512 */ 23513function extendAxis(module, option) { 23514 extend(ChartInternal.prototype, internal.concat(module)); 23515 extend(Chart.prototype, api); 23516 Options.setOptions(options.concat(option || [])); 23517} 23518 23519/** 23520 * Extend Line type modules 23521 * @param {object} module Module to be extended 23522 * @param {Array} option Option object to be extended 23523 * @private 23524 */ 23525function extendLine(module, option) { 23526 extendAxis([point, line].concat(module || [])); 23527 Options.setOptions([common_point, shape_line].concat(option || [])); 23528} 23529 23530/** 23531 * Extend Arc type modules 23532 * @param {Array} module Module to be extended 23533 * @param {Array} option Option object to be extended 23534 * @private 23535 */ 23536function extendArc(module, option) { 23537 extend(ChartInternal.prototype, [arc].concat(module || [])); 23538 Options.setOptions(option); 23539} 23540 23541// Area types 23542let _area = function area() { 23543 var _this2 = this; 23544 _newArrowCheck(this, shape_this); 23545 return extendLine(shape_area, [Options_shape_area]), (_area = function () { 23546 _newArrowCheck(this, _this2); 23547 return TYPE.AREA; 23548 }.bind(this))(); 23549 }.bind(undefined), 23550 areaLineRange = function () { 23551 var _this3 = this; 23552 _newArrowCheck(this, shape_this); 23553 return extendLine(shape_area, [Options_shape_area]), (areaLineRange = function () { 23554 _newArrowCheck(this, _this3); 23555 return TYPE.AREA_LINE_RANGE; 23556 }.bind(this))(); 23557 }.bind(undefined), 23558 areaSpline = function () { 23559 var _this4 = this; 23560 _newArrowCheck(this, shape_this); 23561 return extendLine(shape_area, [Options_shape_area, spline]), (areaSpline = function () { 23562 _newArrowCheck(this, _this4); 23563 return TYPE.AREA_SPLINE; 23564 }.bind(this))(); 23565 }.bind(undefined), 23566 areaSplineRange = function () { 23567 var _this5 = this; 23568 _newArrowCheck(this, shape_this); 23569 return extendLine(shape_area, [Options_shape_area, spline]), (areaSplineRange = function () { 23570 _newArrowCheck(this, _this5); 23571 return TYPE.AREA_SPLINE_RANGE; 23572 }.bind(this))(); 23573 }.bind(undefined), 23574 areaStep = function () { 23575 var _this6 = this; 23576 _newArrowCheck(this, shape_this); 23577 return extendLine(shape_area, [Options_shape_area]), (areaStep = function () { 23578 _newArrowCheck(this, _this6); 23579 return TYPE.AREA_STEP; 23580 }.bind(this))(); 23581 }.bind(undefined), 23582 resolver_shape_line = function () { 23583 var _this7 = this; 23584 _newArrowCheck(this, shape_this); 23585 return extendLine(), (resolver_shape_line = function () { 23586 _newArrowCheck(this, _this7); 23587 return TYPE.LINE; 23588 }.bind(this))(); 23589 }.bind(undefined), 23590 shape_spline = function () { 23591 var _this8 = this; 23592 _newArrowCheck(this, shape_this); 23593 return extendLine(undefined, [spline]), (shape_spline = function () { 23594 _newArrowCheck(this, _this8); 23595 return TYPE.SPLINE; 23596 }.bind(this))(); 23597 }.bind(undefined), 23598 step = function () { 23599 var _this9 = this; 23600 _newArrowCheck(this, shape_this); 23601 return extendLine(), (step = function () { 23602 _newArrowCheck(this, _this9); 23603 return TYPE.STEP; 23604 }.bind(this))(); 23605 }.bind(undefined), 23606 shape_donut = function () { 23607 var _this10 = this; 23608 _newArrowCheck(this, shape_this); 23609 return extendArc(undefined, [shape_arc, donut]), (shape_donut = function () { 23610 _newArrowCheck(this, _this10); 23611 return TYPE.DONUT; 23612 }.bind(this))(); 23613 }.bind(undefined), 23614 resolver_shape_gauge = function () { 23615 var _this11 = this; 23616 _newArrowCheck(this, shape_this); 23617 return extendArc([gauge], [shape_arc, shape_gauge]), (resolver_shape_gauge = function () { 23618 _newArrowCheck(this, _this11); 23619 return TYPE.GAUGE; 23620 }.bind(this))(); 23621 }.bind(undefined), 23622 shape_pie = function () { 23623 var _this12 = this; 23624 _newArrowCheck(this, shape_this); 23625 return extendArc(undefined, [shape_arc, pie]), (shape_pie = function () { 23626 _newArrowCheck(this, _this12); 23627 return TYPE.PIE; 23628 }.bind(this))(); 23629 }.bind(undefined), 23630 resolver_shape_polar = function () { 23631 var _this13 = this; 23632 _newArrowCheck(this, shape_this); 23633 return extendArc([polar], [shape_arc, shape_polar]), (resolver_shape_polar = function () { 23634 _newArrowCheck(this, _this13); 23635 return TYPE.POLAR; 23636 }.bind(this))(); 23637 }.bind(undefined), 23638 resolver_shape_radar = function () { 23639 var _this14 = this; 23640 _newArrowCheck(this, shape_this); 23641 return extendArc([point, radar], [common_point, shape_radar]), (resolver_shape_radar = function () { 23642 _newArrowCheck(this, _this14); 23643 return TYPE.RADAR; 23644 }.bind(this))(); 23645 }.bind(undefined), 23646 resolver_shape_bar = function () { 23647 var _this15 = this; 23648 _newArrowCheck(this, shape_this); 23649 return extendAxis([bar], shape_bar), (resolver_shape_bar = function () { 23650 _newArrowCheck(this, _this15); 23651 return TYPE.BAR; 23652 }.bind(this))(); 23653 }.bind(undefined), 23654 resolver_shape_bubble = function () { 23655 var _this16 = this; 23656 _newArrowCheck(this, shape_this); 23657 return extendAxis([point, bubble], [shape_bubble, common_point]), (resolver_shape_bubble = function () { 23658 _newArrowCheck(this, _this16); 23659 return TYPE.BUBBLE; 23660 }.bind(this))(); 23661 }.bind(undefined), 23662 resolver_shape_candlestick = function () { 23663 var _this17 = this; 23664 _newArrowCheck(this, shape_this); 23665 return extendAxis([candlestick], [shape_candlestick]), (resolver_shape_candlestick = function () { 23666 _newArrowCheck(this, _this17); 23667 return TYPE.CANDLESTICK; 23668 }.bind(this))(); 23669 }.bind(undefined), 23670 shape_scatter = function () { 23671 var _this18 = this; 23672 _newArrowCheck(this, shape_this); 23673 return extendAxis([point], [common_point, scatter]), (shape_scatter = function () { 23674 _newArrowCheck(this, _this18); 23675 return TYPE.SCATTER; 23676 }.bind(this))(); 23677 }.bind(undefined), 23678 resolver_shape_treemap = function () { 23679 var _this19 = this; 23680 _newArrowCheck(this, shape_this); 23681 return extendAxis([treemap], [shape_treemap]), (resolver_shape_treemap = function () { 23682 _newArrowCheck(this, _this19); 23683 return TYPE.TREEMAP; 23684 }.bind(this))(); 23685 }.bind(undefined); // Line types 23686// Arc types 23687// Axis based types 23688// Non Axis based types 23689;// CONCATENATED MODULE: ./src/Chart/api/selection.ts 23690 23691/** 23692 * Copyright (c) 2017 ~ present NAVER Corp. 23693 * billboard.js project is licensed under the MIT license 23694 */ 23695 23696 23697 23698/** 23699 * Toggler function to select or unselect 23700 * @param {boolean} isSelection Weather select or unselect 23701 * @param {Array} ids Target ids 23702 * @param {Array} indices Indices number 23703 * @param {boolean} resetOther Weather reset other selected points (only for selection) 23704 * @private 23705 */ 23706function setSelection(isSelection, ids, indices, resetOther) { 23707 if (isSelection === void 0) { 23708 isSelection = !1; 23709 } 23710 const $$ = this, 23711 config = $$.config, 23712 main = $$.$el.main, 23713 selectionGrouped = config.data_selection_grouped, 23714 isSelectable = config.data_selection_isselectable.bind($$.api); 23715 if (!config.data_selection_enabled) { 23716 return; 23717 } 23718 main.selectAll("." + $SHAPE.shapes).selectAll("." + $SHAPE.shape).each(function (d) { 23719 const shape = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 23720 _ref = d.data ? d.data : d, 23721 id = _ref.id, 23722 index = _ref.index, 23723 toggle = $$.getToggle(this, d).bind($$), 23724 isTargetId = selectionGrouped || !ids || ids.indexOf(id) >= 0, 23725 isTargetIndex = !indices || indices.indexOf(index) >= 0, 23726 isSelected = shape.classed($SELECT.SELECTED); 23727 // line/area selection not supported yet 23728 if (shape.classed($LINE.line) || shape.classed($AREA.area)) { 23729 return; 23730 } 23731 if (isSelection) { 23732 if (isTargetId && isTargetIndex && isSelectable(d) && !isSelected) { 23733 toggle(!0, shape.classed($SELECT.SELECTED, !0), d, index); 23734 } else if (isDefined(resetOther) && resetOther && isSelected) { 23735 toggle(!1, shape.classed($SELECT.SELECTED, !1), d, index); 23736 } 23737 } else { 23738 if (isTargetId && isTargetIndex && isSelectable(d) && isSelected) { 23739 toggle(!1, shape.classed($SELECT.SELECTED, !1), d, index); 23740 } 23741 } 23742 }); 23743} 23744/* harmony default export */ var selection = ({ 23745 /** 23746 * Get selected data points.<br><br> 23747 * By this API, you can get selected data points information. To use this API, data.selection.enabled needs to be set true. 23748 * @function selected 23749 * @instance 23750 * @memberof Chart 23751 * @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. 23752 * @returns {Array} dataPoint Array of the data points.<br>ex.) `[{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ...]` 23753 * @example 23754 * // all selected data points will be returned. 23755 * chart.selected(); 23756 * // --> ex.) [{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ... ] 23757 * 23758 * // all selected data points of data1 will be returned. 23759 * chart.selected("data1"); 23760 */ 23761 selected: function selected(targetId) { 23762 var _this = this; 23763 const $$ = this.internal, 23764 dataPoint = []; 23765 $$.$el.main.selectAll("." + ($SHAPE.shapes + $$.getTargetSelectorSuffix(targetId))).selectAll("." + $SHAPE.shape).filter(function () { 23766 return (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this).classed($SELECT.SELECTED); 23767 }).each(function (d) { 23768 _newArrowCheck(this, _this); 23769 return dataPoint.push(d); 23770 }.bind(this)); 23771 return dataPoint; 23772 }, 23773 /** 23774 * 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) 23775 * @function select 23776 * @instance 23777 * @memberof Chart 23778 * @param {string|Array} [ids] id value to get selected. 23779 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points. 23780 * @param {boolean} [resetOther] Unselect already selected. 23781 * @example 23782 * // select all data points 23783 * chart.select(); 23784 * 23785 * // select all from 'data2' 23786 * chart.select("data2"); 23787 * 23788 * // select all from 'data1' and 'data2' 23789 * chart.select(["data1", "data2"]); 23790 * 23791 * // select from 'data1', indices 2 and unselect others selected 23792 * chart.select("data1", [2], true); 23793 * 23794 * // select from 'data1', indices 0, 3 and 5 23795 * chart.select("data1", [0, 3, 5]); 23796 */ 23797 select: function select(ids, indices, resetOther) { 23798 const $$ = this.internal; 23799 setSelection.bind($$)(!0, ids, indices, resetOther); 23800 }, 23801 /** 23802 * Set data points to be un-selected. 23803 * @function unselect 23804 * @instance 23805 * @memberof Chart 23806 * @param {string|Array} [ids] id value to be unselected. 23807 * @param {Array} [indices] The index array of data points. If falsy value given, will select all data points. 23808 * @example 23809 * // unselect all data points 23810 * chart.unselect(); 23811 * 23812 * // unselect all from 'data1' 23813 * chart.unselect("data1"); 23814 * 23815 * // unselect from 'data1', indices 2 23816 * chart.unselect("data1", [2]); 23817 */ 23818 unselect: function unselect(ids, indices) { 23819 const $$ = this.internal; 23820 setSelection.bind($$)(!1, ids, indices); 23821 } 23822}); 23823;// CONCATENATED MODULE: ./src/Chart/api/subchart.ts 23824 23825/** 23826 * Copyright (c) 2017 ~ present NAVER Corp. 23827 * billboard.js project is licensed under the MIT license 23828 */ 23829 23830 23831/** 23832 * Select subchart by giving x domain range. 23833 * - **â¹ï¸ NOTE:** 23834 * - Due to the limitations of floating point precision, domain value may not be exact returning approximately values. 23835 * @function subchart 23836 * @instance 23837 * @memberof Chart 23838 * @param {Array} domainValue If domain range is given, the subchart will be seleted to the given domain. If no argument is given, the current subchart selection domain will be returned. 23839 * @returns {Array} domain value in array 23840 * @example 23841 * // Specify domain for subchart selection 23842 * chart.subchart([1, 2]); 23843 * 23844 * // Get the current subchart selection domain range 23845 * // Domain value may not be exact returning approximately values. 23846 * chart.subchart(); 23847 */ // NOTE: declared funciton assigning to variable to prevent duplicated method generation in JSDoc. 23848const subchart = function (domainValue) { 23849 var _this = this; 23850 const $$ = this.internal, 23851 axis = $$.axis, 23852 brush = $$.brush, 23853 config = $$.config, 23854 _$$$scale = $$.scale, 23855 x = _$$$scale.x, 23856 subX = _$$$scale.subX, 23857 state = $$.state; 23858 let do
23858main; 23859 if (config.subchart_show) { 23860 domain = domainValue; 23861 if (Array.isArray(domain)) { 23862 if (axis.isTimeSeries()) { 23863 domain = domain.map(function (x) { 23864 _newArrowCheck(this, _this); 23865 return parseDate.bind($$)(x); 23866 }.bind(this)); 23867 } 23868 const isWithinRange = $$.withinRange(domain, $$.getZoomDomain("subX", !0), $$.getZoomDomain("subX")); 23869 if (isWithinRange) { 23870 state.domain = domain; 23871 brush.move(brush.getSelection(), domain.map(subX)); 23872 } 23873 } else { 23874 var _state$domain; 23875 domain = (_state$domain = state.domain) != null ? _state$domain : x.orgDomain(); 23876 } 23877 } 23878 return domain; 23879}; 23880extend(subchart, { 23881 /** 23882 * Show subchart 23883 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`. 23884 * @function subchartâ¤show 23885 * @instance 23886 * @memberof Chart 23887 * @example 23888 * // for ESM imports, needs to import 'subchart' and must be instantiated first to enable subchart's API. 23889 * import {subchart} from "billboard.js"; 23890 * 23891 * const chart = bb.generate({ 23892 * ... 23893 * subchart: { 23894 * // need to be instantiated by calling 'subchart()' 23895 * enabled: subchart() 23896 * 23897 * // in case don't want subchart to be shown at initialization, instantiate with '!subchart()' 23898 * enabled: !subchart() 23899 * } 23900 * }); 23901 * 23902 * chart.subchart.show(); 23903 */ 23904 show: function () { 23905 const $$ = this.internal, 23906 subchart = $$.$el.subchart, 23907 config = $$.config, 23908 show = config.subchart_show; 23909 if (!show) { 23910 var _$target, _subchart$main2; 23911 // unbind zoom event bound to chart rect area 23912 $$.unbindZoomEvent(); 23913 config.subchart_show = !show; 23914 subchart.main || $$.initSubchart(); 23915 let $target = subchart.main.selectAll("." + $COMMON.target); 23916 23917 // need to cover when new data has been loaded 23918 if ($$.data.targets.length !== $target.size()) { 23919 var _subchart$main; 23920 $$.updateSizes(); 23921 $$.updateTargetsForSubchart($$.data.targets); 23922 $target = (_subchart$main = subchart.main) == null ? void 0 : _subchart$main.selectAll("." + $COMMON.target); 23923 } 23924 (_$target = $target) == null || _$target.style("opacity", null); 23925 (_subchart$main2 = subchart.main) == null || _subchart$main2.style("display", null); 23926 this.resize(); 23927 } 23928 }, 23929 /** 23930 * Hide generated subchart 23931 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`. 23932 * @function subchartâ¤hide 23933 * @instance 23934 * @memberof Chart 23935 * @example 23936 * chart.subchart.hide(); 23937 */ 23938 hide: function hide() { 23939 const $$ = this.internal, 23940 main = $$.$el.subchart.main, 23941 config = $$.config; 23942 if (config.subchart_show && (main == null ? void 0 : main.style("display")) !== "none") { 23943 config.subchart_show = !1; 23944 main.style("display", "none"); 23945 this.resize(); 23946 } 23947 }, 23948 /** 23949 * Toggle the visiblity of subchart 23950 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`. 23951 * @function subchartâ¤toggle 23952 * @instance 23953 * @memberof Chart 23954 * @example 23955 * // When subchart is hidden, will be shown 23956 * // When subchart is shown, will be hidden 23957 * chart.subchart.toggle(); 23958 */ 23959 toggle: function toggle() { 23960 const $$ = this.internal, 23961 config = $$.config; 23962 this.subchart[config.subchart_show ? "hide" : "show"](); 23963 }, 23964 /** 23965 * Reset subchart selection 23966 * @function subchartâ¤reset 23967 * @instance 23968 * @memberof Chart 23969 * @example 23970 * // Reset subchart selection 23971 * chart.subchart.reset(); 23972 */ 23973 reset: function reset() { 23974 const $$ = this.internal, 23975 brush = $$.brush; 23976 brush.clear(brush.getSelection()); 23977 } 23978}); 23979/* harmony default export */ var api_subchart = ({ 23980 subchart: subchart 23981}); 23982// EXTERNAL MODULE: external {"commonjs":"d3-zoom","commonjs2":"d3-zoom","amd":"d3-zoom","root":"d3"} 23983var external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_ = __webpack_require__(14); 23984;// CONCATENATED MODULE: ./src/Chart/api/zoom.ts 23985 23986/** 23987 * Copyright (c) 2017 ~ present NAVER Corp. 23988 * billboard.js project is licensed under the MIT license 23989 */ 23990 23991 23992/** 23993 * Zoom by giving x domain range. 23994 * - **â¹ï¸ NOTE:** 23995 * - For `wheel` type zoom, the minimum zoom range will be set as the given domain range. To get the initial state, [.unzoom()](#unzoom) should be called. 23996 * - To be used [zoom.enabled](Options.html#.zoom) option should be set as `truthy`. 23997 * - When x axis type is `category`, domain range should be specified as index numbers. 23998 * - Due to the limitations of floating point precision, domain value may not be exact returning approximately values. 23999 * @function zoom 24000 * @instance 24001 * @memberof Chart 24002 * @param {Array} domainValue If domain range is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned. 24003 * @returns {Array} domain value in array 24004 * @example 24005 * // Zoom to specified domain range 24006 * chart.zoom([10, 20]); 24007 * 24008 * // For timeseries x axis, the domain value can be string, but the format should match with the 'data.xFormat' option. 24009 * chart.zoom(["2021-02-03", "2021-02-08"]); 24010 * 24011 * // For category x axis, the domain value should be index number. 24012 * chart.zoom([0, 3]); 24013 * 24014 * // Get the current zoomed domain range 24015 * // Domain value may not be exact returning approximately values. 24016 * chart.zoom(); 24017 */ // NOTE: declared funciton assigning to variable to prevent duplicated method generation in JSDoc. 24018const zoom = function (domainValue) { 24019 var _this = this, 24020 _state$domain; 24021 const $$ = this.internal, 24022 $el = $$.$el, 24023 axis = $$.axis, 24024 config = $$.config, 24025 org = $$.org, 24026 scale = $$.scale, 24027 state = $$.state, 24028 isRotated = config.axis_rotated, 24029 isCategorized = axis.isCategorized(); 24030 let domain; 24031 if (config.zoom_enabled) { 24032 domain = domainValue; 24033 if (Array.isArray(domain)) { 24034 if (axis.isTimeSeries()) { 24035 domain = domain.map(function (x) { 24036 _newArrowCheck(this, _this); 24037 return parseDate.bind($$)(x); 24038 }.bind(this)); 24039 } 24040 const isWithinRange = $$.withinRange(domain, $$.getZoomDomain("zoom", !0), $$.getZoomDomain("zoom")); 24041 if (isWithinRange) { 24042 state.domain = domain; 24043 if (isCategorized) { 24044 domain = domain.map(function (v, i) { 24045 _newArrowCheck(this, _this); 24046 return +v + (i === 0 ? 0 : 1); 24047 }.bind(this)); 24048 } 24049 24050 // hide any possible tooltip show before the zoom 24051 $$.api.tooltip.hide(); 24052 if (config.subchart_show) { 24053 const x = scale.zoom || scale.x; 24054 $$.brush.getSelection().call($$.brush.move, domain.map(x)); 24055 // resultDomain = domain; 24056 } else { 24057 var _d3ZoomIdentity$scale; 24058 // in case of 'config.zoom_rescale=true', use org.xScale 24059 const x = isCategorized ? scale.x.orgScale() : org.xScale || scale.x, 24060 translate = [-x(domain[0]), 0], 24061 transform = (_d3ZoomIdentity$scale = external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity.scale(x.range()[1] / (x(domain[1])
24061- x(domain[0])))).translate.apply(_d3ZoomIdentity$scale, isRotated ? translate.reverse() : translate); // Get transform from given domain value 24062 // https://github.com/d3/d3-zoom/issues/57#issuecomment-246434951 24063 $el.eventRect.call($$.zoom.transform, transform); 24064 } 24065 $$.setZoomResetButton(); 24066 } 24067 } else { 24068 domain = $$.zoom.getDomain(); 24069 } 24070 } 24071 return (_state$domain = state.domain) != null ? _state$domain : domain; 24072}; 24073extend(zoom, { 24074 /** 24075 * Enable and disable zooming. 24076 * @function zoomâ¤enable 24077 * @instance 24078 * @memberof Chart 24079 * @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. 24080 * @example 24081 * // Enable zooming using the mouse wheel 24082 * chart.zoom.enable(true); 24083 * // Or 24084 * chart.zoom.enable("wheel"); 24085 * 24086 * // Enable zooming by dragging 24087 * chart.zoom.enable("drag"); 24088 * 24089 * // Disable zooming 24090 * chart.zoom.enable(false); 24091 */ 24092 enable: function enable(enabled) { 24093 const $$ = this.internal, 24094 config = $$.config; 24095 if (/^(drag|wheel)$/.test(enabled)) { 24096 config.zoom_type = enabled; 24097 } 24098 config.zoom_enabled = !!enabled; 24099 if (!$$.zoom) { 24100 $$.initZoom(); 24101 $$.bindZoomEvent(); 24102 } else if (enabled === !1) { 24103 $$.bindZoomEvent(!1); 24104 } 24105 $$.updateAndRedraw(); 24106 }, 24107 /** 24108 * Set or get x Axis maximum zoom range value 24109 * @function zoomâ¤max 24110 * @instance 24111 * @memberof Chart 24112 * @param {number} [max] maximum value to set for zoom 24113 * @returns {number} zoom max value 24114 * @example 24115 * // Set maximum range value 24116 * chart.zoom.max(20); 24117 */ 24118 max: function max(_max) { 24119 const $$ = this.internal, 24120 config = $$.config, 24121 xDomain = $$.org.xDomain; 24122 if (_max === 0 || _max) { 24123 config.zoom_x_max = getMinMax("max", [xDomain[1], _max]); 24124 } 24125 return config.zoom_x_max; 24126 }, 24127 /** 24128 * Set or get x Axis minimum zoom range value 24129 * @function zoomâ¤min 24130 * @instance 24131 * @memberof Chart 24132 * @param {number} [min] minimum value to set for zoom 24133 * @returns {number} zoom min value 24134 * @example 24135 * // Set minimum range value 24136 * chart.zoom.min(-1); 24137 */ 24138 min: function min(_min) { 24139 const $$ = this.internal, 24140 config = $$.config, 24141 xDomain = $$.org.xDomain; 24142 if (_min === 0 || _min) { 24143 config.zoom_x_min = getMinMax("min", [xDomain[0], _min]); 24144 } 24145 return config.zoom_x_min; 24146 }, 24147 /** 24148 * Set zoom range 24149 * @function zoomâ¤range 24150 * @instance 24151 * @memberof Chart 24152 * @param {object} [range] zoom range 24153 * @returns {object} zoom range value 24154 * { 24155 * min: 0, 24156 * max: 100 24157 * } 24158 * @example 24159 * chart.zoom.range({ 24160 * min: 10, 24161 * max: 100 24162 * }); 24163 */ 24164 range: function range(_range) { 24165 const zoom = this.zoom; 24166 if (isObject(_range)) { 24167 const min = _range.min, 24168 max = _range.max; 24169 isDefined(min) && zoom.min(min); 24170 isDefined(max) && zoom.max(max); 24171 } 24172 return { 24173 min: zoom.min(), 24174 max: zoom.max() 24175 }; 24176 } 24177}); 24178/* harmony default export */ var api_zoom = ({ 24179 zoom: zoom, 24180 /** 24181 * Unzoom zoomed area 24182 * - **NOTE:** Calling .unzoom() will not trigger zoom events. 24183 * @function unzoom 24184 * @instance 24185 * @memberof Chart 24186 * @example 24187 * chart.unzoom(); 24188 */ 24189 unzoom: function unzoom() { 24190 const $$ = this.internal, 24191 config = $$.config, 24192 _$$$$el = $$.$el, 24193 eventRect = _$$$$el.eventRect, 24194 zoomResetBtn = _$$$$el.zoomResetBtn, 24195 state = $$.state; 24196 if ($$.scale.zoom) { 24197 config.subchart_show ? $$.brush.getSelection().call($$.brush.move, null) : $$.zoom.updateTransformScale(external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity); 24198 $$.updateZoom(!0); 24199 zoomResetBtn == null || zoomResetBtn.style("display", "none"); 24200 24201 // reset transform 24202 if ((0,external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomTransform)(eventRect.node()) !== external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity) { 24203 $$.zoom.transform(eventRect, external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity); 24204 } 24205 state.domain = undefined; 24206 } 24207 } 24208}); 24209;// CONCATENATED MODULE: ./src/ChartInternal/interactions/drag.ts 24210 24211/** 24212 * Copyright (c) 2017 ~ present NAVER Corp. 24213 * billboard.js project is licensed under the MIT license 24214 */ 24215 24216 24217 24218 24219/** 24220 * Module used for data.selection.draggable option 24221 */ 24222/* harmony default export */ var drag = ({ 24223 /** 24224 * Called when dragging. 24225 * Data points can be selected. 24226 * @private 24227 * @param {object} mouse Object 24228 */ 24229 drag: function drag(mouse) { 24230 var _this = this; 24231 const $$ = this, 24232 config = $$.config, 24233 state = $$.state, 24234 main = $$.$el.main, 24235 isSelectionGrouped = config.data_selection_grouped, 24236 isSelectable = config.interaction_enabled && config.data_selection_isselectable; 24237 if ($$.hasArcType() || !config.data_selection_enabled || 24238 // do nothing if not selectable 24239 config.zoom_enabled && !$$.zoom.altDomain || 24240 // skip if zoomable because of conflict drag behavior 24241 !config.data_selection_multiple // skip when single selection because drag is used for multiple selection 24242 ) { 24243 return; 24244 } 24245 const _ref = state.dragStart || [0, 0], 24246 sx = _ref[0], 24247 sy = _ref[1], 24248 mx = mouse[0], 24249 my = mouse[1], 24250 minX = Math.min(sx, mx), 24251 maxX = Math.max(sx, mx), 24252 minY = isSelectionGrouped ? state.margin.top : Math.min(sy, my), 24253 maxY = isSelectionGrouped ? state.height : Math.max(sy, my); 24254 main.select("." + $DRAG.dragarea).attr("x", minX).attr("y", minY).attr("width", maxX - minX).attr("height", maxY - minY); 24255 24256 // TODO: binary search when multiple xs 24257 main.selectAll("." + $SHAPE.shapes).selectAll("." + $SHAPE.shape).filter(function (d) { 24258 _newArrowCheck(this, _this); 24259 return isSelectable == null ? void 0 : isSelectable.bind($$.api)(d); 24260 }.bind(this)).each(function (d, i) { 24261 const shape = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this), 24262 isSelected = shape.classed($SELECT.SELECTED), 24263 isIncluded = shape.classed($DRAG.INCLUDED); 24264 let isWithin = !1, 24265 toggle; 24266 if (shape.classed($CIRCLE.circle)) { 24267 const x = +shape.attr("cx") * 1, 24268 y = +shape.attr("cy") * 1; 24269 toggle = $$.togglePoint; 24270 isWithin = minX < x && x < maxX && minY < y && y < maxY; 24271 } else if (shape.classed($BAR.bar)) { 24272 const _getPathBox = getPathBox(this), 24273 x = _getPathBox.x, 24274 y = _getPathBox.y, 24275 width = _getPathBox.width, 24276 height = _getPathBox.height; 24277 toggle = $$.togglePath; 24278 isWithin = !(maxX < x || x + width < minX) && !(maxY < y || y + height < minY); 24279 } else { 24280 // line/area selection not supported yet 24281 return; 24282 } 24283 24284 // @ts-ignore 24285 if (isWithin ^ isIncluded) { 24286 shape.classed($DRAG.INCLUDED, !isIncluded); 24287 // TODO: included/unincluded callback here 24288 shape.classed($SELECT.SELECTED, !isSelected); 24289 toggle.call($$, !isSelected, shape, d, i); 24290 } 24291 }); 24292 }, 24293 /** 24294 * Called when the drag starts. 24295 * Adds and Shows the drag area. 24296 * @private 24297 * @param {object} mouse Object 24298 */ 24299 dragstart: function dragstart(mouse) { 24300 const $$ = this, 24301 config = $$.config, 24302 state = $$.state, 24303 main = $$.$el.main; 24304 if ($$.hasArcType() || !config.data_selection_enabled) { 24305 return; 24306 } 24307 state.dragStart = mouse; 24308 main.select("." + $COMMON.chart).append("rect").attr("class", $DRAG.dragarea).style("opacity", "0.1"); 24309 $$.setDragStatus(!0); 24310 }, 24311 /** 24312 * Called when the drag finishes. 24313 * Removes the drag area. 24314 * @private 24315 */ 24316 dragend: function dragend() { 24317 const $$ = this, 24318 config = $$.config, 24319 main = $$.$el.main, 24320 $T = $$.$T; 24321 if ($$.hasArcType() || !config.data_selection_enabled) { 24322 // do nothing if not selectable 24323 return; 24324 } 24325 $T(main.select("." + $DRAG.dragarea)).style("opacity", "0").remove(); 24326 main.selectAll("." + $SHAPE.shape).classed($DRAG.INCLUDED, !1); 24327 $$.setDragStatus(!1); 24328 } 24329}); 24330;// CONCATENATED MODULE: ./src/ChartInternal/internals/selection.ts 24331 24332 24333function selection_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } 24334function selection_objectSpread(e) { for (var r = 1, t; r < arguments.length; r++) { t = null != arguments[r] ? arguments[r] : {};
24334 r % 2 ? selection_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : selection_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } 24335/** 24336 * Copyright (c) 2017 ~ present NAVER Corp. 24337 * billboard.js project is licensed under the MIT license 24338 */ 24339 24340 24341 24342 24343/* harmony default export */ var internals_selection = (selection_objectSpread(selection_objectSpread({}, drag), {}, { 24344 /** 24345 * Select a point 24346 * @param {object} target Target point 24347 * @param {object} d Data object 24348 * @param {number} i Index number 24349 * @private 24350 */ 24351 selectPoint: function selectPoint(target, d, i) { 24352 var _this = this; 24353 const $$ = this, 24354 config = $$.config, 24355 main = $$.$el.main, 24356 $T = $$.$T, 24357 isRotated = config.axis_rotated, 24358 cx = (isRotated ? $$.circleY : $$.circleX).bind($$), 24359 cy = (isRotated ? $$.circleX : $$.circleY).bind($$), 24360 r = $$.pointSelectR.bind($$); 24361 callFn(config.data_onselected, $$.api, d, target.node()); 24362 24363 // add selected-circle on low layer g 24364 $T(main.select("." + $SELECT.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll("." + $SELECT.selectedCircle + "-" + i).data([d]).enter().append("circle").attr("class", function () { 24365 _newArrowCheck(this, _this); 24366 return $$.generateClass($SELECT.selectedCircle, i); 24367 }.bind(this)).attr("cx", cx).attr("cy", cy).attr("stroke", $$.color).attr("r", function (d2) { 24368 _newArrowCheck(this, _this); 24369 return $$.pointSelectR(d2) * 1.4; 24370 }.bind(this))).attr("r", r); 24371 }, 24372 /** 24373 * Unelect a point 24374 * @param {object} target Target point 24375 * @param {object} d Data object 24376 * @param {number} i Index number 24377 * @private 24378 */ 24379 unselectPoint: function unselectPoint(target, d, i) { 24380 const $$ = this, 24381 config = $$.config, 24382 main = $$.$el.main, 24383 $T = $$.$T; 24384 callFn(config.data_onunselected, $$.api, d, target == null ? void 0 : target.node()); 24385 24386 // remove selected-circle from low layer g 24387 $T(main.select("." + $SELECT.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll("." + $SELECT.selectedCircle + "-" + i)).attr("r", 0).remove(); 24388 }, 24389 /** 24390 * Toggles the selection of points 24391 * @param {boolean} selected whether or not to select. 24392 * @param {object} target Target object 24393 * @param {object} d Data object 24394 * @param {number} i Index number 24395 * @private 24396 */ 24397 togglePoint: function togglePoint(selected, target, d, i) { 24398 const method = (selected ? "" : "un") + "selectPoint"; 24399 this[method](target, d, i); 24400 }, 24401 /** 24402 * Select a path 24403 * @param {object} target Target path 24404 * @param {object} d Data object 24405 * @private 24406 */ 24407 selectPath: function selectPath(target, d) { 24408 const $$ = this, 24409 config = $$.config; 24410 callFn(config.data_onselected, $$.api, d, target.node()); 24411 if (config.interaction_brighten) { 24412 target.style("filter", "brightness(1.25)"); 24413 } 24414 }, 24415 /** 24416 * Unelect a path 24417 * @private 24418 * @param {object} target Target path 24419 * @param {object} d Data object 24420 */ 24421 unselectPath: function unselectPath(target, d) { 24422 const $$ = this, 24423 config = $$.config; 24424 callFn(config.data_onunselected, $$.api, d, target.node()); 24425 if (config.interaction_brighten) { 24426 target.style("filter", null); 24427 } 24428 }, 24429 /** 24430 * Toggles the selection of lines 24431 * @param {boolean} selected whether or not to select. 24432 * @param {object} target Target object 24433 * @param {object} d Data object 24434 * @param {number} i Index number 24435 * @private 24436 */ 24437 togglePath: function togglePath(selected, target, d, i) { 24438 this[(selected ? "" : "un") + "selectPath"](target, d, i); 24439 }, 24440 /** 24441 * Returns the toggle method of the target 24442 * @param {object} that shape 24443 * @param {object} d Data object 24444 * @returns {Function} toggle method 24445 * @private 24446 */ 24447 getToggle: function getToggle(that, d) { 24448 var _this2 = this; 24449 const $$ = this; 24450 return that.nodeName === "path" ? $$.togglePath : $$.isStepType(d) ? function () { 24451 _newArrowCheck(this, _this2); 24452 }.bind(this) : 24453 // circle is hidden in step chart, so treat as within the click area 24454 $$.togglePoint; 24455 }, 24456 /** 24457 * Toggles the selection of shapes 24458 * @param {object} that shape 24459 * @param {object} d Data object 24460 * @param {number} i Index number 24461 * @private 24462 */ 24463 toggleShape: function toggleShape(that, d, i) { 24464 const $$ = this, 24465 config = $$.config, 24466 main = $$.$el.main; 24467 if (config.data_selection_enabled && config.data_selection_isselectable.bind($$.api)(d)) { 24468 const shape = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(that), 24469 isSelected = shape.classed($SELECT.SELECTED), 24470 toggle = $$.getToggle(that, d).bind($$);
24471 let toggledShape; 24472 if (!config.data_selection_multiple) { 24473 const focusOnly = $$.isPointFocusOnly == null ? void 0 : $$.isPointFocusOnly(); 24474 let selector = "." + (focusOnly ? $SELECT.selectedCircles : $SHAPE.shapes); 24475 if (config.data_selection_grouped) { 24476 selector += $$.getTargetSelectorSuffix(d.id); 24477 } 24478 main.selectAll(selector).selectAll(focusOnly ? "." + $SELECT.selectedCircle : "." + $SHAPE.shape + "." + $SELECT.SELECTED).classed($SELECT.SELECTED, !1).each(function (d) { 24479 const shape = (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)(this); 24480 toggledShape = shape; 24481 toggle(!1, shape, d, d.index); 24482 }); 24483 } 24484 if (!toggledShape || toggledShape.node() !== shape.node()) { 24485 shape.classed($SELECT.SELECTED, !isSelected); 24486 toggle(!isSelected, shape, d, i); 24487 } 24488 } 24489 } 24490})); 24491;// CONCATENATED MODULE: ./src/ChartInternal/interactions/subchart.ts 24492 24493/** 24494 * Copyright (c) 2017 ~ present NAVER Corp. 24495 * billboard.js project is licensed under the MIT license 24496 */ 24497 24498 24499 24500 24501/* harmony default export */ var interactions_subchart = ({ 24502 /** 24503 * Initialize the brush. 24504 * @private 24505 */ 24506 initBrush: function initBrush() { 24507 var _this = this; 24508 const $$ = this, 24509 config = $$.config, 24510 scale = $$.scale, 24511 subchart = $$.$el.subchart, 24512 state = $$.state, 24513 isRotated = config.axis_rotated, 24514 height = config.subchart_size_height; 24515 let lastDomain, lastSelection, timeout; 24516 // set the brush 24517 $$.brush = (isRotated ? (0,external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_.brushY)() : (0,external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_.brushX)()).handleSize(5); 24518 24519 // bind brush event 24520 $$.brush.on("start brush end", function (event) { 24521 var _this2 = this; 24522 _newArrowCheck(this, _this); 24523 const selection = event.selection, 24524 sourceEvent = event.sourceEvent, 24525 target = event.target, 24526 type = event.type; 24527 if (type === "start") { 24528 $$.state.inputType === "touch" && $$.hideTooltip(); 24529 lastSelection = sourceEvent ? selection : null; 24530 // sourceEvent && (state.domain = null); 24531 } 24532 24533 // if (type === "brush") { 24534 if (/(start|brush)/.test(type)) { 24535 var _lastSelection; 24536 // when brush selection updates happens on one edge, update only chainging edge and 24537 // is only for adjustment of given domain range to be used to return current domain range. 24538 type === "brush" && sourceEvent && state.domain && ((_lastSelection = lastSelection) == null ? void 0 : _lastSelection.forEach(function (v, i) { 24539 _newArrowCheck(this, _this2); 24540 if (v !== selection[i]) { 24541 state.domain[i] = scale.x.orgDomain()[i]; 24542 } 24543 }.bind(this))); 24544 $$.redrawForBrush(type !== "start"); 24545 } 24546 if (type === "end") { 24547 lastDomain = scale.x.orgDomain(); 24548 } 24549 24550 // handle brush's handle position & visibility 24551 if (target != null && target.handle) { 24552 if (selection === null) { 24553 $$.brush.handle.attr("display", "none"); 24554 } else { 24555 $$.brush.handle.attr("display", null).attr("transform", function (d, i) { 24556 _newArrowCheck(this, _this2); 24557 const pos = [selection[i], height / 2]; 24558 return "translate(" + (isRotated ? pos.reverse() : pos) + ")"; 24559 }.bind(this)); 24560 } 24561 } 24562 }.bind(this)); 24563 $$.brush.updateResize = function () { 24564 var _this3 = this; 24565 timeout && clearTimeout(timeout); 24566 timeout = setTimeout(function () { 24567 _newArrowCheck(this, _this3); 24568 const selection = this.getSelection(); 24569 lastDomain && (0,external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_.brushSelection)(selection.node()) && this.move(selection, lastDomain.map(scale.subX.orgScale())); 24570 }.bind(this), 0); 24571 }; 24572 $$.brush.update = function () { 24573 var _this4 = this; 24574 const extent = this.extent()(); 24575 if (extent[1].filter(function (v) { 24576 _newArrowCheck(this, _this4); 24577 return isNaN(v); 24578 }.bind(this)).length === 0) { 24579 var _subchart$main; 24580 (_subchart$main = subchart.main) == null || _subchart$main.select("." + classes.brush).call(this); 24581 } 24582 return this; 24583 }; 24584 24585 // set the brush extent 24586 $$.brush.scale = function (scale) { 24587 var _this5 = this; 24588 const h = config.subchart_size_height; 24589 let extent = $$.getExtent(); 24590 if (!extent && scale.range) { 24591 extent = [[0, 0], [scale.range()[1], h]]; 24592 } else if (isArray(extent)) { 24593 extent = extent.map(function (v, i) { 24594 _newArrowCheck(this, _this5); 24595 return [v, i > 0 ? h : i]; 24596 }.bind(this)); 24597 } 24598 24599 // [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner 24600 isRotated && extent[1].reverse(); 24601 this.extent(extent); 24602 24603 // when extent updates, brush selection also be re-applied 24604 // https://github.com/d3/d3/issues/2918 24605 this.update(); 24606 }; 24607 $$.brush.getSelection = function () { 24608 _newArrowCheck(this, _this); 24609 return ( 24610 // @ts-ignore 24611 subchart.main ? subchart.main.select("." + classes.brush) : (0,external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_.select)([]) 24612 ); 24613 }.bind(this); 24614 }, 24615 /** 24616 * Initialize the subchart. 24617 * @private 24618 */ 24619 initSubchart: function initSubchart() { 24620 var _this6 = this; 24621 const $$ = this, 24622 config = $$.config, 24623 _$$$state = $$.state, 24624 clip = _$$$state.clip, 24625 hasAxis = _$$$state.hasAxis, 24626 _$$$$el = $$.$el, 24627 defs = _$$$$el.defs, 24628 svg = _$$$$el.svg, 24629 subchart = _$$$$el.subchart, 24630 axis = _$$$$el.axis; 24631 if (!hasAxis) { 24632 return; 24633 } 24634 const visibility = config.subchart_show ? null : "hidden", 24635 clipId = clip.id + "-subchart", 24636 clipPath = $$.getClipPath(clipId);
24637 clip.idSubchart = clipId; 24638 $$.appendClip(defs, clipId); 24639 $$.initBrush(); 24640 subchart.main = svg.append("g").classed(classes.subchart, !0).attr("transform", $$.getTranslate("context")); 24641 const main = subchart.main; 24642 main.style("visibility", visibility); 24643 24644 // Define g for chart area 24645 main.append("g").attr("clip-path", clipPath).attr("class", classes.chart); 24646 24647 // Define g for chart types area 24648 ["bar", "line", "bubble", "candlestick", "scatter"].forEach(function (v) { 24649 _newArrowCheck(this, _this6); 24650 const type = capitalize(/^(bubble|scatter)$/.test(v) ? "circle" : v); 24651 if ($$.hasType(v) || $$.hasTypeOf(type)) { 24652 const chart = main.select("." + classes.chart), 24653 chartClassName = classes["chart" + type + "s"]; 24654 if (chart.select("." + chartClassName).empty()) { 24655 chart.append("g").attr("class", chartClassName); 24656 } 24657 } 24658 }.bind(this)); 24659 24660 // Add extent rect for Brush 24661 const brush = main.append("g").attr("clip-path", clipPath).attr("class", classes.brush).call($$.brush); 24662 config.subchart_showHandle && $$.addBrushHandle(brush); 24663 24664 // ATTENTION: This must be called AFTER chart added 24665 // Add Axis 24666 axis.subX = main.append("g").attr("class", classes.axisX).attr("transform", $$.getTranslate("subX")).attr("clip-path", config.axis_rotated ? "" : clip.pathXAxis).style("visibility", config.subchart_axis_x_show ? visibility : "hidden"); 24667 }, 24668 /** 24669 * Add brush handle 24670 * Enabled when: subchart.showHandle=true 24671 * @param {d3Selection} brush Brush selection 24672 * @private 24673 */ 24674 addBrushHandle: function addBrushHandle(brush) { 24675 var _this7 = this; 24676 const $$ = this, 24677 config = $$.config, 24678 isRotated = config.axis_rotated, 24679 initRange = config.subchart_init_range, 24680 path = isRotated ? ["M8.5 0 a6 6 0 0 0 -6 -6.5 H-2.5 a 6 6 0 0 0 -6 6.5 z m-5 -2 H-3.5 m7 -2 H-3.5z", "M8.5 0 a6 -6 0 0 1 -6 6.5 H-2.5 a 6 -6 0 0 1 -6 -6.5z m-5 2 H-3.5 m7 2 H-3.5z"] : ["M0 -8.5 A6 6 0 0 0 -6.5 -3.5 V2.5 A6 6 0 0 0 0 8.5 Z M-2 -3.5 V3.5 M-4 -3.5 V3.5z", "M0 -8.5 A6 6 0 0 1 6.5 -3.5 V2.5 A6 6 0 0 1 0 8.5 Z M2 -3.5 V3.5 M4 -3.5 V3.5z"]; 24681 24682 // brush handle shape's path 24683 24684 $$.brush.handle = brush.selectAll(".handle--custom").data(isRotated ? [{ 24685 type: "n" 24686 }, { 24687 type: "s" 24688 }] : [{ 24689 type: "w" 24690 }, { 24691 type: "e" 24692 }]).enter().append("path").attr("class", "handle--custom").attr("cursor", (isRotated ? "ns" : "ew") + "-resize").attr("d", function (d) { 24693 _newArrowCheck(this, _this7); 24694 return path[+/[se]/.test(d.type)]; 24695 }.bind(this)).attr("display", initRange ? null : "none"); 24696 }, 24697 /** 24698 * Update sub chart 24699 * @param {object} targets $$.data.targets 24700 * @private 24701 */ 24702 updateTargetsForSubchart: function updateTargetsForSubchart(targets) { 24703 var _this8 = this; 24704 const $$ = this, 24705 config = $$.config, 24706 state = $$.state, 24707 main = $$.$el.subchart.main; 24708 if (config.subchart_show) { 24709 ["bar", "line", "bubble", "candlestick", "scatter"].filter(function (v) { 24710 _newArrowCheck(this, _this8); 24711 return $$.hasType(v) || $$.hasTypeOf(capitalize(v)); 24712 }.bind(this)).forEach(function (v) { 24713 _newArrowCheck(this, _this8); 24714 const isPointType = /^(bubble|scatter)$/.test(v), 24715 name = capitalize(isPointType ? "circle" : v), 24716 chartClass = $$.getChartClass(name, !0), 24717 shapeClass = $$.getClass(isPointType ? "circles" : v + "s", !0), 24718 shapeChart = main.select("." + classes["chart" + (name + "s")]); 24719 if (isPointType) { 24720 const circle = shapeChart.selectAll("." + classes.circles).data(targets.filter($$["is" + capitalize(v) + "Type"].bind($$))).attr("class", shapeClass); 24721 circle.exit().remove(); 24722 circle.enter().append("g").attr("class", shapeClass); 24723 } else { 24724 const shapeUpdate = shapeChart.selectAll("." + classes["chart" + name]).attr("class", chartClass).data(targets.filter($$["is" + name + "Type"].bind($$))), 24725 shapeEnter = shapeUpdate.enter().append("g").style("opacity", "0").attr("class", chartClass).append("g").attr("class", shapeClass); 24726 shapeUpdate.exit().remove(); 24727 24728 // Area 24729 v === "line" && $$.hasTypeOf("Area") && shapeEnter.append("g").attr("class", $$.getClass("areas", !0)); 24730 } 24731 }.bind(this)); 24732 24733 // -- Brush --// 24734 main.selectAll("." + classes.brush + " rect").attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? state.width2 : state.height2); 24735 } 24736 }, 24737 /** 24738 * Redraw subchart. 24739 * @private 24740 * @param {boolean} withSubchart whether or not to show subchart 24741 * @param {number} duration duration 24742 * @param {object} shape Shape's info 24743 */ 24744 redrawSubchart: function redrawSubchart(withSubchart, duration, shape) { 24745 var _this9 = this; 24746 const $$ = this, 24747 config = $$.config, 24748 main = $$.$el.subchart.main, 24749 state = $$.state, 24750 withTransition = !!duration; 24751 main.style("visibility", config.subchart_show ? null : "hidden"); 24752 24753 // subchart 24754 if (config.subchart_show) { 24755 var _state$event; 24756 // reflect main chart to extent on subchart if zoomed 24757 if (((_state$event = state.event) == null ? void 0 : _state$event.type) === "zoom") { 24758 $$.brush.update(); 24759 } 24760 24761 // update subchart elements if needed 24762 if (withSubchart) { 24763 const initRange = config.subchart_init_range; 24764 24765 // extent rect 24766 brushEmpty($$) || $$.brush.update(); 24767 Object.keys(shape.type).forEach(function (v) { 24768 _newArrowCheck(this, _this9); 24769 const name = capitalize(v), 24770 drawFn = $$["generateDraw" + name](shape.indices[v], !0); 24771 // call shape's update & redraw method 24772 $$["update" + name](withTransition, !0); 24773 $$["redraw" + name](drawFn, withTransition, !0); 24774 }.bind(this)); 24775 if ($$.hasType("bubble") || $$.hasType("scatter")) { 24776 const cx = shape.pos.cx, 24777 cy = $$.updateCircleY(!0); 24778 $$.updateCircle(!0); 24779 $$.redrawCircle(cx, cy, withTransition, undefined, !0); 24780 } 24781 if (!state.rendered && initRange) { 24782 state.domain = initRange; 24783 $$.brush.move($$.brush.getSelection(), initRange.map($$.scale.x)); 24784 } 24785 } 24786 } 24787 }, 24788 /** 24789 * Redraw the brush. 24790 * @param {boolean} [callCallbck=true] Call 'onbrush' callback or not. 24791 * @private 24792 */ 24793 redrawForBrush: function redrawForBrush(callCallbck) { 24794 var _state$domain; 24795 if (callCallbck === void 0) { 24796 callCallbck = !0; 24797 } 24798 const $$ = this, 24799 _$$$config = $$.config, 24800 onBrush = _$$$config.subchart_onbrush, 24801 withY = _$$$config.zoom_rescale, 24802 scale = $$.scale, 24803 state = $$.state; 24804 $$.redraw({ 24805 withTransition: !1, 24806 withY: withY, 24807 withSubchart: !1, 24808 withUpdateXDomain: !0, 24809 withDimension: !1 24810 }); 24811 callCallbck && state.rendered && onBrush.bind($$.api)((_state$domain = state.domain) != null ? _state$domain : scale.x.orgDomain()); 24812 }, 24813 /** 24814 * Transform context 24815 * @param {boolean} withTransition indicates transition is enabled 24816 * @param {object} transitions The return value of the generateTransitions method of Axis. 24817 * @private 24818 */ 24819 transformContext: function transformContext(withTransition, transitions) { 24820 const $$ = this, 24821 subchart = $$.$el.subchart, 24822 $T = $$.$T, 24823 subXAxis = transitions != null && transitions.axisSubX ? transitions.axisSubX : $T(subchart.main.select("." + classes.axisX), withTransition); 24824 subchart.main.attr("transform", $$.getTranslate("context")); 24825 subXAxis.attr("transform", $$.getTranslate("subX")); 24826 }, 24827 /** 24828 * Get extent value 24829 * @returns {Array} default extent 24830 * @private 24831 */ 24832 getExtent: function getExtent() { 24833 var _this10 = this; 24834 const $$ = this, 24835 config = $$.config, 24836 scale = $$.scale; 24837 let extent = config.axis_x_extent; 24838 if (extent) { 24839 if (isFunction(extent)) { 24840 extent = extent.bind($$.api)($$.getXDomain($$.data.targets), scale.subX); 24841 } else if ($$.axis.isTimeSeries() && extent.every(isNaN)) { 24842 const fn = parseDate.bind($$); 24843 extent = extent.map(function (v) { 24844 _newArrowCheck(this, _this10); 24845 return scale.subX(fn(v)); 24846 }.bind(this)); 24847 } 24848 } 24849 return extent; 24850 } 24851}); 24852;// CONCATENATED MODULE: ./src/ChartInternal/interactions/zoom.ts 24853 24854/** 24855 * Copyright (c) 2017 ~ present NAVER Corp. 24856 * billboard.js project is licensed under the MIT license 24857 */ 24858 24859 24860 24861 24862/* harmony default export */ var interactions_zoom = ({ 24863 /** 24864 * Initialize zoom. 24865 * @private 24866 */ 24867 initZoom: function initZoom() { 24868 const $$ = this; 24869 $$.scale.zoom = null; 24870 $$.generateZoom(); 24871 $$.initZoomBehaviour(); 24872 }, 24873 /** 24874 * Bind zoom event 24875 * @param {boolean} bind Weather bind or unbound 24876 * @private 24877 */ 24878 bindZoomEvent: function bindZoomEvent(bind) { 24879 if (bind === void 0) { 24880 bind = !0; 24881 } 24882 const $$ = this, 24883 config = $$.config, 24884 zoomEnabled = config.zoom_enabled; 24885 if (zoomEnabled && bind) {
24886 // Do not bind zoom event when subchart is shown 24887 config.subchart_show || $$.bindZoomOnEventRect(); 24888 } else if (bind === !1) { 24889 $$.api.unzoom(); 24890 $$.unbindZoomEvent(); 24891 } 24892 }, 24893 /** 24894 * Generate zoom 24895 * @private 24896 */ 24897 generateZoom: function generateZoom() { 24898 var _this = this; 24899 const $$ = this, 24900 config = $$.config, 24901 org = $$.org, 24902 scale = $$.scale, 24903 zoom = (0,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($$)); 24904 // get zoom extent 24905 // @ts-ignore 24906 zoom.orgScaleExtent = function () { 24907 _newArrowCheck(this, _this); 24908 const extent = config.zoom_extent || [1, 10]; 24909 return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])]; 24910 }.bind(this); 24911 24912 // @ts-ignore 24913 zoom.updateScaleExtent = function () { 24914 const ratio = diffDomain($$.scale.x.orgDomain()) / diffDomain($$.getZoomDomain()), 24915 extent = this.orgScaleExtent(); 24916 this.scaleExtent([extent[0] * ratio, extent[1] * ratio]); 24917 return this; 24918 }; 24919 24920 /** 24921 * Update scale according zoom transform value 24922 * @param {object} transform transform object 24923 * @param {boolean} correctTransform if the d3 transform should be updated after rescaling 24924 * @private 24925 */ 24926 // @ts-ignore 24927 zoom.updateTransformScale = function (transform, correctTransform) { 24928 var _org$xScale; 24929 _newArrowCheck(this, _this); 24930 const isRotated = config.axis_rotated; 24931 24932 // in case of resize, update range of orgXScale 24933 (_org$xScale = org.xScale) == null || _org$xScale.range(scale.x.range()); 24934 24935 // rescale from the original scale 24936 const newScale = transform[isRotated ? "rescaleY" : "rescaleX"](org.xScale || scale.x), 24937 domain = $$.trimXDomain(newScale.domain()), 24938 rescale = config.zoom_rescale; 24939 newScale.domain(domain, org.xDomain); 24940 24941 // prevent chart from panning off the edge and feeling "stuck" 24942 // https://github.com/naver/billboard.js/issues/2588 24943 if (correctTransform) { 24944 const t = newScale(scale.x.domain()[0]), 24945 tX = isRotated ? transform.x : t, 24946 tY = isRotated ? t : transform.y; 24947 $$.$el.eventRect.property("__zoom", external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity.translate(tX, tY).scale(transform.k)); 24948 } 24949 if (!$$.state.xTickOffset) { 24950 $$.state.xTickOffset = $$.axis.x.tickOffset(); 24951 } 24952 scale.zoom = $$.getCustomizedXScale(newScale); 24953 $$.axis.x.scale(scale.zoom); 24954 if (rescale) { 24955 // copy current initial x scale in case of rescale option is used 24956 org.xScale || (org.xScale = scale.x.copy()); 24957 scale.x.domain(domain); 24958 } 24959 }.bind(this); 24960 24961 /** 24962 * Get zoom domain 24963 * @returns {Array} zoom domain 24964 * @private 24965 */ 24966 // @ts-ignore 24967 zoom.getDomain = function () { 24968 _newArrowCheck(this, _this); 24969 const domain = scale[scale.zoom ? "zoom" : "subX"].domain(), 24970 isCategorized = $$.axis.isCategorized(); 24971 if (isCategorized) { 24972 domain[1] -= 2; 24973 } 24974 return domain; 24975 }.bind(this); 24976 $$.zoom = zoom; 24977 }, 24978 /** 24979 * 'start' event listener 24980 * @param {object} event Event object 24981 * @private 24982 */ 24983 onZoomStart: function onZoomStart(event) { 24984 const $$ = this, 24985 sourceEvent = event.sourceEvent; 24986 if (sourceEvent) { 24987 $$.zoom.startEvent = sourceEvent; 24988 $$.state.zooming = !0; 24989 callFn($$.config.zoom_onzoomstart, $$.api, event); 24990 } 24991 }, 24992 /** 24993 * 'zoom' event listener 24994 * @param {object} event Event object 24995 * @private 24996 */ 24997 onZoom: function onZoom(event) { 24998 var _this2 = this, 24999 _$$$state$domain; 25000 const $$ = this, 25001 config = $$.config, 25002 scale = $$.scale, 25003 state = $$.state, 25004 org = $$.org, 25005 sourceEvent = event.sourceEvent, 25006 isUnZoom = (event == null ? void 0 : event.transform) === external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity; 25007 if (!config.zoom_enabled || $$.filterTargetsToShow($$.data.targets).length === 0 || !scale.zoom && (sourceEvent == null ? void 0 : sourceEvent.type.indexOf("touch")) > -1 && (sourceEvent == null ? void 0 : sourceEvent.touches.length) === 1) { 25008 return; 25009 } 25010 if (event.sourceEvent) { 25011 state.zooming = !0; 25012 state.domain = undefined; 25013 } 25014 const isMousemove = (sourceEvent == null ? void 0 : sourceEvent.type) === "mousemove", 25015 isZoomOut = (sourceEvent == null ? void 0 : sourceEvent.wheelDelta) < 0, 25016 transform = event.transform; 25017 if (!isMousemove && isZoomOut && scale.x.domain().every(function (v, i) { 25018 _newArrowCheck(this, _this2); 25019 return v !== org.xDomain[i]; 25020 }.bind(this))) { 25021 scale.x.domain(org.xDomain); 25022 } 25023 $$.zoom.updateTransformScale(transform, config.zoom_type === "wheel" && sourceEvent); 25024 25025 // do zoom transiton when: 25026 // - zoom type 'drag' 25027 // - when .unzoom() is called (event.transform === d3ZoomIdentity) 25028 const doTransition = config.transition_duration > 0 && !config.subchart_show && (state.dragging || isUnZoom || !event.sourceEvent); 25029 $$.redraw({ 25030 withTransition: doTransition, 25031 withY: config.zoom_rescale, 25032 withSubchart: !1, 25033 withEventRect: !1, 25034 withDimension: !1 25035 }); 25036 $$.state.cancelClick = isMousemove; 25037 25038 // do not call event cb when is .unzoom() is called 25039 isUnZoom || callFn(config.zoom_onzoom, $$.api, (_$$$state$domain = $$.state.domain) != null ? _$$$state$domain : $$.zoom.getDomain()); 25040 }, 25041 /** 25042 * 'end' event listener 25043 * @param {object} event Event object 25044 * @private 25045 */ 25046 onZoomEnd: function onZoomEnd(event) { 25047 var _startEvent, _$$$state$domain2; 25048 const $$ = this, 25049 config = $$.config, 25050 state = $$.state; 25051 let startEvent = $$.zoom.startEvent, 25052 e = event == null ? void 0 : event.sourceEvent; 25053 const isUnZoom = (event == null ? void 0 : event.transform) === external_commonjs_d3_zoom_commonjs2_d3_zoom_amd_d3_zoom_root_d3_.zoomIdentity; 25054 if (((_startEvent = startEvent) == null ? void 0 : _startEvent.type.indexOf("touch")) > -1) { 25055 var _e; 25056 startEvent = startEvent.changedTouches[0]; 25057 e = (_e = e) == null || (_e = _e.changedTouches) == null ? void 0 : _e[0]; 25058 } 25059 25060 // if click, do nothing. otherwise, click interaction will be canceled. 25061 if (config.zoom_type === "drag" && e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY) { 25062 return; 25063 } 25064 $$.redrawEventRect(); 25065 $$.updateZoom(); 25066 state.zooming = !1; 25067 25068 // do not call event cb when is .unzoom() is called 25069 !isUnZoom && (e || state.dragging) && callFn(config.zoom_onzoomend, $$.api, (_$$$state$domain2 = $$.state.domain) != null ? _$$$state$domain2 : $$.zoom.getDomain()); 25070 }, 25071 /** 25072 * Update zoom 25073 * @param {boolean} force Force unzoom 25074 * @private 25075 */ 25076 updateZoom: function updateZoom(force) { 25077 const $$ = this, 25078 _$$$scale = $$.scale, 25079 subX = _$$$scale.subX, 25080 x = _$$$scale.x, 25081 zoom = _$$$scale.zoom; 25082 if (zoom) { 25083 const zoomDomain = zoom.domain(), 25084 xDomain = subX.domain(), 25085 delta = .015, 25086 isfullyShown = $$.config.axis_x_inverted ? (zoomDomain[0] >= xDomain[0] || zoomDomain[0] + delta >= xDomain[0]) && (xDomain[1] >= zoomDomain[1] || xDomain[1] >= zoomDomain[1] + delta) : (zoomDomain[0] <= xDomain[0] || zoomDomain[0] - delta <= xDomain[0]) && (xDomain[1] <= zoomDomain[1] || xDomain[1] <= zoomDomain[1] - delta); // arbitrary value 25087 // check if the zoomed chart is fully shown, then reset scale when zoom is out as initial 25088 if (force || isfullyShown) { 25089 $$.axis.x.scale(subX); 25090 x.domain(subX.orgDomain()); 25091 $$.scale.zoom = null; 25092 } 25093 } 25094 }, 25095 /** 25096 * Attach zoom event on <rect> 25097 * @private 25098 */ 25099 bindZoomOnEventRect: function bindZoomOnEventRect() { 25100 var _this3 = this; 25101 const $$ = this, 25102 config = $$.config, 25103 eventRect = $$.$el.eventRect, 25104 behaviour = config.zoom_type === "drag" ? $$.zoomBehaviour : $$.zoom; 25105 // Since Chrome 89, wheel zoom not works properly 25106 // Applying the workaround: https://github.com/d3/d3-zoom/issues/231#issuecomment-802305692 25107 $$.$el.svg.on("wheel", function () { 25108 _newArrowCheck(this, _this3); 25109 }.bind(this)); 25110 eventRect == null || eventRect.call(behaviour).on("dblclick.zoom", null); 25111 }, 25112 /** 25113 * Initialize the drag behaviour used for zooming. 25114 * @private 25115 */ 25116 initZoomBehaviour: function initZoomBehaviour() { 25117 var _this4 = this; 25118 const $$ = this, 25119 config = $$.config, 25120 state = $$.state, 25121 isRotated = config.axis_rotated; 25122 let start = 0, 25123 end = 0, 25124 zoomRect; 25125 const prop = { 25126 axis: isRotated ? "y" : "x", 25127 attr: isRotated ? "height" : "width", 25128 index: isRotated ? 1 : 0 25129 }; 25130 $$.zoomBehaviour = (0,external_commonjs_d3_drag_commonjs2_d3_drag_amd_d3_drag_root_d3_.drag)().clickDistance(4).on("start", function (event) { 25131 state.event = event; 25132 $$.setDragStatus(!0); 25133 $$.unselectRect(); 25134 if (!zoomRect) { 25135 zoomRect = $$.$el.main.append("rect").attr("clip-path", state.clip.path).attr("class", $ZOOM.zoomBrush).attr("width", isRotated ? state.width : 0).attr("height", isRotated ? 0 : state.height); 25136 } 25137 start = getPointer(event, this)[prop.index]; 25138 end = start; 25139 zoomRect.attr(prop.axis, start).attr(prop.attr, 0); 25140 $$.onZoomStart(event); 25141 }).on("drag", function (event) { 25142 end = getPointer(event, this)[prop.index]; 25143 zoomRect.attr(prop.axis, Math.min(start, end)).attr(prop.attr, Math.abs(end - start)); 25144 }).on("end", function (event) { 25145 var _this5 = this; 25146 _newArrowCheck(this, _this4); 25147 const scale = $$.scale.zoom || $$.scale.x; 25148 state.event = event; 25149 zoomRect.attr(prop.axis, 0).attr(prop.attr, 0); 25150 if (start > end) { 25151 var _ref = [end, start]; 25152 start = _ref[0]; 25153 end = _ref[1]; 25154 } 25155 if (start < 0) { 25156 end += Math.abs(start); 25157 start = 0; 25158 } 25159 if (start !== end) { 25160 $$.api.zoom([start, end].map(function (v) { 25161 _newArrowCheck(this, _this5); 25162 return scale.invert(v); 25163 }.bind(this))); 25164 } 25165 $$.setDragStatus(!1); 25166 }.bind(this)); 25167 }, 25168 setZoomResetButton: function setZoomResetButton() { 25169 const $$ = this, 25170 config = $$.config, 25171 $el = $$.$el, 25172 resetButton = config.zoom_resetButton; 25173 if (resetButton && config.zoom_type === "drag") { 25174 if (!$el.zoomResetBtn) { 25175 $el.zoomResetBtn = $$.$el.chart.append("div").classed($COMMON.button, !0).append("span").on("click", function () { 25176 isFunction(resetButton.onclick) && resetButton.onclick.bind($$.api)(this); 25177 $$.api.unzoom(); 25178 }).classed($ZOOM.buttonZoomReset, !0).text(resetButton.text || "Reset Zoom"); 25179 } else { 25180 $el.zoomResetBtn.style("display", null); 25181 } 25182 } 25183 } 25184}); 25185;// CONCATENATED MODULE: ./src/config/Options/data/selection.ts 25186 25187var selection_this = undefined; 25188/** 25189 * Copyright (c) 2017 ~ present NAVER Corp. 25190 * billboard.js project is licensed under the MIT license 25191 */ 25192/** 25193 * data.selection config options 25194 */ 25195/* harmony default export */ var data_selection = ({ 25196 /** 25197 * Set data selection enabled<br><br> 25198 * 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). 25199 * - **NOTE:** for ESM imports, needs to import 'selection' exports and instantiate it by calling `selection()`. 25200 * - `enabled: selection()` 25201 * @name dataâ¤selectionâ¤enabled 25202 * @memberof Options 25203 * @type {boolean} 25204 * @default false 25205 * @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataSelection) 25206 * @example 25207 * data: { 25208 * selection: { 25209 * enabled: true 25210 * } 25211 * } 25212 * @example 25213 * // importing ESM 25214 * import bb, {selection} from "billboard.js"; 25215 * 25216 * data: { 25217 * selection: { 25218 * enabled: selection(), 25219 * ... 25220 * } 25221 * } 25222 */ 25223 data_selection_enabled: !1, 25224 /** 25225 * Set grouped selection enabled.<br><br> 25226 * If this option set true, multiple data points that have same x value will be selected by one selection. 25227 * @name dataâ¤selectionâ¤grouped 25228 * @memberof Options 25229 * @type {boolean} 25230 * @default false 25231 * @example 25232 * data: { 25233 * selection: { 25234 * grouped: true 25235 * } 25236 * } 25237 */ 25238 data_selection_grouped: !1, 25239 /** 25240 * Set a callback for each data point to determine if it's selectable or not.<br><br> 25241 * The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean. 25242 * @name dataâ¤selectionâ¤isselectable 25243 * @memberof Options 25244 * @type {Function} 25245 * @default function() { return true; } 25246 * @example 25247 * data: { 25248 * selection: { 25249 * isselectable: function(d) { ... } 25250 * } 25251 * } 25252 */ 25253 data_selection_isselectable: function data_selection_isselectable() { 25254 _newArrowCheck(this, selection_this); 25255 return !0; 25256 }.bind(undefined), 25257 /** 25258 * Set multiple data points selection enabled.<br><br> 25259 * 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. 25260 * @name dataâ¤selectionâ¤multiple 25261 * @memberof Options 25262 * @type {boolean} 25263 * @default true 25264 * @example 25265 * data: { 25266 * selection: { 25267 * multiple: false 25268 * } 25269 * } 25270 */ 25271 data_selection_multiple: !0, 25272 /** 25273 * Enable to select data points by dragging. 25274 * If this option set true, data points can be selected by dragging. 25275 * - **NOTE:** If this option set true, scrolling on the chart will be disabled because dragging event will handle the event. 25276 * @name dataâ¤selectionâ¤draggable 25277 * @memberof Options 25278 * @type {boolean} 25279 * @default false 25280 * @example 25281 * data: { 25282 * selection: { 25283 * draggable: true 25284 * } 25285 * } 25286 */ 25287 data_selection_draggable: !1, 25288 /** 25289 * Set a callback for on data selection. 25290 * @name dataâ¤onselected 25291 * @memberof Options 25292 * @type {Function} 25293 * @default function() {} 25294 * @example 25295 * data: { 25296 * onselected: function(d, element) { 25297 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"} 25298 * // element - <circle> 25299 * ... 25300 * } 25301 * } 25302 */ 25303 data_onselected: function data_onselected() { 25304 _newArrowCheck(this, selection_this); 25305 }.bind(undefined), 25306 /** 25307 * Set a callback for on data un-selection. 25308 * @name dataâ¤onunselected 25309 * @memberof Options 25310 * @type {Function} 25311 * @default function() {} 25312 * @example 25313 * data: { 25314 * onunselected: function(d, element) { 25315 * // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"} 25316 * // element - <circle> 25317 * ... 25318 * } 25319 * } 25320 */ 25321 data_onunselected: function data_onunselected() { 25322 _newArrowCheck(this, selection_this); 25323 }.bind(undefined) 25324}); 25325;// CONCATENATED MODULE: ./src/config/Options/interaction/subchart.ts 25326 25327var subchart_this = undefined; 25328/** 25329 * Copyright (c) 2017 ~ present NAVER Corp. 25330 * billboard.js project is licensed under the MIT license 25331 */ 25332/** 25333 * x Axis config options 25334 */ 25335/* harmony default export */ var interaction_subchart = ({ 25336 /** 25337 * Set subchart options. 25338 * - **NOTE:** Not supported for `bubble`, `scatter` and non-Axis based(pie, donut, gauge, radar) types. 25339 * @name subchart 25340 * @memberof Options 25341 * @type {object} 25342 * @property {object} subchart Subchart object 25343 * @property {boolean} [subchart.show=false] Show sub chart on the bottom of the chart. 25344 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`. 25345 * - `show: subchart()` 25346 * @property {boolean}
25346 [subchart.showHandle=false] Show sub chart's handle. 25347 * @property {boolean} [subchart.axis.x.show=true] Show or hide x axis. 25348 * @property {boolean} [subchart.axis.x.tick.show=true] Show or hide x axis tick line. 25349 * @property {Function|string} [subchart.axis.x.tick.format] Use custom format for x axis ticks - see [axis.x.tick.format](#.axisâ¤xâ¤tickâ¤format) for details. 25350 * @property {boolean} [subchart.axis.x.tick.text.show=true] Show or hide x axis tick text. 25351 * @property {Array} [subchart.init.range] Set initial selection domain range. 25352 * @property {number} [subchart.size.height] Change the height of the subchart. 25353 * @property {Function} [subchart.onbrush] Set callback for brush event.<br> 25354 * Specified function receives the current zoomed x domain. 25355 * @see [Demo](https://naver.github.io/billboard.js/demo/#Interaction.SubChart) 25356 * @example 25357 * subchart: { 25358 * show: true, 25359 * showHandle: true, 25360 * size: { 25361 * height: 20 25362 * }, 25363 * init: { 25364 * // specify initial range domain selection 25365 * range: [1, 2] 25366 * }, 25367 * axis: { 25368 * x: { 25369 * show: true, 25370 * tick: { 25371 * show: true, 25372 * format: (x) => d3Format(".1f")(x) 25373 * text: { 25374 * show: false 25375 * } 25376 * } 25377 * } 25378 * }, 25379 * onbrush: function(domain) { ... } 25380 * } 25381 * @example 25382 * // importing ESM 25383 * import bb, {subchart} from "billboard.js"; 25384 * 25385 * subchart: { 25386 * show: subchart(), 25387 * ... 25388 * } 25389 */ 25390 subchart_show: !1, 25391 subchart_showHandle: !1, 25392 subchart_size_height: 60, 25393 subchart_axis_x_show: !0, 25394 subchart_axis_x_tick_show: !0, 25395 subchart_axis_x_tick_format: undefined, 25396 subchart_axis_x_tick_text_show: !0, 25397 subchart_init_range: undefined, 25398 subchart_onbrush: function subchart_onbrush() { 25399 _newArrowCheck(this, subchart_this); 25400 }.bind(undefined) 25401}); 25402;// CONCATENATED MODULE: ./src/config/Options/interaction/zoom.ts 25403/** 25404 * Copyright (c) 2017 ~ present NAVER Corp. 25405 * billboard.js project is licensed under the MIT license 25406 */ 25407/** 25408 * zoom config options 25409 */ 25410/* harmony default export */ var interaction_zoom = ({ 25411 /** 25412 * Set zoom options 25413 * @name zoom 25414 * @memberof Options 25415 * @type {object} 25416 * @property {object} zoom Zoom object 25417 * @property {boolean} [zoom.enabled=false] Enable zooming. 25418 * - **NOTE:** for ESM imports, needs to import 'zoom' exports and instantiate it by calling `zoom()`. 25419 * - `enabled: zoom()` 25420 * @property {string} [zoom.type='wheel'] Set zoom interaction type. 25421 * - **Available types:** 25422 * - wheel 25423 * - drag 25424 * @property {boolean} [zoom.rescale=false] Enable to rescale after zooming.<br> 25425 * If true set, y domain will be updated according to the zoomed region. 25426 * @property {Array} [zoom.extent=[1, 10]] Change zoom extent. 25427 * @property {number|Date} [zoom.x.min] Set x Axis minimum zoom range 25428 * @property {number|Date} [zoom.x.max] Set x Axis maximum zoom range 25429 * @property {Function} [zoom.onzoomstart=undefined] Set callback that is called when zooming starts.<br> 25430 * Specified function receives the zoom event. 25431 * @property {Function} [zoom.onzoom=undefined] Set callback that is called when the chart is zooming.<br> 25432 * Specified function receives the zoomed domain. 25433 * @property {Function} [zoom.onzoomend=undefined] Set callback that is called when zooming ends.<br> 25434 * Specified function receives the zoomed domain. 25435 * @property {boolean|object} [zoom.resetButton=true] Set to display zoom reset button for 'drag' type zoom 25436 * @property {Function} [zoom.resetButton.onclick] Set callback when clicks the reset button. The callback will receive reset button element reference as argument. 25437 * @property {string} [zoom.resetButton.text='Reset Zoom'] Text value for zoom reset button. 25438 * @see [Demo:zoom](https://naver.github.io/billboard.js/demo/#Interaction.Zoom) 25439 * @see [Demo:drag zoom](https://naver.github.io/billboard.js/demo/#Interaction.DragZoom) 25440 * @example 25441 * zoom: { 25442 * enabled: true, 25443 * type: "drag", 25444 * rescale: true, 25445 * extent: [1, 100] // enable more zooming 25446 * x: { 25447 * min: -1, // set min range 25448 * max: 10 // set max range 25449 * }, 25450 * onzoomstart: function(event) { ... }, 25451 * onzoom: function(domain) { ... }, 25452 * onzoomend: function(domain) { ... }, 25453 * 25454 * // show reset button when is zoomed-in 25455 * resetButton: true, 25456 * 25457 * resetButton: {
25458 * // onclick callback when reset button is clicked 25459 * onclick: function(button) { 25460 * button; // Reset button element reference 25461 * ... 25462 * }, 25463 * 25464 * // customized text value for reset zoom button 25465 * text: "Unzoom" 25466 * } 25467 * } 25468 * @example 25469 * // importing ESM 25470 * import bb, {zoom} from "billboard.js"; 25471 * 25472 * zoom: { 25473 * enabled: zoom(), 25474 * ... 25475 * } 25476 */ 25477 zoom_enabled: !1, 25478 zoom_type: "wheel", 25479 zoom_extent: undefined, 25480 zoom_privileged: !1, 25481 zoom_rescale: !1, 25482 zoom_onzoom: undefined, 25483 zoom_onzoomstart: undefined, 25484 zoom_onzoomend: undefined, 25485 zoom_resetButton: !0, 25486 zoom_x_min: undefined, 25487 zoom_x_max: undefined 25488}); 25489;// CONCATENATED MODULE: ./src/config/resolver/interaction.ts 25490 25491var interaction_this = undefined; 25492/** 25493 * Copyright (c) 2017 ~ present NAVER Corp. 25494 * billboard.js project is licensed under the MIT license 25495 */ 25496 25497 25498 25499 25500 25501// Chart 25502 25503 25504 25505 25506// ChartInternal 25507 25508 25509 25510 25511// Axis based options 25512 25513 25514 25515 25516let _selectionModule = function selectionModule() { 25517 var _this2 = this; 25518 _newArrowCheck(this, interaction_this); 25519 extend(ChartInternal.prototype, internals_selection); 25520 extend(Chart.prototype, selection); 25521 Options.setOptions([data_selection]); 25522 return (_selectionModule = function () { 25523 _newArrowCheck(this, _this2); 25524 return !0; 25525 }.bind(this))(); 25526 }.bind(undefined), 25527 subchartModule = function () { 25528 var _this3 = this; 25529 _newArrowCheck(this, interaction_this); 25530 extend(ChartInternal.prototype, interactions_subchart); 25531 extend(Chart.prototype, api_subchart); 25532 Options.setOptions([interaction_subchart]); 25533 return (subchartModule = function () { 25534 _newArrowCheck(this, _this3); 25535 return !0; 25536 }.bind(this))(); 25537 }.bind(undefined), 25538 zoomModule = function () { 25539 var _this4 = this; 25540 _newArrowCheck(this, interaction_this); 25541 extend(ChartInternal.prototype, interactions_zoom); 25542 extend(Chart.prototype, api_zoom); 25543 Options.setOptions([interaction_zoom]); 25544 return (zoomModule = function () { 25545 _newArrowCheck(this, _this4); 25546 return !0; 25547 }.bind(this))(); 25548 }.bind(undefined); 25549;// CONCATENATED MODULE: ./src/core.ts 25550/** 25551 * Copyright (c) 2017 ~ present NAVER Corp. 25552 * billboard project is licensed under the MIT license 25553 */ 25554 25555 25556 25557// eslint-disable-next-line no-use-before-define 25558 25559let _defaults = {}; 25560 25561/** 25562 * @namespace bb 25563 * @version 3.10.3 25564 */ 25565const bb = { 25566 /** 25567 * Version information 25568 * @property {string} version version 25569 * @example 25570 * bb.version; // "1.0.0" 25571 * @memberof bb 25572 */ 25573 version: "3.10.3", 25574 /** 25575 * Generate chart 25576 * - **NOTE:** Bear in mind for the possiblity of ***throwing an error***, during the generation when: 25577 * - Unused option value is given. 25578 * - ex) For `data.type="pie"` option, setting 'axis' option can cause unexpected generation error. 25579 * - Insufficient value is given for certain option used. 25580 * - ex) `data: { x: "x", columns: [["x"], ["data1", 30, 200, 100]] }` 25581 * @param {Options} config chart options 25582 * @memberof bb 25583 * @returns {Chart} 25584 * @see {@link Options} for different generation options 25585 * @see {@link Chart} for different methods API 25586 * @example 25587 * <!-- chart holder --> 25588 * <div id="LineChart"></div> 25589 * @example 25590 * // Generate chart with options 25591 * var chart = bb.generate({ 25592 * "bindto": "#LineChart" 25593 * "data": { 25594 * "columns": [ 25595 * ["data1", 30, 200, 100, 400, 150, 250], 25596 * ["data2", 50, 20, 10, 40, 15, 25] 25597 * ], 25598 * "type": "line" 25599 * } 25600 * }); 25601 * 25602 * // call some API 25603 * // ex) get the data of 'data1' 25604 * chart.data("data1"); 25605 * @example 25606 * // Generate chart by importing ESM 25607 * // Import types to be used only, where this will make smaller bundle size. 25608 * import bb, { 25609 * area, 25610 * areaLineRange, 25611 * areaSpline, 25612 * areaSplineRange, 25613 * areaStep, 25614 * bar, 25615 * bubble, 25616 * donut, 25617 * gauge, 25618 * line, 25619 * pie, 25620 * polar, 25621 * radar, 25622 * scatter, 25623 * spline, 25624 * step 25625 * } 25626 * 25627 * bb.generate({ 25628 * "bindto": "#LineChart" 25629 * "data": { 25630 * "columns": [ 25631 * ["data1", 30, 200, 100, 400, 150, 250], 25632 * ["data2", 50, 20, 10, 40, 15, 25] 25633 * ] 25634 * }, 25635 * type: line(), 25636 * 25637 * // or 25638 * types: { 25639 * data1: bar(), 25640 * data2: step() 25641 * } 25642 * }); 25643 */ 25644 generate: function generate(config) { 25645 const options = mergeObj({}, _defaults, config), 25646 inst = new Chart(options); 25647 inst.internal.charts = this.instance; 25648 this.instance.push(inst); 25649 return inst; 25650 }, 25651 /** 25652 * Set or get global default options. 25653 * - **NOTE:** 25654 * - The options values settings are valid within page context only. 25655 * - If is called multiple times, will override the last value. 25656 * @param {Options} options chart options 25657 * @memberof bb 25658 * @returns {Options} 25659 * @see {@link Options} 25660 * @example
25661 * // Set same option value as for `.generate()` 25662 * bb.defaults({ 25663 * data: { 25664 * type: "bar" 25665 * } 25666 * }); 25667 * 25668 * bb.defaults(); // {data:{type: "bar"}} 25669 * 25670 * // data.type defaults to 'bar' 25671 * var chart = bb.generate({ ... }); 25672 */ 25673 defaults: function defaults(options) { 25674 if (isObject(options)) { 25675 _defaults = options; 25676 } 25677 return _defaults; 25678 }, 25679 /** 25680 * An array containing instance created 25681 * @property {Array} instance instance array 25682 * @example 25683 * // generate charts 25684 * var chart1 = bb.generate(...); 25685 * var chart2 = bb.generate(...); 25686 * 25687 * bb.instance; // [ chart1, chart2, ... ] 25688 * @memberof bb 25689 */ 25690 instance: [], 25691 /** 25692 * Namespace for plugins 25693 * @property {object} plugin plugin namespace 25694 * @example 25695 * // Stanford diagram plugin 25696 * bb.plugin.stanford; 25697 * @memberof bb 25698 */ 25699 plugin: {} 25700}; 25701;// CONCATENATED MODULE: ./src/index.ts 25702 25703var src_this = undefined; 25704/** 25705 * Copyright (c) 2017 ~ present NAVER Corp. 25706 * billboard project is licensed under the MIT license 25707 */ 25708 25709 25710 25711// extends shape modules 25712Object.keys(resolver_shape_namespaceObject).forEach(function (v) { 25713 _newArrowCheck(this, src_this); 25714 return resolver_shape_namespaceObject[v](); 25715}.bind(undefined)); 25716 25717// extends interaction modules 25718Object.keys(resolver_interaction_namespaceObject).forEach(function (v) { 25719 _newArrowCheck(this, src_this); 25720 return resolver_interaction_namespaceObject[v](); 25721}.bind(undefined)); 25722 25723}(); 25724/******/ return __webpack_exports__; 25725/******/ })() 25726; 25727}); 25728
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.