mdt-charts 1.10.0 → 1.11.0

package/dist/listeners.93c655365f908a888f8a.js

@@ -1,278 +0,0 @@
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is not neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./node_modules/css-loader/dist/cjs.js!./src/style/develop.css":
-/*!*********************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./src/style/develop.css ***!
-  \*********************************************************************/
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".wrapper {\\n    margin: 0 auto;\\n    position: relative;\\n}\\n.bar, .area, .donut {\\n    stroke: none;\\n}\\n.line {\\n    fill: none;\\n    stroke-width: 4;\\n}\\n.donut-block * {\\n    transition: filter 0.15s;\\n}\\n.arc {\\n    transition: opacity 0.3s;\\n}\\n.data-label {\\n    font-family: \\\"Roboto\\\";\\n    font-style: normal;\\n    font-weight: 300;\\n    font-size: 12px;\\n    line-height: 140.62%;\\n    color: #444444;\\n    cursor: default;\\n}\\n.bar-item {\\n    transition: opacity 0.3s, filter 0.3s;\\n}\\n\\n\\n/*========================================================================== Common classes */\\n.charts-opacity-inactive {\\n    opacity: 0.6;\\n}\\n\\n/* EXTENDED FOR SPECIFIC STYLES */\\n.legend-item.charts-opacity-inactive {\\n    opacity: 0.45;\\n}\\n\\n\\n/*========================================================================== Legend */\\n.legend-item {\\n    cursor: default;\\n    transition: opacity 0.1s;\\n    /* will-change: opacity;      */\\n}\\n.legend-item-inline {\\n    white-space: nowrap;\\n}\\n.legend-item-inline:not(:first-of-type) {\\n    margin-left: 20px;\\n}\\n.legend-item-row {\\n    display: flex;\\n}\\n.legend-item-row > span {\\n    display: block;\\n}\\n.mt-15 {\\n    margin-top: 15px;\\n}\\n.mt-10 {\\n    margin-top: 10px;\\n}\\n\\n.legend-label {\\n    font-size: 12px;\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    font-weight: 300;\\n    color: #444444;\\n    width: calc(100% - 19px);\\n    overflow: hidden;\\n    line-height: normal;\\n}\\n.legend-label-nowrap {\\n    white-space: nowrap;\\n    text-overflow: ellipsis;\\n}\\n.legend-circle {\\n    position: relative;\\n    bottom: -1px;\\n    display: inline-block;\\n    width: 11px;\\n    height: 11px;\\n    border-radius: 50%;\\n    margin-right: 8px;\\n}\\n\\n\\n/*========================================================================= Tooltip */\\n.tooltip-block {\\n    pointer-events: none;\\n    z-index: 100;\\n    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));\\n    width: max-content;\\n    max-width: 500px;\\n}\\n.tooltip-content {\\n    position: relative;\\n    pointer-events: none;\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    line-height: 1;\\n    padding: 12px 16px;\\n    color: white;\\n    z-index: 102;\\n    max-width: 500px;\\n    background: rgba(0, 0, 0, 0.82);\\n    font-size: 11px;\\n}\\n.tooltip-arrow {\\n    width: 0;\\n    height: 0;\\n    border-style: solid;\\n    border-color: rgba(0, 0, 0, 0.82) transparent transparent transparent;\\n}\\n\\n/* Tooltip Content */\\n.tooltip-group {\\n    display: flex;\\n}\\n.tooltip-group:not(:first-of-type) {\\n    margin-top: 6px;\\n}\\n.tooltip-circle {\\n    position: relative;\\n    display: block;\\n    width: 9px;\\n    height: 9px;\\n    margin-right: 10px;\\n    border-radius: 50%;\\n}\\n.tooltip-text-item {\\n    font-family: \\\"Roboto\\\" sans-serif;\\n    font-style: normal;\\n    width: 100%;\\n    flex: 1;\\n    display: flex;\\n    font-weight: 400;\\n}\\n\\n.tooltip-line {\\n    stroke: #AAA;\\n    stroke-width: 1px;\\n    stroke-linecap: round;\\n}\\n.tooltip-content .tooltip-head {\\n    font-size: 12px;\\n    margin-bottom: 10px;\\n}\\n.tooltip-content .tooltip-texts {\\n    width: 100%;\\n}\\n\\n.tooltip-content .tooltip-text-item > span {\\n    display: block;\\n}\\n.tooltip-content .tooltip-text-item > span:first-of-type {\\n    flex: 1;\\n}\\n.tooltip-content .tooltip-text-item > span:last-of-type {\\n    flex: 0;\\n}\\n.tooltip-field-value {\\n    margin-left: 0.5rem;\\n}\\n\\n\\n/*========================================================================= Additional */\\n.charts-axis .domain {\\n    stroke: #D2D2D2;\\n}\\n.charts-axis .tick line:first-of-type {\\n    stroke: #D2D2D2;\\n}\\n\\n/* Aggregator */\\n.aggregator-value, .aggregator-name {\\n    color: #000000;\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    font-weight: bold;\\n    line-height: 1;\\n}\\n.aggregator-value {\\n    margin-top: 20px;\\n    pointer-events: auto;\\n}\\n.aggregator-name {\\n    margin-top: 10px;\\n}\\n\\n/* Grid */\\n.grid-line {\\n    stroke: #D2D2D2;\\n    stroke-dasharray: 3;\\n}\\n\\n/* Record overflow */\\n.record-overflow-alert {\\n    background-color: #FFFFFF;;\\n    padding: 5px 10px 5px;\\n    border: 1px solid #0F6698;\\n    box-sizing: border-box;\\n    border-radius: 100px;\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    font-style: normal;\\n    font-weight: 500;\\n    font-size: 10px;\\n    line-height: 140.62%;\\n    color: #0F6698;\\n}\\n.record-overflow-alert .btn-close {\\n    border: none;\\n    background-color: transparent;\\n    cursor: pointer;\\n    font-size: 1.3rem;\\n}\\n\\n/* Embedded label */\\n.embedded-label {\\n    color: #444444;\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    font-style: normal;\\n    font-weight: 500;\\n    font-size: 12px;\\n    line-height: 140.62%;\\n}\\n\\n/* Title */\\n.chart-title {\\n    font-family: \\\"Roboto\\\", sans-serif;\\n    font-style: normal;\\n    font-weight: 500;\\n    font-size: 18px;\\n    line-height: 140.62%;\\n    cursor: default;\\n}\\n\\n/* Mark dots */\\n.charts-dot-hidden {\\n    display: none;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mdt-charts/./src/style/develop.css?./node_modules/css-loader/dist/cjs.js");
-
-/***/ }),
-
-/***/ "./node_modules/css-loader/dist/runtime/api.js":
-/*!*****************************************************!*\
-  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
-  \*****************************************************/
-/***/ ((module) => {
-
-eval("\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (cssWithMappingToString) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join('');\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery, dedupe) {\n    if (typeof modules === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    if (dedupe) {\n      for (var i = 0; i < this.length; i++) {\n        // eslint-disable-next-line prefer-destructuring\n        var id = this[i][0];\n\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = [].concat(modules[_i]);\n\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        // eslint-disable-next-line no-continue\n        continue;\n      }\n\n      if (mediaQuery) {\n        if (!item[2]) {\n          item[2] = mediaQuery;\n        } else {\n          item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n        }\n      }\n\n      list.push(item);\n    }\n  };\n\n  return list;\n};\n\n//# sourceURL=webpack://mdt-charts/./node_modules/css-loader/dist/runtime/api.js?");
-
-/***/ }),
-
-/***/ "./src/style/develop.css":
-/*!*******************************!*\
-  !*** ./src/style/develop.css ***!
-  \*******************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_develop_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../../node_modules/css-loader/dist/cjs.js!./develop.css */ \"./node_modules/css-loader/dist/cjs.js!./src/style/develop.css\");\n\n            \n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_develop_css__WEBPACK_IMPORTED_MODULE_1__.default, options);\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_develop_css__WEBPACK_IMPORTED_MODULE_1__.default.locals || {});\n\n//# sourceURL=webpack://mdt-charts/./src/style/develop.css?");
-
-/***/ }),
-
-/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
-/*!****************************************************************************!*\
-  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
-  \****************************************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("\n\nvar isOldIE = function isOldIE() {\n  var memo;\n  return function memorize() {\n    if (typeof memo === 'undefined') {\n      // Test for IE <= 9 as proposed by Browserhacks\n      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n      // Tests for existence of standard globals is to allow style-loader\n      // to operate correctly into non-standard environments\n      // @see https://github.com/webpack-contrib/style-loader/issues/177\n      memo = Boolean(window && document && document.all && !window.atob);\n    }\n\n    return memo;\n  };\n}();\n\nvar getTarget = function getTarget() {\n  var memo = {};\n  return function memorize(target) {\n    if (typeof memo[target] === 'undefined') {\n      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n        try {\n          // This will throw an exception if access to iframe is blocked\n          // due to cross-origin restrictions\n          styleTarget = styleTarget.contentDocument.head;\n        } catch (e) {\n          // istanbul ignore next\n          styleTarget = null;\n        }\n      }\n\n      memo[target] = styleTarget;\n    }\n\n    return memo[target];\n  };\n}();\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n  var result = -1;\n\n  for (var i = 0; i < stylesInDom.length; i++) {\n    if (stylesInDom[i].identifier === identifier) {\n      result = i;\n      break;\n    }\n  }\n\n  return result;\n}\n\nfunction modulesToDom(list, options) {\n  var idCountMap = {};\n  var identifiers = [];\n\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var count = idCountMap[id] || 0;\n    var identifier = \"\".concat(id, \" \").concat(count);\n    idCountMap[id] = count + 1;\n    var index = getIndexByIdentifier(identifier);\n    var obj = {\n      css: item[1],\n      media: item[2],\n      sourceMap: item[3]\n    };\n\n    if (index !== -1) {\n      stylesInDom[index].references++;\n      stylesInDom[index].updater(obj);\n    } else {\n      stylesInDom.push({\n        identifier: identifier,\n        updater: addStyle(obj, options),\n        references: 1\n      });\n    }\n\n    identifiers.push(identifier);\n  }\n\n  return identifiers;\n}\n\nfunction insertStyleElement(options) {\n  var style = document.createElement('style');\n  var attributes = options.attributes || {};\n\n  if (typeof attributes.nonce === 'undefined') {\n    var nonce =  true ? __webpack_require__.nc : 0;\n\n    if (nonce) {\n      attributes.nonce = nonce;\n    }\n  }\n\n  Object.keys(attributes).forEach(function (key) {\n    style.setAttribute(key, attributes[key]);\n  });\n\n  if (typeof options.insert === 'function') {\n    options.insert(style);\n  } else {\n    var target = getTarget(options.insert || 'head');\n\n    if (!target) {\n      throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n    }\n\n    target.appendChild(style);\n  }\n\n  return style;\n}\n\nfunction removeStyleElement(style) {\n  // istanbul ignore if\n  if (style.parentNode === null) {\n    return false;\n  }\n\n  style.parentNode.removeChild(style);\n}\n/* istanbul ignore next  */\n\n\nvar replaceText = function replaceText() {\n  var textStore = [];\n  return function replace(index, replacement) {\n    textStore[index] = replacement;\n    return textStore.filter(Boolean).join('\\n');\n  };\n}();\n\nfunction applyToSingletonTag(style, index, remove, obj) {\n  var css = remove ? '' : obj.media ? \"@media \".concat(obj.media, \" {\").concat(obj.css, \"}\") : obj.css; // For old IE\n\n  /* istanbul ignore if  */\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = replaceText(index, css);\n  } else {\n    var cssNode = document.createTextNode(css);\n    var childNodes = style.childNodes;\n\n    if (childNodes[index]) {\n      style.removeChild(childNodes[index]);\n    }\n\n    if (childNodes.length) {\n      style.insertBefore(cssNode, childNodes[index]);\n    } else {\n      style.appendChild(cssNode);\n    }\n  }\n}\n\nfunction applyToTag(style, options, obj) {\n  var css = obj.css;\n  var media = obj.media;\n  var sourceMap = obj.sourceMap;\n\n  if (media) {\n    style.setAttribute('media', media);\n  } else {\n    style.removeAttribute('media');\n  }\n\n  if (sourceMap && typeof btoa !== 'undefined') {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  } // For old IE\n\n  /* istanbul ignore if  */\n\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    while (style.firstChild) {\n      style.removeChild(style.firstChild);\n    }\n\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nvar singleton = null;\nvar singletonCounter = 0;\n\nfunction addStyle(obj, options) {\n  var style;\n  var update;\n  var remove;\n\n  if (options.singleton) {\n    var styleIndex = singletonCounter++;\n    style = singleton || (singleton = insertStyleElement(options));\n    update = applyToSingletonTag.bind(null, style, styleIndex, false);\n    remove = applyToSingletonTag.bind(null, style, styleIndex, true);\n  } else {\n    style = insertStyleElement(options);\n    update = applyToTag.bind(null, style, options);\n\n    remove = function remove() {\n      removeStyleElement(style);\n    };\n  }\n\n  update(obj);\n  return function updateStyle(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n        return;\n      }\n\n      update(obj = newObj);\n    } else {\n      remove();\n    }\n  };\n}\n\nmodule.exports = function (list, options) {\n  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n  // tags it will allow on a page\n\n  if (!options.singleton && typeof options.singleton !== 'boolean') {\n    options.singleton = isOldIE();\n  }\n\n  list = list || [];\n  var lastIdentifiers = modulesToDom(list, options);\n  return function update(newList) {\n    newList = newList || [];\n\n    if (Object.prototype.toString.call(newList) !== '[object Array]') {\n      return;\n    }\n\n    for (var i = 0; i < lastIdentifiers.length; i++) {\n      var identifier = lastIdentifiers[i];\n      var index = getIndexByIdentifier(identifier);\n      stylesInDom[index].references--;\n    }\n\n    var newLastIdentifiers = modulesToDom(newList, options);\n\n    for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n      var _identifier = lastIdentifiers[_i];\n\n      var _index = getIndexByIdentifier(_identifier);\n\n      if (stylesInDom[_index].references === 0) {\n        stylesInDom[_index].updater();\n\n        stylesInDom.splice(_index, 1);\n      }\n    }\n\n    lastIdentifiers = newLastIdentifiers;\n  };\n};\n\n//# sourceURL=webpack://mdt-charts/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
-
-/***/ }),
-
-/***/ "./src/playground/configsExamples/configExample.ts":
-/*!*********************************************************!*\
-  !*** ./src/playground/configsExamples/configExample.ts ***!
-  \*********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\nconst configCars = {\n    canvas: {\n        class: 'outline',\n        size: {\n            width: 800,\n            height: 510\n        }\n    },\n    // options: {\n    //     type: '2d',\n    //     title: 'Заголовок графика',\n    //     selectable: true,\n    //     axis: {\n    //         key: {\n    //             visibility: true,\n    //             position: 'end',\n    //             ticks: {\n    //                 flag: false\n    //             }\n    //         },\n    //         value: {\n    //             visibility: true,\n    //             domain: {\n    //                 start: -1,\n    //                 end: -1\n    //             },\n    //             position: 'start',\n    //             ticks: {\n    //                 flag: false\n    //             }\n    //         }\n    //     },\n    //     additionalElements: {\n    //         gridLine: {\n    //             flag: {\n    //                 value: true,\n    //                 key: true\n    //             }\n    //         }\n    //     },\n    //     legend: {\n    //         show: true\n    //     },\n    //     orientation: 'vertical',\n    //     data: {\n    //         dataSource: 'dataSet',\n    //         keyField: {\n    //             name: 'brand',\n    //             format: 'string'\n    //         }\n    //     },\n    //     charts: [\n    //         {\n    //             isSegmented: false,\n    //             type: 'bar',\n    //             data: {\n    //                 valueFields: [\n    //                     {\n    //                         name: 'price',\n    //                         format: 'money',\n    //                         title: 'Стоимость за 2020 год'\n    //                     }\n    //                 ]\n    //             },\n    //             tooltip: {\n    //                 show: true\n    //             },\n    //             embeddedLabels: 'value',\n    //             markers: {\n    //                 show: false\n    //             }\n    //         }\n    //     ]\n    // }\n    options: {\n        type: 'polar',\n        title: 'Title',\n        selectable: true,\n        legend: {\n            show: true\n        },\n        data: {\n            dataSource: 'dataSet',\n            keyField: {\n                name: 'brand',\n                format: 'string'\n            }\n        },\n        tooltip: {\n            html: (row) => {\n                return `${row.color}<br>${row.brand}`;\n            }\n        },\n        chart: {\n            type: 'donut',\n            data: {\n                valueField: {\n                    name: 'price',\n                    format: 'money',\n                    title: 'some title'\n                },\n                colorField: \"color\"\n            },\n            tooltip: {\n                show: true\n            }\n        }\n    }\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (configCars);\n\n\n//# sourceURL=webpack://mdt-charts/./src/playground/configsExamples/configExample.ts?");
-
-/***/ }),
-
-/***/ "./src/playground/configsExamples/designerConfigExample.ts":
-/*!*****************************************************************!*\
-  !*** ./src/playground/configsExamples/designerConfigExample.ts ***!
-  \*****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => __WEBPACK_DEFAULT_EXPORT__\n/* harmony export */ });\nconst designerConfig = {\n    canvas: {\n        axisLabel: {\n            maxSize: {\n                main: 60\n            }\n        },\n        chartBlockMargin: {\n            top: 30,\n            bottom: 20,\n            left: 20,\n            right: 20\n        },\n        legendBlock: {\n            maxWidth: 200\n        },\n        chartOptions: {\n            bar: {\n                minBarWidth: 3,\n                maxBarWidth: 30,\n                groupMinDistance: 16,\n                barDistance: 8,\n                groupMaxDistance: 35\n            },\n            donut: {\n                padAngle: 0,\n                minThickness: 40,\n                maxThickness: 60,\n                aggregatorPad: 30\n            }\n        }\n    },\n    chartStyle: {\n        baseColors: ['#209de3', '#ff3131', '#ffba00', '#20b078']\n    },\n    elementsOptions: {\n        tooltip: {\n            position: 'followCursor'\n        }\n    },\n    dataFormat: {\n        formatters: (value, options = {}) => {\n            var type = typeof value;\n            if ((value === undefined || value === null || value === \"\") && type != \"boolean\" && options.type != \"boolean\")\n                return value;\n            if (type == \"boolean\" || options.type == \"boolean\") {\n                return value.toString();\n            }\n            if (value instanceof Date) {\n                return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes();\n            }\n            if (options.type === \"markdown\") {\n                return value.toString();\n            }\n            if ((options.type === \"money\" || options.type === \"number\")) {\n                return Intl.NumberFormat('ru-Ru', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);\n            }\n            return value;\n        }\n    }\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (designerConfig);\n\n\n//# sourceURL=webpack://mdt-charts/./src/playground/configsExamples/designerConfigExample.ts?");
-
-/***/ }),
-
-/***/ "./src/playground/listeners.ts":
-/*!*************************************!*\
-  !*** ./src/playground/listeners.ts ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => /* binding */ Listeners\n/* harmony export */ });\n/* harmony import */ var _engine_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../engine/engine */ \"./src/engine/engine.ts\");\n/* harmony import */ var _model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../model/modelBuilder */ \"./src/model/modelBuilder.ts\");\n/* harmony import */ var _style_develop_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../style/develop.css */ \"./src/style/develop.css\");\n/* harmony import */ var _configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./configsExamples/configExample */ \"./src/playground/configsExamples/configExample.ts\");\n/* harmony import */ var _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./configsExamples/designerConfigExample */ \"./src/playground/configsExamples/designerConfigExample.ts\");\n\n\nclass ListenersHelper {\n    static randInt(min, max) {\n        return Math.round(Math.random() * (max - min) + min);\n    }\n    static getCopy(obj) {\n        const newObj = {};\n        if (typeof obj === 'object') {\n            for (let key in obj) {\n                if (Array.isArray(obj[key])) {\n                    newObj[key] = this.getCopyOfArr(obj[key]);\n                }\n                else if (typeof obj[key] === 'object') {\n                    newObj[key] = this.getCopy(obj[key]);\n                }\n                else {\n                    newObj[key] = obj[key];\n                }\n            }\n        }\n        else {\n            return obj;\n        }\n        return newObj;\n    }\n    static getCopyOfArr(initial) {\n        const newArr = [];\n        initial.forEach(d => newArr.push(this.getCopy(d)));\n        return newArr;\n    }\n    static getInputValue(selector) {\n        var _a;\n        return (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.value;\n    }\n    static setInputValue(selector, value) {\n        document.querySelector(selector).value = value.toString();\n    }\n    static setCheckboxValue(selector, value) {\n        document.querySelector(selector).checked = value;\n    }\n}\nclass Listeners {\n    constructor(engine, config, designerConfig, data) {\n        this.transition = {};\n        this.engine = engine;\n        this.config = config;\n        this.designerConfig = designerConfig;\n        this.data = data;\n        this.setControlsValues();\n        this.showControlsForNotation(this.config.options.type);\n        this.setMainListeners();\n        this.setDesignerListeners();\n        this.setCommonListeners();\n        this.setAxisListeners();\n        this.set2DListeners();\n    }\n    updateFull() {\n        this.dropAxisDomain(this.config);\n        const model = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(this.config, this.data, this.designerConfig);\n        const preparedData = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(model, this.data, this.config);\n        this.engine.updateFullBlock(model, preparedData);\n    }\n    dropAxisDomain(config) {\n        if (config.options.type === '2d') {\n            config.options.axis.value.domain.end = -1;\n            config.options.axis.value.domain.start = -1;\n        }\n    }\n    showControlsForNotation(notationType) {\n        if (notationType === '2d') {\n            document.querySelector('.block-polar').style.display = 'none';\n            document.querySelector('.block-2d').style.display = 'block';\n            document.querySelector('.block-axis').style.display = 'block';\n        }\n        else if (notationType === 'polar') {\n            document.querySelector('.block-2d').style.display = 'none';\n            document.querySelector('.block-polar').style.display = 'block';\n            document.querySelector('.block-axis').style.display = 'none';\n        }\n        else if (notationType === 'interval') {\n            document.querySelector('.block-polar').style.display = 'none';\n            document.querySelector('.block-2d').style.display = 'none';\n            document.querySelector('.block-axis').style.display = 'block';\n        }\n    }\n    getDataWithRandomValues(data, maxRand) {\n        if (this.config.options.type === '2d')\n            this.config.options.charts.forEach((chart) => {\n                data[_configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default.options.data.dataSource].forEach((row) => {\n                    row[chart.data.valueFields[0].name] = ListenersHelper.randInt(0, maxRand);\n                });\n            });\n        else if (this.config.options.type === 'polar') {\n            data[_configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default.options.data.dataSource].forEach((row) => {\n                if (this.config.options.type === 'polar')\n                    row[this.config.options.chart.data.valueField.name] = ListenersHelper.randInt(0, maxRand);\n            });\n        }\n        return data;\n    }\n    getDataConfig(notationType) {\n        if (notationType === '2d') {\n            return {\n                valueFields: [\n                    {\n                        name: 'price',\n                        format: 'money',\n                        title: 'Цена автомобилей на рынке'\n                    },\n                    {\n                        name: 'count',\n                        format: 'integer',\n                        title: 'Количество автомобилей на душу населения'\n                    }\n                ]\n            };\n        }\n        else if (notationType === 'interval') {\n            return {\n                valueField1: {\n                    name: 'start',\n                    format: 'date'\n                },\n                valueField2: {\n                    name: 'end',\n                    format: 'date'\n                }\n            };\n        }\n        else if (notationType === 'polar') {\n            return {\n                valueField: {\n                    name: 'price',\n                    format: 'money',\n                    title: 'Количество'\n                }\n            };\n        }\n    }\n    getTooltipConfig() {\n        return {\n            show: true\n        };\n    }\n    changeConfigOptions(notationType) {\n        if (notationType === '2d') {\n            const options = {\n                title: this.config.options.title,\n                legend: this.config.options.legend,\n                selectable: this.config.options.selectable,\n                orientation: ListenersHelper.getInputValue('#chart-orient'),\n                type: notationType,\n                data: {\n                    dataSource: 'dataSet',\n                    keyField: {\n                        format: 'string',\n                        name: 'brand'\n                    }\n                },\n                charts: [\n                    {\n                        data: this.getDataConfig(notationType),\n                        isSegmented: false,\n                        tooltip: this.getTooltipConfig(),\n                        type: ListenersHelper.getInputValue('#chart-2d-type') === 'barLine' ? 'bar' : ListenersHelper.getInputValue('#chart-2d-type'),\n                        embeddedLabels: 'none',\n                        markers: {\n                            show: true\n                        }\n                    }\n                ],\n                axis: {\n                    key: {\n                        visibility: true,\n                        position: ListenersHelper.getInputValue('#key-axis-orient'),\n                        ticks: {\n                            flag: false\n                        }\n                    },\n                    value: {\n                        visibility: true,\n                        domain: {\n                            start: -1,\n                            end: -1\n                        },\n                        position: ListenersHelper.getInputValue('#value-axis-orient'),\n                        ticks: {\n                            flag: false\n                        }\n                    }\n                },\n                additionalElements: {\n                    gridLine: {\n                        flag: {\n                            value: true,\n                            key: false\n                        }\n                    }\n                },\n                tooltip: this.config.options.tooltip\n            };\n            this.config.options = options;\n        }\n        else if (notationType === 'polar') {\n            const options = {\n                title: this.config.options.title,\n                legend: this.config.options.legend,\n                selectable: this.config.options.selectable,\n                data: {\n                    dataSource: 'dataSet',\n                    keyField: {\n                        format: 'string',\n                        name: 'brand'\n                    }\n                },\n                type: notationType,\n                chart: {\n                    data: this.getDataConfig(notationType),\n                    tooltip: this.getTooltipConfig(),\n                    type: 'donut'\n                },\n                tooltip: this.config.options.tooltip\n            };\n            this.config.options = options;\n        }\n        else if (notationType === 'interval') {\n            const options = {\n                title: this.config.options.title,\n                legend: this.config.options.legend,\n                selectable: this.config.options.selectable,\n                data: {\n                    dataSource: 'dataSet_gantt',\n                    keyField: {\n                        format: 'string',\n                        name: 'task'\n                    }\n                },\n                orientation: ListenersHelper.getInputValue('#chart-orient'),\n                type: notationType,\n                chart: {\n                    data: this.getDataConfig(notationType),\n                    tooltip: this.getTooltipConfig(),\n                    type: 'gantt'\n                },\n                axis: {\n                    key: {\n                        visibility: true,\n                        position: ListenersHelper.getInputValue('#key-axis-orient'),\n                        ticks: {\n                            flag: false\n                        }\n                    },\n                    value: {\n                        visibility: true,\n                        position: ListenersHelper.getInputValue('#value-axis-orient'),\n                        ticks: {\n                            flag: false\n                        }\n                    }\n                },\n                additionalElements: {\n                    gridLine: {\n                        flag: {\n                            value: true,\n                            key: false\n                        }\n                    }\n                },\n                tooltip: this.config.options.tooltip\n            };\n            this.config.options = options;\n        }\n        this.updateFull();\n    }\n    change2DChartConfig(chartType) {\n        const config = this.config;\n        if (config.options.type === '2d') {\n            if (chartType === 'barLine' && config.options.charts.length === 1) {\n                config.options.charts.push(ListenersHelper.getCopy(config.options.charts[0]));\n                config.options.charts[0].type = 'bar';\n                config.options.charts[1].type = 'line';\n            }\n            else if (chartType === 'barLine' && config.options.charts.length === 2) {\n                config.options.charts[0].type = 'bar';\n                config.options.charts[1].type = 'line';\n            }\n            else if (chartType !== 'barLine') {\n                config.options.charts.splice(1, 1);\n                config.options.charts[0].type = chartType;\n            }\n        }\n    }\n    setMainListeners() {\n        const thisClass = this;\n        document.querySelector('#notation').addEventListener('change', function () {\n            thisClass.showControlsForNotation(this.value);\n            thisClass.changeConfigOptions(this.value);\n            thisClass.setControlsValues();\n        });\n        document.querySelector('#block-width').addEventListener('input', function () {\n            thisClass.config.canvas.size.width = parseFloat(ListenersHelper.getInputValue('#block-width')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#block-height').addEventListener('input', function () {\n            thisClass.config.canvas.size.height = parseFloat(ListenersHelper.getInputValue('#block-height')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#wrapper-border').addEventListener('change', function () {\n            if (this.checked) {\n                thisClass.config.canvas.class += ' outline';\n            }\n            else {\n                thisClass.config.canvas.class = thisClass.config.canvas.class.replace('outline', '');\n            }\n            thisClass.updateFull();\n        });\n    }\n    setDesignerListeners() {\n        const thisClass = this;\n        document.querySelector('#tooltip-position').addEventListener('change', function () {\n            _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default.elementsOptions.tooltip.position = this.value;\n            thisClass.updateFull();\n        });\n        document.querySelector('#axis-label-width').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.axisLabel.maxSize.main = parseFloat(ListenersHelper.getInputValue('#axis-label-width'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-margin-top').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartBlockMargin.top = parseFloat(ListenersHelper.getInputValue('#chart-block-margin-top')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-margin-bottom').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartBlockMargin.bottom = parseFloat(ListenersHelper.getInputValue('#chart-block-margin-bottom')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-margin-left').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartBlockMargin.left = parseFloat(ListenersHelper.getInputValue('#chart-block-margin-left')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-margin-right').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartBlockMargin.right = parseFloat(ListenersHelper.getInputValue('#chart-block-margin-right')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-transition-chartUpdate').addEventListener('input', function () {\n            thisClass.transition.chartUpdate = parseFloat(ListenersHelper.getInputValue('#chart-block-transition-chartUpdate'));\n            thisClass.designerConfig.transitions = thisClass.transition;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-transition-elementFadeOut').addEventListener('input', function () {\n            thisClass.transition.elementFadeOut = parseFloat(ListenersHelper.getInputValue('#chart-block-transition-elementFadeOut'));\n            thisClass.designerConfig.transitions = thisClass.transition;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-transition-tooltipSlide').addEventListener('input', function () {\n            thisClass.transition.tooltipSlide = parseFloat(ListenersHelper.getInputValue('#chart-block-transition-tooltipSlide'));\n            thisClass.designerConfig.transitions = thisClass.transition;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-transition-donutHover').addEventListener('input', function () {\n            thisClass.transition.higlightedScale = parseFloat(ListenersHelper.getInputValue('#chart-block-transition-donutHover'));\n            thisClass.designerConfig.transitions = thisClass.transition;\n            thisClass.updateFull();\n        });\n        document.querySelector('#chart-block-transition-markerHover').addEventListener('input', function () {\n            thisClass.transition.markerHover = parseFloat(ListenersHelper.getInputValue('#chart-block-transition-markerHover'));\n            thisClass.designerConfig.transitions = thisClass.transition;\n            thisClass.updateFull();\n        });\n        document.querySelector('#bar-distance').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.bar.barDistance = parseFloat(ListenersHelper.getInputValue('#bar-distance')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#min-bar-group-distance').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.bar.groupMinDistance = parseFloat(ListenersHelper.getInputValue('#min-bar-group-distance'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#max-bar-group-distance').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.bar.groupMaxDistance = parseFloat(ListenersHelper.getInputValue('#max-bar-group-distance'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#min-bar-size').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.bar.minBarWidth = parseFloat(ListenersHelper.getInputValue('#min-bar-size')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#max-bar-size').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.bar.maxBarWidth = parseFloat(ListenersHelper.getInputValue('#max-bar-size')) || 0;\n            thisClass.updateFull();\n        });\n        document.querySelector('#pad-angle').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.donut.padAngle = parseFloat(ListenersHelper.getInputValue('#pad-angle'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#donut-min-thickness').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.donut.minThickness = parseFloat(ListenersHelper.getInputValue('#donut-min-thickness'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#donut-max-thickness').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.donut.maxThickness = parseFloat(ListenersHelper.getInputValue('#donut-max-thickness'));\n            thisClass.updateFull();\n        });\n        document.querySelector('#aggregator-pad').addEventListener('input', function () {\n            thisClass.designerConfig.canvas.chartOptions.donut.aggregatorPad = parseFloat(this.value);\n            thisClass.updateFull();\n        });\n        document.querySelector('#base-colors').addEventListener('keydown', function (e) {\n            if (e.code === 'Enter') {\n                thisClass.designerConfig.chartStyle.baseColors = this.value.split(', ');\n                thisClass.updateFull();\n            }\n        });\n    }\n    setCommonListeners() {\n        const thisClass = this;\n        const config = this.config;\n        document.querySelector('#data-size').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'polar') {\n                config.options.data.dataSource = this.value === 'normal' ? 'dataSet' : 'dataSet_large';\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#legend').addEventListener('change', function () {\n            config.options.legend.show = this.checked;\n            thisClass.updateFull();\n        });\n        document.querySelector('#refresh').addEventListener('input', function () {\n            DataUpdater.updateRefreshValue(parseFloat(ListenersHelper.getInputValue('#refresh')));\n            thisClass.updateFull();\n        });\n        document.querySelector('#update-enabler').addEventListener('change', function () {\n            DataUpdater.updateIsOn(this.checked);\n            thisClass.updateFull();\n            this.checked ? document.querySelector('#refresh').setAttribute('disabled', 'disabled') : document.querySelector('#refresh').removeAttribute('disabled');\n        });\n        const randomFunc = function () {\n            if (config.options.type === '2d' || config.options.type === 'polar') {\n                const max = parseInt(ListenersHelper.getInputValue('#max-random-value')) || 120;\n                const dataCopy = ListenersHelper.getCopy(thisClass.data);\n                const newData = thisClass.getDataWithRandomValues(dataCopy, max);\n                if (config.options.type === '2d' && config.options.axis.value.domain.end < max)\n                    config.options.axis.value.domain.end = -1;\n                const model = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(thisClass.config, newData, thisClass.designerConfig);\n                const preparedData = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(model, newData, config);\n                thisClass.engine.updateData(model, preparedData);\n            }\n        };\n        document.querySelector('.btn-random').addEventListener('click', function () {\n            randomFunc();\n        });\n        document.querySelector('#max-random-value').addEventListener('keydown', function (e) {\n            if (e.code === 'Enter') {\n                randomFunc();\n            }\n        });\n    }\n    set2DListeners() {\n        const thisClass = this;\n        const config = this.config;\n        document.querySelector('#chart-2d-type').addEventListener('change', function () {\n            if (config.options.type === '2d') {\n                thisClass.change2DChartConfig(this.value);\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#embedded-labels').addEventListener('change', function () {\n            if (config.options.type === '2d') {\n                config.options.charts.forEach(chart => chart.embeddedLabels = this.value);\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('.btn-domain').addEventListener('click', function () {\n            if (config.options.type === '2d') {\n                const start = ListenersHelper.getInputValue('#domain-start');\n                const end = ListenersHelper.getInputValue('#domain-end');\n                config.options.axis.value.domain.start = parseInt(start) || -1;\n                config.options.axis.value.domain.end = parseInt(end) || -1;\n                thisClass.engine.updateData((0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(thisClass.config, thisClass.data, thisClass.designerConfig), thisClass.data);\n            }\n        });\n        document.querySelector('#domain-start').addEventListener('keydown', function (e) {\n            if (e.code === 'Enter') {\n                if (config.options.type === '2d') {\n                    const start = ListenersHelper.getInputValue('#domain-start');\n                    const end = ListenersHelper.getInputValue('#domain-end');\n                    config.options.axis.value.domain.start = parseInt(start) || -1;\n                    config.options.axis.value.domain.end = parseInt(end) || -1;\n                    thisClass.engine.updateData((0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(thisClass.config, thisClass.data, thisClass.designerConfig), thisClass.data);\n                }\n            }\n        });\n        document.querySelector('#domain-end').addEventListener('keydown', function (e) {\n            if (e.code === 'Enter') {\n                if (config.options.type === '2d') {\n                    const start = ListenersHelper.getInputValue('#domain-start');\n                    const end = ListenersHelper.getInputValue('#domain-end');\n                    config.options.axis.value.domain.start = parseInt(start) || -1;\n                    config.options.axis.value.domain.end = parseInt(end) || -1;\n                    thisClass.engine.updateData((0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(thisClass.config, thisClass.data, thisClass.designerConfig), thisClass.data);\n                }\n            }\n        });\n        document.querySelector('#is-segmented').addEventListener('change', function () {\n            if (config.options.type === '2d') {\n                config.options.charts.forEach(chart => {\n                    chart.isSegmented = this.checked;\n                });\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#markers').addEventListener('change', function () {\n            if (config.options.type === '2d') {\n                config.options.charts.forEach(chart => {\n                    chart.markers.show = this.checked;\n                });\n                thisClass.updateFull();\n            }\n        });\n    }\n    setAxisListeners() {\n        const thisClass = this;\n        const config = this.config;\n        document.querySelector('#chart-orient').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.orientation = this.value;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#key-axis-orient').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.key.position = this.value;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#key-axis-visibility').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.key.visibility = this.checked;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#value-axis-orient').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.value.position = this.value;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#value-axis-visibility').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.value.visibility = this.checked;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#config-key-grid').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.additionalElements.gridLine.flag.key = this.checked;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#config-value-grid').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.additionalElements.gridLine.flag.value = this.checked;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#config-tick-key').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.key.ticks.flag = this.checked;\n                thisClass.updateFull();\n            }\n        });\n        document.querySelector('#config-tick-value').addEventListener('change', function () {\n            if (config.options.type === '2d' || config.options.type === 'interval') {\n                config.options.axis.value.ticks.flag = this.checked;\n                thisClass.updateFull();\n            }\n        });\n    }\n    setControlsValues() {\n        const config = this.config;\n        const designerConfig = this.designerConfig;\n        ListenersHelper.setInputValue('#notation', config.options.type);\n        ListenersHelper.setInputValue('#block-width', config.canvas.size.width);\n        ListenersHelper.setInputValue('#block-height', config.canvas.size.height);\n        ListenersHelper.setCheckboxValue('#wrapper-border', config.canvas.class.includes('outline'));\n        ListenersHelper.setCheckboxValue('#legend', config.options.legend.show);\n        ListenersHelper.setInputValue('#data-size', config.options.data.dataSource.includes('large') ? 'large' : 'normal');\n        ListenersHelper.setInputValue('#axis-label-width', designerConfig.canvas.axisLabel.maxSize.main);\n        ListenersHelper.setInputValue('#chart-block-margin-top', designerConfig.canvas.chartBlockMargin.top);\n        ListenersHelper.setInputValue('#chart-block-margin-bottom', designerConfig.canvas.chartBlockMargin.bottom);\n        ListenersHelper.setInputValue('#chart-block-margin-left', designerConfig.canvas.chartBlockMargin.left);\n        ListenersHelper.setInputValue('#chart-block-margin-right', designerConfig.canvas.chartBlockMargin.right);\n        ListenersHelper.setInputValue('#min-bar-group-distance', designerConfig.canvas.chartOptions.bar.groupMinDistance);\n        ListenersHelper.setInputValue('#max-bar-group-distance', designerConfig.canvas.chartOptions.bar.groupMaxDistance);\n        ListenersHelper.setInputValue('#bar-distance', designerConfig.canvas.chartOptions.bar.barDistance);\n        ListenersHelper.setInputValue('#min-bar-size', designerConfig.canvas.chartOptions.bar.minBarWidth);\n        ListenersHelper.setInputValue('#max-bar-size', designerConfig.canvas.chartOptions.bar.maxBarWidth);\n        ListenersHelper.setInputValue('#base-colors', designerConfig.chartStyle.baseColors.join(', '));\n        ListenersHelper.setInputValue('#pad-angle', designerConfig.canvas.chartOptions.donut.padAngle);\n        ListenersHelper.setInputValue('#pad-angle', designerConfig.canvas.chartOptions.donut.padAngle);\n        ListenersHelper.setInputValue('#aggregator-pad', designerConfig.canvas.chartOptions.donut.aggregatorPad);\n        ListenersHelper.setInputValue('#donut-max-thickness', designerConfig.canvas.chartOptions.donut.maxThickness);\n        ListenersHelper.setInputValue('#donut-min-thickness', designerConfig.canvas.chartOptions.donut.minThickness);\n        ListenersHelper.setInputValue('#tooltip-position', designerConfig.elementsOptions.tooltip.position);\n        if (config.options.type === '2d') {\n            ListenersHelper.setInputValue('#chart-2d-type', config.options.charts[0].type);\n            ListenersHelper.setInputValue('#chart-orient', config.options.orientation);\n            ListenersHelper.setInputValue('#key-axis-orient', config.options.axis.key.position);\n            ListenersHelper.setInputValue('#value-axis-orient', config.options.axis.value.position);\n            ListenersHelper.setCheckboxValue('#config-value-grid', config.options.additionalElements.gridLine.flag.value);\n            ListenersHelper.setCheckboxValue('#config-key-grid', config.options.additionalElements.gridLine.flag.key);\n            ListenersHelper.setCheckboxValue('#config-tick-key', config.options.axis.key.ticks.flag);\n            ListenersHelper.setCheckboxValue('#config-tick-value', config.options.axis.value.ticks.flag);\n            ListenersHelper.setCheckboxValue('#is-segmented', config.options.charts.findIndex(ch => ch.isSegmented) !== -1);\n            ListenersHelper.setCheckboxValue('#markers', config.options.charts.findIndex(ch => ch.markers.show) !== -1);\n            ListenersHelper.setInputValue('#embedded-labels', config.options.charts[0].embeddedLabels);\n            ListenersHelper.setCheckboxValue('#key-axis-visibility', config.options.axis.key.visibility);\n            ListenersHelper.setCheckboxValue('#value-axis-visibility', config.options.axis.value.visibility);\n        }\n        else if (config.options.type === 'polar') {\n            ListenersHelper.setInputValue('#chart-polar-type', config.options.chart.type);\n        }\n    }\n}\n\n\n\nconst data = __webpack_require__(/*! ./assets/dataSet.json */ \"./src/playground/assets/dataSet.json\");\n// const chart = new Chart(config, designerConfig, data, false);\n// chart.render(document.querySelector('.main-wrapper'));\nconst engine = new _engine_engine__WEBPACK_IMPORTED_MODULE_0__.default(2, (rows) => {\n    console.log('Selected keys:', rows.map(row => row.brand));\n}, undefined);\nconst model = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.assembleModel)(_configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default, data, _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default);\nengine.render(model, (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(model, data, _configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default), document.querySelector('.main-wrapper'));\nnew Listeners(engine, _configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default, _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default, data);\nconst config3 = __webpack_require__(/*! ./configsExamples/configTest2D.json */ \"./src/playground/configsExamples/configTest2D.json\");\nconst model3 = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.assembleModel)(config3, data, _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default);\nconst engine3 = new _engine_engine__WEBPACK_IMPORTED_MODULE_0__.default(3, void 0, undefined);\nengine3.render(model3, (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(model3, data, config3), document.querySelector('.main-wrapper2'));\nconst config2 = __webpack_require__(/*! ./configsExamples/configTestPolar.json */ \"./src/playground/configsExamples/configTestPolar.json\");\nconst model2 = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.assembleModel)(config2, data, _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default);\nconst engine2 = new _engine_engine__WEBPACK_IMPORTED_MODULE_0__.default(4, null, undefined);\nengine2.render(model2, (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(model2, data, config2), document.querySelector('.main-wrapper2'));\n//====================================================================================================== Data updating\nclass DataUpdater {\n    static updateIsOn(value) {\n        if (value)\n            DataUpdater.startDataChanging(DataUpdater.refresh);\n        else\n            DataUpdater.destroyDataChanging();\n    }\n    static updateRefreshValue(value) {\n        if (value < 1)\n            return;\n        DataUpdater.refresh = value;\n    }\n    static startDataChanging(ms) {\n        this.destroyDataChanging();\n        const run = () => {\n            DataUpdater.timeOut = setTimeout(() => {\n                const newData = ListenersHelper.getCopy(data);\n                this.changeData(newData);\n                const newModel = (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getUpdatedModel)(_configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default, newData, _configsExamples_designerConfigExample__WEBPACK_IMPORTED_MODULE_3__.default);\n                engine.updateData(newModel, (0,_model_modelBuilder__WEBPACK_IMPORTED_MODULE_1__.getPreparedData)(newModel, newData, _configsExamples_configExample__WEBPACK_IMPORTED_MODULE_2__.default));\n                run();\n            }, ms);\n        };\n        run();\n    }\n    static destroyDataChanging() {\n        clearTimeout(DataUpdater.timeOut);\n    }\n    static changeData(newData) {\n        const random = Math.random();\n        if (random > 0.66) {\n            for (let i = 0; i < ListenersHelper.randInt(1, 4); i++) {\n                const row = {\n                    $id: ListenersHelper.randInt(100, 5000000)\n                };\n                row[this.keyFieldName] = this.makeHASH(ListenersHelper.randInt(4, 10)).toUpperCase();\n                this.valueFieldNames.forEach(vField => row[vField] = ListenersHelper.randInt(0, 150));\n                row[this.colorFieldName] = this.getRandomColor();\n                newData[this.dataSetName].push(row);\n            }\n        }\n        else if (random < 0.33) {\n            newData[this.dataSetName].splice(ListenersHelper.randInt(0, 4), ListenersHelper.randInt(1, 3));\n        }\n        newData[this.dataSetName][ListenersHelper.randInt(0, newData[this.dataSetName].length - 1)]['price'] = ListenersHelper.randInt(0, 100);\n        newData[this.dataSetName][ListenersHelper.randInt(0, newData[this.dataSetName].length - 1)]['count'] = ListenersHelper.randInt(0, 100);\n    }\n    static makeHASH(length) {\n        var result = '';\n        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n        var charactersLength = characters.length;\n        for (var i = 0; i < length; i++) {\n            result += characters.charAt(Math.floor(Math.random() * charactersLength));\n        }\n        return result + \"  AAA\";\n    }\n    static getRandomColor() {\n        const colors = [\"red\", \"green\", \"blue\", \"orange\", \"yellow\"];\n        return colors[Math.floor(Math.random() * colors.length)];\n    }\n}\nDataUpdater.timeOut = null;\nDataUpdater.refresh = 4000;\nDataUpdater.dataSetName = 'dataSet';\nDataUpdater.keyFieldName = 'brand';\nDataUpdater.valueFieldNames = ['price', 'count'];\nDataUpdater.colorFieldName = 'color';\nDataUpdater.counter = 1;\n\n\n//# sourceURL=webpack://mdt-charts/./src/playground/listeners.ts?");
-
-/***/ }),
-
-/***/ "./src/playground/assets/dataSet.json":
-/*!********************************************!*\
-  !*** ./src/playground/assets/dataSet.json ***!
-  \********************************************/
-/***/ ((module) => {
-
-eval("module.exports = JSON.parse(\"{\\\"dataSet\\\":[{\\\"$id\\\":1,\\\"brand\\\":\\\"BMW\\\",\\\"price\\\":100,\\\"count\\\":12,\\\"color\\\":\\\"red\\\"},{\\\"$id\\\":2,\\\"brand\\\":\\\"LADA\\\",\\\"price\\\":50,\\\"count\\\":10,\\\"color\\\":\\\"green\\\"},{\\\"$id\\\":3,\\\"brand\\\":\\\"MERCEDES\\\",\\\"price\\\":15,\\\"count\\\":12,\\\"color\\\":\\\"blue\\\"},{\\\"$id\\\":4,\\\"brand\\\":\\\"AUDI\\\",\\\"price\\\":20,\\\"count\\\":5,\\\"color\\\":\\\"yellow\\\"},{\\\"$id\\\":5,\\\"brand\\\":\\\"VOLKSWAGEN\\\",\\\"price\\\":115,\\\"count\\\":6,\\\"color\\\":\\\"cyan\\\"},{\\\"$id\\\":6,\\\"brand\\\":\\\"DODGE\\\",\\\"price\\\":115,\\\"count\\\":4,\\\"color\\\":\\\"red\\\"},{\\\"$id\\\":7,\\\"brand\\\":\\\"SAAB\\\",\\\"price\\\":50,\\\"count\\\":11,\\\"color\\\":\\\"orange\\\"},{\\\"$id\\\":8,\\\"brand\\\":\\\"HONDA\\\",\\\"price\\\":20,\\\"count\\\":2,\\\"color\\\":\\\"brown\\\"},{\\\"$id\\\":9,\\\"brand\\\":\\\"TOYOTA\\\",\\\"price\\\":40,\\\"count\\\":15,\\\"color\\\":\\\"pink\\\"}],\\\"dataSet_large\\\":[{\\\"brand\\\":\\\"BMW\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA\\\",\\\"price\\\":20,\\\"count\\\":20},{\\\"brand\\\":\\\"TOYOTA\\\",\\\"price\\\":115,\\\"count\\\":30},{\\\"brand\\\":\\\"BMW2\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA2\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES2\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI2\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN2\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE2\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB2\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA2\\\",\\\"price\\\":20,\\\"count\\\":7},{\\\"brand\\\":\\\"TOYOTA2\\\",\\\"price\\\":115,\\\"count\\\":8}],\\\"dataSet_gantt\\\":[{\\\"task\\\":\\\"Planning\\\",\\\"start\\\":\\\"2020-12-03\\\",\\\"end\\\":\\\"2020-12-05\\\"},{\\\"task\\\":\\\"Build architecture\\\",\\\"start\\\":\\\"2020-12-05\\\",\\\"end\\\":\\\"2020-12-10\\\"},{\\\"task\\\":\\\"Programming\\\",\\\"start\\\":\\\"2020-12-10\\\",\\\"end\\\":\\\"2020-12-11\\\"},{\\\"task\\\":\\\"Testing\\\",\\\"start\\\":\\\"2020-12-12\\\",\\\"end\\\":\\\"2020-12-19\\\"},{\\\"task\\\":\\\"Deploying\\\",\\\"start\\\":\\\"2020-12-20\\\",\\\"end\\\":\\\"2020-12-31\\\"}],\\\"dataSet_72\\\":[{\\\"brand\\\":\\\"BMW\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW2\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA2\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES2\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI2\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN2\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE2\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB2\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA2\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA2\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW3\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA3\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES3\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI3\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN3\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE3\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB3\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA3\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA3\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW4\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA4\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES4\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI4\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN4\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE4\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB4\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA4\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA4\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW5\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA5\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES5\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI5\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN5\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE5\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB5\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA5\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA5\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW6\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA6\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES6\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI6\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN6\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE6\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB6\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA6\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA6\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW7\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA7\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES7\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI7\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN7\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE7\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB7\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA7\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA7\\\",\\\"price\\\":115,\\\"count\\\":1},{\\\"brand\\\":\\\"BMW8\\\",\\\"price\\\":120,\\\"count\\\":12},{\\\"brand\\\":\\\"LADA8\\\",\\\"price\\\":50,\\\"count\\\":10},{\\\"brand\\\":\\\"MERCEDES8\\\",\\\"price\\\":15,\\\"count\\\":12},{\\\"brand\\\":\\\"AUDI8\\\",\\\"price\\\":20,\\\"count\\\":5},{\\\"brand\\\":\\\"VOLKSWAGEN8\\\",\\\"price\\\":40,\\\"count\\\":10},{\\\"brand\\\":\\\"DODGE8\\\",\\\"price\\\":70,\\\"count\\\":4},{\\\"brand\\\":\\\"SAAB8\\\",\\\"price\\\":50,\\\"count\\\":11},{\\\"brand\\\":\\\"HONDA8\\\",\\\"price\\\":20,\\\"count\\\":2},{\\\"brand\\\":\\\"TOYOTA8\\\",\\\"price\\\":115,\\\"count\\\":1}],\\\"dataSet_data\\\":[{\\\"SortOrder\\\":202007,\\\"ec\\\":19000,\\\"ac\\\":8000,\\\"x\\\":\\\"Jul 20\\\"},{\\\"SortOrder\\\":202008,\\\"ec\\\":166000,\\\"ac\\\":31000,\\\"x\\\":\\\"Aug 20\\\"},{\\\"SortOrder\\\":202010,\\\"ec\\\":17000,\\\"ac\\\":0,\\\"x\\\":\\\"Oct 20\\\"},{\\\"SortOrder\\\":202011,\\\"ec\\\":15000,\\\"ac\\\":0,\\\"x\\\":\\\"Nov 20\\\"},{\\\"SortOrder\\\":202012,\\\"ec\\\":317007,\\\"ac\\\":36000,\\\"x\\\":\\\"Dec 20\\\"},{\\\"SortOrder\\\":202101,\\\"ec\\\":4500,\\\"ac\\\":0,\\\"x\\\":\\\"Jan 21\\\"},{\\\"SortOrder\\\":202102,\\\"ec\\\":200000,\\\"ac\\\":0,\\\"x\\\":\\\"Feb 21\\\"}],\\\"data\\\":[{\\\"x\\\":\\\"Выставка Обзор IT-рынка\\\",\\\"y\\\":175007},{\\\"x\\\":\\\"Выездной корпоратив\\\",\\\"y\\\":166000},{\\\"x\\\":\\\"Вечеринка в книжном баре\\\",\\\"y\\\":116000},{\\\"x\\\":\\\"Шашлыки и баня в Чебоксарах\\\",\\\"y\\\":26000},{\\\"x\\\":\\\"ДР Саши и Коли\\\",\\\"y\\\":19000},{\\\"x\\\":\\\"Вечер ужасов\\\",\\\"y\\\":17000},{\\\"x\\\":\\\"ДР Наташи, Петра и Самвела\\\",\\\"y\\\":15000},{\\\"x\\\":\\\"Митап в университете\\\",\\\"y\\\":7000},{\\\"x\\\":\\\"Презентация Roadmap\\\",\\\"y\\\":4500}]}\");\n\n//# sourceURL=webpack://mdt-charts/./src/playground/assets/dataSet.json?");
-
-/***/ }),
-
-/***/ "./src/playground/configsExamples/configTest2D.json":
-/*!**********************************************************!*\
-  !*** ./src/playground/configsExamples/configTest2D.json ***!
-  \**********************************************************/
-/***/ ((module) => {
-
-eval("module.exports = JSON.parse(\"{\\\"canvas\\\":{\\\"class\\\":\\\"svg-chart outline\\\",\\\"size\\\":{\\\"width\\\":800,\\\"height\\\":400}},\\\"options\\\":{\\\"title\\\":\\\"Количество автомобилей\\\",\\\"type\\\":\\\"2d\\\",\\\"isSegmented\\\":false,\\\"axis\\\":{\\\"key\\\":{\\\"position\\\":\\\"end\\\",\\\"ticks\\\":{\\\"flag\\\":false},\\\"visibility\\\":true},\\\"value\\\":{\\\"domain\\\":{\\\"start\\\":-1,\\\"end\\\":-1},\\\"position\\\":\\\"start\\\",\\\"ticks\\\":{\\\"flag\\\":false},\\\"visibility\\\":true}},\\\"additionalElements\\\":{\\\"gridLine\\\":{\\\"flag\\\":{\\\"value\\\":true,\\\"key\\\":true}}},\\\"legend\\\":{\\\"show\\\":true},\\\"orientation\\\":\\\"vertical\\\",\\\"data\\\":{\\\"dataSource\\\":\\\"dataSet\\\",\\\"keyField\\\":{\\\"name\\\":\\\"brand\\\",\\\"format\\\":\\\"string\\\"}},\\\"selectable\\\":true,\\\"charts\\\":[{\\\"title\\\":\\\"Рост стоимости\\\",\\\"type\\\":\\\"bar\\\",\\\"data\\\":{\\\"valueFields\\\":[{\\\"name\\\":\\\"price\\\",\\\"format\\\":\\\"money\\\",\\\"title\\\":\\\"Заголовок\\\"}]},\\\"tooltip\\\":{\\\"show\\\":true},\\\"markers\\\":{\\\"show\\\":true},\\\"embeddedLabels\\\":\\\"key\\\"},{\\\"title\\\":\\\"Рост стоимости\\\",\\\"type\\\":\\\"line\\\",\\\"data\\\":{\\\"valueFields\\\":[{\\\"name\\\":\\\"price\\\",\\\"format\\\":\\\"money\\\",\\\"title\\\":\\\"Заголовок 1\\\"},{\\\"name\\\":\\\"count\\\",\\\"format\\\":\\\"integer\\\",\\\"title\\\":\\\"Заголовок 2\\\"}]},\\\"tooltip\\\":{\\\"show\\\":true},\\\"markers\\\":{\\\"show\\\":true},\\\"embeddedLabels\\\":\\\"key\\\"}]}}\");\n\n//# sourceURL=webpack://mdt-charts/./src/playground/configsExamples/configTest2D.json?");
-
-/***/ }),
-
-/***/ "./src/playground/configsExamples/configTestPolar.json":
-/*!*************************************************************!*\
-  !*** ./src/playground/configsExamples/configTestPolar.json ***!
-  \*************************************************************/
-/***/ ((module) => {
-
-eval("module.exports = JSON.parse(\"{\\\"canvas\\\":{\\\"class\\\":\\\"svg-chart outline\\\",\\\"size\\\":{\\\"width\\\":800,\\\"height\\\":510}},\\\"options\\\":{\\\"title\\\":\\\"Рост стоимости\\\",\\\"type\\\":\\\"polar\\\",\\\"selectable\\\":true,\\\"legend\\\":{\\\"show\\\":true},\\\"data\\\":{\\\"dataSource\\\":\\\"dataSet\\\",\\\"keyField\\\":{\\\"name\\\":\\\"brand\\\",\\\"format\\\":\\\"string\\\"}},\\\"chart\\\":{\\\"title\\\":\\\"Рост стоимости\\\",\\\"type\\\":\\\"donut\\\",\\\"data\\\":{\\\"valueField\\\":{\\\"name\\\":\\\"price\\\",\\\"format\\\":\\\"money\\\",\\\"title\\\":\\\"Стоимость\\\"}},\\\"tooltip\\\":{\\\"show\\\":true}}}}\");\n\n//# sourceURL=webpack://mdt-charts/./src/playground/configsExamples/configTestPolar.json?");
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		if(__webpack_module_cache__[moduleId]) {
-/******/ 			return __webpack_module_cache__[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			id: moduleId,
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
-/******/ 	// the startup function
-/******/ 	// It's empty as some runtime module handles the default behavior
-/******/ 	__webpack_require__.x = x => {}
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => module['default'] :
-/******/ 				() => module;
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	(() => {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// Promise = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			"listeners": 0
-/******/ 		};
-/******/ 		
-/******/ 		var deferredModules = [
-/******/ 			["./src/playground/listeners.ts","vendors-node_modules_chroma-js_chroma_js-node_modules_d3-array_src_max_js-node_modules_d3-arr-c3fc24","src_engine_engine_ts"]
-/******/ 		];
-/******/ 		// no chunk on demand loading
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		var checkDeferredModules = x => {};
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
-/******/ 			var [chunkIds, moreModules, runtime, executeModules] = data;
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0, resolves = [];
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					resolves.push(installedChunks[chunkId][0]);
-/******/ 				}
-/******/ 				installedChunks[chunkId] = 0;
-/******/ 			}
-/******/ 			for(moduleId in moreModules) {
-/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 				}
-/******/ 			}
-/******/ 			if(runtime) runtime(__webpack_require__);
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			while(resolves.length) {
-/******/ 				resolves.shift()();
-/******/ 			}
-/******/ 		
-/******/ 			// add entry modules from loaded chunk to deferred list
-/******/ 			if(executeModules) deferredModules.push.apply(deferredModules, executeModules);
-/******/ 		
-/******/ 			// run deferred modules when all chunks ready
-/******/ 			return checkDeferredModules();
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = self["webpackChunkmdt_charts"] = self["webpackChunkmdt_charts"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 		
-/******/ 		function checkDeferredModulesImpl() {
-/******/ 			var result;
-/******/ 			for(var i = 0; i < deferredModules.length; i++) {
-/******/ 				var deferredModule = deferredModules[i];
-/******/ 				var fulfilled = true;
-/******/ 				for(var j = 1; j < deferredModule.length; j++) {
-/******/ 					var depId = deferredModule[j];
-/******/ 					if(installedChunks[depId] !== 0) fulfilled = false;
-/******/ 				}
-/******/ 				if(fulfilled) {
-/******/ 					deferredModules.splice(i--, 1);
-/******/ 					result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
-/******/ 				}
-/******/ 			}
-/******/ 			if(deferredModules.length === 0) {
-/******/ 				__webpack_require__.x();
-/******/ 				__webpack_require__.x = x => {};
-/******/ 			}
-/******/ 			return result;
-/******/ 		}
-/******/ 		var startup = __webpack_require__.x;
-/******/ 		__webpack_require__.x = () => {
-/******/ 			// reset startup function so it can be called again when more startup code is added
-/******/ 			__webpack_require__.x = startup || (x => {});
-/******/ 			return (checkDeferredModules = checkDeferredModulesImpl)();
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-/******/ 	// run startup
-/******/ 	return __webpack_require__.x();
-/******/ })()
-;