UNPKG

billboard.js

Version:

Re-usable easy interface JavaScript chart library, based on D3 v4+

1,389 lines (1,216 loc) 189 kB
/*! * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license * * billboard.js, JavaScript chart library * https://naver.github.io/billboard.js/ * * @version 2.0.0-next.5 * @requires billboard.js * @summary billboard.js plugin */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("d3-selection"), require("d3-interpolate"), require("d3-color"), require("d3-scale"), require("d3-brush"), require("d3-axis"), require("d3-format")); else if(typeof define === 'function' && define.amd) define("stanford", ["d3-selection", "d3-interpolate", "d3-color", "d3-scale", "d3-brush", "d3-axis", "d3-format"], factory); else if(typeof exports === 'object') exports["stanford"] = factory(require("d3-selection"), require("d3-interpolate"), require("d3-color"), require("d3-scale"), require("d3-brush"), require("d3-axis"), require("d3-format")); else root["bb"] = root["bb"] || {}, root["bb"]["plugin"] = root["bb"]["plugin"] || {}, root["bb"]["plugin"]["stanford"] = factory(root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"], root["d3"]); })(this, function(__WEBPACK_EXTERNAL_MODULE__4__, __WEBPACK_EXTERNAL_MODULE__6__, __WEBPACK_EXTERNAL_MODULE__7__, __WEBPACK_EXTERNAL_MODULE__8__, __WEBPACK_EXTERNAL_MODULE__11__, __WEBPACK_EXTERNAL_MODULE__12__, __WEBPACK_EXTERNAL_MODULE__13__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 16); /******/ }) /************************************************************************/ /******/ ([ /* 0 */, /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _assertThisInitialized; }); function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } /***/ }), /* 2 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _inheritsLoose; }); function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } /***/ }), /* 3 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return _defineProperty; }); function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /***/ }), /* 4 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__4__; /***/ }), /* 5 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Plugin; }); /* harmony import */ var _babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3); /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * Base class to generate billboard.js plugin * @class Plugin */ /** * Version info string for plugin * @name version * @static * @memberof Plugin * @type {string} * @example * bb.plugin.stanford.version; // ex) 1.9.0 */ var Plugin = /*#__PURE__*/function () { /** * Constructor * @param {Any} options config option object * @private */ function Plugin(options) { options === void 0 && (options = {}), Object(_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(this, "$$", void 0), Object(_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(this, "options", void 0), this.options = options; } /** * Lifecycle hook for 'beforeInit' phase. * @private */ var _proto = Plugin.prototype; return _proto.$beforeInit = function $beforeInit() {} /** * Lifecycle hook for 'init' phase. * @private */ , _proto.$init = function $init() {} /** * Lifecycle hook for 'afterInit' phase. * @private */ , _proto.$afterInit = function $afterInit() {} /** * Lifecycle hook for 'redraw' phase. * @private */ , _proto.$redraw = function $redraw() {} /** * Lifecycle hook for 'willDestroy' phase. * @private */ , _proto.$willDestroy = function $willDestroy() { var _this = this; Object.keys(this).forEach(function (key) { _this[key] = null, delete _this[key]; }); }, Plugin; }(); Object(_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(Plugin, "version", "2.0.0-next.5"); /***/ }), /* 6 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__6__; /***/ }), /* 7 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__7__; /***/ }), /* 8 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__8__; /***/ }), /* 9 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * CSS class names definition * @private */ /* harmony default export */ __webpack_exports__["a"] = ({ arc: "bb-arc", arcLabelLine: "bb-arc-label-line", arcs: "bb-arcs", area: "bb-area", areas: "bb-areas", axis: "bb-axis", axisX: "bb-axis-x", axisXLabel: "bb-axis-x-label", axisY: "bb-axis-y", axisY2: "bb-axis-y2", axisY2Label: "bb-axis-y2-label", axisYLabel: "bb-axis-y-label", bar: "bb-bar", bars: "bb-bars", brush: "bb-brush", button: "bb-button", buttonZoomReset: "bb-zoom-reset", chart: "bb-chart", chartArc: "bb-chart-arc", chartArcs: "bb-chart-arcs", chartArcsBackground: "bb-chart-arcs-background", chartArcsGaugeMax: "bb-chart-arcs-gauge-max", chartArcsGaugeMin: "bb-chart-arcs-gauge-min", chartArcsGaugeUnit: "bb-chart-arcs-gauge-unit", chartArcsTitle: "bb-chart-arcs-title", chartArcsGaugeTitle: "bb-chart-arcs-gauge-title", chartBar: "bb-chart-bar", chartBars: "bb-chart-bars", chartCircles: "bb-chart-circles", chartLine: "bb-chart-line", chartLines: "bb-chart-lines", chartRadar: "bb-chart-radar", chartRadars: "bb-chart-radars", chartText: "bb-chart-text", chartTexts: "bb-chart-texts", circle: "bb-circle", circles: "bb-circles", colorPattern: "bb-color-pattern", colorScale: "bb-colorscale", defocused: "bb-defocused", dragarea: "bb-dragarea", empty: "bb-empty", eventRect: "bb-event-rect", eventRects: "bb-event-rects", eventRectsMultiple: "bb-event-rects-multiple", eventRectsSingle: "bb-event-rects-single", focused: "bb-focused", gaugeValue: "bb-gauge-value", grid: "bb-grid", gridLines: "bb-grid-lines", legend: "bb-legend", legendBackground: "bb-legend-background", legendItem: "bb-legend-item", legendItemEvent: "bb-legend-item-event", legendItemFocused: "bb-legend-item-focused", legendItemHidden: "bb-legend-item-hidden", legendItemPoint: "bb-legend-item-point", legendItemTile: "bb-legend-item-tile", level: "bb-level", levels: "bb-levels", line: "bb-line", lines: "bb-lines", main: "bb-main", region: "bb-region", regions: "bb-regions", selectedCircle: "bb-selected-circle", selectedCircles: "bb-selected-circles", shape: "bb-shape", shapes: "bb-shapes", stanfordElements: "bb-stanford-elements", stanfordLine: "bb-stanford-line", stanfordLines: "bb-stanford-lines", stanfordRegion: "bb-stanford-region", stanfordRegions: "bb-stanford-regions", target: "bb-target", text: "bb-text", texts: "bb-texts", title: "bb-title", tooltip: "bb-tooltip", tooltipContainer: "bb-tooltip-container", tooltipName: "bb-tooltip-name", xgrid: "bb-xgrid", xgridFocus: "bb-xgrid-focus", xgridLine: "bb-xgrid-line", xgridLines: "bb-xgrid-lines", xgrids: "bb-xgrids", ygrid: "bb-ygrid", ygridFocus: "bb-ygrid-focus", ygridLine: "bb-ygrid-line", ygridLines: "bb-ygrid-lines", ygrids: "bb-ygrids", zoomBrush: "bb-zoom-brush", EXPANDED: "_expanded_", SELECTED: "_selected_", INCLUDED: "_included_", TextOverlapping: "text-overlapping" }); /***/ }), /* 10 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return loadConfig; }); /* harmony import */ var _module_util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(18); /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * Load configuration option * @param {object} config User's generation config value * @private */ function loadConfig(config) { var target, keys, read, thisConfig = this.config, find = function () { var key = keys.shift(); return key && target && Object(_module_util__WEBPACK_IMPORTED_MODULE_0__[/* isObjectType */ "e"])(target) && key in target ? (target = target[key], find()) : key ? undefined : target; }; Object.keys(thisConfig).forEach(function (key) { target = config, keys = key.split("_"), read = find(), Object(_module_util__WEBPACK_IMPORTED_MODULE_0__[/* isDefined */ "b"])(read) && (thisConfig[key] = read); }); } /***/ }), /* 11 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__11__; /***/ }), /* 12 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__12__; /***/ }), /* 13 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__13__; /***/ }), /* 14 */, /* 15 */, /* 16 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // EXPORTS __webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ stanford_Stanford; }); // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js var assertThisInitialized = __webpack_require__(1); // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js var inheritsLoose = __webpack_require__(2); // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js var defineProperty = __webpack_require__(3); // EXTERNAL MODULE: external {"commonjs":"d3-interpolate","commonjs2":"d3-interpolate","amd":"d3-interpolate","root":"d3"} var external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_ = __webpack_require__(6); // EXTERNAL MODULE: external {"commonjs":"d3-color","commonjs2":"d3-color","amd":"d3-color","root":"d3"} var external_commonjs_d3_color_commonjs2_d3_color_amd_d3_color_root_d3_ = __webpack_require__(7); // EXTERNAL MODULE: external {"commonjs":"d3-scale","commonjs2":"d3-scale","amd":"d3-scale","root":"d3"} var external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_ = __webpack_require__(8); // EXTERNAL MODULE: ./src/config/classes.ts var classes = __webpack_require__(9); // EXTERNAL MODULE: ./src/config/config.ts var config_config = __webpack_require__(10); // EXTERNAL MODULE: ./src/Plugin/Plugin.ts var Plugin = __webpack_require__(5); // CONCATENATED MODULE: ./src/Plugin/stanford/Options.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * Stanford diagram plugin option class * @class StanfordOptions * @param {Options} options Stanford plugin options * @augments Plugin * @returns {StanfordOptions} * @private */ var Options = function () { return { /** * Set the color of the color scale. This function receives a value between 0 and 1, and should return a color. * @name colors * @memberof plugin-stanford * @type {Function} * @default undefined * @example * colors: d3.interpolateHslLong( * d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5) * ) */ colors: undefined, /** * Specify the key of epochs values in the data. * @name epochs * @memberof plugin-stanford * @type {Array} * @default [] * @example * epochs: [ 1, 1, 2, 2, ... ] */ epochs: [], /** * Show additional lines anywhere on the chart. * - Each line object should consist with following options: * * | Key | Type | Description | * | --- | --- | --- | * | x1 | Number | Starting position on the x axis | * | y1 | Number | Starting position on the y axis | * | x2 | Number | Ending position on the x axis | * | y2 | Number | Ending position on the y axis | * | class | String | Optional value. Set a custom css class to this line. | * @type {Array} * @memberof plugin-stanford * @default [] * @example * lines: [ * { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" }, * { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" } * ] */ lines: [], /** * Set scale values * @name scale * @memberof plugin-stanford * @type {object} * @property {object} [scale] scale object * @property {number} [scale.min=undefined] Minimum value of the color scale. Default: lowest value in epochs * @property {number} [scale.max=undefined] Maximum value of the color scale. Default: highest value in epochs * @property {number} [scale.width=20] Width of the color scale * @property {string|Function} [scale.format=undefined] Format of the axis of the color scale. Use 'pow10' to format as powers of 10 or a custom function. Example: d3.format("d") * @example * scale: { * max: 10000, * min: 1, * width: 500, * * // specify 'pow10' to format as powers of 10 * format: "pow10", * * // or specify a format function * format: function(x) { * return x +"%"; * } * }, */ scale_min: undefined, scale_max: undefined, scale_width: 20, scale_format: undefined, /** * The padding for color scale element * @name padding * @memberof plugin-stanford * @type {object} * @property {object} [padding] padding object * @property {number} [padding.top=0] Top padding value. * @property {number} [padding.right=0] Right padding value. * @property {number} [padding.bottom=0] Bottom padding value. * @property {number} [padding.left=0] Left padding value. * @example * padding: { * top: 15, * right: 0, * bottom: 0, * left: 0 * }, */ padding_top: 0, padding_right: 0, padding_bottom: 0, padding_left: 0, /** * Show additional regions anywhere on the chart. * - Each region object should consist with following options: * * | Key | Type | Default | Attributes | Description | * | --- | --- | --- | --- | --- | * | points | Array | | | Accepts a group of objects that has x and y.<br>These points should be added in a counter-clockwise fashion to make a closed polygon. | * | opacity | Number | `0.2` | &lt;optional> | Sets the opacity of the region as value between 0 and 1 | * | text | Function | | &lt;optional> | This function receives a value and percentage of the number of epochs in this region.<br>Return a string to place text in the middle of the region. | * | class | String | | &lt;optional> | Se a custom css class to this region, use the fill property in css to set a background color. | * @name regions * @memberof plugin-stanford * @type {Array} * @default [] * @example * regions: [ * { * points: [ // add points counter-clockwise * { x: 0, y: 0 }, * { x: 40, y: 40 }, * { x: 0, y: 40 }, * ], * text: function (value, percentage) { * return `Normal Operations: ${value} (${percentage}%)`; * }, * opacity: 0.2, // 0 to 1 * class: "test-polygon1" * }, * ... * ] */ regions: [] }; }; // CONCATENATED MODULE: ./src/Plugin/stanford/classes.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * CSS class names definition * @private */ /* harmony default export */ var stanford_classes = ({ colorScale: "bb-colorscale", stanfordElements: "bb-stanford-elements", stanfordLine: "bb-stanford-line", stanfordLines: "bb-stanford-lines", stanfordRegion: "bb-stanford-region", stanfordRegions: "bb-stanford-regions" }); // EXTERNAL MODULE: ./src/module/util.ts + 1 modules var util = __webpack_require__(18); // CONCATENATED MODULE: ./src/Plugin/stanford/util.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license * @ignore */ /** * Check if point is in region * @param {object} point Point * @param {Array} region Region * @returns {boolean} * @private */ function pointInRegion(point, region) { // thanks to: http://bl.ocks.org/bycoffe/5575904 // ray-casting algorithm based on // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html var x = point.x, y = point.value, inside = !1; for (var i = 0, j = region.length - 1; i < region.length; j = i++) { var xi = region[i].x, yi = region[i].y, xj = region[j].x, yj = region[j].y; yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi && (inside = !inside); } return inside; } /** * Compare epochs * @param {object} a Target * @param {object} b Source * @returns {number} * @private */ function compareEpochs(a, b) { return a.epochs < b.epochs ? -1 : a.epochs > b.epochs ? 1 : 0; } /** * Get region area * @param {Array} points Points * @returns {number} * @private */ function getRegionArea(points) { // thanks to: https://stackoverflow.com/questions/16282330/find-centerpoint-of-polygon-in-javascript for (var point1, point2, area = 0, i = 0, l = points.length, j = l - 1; i < l; j = i, i++) point1 = points[i], point2 = points[j], area += point1.x * point2.y, area -= point1.y * point2.x; return area /= 2, area; } /** * Get centroid * @param {Array} points Points * @returns {object} * @private */ function getCentroid(points) { for (var f, area = getRegionArea(points), x = 0, y = 0, i = 0, l = points.length, j = l - 1; i < l; j = i, i++) { var _point = points[i], _point2 = points[j]; f = _point.x * _point2.y - _point2.x * _point.y, x += (_point.x + _point2.x) * f, y += (_point.y + _point2.y) * f; } return f = area * 6, { x: x / f, y: y / f }; } // CONCATENATED MODULE: ./src/Plugin/stanford/Elements.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ // @ts-nocheck /** * Stanford diagram plugin element class * @class ColorScale * @param {Stanford} owner Stanford instance * @private */ var Elements_Elements = /*#__PURE__*/function () { function Elements(owner) { Object(defineProperty["a" /* default */])(this, "owner", void 0), this.owner = owner; // MEMO: Avoid blocking eventRect var elements = owner.$$.$el.main.select(".bb-chart").append("g").attr("class", stanford_classes.stanfordElements); elements.append("g").attr("class", stanford_classes.stanfordLines), elements.append("g").attr("class", stanford_classes.stanfordRegions); } var _proto = Elements.prototype; return _proto.updateStanfordLines = function updateStanfordLines(duration) { var $$ = this.owner.$$, config = $$.config, main = $$.$el.main, isRotated = config.axis_rotated, xvCustom = this.xvCustom.bind($$), yvCustom = this.yvCustom.bind($$), stanfordLine = main.select("." + stanford_classes.stanfordLines).style("shape-rendering", "geometricprecision").selectAll("." + stanford_classes.stanfordLine).data(this.owner.config.lines); stanfordLine.exit().transition().duration(duration).style("opacity", "0").remove(); // enter var stanfordLineEnter = stanfordLine.enter().append("g"); stanfordLineEnter.append("line").style("opacity", "0"), stanfordLineEnter.merge(stanfordLine).attr("class", function (d) { return stanford_classes.stanfordLine + (d.class ? " " + d.class : ""); }).select("line").transition().duration(duration).attr("x1", function (d) { return isRotated ? yvCustom(d, "y1") : xvCustom(d, "x1"); }).attr("x2", function (d) { return isRotated ? yvCustom(d, "y2") : xvCustom(d, "x2"); }).attr("y1", function (d) { return isRotated ? xvCustom(d, "x1") : yvCustom(d, "y1"); }).attr("y2", function (d) { return isRotated ? xvCustom(d, "x2") : yvCustom(d, "y2"); }).transition().style("opacity", "1"); }, _proto.updateStanfordRegions = function updateStanfordRegions(duration) { var $$ = this.owner.$$, config = $$.config, main = $$.$el.main, isRotated = config.axis_rotated, xvCustom = this.xvCustom.bind($$), yvCustom = this.yvCustom.bind($$), countPointsInRegion = this.owner.countEpochsInRegion.bind($$), stanfordRegion = main.select("." + stanford_classes.stanfordRegions).selectAll("." + stanford_classes.stanfordRegion).data(this.owner.config.regions); stanfordRegion.exit().transition().duration(duration).style("opacity", "0").remove(); // enter var stanfordRegionEnter = stanfordRegion.enter().append("g"); stanfordRegionEnter.append("polygon").style("opacity", "0"), stanfordRegionEnter.append("text").attr("transform", isRotated ? "rotate(-90)" : "").style("opacity", "0"), stanfordRegion = stanfordRegionEnter.merge(stanfordRegion), stanfordRegion.attr("class", function (d) { return stanford_classes.stanfordRegion + (d.class ? " " + d.class : ""); }).select("polygon").transition().duration(duration).attr("points", function (d) { return d.points.map(function (value) { return [isRotated ? yvCustom(value, "y") : xvCustom(value, "x"), isRotated ? xvCustom(value, "x") : yvCustom(value, "y")].join(","); }).join(" "); }).transition().style("opacity", function (d) { return (d.opacity ? d.opacity : .2) + ""; }), stanfordRegion.select("text").transition().duration(duration).attr("x", function (d) { return isRotated ? yvCustom(getCentroid(d.points), "y") : xvCustom(getCentroid(d.points), "x"); }).attr("y", function (d) { return isRotated ? xvCustom(getCentroid(d.points), "x") : yvCustom(getCentroid(d.points), "y"); }).text(function (d) { if (d.text) { var _countPointsInRegion = countPointsInRegion(d.points), value = _countPointsInRegion.value, percentage = _countPointsInRegion.percentage; return d.text(value, percentage); } return ""; }).attr("text-anchor", "middle").attr("dominant-baseline", "middle").transition().style("opacity", "1"); }, _proto.updateStanfordElements = function updateStanfordElements(duration) { duration === void 0 && (duration = 0), this.updateStanfordLines(duration), this.updateStanfordRegions(duration); }, _proto.xvCustom = function xvCustom(d, xyValue) { var $$ = this, axis = $$.axis, config = $$.config, value = xyValue ? d[xyValue] : $$.getBaseValue(d); return axis.isTimeSeries() ? value = util["g" /* parseDate */].call($$, value) : axis.isCategorized() && Object(util["f" /* isString */])(value) && (value = config.axis_x_categories.indexOf(d.value)), Math.ceil($$.scale.x(value)); }, _proto.yvCustom = function yvCustom(d, xyValue) { var $$ = this, yScale = d.axis && d.axis === "y2" ? $$.scale.y2 : $$.scale.y, value = xyValue ? d[xyValue] : $$.getBaseValue(d); return Math.ceil(yScale(value)); }, Elements; }(); // EXTERNAL MODULE: external {"commonjs":"d3-axis","commonjs2":"d3-axis","amd":"d3-axis","root":"d3"} var external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_ = __webpack_require__(12); // EXTERNAL MODULE: external {"commonjs":"d3-format","commonjs2":"d3-format","amd":"d3-format","root":"d3"} var external_commonjs_d3_format_commonjs2_d3_format_amd_d3_format_root_d3_ = __webpack_require__(13); // CONCATENATED MODULE: ./src/Plugin/stanford/ColorScale.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * Stanford diagram plugin color scale class * @class ColorScale * @param {Stanford} owner Stanford instance * @private */ var ColorScale_ColorScale = /*#__PURE__*/function () { function ColorScale(owner) { Object(defineProperty["a" /* default */])(this, "owner", void 0), Object(defineProperty["a" /* default */])(this, "colorScale", void 0), this.owner = owner; } var _proto = ColorScale.prototype; return _proto.drawColorScale = function drawColorScale() { var _this$owner = this.owner, $$ = _this$owner.$$, config = _this$owner.config, target = $$.data.targets[0], height = $$.state.height - config.padding_bottom - config.padding_top, barWidth = config.scale_width, barHeight = 5, points = Object(util["a" /* getRange */])(config.padding_bottom, height, barHeight), inverseScale = Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleSequential"])(target.colors).domain([points[points.length - 1], points[0]]); this.colorScale && this.colorScale.remove(), this.colorScale = $$.$el.svg.append("g").attr("width", 50).attr("height", height).attr("class", stanford_classes.colorScale), this.colorScale.append("g").attr("transform", "translate(0, " + config.padding_top + ")").selectAll("bars").data(points).enter().append("rect").attr("y", function (d, i) { return i * barHeight; }).attr("x", 0).attr("width", barWidth).attr("height", barHeight).attr("fill", function (d) { return inverseScale(d); }); // Legend Axis var axisScale = Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleLog"])().domain([target.minEpochs, target.maxEpochs]).range([points[0] + config.padding_top + points[points.length - 1] + barHeight - 1, points[0] + config.padding_top]), legendAxis = Object(external_commonjs_d3_axis_commonjs2_d3_axis_amd_d3_axis_root_d3_["axisRight"])(axisScale), scaleFormat = config.scale_format; scaleFormat === "pow10" ? legendAxis.tickValues([1, 10, 100, 1e3, 1e4, 1e5, 1e6, 1e7]) : Object(util["d" /* isFunction */])(scaleFormat) ? legendAxis.tickFormat(scaleFormat) : legendAxis.tickFormat(Object(external_commonjs_d3_format_commonjs2_d3_format_amd_d3_format_root_d3_["format"])("d")); // Draw Axis var axis = this.colorScale.append("g").attr("class", "legend axis").attr("transform", "translate(" + barWidth + ",0)").call(legendAxis); scaleFormat === "pow10" && axis.selectAll(".tick text").text(null).filter(function (d) { return d / Math.pow(10, Math.ceil(Math.log(d) / Math.LN10 - 1e-12)) === 1; }) // Power of Ten .text(10).append("tspan").attr("dy", "-.7em") // https://bl.ocks.org/mbostock/6738229 .text(function (d) { return Math.round(Math.log(d) / Math.LN10); }), this.colorScale.attr("transform", "translate(" + ($$.state.current.width - this.xForColorScale()) + ", 0)"); }, _proto.xForColorScale = function xForColorScale() { return this.owner.config.padding_right + this.colorScale.node().getBBox().width; }, _proto.getColorScalePadding = function getColorScalePadding() { return this.xForColorScale() + this.owner.config.padding_left + 20; }, ColorScale; }(); // CONCATENATED MODULE: ./src/Plugin/stanford/index.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ // @ts-nocheck /** * Stanford diagram plugin * - **NOTE:** * - Plugins aren't built-in. Need to be loaded or imported to be used. * - Non required modules from billboard.js core, need to be installed separately. * - Is preferable use `scatter` as data.type * - **Required modules:** * - [d3-selection](https://github.com/d3/d3-selection) * - [d3-interpolate](https://github.com/d3/d3-interpolate) * - [d3-color](https://github.com/d3/d3-color) * - [d3-scale](https://github.com/d3/d3-scale) * - [d3-brush](https://github.com/d3/d3-brush) * - [d3-axis](https://github.com/d3/d3-axis) * - [d3-format](https://github.com/d3/d3-format) * @class plugin-stanford * @requires d3-selection * @requires d3-interpolate * @requires d3-color * @requires d3-scale * @requires d3-brush * @requires d3-axis * @requires d3-format * @param {object} options Stanford plugin options * @augments Plugin * @returns {Stanford} * @example * var chart = bb.generate({ * data: { * columns: [ ... ], * type: "scatter" * } * ... * plugins: [ * new bb.plugin.stanford({ * colors: d3.interpolateHslLong( * d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5) * ), * epochs: [ 1, 1, 2, 2, ... ], * lines: [ * { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" }, * { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" } * ], * scale: { * max: 10000, * min: 1, * width: 500, * format: 'pow10', * }, * padding: { * top: 15, * right: 0, * bottom: 0, * left: 0 * }, * regions: [ * { * points: [ // add points counter-clockwise * { x: 0, y: 0 }, * { x: 40, y: 40 }, * { x: 0, y: 40 } * ], * text: function (value, percentage) { * return `Normal Operations: ${value} (${percentage}%)`; * }, * opacity: 0.2, // 0 to 1 * class: "test-polygon1" * }, * ... * ] * } * ] * }); * @example * import {bb} from "billboard.js"; * import Stanford from "billboard.js/dist/billboardjs-plugin-stanford"; * * bb.generate({ * plugins: [ * new Stanford({ ... }) * ] * }) */ var stanford_Stanford = /*#__PURE__*/function (_Plugin) { function Stanford(options) { var _this; return _this = _Plugin.call(this, options) || this, Object(defineProperty["a" /* default */])(Object(assertThisInitialized["a" /* default */])(_this), "config", void 0), Object(defineProperty["a" /* default */])(Object(assertThisInitialized["a" /* default */])(_this), "colorScale", void 0), Object(defineProperty["a" /* default */])(Object(assertThisInitialized["a" /* default */])(_this), "elements", void 0), _this.config = new Options(), Object(assertThisInitialized["a" /* default */])(_this) || Object(assertThisInitialized["a" /* default */])(_this); } Object(inheritsLoose["a" /* default */])(Stanford, _Plugin); var _proto = Stanford.prototype; return _proto.$beforeInit = function $beforeInit() { var _this2 = this, $$ = this.$$; $$.config.data_xSort = !1, $$.isMultipleX = function () { return !0; }, $$.showGridFocus = function () {}, $$.labelishData = function (d) { return d.values; }, $$.opacityForCircle = function () { return 1; }; var getCurrentPaddingRight = $$.getCurrentPaddingRight.bind($$); $$.getCurrentPaddingRight = function () { return getCurrentPaddingRight() + (_this2.colorScale ? _this2.colorScale.getColorScalePadding() : 0); }; }, _proto.$init = function $init() { var $$ = this.$$; config_config["a" /* loadConfig */].call(this, this.options), $$.color = this.getStanfordPointColor.bind($$), this.colorScale = new ColorScale_ColorScale(this), this.elements = new Elements_Elements(this), this.convertData(), this.initStanfordData(), this.setStanfordTooltip(), this.colorScale.drawColorScale(), this.$redraw(); }, _proto.$redraw = function $redraw(duration) { this.colorScale && this.colorScale.drawColorScale(), this.elements && this.elements.updateStanfordElements(duration); }, _proto.getOptions = function getOptions() { return new Options(); }, _proto.convertData = function convertData() { var data = this.$$.data.targets, epochs = this.options.epochs; data.forEach(function (d) { d.values.forEach(function (v, i) { v.epochs = epochs[i]; }), d.minEpochs = undefined, d.maxEpochs = undefined, d.colors = undefined, d.colorscale = undefined; }); }, _proto.xvCustom = function xvCustom(d, xyValue) { var $$ = this, axis = $$.axis, config = $$.config, value = xyValue ? d[xyValue] : $$.getBaseValue(d); return axis.isTimeSeries() ? value = util["g" /* parseDate */].call($$, value) : axis.isCategorized() && Object(util["f" /* isString */])(value) && (value = config.axis_x_categories.indexOf(d.value)), Math.ceil($$.scale.x(value)); }, _proto.yvCustom = function yvCustom(d, xyValue) { var $$ = this, scale = $$.scale, yScale = d.axis && d.axis === "y2" ? scale.y2 : scale.y, value = xyValue ? d[xyValue] : $$.getBaseValue(d); return Math.ceil(yScale(value)); }, _proto.initStanfordData = function initStanfordData() { var config = this.config, target = this.$$.data.targets[0]; target.values.sort(compareEpochs); // Get array of epochs var epochs = target.values.map(function (a) { return a.epochs; }); target.minEpochs = isNaN(config.scale_min) ? Math.min.apply(Math, epochs) : config.scale_min, target.maxEpochs = isNaN(config.scale_max) ? Math.max.apply(Math, epochs) : config.scale_max, target.colors = Object(util["d" /* isFunction */])(config.colors) ? config.colors : Object(external_commonjs_d3_interpolate_commonjs2_d3_interpolate_amd_d3_interpolate_root_d3_["interpolateHslLong"])(Object(external_commonjs_d3_color_commonjs2_d3_color_amd_d3_color_root_d3_["hsl"])(250, 1, .5), Object(external_commonjs_d3_color_commonjs2_d3_color_amd_d3_color_root_d3_["hsl"])(0, 1, .5)), target.colorscale = Object(external_commonjs_d3_scale_commonjs2_d3_scale_amd_d3_scale_root_d3_["scaleSequentialLog"])(target.colors).domain([target.minEpochs, target.maxEpochs]); }, _proto.getStanfordPointColor = function getStanfordPointColor(d) { var target = this.data.targets[0]; return target.colorscale(d.epochs); }, _proto.setStanfordTooltip = function setStanfordTooltip() { var config = this.$$.config; Object(util["c" /* isEmpty */])(config.tooltip_contents) && (config.tooltip_contents = function (d, defaultTitleFormat, defaultValueFormat, color) { var html = "<table class=\"" + classes["a" /* default */].tooltip + "\"><tbody>"; return d.forEach(function (v) { html += "<tr>\n\t\t\t\t\t\t\t<th>" + defaultTitleFormat(config.data_x) + "</th>\n\t\t\t\t\t\t\t<th class=\"value\">" + defaultValueFormat(v.x) + "</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th>" + defaultTitleFormat(v.id) + "</th>\n\t\t\t\t\t\t\t<th class=\"value\">" + defaultValueFormat(v.value) + "</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t<tr class=\"" + classes["a" /* default */].tooltipName + "-" + v.id + "\">\n\t\t\t\t\t\t\t<td class=\"name\"><span style=\"background-color:" + color(v) + "\"></span>" + defaultTitleFormat("Epochs") + "</td>\n\t\t\t\t\t\t\t<td class=\"value\">" + defaultValueFormat(v.epochs) + "</td>\n\t\t\t\t\t\t</tr>"; }), html + "</tbody></table>"; }); }, _proto.countEpochsInRegion = function countEpochsInRegion(region) { var $$ = this, target = $$.data.targets[0], total = target.values.reduce(function (accumulator, currentValue) { return accumulator + +currentValue.epochs; }, 0), value = target.values.reduce(function (accumulator, currentValue) { return pointInRegion(currentValue, region) ? accumulator + +currentValue.epochs : accumulator; }, 0); return { value: value, percentage: value === 0 ? 0 : +(value / total * 100).toFixed(1) }; }, Stanford; }(Plugin["a" /* default */]); /***/ }), /* 17 */, /* 18 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // EXPORTS __webpack_require__.d(__webpack_exports__, "a", function() { return /* binding */ getRange; }); __webpack_require__.d(__webpack_exports__, "b", function() { return /* binding */ isDefined; }); __webpack_require__.d(__webpack_exports__, "c", function() { return /* binding */ isEmpty; }); __webpack_require__.d(__webpack_exports__, "d", function() { return /* binding */ isFunction; }); __webpack_require__.d(__webpack_exports__, "e", function() { return /* binding */ isObjectType; }); __webpack_require__.d(__webpack_exports__, "f", function() { return /* binding */ isString; }); __webpack_require__.d(__webpack_exports__, "g", function() { return /* binding */ parseDate; }); // UNUSED EXPORTS: asHalfPixel, brushEmpty, callFn, capitalize, ceil10, convertInputType, deepClone, diffDomain, endall, emulateEvent, extend, getBrushSelection, getBoundingRect, getCssRules, getMinMax, getOption, getPathBox, getRandom, getRectSegList, getTranslation, getUnique, hasValue, isArray, isboolean, isNumber, isObject, isTabVisible, isUndefined, isValue, mergeArray, mergeObj, notEmpty, sanitise, setTextValue, sortValue, toArray, tplProcess // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js var defineProperty = __webpack_require__(3); // EXTERNAL MODULE: external {"commonjs":"d3-selection","commonjs2":"d3-selection","amd":"d3-selection","root":"d3"} var external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_ = __webpack_require__(4); // EXTERNAL MODULE: external {"commonjs":"d3-brush","commonjs2":"d3-brush","amd":"d3-brush","root":"d3"} var external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_ = __webpack_require__(11); // CONCATENATED MODULE: ./src/module/browser.ts /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */ /** * Window object * @private */ /* eslint-disable no-new-func, no-undef */ var win = function () { var def = function (o) { return typeof o !== "undefined" && o; }; return def(self) || def(window) || def(global) || def(globalThis) || Function("return this")(); }(), doc = win && win.document; /* eslint-enable no-new-func, no-undef */ // EXTERNAL MODULE: ./src/config/classes.ts var classes = __webpack_require__(9); // CONCATENATED MODULE: ./src/module/util.ts function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var source, i = 1; i < arguments.length; i++) source = arguments[i] == null ? {} : arguments[i], i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { Object(defineProperty["a" /* default */])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); return target; } /** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license * @ignore */ var isValue = function (v) { return v || v === 0; }, isFunction = function (v) { return typeof v === "function"; }, isString = function (v) { return typeof v === "string"; }, isNumber = function (v) { return typeof v === "number"; }, isUndefined = function (v) { return typeof v === "undefined"; }, isDefined = function (v) { return typeof v !== "undefined"; }, isboolean = function (v) { return typeof v === "boolean"; }, ceil10 = function (v) { return Math.ceil(v / 10) * 10; }, asHalfPixel = function (n) { return Math.ceil(n) + .5; }, diffDomain = function (d) { return d[1] - d[0]; }, isObjectType = function (v) { return typeof v === "object"; }, isEmpty = function (o) { return isUndefined(o) || o === null || isString(o) && o.length === 0 || isObjectType(o) && !(o instanceof Date) && Object.keys(o).length === 0 || isNumber(o) && isNaN(o); }, notEmpty = function (o) { return !isEmpty(o); }, isArray = function (arr) { return Array.isArray(arr); }, isObject = function (obj) { return obj && !obj.nodeType && isObjectType(obj) && !isArray(obj); }; /** * Get specified key value from object * If default value is given, will return if given key value not found * @param {object} options Source object * @param {string} key Key value * @param {*} defaultValue Default value * @returns {*} * @private */ function getOption(options, key, defaultValue) { return isDefined(options[key]) ? options[key] : defaultValue; } /** * Check if value exist in the given object * @param {object} dict Target object to be checked * @param {*} value Value to be checked * @returns {boolean} * @private */ function hasValue(dict, value) { var found = !1; return Object.keys(dict).forEach(function (key) { return dict[key] === value && (found = !0); }), found; } /** * Call function with arguments * @param {Function} fn Function to be called * @param {*} args Arguments * @returns {boolean} true: fn is function, false: fn is not function * @private */ function callFn(fn) { for (var isFn = isFunction(fn), _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) args[_key - 1] = arguments[_key]; return isFn && fn.call.apply(fn, args), isFn; } /** * Call function after all transitions ends * @param {d3.transition} transition Transition * @param {Fucntion} cb Callback function * @private */ function endall(transition, cb) { var n = 0; transition.each(function () { return ++n; }).on("end", function () { for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) args[_key2] = arguments[_key2]; --n || cb.apply.apply(cb, [this].concat(args)); }); } /** * Replace tag sign to html entity * @param {string} str Target string value * @returns {string} * @private */ function sanitise(str) { return isString(str) ? str.replace(/</g, "&lt;").replace(/>/g, "&gt;") : str; } /** * Set text value. If there's multiline add nodes. * @param {d3Selection} node Text node * @param {string} text Text value string * @param {Array} dy dy value for multilined text * @param {boolean} toMiddle To be alingned vertically middle * @private */ function setTextValue(node, text, dy, toMiddle) { if (dy === void 0 && (dy = [-1, 1]), toMiddle === void 0 && (toMiddle = !1), node && isString(text)) if (text.indexOf("\n") === -1) node.text(text);else { var diff = [node.text(), text].map(function (v) { return v.replace(/[\s\n]/g, ""); }); if (diff[0] !== diff[1]) { var multiline = text.split("\n"), len = toMiddle ? multiline.length - 1 : 1; node.html(""), multiline.forEach(function (v, i) { node.append("tspan").attr("x", 0).attr("dy", (i === 0 ? dy[0] * len : dy[1]) + "em").text(v); }); } } } /** * Substitution of SVGPathSeg API polyfill * @param {SVGGraphicsElement} path Target svg element * @returns {Array} * @private */ function getRectSegList(path) { /* * seg1 ---------- seg2 * | | * | | * | | * seg0 ---------- seg3 * */ var _path$getBBox = path.getBBox(), x = _path$getBBox.x, y = _path$getBBox.y, width = _path$getBBox.width, height = _path$getBBox.height; return [{ x: x, y: y + height }, // seg0 { x: x, y: y }, // seg1 { x: x + width, y: y }, // seg2 { x: x + width, y: y + height } // seg3 ]; } /** * Get svg bounding path box dimension * @param {SVGGraphicsElement} path Target svg element * @returns {object} * @private */ function getPathBox(path) { var _path$getBoundingClie = path.getBoundingClientRect(), width = _path$getBoundingClie.width, height = _path$getBoundingClie.height, items = getRectSegList(path), x = items[0].x, y = Math.min(items[0].y, items[1].y); return { x: x, y: y, width: width, height: height }; } /** * Return brush selection array * @param {object} {} Selection object * @param {object} {}.$el Selection object * @returns {d3.brushSelection} * @private */ function getBrushSelection(_ref) { var selection, $el = _ref.$el, event = external_commonjs_d3_selection_commonjs2_d3_selection_amd_d3_selection_root_d3_["event"], main = $el.subchart.main || $el.main; return event && event.type === "brush" ? selection = event.selection : main && (selection = main.select("." + classes["a" /* default */].brush).node()) && (selection = Object(external_commonjs_d3_brush_commonjs2_d3_brush_amd_d3_brush_root_d3_["brushSelection"])(selection)), selection; } /** * Get boundingClientRect. * Cache the evaluated value once it was called. * @param {HTMLElement} node Target element * @returns {object} * @private */ var getBoundingRect = function (node) { return node.rect || (node.rect = node.getBoundingClientRect()); }; /** * Retrun random number * @param {boolean} asStr Convert returned value as string * @returns {number|string} * @private */ function getRandom(asStr) { asStr === void 0 && (asStr = !0); v