DemuMesDataV/dist/datav.map.vue.js

23738 lines
697 KiB
JavaScript
Raw Normal View History

2019-09-03 11:07:45 +08:00
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('vue')) :
typeof define === 'function' && define.amd ? define(['vue'], factory) :
(global = global || self, factory(global.Vue));
2019-10-24 10:28:43 +08:00
}(this, (function (Vue) { 'use strict';
2019-09-03 11:07:45 +08:00
2020-04-15 14:03:45 +08:00
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
2019-09-03 11:07:45 +08:00
function randomExtend(minNum, maxNum) {
if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10);
} else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
}
}
function debounce(delay, callback) {
let lastTime;
return function () {
clearTimeout(lastTime);
const [that, args] = [this, arguments];
lastTime = setTimeout(() => {
callback.apply(that, args);
}, delay);
};
}
function observerDomResize(dom, callback) {
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
const observer = new MutationObserver(callback);
observer.observe(dom, {
attributes: true,
attributeFilter: ['style'],
attributeOldValue: true
});
return observer;
}
function getPointDistance(pointOne, pointTwo) {
const minusX = Math.abs(pointOne[0] - pointTwo[0]);
const minusY = Math.abs(pointOne[1] - pointTwo[1]);
return Math.sqrt(minusX * minusX + minusY * minusY);
}
2020-05-25 15:57:26 +08:00
function uuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0;
const v = c == 'x' ? r : r & 0x3 | 0x8;
return v.toString(16);
});
}
2019-09-03 11:07:45 +08:00
var autoResize = {
data() {
return {
dom: '',
width: 0,
height: 0,
debounceInitWHFun: '',
domObserver: ''
};
},
methods: {
async autoResizeMixinInit() {
const {
initWH,
getDebounceInitWHFun,
bindDomResizeCallback,
afterAutoResizeMixinInit
} = this;
await initWH(false);
getDebounceInitWHFun();
bindDomResizeCallback();
if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit();
},
initWH(resize = true) {
const {
$nextTick,
$refs,
ref,
onResize
} = this;
return new Promise(resolve => {
$nextTick(e => {
const dom = this.dom = $refs[ref];
this.width = dom.clientWidth;
this.height = dom.clientHeight;
if (typeof onResize === 'function' && resize) onResize();
resolve();
});
});
},
getDebounceInitWHFun() {
const {
initWH
} = this;
this.debounceInitWHFun = debounce(100, initWH);
},
bindDomResizeCallback() {
const {
dom,
debounceInitWHFun
} = this;
this.domObserver = observerDomResize(dom, debounceInitWHFun);
window.addEventListener('resize', debounceInitWHFun);
},
unbindDomResizeCallback() {
let {
domObserver,
debounceInitWHFun
} = this;
domObserver.disconnect();
domObserver.takeRecords();
domObserver = null;
window.removeEventListener('resize', debounceInitWHFun);
}
},
mounted() {
const {
autoResizeMixinInit
} = this;
autoResizeMixinInit();
},
beforeDestroy() {
const {
unbindDomResizeCallback
} = this;
unbindDomResizeCallback();
}
};
//
var script = {
name: 'DvFullScreenContainer',
mixins: [autoResize],
data() {
return {
ref: 'full-screen-container',
allWidth: 0,
scale: 0,
datavRoot: '',
ready: false
};
},
methods: {
afterAutoResizeMixinInit() {
const {
initConfig,
setAppScale
} = this;
initConfig();
setAppScale();
this.ready = true;
},
initConfig() {
const {
dom
} = this;
const {
width,
height
} = screen;
this.allWidth = width;
dom.style.width = `${width}px`;
dom.style.height = `${height}px`;
},
setAppScale() {
const {
allWidth,
dom
} = this;
const currentWidth = document.body.clientWidth;
dom.style.transform = `scale(${currentWidth / allWidth})`;
},
onResize() {
const {
setAppScale
} = this;
setAppScale();
}
}
};
2020-05-06 14:15:15 +08:00
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
2019-09-03 11:07:45 +08:00
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ ref: _vm.ref, attrs: { id: "dv-full-screen-container" } },
[_vm.ready ? [_vm._t("default")] : _vm._e()],
2
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-2da16e2c_0", { source: "#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd","file":"main.vue","sourcesContent":["#dv-full-screen-container {\n position: fixed;\n top: 0px;\n left: 0px;\n overflow: hidden;\n transform-origin: left top;\n z-index: 999;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__ = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function fullScreenContainer (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__.name, __vue_component__);
2019-09-03 11:07:45 +08:00
}
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$1 = {
name: 'DvLoading'
};
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "dv-loading" }, [
_c("svg", { attrs: { width: "50px", height: "50px" } }, [
_c(
"circle",
{
attrs: {
cx: "25",
cy: "25",
r: "20",
fill: "transparent",
"stroke-width": "3",
"stroke-dasharray": "31.415, 31.415",
stroke: "#02bcfe",
"stroke-linecap": "round"
}
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
values: "0, 25 25;360, 25 25",
dur: "1.5s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "stroke",
values: "#02bcfe;#3be6cb;#02bcfe",
dur: "3s",
repeatCount: "indefinite"
}
})
],
1
),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: "25",
cy: "25",
r: "10",
fill: "transparent",
"stroke-width": "3",
"stroke-dasharray": "15.7, 15.7",
stroke: "#3be6cb",
"stroke-linecap": "round"
}
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
values: "360, 25 25;0, 25 25",
dur: "1.5s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "stroke",
values: "#3be6cb;#02bcfe;#3be6cb",
dur: "3s",
repeatCount: "indefinite"
}
})
],
1
)
]),
_vm._v(" "),
_c("div", { staticClass: "loading-tip" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-c8b3d976_0", { source: ".dv-loading {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-loading .loading-tip {\n font-size: 15px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,eAAe;AACjB","file":"main.vue","sourcesContent":[".dv-loading {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-loading .loading-tip {\n font-size: 15px;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$1 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function loading (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$1.name, __vue_component__$1);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
function unwrapExports (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var interopRequireDefault = createCommonjsModule(function (module) {
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
module.exports = _interopRequireDefault;
});
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
unwrapExports(interopRequireDefault);
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
for (var i = 0, arr2 = new Array(len); i < len; i++) {
arr2[i] = arr[i];
2019-12-06 21:07:16 +08:00
}
2020-04-28 18:41:09 +08:00
return arr2;
}
var arrayLikeToArray = _arrayLikeToArray;
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return arrayLikeToArray(arr);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var arrayWithoutHoles = _arrayWithoutHoles;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function _iterableToArray(iter) {
2020-04-28 18:41:09 +08:00
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var iterableToArray = _iterableToArray;
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
2020-05-06 13:20:20 +08:00
if (n === "Map" || n === "Set") return Array.from(o);
2020-04-28 18:41:09 +08:00
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
}
var unsupportedIterableToArray = _unsupportedIterableToArray;
2019-12-06 21:07:16 +08:00
function _nonIterableSpread() {
2020-04-28 18:41:09 +08:00
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2019-12-06 21:07:16 +08:00
}
var nonIterableSpread = _nonIterableSpread;
function _toConsumableArray(arr) {
2020-04-28 18:41:09 +08:00
return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
2019-12-06 21:07:16 +08:00
}
var toConsumableArray = _toConsumableArray;
var _typeof_1 = createCommonjsModule(function (module) {
function _typeof(obj) {
2020-04-28 18:41:09 +08:00
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
2019-12-06 21:07:16 +08:00
module.exports = _typeof = function _typeof(obj) {
2020-04-28 18:41:09 +08:00
return typeof obj;
2019-12-06 21:07:16 +08:00
};
} else {
module.exports = _typeof = function _typeof(obj) {
2020-04-28 18:41:09 +08:00
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
2019-09-03 11:07:45 +08:00
};
}
2019-12-06 21:07:16 +08:00
return _typeof(obj);
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
module.exports = _typeof;
});
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var arrayWithHoles = _arrayWithHoles;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function _iterableToArrayLimit(arr, i) {
2020-04-28 18:41:09 +08:00
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
2019-12-06 21:07:16 +08:00
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
return _arr;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var iterableToArrayLimit = _iterableToArrayLimit;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function _nonIterableRest() {
2020-04-28 18:41:09 +08:00
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var nonIterableRest = _nonIterableRest;
function _slicedToArray(arr, i) {
2020-04-28 18:41:09 +08:00
return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var slicedToArray = _slicedToArray;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var util = createCommonjsModule(function (module, exports) {
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.deepClone = deepClone;
exports.eliminateBlur = eliminateBlur;
exports.checkPointIsInCircle = checkPointIsInCircle;
exports.getTwoPointDistance = getTwoPointDistance;
exports.checkPointIsInPolygon = checkPointIsInPolygon;
exports.checkPointIsInSector = checkPointIsInSector;
exports.checkPointIsNearPolyline = checkPointIsNearPolyline;
exports.checkPointIsInRect = checkPointIsInRect;
exports.getRotatePointPos = getRotatePointPos;
exports.getScalePointPos = getScalePointPos;
exports.getTranslatePointPos = getTranslatePointPos;
exports.getDistanceBetweenPointAndLine = getDistanceBetweenPointAndLine;
exports.getCircleRadianPoint = getCircleRadianPoint;
exports.getRegularPolygonPoints = getRegularPolygonPoints;
exports["default"] = void 0;
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
var _slicedToArray2 = interopRequireDefault(slicedToArray);
var _typeof2 = interopRequireDefault(_typeof_1);
var abs = Math.abs,
sqrt = Math.sqrt,
sin = Math.sin,
cos = Math.cos,
max = Math.max,
min = Math.min,
PI = Math.PI;
2020-05-06 14:15:15 +08:00
/**
* @description Clone an object or array
* @param {Object|Array} object Cloned object
* @param {Boolean} recursion Whether to use recursive cloning
* @return {Object|Array} Clone object
2019-12-06 21:07:16 +08:00
*/
function deepClone(object) {
var recursion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!object) return object;
var parse = JSON.parse,
stringify = JSON.stringify;
if (!recursion) return parse(stringify(object));
var clonedObj = object instanceof Array ? [] : {};
if (object && (0, _typeof2["default"])(object) === 'object') {
for (var key in object) {
if (object.hasOwnProperty(key)) {
if (object[key] && (0, _typeof2["default"])(object[key]) === 'object') {
clonedObj[key] = deepClone(object[key], true);
} else {
clonedObj[key] = object[key];
}
}
}
}
return clonedObj;
}
2020-05-06 14:15:15 +08:00
/**
* @description Eliminate line blur due to 1px line width
* @param {Array} points Line points
* @return {Array} Line points after processed
2019-12-06 21:07:16 +08:00
*/
function eliminateBlur(points) {
return points.map(function (_ref) {
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
x = _ref2[0],
y = _ref2[1];
return [parseInt(x) + 0.5, parseInt(y) + 0.5];
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the point is inside the circle
* @param {Array} point Postion of point
* @param {Number} rx Circle x coordinate
* @param {Number} ry Circle y coordinate
* @param {Number} r Circle radius
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function checkPointIsInCircle(point, rx, ry, r) {
return getTwoPointDistance(point, [rx, ry]) <= r;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the distance between two points
* @param {Array} point1 point1
* @param {Array} point2 point2
* @return {Number} Distance between two points
2019-12-06 21:07:16 +08:00
*/
function getTwoPointDistance(_ref3, _ref4) {
var _ref5 = (0, _slicedToArray2["default"])(_ref3, 2),
xa = _ref5[0],
ya = _ref5[1];
var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
xb = _ref6[0],
yb = _ref6[1];
var minusX = abs(xa - xb);
var minusY = abs(ya - yb);
return sqrt(minusX * minusX + minusY * minusY);
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the point is inside the polygon
* @param {Array} point Postion of point
* @param {Array} points The points that makes up a polyline
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function checkPointIsInPolygon(point, polygon) {
var counter = 0;
var _point = (0, _slicedToArray2["default"])(point, 2),
x = _point[0],
y = _point[1];
var pointNum = polygon.length;
for (var i = 1, p1 = polygon[0]; i <= pointNum; i++) {
var p2 = polygon[i % pointNum];
if (x > min(p1[0], p2[0]) && x <= max(p1[0], p2[0])) {
if (y <= max(p1[1], p2[1])) {
if (p1[0] !== p2[0]) {
var xinters = (x - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
if (p1[1] === p2[1] || y <= xinters) {
counter++;
}
}
}
}
p1 = p2;
}
return counter % 2 === 1;
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the point is inside the sector
* @param {Array} point Postion of point
* @param {Number} rx Sector x coordinate
* @param {Number} ry Sector y coordinate
* @param {Number} r Sector radius
* @param {Number} startAngle Sector start angle
* @param {Number} endAngle Sector end angle
* @param {Boolean} clockWise Whether the sector angle is clockwise
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function checkPointIsInSector(point, rx, ry, r, startAngle, endAngle, clockWise) {
if (!point) return false;
if (getTwoPointDistance(point, [rx, ry]) > r) return false;
if (!clockWise) {
var _deepClone = deepClone([endAngle, startAngle]);
var _deepClone2 = (0, _slicedToArray2["default"])(_deepClone, 2);
startAngle = _deepClone2[0];
endAngle = _deepClone2[1];
}
var reverseBE = startAngle > endAngle;
if (reverseBE) {
var _ref7 = [endAngle, startAngle];
startAngle = _ref7[0];
endAngle = _ref7[1];
}
var minus = endAngle - startAngle;
if (minus >= PI * 2) return true;
var _point2 = (0, _slicedToArray2["default"])(point, 2),
x = _point2[0],
y = _point2[1];
var _getCircleRadianPoint = getCircleRadianPoint(rx, ry, r, startAngle),
_getCircleRadianPoint2 = (0, _slicedToArray2["default"])(_getCircleRadianPoint, 2),
bx = _getCircleRadianPoint2[0],
by = _getCircleRadianPoint2[1];
var _getCircleRadianPoint3 = getCircleRadianPoint(rx, ry, r, endAngle),
_getCircleRadianPoint4 = (0, _slicedToArray2["default"])(_getCircleRadianPoint3, 2),
ex = _getCircleRadianPoint4[0],
ey = _getCircleRadianPoint4[1];
var vPoint = [x - rx, y - ry];
var vBArm = [bx - rx, by - ry];
var vEArm = [ex - rx, ey - ry];
var reverse = minus > PI;
if (reverse) {
var _deepClone3 = deepClone([vEArm, vBArm]);
var _deepClone4 = (0, _slicedToArray2["default"])(_deepClone3, 2);
vBArm = _deepClone4[0];
vEArm = _deepClone4[1];
}
var inSector = isClockWise(vBArm, vPoint) && !isClockWise(vEArm, vPoint);
if (reverse) inSector = !inSector;
if (reverseBE) inSector = !inSector;
return inSector;
}
2020-05-06 14:15:15 +08:00
/**
* @description Determine if the point is in the clockwise direction of the vector
* @param {Array} vArm Vector
* @param {Array} vPoint Point
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function isClockWise(vArm, vPoint) {
var _vArm = (0, _slicedToArray2["default"])(vArm, 2),
ax = _vArm[0],
ay = _vArm[1];
var _vPoint = (0, _slicedToArray2["default"])(vPoint, 2),
px = _vPoint[0],
py = _vPoint[1];
return -ay * px + ax * py > 0;
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the point is inside the polyline
* @param {Array} point Postion of point
* @param {Array} polyline The points that makes up a polyline
* @param {Number} lineWidth Polyline linewidth
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function checkPointIsNearPolyline(point, polyline, lineWidth) {
var halfLineWidth = lineWidth / 2;
var moveUpPolyline = polyline.map(function (_ref8) {
var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
x = _ref9[0],
y = _ref9[1];
return [x, y - halfLineWidth];
});
var moveDownPolyline = polyline.map(function (_ref10) {
var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
x = _ref11[0],
y = _ref11[1];
return [x, y + halfLineWidth];
});
var polygon = [].concat((0, _toConsumableArray2["default"])(moveUpPolyline), (0, _toConsumableArray2["default"])(moveDownPolyline.reverse()));
return checkPointIsInPolygon(point, polygon);
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the point is inside the rect
* @param {Array} point Postion of point
* @param {Number} x Rect start x coordinate
* @param {Number} y Rect start y coordinate
* @param {Number} width Rect width
* @param {Number} height Rect height
* @return {Boolean} Result of check
2019-12-06 21:07:16 +08:00
*/
function checkPointIsInRect(_ref12, x, y, width, height) {
var _ref13 = (0, _slicedToArray2["default"])(_ref12, 2),
px = _ref13[0],
py = _ref13[1];
if (px < x) return false;
if (py < y) return false;
if (px > x + width) return false;
if (py > y + height) return false;
return true;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the coordinates of the rotated point
* @param {Number} rotate Degree of rotation
* @param {Array} point Postion of point
* @param {Array} origin Rotation center
* @param {Array} origin Rotation center
* @return {Number} Coordinates after rotation
2019-12-06 21:07:16 +08:00
*/
function getRotatePointPos() {
var rotate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var point = arguments.length > 1 ? arguments[1] : undefined;
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
if (!point) return false;
if (rotate % 360 === 0) return point;
var _point3 = (0, _slicedToArray2["default"])(point, 2),
x = _point3[0],
y = _point3[1];
var _origin = (0, _slicedToArray2["default"])(origin, 2),
ox = _origin[0],
oy = _origin[1];
rotate *= PI / 180;
return [(x - ox) * cos(rotate) - (y - oy) * sin(rotate) + ox, (x - ox) * sin(rotate) + (y - oy) * cos(rotate) + oy];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the coordinates of the scaled point
* @param {Array} scale Scale factor
* @param {Array} point Postion of point
* @param {Array} origin Scale center
* @return {Number} Coordinates after scale
2019-12-06 21:07:16 +08:00
*/
function getScalePointPos() {
var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [1, 1];
var point = arguments.length > 1 ? arguments[1] : undefined;
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
if (!point) return false;
if (scale === 1) return point;
var _point4 = (0, _slicedToArray2["default"])(point, 2),
x = _point4[0],
y = _point4[1];
var _origin2 = (0, _slicedToArray2["default"])(origin, 2),
ox = _origin2[0],
oy = _origin2[1];
var _scale = (0, _slicedToArray2["default"])(scale, 2),
xs = _scale[0],
ys = _scale[1];
var relativePosX = x - ox;
var relativePosY = y - oy;
return [relativePosX * xs + ox, relativePosY * ys + oy];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the coordinates of the scaled point
* @param {Array} translate Translation distance
* @param {Array} point Postion of point
* @return {Number} Coordinates after translation
2019-12-06 21:07:16 +08:00
*/
function getTranslatePointPos(translate, point) {
if (!translate || !point) return false;
var _point5 = (0, _slicedToArray2["default"])(point, 2),
x = _point5[0],
y = _point5[1];
var _translate = (0, _slicedToArray2["default"])(translate, 2),
tx = _translate[0],
ty = _translate[1];
return [x + tx, y + ty];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the distance from the point to the line
* @param {Array} point Postion of point
* @param {Array} lineBegin Line start position
* @param {Array} lineEnd Line end position
* @return {Number} Distance between point and line
2019-12-06 21:07:16 +08:00
*/
function getDistanceBetweenPointAndLine(point, lineBegin, lineEnd) {
if (!point || !lineBegin || !lineEnd) return false;
var _point6 = (0, _slicedToArray2["default"])(point, 2),
x = _point6[0],
y = _point6[1];
var _lineBegin = (0, _slicedToArray2["default"])(lineBegin, 2),
x1 = _lineBegin[0],
y1 = _lineBegin[1];
var _lineEnd = (0, _slicedToArray2["default"])(lineEnd, 2),
x2 = _lineEnd[0],
y2 = _lineEnd[1];
var a = y2 - y1;
var b = x1 - x2;
var c = y1 * (x2 - x1) - x1 * (y2 - y1);
var molecule = abs(a * x + b * y + c);
var denominator = sqrt(a * a + b * b);
return molecule / denominator;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the coordinates of the specified radian on the circle
* @param {Number} x Circle x coordinate
* @param {Number} y Circle y coordinate
* @param {Number} radius Circle radius
* @param {Number} radian Specfied radian
* @return {Array} Postion of point
2019-12-06 21:07:16 +08:00
*/
function getCircleRadianPoint(x, y, radius, radian) {
return [x + cos(radian) * radius, y + sin(radian) * radius];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the points that make up a regular polygon
* @param {Number} x X coordinate of the polygon inscribed circle
* @param {Number} y Y coordinate of the polygon inscribed circle
* @param {Number} r Radius of the polygon inscribed circle
* @param {Number} side Side number
* @param {Number} minus Radian offset
* @return {Array} Points that make up a regular polygon
2019-12-06 21:07:16 +08:00
*/
function getRegularPolygonPoints(rx, ry, r, side) {
var minus = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : PI * -0.5;
var radianGap = PI * 2 / side;
var radians = new Array(side).fill('').map(function (t, i) {
return i * radianGap + minus;
});
return radians.map(function (radian) {
return getCircleRadianPoint(rx, ry, r, radian);
});
}
var _default = {
deepClone: deepClone,
eliminateBlur: eliminateBlur,
checkPointIsInCircle: checkPointIsInCircle,
checkPointIsInPolygon: checkPointIsInPolygon,
checkPointIsInSector: checkPointIsInSector,
checkPointIsNearPolyline: checkPointIsNearPolyline,
getTwoPointDistance: getTwoPointDistance,
getRotatePointPos: getRotatePointPos,
getScalePointPos: getScalePointPos,
getTranslatePointPos: getTranslatePointPos,
getCircleRadianPoint: getCircleRadianPoint,
getRegularPolygonPoints: getRegularPolygonPoints,
getDistanceBetweenPointAndLine: getDistanceBetweenPointAndLine
};
exports["default"] = _default;
});
unwrapExports(util);
var util_1 = util.deepClone;
var util_2 = util.eliminateBlur;
var util_3 = util.checkPointIsInCircle;
var util_4 = util.getTwoPointDistance;
var util_5 = util.checkPointIsInPolygon;
var util_6 = util.checkPointIsInSector;
var util_7 = util.checkPointIsNearPolyline;
var util_8 = util.checkPointIsInRect;
var util_9 = util.getRotatePointPos;
var util_10 = util.getScalePointPos;
var util_11 = util.getTranslatePointPos;
var util_12 = util.getDistanceBetweenPointAndLine;
var util_13 = util.getCircleRadianPoint;
var util_14 = util.getRegularPolygonPoints;
var util$1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.filterNonNumber = filterNonNumber;
exports.deepMerge = deepMerge;
exports.mulAdd = mulAdd;
exports.mergeSameStackData = mergeSameStackData;
exports.getTwoPointDistance = getTwoPointDistance;
exports.getLinearGradientColor = getLinearGradientColor;
exports.getPolylineLength = getPolylineLength;
exports.getPointToLineDistance = getPointToLineDistance;
exports.initNeedSeries = initNeedSeries;
exports.radianToAngle = radianToAngle;
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
var _typeof2 = interopRequireDefault(_typeof_1);
function filterNonNumber(array) {
return array.filter(function (n) {
return typeof n === 'number';
});
}
function deepMerge(target, merged) {
for (var key in merged) {
2020-04-28 18:41:09 +08:00
if (target[key] && (0, _typeof2["default"])(target[key]) === 'object') {
deepMerge(target[key], merged[key]);
continue;
}
if ((0, _typeof2["default"])(merged[key]) === 'object') {
target[key] = (0, util.deepClone)(merged[key], true);
continue;
}
target[key] = merged[key];
2019-12-06 21:07:16 +08:00
}
return target;
}
function mulAdd(nums) {
nums = filterNonNumber(nums);
return nums.reduce(function (all, num) {
return all + num;
}, 0);
}
function mergeSameStackData(item, series) {
var stack = item.stack;
if (!stack) return (0, _toConsumableArray2["default"])(item.data);
var stacks = series.filter(function (_ref) {
var s = _ref.stack;
return s === stack;
});
var index = stacks.findIndex(function (_ref2) {
var d = _ref2.data;
return d === item.data;
});
var datas = stacks.splice(0, index + 1).map(function (_ref3) {
var data = _ref3.data;
return data;
});
var dataLength = datas[0].length;
return new Array(dataLength).fill(0).map(function (foo, i) {
return mulAdd(datas.map(function (d) {
return d[i];
}));
});
}
function getTwoPointDistance(pointOne, pointTwo) {
var minusX = Math.abs(pointOne[0] - pointTwo[0]);
var minusY = Math.abs(pointOne[1] - pointTwo[1]);
return Math.sqrt(minusX * minusX + minusY * minusY);
}
function getLinearGradientColor(ctx, begin, end, color) {
if (!ctx || !begin || !end || !color.length) return;
var colors = color;
typeof colors === 'string' && (colors = [color, color]);
var linearGradientColor = ctx.createLinearGradient.apply(ctx, (0, _toConsumableArray2["default"])(begin).concat((0, _toConsumableArray2["default"])(end)));
var colorGap = 1 / (colors.length - 1);
colors.forEach(function (c, i) {
return linearGradientColor.addColorStop(colorGap * i, c);
});
return linearGradientColor;
}
function getPolylineLength(points) {
var lineSegments = new Array(points.length - 1).fill(0).map(function (foo, i) {
return [points[i], points[i + 1]];
});
var lengths = lineSegments.map(function (item) {
return getTwoPointDistance.apply(void 0, (0, _toConsumableArray2["default"])(item));
});
return mulAdd(lengths);
}
function getPointToLineDistance(point, linePointOne, linePointTwo) {
var a = getTwoPointDistance(point, linePointOne);
var b = getTwoPointDistance(point, linePointTwo);
var c = getTwoPointDistance(linePointOne, linePointTwo);
return 0.5 * Math.sqrt((a + b + c) * (a + b - c) * (a + c - b) * (b + c - a)) / c;
}
function initNeedSeries(series, config, type) {
series = series.filter(function (_ref4) {
var st = _ref4.type;
return st === type;
});
series = series.map(function (item) {
return deepMerge((0, util.deepClone)(config, true), item);
});
return series.filter(function (_ref5) {
var show = _ref5.show;
return show;
});
}
function radianToAngle(radian) {
return radian / Math.PI * 180;
}
});
unwrapExports(util$1);
var util_1$1 = util$1.filterNonNumber;
var util_2$1 = util$1.deepMerge;
var util_3$1 = util$1.mulAdd;
var util_4$1 = util$1.mergeSameStackData;
var util_5$1 = util$1.getTwoPointDistance;
var util_6$1 = util$1.getLinearGradientColor;
var util_7$1 = util$1.getPolylineLength;
var util_8$1 = util$1.getPointToLineDistance;
var util_9$1 = util$1.initNeedSeries;
var util_10$1 = util$1.radianToAngle;
//
var script$2 = {
name: 'DvBorderBox1',
2020-04-25 16:46:33 +08:00
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
data() {
return {
2020-04-25 16:46:33 +08:00
ref: 'border-box-1',
2019-12-06 21:07:16 +08:00
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#4fd2dd', '#235fa7'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
};
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
2020-04-25 16:46:33 +08:00
{ ref: _vm.ref, staticClass: "dv-border-box-1" },
2019-12-06 21:07:16 +08:00
[
2020-04-25 16:46:33 +08:00
_c(
"svg",
{
staticClass: "border",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"10, 27 10, " +
(_vm.height - 27) +
" 13, " +
(_vm.height - 24) +
" 13, " +
(_vm.height - 21) +
" 24, " +
(_vm.height - 11) +
"\n 38, " +
(_vm.height - 11) +
" 41, " +
(_vm.height - 8) +
" 73, " +
(_vm.height - 8) +
" 75, " +
(_vm.height - 10) +
" 81, " +
(_vm.height - 10) +
"\n 85, " +
(_vm.height - 6) +
" " +
(_vm.width - 85) +
", " +
(_vm.height - 6) +
" " +
(_vm.width - 81) +
", " +
(_vm.height - 10) +
" " +
(_vm.width - 75) +
", " +
(_vm.height - 10) +
"\n " +
(_vm.width - 73) +
", " +
(_vm.height - 8) +
" " +
(_vm.width - 41) +
", " +
(_vm.height - 8) +
" " +
(_vm.width - 38) +
", " +
(_vm.height - 11) +
"\n " +
(_vm.width - 24) +
", " +
(_vm.height - 11) +
" " +
(_vm.width - 13) +
", " +
(_vm.height - 21) +
" " +
(_vm.width - 13) +
", " +
(_vm.height - 24) +
"\n " +
(_vm.width - 10) +
", " +
(_vm.height - 27) +
" " +
(_vm.width - 10) +
", 27 " +
(_vm.width - 13) +
", 25 " +
(_vm.width - 13) +
", 21\n " +
(_vm.width - 24) +
", 11 " +
(_vm.width - 38) +
", 11 " +
(_vm.width - 41) +
", 8 " +
(_vm.width - 73) +
", 8 " +
(_vm.width - 75) +
", 10\n " +
(_vm.width - 81) +
", 10 " +
(_vm.width - 85) +
", 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"
}
})
]
),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_vm._l(_vm.border, function(item) {
return _c(
"svg",
{
key: item,
class: item + " border",
attrs: { width: "150px", height: "150px" }
},
[
_c(
"polygon",
{
attrs: {
fill: _vm.mergedColor[0],
points:
"6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
}
},
[
_c("animate", {
attrs: {
attributeName: "fill",
values:
_vm.mergedColor[0] +
";" +
_vm.mergedColor[1] +
";" +
_vm.mergedColor[0],
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
fill: _vm.mergedColor[1],
points:
"27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
}
},
[
_c("animate", {
attrs: {
attributeName: "fill",
values:
_vm.mergedColor[1] +
";" +
_vm.mergedColor[0] +
";" +
_vm.mergedColor[1],
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
fill: _vm.mergedColor[0],
points:
"9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
}
},
[
_c("animate", {
attrs: {
attributeName: "fill",
values:
_vm.mergedColor[0] +
";" +
_vm.mergedColor[1] +
";transparent",
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
)
]
)
}),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
],
2
)
};
var __vue_staticRenderFns__$2 = [];
__vue_render__$2._withStripped = true;
/* style */
const __vue_inject_styles__$2 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-5d85361d_0", { source: ".dv-border-box-1 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-1 .border {\n position: absolute;\n display: block;\n}\n.dv-border-box-1 .right-top {\n right: 0px;\n transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n bottom: 0px;\n transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n right: 0px;\n bottom: 0px;\n transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-1 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-1 .border {\n position: absolute;\n display: block;\n}\n.dv-border-box-1 .right-top {\n right: 0px;\n transform: rotateY(180deg);\n}\n.dv-border-box-1 .left-bottom {\n bottom: 0px;\n transform: rotateX(180deg);\n}\n.dv-border-box-1 .right-bottom {\n right: 0px;\n bottom: 0px;\n transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-1 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$2 = undefined;
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$2 = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
__vue_inject_styles__$2,
__vue_script__$2,
__vue_scope_id__$2,
__vue_is_functional_template__$2,
__vue_module_identifier__$2,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
function borderBox1 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$2.name, __vue_component__$2);
2019-12-06 21:07:16 +08:00
}
//
var script$3 = {
name: 'DvBorderBox2',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
data() {
return {
ref: 'border-box-2',
defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
};
/* script */
const __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-2" }, [
_c(
"svg",
{
staticClass: "dv-border-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 7, 7 " +
(_vm.width - 7) +
", 7 " +
(_vm.width - 7) +
", " +
(_vm.height - 7) +
" 7, " +
(_vm.height - 7) +
"\n "
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
attrs: {
stroke: _vm.mergedColor[0],
points:
"2, 2 " +
(_vm.width - 2) +
" ,2 " +
(_vm.width - 2) +
", " +
(_vm.height - 2) +
" 2, " +
(_vm.height - 2) +
" 2, 2"
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
stroke: _vm.mergedColor[1],
points:
"6, 6 " +
(_vm.width - 6) +
", 6 " +
(_vm.width - 6) +
", " +
(_vm.height - 6) +
" 6, " +
(_vm.height - 6) +
" 6, 6"
}
}),
_vm._v(" "),
_c("circle", {
attrs: { fill: _vm.mergedColor[0], cx: "11", cy: "11", r: "1" }
}),
_vm._v(" "),
_c("circle", {
attrs: {
fill: _vm.mergedColor[0],
cx: _vm.width - 11,
cy: "11",
r: "1"
}
}),
_vm._v(" "),
_c("circle", {
attrs: {
fill: _vm.mergedColor[0],
cx: _vm.width - 11,
cy: _vm.height - 11,
r: "1"
}
}),
_vm._v(" "),
_c("circle", {
attrs: {
fill: _vm.mergedColor[0],
cx: "11",
cy: _vm.height - 11,
r: "1"
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$3 = [];
__vue_render__$3._withStripped = true;
/* style */
const __vue_inject_styles__$3 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-1e24c1c8_0", { source: ".dv-border-box-2 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-2 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-2 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-2 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-2 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$3 = undefined;
/* module identifier */
const __vue_module_identifier__$3 = undefined;
/* functional template */
const __vue_is_functional_template__$3 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$3 = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
__vue_inject_styles__$3,
__vue_script__$3,
__vue_scope_id__$3,
__vue_is_functional_template__$3,
__vue_module_identifier__$3,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
function borderBox2 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$3.name, __vue_component__$3);
2019-12-06 21:07:16 +08:00
}
//
var script$4 = {
name: 'DvBorderBox3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
data() {
return {
ref: 'border-box-3',
defaultColor: ['#2862b7', '#2862b7'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
};
/* script */
const __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-3" }, [
_c(
"svg",
{
staticClass: "dv-border-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 23, 23 " +
(_vm.width - 24) +
", 23 " +
(_vm.width - 24) +
", " +
(_vm.height - 24) +
" 23, " +
(_vm.height - 24) +
"\n "
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
staticClass: "dv-bb3-line1",
attrs: {
stroke: _vm.mergedColor[0],
points:
"4, 4 " +
(_vm.width - 22) +
" ,4 " +
(_vm.width - 22) +
", " +
(_vm.height - 22) +
" 4, " +
(_vm.height - 22) +
" 4, 4"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb3-line2",
attrs: {
stroke: _vm.mergedColor[1],
points:
"10, 10 " +
(_vm.width - 16) +
", 10 " +
(_vm.width - 16) +
", " +
(_vm.height - 16) +
" 10, " +
(_vm.height - 16) +
" 10, 10"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb3-line2",
attrs: {
stroke: _vm.mergedColor[1],
points:
"16, 16 " +
(_vm.width - 10) +
", 16 " +
(_vm.width - 10) +
", " +
(_vm.height - 10) +
" 16, " +
(_vm.height - 10) +
" 16, 16"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb3-line2",
attrs: {
stroke: _vm.mergedColor[1],
points:
"22, 22 " +
(_vm.width - 4) +
", 22 " +
(_vm.width - 4) +
", " +
(_vm.height - 4) +
" 22, " +
(_vm.height - 4) +
" 22, 22"
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$4 = [];
__vue_render__$4._withStripped = true;
/* style */
const __vue_inject_styles__$4 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-82d94504_0", { source: ".dv-border-box-3 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container polyline {\n fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-3 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-3 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-3 .dv-border-svg-container polyline {\n fill: none;\n}\n.dv-border-box-3 .dv-bb3-line1 {\n stroke-width: 3;\n}\n.dv-border-box-3 .dv-bb3-line2 {\n stroke-width: 1;\n}\n.dv-border-box-3 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$4 = undefined;
/* module identifier */
const __vue_module_identifier__$4 = undefined;
/* functional template */
const __vue_is_functional_template__$4 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$4 = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
__vue_inject_styles__$4,
__vue_script__$4,
__vue_scope_id__$4,
__vue_is_functional_template__$4,
__vue_module_identifier__$4,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
function borderBox3 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$4.name, __vue_component__$4);
2019-12-06 21:07:16 +08:00
}
//
var script$5 = {
name: 'DvBorderBox4',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
},
reverse: {
type: Boolean,
default: false
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
data() {
return {
ref: 'border-box-4',
defaultColor: ['red', 'rgba(0,0,255,0.8)'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
};
/* script */
const __vue_script__$5 = script$5;
/* template */
var __vue_render__$5 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-4" }, [
_c(
"svg",
{
class: "dv-border-svg-container " + (_vm.reverse && "dv-reverse"),
attrs: { width: _vm.width, height: _vm.height }
},
[
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n " +
(_vm.width - 15) +
", 22 170, 22 150, 7 40, 7 28, 21 32, 24\n 16, 42 16, " +
(_vm.height - 32) +
" 41, " +
(_vm.height - 7) +
" " +
(_vm.width - 15) +
", " +
(_vm.height - 7) +
"\n "
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
staticClass: "dv-bb4-line-1",
attrs: {
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
"145, " +
(_vm.height - 5) +
" 40, " +
(_vm.height - 5) +
" 10, " +
(_vm.height - 35) +
2019-12-06 21:07:16 +08:00
"\n 10, 40 40, 5 150, 5 170, 20 " +
2019-09-03 11:07:45 +08:00
(_vm.width - 15) +
", 20"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-2",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points:
"245, " +
(_vm.height - 1) +
" 36, " +
(_vm.height - 1) +
" 14, " +
(_vm.height - 23) +
2019-12-06 21:07:16 +08:00
"\n 14, " +
2019-09-03 11:07:45 +08:00
(_vm.height - 100)
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-3",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points: "7, " + (_vm.height - 40) + " 7, " + (_vm.height - 75)
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-4",
2019-12-06 21:07:16 +08:00
attrs: { stroke: _vm.mergedColor[0], points: "28, 24 13, 41 13, 64" }
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-5",
2019-12-06 21:07:16 +08:00
attrs: { stroke: _vm.mergedColor[0], points: "5, 45 5, 140" }
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-6",
2019-12-06 21:07:16 +08:00
attrs: { stroke: _vm.mergedColor[1], points: "14, 75 14, 180" }
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-7",
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[1],
points: "55, 11 147, 11 167, 26 250, 26"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-8",
2019-12-06 21:07:16 +08:00
attrs: { stroke: _vm.mergedColor[1], points: "158, 5 173, 16" }
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-9",
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[0],
points: "200, 17 " + (_vm.width - 10) + ", 17"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb4-line-10",
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[1],
points: "385, 17 " + (_vm.width - 10) + ", 17"
}
2019-09-03 11:07:45 +08:00
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$5 = [];
__vue_render__$5._withStripped = true;
/* style */
const __vue_inject_styles__$5 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-10a833ad_0", { source: ".dv-border-box-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container polyline {\n fill: none;\n}\n.dv-border-box-4 .sw1 {\n stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n stroke-width: 3px;\n stroke-linecap: round;\n stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n stroke-width: 1;\n stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,iBAAiB;EACjB,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,qBAAqB;EACrB,yBAAyB;AAC3B;AACA;EACE,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-4 .dv-reverse {\n transform: rotate(180deg);\n}\n.dv-border-box-4 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-4 .dv-border-svg-container polyline {\n fill: none;\n}\n.dv-border-box-4 .sw1 {\n stroke-width: 1;\n}\n.dv-border-box-4 .sw3 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-1 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-2 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-3 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-4 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-5 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-6 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-7 {\n stroke-width: 1;\n}\n.dv-border-box-4 .dv-bb4-line-8 {\n stroke-width: 3px;\n stroke-linecap: round;\n}\n.dv-border-box-4 .dv-bb4-line-9 {\n stroke-width: 3px;\n stroke-linecap: round;\n stroke-dasharray: 100 250;\n}\n.dv-border-box-4 .dv-bb4-line-10 {\n stroke-width: 1;\n stroke-dasharray: 80 270;\n}\n.dv-border-box-4 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$5 = undefined;
/* module identifier */
const __vue_module_identifier__$5 = undefined;
/* functional template */
const __vue_is_functional_template__$5 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$5 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
__vue_inject_styles__$5,
__vue_script__$5,
__vue_scope_id__$5,
__vue_is_functional_template__$5,
__vue_module_identifier__$5,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function borderBox4 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$5.name, __vue_component__$5);
2019-09-03 11:07:45 +08:00
}
//
var script$6 = {
name: 'DvBorderBox5',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
},
reverse: {
type: Boolean,
default: false
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
return {
2019-12-06 21:07:16 +08:00
ref: 'border-box-5',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
const __vue_script__$6 = script$6;
/* template */
var __vue_render__$6 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-5" }, [
_c(
"svg",
{
class: "dv-svg-container " + (_vm.reverse && "dv-reverse"),
attrs: { width: _vm.width, height: _vm.height }
},
[
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 10, 22 " +
(_vm.width - 22) +
", 22 " +
(_vm.width - 22) +
", " +
(_vm.height - 86) +
" " +
(_vm.width - 84) +
", " +
(_vm.height - 24) +
" 10, " +
(_vm.height - 24) +
"\n "
}
}),
_vm._v(" "),
2019-09-03 11:07:45 +08:00
_c("polyline", {
staticClass: "dv-bb5-line-1",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
"8, 5 " +
(_vm.width - 5) +
", 5 " +
(_vm.width - 5) +
", " +
(_vm.height - 100) +
2019-12-06 21:07:16 +08:00
"\n " +
2019-09-03 11:07:45 +08:00
(_vm.width - 100) +
", " +
(_vm.height - 5) +
" 8, " +
(_vm.height - 5) +
" 8, 5"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb5-line-2",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points:
"3, 5 " +
(_vm.width - 20) +
", 5 " +
(_vm.width - 20) +
", " +
(_vm.height - 60) +
2019-12-06 21:07:16 +08:00
"\n " +
2019-09-03 11:07:45 +08:00
(_vm.width - 74) +
", " +
(_vm.height - 5) +
" 3, " +
(_vm.height - 5) +
" 3, 5"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb5-line-3",
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[1],
points: "50, 13 " + (_vm.width - 35) + ", 13"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb5-line-4",
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[1],
points: "15, 20 " + (_vm.width - 35) + ", 20"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb5-line-5",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points:
"15, " +
(_vm.height - 20) +
" " +
(_vm.width - 110) +
", " +
(_vm.height - 20)
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb5-line-6",
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points:
"15, " +
(_vm.height - 13) +
" " +
(_vm.width - 110) +
", " +
(_vm.height - 13)
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$6 = [];
__vue_render__$6._withStripped = true;
/* style */
const __vue_inject_styles__$6 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-289cabb8_0", { source: ".dv-border-box-5 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-5 .dv-svg-container polyline {\n fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;AACZ;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-5 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-5 .dv-reverse {\n transform: rotate(180deg);\n}\n.dv-border-box-5 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-5 .dv-svg-container polyline {\n fill: none;\n}\n.dv-border-box-5 .dv-bb5-line-1,\n.dv-border-box-5 .dv-bb5-line-2 {\n stroke-width: 1;\n}\n.dv-border-box-5 .dv-bb5-line-3,\n.dv-border-box-5 .dv-bb5-line-6 {\n stroke-width: 5;\n}\n.dv-border-box-5 .dv-bb5-line-4,\n.dv-border-box-5 .dv-bb5-line-5 {\n stroke-width: 2;\n}\n.dv-border-box-5 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$6 = undefined;
/* module identifier */
const __vue_module_identifier__$6 = undefined;
/* functional template */
const __vue_is_functional_template__$6 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$6 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
__vue_inject_styles__$6,
__vue_script__$6,
__vue_scope_id__$6,
__vue_is_functional_template__$6,
__vue_module_identifier__$6,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function borderBox5 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$6.name, __vue_component__$6);
2019-09-03 11:07:45 +08:00
}
//
var script$7 = {
name: 'DvBorderBox6',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
return {
2019-12-06 21:07:16 +08:00
ref: 'border-box-6',
defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
};
/* script */
const __vue_script__$7 = script$7;
/* template */
var __vue_render__$7 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-6" }, [
_c(
"svg",
{
staticClass: "dv-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 9, 7 " +
(_vm.width - 9) +
", 7 " +
(_vm.width - 9) +
", " +
(_vm.height - 7) +
" 9, " +
(_vm.height - 7) +
"\n "
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("circle", {
attrs: { fill: _vm.mergedColor[1], cx: "5", cy: "5", r: "2" }
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("circle", {
attrs: {
fill: _vm.mergedColor[1],
cx: _vm.width - 5,
cy: "5",
r: "2"
}
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
_c("circle", {
2019-12-06 21:07:16 +08:00
attrs: {
fill: _vm.mergedColor[1],
cx: _vm.width - 5,
cy: _vm.height - 5,
r: "2"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("circle", {
attrs: {
fill: _vm.mergedColor[1],
cx: "5",
cy: _vm.height - 5,
r: "2"
}
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
_c("polyline", {
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[0],
points: "10, 4 " + (_vm.width - 10) + ", 4"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
"10, " +
(_vm.height - 4) +
" " +
(_vm.width - 10) +
", " +
(_vm.height - 4)
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
attrs: {
stroke: _vm.mergedColor[0],
points: "5, 70 5, " + (_vm.height - 70)
}
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
_vm.width -
5 +
", 70 " +
(_vm.width - 5) +
", " +
(_vm.height - 70)
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
attrs: { stroke: _vm.mergedColor[0], points: "3, 10, 3, 50" }
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
attrs: { stroke: _vm.mergedColor[0], points: "7, 30 7, 80" }
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
_c("polyline", {
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[0],
points: _vm.width - 3 + ", 10 " + (_vm.width - 3) + ", 50"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
2019-12-06 21:07:16 +08:00
attrs: {
stroke: _vm.mergedColor[0],
points: _vm.width - 7 + ", 30 " + (_vm.width - 7) + ", 80"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points: "3, " + (_vm.height - 10) + " 3, " + (_vm.height - 50)
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points: "7, " + (_vm.height - 30) + " 7, " + (_vm.height - 80)
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
_vm.width -
3 +
", " +
(_vm.height - 10) +
" " +
(_vm.width - 3) +
", " +
(_vm.height - 50)
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points:
_vm.width -
7 +
", " +
(_vm.height - 30) +
" " +
(_vm.width - 7) +
", " +
(_vm.height - 80)
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$7 = [];
__vue_render__$7._withStripped = true;
/* style */
const __vue_inject_styles__$7 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-03ae851c_0", { source: ".dv-border-box-6 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-6 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-6 .dv-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-6 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-6 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-6 .dv-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-6 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$7 = undefined;
/* module identifier */
const __vue_module_identifier__$7 = undefined;
/* functional template */
const __vue_is_functional_template__$7 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$7 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
__vue_inject_styles__$7,
__vue_script__$7,
__vue_scope_id__$7,
__vue_is_functional_template__$7,
__vue_module_identifier__$7,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function borderBox6 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$7.name, __vue_component__$7);
2019-09-03 11:07:45 +08:00
}
//
var script$8 = {
name: 'DvBorderBox7',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
return {
ref: 'border-box-7',
defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
};
/* script */
const __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
ref: _vm.ref,
staticClass: "dv-border-box-7",
style:
"box-shadow: inset 0 0 40px " +
_vm.mergedColor[0] +
"; border: 1px solid " +
2020-04-25 16:46:33 +08:00
_vm.mergedColor[0] +
"; background-color: " +
_vm.backgroundColor
2019-12-06 21:07:16 +08:00
},
[
_c(
"svg",
{
staticClass: "dv-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c("polyline", {
staticClass: "dv-bb7-line-width-2",
attrs: { stroke: _vm.mergedColor[0], points: "0, 25 0, 0 25, 0" }
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-2",
attrs: {
stroke: _vm.mergedColor[0],
points:
_vm.width -
25 +
", 0 " +
_vm.width +
", 0 " +
_vm.width +
", 25"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-2",
attrs: {
stroke: _vm.mergedColor[0],
points:
_vm.width -
25 +
", " +
_vm.height +
" " +
_vm.width +
", " +
_vm.height +
" " +
_vm.width +
", " +
(_vm.height - 25)
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-2",
attrs: {
stroke: _vm.mergedColor[0],
points:
"0, " +
(_vm.height - 25) +
" 0, " +
_vm.height +
" 25, " +
_vm.height
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-5",
attrs: { stroke: _vm.mergedColor[1], points: "0, 10 0, 0 10, 0" }
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-5",
attrs: {
stroke: _vm.mergedColor[1],
points:
_vm.width -
10 +
", 0 " +
_vm.width +
", 0 " +
_vm.width +
", 10"
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-5",
attrs: {
stroke: _vm.mergedColor[1],
points:
_vm.width -
10 +
", " +
_vm.height +
" " +
_vm.width +
", " +
_vm.height +
" " +
_vm.width +
", " +
(_vm.height - 10)
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "dv-bb7-line-width-5",
attrs: {
stroke: _vm.mergedColor[1],
points:
"0, " +
(_vm.height - 10) +
" 0, " +
_vm.height +
" 10, " +
_vm.height
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
]
)
2019-09-03 11:07:45 +08:00
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
const __vue_inject_styles__$8 = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-4b8597f9_0", { source: ".dv-border-box-7 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-7 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-7 .dv-svg-container polyline {\n fill: none;\n stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;AACd;AACA;EACE,UAAU;EACV,qBAAqB;AACvB;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-7 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-7 .dv-svg-container {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-7 .dv-svg-container polyline {\n fill: none;\n stroke-linecap: round;\n}\n.dv-border-box-7 .dv-bb7-line-width-2 {\n stroke-width: 2;\n}\n.dv-border-box-7 .dv-bb7-line-width-5 {\n stroke-width: 5;\n}\n.dv-border-box-7 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$8 = undefined;
/* module identifier */
const __vue_module_identifier__$8 = undefined;
/* functional template */
const __vue_is_functional_template__$8 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$8 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function borderBox7 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$8.name, __vue_component__$8);
2019-09-03 11:07:45 +08:00
}
//
var script$9 = {
name: 'DvBorderBox8',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
},
dur: {
type: Number,
default: 3
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2020-05-06 13:20:20 +08:00
},
reverse: {
type: Boolean,
default: false
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
ref: 'border-box-8',
2020-05-25 15:57:26 +08:00
path: `border-box-8-path-${id}`,
gradient: `border-box-8-gradient-${id}`,
mask: `border-box-8-mask-${id}`,
2019-12-06 21:07:16 +08:00
defaultColor: ['#235fa7', '#4fd2dd'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
computed: {
length() {
const {
width,
height
} = this;
return (width + height - 5) * 2;
2020-05-06 13:20:20 +08:00
},
pathD() {
const {
reverse,
width,
height
} = this;
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`;
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`;
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
const __vue_script__$9 = script$9;
/* template */
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-8" }, [
_c(
"svg",
{
staticClass: "dv-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c(
"defs",
[
_c("path", {
2020-05-06 13:20:20 +08:00
attrs: { id: _vm.path, d: _vm.pathD, fill: "transparent" }
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
_c(
"radialGradient",
{ attrs: { id: _vm.gradient, cx: "50%", cy: "50%", r: "50%" } },
[
_c("stop", {
attrs: {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "1"
}
}),
_vm._v(" "),
_c("stop", {
attrs: {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "0"
}
})
],
1
),
_vm._v(" "),
_c("mask", { attrs: { id: _vm.mask } }, [
_c(
"circle",
{
attrs: {
cx: "0",
cy: "0",
r: "150",
fill: "url(#" + _vm.gradient + ")"
}
},
[
_c("animateMotion", {
attrs: {
2019-12-06 21:07:16 +08:00
dur: _vm.dur + "s",
2020-05-06 13:20:20 +08:00
path: _vm.pathD,
2019-09-03 11:07:45 +08:00
rotate: "auto",
repeatCount: "indefinite"
}
})
],
1
)
])
],
1
),
_vm._v(" "),
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"5, 5 " +
(_vm.width - 5) +
", 5 " +
(_vm.width - 5) +
" " +
(_vm.height - 5) +
" 5, " +
(_vm.height - 5)
}
}),
_vm._v(" "),
2019-09-03 11:07:45 +08:00
_c("use", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "1",
"xlink:href": "#" + _vm.path
}
}),
_vm._v(" "),
_c(
"use",
{
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
"stroke-width": "3",
"xlink:href": "#" + _vm.path,
mask: "url(#" + _vm.mask + ")"
}
},
[
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
from: "0, " + _vm.length,
to: _vm.length + ", 0",
2019-12-06 21:07:16 +08:00
dur: _vm.dur + "s",
2019-09-03 11:07:45 +08:00
repeatCount: "indefinite"
}
})
]
)
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
const __vue_inject_styles__$9 = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-5e705490_0", { source: ".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
const __vue_scope_id__$9 = undefined;
/* module identifier */
const __vue_module_identifier__$9 = undefined;
/* functional template */
const __vue_is_functional_template__$9 = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$9 = normalizeComponent(
2019-09-03 11:07:45 +08:00
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function borderBox8 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$9.name, __vue_component__$9);
2019-09-03 11:07:45 +08:00
}
//
var script$a = {
name: 'DvBorderBox9',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
ref: 'border-box-9',
2020-05-25 15:57:26 +08:00
gradientId: `border-box-9-gradient-${id}`,
maskId: `border-box-9-mask-${id}`,
2019-12-06 21:07:16 +08:00
defaultColor: ['#11eefd', '#0078d2'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
};
/* script */
const __vue_script__$a = script$a;
/* template */
var __vue_render__$a = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-9" }, [
_c(
"svg",
{
staticClass: "dv-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c(
"defs",
[
_c(
"linearGradient",
{
attrs: {
id: _vm.gradientId,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "100%"
}
},
[
2019-12-06 21:07:16 +08:00
_c("animate", {
attrs: {
attributeName: "x1",
values: "0%;100%;0%",
dur: "10s",
begin: "0s",
repeatCount: "indefinite"
}
2019-09-03 11:07:45 +08:00
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("animate", {
attrs: {
attributeName: "x2",
values: "100%;0%;100%",
dur: "10s",
begin: "0s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c(
"stop",
{ attrs: { offset: "0%", "stop-color": _vm.mergedColor[0] } },
[
_c("animate", {
attrs: {
attributeName: "stop-color",
values:
_vm.mergedColor[0] +
";" +
_vm.mergedColor[1] +
";" +
_vm.mergedColor[0],
dur: "10s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"stop",
{
attrs: { offset: "100%", "stop-color": _vm.mergedColor[1] }
},
[
_c("animate", {
attrs: {
attributeName: "stop-color",
values:
_vm.mergedColor[1] +
";" +
_vm.mergedColor[0] +
";" +
_vm.mergedColor[1],
dur: "10s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
)
2019-09-03 11:07:45 +08:00
],
1
),
_vm._v(" "),
_c("mask", { attrs: { id: _vm.maskId } }, [
_c("polyline", {
attrs: {
stroke: "#fff",
"stroke-width": "3",
fill: "transparent",
points:
"8, " +
_vm.height * 0.4 +
" 8, 3, " +
(_vm.width * 0.4 + 7) +
", 3"
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "#fff",
points:
"8, " +
_vm.height * 0.15 +
" 8, 3, " +
(_vm.width * 0.1 + 7) +
", 3\n " +
_vm.width * 0.1 +
", 8 14, 8 14, " +
(_vm.height * 0.15 - 7) +
"\n "
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
stroke: "#fff",
"stroke-width": "3",
fill: "transparent",
points:
_vm.width * 0.5 +
", 3 " +
(_vm.width - 3) +
", 3, " +
(_vm.width - 3) +
", " +
_vm.height * 0.25
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "#fff",
points:
"\n " +
_vm.width * 0.52 +
", 3 " +
_vm.width * 0.58 +
", 3\n " +
(_vm.width * 0.58 - 7) +
", 9 " +
(_vm.width * 0.52 + 7) +
", 9\n "
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "#fff",
points:
"\n " +
_vm.width * 0.9 +
", 3 " +
(_vm.width - 3) +
", 3 " +
(_vm.width - 3) +
", " +
_vm.height * 0.1 +
"\n " +
(_vm.width - 9) +
", " +
(_vm.height * 0.1 - 7) +
" " +
(_vm.width - 9) +
", 9 " +
(_vm.width * 0.9 + 7) +
", 9\n "
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
stroke: "#fff",
"stroke-width": "3",
fill: "transparent",
points:
"8, " +
_vm.height * 0.5 +
" 8, " +
(_vm.height - 3) +
" " +
(_vm.width * 0.3 + 7) +
", " +
(_vm.height - 3)
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "#fff",
points:
"\n 8, " +
_vm.height * 0.55 +
" 8, " +
_vm.height * 0.7 +
"\n 2, " +
(_vm.height * 0.7 - 7) +
" 2, " +
(_vm.height * 0.55 + 7) +
"\n "
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
stroke: "#fff",
"stroke-width": "3",
fill: "transparent",
points:
_vm.width * 0.35 +
", " +
(_vm.height - 3) +
" " +
(_vm.width - 3) +
", " +
(_vm.height - 3) +
" " +
(_vm.width - 3) +
", " +
_vm.height * 0.35
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "#fff",
points:
"\n " +
_vm.width * 0.92 +
", " +
(_vm.height - 3) +
" " +
(_vm.width - 3) +
", " +
(_vm.height - 3) +
" " +
(_vm.width - 3) +
", " +
_vm.height * 0.8 +
"\n " +
(_vm.width - 9) +
", " +
(_vm.height * 0.8 + 7) +
" " +
(_vm.width - 9) +
", " +
(_vm.height - 9) +
" " +
(_vm.width * 0.92 + 7) +
", " +
(_vm.height - 9) +
"\n "
}
})
])
],
1
),
_vm._v(" "),
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 15, 9 " +
(_vm.width * 0.1 + 1) +
", 9 " +
(_vm.width * 0.1 + 4) +
", 6 " +
(_vm.width * 0.52 + 2) +
", 6\n " +
(_vm.width * 0.52 + 6) +
", 10 " +
(_vm.width * 0.58 - 7) +
", 10 " +
(_vm.width * 0.58 - 2) +
", 6\n " +
(_vm.width * 0.9 + 2) +
", 6 " +
(_vm.width * 0.9 + 6) +
", 10 " +
(_vm.width - 10) +
", 10 " +
(_vm.width - 10) +
", " +
(_vm.height * 0.1 - 6) +
"\n " +
(_vm.width - 6) +
", " +
(_vm.height * 0.1 - 1) +
" " +
(_vm.width - 6) +
", " +
(_vm.height * 0.8 + 1) +
" " +
(_vm.width - 10) +
", " +
(_vm.height * 0.8 + 6) +
"\n " +
(_vm.width - 10) +
", " +
(_vm.height - 10) +
" " +
(_vm.width * 0.92 + 7) +
", " +
(_vm.height - 10) +
" " +
(_vm.width * 0.92 + 2) +
", " +
(_vm.height - 6) +
"\n 11, " +
(_vm.height - 6) +
" 11, " +
(_vm.height * 0.15 - 2) +
" 15, " +
(_vm.height * 0.15 - 7) +
"\n "
}
}),
_vm._v(" "),
2019-09-03 11:07:45 +08:00
_c("rect", {
attrs: {
x: "0",
y: "0",
width: _vm.width,
height: _vm.height,
fill: "url(#" + _vm.gradientId + ")",
mask: "url(#" + _vm.maskId + ")"
}
})
]
2019-12-06 21:07:16 +08:00
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$a = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-50673f47_0", { source: ".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$a = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$a = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$a = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$a = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
2019-12-06 21:07:16 +08:00
function borderBox9 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$a.name, __vue_component__$a);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$b = {
name: 'DvBorderBox10',
2020-04-25 16:46:33 +08:00
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
return {
2020-04-25 16:46:33 +08:00
ref: 'border-box-10',
2019-12-06 21:07:16 +08:00
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
defaultColor: ['#1d48c4', '#d3e1f8'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
2019-09-03 11:07:45 +08:00
const {
2019-12-06 21:07:16 +08:00
mergeColor
2019-09-03 11:07:45 +08:00
} = this;
2019-12-06 21:07:16 +08:00
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
2019-09-03 11:07:45 +08:00
const {
2019-12-06 21:07:16 +08:00
color,
defaultColor
2019-09-03 11:07:45 +08:00
} = this;
2019-12-06 21:07:16 +08:00
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$b = script$b;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$b = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
2019-12-06 21:07:16 +08:00
var _c = _vm._self._c || _h;
return _c(
"div",
{
2020-04-25 16:46:33 +08:00
ref: _vm.ref,
2019-12-06 21:07:16 +08:00
staticClass: "dv-border-box-10",
style: "box-shadow: inset 0 0 25px 3px " + _vm.mergedColor[0]
},
[
2020-04-25 16:46:33 +08:00
_c(
"svg",
{
staticClass: "border",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 4, 0 " +
(_vm.width - 4) +
", 0 " +
_vm.width +
", 4 " +
_vm.width +
", " +
(_vm.height - 4) +
" " +
(_vm.width - 4) +
", " +
_vm.height +
"\n 4, " +
_vm.height +
" 0, " +
(_vm.height - 4) +
" 0, 4\n "
}
})
]
),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_vm._l(_vm.border, function(item) {
return _c(
"svg",
{
key: item,
class: item + " border",
attrs: { width: "150px", height: "150px" }
},
[
_c("polygon", {
attrs: {
fill: _vm.mergedColor[1],
points: "40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
}
})
]
)
}),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
],
2
)
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$b = [];
__vue_render__$b._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$b = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-3b7b23ff_0", { source: ".dv-border-box-10 {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n}\n.dv-border-box-10 .border {\n position: absolute;\n display: block;\n}\n.dv-border-box-10 .right-top {\n right: 0px;\n transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n bottom: 0px;\n transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n right: 0px;\n bottom: 0px;\n transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,cAAc;AAChB;AACA;EACE,UAAU;EACV,0BAA0B;AAC5B;AACA;EACE,WAAW;EACX,0BAA0B;AAC5B;AACA;EACE,UAAU;EACV,WAAW;EACX,0CAA0C;AAC5C;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-10 {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 6px;\n}\n.dv-border-box-10 .border {\n position: absolute;\n display: block;\n}\n.dv-border-box-10 .right-top {\n right: 0px;\n transform: rotateY(180deg);\n}\n.dv-border-box-10 .left-bottom {\n bottom: 0px;\n transform: rotateX(180deg);\n}\n.dv-border-box-10 .right-bottom {\n right: 0px;\n bottom: 0px;\n transform: rotateX(180deg) rotateY(180deg);\n}\n.dv-border-box-10 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$b = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$b = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$b = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$b = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
2019-12-06 21:07:16 +08:00
function borderBox10 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$b.name, __vue_component__$b);
2019-12-06 21:07:16 +08:00
}
var keywords = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _default = new Map([['transparent', 'rgba(0,0,0,0)'], ['black', '#000000'], ['silver', '#C0C0C0'], ['gray', '#808080'], ['white', '#FFFFFF'], ['maroon', '#800000'], ['red', '#FF0000'], ['purple', '#800080'], ['fuchsia', '#FF00FF'], ['green', '#008000'], ['lime', '#00FF00'], ['olive', '#808000'], ['yellow', '#FFFF00'], ['navy', '#000080'], ['blue', '#0000FF'], ['teal', '#008080'], ['aqua', '#00FFFF'], ['aliceblue', '#f0f8ff'], ['antiquewhite', '#faebd7'], ['aquamarine', '#7fffd4'], ['azure', '#f0ffff'], ['beige', '#f5f5dc'], ['bisque', '#ffe4c4'], ['blanchedalmond', '#ffebcd'], ['blueviolet', '#8a2be2'], ['brown', '#a52a2a'], ['burlywood', '#deb887'], ['cadetblue', '#5f9ea0'], ['chartreuse', '#7fff00'], ['chocolate', '#d2691e'], ['coral', '#ff7f50'], ['cornflowerblue', '#6495ed'], ['cornsilk', '#fff8dc'], ['crimson', '#dc143c'], ['cyan', '#00ffff'], ['darkblue', '#00008b'], ['darkcyan', '#008b8b'], ['darkgoldenrod', '#b8860b'], ['darkgray', '#a9a9a9'], ['darkgreen', '#006400'], ['darkgrey', '#a9a9a9'], ['darkkhaki', '#bdb76b'], ['darkmagenta', '#8b008b'], ['darkolivegreen', '#556b2f'], ['darkorange', '#ff8c00'], ['darkorchid', '#9932cc'], ['darkred', '#8b0000'], ['darksalmon', '#e9967a'], ['darkseagreen', '#8fbc8f'], ['darkslateblue', '#483d8b'], ['darkslategray', '#2f4f4f'], ['darkslategrey', '#2f4f4f'], ['darkturquoise', '#00ced1'], ['darkviolet', '#9400d3'], ['deeppink', '#ff1493'], ['deepskyblue', '#00bfff'], ['dimgray', '#696969'], ['dimgrey', '#696969'], ['dodgerblue', '#1e90ff'], ['firebrick', '#b22222'], ['floralwhite', '#fffaf0'], ['forestgreen', '#228b22'], ['gainsboro', '#dcdcdc'], ['ghostwhite', '#f8f8ff'], ['gold', '#ffd700'], ['goldenrod', '#daa520'], ['greenyellow', '#adff2f'], ['grey', '#808080'], ['honeydew', '#f0fff0'], ['hotpink', '#ff69b4'], ['indianred', '#cd5c5c'], ['indigo', '#4b0082'], ['ivory', '#fffff0'], ['khaki', '#f0e68c'], ['lavender', '#e6e6fa'], ['lavenderblush', '#fff0f5'], ['lawngreen', '#7cfc00'], ['lemonchiffon', '#fffacd'], ['lightblue', '#add8e6'], ['lightcoral', '#f08080'], ['lightcyan', '#e0ffff'], ['lightgoldenrodyellow', '#fafad2'], ['lightgray', '#d3d3d3'], ['lightgreen', '#90ee90'], ['lightgrey', '#d3d3d3'], ['lightpink', '#ffb6c1'], ['lightsalmon', '#ffa07a'], ['lightseagreen', '#20b2aa'], ['lightskyblue', '#87cefa'], ['lightslategray', '#778899'], ['lightslategrey', '#778899'], ['lightsteelblue', '#b0c4de'], ['lightyellow', '#ffffe0'], ['limegreen', '#32cd32'], ['linen', '#faf0e6'], ['magenta', '#ff00ff'], ['mediumaquamarine', '#66cdaa'], ['mediumblue', '#0000cd'], ['mediumorchid', '#ba55d3'], ['mediumpurple', '#9370db'], ['mediumseagreen', '#3cb371'], ['mediumslateblue', '#7b68ee'], ['mediumspringgreen', '#00fa9a'], ['mediumturquoise', '#48d1cc'], ['mediumvioletred', '#c71585'], ['midnightblue', '#191970'], ['mintcream', '#f5fffa'], ['mistyrose', '#ffe4e1'], ['moccasin', '#ffe4b5'], ['navajowhite', '#ffdead'], ['oldlace', '#fdf5e6'], ['olivedrab', '#6b8e23'], ['orange', '#ffa500'], ['orangered', '#ff4500'], ['orchid', '#da70d6'], ['palegoldenrod', '#eee8aa'], ['palegreen', '#98fb98'], ['paleturquoise', '#afeeee'], ['palevioletred', '#db7093'], ['papayawhip', '#ffefd5'], ['peachpuff', '#ffdab9'], ['peru', '#cd853f'], ['pink', '#ffc0cb'], ['plum', '#dda0dd'], ['powderblue', '#b0e0e6'], ['rosybrown', '#bc8f8f'], ['royalblue', '#4169e1'], ['saddlebrown', '#8b4513'], ['salmon', '#fa8072'], ['sandybrown', '#f4a460'], ['seagreen', '#2e8b57'], ['seashell', '#fff5ee'], ['sienna', '#a0522d'], ['skyblue', '#87ceeb'], ['slateblue', '#6a5acd'], ['slategray', '#708090'], ['slategrey', '#708090'], ['snow', '#fffafa'], ['springgreen', '#00ff7f'], ['steelblue', '#4682b4'], ['tan', '#d2b48c'], ['thistle', '#d8bfd8'], ['tomato', '#ff6347'], ['turquoise', '#40e0d0'], ['violet', '#ee82ee'], ['wheat', '#f5deb3'], ['whitesmoke', '#f5f5f5'], ['yellowgreen', '#9acd32']]);
exports["default"] = _default;
});
unwrapExports(keywords);
var lib = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getRgbValue = getRgbValue;
exports.getRgbaValue = getRgbaValue;
exports.getOpacity = getOpacity;
exports.toRgb = toRgb;
exports.toHex = toHex;
exports.getColorFromRgbValue = getColorFromRgbValue;
exports.darken = darken;
exports.lighten = lighten;
exports.fade = fade;
exports["default"] = void 0;
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
var _keywords = interopRequireDefault(keywords);
var hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var rgbReg = /^(rgb|rgba|RGB|RGBA)/;
var rgbaReg = /^(rgba|RGBA)/;
2020-05-06 14:15:15 +08:00
/**
* @description Color validator
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {String|Boolean} Valid color Or false
2019-12-06 21:07:16 +08:00
*/
function validator(color) {
var isHex = hexReg.test(color);
var isRgb = rgbReg.test(color);
if (isHex || isRgb) return color;
color = getColorByKeyword(color);
if (!color) {
console.error('Color: Invalid color!');
return false;
}
return color;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get color by keyword
* @param {String} keyword Color keyword like red, green and etc.
* @return {String|Boolean} Hex or rgba color (Invalid keyword will return false)
2019-12-06 21:07:16 +08:00
*/
function getColorByKeyword(keyword) {
if (!keyword) {
console.error('getColorByKeywords: Missing parameters!');
return false;
}
if (!_keywords["default"].has(keyword)) return false;
return _keywords["default"].get(keyword);
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the Rgb value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgb value of the color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
function getRgbValue(color) {
if (!color) {
console.error('getRgbValue: Missing parameters!');
return false;
}
color = validator(color);
if (!color) return false;
var isHex = hexReg.test(color);
var isRgb = rgbReg.test(color);
var lowerColor = color.toLowerCase();
if (isHex) return getRgbValueFromHex(lowerColor);
if (isRgb) return getRgbValueFromRgb(lowerColor);
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the rgb value of the hex color
* @param {String} color Hex color
* @return {Array<Number>} Rgb value of the color
2019-12-06 21:07:16 +08:00
*/
function getRgbValueFromHex(color) {
color = color.replace('#', '');
if (color.length === 3) color = Array.from(color).map(function (hexNum) {
return hexNum + hexNum;
}).join('');
color = color.split('');
return new Array(3).fill(0).map(function (t, i) {
return parseInt("0x".concat(color[i * 2]).concat(color[i * 2 + 1]));
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the rgb value of the rgb/rgba color
* @param {String} color Hex color
* @return {Array} Rgb value of the color
2019-12-06 21:07:16 +08:00
*/
function getRgbValueFromRgb(color) {
return color.replace(/rgb\(|rgba\(|\)/g, '').split(',').slice(0, 3).map(function (n) {
return parseInt(n);
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the Rgba value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgba value of the color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
function getRgbaValue(color) {
if (!color) {
console.error('getRgbaValue: Missing parameters!');
return false;
}
var colorValue = getRgbValue(color);
if (!colorValue) return false;
colorValue.push(getOpacity(color));
return colorValue;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the opacity of color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number|Boolean} Color opacity (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
function getOpacity(color) {
if (!color) {
console.error('getOpacity: Missing parameters!');
return false;
}
color = validator(color);
if (!color) return false;
var isRgba = rgbaReg.test(color);
if (!isRgba) return 1;
color = color.toLowerCase();
return Number(color.split(',').slice(-1)[0].replace(/[)|\s]/g, ''));
}
2020-05-06 14:15:15 +08:00
/**
* @description Convert color to Rgb|Rgba color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} opacity The opacity of color
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
function toRgb(color, opacity) {
if (!color) {
console.error('toRgb: Missing parameters!');
return false;
}
var rgbValue = getRgbValue(color);
if (!rgbValue) return false;
var addOpacity = typeof opacity === 'number';
if (addOpacity) return 'rgba(' + rgbValue.join(',') + ",".concat(opacity, ")");
return 'rgb(' + rgbValue.join(',') + ')';
}
2020-05-06 14:15:15 +08:00
/**
* @description Convert color to Hex color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {String|Boolean} Hex color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
function toHex(color) {
if (!color) {
console.error('toHex: Missing parameters!');
return false;
}
if (hexReg.test(color)) return color;
color = getRgbValue(color);
if (!color) return false;
return '#' + color.map(function (n) {
return Number(n).toString(16);
}).map(function (n) {
return n === '0' ? '00' : n;
}).join('');
2019-09-03 11:07:45 +08:00
}
2020-05-06 14:15:15 +08:00
/**
* @description Get Color from Rgb|Rgba value
* @param {Array<Number>} value Rgb|Rgba color value
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function getColorFromRgbValue(value) {
if (!value) {
console.error('getColorFromRgbValue: Missing parameters!');
return false;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var valueLength = value.length;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
if (valueLength !== 3 && valueLength !== 4) {
console.error('getColorFromRgbValue: Value is illegal!');
return false;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var color = valueLength === 3 ? 'rgb(' : 'rgba(';
color += value.join(',') + ')';
return color;
}
2020-05-06 14:15:15 +08:00
/**
* @description Deepen color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number} Percent of Deepen (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function darken(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
if (!color) {
console.error('darken: Missing parameters!');
return false;
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var rgbaValue = getRgbaValue(color);
if (!rgbaValue) return false;
rgbaValue = rgbaValue.map(function (v, i) {
return i === 3 ? v : v - Math.ceil(2.55 * percent);
}).map(function (v) {
return v < 0 ? 0 : v;
});
return getColorFromRgbValue(rgbaValue);
}
2020-05-06 14:15:15 +08:00
/**
* @description Brighten color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number} Percent of brighten (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function lighten(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
if (!color) {
console.error('lighten: Missing parameters!');
return false;
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var rgbaValue = getRgbaValue(color);
if (!rgbaValue) return false;
rgbaValue = rgbaValue.map(function (v, i) {
return i === 3 ? v : v + Math.ceil(2.55 * percent);
}).map(function (v) {
return v > 255 ? 255 : v;
});
return getColorFromRgbValue(rgbaValue);
}
2020-05-06 14:15:15 +08:00
/**
* @description Adjust color opacity
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} Percent of opacity
* @return {String|Boolean} Rgba color (Invalid input will return false)
2019-12-06 21:07:16 +08:00
*/
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function fade(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
if (!color) {
console.error('fade: Missing parameters!');
return false;
}
var rgbValue = getRgbValue(color);
if (!rgbValue) return false;
var rgbaValue = [].concat((0, _toConsumableArray2["default"])(rgbValue), [percent / 100]);
return getColorFromRgbValue(rgbaValue);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var _default = {
fade: fade,
toHex: toHex,
toRgb: toRgb,
darken: darken,
lighten: lighten,
getOpacity: getOpacity,
getRgbValue: getRgbValue,
getRgbaValue: getRgbaValue,
getColorFromRgbValue: getColorFromRgbValue
};
exports["default"] = _default;
});
unwrapExports(lib);
var lib_1 = lib.getRgbValue;
var lib_2 = lib.getRgbaValue;
var lib_3 = lib.getOpacity;
var lib_4 = lib.toRgb;
var lib_5 = lib.toHex;
var lib_6 = lib.getColorFromRgbValue;
var lib_7 = lib.darken;
var lib_8 = lib.lighten;
var lib_9 = lib.fade;
2019-09-03 11:07:45 +08:00
//
2019-12-06 21:07:16 +08:00
var script$c = {
name: 'DvBorderBox11',
2019-09-03 11:07:45 +08:00
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
},
titleWidth: {
type: Number,
default: 250
},
title: {
type: String,
default: ''
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
2019-12-06 21:07:16 +08:00
ref: 'border-box-11',
2020-05-25 15:57:26 +08:00
filterId: `border-box-11-filterId-${id}`,
2019-12-06 21:07:16 +08:00
defaultColor: ['#8aaafb', '#1f33a2'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
2019-09-03 11:07:45 +08:00
const {
2019-12-06 21:07:16 +08:00
mergeColor
2019-09-03 11:07:45 +08:00
} = this;
2019-12-06 21:07:16 +08:00
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
2019-09-03 11:07:45 +08:00
const {
2019-12-06 21:07:16 +08:00
color,
defaultColor
2019-09-03 11:07:45 +08:00
} = this;
2019-12-06 21:07:16 +08:00
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
},
2019-12-06 21:07:16 +08:00
fade: lib_9
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$c = script$c;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$c = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
2019-12-06 21:07:16 +08:00
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-11" }, [
2019-09-03 11:07:45 +08:00
_c(
"svg",
{
2019-12-06 21:07:16 +08:00
staticClass: "dv-border-svg-container",
attrs: { width: _vm.width, height: _vm.height }
2019-09-03 11:07:45 +08:00
},
[
2019-12-06 21:07:16 +08:00
_c("defs", [
_c(
"filter",
{
attrs: {
id: _vm.filterId,
height: "150%",
width: "150%",
x: "-25%",
y: "-25%"
}
},
[
_c("feMorphology", {
2019-09-03 11:07:45 +08:00
attrs: {
2019-12-06 21:07:16 +08:00
operator: "dilate",
radius: "2",
in: "SourceAlpha",
result: "thicken"
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
}),
_vm._v(" "),
_c("feGaussianBlur", {
attrs: { in: "thicken", stdDeviation: "3", result: "blurred" }
}),
_vm._v(" "),
_c("feFlood", {
attrs: {
"flood-color": _vm.mergedColor[1],
result: "glowColor"
}
}),
_vm._v(" "),
_c("feComposite", {
attrs: {
in: "glowColor",
in2: "blurred",
operator: "in",
result: "softGlowColored"
}
}),
_vm._v(" "),
_c(
"feMerge",
[
_c("feMergeNode", { attrs: { in: "softGlowColored" } }),
_vm._v(" "),
_c("feMergeNode", { attrs: { in: "SourceGraphic" } })
],
1
)
],
1
)
]),
_vm._v(" "),
2020-04-25 16:46:33 +08:00
_c("polygon", {
attrs: {
fill: _vm.backgroundColor,
points:
"\n 20, 32 " +
(_vm.width * 0.5 - _vm.titleWidth / 2) +
", 32 " +
(_vm.width * 0.5 - _vm.titleWidth / 2 + 20) +
", 53\n " +
(_vm.width * 0.5 + _vm.titleWidth / 2 - 20) +
", 53 " +
(_vm.width * 0.5 + _vm.titleWidth / 2) +
", 32\n " +
(_vm.width - 20) +
", 32 " +
(_vm.width - 8) +
", 48 " +
(_vm.width - 8) +
", " +
(_vm.height - 25) +
" " +
(_vm.width - 20) +
", " +
(_vm.height - 8) +
"\n 20, " +
(_vm.height - 8) +
" 8, " +
(_vm.height - 25) +
" 8, 50\n "
}
}),
_vm._v(" "),
2019-12-06 21:07:16 +08:00
_c("polyline", {
attrs: {
stroke: _vm.mergedColor[0],
filter: "url(#" + _vm.filterId + ")",
points:
"\n " +
(_vm.width - _vm.titleWidth) / 2 +
", 30\n 20, 30 7, 50 7, " +
(50 + (_vm.height - 167) / 2) +
"\n 13, " +
(55 + (_vm.height - 167) / 2) +
" 13, " +
(135 + (_vm.height - 167) / 2) +
"\n 7, " +
(140 + (_vm.height - 167) / 2) +
" 7, " +
(_vm.height - 27) +
"\n 20, " +
(_vm.height - 7) +
" " +
(_vm.width - 20) +
", " +
(_vm.height - 7) +
" " +
(_vm.width - 7) +
", " +
(_vm.height - 27) +
"\n " +
(_vm.width - 7) +
", " +
(140 + (_vm.height - 167) / 2) +
" " +
(_vm.width - 13) +
", " +
(135 + (_vm.height - 167) / 2) +
"\n " +
(_vm.width - 13) +
", " +
(55 + (_vm.height - 167) / 2) +
" " +
(_vm.width - 7) +
", " +
(50 + (_vm.height - 167) / 2) +
"\n " +
(_vm.width - 7) +
", 50 " +
(_vm.width - 20) +
", 30 " +
(_vm.width + _vm.titleWidth) / 2 +
", 30\n " +
((_vm.width + _vm.titleWidth) / 2 - 20) +
", 7 " +
((_vm.width - _vm.titleWidth) / 2 + 20) +
", 7\n " +
(_vm.width - _vm.titleWidth) / 2 +
", 30 " +
((_vm.width - _vm.titleWidth) / 2 + 20) +
", 52\n " +
((_vm.width + _vm.titleWidth) / 2 - 20) +
", 52 " +
(_vm.width + _vm.titleWidth) / 2 +
", 30\n "
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
stroke: _vm.mergedColor[0],
fill: "transparent",
points:
"\n " +
((_vm.width + _vm.titleWidth) / 2 - 5) +
", 30 " +
((_vm.width + _vm.titleWidth) / 2 - 21) +
", 11\n " +
((_vm.width + _vm.titleWidth) / 2 - 27) +
", 11 " +
((_vm.width + _vm.titleWidth) / 2 - 8) +
", 34\n "
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
stroke: _vm.mergedColor[0],
fill: "transparent",
points:
"\n " +
((_vm.width - _vm.titleWidth) / 2 + 5) +
", 30 " +
((_vm.width - _vm.titleWidth) / 2 + 22) +
", 49\n " +
((_vm.width - _vm.titleWidth) / 2 + 28) +
", 49 " +
((_vm.width - _vm.titleWidth) / 2 + 8) +
", 26\n "
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
stroke: _vm.mergedColor[0],
fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
filter: "url(#" + _vm.filterId + ")",
points:
"\n " +
((_vm.width + _vm.titleWidth) / 2 - 11) +
", 37 " +
((_vm.width + _vm.titleWidth) / 2 - 32) +
", 11\n " +
((_vm.width - _vm.titleWidth) / 2 + 23) +
", 11 " +
((_vm.width - _vm.titleWidth) / 2 + 11) +
", 23\n " +
((_vm.width - _vm.titleWidth) / 2 + 33) +
", 49 " +
((_vm.width + _vm.titleWidth) / 2 - 22) +
", 49\n "
}
}),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "1",
points:
"\n " +
((_vm.width - _vm.titleWidth) / 2 - 10) +
", 37 " +
((_vm.width - _vm.titleWidth) / 2 - 31) +
", 37\n " +
((_vm.width - _vm.titleWidth) / 2 - 25) +
", 46 " +
((_vm.width - _vm.titleWidth) / 2 - 4) +
", 46\n "
}
},
[
_c("animate", {
attrs: {
attributeName: "opacity",
values: "1;0.7;1",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}
})
2019-09-03 11:07:45 +08:00
]
2019-12-06 21:07:16 +08:00
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "0.7",
points:
"\n " +
((_vm.width - _vm.titleWidth) / 2 - 40) +
", 37 " +
((_vm.width - _vm.titleWidth) / 2 - 61) +
", 37\n " +
((_vm.width - _vm.titleWidth) / 2 - 55) +
", 46 " +
((_vm.width - _vm.titleWidth) / 2 - 34) +
", 46\n "
}
},
[
_c("animate", {
attrs: {
attributeName: "opacity",
values: "0.7;0.4;0.7",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
2019-09-03 11:07:45 +08:00
_c(
2019-12-06 21:07:16 +08:00
"polygon",
2019-09-03 11:07:45 +08:00
{
attrs: {
2019-12-06 21:07:16 +08:00
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "0.5",
points:
"\n " +
((_vm.width - _vm.titleWidth) / 2 - 70) +
", 37 " +
((_vm.width - _vm.titleWidth) / 2 - 91) +
", 37\n " +
((_vm.width - _vm.titleWidth) / 2 - 85) +
", 46 " +
((_vm.width - _vm.titleWidth) / 2 - 64) +
", 46\n "
2019-09-03 11:07:45 +08:00
}
},
[
2019-12-06 21:07:16 +08:00
_c("animate", {
2019-09-03 11:07:45 +08:00
attrs: {
2019-12-06 21:07:16 +08:00
attributeName: "opacity",
values: "0.5;0.2;0.5",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
})
]
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "1",
points:
"\n " +
((_vm.width + _vm.titleWidth) / 2 + 30) +
", 37 " +
((_vm.width + _vm.titleWidth) / 2 + 9) +
", 37\n " +
((_vm.width + _vm.titleWidth) / 2 + 3) +
", 46 " +
((_vm.width + _vm.titleWidth) / 2 + 24) +
", 46\n "
}
},
[
_c("animate", {
2019-09-03 11:07:45 +08:00
attrs: {
2019-12-06 21:07:16 +08:00
attributeName: "opacity",
values: "1;0.7;1",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
2019-09-03 11:07:45 +08:00
}
})
]
2019-12-06 21:07:16 +08:00
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "0.7",
points:
"\n " +
((_vm.width + _vm.titleWidth) / 2 + 60) +
", 37 " +
((_vm.width + _vm.titleWidth) / 2 + 39) +
", 37\n " +
((_vm.width + _vm.titleWidth) / 2 + 33) +
", 46 " +
((_vm.width + _vm.titleWidth) / 2 + 54) +
", 46\n "
}
},
[
_c("animate", {
attrs: {
attributeName: "opacity",
values: "0.7;0.4;0.7",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"polygon",
{
attrs: {
filter: "url(#" + _vm.filterId + ")",
fill: _vm.mergedColor[0],
opacity: "0.5",
points:
"\n " +
((_vm.width + _vm.titleWidth) / 2 + 90) +
", 37 " +
((_vm.width + _vm.titleWidth) / 2 + 69) +
", 37\n " +
((_vm.width + _vm.titleWidth) / 2 + 63) +
", 46 " +
((_vm.width + _vm.titleWidth) / 2 + 84) +
", 46\n "
}
},
[
_c("animate", {
attrs: {
attributeName: "opacity",
values: "0.5;0.2;0.5",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"text",
{
staticClass: "dv-border-box-11-title",
attrs: {
x: "" + _vm.width / 2,
y: "32",
fill: "#fff",
"font-size": "18",
"text-anchor": "middle",
"dominant-baseline": "middle"
}
},
[_vm._v("\n " + _vm._s(_vm.title) + "\n ")]
),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.mergedColor[0],
filter: "url(#" + _vm.filterId + ")",
points:
"\n 7, " +
(53 + (_vm.height - 167) / 2) +
" 11, " +
(57 + (_vm.height - 167) / 2) +
"\n 11, " +
(133 + (_vm.height - 167) / 2) +
" 7, " +
(137 + (_vm.height - 167) / 2) +
"\n "
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.mergedColor[0],
filter: "url(#" + _vm.filterId + ")",
points:
"\n " +
(_vm.width - 7) +
", " +
(53 + (_vm.height - 167) / 2) +
" " +
(_vm.width - 11) +
", " +
(57 + (_vm.height - 167) / 2) +
"\n " +
(_vm.width - 11) +
", " +
(133 + (_vm.height - 167) / 2) +
" " +
(_vm.width - 7) +
", " +
(137 + (_vm.height - 167) / 2) +
"\n "
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$c = [];
__vue_render__$c._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$c = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-640dce48_0", { source: ".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$c = undefined;
/* module identifier */
const __vue_module_identifier__$c = undefined;
/* functional template */
const __vue_is_functional_template__$c = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$c = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
__vue_inject_styles__$c,
__vue_script__$c,
__vue_scope_id__$c,
__vue_is_functional_template__$c,
__vue_module_identifier__$c,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function borderBox11 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$c.name, __vue_component__$c);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
//
var script$d = {
name: 'DvBorderBox12',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-12-06 21:07:16 +08:00
return {
ref: 'border-box-12',
2020-05-25 15:57:26 +08:00
filterId: `borderr-box-12-filterId-${id}`,
2019-12-06 21:07:16 +08:00
defaultColor: ['#2e6099', '#7ce7fd'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
fade: lib_9
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$d = script$d;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$d = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-12" }, [
_c(
"svg",
{
staticClass: "dv-border-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c("defs", [
_c(
"filter",
{
attrs: {
id: _vm.filterId,
height: "150%",
width: "150%",
x: "-25%",
y: "-25%"
}
},
[
_c("feMorphology", {
attrs: {
operator: "dilate",
radius: "1",
in: "SourceAlpha",
result: "thicken"
}
}),
_vm._v(" "),
_c("feGaussianBlur", {
attrs: { in: "thicken", stdDeviation: "2", result: "blurred" }
}),
_vm._v(" "),
_c(
"feFlood",
{
attrs: {
"flood-color": _vm.fade(
_vm.mergedColor[1] || _vm.defaultColor[1],
70
),
result: "glowColor"
}
},
[
_c("animate", {
attrs: {
attributeName: "flood-color",
values:
"\n " +
_vm.fade(
_vm.mergedColor[1] || _vm.defaultColor[1],
70
) +
";\n " +
_vm.fade(
_vm.mergedColor[1] || _vm.defaultColor[1],
30
) +
";\n " +
_vm.fade(
_vm.mergedColor[1] || _vm.defaultColor[1],
70
) +
";\n ",
dur: "3s",
begin: "0s",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c("feComposite", {
attrs: {
in: "glowColor",
in2: "blurred",
operator: "in",
result: "softGlowColored"
}
}),
_vm._v(" "),
_c(
"feMerge",
[
_c("feMergeNode", { attrs: { in: "softGlowColored" } }),
_vm._v(" "),
_c("feMergeNode", { attrs: { in: "SourceGraphic" } })
],
1
)
],
1
)
]),
_vm._v(" "),
_vm.width && _vm.height
? _c("path", {
attrs: {
2020-04-25 16:46:33 +08:00
fill: _vm.backgroundColor,
2019-12-06 21:07:16 +08:00
"stroke-width": "2",
stroke: _vm.mergedColor[0],
d:
"\n M15 5 L " +
(_vm.width - 15) +
" 5 Q " +
(_vm.width - 5) +
" 5, " +
(_vm.width - 5) +
" 15\n L " +
(_vm.width - 5) +
" " +
(_vm.height - 15) +
" Q " +
(_vm.width - 5) +
" " +
(_vm.height - 5) +
", " +
(_vm.width - 15) +
" " +
(_vm.height - 5) +
"\n L 15, " +
(_vm.height - 5) +
" Q 5 " +
(_vm.height - 5) +
" 5 " +
(_vm.height - 15) +
" L 5 15\n Q 5 5 15 5\n "
}
})
: _vm._e(),
_vm._v(" "),
_c("path", {
attrs: {
"stroke-width": "2",
fill: "transparent",
"stroke-linecap": "round",
filter: "url(#" + _vm.filterId + ")",
stroke: _vm.mergedColor[1],
d: "M 20 5 L 15 5 Q 5 5 5 15 L 5 20"
}
}),
_vm._v(" "),
_c("path", {
attrs: {
"stroke-width": "2",
fill: "transparent",
"stroke-linecap": "round",
filter: "url(#" + _vm.filterId + ")",
stroke: _vm.mergedColor[1],
d:
"M " +
(_vm.width - 20) +
" 5 L " +
(_vm.width - 15) +
" 5 Q " +
(_vm.width - 5) +
" 5 " +
(_vm.width - 5) +
" 15 L " +
(_vm.width - 5) +
" 20"
}
}),
_vm._v(" "),
_c("path", {
attrs: {
"stroke-width": "2",
fill: "transparent",
"stroke-linecap": "round",
filter: "url(#" + _vm.filterId + ")",
stroke: _vm.mergedColor[1],
d:
"\n M " +
(_vm.width - 20) +
" " +
(_vm.height - 5) +
" L " +
(_vm.width - 15) +
" " +
(_vm.height - 5) +
"\n Q " +
(_vm.width - 5) +
" " +
(_vm.height - 5) +
" " +
(_vm.width - 5) +
" " +
(_vm.height - 15) +
"\n L " +
(_vm.width - 5) +
" " +
(_vm.height - 20) +
"\n "
}
}),
_vm._v(" "),
_c("path", {
attrs: {
"stroke-width": "2",
fill: "transparent",
"stroke-linecap": "round",
filter: "url(#" + _vm.filterId + ")",
stroke: _vm.mergedColor[1],
d:
"\n M 20 " +
(_vm.height - 5) +
" L 15 " +
(_vm.height - 5) +
"\n Q 5 " +
(_vm.height - 5) +
" 5 " +
(_vm.height - 15) +
"\n L 5 " +
(_vm.height - 20) +
"\n "
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$d = [];
__vue_render__$d._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$d = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-40c58fd4_0", { source: ".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$d = undefined;
/* module identifier */
const __vue_module_identifier__$d = undefined;
/* functional template */
const __vue_is_functional_template__$d = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$d = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
__vue_inject_styles__$d,
__vue_script__$d,
__vue_scope_id__$d,
__vue_is_functional_template__$d,
__vue_module_identifier__$d,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function borderBox12 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$d.name, __vue_component__$d);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
//
var script$e = {
name: 'DvBorderBox13',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
2020-04-25 16:46:33 +08:00
},
backgroundColor: {
type: String,
default: 'transparent'
2019-12-06 21:07:16 +08:00
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
return {
ref: 'border-box-13',
defaultColor: ['#6586ec', '#2cf7fe'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$e = script$e;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$e = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-border-box-13" }, [
_c(
"svg",
{
staticClass: "dv-border-svg-container",
attrs: { width: _vm.width, height: _vm.height }
},
[
_c("path", {
attrs: {
2020-04-25 16:46:33 +08:00
fill: _vm.backgroundColor,
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
d:
"\n M 5 20 L 5 10 L 12 3 L 60 3 L 68 10\n L " +
(_vm.width - 20) +
" 10 L " +
(_vm.width - 5) +
" 25\n L " +
(_vm.width - 5) +
" " +
(_vm.height - 5) +
" L 20 " +
(_vm.height - 5) +
"\n L 5 " +
(_vm.height - 20) +
" L 5 20\n "
}
}),
_vm._v(" "),
_c("path", {
attrs: {
fill: "transparent",
"stroke-width": "3",
"stroke-linecap": "round",
"stroke-dasharray": "10, 5",
stroke: _vm.mergedColor[0],
d: "M 16 9 L 61 9"
}
}),
_vm._v(" "),
_c("path", {
attrs: {
fill: "transparent",
stroke: _vm.mergedColor[1],
d: "M 5 20 L 5 10 L 12 3 L 60 3 L 68 10"
}
}),
_vm._v(" "),
_c("path", {
attrs: {
fill: "transparent",
stroke: _vm.mergedColor[1],
d:
"M " +
(_vm.width - 5) +
" " +
(_vm.height - 30) +
" L " +
(_vm.width - 5) +
" " +
(_vm.height - 5) +
" L " +
(_vm.width - 30) +
" " +
(_vm.height - 5)
}
})
]
),
_vm._v(" "),
_c("div", { staticClass: "border-box-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$e = [];
__vue_render__$e._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$e = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-6c30a53b_0", { source: ".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$e = undefined;
/* module identifier */
const __vue_module_identifier__$e = undefined;
/* functional template */
const __vue_is_functional_template__$e = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$e = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
__vue_inject_styles__$e,
__vue_script__$e,
__vue_scope_id__$e,
__vue_is_functional_template__$e,
__vue_module_identifier__$e,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function borderBox13 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$e.name, __vue_component__$e);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
//
var script$f = {
name: 'DvDecoration1',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
const pointSideLength = 2.5;
return {
ref: 'decoration-1',
svgWH: [200, 50],
svgScale: [1, 1],
rowNum: 4,
rowPoints: 20,
pointSideLength,
halfPointSideLength: pointSideLength / 2,
points: [],
rects: [],
defaultColor: ['#fff', '#0de7c2'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
afterAutoResizeMixinInit() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcSVGData() {
const {
calcPointsPosition,
calcRectsPosition,
calcScale
} = this;
calcPointsPosition();
calcRectsPosition();
calcScale();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcPointsPosition() {
const {
svgWH,
rowNum,
rowPoints
} = this;
const [w, h] = svgWH;
const horizontalGap = w / (rowPoints + 1);
const verticalGap = h / (rowNum + 1);
let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
this.points = points.reduce((all, item) => [...all, ...item], []);
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcRectsPosition() {
const {
points,
rowPoints
} = this;
const rect1 = points[rowPoints * 2 - 1];
const rect2 = points[rowPoints * 2 - 3];
this.rects = [rect1, rect2];
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcScale() {
const {
width,
height,
svgWH
} = this;
const [w, h] = svgWH;
this.svgScale = [width / w, height / h];
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
onResize() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$f = script$f;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$f = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-1" }, [
_c(
"svg",
{
style:
"transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
},
[
_vm._l(_vm.points, function(point, i) {
return [
Math.random() > 0.6
? _c(
"rect",
{
key: i,
attrs: {
fill: _vm.mergedColor[0],
x: point[0] - _vm.halfPointSideLength,
y: point[1] - _vm.halfPointSideLength,
width: _vm.pointSideLength,
height: _vm.pointSideLength
}
},
[
Math.random() > 0.6
? _c("animate", {
attrs: {
attributeName: "fill",
values: _vm.mergedColor[0] + ";transparent",
dur: "1s",
begin: Math.random() * 2,
repeatCount: "indefinite"
}
})
: _vm._e()
]
)
: _vm._e()
]
}),
_vm._v(" "),
_vm.rects[0]
? _c(
"rect",
{
attrs: {
fill: _vm.mergedColor[1],
x: _vm.rects[0][0] - _vm.pointSideLength,
y: _vm.rects[0][1] - _vm.pointSideLength,
width: _vm.pointSideLength * 2,
height: _vm.pointSideLength * 2
}
},
[
_c("animate", {
attrs: {
attributeName: "width",
values: "0;" + _vm.pointSideLength * 2,
dur: "2s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "height",
values: "0;" + _vm.pointSideLength * 2,
dur: "2s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "x",
values:
_vm.rects[0][0] +
";" +
(_vm.rects[0][0] - _vm.pointSideLength),
dur: "2s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "y",
values:
_vm.rects[0][1] +
";" +
(_vm.rects[0][1] - _vm.pointSideLength),
dur: "2s",
repeatCount: "indefinite"
}
})
]
)
: _vm._e(),
_vm._v(" "),
_vm.rects[1]
? _c(
"rect",
{
attrs: {
fill: _vm.mergedColor[1],
x: _vm.rects[1][0] - 40,
y: _vm.rects[1][1] - _vm.pointSideLength,
width: 40,
height: _vm.pointSideLength * 2
}
},
[
_c("animate", {
attrs: {
attributeName: "width",
values: "0;40;0",
dur: "2s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "x",
values:
_vm.rects[1][0] +
";" +
(_vm.rects[1][0] - 40) +
";" +
_vm.rects[1][0],
dur: "2s",
repeatCount: "indefinite"
}
})
]
)
: _vm._e()
],
2
)
])
};
var __vue_staticRenderFns__$f = [];
__vue_render__$f._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$f = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-69241e60_0", { source: ".dv-decoration-1 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-1 svg {\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-1 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-1 svg {\n transform-origin: left top;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$f = undefined;
/* module identifier */
const __vue_module_identifier__$f = undefined;
/* functional template */
const __vue_is_functional_template__$f = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$f = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
__vue_inject_styles__$f,
__vue_script__$f,
__vue_scope_id__$f,
__vue_is_functional_template__$f,
__vue_module_identifier__$f,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration1 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$f.name, __vue_component__$f);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
//
var script$g = {
name: 'DvDecoration2',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
},
reverse: {
type: Boolean,
default: false
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
return {
ref: 'decoration-2',
x: 0,
y: 0,
w: 0,
h: 0,
defaultColor: ['#3faacb', '#fff'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
reverse() {
const {
calcSVGData
} = this;
calcSVGData();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
afterAutoResizeMixinInit() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcSVGData() {
const {
reverse,
width,
height
} = this;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
if (reverse) {
this.w = 1;
this.h = height;
this.x = width / 2;
this.y = 0;
} else {
this.w = width;
this.h = 1;
this.x = 0;
this.y = height / 2;
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
onResize() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$g = script$g;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$g = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-2" }, [
_c(
"svg",
{ attrs: { width: _vm.width + "px", height: _vm.height + "px" } },
[
_c(
"rect",
{
attrs: {
x: _vm.x,
y: _vm.y,
width: _vm.w,
height: _vm.h,
fill: _vm.mergedColor[0]
}
},
[
_c("animate", {
attrs: {
attributeName: _vm.reverse ? "height" : "width",
from: "0",
to: _vm.reverse ? _vm.height : _vm.width,
dur: "6s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: ".42,0,.58,1",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"rect",
{
attrs: {
x: _vm.x,
y: _vm.y,
width: "1",
height: "1",
fill: _vm.mergedColor[1]
}
},
[
_c("animate", {
attrs: {
attributeName: _vm.reverse ? "y" : "x",
from: "0",
to: _vm.reverse ? _vm.height : _vm.width,
dur: "6s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: "0.42,0,0.58,1",
repeatCount: "indefinite"
}
})
]
)
]
)
])
};
var __vue_staticRenderFns__$g = [];
__vue_render__$g._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$g = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-a2b21eaa_0", { source: ".dv-decoration-2 {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-decoration-2 {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$g = undefined;
/* module identifier */
const __vue_module_identifier__$g = undefined;
/* functional template */
const __vue_is_functional_template__$g = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$g = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
__vue_inject_styles__$g,
__vue_script__$g,
__vue_scope_id__$g,
__vue_is_functional_template__$g,
__vue_module_identifier__$g,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration2 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$g.name, __vue_component__$g);
2019-12-06 21:07:16 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
//
var script$h = {
name: 'DvDecoration3',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
const pointSideLength = 7;
return {
ref: 'decoration-3',
svgWH: [300, 35],
svgScale: [1, 1],
rowNum: 2,
rowPoints: 25,
pointSideLength,
halfPointSideLength: pointSideLength / 2,
points: [],
defaultColor: ['#7acaec', 'transparent'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
afterAutoResizeMixinInit() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcSVGData() {
const {
calcPointsPosition,
calcScale
} = this;
calcPointsPosition();
calcScale();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcPointsPosition() {
const {
svgWH,
rowNum,
rowPoints
} = this;
const [w, h] = svgWH;
const horizontalGap = w / (rowPoints + 1);
const verticalGap = h / (rowNum + 1);
let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
this.points = points.reduce((all, item) => [...all, ...item], []);
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
calcScale() {
const {
width,
height,
svgWH
} = this;
const [w, h] = svgWH;
this.svgScale = [width / w, height / h];
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
onResize() {
const {
calcSVGData
} = this;
calcSVGData();
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$h = script$h;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$h = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-3" }, [
_c(
"svg",
{
style:
"transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
},
[
_vm._l(_vm.points, function(point, i) {
return [
_c(
"rect",
{
key: i,
attrs: {
fill: _vm.mergedColor[0],
x: point[0] - _vm.halfPointSideLength,
y: point[1] - _vm.halfPointSideLength,
width: _vm.pointSideLength,
height: _vm.pointSideLength
}
},
[
Math.random() > 0.6
? _c("animate", {
attrs: {
attributeName: "fill",
values: "" + _vm.mergedColor.join(";"),
dur: Math.random() + 1 + "s",
begin: Math.random() * 2,
repeatCount: "indefinite"
}
})
: _vm._e()
]
)
]
})
],
2
)
])
};
var __vue_staticRenderFns__$h = [];
__vue_render__$h._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$h = function (inject) {
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-2cd3ac93_0", { source: ".dv-decoration-3 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-3 svg {\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-3 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-3 svg {\n transform-origin: left top;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$h = undefined;
/* module identifier */
const __vue_module_identifier__$h = undefined;
/* functional template */
const __vue_is_functional_template__$h = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$h = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
__vue_inject_styles__$h,
__vue_script__$h,
__vue_scope_id__$h,
__vue_is_functional_template__$h,
__vue_module_identifier__$h,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration3 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$h.name, __vue_component__$h);
2019-12-06 21:07:16 +08:00
}
//
var script$i = {
name: 'DvDecoration4',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
},
reverse: {
type: Boolean,
default: false
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
return {
ref: 'decoration-4',
defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$i = script$i;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$i = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-4" }, [
_c(
"div",
{
class: "container " + (_vm.reverse ? "reverse" : "normal"),
style: _vm.reverse
? "width:" + _vm.width + "px;height:5px"
: "width:5px;height:" + _vm.height + "px;"
},
[
_c(
"svg",
{
attrs: {
width: _vm.reverse ? _vm.width : 5,
height: _vm.reverse ? 5 : _vm.height
}
},
[
_c("polyline", {
attrs: {
stroke: _vm.mergedColor[0],
points: _vm.reverse
? "0, 2.5 " + _vm.width + ", 2.5"
: "2.5, 0 2.5, " + _vm.height
}
}),
_vm._v(" "),
_c("polyline", {
staticClass: "bold-line",
attrs: {
stroke: _vm.mergedColor[1],
"stroke-width": "3",
"stroke-dasharray": "20, 80",
"stroke-dashoffset": "-30",
points: _vm.reverse
? "0, 2.5 " + _vm.width + ", 2.5"
: "2.5, 0 2.5, " + _vm.height
}
})
]
)
]
)
])
};
var __vue_staticRenderFns__$i = [];
__vue_render__$i._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$i = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-6a8df262_0", { source: ".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n flex: 1;\n}\n.dv-decoration-4 .normal {\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n0% {\n height: 0%;\n}\n70% {\n height: 100%;\n}\n100% {\n height: 100%;\n}\n}\n@keyframes ani-width {\n0% {\n width: 0%;\n}\n70% {\n width: 100%;\n}\n100% {\n width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,OAAO;AACT;AACA;EACE,6CAA6C;EAC7C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,4CAA4C;EAC5C,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,UAAU;AACZ;AACA;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,SAAS;AACX;AACA;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n flex: 1;\n}\n.dv-decoration-4 .normal {\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n 0% {\n height: 0%;\n }\n 70% {\n height: 100%;\n }\n 100% {\n height: 100%;\n }\n}\n@keyframes ani-width {\n 0% {\n width: 0%;\n }\n 70% {\n width: 100%;\n }\n 100% {\n width: 100%;\n }\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$i = undefined;
/* module identifier */
const __vue_module_identifier__$i = undefined;
/* functional template */
const __vue_is_functional_template__$i = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$i = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
__vue_inject_styles__$i,
__vue_script__$i,
__vue_scope_id__$i,
__vue_is_functional_template__$i,
__vue_module_identifier__$i,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration4 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$i.name, __vue_component__$i);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$j = {
2019-09-03 11:07:45 +08:00
name: 'DvDecoration5',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
data() {
return {
ref: 'decoration-5',
line1Points: '',
line2Points: '',
line1Length: 0,
2019-12-06 21:07:16 +08:00
line2Length: 0,
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
2019-09-03 11:07:45 +08:00
methods: {
afterAutoResizeMixinInit() {
const {
calcSVGData
} = this;
calcSVGData();
},
calcSVGData() {
const {
width,
height
} = this;
let line1Points = [[0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4], [width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4], [width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]];
let line2Points = [[width * 0.3, height * 0.8], [width * 0.7, height * 0.8]];
const line1Length = util_7$1(line1Points);
const line2Length = util_7$1(line2Points);
line1Points = line1Points.map(point => point.join(',')).join(' ');
line2Points = line2Points.map(point => point.join(',')).join(' ');
this.line1Points = line1Points;
this.line2Points = line2Points;
this.line1Length = line1Length;
this.line2Length = line2Length;
},
onResize() {
const {
calcSVGData
} = this;
calcSVGData();
2019-12-06 21:07:16 +08:00
},
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$j = script$j;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$j = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-5" }, [
_c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
_c(
"polyline",
{
attrs: {
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "3",
points: _vm.line1Points
}
},
[
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
attributeType: "XML",
from: "0, " + _vm.line1Length / 2 + ", 0, " + _vm.line1Length / 2,
to: "0, 0, " + _vm.line1Length + ", 0",
dur: "1.2s",
begin: "0s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: "0.4,1,0.49,0.98",
repeatCount: "indefinite"
}
})
]
),
_vm._v(" "),
_c(
"polyline",
{
attrs: {
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
points: _vm.line2Points
}
},
[
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
attributeType: "XML",
from: "0, " + _vm.line2Length / 2 + ", 0, " + _vm.line2Length / 2,
to: "0, 0, " + _vm.line2Length + ", 0",
dur: "1.2s",
begin: "0s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: ".4,1,.49,.98",
repeatCount: "indefinite"
}
})
]
)
])
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$j = [];
__vue_render__$j._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$j = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-301d5bb4_0", { source: ".dv-decoration-5 {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-decoration-5 {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$j = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$j = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$j = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$j = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
__vue_inject_styles__$j,
__vue_script__$j,
__vue_scope_id__$j,
__vue_is_functional_template__$j,
__vue_module_identifier__$j,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function decoration5 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$j.name, __vue_component__$j);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$k = {
2019-09-03 11:07:45 +08:00
name: 'DvDecoration6',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
data() {
const rectWidth = 7;
return {
ref: 'decoration-6',
svgWH: [300, 35],
svgScale: [1, 1],
rowNum: 1,
rowPoints: 40,
rectWidth,
halfRectWidth: rectWidth / 2,
points: [],
heights: [],
minHeights: [],
2019-12-06 21:07:16 +08:00
randoms: [],
defaultColor: ['#7acaec', '#7acaec'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
2019-09-03 11:07:45 +08:00
methods: {
afterAutoResizeMixinInit() {
const {
calcSVGData
} = this;
calcSVGData();
},
calcSVGData() {
const {
calcPointsPosition,
calcScale
} = this;
calcPointsPosition();
calcScale();
},
calcPointsPosition() {
const {
svgWH,
rowNum,
rowPoints
} = this;
const [w, h] = svgWH;
const horizontalGap = w / (rowPoints + 1);
const verticalGap = h / (rowNum + 1);
let points = new Array(rowNum).fill(0).map((foo, i) => new Array(rowPoints).fill(0).map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]));
this.points = points.reduce((all, item) => [...all, ...item], []);
const heights = this.heights = new Array(rowNum * rowPoints).fill(0).map(foo => Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h));
this.minHeights = new Array(rowNum * rowPoints).fill(0).map((foo, i) => heights[i] * Math.random());
this.randoms = new Array(rowNum * rowPoints).fill(0).map(foo => Math.random() + 1.5);
},
calcScale() {
const {
width,
height,
svgWH
} = this;
const [w, h] = svgWH;
this.svgScale = [width / w, height / h];
},
onResize() {
const {
calcSVGData
} = this;
calcSVGData();
2019-12-06 21:07:16 +08:00
},
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$k = script$k;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$k = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-6" }, [
_c(
"svg",
{
style:
"transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
},
[
_vm._l(_vm.points, function(point, i) {
return [
_c(
"rect",
{
key: i,
attrs: {
2019-12-06 21:07:16 +08:00
fill: _vm.mergedColor[Math.random() > 0.5 ? 0 : 1],
2019-09-03 11:07:45 +08:00
x: point[0] - _vm.halfRectWidth,
y: point[1] - _vm.heights[i] / 2,
width: _vm.rectWidth,
height: _vm.heights[i]
}
},
[
_c("animate", {
attrs: {
attributeName: "y",
values:
point[1] -
_vm.minHeights[i] / 2 +
";" +
(point[1] - _vm.heights[i] / 2) +
";" +
(point[1] - _vm.minHeights[i] / 2),
dur: _vm.randoms[i] + "s",
keyTimes: "0;0.5;1",
calcMode: "spline",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
begin: "0s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "height",
values:
_vm.minHeights[i] +
";" +
_vm.heights[i] +
";" +
_vm.minHeights[i],
dur: _vm.randoms[i] + "s",
keyTimes: "0;0.5;1",
calcMode: "spline",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
begin: "0s",
repeatCount: "indefinite"
}
})
]
)
]
})
],
2
)
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$k = [];
__vue_render__$k._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$k = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-a29c4fc2_0", { source: ".dv-decoration-6 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-6 svg {\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-6 {\n width: 100%;\n height: 100%;\n}\n.dv-decoration-6 svg {\n transform-origin: left top;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$k = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$k = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$k = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$k = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
__vue_inject_styles__$k,
__vue_script__$k,
__vue_scope_id__$k,
__vue_is_functional_template__$k,
__vue_module_identifier__$k,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function decoration6 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$k.name, __vue_component__$k);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$l = {
name: 'DvDecoration7',
props: {
color: {
type: Array,
default: () => []
}
},
data() {
return {
defaultColor: ['#1dc1f5', '#1dc1f5'],
mergedColor: []
};
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$l = script$l;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$l = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ staticClass: "dv-decoration-7" },
[
_c("svg", { attrs: { width: "21px", height: "20px" } }, [
_c("polyline", {
attrs: {
"stroke-width": "4",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points: "10, 0 19, 10 10, 20"
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
"stroke-width": "2",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points: "2, 0 11, 10 2, 20"
}
})
]),
_vm._v(" "),
_vm._t("default"),
_vm._v(" "),
_c("svg", { attrs: { width: "21px", height: "20px" } }, [
_c("polyline", {
attrs: {
"stroke-width": "4",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
points: "11, 0 2, 10 11, 20"
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
"stroke-width": "2",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
points: "19, 0 10, 10 19, 20"
}
})
])
],
2
)
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$l = [];
__vue_render__$l._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$l = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-b84d1f12_0", { source: ".dv-decoration-7 {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-decoration-7 {\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$l = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$l = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$l = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$l = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
__vue_inject_styles__$l,
__vue_script__$l,
__vue_scope_id__$l,
__vue_is_functional_template__$l,
__vue_module_identifier__$l,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function decoration7 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$l.name, __vue_component__$l);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$m = {
2019-09-03 11:07:45 +08:00
name: 'DvDecoration8',
mixins: [autoResize],
props: {
2019-12-06 21:07:16 +08:00
color: {
type: Array,
default: () => []
},
2019-09-03 11:07:45 +08:00
reverse: {
type: Boolean,
default: false
}
},
data() {
return {
2019-12-06 21:07:16 +08:00
ref: 'decoration-8',
defaultColor: ['#3f96a5', '#3f96a5'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
2019-09-03 11:07:45 +08:00
methods: {
xPos(pos) {
const {
reverse,
width
} = this;
if (!reverse) return pos;
return width - pos;
2019-12-06 21:07:16 +08:00
},
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$m = script$m;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$m = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-8" }, [
_c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
fill: "transparent",
points: _vm.xPos(0) + ", 0 " + _vm.xPos(30) + ", " + _vm.height / 2
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
fill: "transparent",
points:
_vm.xPos(20) +
", 0 " +
_vm.xPos(50) +
", " +
_vm.height / 2 +
" " +
_vm.xPos(_vm.width) +
", " +
_vm.height / 2
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
fill: "transparent",
"stroke-width": "3",
points:
_vm.xPos(0) +
", " +
(_vm.height - 3) +
", " +
_vm.xPos(200) +
", " +
(_vm.height - 3)
}
})
])
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$m = [];
__vue_render__$m._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$m = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-53cf43a5_0", { source: ".dv-decoration-8 {\n display: flex;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-decoration-8 {\n display: flex;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$m = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$m = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$m = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$m = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
__vue_inject_styles__$m,
__vue_script__$m,
__vue_scope_id__$m,
__vue_is_functional_template__$m,
__vue_module_identifier__$m,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function decoration8 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$m.name, __vue_component__$m);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$n = {
2019-09-03 11:07:45 +08:00
name: 'DvDecoration9',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
},
dur: {
type: Number,
default: 3
}
},
2019-09-03 11:07:45 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
ref: 'decoration-9',
2020-05-25 15:57:26 +08:00
polygonId: `decoration-9-polygon-${id}`,
2019-09-03 11:07:45 +08:00
svgWH: [100, 100],
2019-12-06 21:07:16 +08:00
svgScale: [1, 1],
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
},
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
2019-09-03 11:07:45 +08:00
methods: {
afterAutoResizeMixinInit() {
const {
calcScale
} = this;
calcScale();
},
calcScale() {
const {
width,
height,
svgWH
} = this;
const [w, h] = svgWH;
this.svgScale = [width / w, height / h];
},
onResize() {
const {
calcScale
} = this;
calcScale();
2019-12-06 21:07:16 +08:00
},
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
},
fade: lib_9
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
2019-09-03 11:07:45 +08:00
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$n = script$n;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$n = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ ref: _vm.ref, staticClass: "dv-decoration-9" },
[
_c(
"svg",
{
style:
"transform:scale(" + _vm.svgScale[0] + "," + _vm.svgScale[1] + ");",
attrs: { width: _vm.svgWH[0] + "px", height: _vm.svgWH[1] + "px" }
},
[
_c("defs", [
_c("polygon", {
attrs: {
id: _vm.polygonId,
points: "15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"
}
})
]),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: "50",
cy: "50",
r: "45",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
"stroke-width": "10",
"stroke-dasharray": "80, 100, 30, 100"
}
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
values: "0 50 50;360 50 50",
2019-12-06 21:07:16 +08:00
dur: _vm.dur + "s",
2019-09-03 11:07:45 +08:00
repeatCount: "indefinite"
}
})
],
1
),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: "50",
cy: "50",
r: "45",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "6",
"stroke-dasharray": "50, 66, 100, 66"
}
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
values: "0 50 50;-360 50 50",
2019-12-06 21:07:16 +08:00
dur: _vm.dur + "s",
2019-09-03 11:07:45 +08:00
repeatCount: "indefinite"
}
})
],
1
),
_vm._v(" "),
_c("circle", {
attrs: {
cx: "50",
cy: "50",
r: "38",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
2019-09-03 11:07:45 +08:00
"stroke-width": "1",
"stroke-dasharray": "5, 1"
}
}),
_vm._v(" "),
_vm._l(new Array(20).fill(0), function(foo, i) {
return _c(
"use",
{
key: i,
attrs: {
"xlink:href": "#" + _vm.polygonId,
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
fill: Math.random() > 0.4 ? "transparent" : _vm.mergedColor[0]
2019-09-03 11:07:45 +08:00
}
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
values: "0 50 50;360 50 50",
2019-12-06 21:07:16 +08:00
dur: _vm.dur + "s",
begin: (i * _vm.dur) / 20 + "s",
2019-09-03 11:07:45 +08:00
repeatCount: "indefinite"
}
})
],
1
)
}),
_vm._v(" "),
_c("circle", {
attrs: {
cx: "50",
cy: "50",
r: "26",
fill: "transparent",
2019-12-06 21:07:16 +08:00
stroke: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 30),
2019-09-03 11:07:45 +08:00
"stroke-width": "1",
"stroke-dasharray": "5, 1"
}
})
],
2
),
_vm._v(" "),
_vm._t("default")
],
2
)
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$n = [];
__vue_render__$n._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$n = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-b47f91a8_0", { source: ".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$n = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$n = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$n = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$n = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
__vue_inject_styles__$n,
__vue_script__$n,
__vue_scope_id__$n,
__vue_is_functional_template__$n,
__vue_module_identifier__$n,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function decoration9 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$n.name, __vue_component__$n);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$o = {
2019-09-03 11:07:45 +08:00
name: 'DvDecoration10',
mixins: [autoResize],
2019-12-06 21:07:16 +08:00
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
ref: 'decoration-10',
2020-05-25 15:57:26 +08:00
animationId1: `d10ani1${id}`,
animationId2: `d10ani2${id}`,
animationId3: `d10ani3${id}`,
animationId4: `d10ani4${id}`,
animationId5: `d10ani5${id}`,
animationId6: `d10ani6${id}`,
animationId7: `d10ani7${id}`,
2019-12-06 21:07:16 +08:00
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
mergedColor: []
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
},
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
}
},
mounted() {
const {
mergeColor
} = this;
mergeColor();
2019-09-03 11:07:45 +08:00
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$o = script$o;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$o = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-10" }, [
_c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
_c("polyline", {
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
points:
"0, " + _vm.height / 2 + " " + _vm.width + ", " + _vm.height / 2
}
}),
_vm._v(" "),
_c(
"polyline",
{
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
points:
"5, " +
_vm.height / 2 +
" " +
(_vm.width * 0.2 - 3) +
", " +
_vm.height / 2,
"stroke-dasharray": "0, " + _vm.width * 0.2,
fill: "freeze"
}
},
[
_c("animate", {
attrs: {
id: _vm.animationId2,
attributeName: "stroke-dasharray",
values: "0, " + _vm.width * 0.2 + ";" + _vm.width * 0.2 + ", 0;",
dur: "3s",
begin: _vm.animationId1 + ".end",
fill: "freeze"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
values: _vm.width * 0.2 + ", 0;0, " + _vm.width * 0.2,
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
}
})
]
),
_vm._v(" "),
_c(
"polyline",
{
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
points:
_vm.width * 0.2 +
3 +
", " +
_vm.height / 2 +
" " +
(_vm.width * 0.8 - 3) +
", " +
_vm.height / 2,
"stroke-dasharray": "0, " + _vm.width * 0.6
}
},
[
_c("animate", {
attrs: {
id: _vm.animationId4,
attributeName: "stroke-dasharray",
values: "0, " + _vm.width * 0.6 + ";" + _vm.width * 0.6 + ", 0",
dur: "3s",
begin: _vm.animationId3 + ".end + 1s",
fill: "freeze"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
values: _vm.width * 0.6 + ", 0;0, " + _vm.width * 0.6,
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
}
})
]
),
_vm._v(" "),
_c(
"polyline",
{
attrs: {
2019-12-06 21:07:16 +08:00
stroke: _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
"stroke-width": "2",
points:
_vm.width * 0.8 +
3 +
", " +
_vm.height / 2 +
" " +
(_vm.width - 5) +
", " +
_vm.height / 2,
"stroke-dasharray": "0, " + _vm.width * 0.2
}
},
[
_c("animate", {
attrs: {
id: _vm.animationId6,
attributeName: "stroke-dasharray",
values: "0, " + _vm.width * 0.2 + ";" + _vm.width * 0.2 + ", 0",
dur: "3s",
begin: _vm.animationId5 + ".end + 1s",
fill: "freeze"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
values: _vm.width * 0.2 + ", 0;0, " + _vm.width * 0.3,
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
}
})
]
),
_vm._v(" "),
_c(
"circle",
2019-12-06 21:07:16 +08:00
{
attrs: {
cx: "2",
cy: _vm.height / 2,
r: "2",
fill: _vm.mergedColor[1]
}
},
2019-09-03 11:07:45 +08:00
[
_c("animate", {
attrs: {
id: _vm.animationId1,
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
begin: "0s;" + _vm.animationId7 + ".end",
dur: "0.3s",
fill: "freeze"
}
})
]
),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: _vm.width * 0.2,
cy: _vm.height / 2,
r: "2",
2019-12-06 21:07:16 +08:00
fill: _vm.mergedColor[1]
2019-09-03 11:07:45 +08:00
}
},
[
_c("animate", {
attrs: {
id: _vm.animationId3,
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
begin: _vm.animationId2 + ".end",
dur: "0.3s",
fill: "freeze"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
2019-09-03 11:07:45 +08:00
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
}
})
]
),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: _vm.width * 0.8,
cy: _vm.height / 2,
r: "2",
2019-12-06 21:07:16 +08:00
fill: _vm.mergedColor[1]
2019-09-03 11:07:45 +08:00
}
},
[
_c("animate", {
attrs: {
id: _vm.animationId5,
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
2019-09-03 11:07:45 +08:00
begin: _vm.animationId4 + ".end",
dur: "0.3s",
fill: "freeze"
}
2019-09-24 16:34:08 +08:00
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
2019-09-24 16:34:08 +08:00
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
2019-09-03 11:07:45 +08:00
}
2019-09-24 16:34:08 +08:00
})
]
),
_vm._v(" "),
_c(
"circle",
{
attrs: {
cx: _vm.width - 2,
cy: _vm.height / 2,
r: "2",
2019-12-06 21:07:16 +08:00
fill: _vm.mergedColor[1]
2019-09-03 11:07:45 +08:00
}
2019-09-24 16:34:08 +08:00
},
[
_c("animate", {
attrs: {
id: _vm.animationId7,
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[0],
2019-09-24 16:34:08 +08:00
begin: _vm.animationId6 + ".end",
dur: "0.3s",
fill: "freeze"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "fill",
2019-12-06 21:07:16 +08:00
values: _vm.mergedColor[1] + ";" + _vm.mergedColor[1],
2019-09-24 16:34:08 +08:00
dur: "0.01s",
begin: _vm.animationId7 + ".end",
fill: "freeze"
}
})
]
)
])
])
2019-09-03 11:07:45 +08:00
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$o = [];
__vue_render__$o._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$o = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-23172a05_0", { source: ".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$o = undefined;
/* module identifier */
const __vue_module_identifier__$o = undefined;
/* functional template */
const __vue_is_functional_template__$o = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$o = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
__vue_inject_styles__$o,
__vue_script__$o,
__vue_scope_id__$o,
__vue_is_functional_template__$o,
__vue_module_identifier__$o,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration10 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$o.name, __vue_component__$o);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
//
var script$p = {
name: 'DvDecoration11',
mixins: [autoResize],
props: {
color: {
type: Array,
default: () => []
}
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
data() {
return {
ref: 'decoration-11',
defaultColor: ['#1a98fc', '#2cf7fe'],
mergedColor: []
};
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
watch: {
color() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
},
methods: {
mergeColor() {
const {
color,
defaultColor
} = this;
this.mergedColor = util_2$1(util_1(defaultColor, true), color || []);
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
fade: lib_9
},
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
mounted() {
const {
mergeColor
} = this;
mergeColor();
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* script */
const __vue_script__$p = script$p;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* template */
var __vue_render__$p = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-decoration-11" }, [
_c("svg", { attrs: { width: _vm.width, height: _vm.height } }, [
_c("polygon", {
attrs: {
fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
stroke: _vm.mergedColor[1],
points: "20 10, 25 4, 55 4 60 10"
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
stroke: _vm.mergedColor[1],
points:
"20 " +
(_vm.height - 10) +
", 25 " +
(_vm.height - 4) +
", 55 " +
(_vm.height - 4) +
" 60 " +
(_vm.height - 10)
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
stroke: _vm.mergedColor[1],
points:
_vm.width -
20 +
" 10, " +
(_vm.width - 25) +
" 4, " +
(_vm.width - 55) +
" 4 " +
(_vm.width - 60) +
" 10"
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.fade(_vm.mergedColor[1] || _vm.defaultColor[1], 10),
stroke: _vm.mergedColor[1],
points:
_vm.width -
20 +
" " +
(_vm.height - 10) +
", " +
(_vm.width - 25) +
" " +
(_vm.height - 4) +
", " +
(_vm.width - 55) +
" " +
(_vm.height - 4) +
" " +
(_vm.width - 60) +
" " +
(_vm.height - 10)
}
}),
_vm._v(" "),
_c("polygon", {
attrs: {
fill: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 20),
stroke: _vm.mergedColor[0],
points:
"\n 20 10, 5 " +
_vm.height / 2 +
" 20 " +
(_vm.height - 10) +
"\n " +
(_vm.width - 20) +
" " +
(_vm.height - 10) +
" " +
(_vm.width - 5) +
" " +
_vm.height / 2 +
" " +
(_vm.width - 20) +
" 10\n "
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "transparent",
stroke: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 70),
points: "25 18, 15 " + _vm.height / 2 + " 25 " + (_vm.height - 18)
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
fill: "transparent",
stroke: _vm.fade(_vm.mergedColor[0] || _vm.defaultColor[0], 70),
points:
_vm.width -
25 +
" 18, " +
(_vm.width - 15) +
" " +
_vm.height / 2 +
" " +
(_vm.width - 25) +
" " +
(_vm.height - 18)
}
})
]),
_vm._v(" "),
_c("div", { staticClass: "decoration-content" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$p = [];
__vue_render__$p._withStripped = true;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
/* style */
const __vue_inject_styles__$p = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-53895fd4_0", { source: ".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
};
/* scoped */
const __vue_scope_id__$p = undefined;
/* module identifier */
const __vue_module_identifier__$p = undefined;
/* functional template */
const __vue_is_functional_template__$p = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$p = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
__vue_inject_styles__$p,
__vue_script__$p,
__vue_scope_id__$p,
__vue_is_functional_template__$p,
__vue_module_identifier__$p,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-12-06 21:07:16 +08:00
undefined
);
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
function decoration11 (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$p.name, __vue_component__$p);
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
var classCallCheck = _classCallCheck;
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
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;
2019-09-24 16:34:08 +08:00
}
2019-09-03 11:07:45 +08:00
2019-12-06 21:07:16 +08:00
return obj;
2019-09-03 11:07:45 +08:00
}
2019-12-06 21:07:16 +08:00
var defineProperty = _defineProperty;
2019-09-03 11:07:45 +08:00
var bezierCurveToPolyline_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bezierCurveToPolyline = bezierCurveToPolyline;
exports.getBezierCurveLength = getBezierCurveLength;
exports["default"] = void 0;
var _slicedToArray2 = interopRequireDefault(slicedToArray);
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
var sqrt = Math.sqrt,
pow = Math.pow,
ceil = Math.ceil,
abs = Math.abs; // Initialize the number of points per curve
var defaultSegmentPointsNum = 50;
2020-05-06 14:15:15 +08:00
/**
* @example data structure of bezierCurve
* bezierCurve = [
* // Starting point of the curve
* [10, 10],
* // BezierCurve segment data (controlPoint1, controlPoint2, endPoint)
* [
* [20, 20], [40, 20], [50, 10]
* ],
* ...
* ]
2019-09-03 11:07:45 +08:00
*/
2020-05-06 14:15:15 +08:00
/**
* @description Abstract the curve as a polyline consisting of N points
* @param {Array} bezierCurve bezierCurve data
* @param {Number} precision calculation accuracy. Recommended for 1-20. Default = 5
* @return {Object} Calculation results and related data
* @return {Array} Option.segmentPoints Point data that constitutes a polyline after calculation
* @return {Number} Option.cycles Number of iterations
* @return {Number} Option.rounds The number of recursions for the last iteration
2019-09-03 11:07:45 +08:00
*/
function abstractBezierCurveToPolyline(bezierCurve) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
var segmentsNum = bezierCurve.length - 1;
var startPoint = bezierCurve[0];
var endPoint = bezierCurve[segmentsNum][2];
var segments = bezierCurve.slice(1);
var getSegmentTPointFuns = segments.map(function (seg, i) {
var beginPoint = i === 0 ? startPoint : segments[i - 1][2];
return createGetBezierCurveTPointFun.apply(void 0, [beginPoint].concat((0, _toConsumableArray2["default"])(seg)));
}); // Initialize the curve to a polyline
var segmentPointsNum = new Array(segmentsNum).fill(defaultSegmentPointsNum);
var segmentPoints = getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum); // Calculate uniformly distributed points by iteratively
var result = calcUniformPointsByIteration(segmentPoints, getSegmentTPointFuns, segments, precision);
result.segmentPoints.push(endPoint);
return result;
}
2020-05-06 14:15:15 +08:00
/**
* @description Generate a method for obtaining corresponding point by t according to curve data
* @param {Array} beginPoint BezierCurve begin point. [x, y]
* @param {Array} controlPoint1 BezierCurve controlPoint1. [x, y]
* @param {Array} controlPoint2 BezierCurve controlPoint2. [x, y]
* @param {Array} endPoint BezierCurve end point. [x, y]
* @return {Function} Expected function
2019-09-03 11:07:45 +08:00
*/
function createGetBezierCurveTPointFun(beginPoint, controlPoint1, controlPoint2, endPoint) {
return function (t) {
var tSubed1 = 1 - t;
var tSubed1Pow3 = pow(tSubed1, 3);
var tSubed1Pow2 = pow(tSubed1, 2);
var tPow3 = pow(t, 3);
var tPow2 = pow(t, 2);
return [beginPoint[0] * tSubed1Pow3 + 3 * controlPoint1[0] * t * tSubed1Pow2 + 3 * controlPoint2[0] * tPow2 * tSubed1 + endPoint[0] * tPow3, beginPoint[1] * tSubed1Pow3 + 3 * controlPoint1[1] * t * tSubed1Pow2 + 3 * controlPoint2[1] * tPow2 * tSubed1 + endPoint[1] * tPow3];
};
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the distance between two points
* @param {Array} point1 BezierCurve begin point. [x, y]
* @param {Array} point2 BezierCurve controlPoint1. [x, y]
* @return {Number} Expected distance
2019-09-03 11:07:45 +08:00
*/
function getTwoPointDistance(_ref, _ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref, 2),
ax = _ref3[0],
ay = _ref3[1];
var _ref4 = (0, _slicedToArray2["default"])(_ref2, 2),
bx = _ref4[0],
by = _ref4[1];
return sqrt(pow(ax - bx, 2) + pow(ay - by, 2));
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the sum of the array of numbers
* @param {Array} nums An array of numbers
* @return {Number} Expected sum
2019-09-03 11:07:45 +08:00
*/
function getNumsSum(nums) {
return nums.reduce(function (sum, num) {
return sum + num;
}, 0);
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the distance of multiple sets of points
* @param {Array} segmentPoints Multiple sets of point data
* @return {Array} Distance of multiple sets of point data
2019-09-03 11:07:45 +08:00
*/
function getSegmentPointsDistance(segmentPoints) {
return segmentPoints.map(function (points, i) {
return new Array(points.length - 1).fill(0).map(function (temp, j) {
return getTwoPointDistance(points[j], points[j + 1]);
});
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the distance of multiple sets of points
* @param {Array} segmentPoints Multiple sets of point data
* @return {Array} Distance of multiple sets of point data
2019-09-03 11:07:45 +08:00
*/
function getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum) {
return getSegmentTPointFuns.map(function (getSegmentTPointFun, i) {
var tGap = 1 / segmentPointsNum[i];
return new Array(segmentPointsNum[i]).fill('').map(function (foo, j) {
return getSegmentTPointFun(j * tGap);
});
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the sum of deviations between line segment and the average length
* @param {Array} segmentPointsDistance Segment length of polyline
* @param {Number} avgLength Average length of the line segment
* @return {Number} Deviations
2019-09-03 11:07:45 +08:00
*/
function getAllDeviations(segmentPointsDistance, avgLength) {
return segmentPointsDistance.map(function (seg) {
return seg.map(function (s) {
return abs(s - avgLength);
});
}).map(function (seg) {
return getNumsSum(seg);
}).reduce(function (total, v) {
return total + v;
}, 0);
}
2020-05-06 14:15:15 +08:00
/**
* @description Calculate uniformly distributed points by iteratively
* @param {Array} segmentPoints Multiple setd of points that make up a polyline
* @param {Array} getSegmentTPointFuns Functions of get a point on the curve with t
* @param {Array} segments BezierCurve data
* @param {Number} precision Calculation accuracy
* @return {Object} Calculation results and related data
* @return {Array} Option.segmentPoints Point data that constitutes a polyline after calculation
* @return {Number} Option.cycles Number of iterations
* @return {Number} Option.rounds The number of recursions for the last iteration
2019-09-03 11:07:45 +08:00
*/
function calcUniformPointsByIteration(segmentPoints, getSegmentTPointFuns, segments, precision) {
// The number of loops for the current iteration
var rounds = 4; // Number of iterations
var cycles = 1;
var _loop = function _loop() {
// Recalculate the number of points per curve based on the last iteration data
var totalPointsNum = segmentPoints.reduce(function (total, seg) {
return total + seg.length;
}, 0); // Add last points of segment to calc exact segment length
segmentPoints.forEach(function (seg, i) {
return seg.push(segments[i][2]);
});
var segmentPointsDistance = getSegmentPointsDistance(segmentPoints);
var lineSegmentNum = segmentPointsDistance.reduce(function (total, seg) {
return total + seg.length;
}, 0);
var segmentlength = segmentPointsDistance.map(function (seg) {
return getNumsSum(seg);
});
var totalLength = getNumsSum(segmentlength);
var avgLength = totalLength / lineSegmentNum; // Check if precision is reached
var allDeviations = getAllDeviations(segmentPointsDistance, avgLength);
if (allDeviations <= precision) return "break";
totalPointsNum = ceil(avgLength / precision * totalPointsNum * 1.1);
var segmentPointsNum = segmentlength.map(function (length) {
return ceil(length / totalLength * totalPointsNum);
}); // Calculate the points after redistribution
segmentPoints = getSegmentPointsByNum(getSegmentTPointFuns, segmentPointsNum);
totalPointsNum = segmentPoints.reduce(function (total, seg) {
return total + seg.length;
}, 0);
var segmentPointsForLength = JSON.parse(JSON.stringify(segmentPoints));
segmentPointsForLength.forEach(function (seg, i) {
return seg.push(segments[i][2]);
});
segmentPointsDistance = getSegmentPointsDistance(segmentPointsForLength);
lineSegmentNum = segmentPointsDistance.reduce(function (total, seg) {
return total + seg.length;
}, 0);
segmentlength = segmentPointsDistance.map(function (seg) {
return getNumsSum(seg);
});
totalLength = getNumsSum(segmentlength);
avgLength = totalLength / lineSegmentNum;
var stepSize = 1 / totalPointsNum / 10; // Recursively for each segment of the polyline
getSegmentTPointFuns.forEach(function (getSegmentTPointFun, i) {
var currentSegmentPointsNum = segmentPointsNum[i];
var t = new Array(currentSegmentPointsNum).fill('').map(function (foo, j) {
return j / segmentPointsNum[i];
}); // Repeated recursive offset
for (var r = 0; r < rounds; r++) {
var distance = getSegmentPointsDistance([segmentPoints[i]])[0];
var deviations = distance.map(function (d) {
return d - avgLength;
});
var offset = 0;
for (var j = 0; j < currentSegmentPointsNum; j++) {
if (j === 0) return;
offset += deviations[j - 1];
t[j] -= stepSize * offset;
if (t[j] > 1) t[j] = 1;
if (t[j] < 0) t[j] = 0;
segmentPoints[i][j] = getSegmentTPointFun(t[j]);
}
}
});
rounds *= 4;
cycles++;
};
do {
var _ret = _loop();
if (_ret === "break") break;
} while (rounds <= 1025);
segmentPoints = segmentPoints.reduce(function (all, seg) {
return all.concat(seg);
}, []);
return {
segmentPoints: segmentPoints,
cycles: cycles,
rounds: rounds
};
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the polyline corresponding to the Bezier curve
* @param {Array} bezierCurve BezierCurve data
* @param {Number} precision Calculation accuracy. Recommended for 1-20. Default = 5
* @return {Array|Boolean} Point data that constitutes a polyline after calculation (Invalid input will return false)
2019-09-03 11:07:45 +08:00
*/
function bezierCurveToPolyline(bezierCurve) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
if (!bezierCurve) {
console.error('bezierCurveToPolyline: Missing parameters!');
return false;
}
if (!(bezierCurve instanceof Array)) {
console.error('bezierCurveToPolyline: Parameter bezierCurve must be an array!');
return false;
}
if (typeof precision !== 'number') {
console.error('bezierCurveToPolyline: Parameter precision must be a number!');
return false;
}
var _abstractBezierCurveT = abstractBezierCurveToPolyline(bezierCurve, precision),
segmentPoints = _abstractBezierCurveT.segmentPoints;
return segmentPoints;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the bezier curve length
* @param {Array} bezierCurve bezierCurve data
* @param {Number} precision calculation accuracy. Recommended for 5-10. Default = 5
* @return {Number|Boolean} BezierCurve length (Invalid input will return false)
2019-09-03 11:07:45 +08:00
*/
function getBezierCurveLength(bezierCurve) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
if (!bezierCurve) {
console.error('getBezierCurveLength: Missing parameters!');
return false;
}
if (!(bezierCurve instanceof Array)) {
console.error('getBezierCurveLength: Parameter bezierCurve must be an array!');
return false;
}
if (typeof precision !== 'number') {
console.error('getBezierCurveLength: Parameter precision must be a number!');
return false;
}
var _abstractBezierCurveT2 = abstractBezierCurveToPolyline(bezierCurve, precision),
segmentPoints = _abstractBezierCurveT2.segmentPoints; // Calculate the total length of the points that make up the polyline
var pointsDistance = getSegmentPointsDistance([segmentPoints])[0];
var length = getNumsSum(pointsDistance);
return length;
}
var _default = bezierCurveToPolyline;
exports["default"] = _default;
});
unwrapExports(bezierCurveToPolyline_1);
var bezierCurveToPolyline_2 = bezierCurveToPolyline_1.bezierCurveToPolyline;
var bezierCurveToPolyline_3 = bezierCurveToPolyline_1.getBezierCurveLength;
var polylineToBezierCurve_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = interopRequireDefault(slicedToArray);
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2020-05-06 14:15:15 +08:00
/**
* @description Abstract the polyline formed by N points into a set of bezier curve
* @param {Array} polyline A set of points that make up a polyline
* @param {Boolean} close Closed curve
* @param {Number} offsetA Smoothness
* @param {Number} offsetB Smoothness
* @return {Array|Boolean} A set of bezier curve (Invalid input will return false)
2019-09-03 11:07:45 +08:00
*/
function polylineToBezierCurve(polyline) {
var close = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var offsetA = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.25;
var offsetB = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.25;
if (!(polyline instanceof Array)) {
console.error('polylineToBezierCurve: Parameter polyline must be an array!');
return false;
}
if (polyline.length <= 2) {
console.error('polylineToBezierCurve: Converting to a curve requires at least 3 points!');
return false;
}
var startPoint = polyline[0];
var bezierCurveLineNum = polyline.length - 1;
var bezierCurvePoints = new Array(bezierCurveLineNum).fill(0).map(function (foo, i) {
return [].concat((0, _toConsumableArray2["default"])(getBezierCurveLineControlPoints(polyline, i, close, offsetA, offsetB)), [polyline[i + 1]]);
});
if (close) closeBezierCurve(bezierCurvePoints, startPoint);
bezierCurvePoints.unshift(polyline[0]);
return bezierCurvePoints;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the control points of the Bezier curve
* @param {Array} polyline A set of points that make up a polyline
* @param {Number} index The index of which get controls points's point in polyline
* @param {Boolean} close Closed curve
* @param {Number} offsetA Smoothness
* @param {Number} offsetB Smoothness
* @return {Array} Control points
2019-09-03 11:07:45 +08:00
*/
function getBezierCurveLineControlPoints(polyline, index) {
var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var offsetA = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.25;
var offsetB = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0.25;
var pointNum = polyline.length;
if (pointNum < 3 || index >= pointNum) return;
var beforePointIndex = index - 1;
if (beforePointIndex < 0) beforePointIndex = close ? pointNum + beforePointIndex : 0;
var afterPointIndex = index + 1;
if (afterPointIndex >= pointNum) afterPointIndex = close ? afterPointIndex - pointNum : pointNum - 1;
var afterNextPointIndex = index + 2;
if (afterNextPointIndex >= pointNum) afterNextPointIndex = close ? afterNextPointIndex - pointNum : pointNum - 1;
var pointBefore = polyline[beforePointIndex];
var pointMiddle = polyline[index];
var pointAfter = polyline[afterPointIndex];
var pointAfterNext = polyline[afterNextPointIndex];
return [[pointMiddle[0] + offsetA * (pointAfter[0] - pointBefore[0]), pointMiddle[1] + offsetA * (pointAfter[1] - pointBefore[1])], [pointAfter[0] - offsetB * (pointAfterNext[0] - pointMiddle[0]), pointAfter[1] - offsetB * (pointAfterNext[1] - pointMiddle[1])]];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the last curve of the closure
* @param {Array} bezierCurve A set of sub-curve
* @param {Array} startPoint Start point
* @return {Array} The last curve for closure
2019-09-03 11:07:45 +08:00
*/
function closeBezierCurve(bezierCurve, startPoint) {
var firstSubCurve = bezierCurve[0];
var lastSubCurve = bezierCurve.slice(-1)[0];
bezierCurve.push([getSymmetryPoint(lastSubCurve[1], lastSubCurve[2]), getSymmetryPoint(firstSubCurve[0], startPoint), startPoint]);
return bezierCurve;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the symmetry point
* @param {Array} point Symmetric point
* @param {Array} centerPoint Symmetric center
* @return {Array} Symmetric point
2019-09-03 11:07:45 +08:00
*/
function getSymmetryPoint(point, centerPoint) {
var _point = (0, _slicedToArray2["default"])(point, 2),
px = _point[0],
py = _point[1];
var _centerPoint = (0, _slicedToArray2["default"])(centerPoint, 2),
cx = _centerPoint[0],
cy = _centerPoint[1];
var minusX = cx - px;
var minusY = cy - py;
return [cx + minusX, cy + minusY];
}
var _default = polylineToBezierCurve;
exports["default"] = _default;
});
unwrapExports(polylineToBezierCurve_1);
var lib$1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "bezierCurveToPolyline", {
enumerable: true,
get: function get() {
return bezierCurveToPolyline_1.bezierCurveToPolyline;
}
});
Object.defineProperty(exports, "getBezierCurveLength", {
enumerable: true,
get: function get() {
return bezierCurveToPolyline_1.getBezierCurveLength;
}
});
Object.defineProperty(exports, "polylineToBezierCurve", {
enumerable: true,
get: function get() {
return _polylineToBezierCurve["default"];
}
});
exports["default"] = void 0;
var _polylineToBezierCurve = interopRequireDefault(polylineToBezierCurve_1);
var _default = {
bezierCurveToPolyline: bezierCurveToPolyline_1.bezierCurveToPolyline,
getBezierCurveLength: bezierCurveToPolyline_1.getBezierCurveLength,
polylineToBezierCurve: _polylineToBezierCurve["default"]
};
exports["default"] = _default;
});
unwrapExports(lib$1);
var canvas = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.drawPolylinePath = drawPolylinePath;
exports.drawBezierCurvePath = drawBezierCurvePath;
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2020-05-06 14:15:15 +08:00
/**
* @description Draw a polyline path
* @param {Object} ctx Canvas 2d context
* @param {Array} points The points that makes up a polyline
* @param {Boolean} beginPath Whether to execute beginPath
* @param {Boolean} closePath Whether to execute closePath
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function drawPolylinePath(ctx, points) {
var beginPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var closePath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
if (!ctx || points.length < 2) return false;
if (beginPath) ctx.beginPath();
points.forEach(function (point, i) {
2019-09-24 16:34:08 +08:00
return point && (i === 0 ? ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(point)) : ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point)));
2019-09-03 11:07:45 +08:00
});
if (closePath) ctx.closePath();
}
2020-05-06 14:15:15 +08:00
/**
* @description Draw a bezier curve path
* @param {Object} ctx Canvas 2d context
* @param {Array} points The points that makes up a bezier curve
* @param {Array} moveTo The point need to excute moveTo
* @param {Boolean} beginPath Whether to execute beginPath
* @param {Boolean} closePath Whether to execute closePath
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function drawBezierCurvePath(ctx, points) {
var moveTo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var beginPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var closePath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
if (!ctx || !points) return false;
if (beginPath) ctx.beginPath();
2019-09-24 16:34:08 +08:00
if (moveTo) ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(moveTo));
2019-09-03 11:07:45 +08:00
points.forEach(function (item) {
2019-09-24 16:34:08 +08:00
return item && ctx.bezierCurveTo.apply(ctx, (0, _toConsumableArray2["default"])(item[0]).concat((0, _toConsumableArray2["default"])(item[1]), (0, _toConsumableArray2["default"])(item[2])));
2019-09-03 11:07:45 +08:00
});
if (closePath) ctx.closePath();
}
var _default = {
drawPolylinePath: drawPolylinePath,
drawBezierCurvePath: drawBezierCurvePath
};
exports["default"] = _default;
});
unwrapExports(canvas);
var canvas_1 = canvas.drawPolylinePath;
var canvas_2 = canvas.drawBezierCurvePath;
var graphs_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.extendNewGraph = extendNewGraph;
exports["default"] = exports.text = exports.bezierCurve = exports.smoothline = exports.polyline = exports.regPolygon = exports.sector = exports.arc = exports.ring = exports.rect = exports.ellipse = exports.circle = void 0;
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _bezierCurve2 = interopRequireDefault(lib$1);
2019-09-03 11:07:45 +08:00
var polylineToBezierCurve = _bezierCurve2["default"].polylineToBezierCurve,
bezierCurveToPolyline = _bezierCurve2["default"].bezierCurveToPolyline;
var circle = {
shape: {
rx: 0,
ry: 0,
r: 0
},
validator: function validator(_ref) {
var shape = _ref.shape;
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
console.error('Circle shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref2, _ref3) {
var ctx = _ref2.ctx;
var shape = _ref3.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref4) {
var shape = _ref4.shape;
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
return (0, util.checkPointIsInCircle)(position, rx, ry, r);
},
setGraphCenter: function setGraphCenter(e, _ref5) {
var shape = _ref5.shape,
style = _ref5.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref6, _ref7) {
var movementX = _ref6.movementX,
movementY = _ref6.movementY;
var shape = _ref7.shape;
this.attr('shape', {
rx: shape.rx + movementX,
ry: shape.ry + movementY
});
}
};
exports.circle = circle;
var ellipse = {
shape: {
rx: 0,
ry: 0,
hr: 0,
vr: 0
},
validator: function validator(_ref8) {
var shape = _ref8.shape;
var rx = shape.rx,
ry = shape.ry,
hr = shape.hr,
vr = shape.vr;
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof hr !== 'number' || typeof vr !== 'number') {
console.error('Ellipse shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref9, _ref10) {
var ctx = _ref9.ctx;
var shape = _ref10.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
hr = shape.hr,
vr = shape.vr;
ctx.ellipse(rx, ry, hr > 0 ? hr : 0.01, vr > 0 ? vr : 0.01, 0, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref11) {
var shape = _ref11.shape;
var rx = shape.rx,
ry = shape.ry,
hr = shape.hr,
vr = shape.vr;
var a = Math.max(hr, vr);
var b = Math.min(hr, vr);
var c = Math.sqrt(a * a - b * b);
var leftFocusPoint = [rx - c, ry];
var rightFocusPoint = [rx + c, ry];
var distance = (0, util.getTwoPointDistance)(position, leftFocusPoint) + (0, util.getTwoPointDistance)(position, rightFocusPoint);
return distance <= 2 * a;
},
setGraphCenter: function setGraphCenter(e, _ref12) {
var shape = _ref12.shape,
style = _ref12.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref13, _ref14) {
var movementX = _ref13.movementX,
movementY = _ref13.movementY;
var shape = _ref14.shape;
this.attr('shape', {
rx: shape.rx + movementX,
ry: shape.ry + movementY
});
}
};
exports.ellipse = ellipse;
var rect = {
shape: {
x: 0,
y: 0,
w: 0,
h: 0
},
validator: function validator(_ref15) {
var shape = _ref15.shape;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
console.error('Rect shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref16, _ref17) {
var ctx = _ref16.ctx;
var shape = _ref17.shape;
ctx.beginPath();
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
ctx.rect(x, y, w, h);
ctx.fill();
ctx.stroke();
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref18) {
var shape = _ref18.shape;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
return (0, util.checkPointIsInRect)(position, x, y, w, h);
},
setGraphCenter: function setGraphCenter(e, _ref19) {
var shape = _ref19.shape,
style = _ref19.style;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
style.graphCenter = [x + w / 2, y + h / 2];
},
move: function move(_ref20, _ref21) {
var movementX = _ref20.movementX,
movementY = _ref20.movementY;
var shape = _ref21.shape;
this.attr('shape', {
x: shape.x + movementX,
y: shape.y + movementY
});
}
};
exports.rect = rect;
var ring = {
shape: {
rx: 0,
ry: 0,
r: 0
},
validator: function validator(_ref22) {
var shape = _ref22.shape;
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
console.error('Ring shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref23, _ref24) {
var ctx = _ref23.ctx;
var shape = _ref24.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
ctx.stroke();
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref25) {
var shape = _ref25.shape,
style = _ref25.style;
var rx = shape.rx,
ry = shape.ry,
r = shape.r;
var lineWidth = style.lineWidth;
var halfLineWidth = lineWidth / 2;
var minDistance = r - halfLineWidth;
var maxDistance = r + halfLineWidth;
var distance = (0, util.getTwoPointDistance)(position, [rx, ry]);
return distance >= minDistance && distance <= maxDistance;
},
setGraphCenter: function setGraphCenter(e, _ref26) {
var shape = _ref26.shape,
style = _ref26.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref27, _ref28) {
var movementX = _ref27.movementX,
movementY = _ref27.movementY;
var shape = _ref28.shape;
this.attr('shape', {
rx: shape.rx + movementX,
ry: shape.ry + movementY
});
}
};
exports.ring = ring;
var arc = {
shape: {
rx: 0,
ry: 0,
r: 0,
startAngle: 0,
endAngle: 0,
clockWise: true
},
validator: function validator(_ref29) {
var shape = _ref29.shape;
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
if (keys.find(function (key) {
return typeof shape[key] !== 'number';
})) {
console.error('Arc shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref30, _ref31) {
var ctx = _ref30.ctx;
var shape = _ref31.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
r = shape.r,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
clockWise = shape.clockWise;
ctx.arc(rx, ry, r > 0 ? r : 0.001, startAngle, endAngle, !clockWise);
ctx.stroke();
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref32) {
var shape = _ref32.shape,
style = _ref32.style;
var rx = shape.rx,
ry = shape.ry,
r = shape.r,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
clockWise = shape.clockWise;
var lineWidth = style.lineWidth;
var halfLineWidth = lineWidth / 2;
var insideRadius = r - halfLineWidth;
var outsideRadius = r + halfLineWidth;
return !(0, util.checkPointIsInSector)(position, rx, ry, insideRadius, startAngle, endAngle, clockWise) && (0, util.checkPointIsInSector)(position, rx, ry, outsideRadius, startAngle, endAngle, clockWise);
},
setGraphCenter: function setGraphCenter(e, _ref33) {
var shape = _ref33.shape,
style = _ref33.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref34, _ref35) {
var movementX = _ref34.movementX,
movementY = _ref34.movementY;
var shape = _ref35.shape;
this.attr('shape', {
rx: shape.rx + movementX,
ry: shape.ry + movementY
});
}
};
exports.arc = arc;
var sector = {
shape: {
rx: 0,
ry: 0,
r: 0,
startAngle: 0,
endAngle: 0,
clockWise: true
},
validator: function validator(_ref36) {
var shape = _ref36.shape;
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
if (keys.find(function (key) {
return typeof shape[key] !== 'number';
})) {
console.error('Sector shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref37, _ref38) {
var ctx = _ref37.ctx;
var shape = _ref38.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
r = shape.r,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
clockWise = shape.clockWise;
ctx.arc(rx, ry, r > 0 ? r : 0.01, startAngle, endAngle, !clockWise);
ctx.lineTo(rx, ry);
ctx.closePath();
ctx.stroke();
ctx.fill();
},
hoverCheck: function hoverCheck(position, _ref39) {
var shape = _ref39.shape;
var rx = shape.rx,
ry = shape.ry,
r = shape.r,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
clockWise = shape.clockWise;
return (0, util.checkPointIsInSector)(position, rx, ry, r, startAngle, endAngle, clockWise);
},
setGraphCenter: function setGraphCenter(e, _ref40) {
var shape = _ref40.shape,
style = _ref40.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref41, _ref42) {
var movementX = _ref41.movementX,
movementY = _ref41.movementY;
var shape = _ref42.shape;
var rx = shape.rx,
ry = shape.ry;
this.attr('shape', {
rx: rx + movementX,
ry: ry + movementY
});
}
};
exports.sector = sector;
var regPolygon = {
shape: {
rx: 0,
ry: 0,
r: 0,
side: 0
},
validator: function validator(_ref43) {
var shape = _ref43.shape;
var side = shape.side;
var keys = ['rx', 'ry', 'r', 'side'];
if (keys.find(function (key) {
return typeof shape[key] !== 'number';
})) {
console.error('RegPolygon shape configuration is abnormal!');
return false;
}
if (side < 3) {
console.error('RegPolygon at least trigon!');
return false;
}
return true;
},
draw: function draw(_ref44, _ref45) {
var ctx = _ref44.ctx;
var shape = _ref45.shape,
cache = _ref45.cache;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
r = shape.r,
side = shape.side;
if (!cache.points || cache.rx !== rx || cache.ry !== ry || cache.r !== r || cache.side !== side) {
var _points = (0, util.getRegularPolygonPoints)(rx, ry, r, side);
Object.assign(cache, {
points: _points,
rx: rx,
ry: ry,
r: r,
side: side
});
}
var points = cache.points;
(0, canvas.drawPolylinePath)(ctx, points);
ctx.closePath();
ctx.stroke();
ctx.fill();
},
hoverCheck: function hoverCheck(position, _ref46) {
var cache = _ref46.cache;
var points = cache.points;
return (0, util.checkPointIsInPolygon)(position, points);
},
setGraphCenter: function setGraphCenter(e, _ref47) {
var shape = _ref47.shape,
style = _ref47.style;
var rx = shape.rx,
ry = shape.ry;
style.graphCenter = [rx, ry];
},
move: function move(_ref48, _ref49) {
var movementX = _ref48.movementX,
movementY = _ref48.movementY;
var shape = _ref49.shape,
cache = _ref49.cache;
var rx = shape.rx,
ry = shape.ry;
cache.rx += movementX;
cache.ry += movementY;
this.attr('shape', {
rx: rx + movementX,
ry: ry + movementY
});
cache.points = cache.points.map(function (_ref50) {
2019-09-24 16:34:08 +08:00
var _ref51 = (0, _slicedToArray2["default"])(_ref50, 2),
2019-09-03 11:07:45 +08:00
x = _ref51[0],
y = _ref51[1];
return [x + movementX, y + movementY];
});
}
};
exports.regPolygon = regPolygon;
var polyline = {
shape: {
points: [],
close: false
},
validator: function validator(_ref52) {
var shape = _ref52.shape;
var points = shape.points;
if (!(points instanceof Array)) {
console.error('Polyline points should be an array!');
return false;
}
return true;
},
draw: function draw(_ref53, _ref54) {
var ctx = _ref53.ctx;
var shape = _ref54.shape,
lineWidth = _ref54.style.lineWidth;
ctx.beginPath();
var points = shape.points,
close = shape.close;
if (lineWidth === 1) points = (0, util.eliminateBlur)(points);
(0, canvas.drawPolylinePath)(ctx, points);
if (close) {
ctx.closePath();
ctx.fill();
ctx.stroke();
} else {
ctx.stroke();
}
},
hoverCheck: function hoverCheck(position, _ref55) {
var shape = _ref55.shape,
style = _ref55.style;
var points = shape.points,
close = shape.close;
var lineWidth = style.lineWidth;
if (close) {
return (0, util.checkPointIsInPolygon)(position, points);
} else {
return (0, util.checkPointIsNearPolyline)(position, points, lineWidth);
}
},
setGraphCenter: function setGraphCenter(e, _ref56) {
var shape = _ref56.shape,
style = _ref56.style;
var points = shape.points;
style.graphCenter = points[0];
},
move: function move(_ref57, _ref58) {
var movementX = _ref57.movementX,
movementY = _ref57.movementY;
var shape = _ref58.shape;
var points = shape.points;
var moveAfterPoints = points.map(function (_ref59) {
2019-09-24 16:34:08 +08:00
var _ref60 = (0, _slicedToArray2["default"])(_ref59, 2),
2019-09-03 11:07:45 +08:00
x = _ref60[0],
y = _ref60[1];
return [x + movementX, y + movementY];
});
this.attr('shape', {
points: moveAfterPoints
});
}
};
exports.polyline = polyline;
var smoothline = {
shape: {
points: [],
close: false
},
validator: function validator(_ref61) {
var shape = _ref61.shape;
var points = shape.points;
if (!(points instanceof Array)) {
console.error('Smoothline points should be an array!');
return false;
}
return true;
},
draw: function draw(_ref62, _ref63) {
var ctx = _ref62.ctx;
var shape = _ref63.shape,
cache = _ref63.cache;
var points = shape.points,
close = shape.close;
if (!cache.points || cache.points.toString() !== points.toString()) {
var _bezierCurve = polylineToBezierCurve(points, close);
var hoverPoints = bezierCurveToPolyline(_bezierCurve);
Object.assign(cache, {
points: (0, util.deepClone)(points, true),
bezierCurve: _bezierCurve,
hoverPoints: hoverPoints
});
}
var bezierCurve = cache.bezierCurve;
ctx.beginPath();
(0, canvas.drawBezierCurvePath)(ctx, bezierCurve.slice(1), bezierCurve[0]);
if (close) {
ctx.closePath();
ctx.fill();
ctx.stroke();
} else {
ctx.stroke();
}
},
hoverCheck: function hoverCheck(position, _ref64) {
var cache = _ref64.cache,
shape = _ref64.shape,
style = _ref64.style;
var hoverPoints = cache.hoverPoints;
var close = shape.close;
var lineWidth = style.lineWidth;
if (close) {
return (0, util.checkPointIsInPolygon)(position, hoverPoints);
} else {
return (0, util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
}
},
setGraphCenter: function setGraphCenter(e, _ref65) {
var shape = _ref65.shape,
style = _ref65.style;
var points = shape.points;
style.graphCenter = points[0];
},
move: function move(_ref66, _ref67) {
var movementX = _ref66.movementX,
movementY = _ref66.movementY;
var shape = _ref67.shape,
cache = _ref67.cache;
var points = shape.points;
var moveAfterPoints = points.map(function (_ref68) {
2019-09-24 16:34:08 +08:00
var _ref69 = (0, _slicedToArray2["default"])(_ref68, 2),
2019-09-03 11:07:45 +08:00
x = _ref69[0],
y = _ref69[1];
return [x + movementX, y + movementY];
});
cache.points = moveAfterPoints;
2019-09-24 16:34:08 +08:00
var _cache$bezierCurve$ = (0, _slicedToArray2["default"])(cache.bezierCurve[0], 2),
2019-09-03 11:07:45 +08:00
fx = _cache$bezierCurve$[0],
fy = _cache$bezierCurve$[1];
var curves = cache.bezierCurve.slice(1);
2019-09-24 16:34:08 +08:00
cache.bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
2019-09-03 11:07:45 +08:00
return curve.map(function (_ref70) {
2019-09-24 16:34:08 +08:00
var _ref71 = (0, _slicedToArray2["default"])(_ref70, 2),
2019-09-03 11:07:45 +08:00
x = _ref71[0],
y = _ref71[1];
return [x + movementX, y + movementY];
});
})));
cache.hoverPoints = cache.hoverPoints.map(function (_ref72) {
2019-09-24 16:34:08 +08:00
var _ref73 = (0, _slicedToArray2["default"])(_ref72, 2),
2019-09-03 11:07:45 +08:00
x = _ref73[0],
y = _ref73[1];
return [x + movementX, y + movementY];
});
this.attr('shape', {
points: moveAfterPoints
});
}
};
exports.smoothline = smoothline;
var bezierCurve = {
shape: {
points: [],
close: false
},
validator: function validator(_ref74) {
var shape = _ref74.shape;
var points = shape.points;
if (!(points instanceof Array)) {
console.error('BezierCurve points should be an array!');
return false;
}
return true;
},
draw: function draw(_ref75, _ref76) {
var ctx = _ref75.ctx;
var shape = _ref76.shape,
cache = _ref76.cache;
var points = shape.points,
close = shape.close;
if (!cache.points || cache.points.toString() !== points.toString()) {
var hoverPoints = bezierCurveToPolyline(points, 20);
Object.assign(cache, {
points: (0, util.deepClone)(points, true),
hoverPoints: hoverPoints
});
}
ctx.beginPath();
(0, canvas.drawBezierCurvePath)(ctx, points.slice(1), points[0]);
if (close) {
ctx.closePath();
ctx.fill();
ctx.stroke();
} else {
ctx.stroke();
}
},
hoverCheck: function hoverCheck(position, _ref77) {
var cache = _ref77.cache,
shape = _ref77.shape,
style = _ref77.style;
var hoverPoints = cache.hoverPoints;
var close = shape.close;
var lineWidth = style.lineWidth;
if (close) {
return (0, util.checkPointIsInPolygon)(position, hoverPoints);
} else {
return (0, util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
}
},
setGraphCenter: function setGraphCenter(e, _ref78) {
var shape = _ref78.shape,
style = _ref78.style;
var points = shape.points;
style.graphCenter = points[0];
},
move: function move(_ref79, _ref80) {
var movementX = _ref79.movementX,
movementY = _ref79.movementY;
var shape = _ref80.shape,
cache = _ref80.cache;
var points = shape.points;
2019-09-24 16:34:08 +08:00
var _points$ = (0, _slicedToArray2["default"])(points[0], 2),
2019-09-03 11:07:45 +08:00
fx = _points$[0],
fy = _points$[1];
var curves = points.slice(1);
2019-09-24 16:34:08 +08:00
var bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
2019-09-03 11:07:45 +08:00
return curve.map(function (_ref81) {
2019-09-24 16:34:08 +08:00
var _ref82 = (0, _slicedToArray2["default"])(_ref81, 2),
2019-09-03 11:07:45 +08:00
x = _ref82[0],
y = _ref82[1];
return [x + movementX, y + movementY];
});
})));
cache.points = bezierCurve;
cache.hoverPoints = cache.hoverPoints.map(function (_ref83) {
2019-09-24 16:34:08 +08:00
var _ref84 = (0, _slicedToArray2["default"])(_ref83, 2),
2019-09-03 11:07:45 +08:00
x = _ref84[0],
y = _ref84[1];
return [x + movementX, y + movementY];
});
this.attr('shape', {
points: bezierCurve
});
}
};
exports.bezierCurve = bezierCurve;
var text = {
shape: {
content: '',
position: [],
maxWidth: undefined,
rowGap: 0
},
validator: function validator(_ref85) {
var shape = _ref85.shape;
var content = shape.content,
position = shape.position,
rowGap = shape.rowGap;
if (typeof content !== 'string') {
console.error('Text content should be a string!');
return false;
}
if (!(position instanceof Array)) {
console.error('Text position should be an array!');
return false;
}
if (typeof rowGap !== 'number') {
console.error('Text rowGap should be a number!');
return false;
}
return true;
},
draw: function draw(_ref86, _ref87) {
var ctx = _ref86.ctx;
var shape = _ref87.shape;
var content = shape.content,
position = shape.position,
maxWidth = shape.maxWidth,
rowGap = shape.rowGap;
var textBaseline = ctx.textBaseline,
font = ctx.font;
var fontSize = parseInt(font.replace(/\D/g, ''));
var _position = position,
2019-09-24 16:34:08 +08:00
_position2 = (0, _slicedToArray2["default"])(_position, 2),
2019-09-03 11:07:45 +08:00
x = _position2[0],
y = _position2[1];
content = content.split('\n');
var rowNum = content.length;
var lineHeight = fontSize + rowGap;
var allHeight = rowNum * lineHeight - rowGap;
var offset = 0;
if (textBaseline === 'middle') {
offset = allHeight / 2;
y += fontSize / 2;
}
if (textBaseline === 'bottom') {
offset = allHeight;
y += fontSize;
}
position = new Array(rowNum).fill(0).map(function (foo, i) {
return [x, y + i * lineHeight - offset];
});
ctx.beginPath();
content.forEach(function (text, i) {
2019-09-24 16:34:08 +08:00
ctx.fillText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
ctx.strokeText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
2019-09-03 11:07:45 +08:00
});
ctx.closePath();
},
hoverCheck: function hoverCheck(position, _ref88) {
var shape = _ref88.shape,
style = _ref88.style;
return false;
},
setGraphCenter: function setGraphCenter(e, _ref89) {
var shape = _ref89.shape,
style = _ref89.style;
var position = shape.position;
2019-09-24 16:34:08 +08:00
style.graphCenter = (0, _toConsumableArray2["default"])(position);
2019-09-03 11:07:45 +08:00
},
move: function move(_ref90, _ref91) {
var movementX = _ref90.movementX,
movementY = _ref90.movementY;
var shape = _ref91.shape;
2019-09-24 16:34:08 +08:00
var _shape$position = (0, _slicedToArray2["default"])(shape.position, 2),
2019-09-03 11:07:45 +08:00
x = _shape$position[0],
y = _shape$position[1];
this.attr('shape', {
position: [x + movementX, y + movementY]
});
}
};
exports.text = text;
var graphs = new Map([['circle', circle], ['ellipse', ellipse], ['rect', rect], ['ring', ring], ['arc', arc], ['sector', sector], ['regPolygon', regPolygon], ['polyline', polyline], ['smoothline', smoothline], ['bezierCurve', bezierCurve], ['text', text]]);
var _default = graphs;
2020-05-06 14:15:15 +08:00
/**
* @description Extend new graph
* @param {String} name Name of Graph
* @param {Object} config Configuration of Graph
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
exports["default"] = _default;
function extendNewGraph(name, config) {
if (!name || !config) {
console.error('ExtendNewGraph Missing Parameters!');
return;
}
if (!config.shape) {
console.error('Required attribute of shape to extendNewGraph!');
return;
}
if (!config.validator) {
console.error('Required function of validator to extendNewGraph!');
return;
}
if (!config.draw) {
console.error('Required function of draw to extendNewGraph!');
return;
}
graphs.set(name, config);
}
});
unwrapExports(graphs_1);
var graphs_2 = graphs_1.extendNewGraph;
var graphs_3 = graphs_1.text;
var graphs_4 = graphs_1.bezierCurve;
var graphs_5 = graphs_1.smoothline;
var graphs_6 = graphs_1.polyline;
var graphs_7 = graphs_1.regPolygon;
var graphs_8 = graphs_1.sector;
var graphs_9 = graphs_1.arc;
var graphs_10 = graphs_1.ring;
var graphs_11 = graphs_1.rect;
var graphs_12 = graphs_1.ellipse;
var graphs_13 = graphs_1.circle;
var runtime_1 = createCommonjsModule(function (module) {
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var runtime = (function (exports) {
var Op = Object.prototype;
var hasOwn = Op.hasOwnProperty;
var undefined$1; // More compressible than void 0.
var $Symbol = typeof Symbol === "function" ? Symbol : {};
var iteratorSymbol = $Symbol.iterator || "@@iterator";
var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function wrap(innerFn, outerFn, self, tryLocsList) {
// If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
var generator = Object.create(protoGenerator.prototype);
var context = new Context(tryLocsList || []);
// The ._invoke method unifies the implementations of the .next,
// .throw, and .return methods.
generator._invoke = makeInvokeMethod(innerFn, self, context);
return generator;
}
exports.wrap = wrap;
// Try/catch helper to minimize deoptimizations. Returns a completion
// record like context.tryEntries[i].completion. This interface could
// have been (and was previously) designed to take a closure to be
// invoked without arguments, but in all the cases we care about we
// already have an existing method we want to call, so there's no need
// to create a new function object. We can even get away with assuming
// the method takes exactly one argument, since that happens to be true
// in every case, so we don't have to touch the arguments object. The
// only additional allocation required is the completion record, which
// has a stable shape and so hopefully should be cheap to allocate.
function tryCatch(fn, obj, arg) {
try {
return { type: "normal", arg: fn.call(obj, arg) };
} catch (err) {
return { type: "throw", arg: err };
}
}
var GenStateSuspendedStart = "suspendedStart";
var GenStateSuspendedYield = "suspendedYield";
var GenStateExecuting = "executing";
var GenStateCompleted = "completed";
// Returning this object from the innerFn has the same effect as
// breaking out of the dispatch switch statement.
var ContinueSentinel = {};
// Dummy constructor functions that we use as the .constructor and
// .constructor.prototype properties for functions that return Generator
// objects. For full spec compliance, you may wish to configure your
// minifier not to mangle the names of these two functions.
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
// This is a polyfill for %IteratorPrototype% for environments that
// don't natively support it.
var IteratorPrototype = {};
IteratorPrototype[iteratorSymbol] = function () {
return this;
};
var getProto = Object.getPrototypeOf;
var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
if (NativeIteratorPrototype &&
NativeIteratorPrototype !== Op &&
hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
// This environment has a native %IteratorPrototype%; use it instead
// of the polyfill.
IteratorPrototype = NativeIteratorPrototype;
}
var Gp = GeneratorFunctionPrototype.prototype =
Generator.prototype = Object.create(IteratorPrototype);
GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
GeneratorFunctionPrototype.constructor = GeneratorFunction;
GeneratorFunctionPrototype[toStringTagSymbol] =
GeneratorFunction.displayName = "GeneratorFunction";
// Helper for defining the .next, .throw, and .return methods of the
// Iterator interface in terms of a single ._invoke method.
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function(method) {
prototype[method] = function(arg) {
return this._invoke(method, arg);
};
});
}
exports.isGeneratorFunction = function(genFun) {
var ctor = typeof genFun === "function" && genFun.constructor;
return ctor
? ctor === GeneratorFunction ||
// For the native GeneratorFunction constructor, the best we can
// do is to check its .name property.
(ctor.displayName || ctor.name) === "GeneratorFunction"
: false;
};
exports.mark = function(genFun) {
if (Object.setPrototypeOf) {
Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
} else {
genFun.__proto__ = GeneratorFunctionPrototype;
if (!(toStringTagSymbol in genFun)) {
genFun[toStringTagSymbol] = "GeneratorFunction";
}
}
genFun.prototype = Object.create(Gp);
return genFun;
};
// Within the body of any async function, `await x` is transformed to
// `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
// `hasOwn.call(value, "__await")` to determine if the yielded value is
// meant to be awaited.
exports.awrap = function(arg) {
return { __await: arg };
};
2020-04-28 18:41:09 +08:00
function AsyncIterator(generator, PromiseImpl) {
2019-09-03 11:07:45 +08:00
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if (record.type === "throw") {
reject(record.arg);
} else {
var result = record.arg;
var value = result.value;
if (value &&
typeof value === "object" &&
hasOwn.call(value, "__await")) {
2020-04-28 18:41:09 +08:00
return PromiseImpl.resolve(value.__await).then(function(value) {
2019-09-03 11:07:45 +08:00
invoke("next", value, resolve, reject);
}, function(err) {
invoke("throw", err, resolve, reject);
});
}
2020-04-28 18:41:09 +08:00
return PromiseImpl.resolve(value).then(function(unwrapped) {
2019-09-03 11:07:45 +08:00
// When a yielded Promise is resolved, its final value becomes
// the .value of the Promise<{value,done}> result for the
// current iteration.
result.value = unwrapped;
resolve(result);
}, function(error) {
// If a rejected Promise was yielded, throw the rejection back
// into the async generator function so it can be handled there.
return invoke("throw", error, resolve, reject);
});
}
}
var previousPromise;
function enqueue(method, arg) {
function callInvokeWithMethodAndArg() {
2020-04-28 18:41:09 +08:00
return new PromiseImpl(function(resolve, reject) {
2019-09-03 11:07:45 +08:00
invoke(method, arg, resolve, reject);
});
}
return previousPromise =
// If enqueue has been called before, then we want to wait until
// all previous Promises have been resolved before calling invoke,
// so that results are always delivered in the correct order. If
// enqueue has not been called before, then it is important to
// call invoke immediately, without waiting on a callback to fire,
// so that the async generator function has the opportunity to do
// any necessary setup in a predictable way. This predictability
// is why the Promise constructor synchronously invokes its
// executor callback, and why async functions synchronously
// execute code before the first await. Since we implement simple
// async functions in terms of async generators, it is especially
// important to get this right, even though it requires care.
previousPromise ? previousPromise.then(
callInvokeWithMethodAndArg,
// Avoid propagating failures to Promises returned by later
// invocations of the iterator.
callInvokeWithMethodAndArg
) : callInvokeWithMethodAndArg();
}
// Define the unified helper method that is used to implement .next,
// .throw, and .return (see defineIteratorMethods).
this._invoke = enqueue;
}
defineIteratorMethods(AsyncIterator.prototype);
AsyncIterator.prototype[asyncIteratorSymbol] = function () {
return this;
};
exports.AsyncIterator = AsyncIterator;
// Note that simple async functions are implemented on top of
// AsyncIterator objects; they just return a Promise for the value of
// the final result produced by the iterator.
2020-04-28 18:41:09 +08:00
exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
if (PromiseImpl === void 0) PromiseImpl = Promise;
2019-09-03 11:07:45 +08:00
var iter = new AsyncIterator(
2020-04-28 18:41:09 +08:00
wrap(innerFn, outerFn, self, tryLocsList),
PromiseImpl
2019-09-03 11:07:45 +08:00
);
return exports.isGeneratorFunction(outerFn)
? iter // If outerFn is a generator, return the full iterator.
: iter.next().then(function(result) {
return result.done ? result.value : iter.next();
});
};
function makeInvokeMethod(innerFn, self, context) {
var state = GenStateSuspendedStart;
return function invoke(method, arg) {
if (state === GenStateExecuting) {
throw new Error("Generator is already running");
}
if (state === GenStateCompleted) {
if (method === "throw") {
throw arg;
}
// Be forgiving, per 25.3.3.3.3 of the spec:
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
return doneResult();
}
context.method = method;
context.arg = arg;
while (true) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if (context.method === "next") {
// Setting context._sent for legacy support of Babel's
// function.sent implementation.
context.sent = context._sent = context.arg;
} else if (context.method === "throw") {
if (state === GenStateSuspendedStart) {
state = GenStateCompleted;
throw context.arg;
}
context.dispatchException(context.arg);
} else if (context.method === "return") {
context.abrupt("return", context.arg);
}
state = GenStateExecuting;
var record = tryCatch(innerFn, self, context);
if (record.type === "normal") {
// If an exception is thrown from innerFn, we leave state ===
// GenStateExecuting and loop back for another invocation.
state = context.done
? GenStateCompleted
: GenStateSuspendedYield;
if (record.arg === ContinueSentinel) {
continue;
}
return {
value: record.arg,
done: context.done
};
} else if (record.type === "throw") {
state = GenStateCompleted;
// Dispatch the exception by looping back around to the
// context.dispatchException(context.arg) call above.
context.method = "throw";
context.arg = record.arg;
}
}
};
}
// Call delegate.iterator[context.method](context.arg) and handle the
// result, either by returning a { value, done } result from the
// delegate iterator, or by modifying context.method and context.arg,
// setting context.delegate to null, and returning the ContinueSentinel.
function maybeInvokeDelegate(delegate, context) {
var method = delegate.iterator[context.method];
if (method === undefined$1) {
// A .throw or .return when the delegate iterator has no .throw
// method always terminates the yield* loop.
context.delegate = null;
if (context.method === "throw") {
// Note: ["return"] must be used for ES3 parsing compatibility.
if (delegate.iterator["return"]) {
// If the delegate iterator has a return method, give it a
// chance to clean up.
context.method = "return";
context.arg = undefined$1;
maybeInvokeDelegate(delegate, context);
if (context.method === "throw") {
// If maybeInvokeDelegate(context) changed context.method from
// "return" to "throw", let that override the TypeError below.
return ContinueSentinel;
}
}
context.method = "throw";
context.arg = new TypeError(
"The iterator does not provide a 'throw' method");
}
return ContinueSentinel;
}
var record = tryCatch(method, delegate.iterator, context.arg);
if (record.type === "throw") {
context.method = "throw";
context.arg = record.arg;
context.delegate = null;
return ContinueSentinel;
}
var info = record.arg;
if (! info) {
context.method = "throw";
context.arg = new TypeError("iterator result is not an object");
context.delegate = null;
return ContinueSentinel;
}
if (info.done) {
// Assign the result of the finished delegate to the temporary
// variable specified by delegate.resultName (see delegateYield).
context[delegate.resultName] = info.value;
// Resume execution at the desired location (see delegateYield).
context.next = delegate.nextLoc;
// If context.method was "throw" but the delegate handled the
// exception, let the outer generator proceed normally. If
// context.method was "next", forget context.arg since it has been
// "consumed" by the delegate iterator. If context.method was
// "return", allow the original .return call to continue in the
// outer generator.
if (context.method !== "return") {
context.method = "next";
context.arg = undefined$1;
}
} else {
// Re-yield the result returned by the delegate method.
return info;
}
// The delegate iterator is finished, so forget it and continue with
// the outer generator.
context.delegate = null;
return ContinueSentinel;
}
// Define Generator.prototype.{next,throw,return} in terms of the
// unified ._invoke helper method.
defineIteratorMethods(Gp);
Gp[toStringTagSymbol] = "Generator";
// A Generator should always return itself as the iterator object when the
// @@iterator function is called on it. Some browsers' implementations of the
// iterator prototype chain incorrectly implement this, causing the Generator
// object to not be returned from this call. This ensures that doesn't happen.
// See https://github.com/facebook/regenerator/issues/274 for more details.
Gp[iteratorSymbol] = function() {
return this;
};
Gp.toString = function() {
return "[object Generator]";
};
function pushTryEntry(locs) {
var entry = { tryLoc: locs[0] };
if (1 in locs) {
entry.catchLoc = locs[1];
}
if (2 in locs) {
entry.finallyLoc = locs[2];
entry.afterLoc = locs[3];
}
this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal";
delete record.arg;
entry.completion = record;
}
function Context(tryLocsList) {
// The root entry object (effectively a try statement without a catch
// or a finally block) gives us a place to store values thrown from
// locations where there is no enclosing try statement.
this.tryEntries = [{ tryLoc: "root" }];
tryLocsList.forEach(pushTryEntry, this);
this.reset(true);
}
exports.keys = function(object) {
var keys = [];
for (var key in object) {
keys.push(key);
}
keys.reverse();
// Rather than returning an object with a next method, we keep
// things simple and return the next function itself.
return function next() {
while (keys.length) {
var key = keys.pop();
if (key in object) {
next.value = key;
next.done = false;
return next;
}
}
// To avoid creating an additional object, we just hang the .value
// and .done properties off the next function object itself. This
// also ensures that the minifier will not anonymize the function.
next.done = true;
return next;
};
};
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) {
return iteratorMethod.call(iterable);
}
if (typeof iterable.next === "function") {
return iterable;
}
if (!isNaN(iterable.length)) {
var i = -1, next = function next() {
while (++i < iterable.length) {
if (hasOwn.call(iterable, i)) {
next.value = iterable[i];
next.done = false;
return next;
}
}
next.value = undefined$1;
next.done = true;
return next;
};
return next.next = next;
}
}
// Return an iterator with no values.
return { next: doneResult };
}
exports.values = values;
function doneResult() {
return { value: undefined$1, done: true };
}
Context.prototype = {
constructor: Context,
reset: function(skipTempReset) {
this.prev = 0;
this.next = 0;
// Resetting context._sent for legacy support of Babel's
// function.sent implementation.
this.sent = this._sent = undefined$1;
this.done = false;
this.delegate = null;
this.method = "next";
this.arg = undefined$1;
this.tryEntries.forEach(resetTryEntry);
if (!skipTempReset) {
for (var name in this) {
// Not sure about the optimal order of these conditions:
if (name.charAt(0) === "t" &&
hasOwn.call(this, name) &&
!isNaN(+name.slice(1))) {
this[name] = undefined$1;
}
}
}
},
stop: function() {
this.done = true;
var rootEntry = this.tryEntries[0];
var rootRecord = rootEntry.completion;
if (rootRecord.type === "throw") {
throw rootRecord.arg;
}
return this.rval;
},
dispatchException: function(exception) {
if (this.done) {
throw exception;
}
var context = this;
function handle(loc, caught) {
record.type = "throw";
record.arg = exception;
context.next = loc;
if (caught) {
// If the dispatched exception was caught by a catch block,
// then let that catch block handle the exception normally.
context.method = "next";
context.arg = undefined$1;
}
return !! caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
var record = entry.completion;
if (entry.tryLoc === "root") {
// Exception thrown outside of any try block that could handle
// it, so set the completion value of the entire function to
// throw the exception.
return handle("end");
}
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc");
var hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
} else if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else if (hasCatch) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
}
} else if (hasFinally) {
if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else {
throw new Error("try statement without catch or finally");
}
}
}
},
abrupt: function(type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev &&
hasOwn.call(entry, "finallyLoc") &&
this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
if (finallyEntry &&
(type === "break" ||
type === "continue") &&
finallyEntry.tryLoc <= arg &&
arg <= finallyEntry.finallyLoc) {
// Ignore the finally entry if control is not jumping to a
// location outside the try/catch block.
finallyEntry = null;
}
var record = finallyEntry ? finallyEntry.completion : {};
record.type = type;
record.arg = arg;
if (finallyEntry) {
this.method = "next";
this.next = finallyEntry.finallyLoc;
return ContinueSentinel;
}
return this.complete(record);
},
complete: function(record, afterLoc) {
if (record.type === "throw") {
throw record.arg;
}
if (record.type === "break" ||
record.type === "continue") {
this.next = record.arg;
} else if (record.type === "return") {
this.rval = this.arg = record.arg;
this.method = "return";
this.next = "end";
} else if (record.type === "normal" && afterLoc) {
this.next = afterLoc;
}
return ContinueSentinel;
},
finish: function(finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) {
this.complete(entry.completion, entry.afterLoc);
resetTryEntry(entry);
return ContinueSentinel;
}
}
},
"catch": function(tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if (record.type === "throw") {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
// The context.catch method must only be called with a location
// argument that corresponds to a known catch block.
throw new Error("illegal catch attempt");
},
delegateYield: function(iterable, resultName, nextLoc) {
this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
};
if (this.method === "next") {
// Deliberately forget the last sent value so that we don't
// accidentally pass it on to the delegate.
this.arg = undefined$1;
}
return ContinueSentinel;
}
};
// Regardless of whether this script is executing as a CommonJS module
// or not, return the runtime object so that we can declare the variable
// regeneratorRuntime in the outer scope, which allows this module to be
// injected easily by `bin/regenerator --include-runtime script.js`.
return exports;
}(
// If this script is executing as a CommonJS module, use module.exports
// as the regeneratorRuntime namespace. Otherwise create a new empty
// object. Either way, the resulting object will be used to initialize
// the regeneratorRuntime variable at the top of this file.
2019-09-24 16:34:08 +08:00
module.exports
));
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
try {
regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured. Just
// in case runtime.js accidentally runs in strict mode, we can escape
// strict mode using a global Function call. This could conceivably fail
// if a Content Security Policy forbids using Function, but in that case
// the proper solution is to fix the accidental strict mode problem. If
// you've misconfigured your bundler to force strict mode and applied a
// CSP to forbid Function, and you're not willing to fix either of those
// problems, please detail your unique predicament in a GitHub issue.
Function("r", "regeneratorRuntime = r")(runtime);
}
});
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var regenerator = runtime_1;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
_next(undefined);
});
};
}
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var asyncToGenerator = _asyncToGenerator;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var style_class = createCommonjsModule(function (module, exports) {
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _classCallCheck2 = interopRequireDefault(classCallCheck);
2019-09-03 11:07:45 +08:00
2020-05-06 14:15:15 +08:00
/**
* @description Class Style
* @param {Object} style Style configuration
* @return {Style} Instance of Style
2019-09-03 11:07:45 +08:00
*/
var Style = function Style(style) {
2019-09-24 16:34:08 +08:00
(0, _classCallCheck2["default"])(this, Style);
2019-09-03 11:07:45 +08:00
this.colorProcessor(style);
var defaultStyle = {
2020-05-06 14:15:15 +08:00
/**
* @description Rgba value of graph fill color
* @type {Array}
* @default fill = [0, 0, 0, 1]
2019-09-03 11:07:45 +08:00
*/
fill: [0, 0, 0, 1],
2020-05-06 14:15:15 +08:00
/**
* @description Rgba value of graph stroke color
* @type {Array}
* @default stroke = [0, 0, 0, 1]
2019-09-03 11:07:45 +08:00
*/
stroke: [0, 0, 0, 0],
2020-05-06 14:15:15 +08:00
/**
* @description Opacity of graph
* @type {Number}
* @default opacity = 1
2019-09-03 11:07:45 +08:00
*/
opacity: 1,
2020-05-06 14:15:15 +08:00
/**
* @description LineCap of Ctx
* @type {String}
* @default lineCap = null
* @example lineCap = 'butt'|'round'|'square'
2019-09-03 11:07:45 +08:00
*/
lineCap: null,
2020-05-06 14:15:15 +08:00
/**
* @description Linejoin of Ctx
* @type {String}
* @default lineJoin = null
* @example lineJoin = 'round'|'bevel'|'miter'
2019-09-03 11:07:45 +08:00
*/
lineJoin: null,
2020-05-06 14:15:15 +08:00
/**
* @description LineDash of Ctx
* @type {Array}
* @default lineDash = null
* @example lineDash = [10, 10]
2019-09-03 11:07:45 +08:00
*/
lineDash: null,
2020-05-06 14:15:15 +08:00
/**
* @description LineDashOffset of Ctx
* @type {Number}
* @default lineDashOffset = null
* @example lineDashOffset = 10
2019-09-03 11:07:45 +08:00
*/
lineDashOffset: null,
2020-05-06 14:15:15 +08:00
/**
* @description ShadowBlur of Ctx
* @type {Number}
* @default shadowBlur = 0
2019-09-03 11:07:45 +08:00
*/
shadowBlur: 0,
2020-05-06 14:15:15 +08:00
/**
* @description Rgba value of graph shadow color
* @type {Array}
* @default shadowColor = [0, 0, 0, 0]
2019-09-03 11:07:45 +08:00
*/
shadowColor: [0, 0, 0, 0],
2020-05-06 14:15:15 +08:00
/**
* @description ShadowOffsetX of Ctx
* @type {Number}
* @default shadowOffsetX = 0
2019-09-03 11:07:45 +08:00
*/
shadowOffsetX: 0,
2020-05-06 14:15:15 +08:00
/**
* @description ShadowOffsetY of Ctx
* @type {Number}
* @default shadowOffsetY = 0
2019-09-03 11:07:45 +08:00
*/
shadowOffsetY: 0,
2020-05-06 14:15:15 +08:00
/**
* @description LineWidth of Ctx
* @type {Number}
* @default lineWidth = 0
2019-09-03 11:07:45 +08:00
*/
lineWidth: 0,
2020-05-06 14:15:15 +08:00
/**
* @description Center point of the graph
* @type {Array}
* @default graphCenter = null
* @example graphCenter = [10, 10]
2019-09-03 11:07:45 +08:00
*/
graphCenter: null,
2020-05-06 14:15:15 +08:00
/**
* @description Graph scale
* @type {Array}
* @default scale = null
* @example scale = [1.5, 1.5]
2019-09-03 11:07:45 +08:00
*/
scale: null,
2020-05-06 14:15:15 +08:00
/**
* @description Graph rotation degree
* @type {Number}
* @default rotate = null
* @example rotate = 10
2019-09-03 11:07:45 +08:00
*/
rotate: null,
2020-05-06 14:15:15 +08:00
/**
* @description Graph translate distance
* @type {Array}
* @default translate = null
* @example translate = [10, 10]
2019-09-03 11:07:45 +08:00
*/
translate: null,
2020-05-06 14:15:15 +08:00
/**
* @description Cursor status when hover
* @type {String}
* @default hoverCursor = 'pointer'
* @example hoverCursor = 'default'|'pointer'|'auto'|'crosshair'|'move'|'wait'|...
2019-09-03 11:07:45 +08:00
*/
hoverCursor: 'pointer',
2020-05-06 14:15:15 +08:00
/**
* @description Font style of Ctx
* @type {String}
* @default fontStyle = 'normal'
* @example fontStyle = 'normal'|'italic'|'oblique'
2019-09-03 11:07:45 +08:00
*/
fontStyle: 'normal',
2020-05-06 14:15:15 +08:00
/**
* @description Font varient of Ctx
* @type {String}
* @default fontVarient = 'normal'
* @example fontVarient = 'normal'|'small-caps'
2019-09-03 11:07:45 +08:00
*/
fontVarient: 'normal',
2020-05-06 14:15:15 +08:00
/**
* @description Font weight of Ctx
* @type {String|Number}
* @default fontWeight = 'normal'
* @example fontWeight = 'normal'|'bold'|'bolder'|'lighter'|Number
2019-09-03 11:07:45 +08:00
*/
fontWeight: 'normal',
2020-05-06 14:15:15 +08:00
/**
* @description Font size of Ctx
* @type {Number}
* @default fontSize = 10
2019-09-03 11:07:45 +08:00
*/
fontSize: 10,
2020-05-06 14:15:15 +08:00
/**
* @description Font family of Ctx
* @type {String}
* @default fontFamily = 'Arial'
2019-09-03 11:07:45 +08:00
*/
fontFamily: 'Arial',
2020-05-06 14:15:15 +08:00
/**
* @description TextAlign of Ctx
* @type {String}
* @default textAlign = 'center'
* @example textAlign = 'start'|'end'|'left'|'right'|'center'
2019-09-03 11:07:45 +08:00
*/
textAlign: 'center',
2020-05-06 14:15:15 +08:00
/**
* @description TextBaseline of Ctx
* @type {String}
* @default textBaseline = 'middle'
* @example textBaseline = 'top'|'bottom'|'middle'|'alphabetic'|'hanging'
2019-09-03 11:07:45 +08:00
*/
textBaseline: 'middle',
2020-05-06 14:15:15 +08:00
/**
* @description The color used to create the gradient
* @type {Array}
* @default gradientColor = null
* @example gradientColor = ['#000', '#111', '#222']
2019-09-03 11:07:45 +08:00
*/
gradientColor: null,
2020-05-06 14:15:15 +08:00
/**
* @description Gradient type
* @type {String}
* @default gradientType = 'linear'
* @example gradientType = 'linear' | 'radial'
2019-09-03 11:07:45 +08:00
*/
gradientType: 'linear',
2020-05-06 14:15:15 +08:00
/**
* @description Gradient params
* @type {Array}
* @default gradientParams = null
* @example gradientParams = [x0, y0, x1, y1] (Linear Gradient)
* @example gradientParams = [x0, y0, r0, x1, y1, r1] (Radial Gradient)
2019-09-03 11:07:45 +08:00
*/
gradientParams: null,
2020-05-06 14:15:15 +08:00
/**
* @description When to use gradients
* @type {String}
* @default gradientWith = 'stroke'
* @example gradientWith = 'stroke' | 'fill'
2019-09-03 11:07:45 +08:00
*/
gradientWith: 'stroke',
2020-05-06 14:15:15 +08:00
/**
* @description Gradient color stops
* @type {String}
* @default gradientStops = 'auto'
* @example gradientStops = 'auto' | [0, .2, .3, 1]
2019-09-03 11:07:45 +08:00
*/
gradientStops: 'auto',
2020-05-06 14:15:15 +08:00
/**
* @description Extended color that supports animation transition
* @type {Array|Object}
* @default colors = null
* @example colors = ['#000', '#111', '#222', 'red' ]
* @example colors = { a: '#000', b: '#111' }
2019-09-03 11:07:45 +08:00
*/
colors: null
};
Object.assign(this, defaultStyle, style);
};
2020-05-06 14:15:15 +08:00
/**
* @description Set colors to rgba value
* @param {Object} style style config
* @param {Boolean} reverse Whether to perform reverse operation
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
exports["default"] = Style;
Style.prototype.colorProcessor = function (style) {
var reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var processor = reverse ? lib.getColorFromRgbValue : lib.getRgbaValue;
var colorProcessorKeys = ['fill', 'stroke', 'shadowColor'];
var allKeys = Object.keys(style);
var colorKeys = allKeys.filter(function (key) {
return colorProcessorKeys.find(function (k) {
return k === key;
});
});
colorKeys.forEach(function (key) {
return style[key] = processor(style[key]);
});
var gradientColor = style.gradientColor,
colors = style.colors;
if (gradientColor) style.gradientColor = gradientColor.map(function (c) {
return processor(c);
});
if (colors) {
var colorsKeys = Object.keys(colors);
colorsKeys.forEach(function (key) {
return colors[key] = processor(colors[key]);
});
}
};
2020-05-06 14:15:15 +08:00
/**
* @description Init graph style
* @param {Object} ctx Context of canvas
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Style.prototype.initStyle = function (ctx) {
initTransform(ctx, this);
initGraphStyle(ctx, this);
initGradient(ctx, this);
};
2020-05-06 14:15:15 +08:00
/**
* @description Init canvas transform
* @param {Object} ctx Context of canvas
* @param {Style} style Instance of Style
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function initTransform(ctx, style) {
ctx.save();
var graphCenter = style.graphCenter,
rotate = style.rotate,
scale = style.scale,
translate = style.translate;
if (!(graphCenter instanceof Array)) return;
2019-09-24 16:34:08 +08:00
ctx.translate.apply(ctx, (0, _toConsumableArray2["default"])(graphCenter));
2019-09-03 11:07:45 +08:00
if (rotate) ctx.rotate(rotate * Math.PI / 180);
2019-09-24 16:34:08 +08:00
if (scale instanceof Array) ctx.scale.apply(ctx, (0, _toConsumableArray2["default"])(scale));
if (translate) ctx.translate.apply(ctx, (0, _toConsumableArray2["default"])(translate));
2019-09-03 11:07:45 +08:00
ctx.translate(-graphCenter[0], -graphCenter[1]);
}
var autoSetStyleKeys = ['lineCap', 'lineJoin', 'lineDashOffset', 'shadowOffsetX', 'shadowOffsetY', 'lineWidth', 'textAlign', 'textBaseline'];
2020-05-06 14:15:15 +08:00
/**
* @description Set the style of canvas ctx
* @param {Object} ctx Context of canvas
* @param {Style} style Instance of Style
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function initGraphStyle(ctx, style) {
var fill = style.fill,
stroke = style.stroke,
shadowColor = style.shadowColor,
opacity = style.opacity;
autoSetStyleKeys.forEach(function (key) {
if (key || typeof key === 'number') ctx[key] = style[key];
});
2019-09-24 16:34:08 +08:00
fill = (0, _toConsumableArray2["default"])(fill);
stroke = (0, _toConsumableArray2["default"])(stroke);
shadowColor = (0, _toConsumableArray2["default"])(shadowColor);
2019-09-03 11:07:45 +08:00
fill[3] *= opacity;
stroke[3] *= opacity;
shadowColor[3] *= opacity;
ctx.fillStyle = (0, lib.getColorFromRgbValue)(fill);
ctx.strokeStyle = (0, lib.getColorFromRgbValue)(stroke);
ctx.shadowColor = (0, lib.getColorFromRgbValue)(shadowColor);
var lineDash = style.lineDash,
shadowBlur = style.shadowBlur;
if (lineDash) {
lineDash = lineDash.map(function (v) {
return v >= 0 ? v : 0;
});
ctx.setLineDash(lineDash);
}
if (typeof shadowBlur === 'number') ctx.shadowBlur = shadowBlur > 0 ? shadowBlur : 0.001;
var fontStyle = style.fontStyle,
fontVarient = style.fontVarient,
fontWeight = style.fontWeight,
fontSize = style.fontSize,
fontFamily = style.fontFamily;
ctx.font = fontStyle + ' ' + fontVarient + ' ' + fontWeight + ' ' + fontSize + 'px' + ' ' + fontFamily;
}
2020-05-06 14:15:15 +08:00
/**
* @description Set the gradient color of canvas ctx
* @param {Object} ctx Context of canvas
* @param {Style} style Instance of Style
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function initGradient(ctx, style) {
if (!gradientValidator(style)) return;
var gradientColor = style.gradientColor,
gradientParams = style.gradientParams,
gradientType = style.gradientType,
gradientWith = style.gradientWith,
gradientStops = style.gradientStops,
opacity = style.opacity;
gradientColor = gradientColor.map(function (color) {
var colorOpacity = color[3] * opacity;
2019-09-24 16:34:08 +08:00
var clonedColor = (0, _toConsumableArray2["default"])(color);
2019-09-03 11:07:45 +08:00
clonedColor[3] = colorOpacity;
return clonedColor;
});
gradientColor = gradientColor.map(function (c) {
return (0, lib.getColorFromRgbValue)(c);
});
if (gradientStops === 'auto') gradientStops = getAutoColorStops(gradientColor);
2019-09-24 16:34:08 +08:00
var gradient = ctx["create".concat(gradientType.slice(0, 1).toUpperCase() + gradientType.slice(1), "Gradient")].apply(ctx, (0, _toConsumableArray2["default"])(gradientParams));
2019-09-03 11:07:45 +08:00
gradientStops.forEach(function (stop, i) {
return gradient.addColorStop(stop, gradientColor[i]);
});
ctx["".concat(gradientWith, "Style")] = gradient;
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the gradient configuration is legal
* @param {Style} style Instance of Style
* @return {Boolean} Check Result
2019-09-03 11:07:45 +08:00
*/
function gradientValidator(style) {
var gradientColor = style.gradientColor,
gradientParams = style.gradientParams,
gradientType = style.gradientType,
gradientWith = style.gradientWith,
gradientStops = style.gradientStops;
if (!gradientColor || !gradientParams) return false;
if (gradientColor.length === 1) {
console.warn('The gradient needs to provide at least two colors');
return false;
}
if (gradientType !== 'linear' && gradientType !== 'radial') {
console.warn('GradientType only supports linear or radial, current value is ' + gradientType);
return false;
}
var gradientParamsLength = gradientParams.length;
if (gradientType === 'linear' && gradientParamsLength !== 4 || gradientType === 'radial' && gradientParamsLength !== 6) {
console.warn('The expected length of gradientParams is ' + (gradientType === 'linear' ? '4' : '6'));
return false;
}
if (gradientWith !== 'fill' && gradientWith !== 'stroke') {
console.warn('GradientWith only supports fill or stroke, current value is ' + gradientWith);
return false;
}
if (gradientStops !== 'auto' && !(gradientStops instanceof Array)) {
console.warn("gradientStops only supports 'auto' or Number Array ([0, .5, 1]), current value is " + gradientStops);
return false;
}
return true;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get a uniform gradient color stop
* @param {Array} color Gradient color
* @return {Array} Gradient color stop
2019-09-03 11:07:45 +08:00
*/
function getAutoColorStops(color) {
var stopGap = 1 / (color.length - 1);
return color.map(function (foo, i) {
return stopGap * i;
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Restore canvas ctx transform
* @param {Object} ctx Context of canvas
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Style.prototype.restoreTransform = function (ctx) {
ctx.restore();
};
2020-05-06 14:15:15 +08:00
/**
* @description Update style data
* @param {Object} change Changed data
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Style.prototype.update = function (change) {
this.colorProcessor(change);
Object.assign(this, change);
};
2020-05-06 14:15:15 +08:00
/**
* @description Get the current style configuration
* @return {Object} Style configuration
2019-09-03 11:07:45 +08:00
*/
Style.prototype.getStyle = function () {
var clonedStyle = (0, util.deepClone)(this, true);
this.colorProcessor(clonedStyle, true);
return clonedStyle;
};
});
unwrapExports(style_class);
var curves = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.easeInOutBounce = exports.easeOutBounce = exports.easeInBounce = exports.easeInOutElastic = exports.easeOutElastic = exports.easeInElastic = exports.easeInOutBack = exports.easeOutBack = exports.easeInBack = exports.easeInOutQuint = exports.easeOutQuint = exports.easeInQuint = exports.easeInOutQuart = exports.easeOutQuart = exports.easeInQuart = exports.easeInOutCubic = exports.easeOutCubic = exports.easeInCubic = exports.easeInOutQuad = exports.easeOutQuad = exports.easeInQuad = exports.easeInOutSine = exports.easeOutSine = exports.easeInSine = exports.linear = void 0;
var linear = [[[0, 1], '', [0.33, 0.67]], [[1, 0], [0.67, 0.33]]];
2020-05-06 14:15:15 +08:00
/**
* @description Sine
2019-09-03 11:07:45 +08:00
*/
exports.linear = linear;
var easeInSine = [[[0, 1]], [[0.538, 0.564], [0.169, 0.912], [0.880, 0.196]], [[1, 0]]];
exports.easeInSine = easeInSine;
var easeOutSine = [[[0, 1]], [[0.444, 0.448], [0.169, 0.736], [0.718, 0.16]], [[1, 0]]];
exports.easeOutSine = easeOutSine;
var easeInOutSine = [[[0, 1]], [[0.5, 0.5], [0.2, 1], [0.8, 0]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Quad
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutSine = easeInOutSine;
var easeInQuad = [[[0, 1]], [[0.550, 0.584], [0.231, 0.904], [0.868, 0.264]], [[1, 0]]];
exports.easeInQuad = easeInQuad;
var easeOutQuad = [[[0, 1]], [[0.413, 0.428], [0.065, 0.816], [0.760, 0.04]], [[1, 0]]];
exports.easeOutQuad = easeOutQuad;
var easeInOutQuad = [[[0, 1]], [[0.5, 0.5], [0.3, 0.9], [0.7, 0.1]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Cubic
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutQuad = easeInOutQuad;
var easeInCubic = [[[0, 1]], [[0.679, 0.688], [0.366, 0.992], [0.992, 0.384]], [[1, 0]]];
exports.easeInCubic = easeInCubic;
var easeOutCubic = [[[0, 1]], [[0.321, 0.312], [0.008, 0.616], [0.634, 0.008]], [[1, 0]]];
exports.easeOutCubic = easeOutCubic;
var easeInOutCubic = [[[0, 1]], [[0.5, 0.5], [0.3, 1], [0.7, 0]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Quart
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutCubic = easeInOutCubic;
var easeInQuart = [[[0, 1]], [[0.812, 0.74], [0.611, 0.988], [1.013, 0.492]], [[1, 0]]];
exports.easeInQuart = easeInQuart;
var easeOutQuart = [[[0, 1]], [[0.152, 0.244], [0.001, 0.448], [0.285, -0.02]], [[1, 0]]];
exports.easeOutQuart = easeOutQuart;
var easeInOutQuart = [[[0, 1]], [[0.5, 0.5], [0.4, 1], [0.6, 0]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Quint
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutQuart = easeInOutQuart;
var easeInQuint = [[[0, 1]], [[0.857, 0.856], [0.714, 1], [1, 0.712]], [[1, 0]]];
exports.easeInQuint = easeInQuint;
var easeOutQuint = [[[0, 1]], [[0.108, 0.2], [0.001, 0.4], [0.214, -0.012]], [[1, 0]]];
exports.easeOutQuint = easeOutQuint;
var easeInOutQuint = [[[0, 1]], [[0.5, 0.5], [0.5, 1], [0.5, 0]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Back
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutQuint = easeInOutQuint;
var easeInBack = [[[0, 1]], [[0.667, 0.896], [0.380, 1.184], [0.955, 0.616]], [[1, 0]]];
exports.easeInBack = easeInBack;
var easeOutBack = [[[0, 1]], [[0.335, 0.028], [0.061, 0.22], [0.631, -0.18]], [[1, 0]]];
exports.easeOutBack = easeOutBack;
var easeInOutBack = [[[0, 1]], [[0.5, 0.5], [0.4, 1.4], [0.6, -0.4]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Elastic
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutBack = easeInOutBack;
var easeInElastic = [[[0, 1]], [[0.474, 0.964], [0.382, 0.988], [0.557, 0.952]], [[0.619, 1.076], [0.565, 1.088], [0.669, 1.08]], [[0.770, 0.916], [0.712, 0.924], [0.847, 0.904]], [[0.911, 1.304], [0.872, 1.316], [0.961, 1.34]], [[1, 0]]];
exports.easeInElastic = easeInElastic;
var easeOutElastic = [[[0, 1]], [[0.073, -0.32], [0.034, -0.328], [0.104, -0.344]], [[0.191, 0.092], [0.110, 0.06], [0.256, 0.08]], [[0.310, -0.076], [0.260, -0.068], [0.357, -0.076]], [[0.432, 0.032], [0.362, 0.028], [0.683, -0.004]], [[1, 0]]];
exports.easeOutElastic = easeOutElastic;
var easeInOutElastic = [[[0, 1]], [[0.210, 0.94], [0.167, 0.884], [0.252, 0.98]], [[0.299, 1.104], [0.256, 1.092], [0.347, 1.108]], [[0.5, 0.496], [0.451, 0.672], [0.548, 0.324]], [[0.696, -0.108], [0.652, -0.112], [0.741, -0.124]], [[0.805, 0.064], [0.756, 0.012], [0.866, 0.096]], [[1, 0]]];
2020-05-06 14:15:15 +08:00
/**
* @description Bounce
2019-09-03 11:07:45 +08:00
*/
exports.easeInOutElastic = easeInOutElastic;
var easeInBounce = [[[0, 1]], [[0.148, 1], [0.075, 0.868], [0.193, 0.848]], [[0.326, 1], [0.276, 0.836], [0.405, 0.712]], [[0.600, 1], [0.511, 0.708], [0.671, 0.348]], [[1, 0]]];
exports.easeInBounce = easeInBounce;
var easeOutBounce = [[[0, 1]], [[0.357, 0.004], [0.270, 0.592], [0.376, 0.252]], [[0.604, -0.004], [0.548, 0.312], [0.669, 0.184]], [[0.820, 0], [0.749, 0.184], [0.905, 0.132]], [[1, 0]]];
exports.easeOutBounce = easeOutBounce;
var easeInOutBounce = [[[0, 1]], [[0.102, 1], [0.050, 0.864], [0.117, 0.86]], [[0.216, 0.996], [0.208, 0.844], [0.227, 0.808]], [[0.347, 0.996], [0.343, 0.8], [0.480, 0.292]], [[0.635, 0.004], [0.511, 0.676], [0.656, 0.208]], [[0.787, 0], [0.760, 0.2], [0.795, 0.144]], [[0.905, -0.004], [0.899, 0.164], [0.944, 0.144]], [[1, 0]]];
exports.easeInOutBounce = easeInOutBounce;
var _default = new Map([['linear', linear], ['easeInSine', easeInSine], ['easeOutSine', easeOutSine], ['easeInOutSine', easeInOutSine], ['easeInQuad', easeInQuad], ['easeOutQuad', easeOutQuad], ['easeInOutQuad', easeInOutQuad], ['easeInCubic', easeInCubic], ['easeOutCubic', easeOutCubic], ['easeInOutCubic', easeInOutCubic], ['easeInQuart', easeInQuart], ['easeOutQuart', easeOutQuart], ['easeInOutQuart', easeInOutQuart], ['easeInQuint', easeInQuint], ['easeOutQuint', easeOutQuint], ['easeInOutQuint', easeInOutQuint], ['easeInBack', easeInBack], ['easeOutBack', easeOutBack], ['easeInOutBack', easeInOutBack], ['easeInElastic', easeInElastic], ['easeOutElastic', easeOutElastic], ['easeInOutElastic', easeInOutElastic], ['easeInBounce', easeInBounce], ['easeOutBounce', easeOutBounce], ['easeInOutBounce', easeInOutBounce]]);
exports["default"] = _default;
});
unwrapExports(curves);
var curves_1 = curves.easeInOutBounce;
var curves_2 = curves.easeOutBounce;
var curves_3 = curves.easeInBounce;
var curves_4 = curves.easeInOutElastic;
var curves_5 = curves.easeOutElastic;
var curves_6 = curves.easeInElastic;
var curves_7 = curves.easeInOutBack;
var curves_8 = curves.easeOutBack;
var curves_9 = curves.easeInBack;
var curves_10 = curves.easeInOutQuint;
var curves_11 = curves.easeOutQuint;
var curves_12 = curves.easeInQuint;
var curves_13 = curves.easeInOutQuart;
var curves_14 = curves.easeOutQuart;
var curves_15 = curves.easeInQuart;
var curves_16 = curves.easeInOutCubic;
var curves_17 = curves.easeOutCubic;
var curves_18 = curves.easeInCubic;
var curves_19 = curves.easeInOutQuad;
var curves_20 = curves.easeOutQuad;
var curves_21 = curves.easeInQuad;
var curves_22 = curves.easeInOutSine;
var curves_23 = curves.easeOutSine;
var curves_24 = curves.easeInSine;
var curves_25 = curves.linear;
var lib$2 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.transition = transition;
exports.injectNewCurve = injectNewCurve;
exports["default"] = void 0;
var _slicedToArray2 = interopRequireDefault(slicedToArray);
var _typeof2 = interopRequireDefault(_typeof_1);
var _curves = interopRequireDefault(curves);
var defaultTransitionBC = 'linear';
2020-05-06 14:15:15 +08:00
/**
* @description Get the N-frame animation state by the start and end state
* of the animation and the easing curve
* @param {String|Array} tBC Easing curve name or data
* @param {Number|Array|Object} startState Animation start state
* @param {Number|Array|Object} endState Animation end state
* @param {Number} frameNum Number of Animation frames
* @param {Boolean} deep Whether to use recursive mode
* @return {Array|Boolean} State of each frame of the animation (Invalid input will return false)
2019-09-03 11:07:45 +08:00
*/
function transition(tBC) {
var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
var deep = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
if (!checkParams.apply(void 0, arguments)) return false;
try {
// Get the transition bezier curve
var bezierCurve = getBezierCurve(tBC); // Get the progress of each frame state
var frameStateProgress = getFrameStateProgress(bezierCurve, frameNum); // If the recursion mode is not enabled or the state type is Number, the shallow state calculation is performed directly.
if (!deep || typeof endState === 'number') return getTransitionState(startState, endState, frameStateProgress);
return recursionTransitionState(startState, endState, frameStateProgress);
} catch (_unused) {
console.warn('Transition parameter may be abnormal!');
return [endState];
}
}
2020-05-06 14:15:15 +08:00
/**
* @description Check if the parameters are legal
* @param {String} tBC Name of transition bezier curve
* @param {Any} startState Transition start state
* @param {Any} endState Transition end state
* @param {Number} frameNum Number of transition frames
* @return {Boolean} Is the parameter legal
2019-09-03 11:07:45 +08:00
*/
function checkParams(tBC) {
var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
if (!tBC || startState === false || endState === false || !frameNum) {
console.error('transition: Missing Parameters!');
return false;
}
if ((0, _typeof2["default"])(startState) !== (0, _typeof2["default"])(endState)) {
console.error('transition: Inconsistent Status Types!');
return false;
}
var stateType = (0, _typeof2["default"])(endState);
if (stateType === 'string' || stateType === 'boolean' || !tBC.length) {
console.error('transition: Unsupported Data Type of State!');
return false;
}
if (!_curves["default"].has(tBC) && !(tBC instanceof Array)) {
console.warn('transition: Transition curve not found, default curve will be used!');
}
return true;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the transition bezier curve
* @param {String} tBC Name of transition bezier curve
* @return {Array} Bezier curve data
2019-09-03 11:07:45 +08:00
*/
function getBezierCurve(tBC) {
var bezierCurve = '';
if (_curves["default"].has(tBC)) {
bezierCurve = _curves["default"].get(tBC);
} else if (tBC instanceof Array) {
bezierCurve = tBC;
} else {
bezierCurve = _curves["default"].get(defaultTransitionBC);
}
return bezierCurve;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the progress of each frame state
* @param {Array} bezierCurve Transition bezier curve
* @param {Number} frameNum Number of transition frames
* @return {Array} Progress of each frame state
2019-09-03 11:07:45 +08:00
*/
function getFrameStateProgress(bezierCurve, frameNum) {
var tMinus = 1 / (frameNum - 1);
var tState = new Array(frameNum).fill(0).map(function (t, i) {
return i * tMinus;
});
var frameState = tState.map(function (t) {
return getFrameStateFromT(bezierCurve, t);
});
return frameState;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the progress of the corresponding frame according to t
* @param {Array} bezierCurve Transition bezier curve
* @param {Number} t Current frame t
* @return {Number} Progress of current frame
2019-09-03 11:07:45 +08:00
*/
function getFrameStateFromT(bezierCurve, t) {
var tBezierCurvePoint = getBezierCurvePointFromT(bezierCurve, t);
var bezierCurvePointT = getBezierCurvePointTFromReT(tBezierCurvePoint, t);
return getBezierCurveTState(tBezierCurvePoint, bezierCurvePointT);
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the corresponding sub-curve according to t
* @param {Array} bezierCurve Transition bezier curve
* @param {Number} t Current frame t
* @return {Array} Sub-curve of t
2019-09-03 11:07:45 +08:00
*/
function getBezierCurvePointFromT(bezierCurve, t) {
var lastIndex = bezierCurve.length - 1;
var begin = '',
end = '';
bezierCurve.findIndex(function (item, i) {
if (i === lastIndex) return;
begin = item;
end = bezierCurve[i + 1];
var currentMainPointX = begin[0][0];
var nextMainPointX = end[0][0];
return t >= currentMainPointX && t < nextMainPointX;
});
var p0 = begin[0];
var p1 = begin[2] || begin[0];
var p2 = end[1] || end[0];
var p3 = end[0];
return [p0, p1, p2, p3];
}
2020-05-06 14:15:15 +08:00
/**
* @description Get local t based on t and sub-curve
* @param {Array} bezierCurve Sub-curve
* @param {Number} t Current frame t
* @return {Number} local t of sub-curve
2019-09-03 11:07:45 +08:00
*/
function getBezierCurvePointTFromReT(bezierCurve, t) {
var reBeginX = bezierCurve[0][0];
var reEndX = bezierCurve[3][0];
var xMinus = reEndX - reBeginX;
var tMinus = t - reBeginX;
return tMinus / xMinus;
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the curve progress of t
* @param {Array} bezierCurve Sub-curve
* @param {Number} t Current frame t
* @return {Number} Progress of current frame
2019-09-03 11:07:45 +08:00
*/
function getBezierCurveTState(_ref, t) {
var _ref2 = (0, _slicedToArray2["default"])(_ref, 4),
_ref2$ = (0, _slicedToArray2["default"])(_ref2[0], 2),
p0 = _ref2$[1],
_ref2$2 = (0, _slicedToArray2["default"])(_ref2[1], 2),
p1 = _ref2$2[1],
_ref2$3 = (0, _slicedToArray2["default"])(_ref2[2], 2),
p2 = _ref2$3[1],
_ref2$4 = (0, _slicedToArray2["default"])(_ref2[3], 2),
p3 = _ref2$4[1];
var pow = Math.pow;
var tMinus = 1 - t;
var result1 = p0 * pow(tMinus, 3);
var result2 = 3 * p1 * t * pow(tMinus, 2);
var result3 = 3 * p2 * pow(t, 2) * tMinus;
var result4 = p3 * pow(t, 3);
return 1 - (result1 + result2 + result3 + result4);
}
2020-05-06 14:15:15 +08:00
/**
* @description Get transition state according to frame progress
* @param {Any} startState Transition start state
* @param {Any} endState Transition end state
* @param {Array} frameState Frame state progress
* @return {Array} Transition frame state
2019-09-03 11:07:45 +08:00
*/
function getTransitionState(begin, end, frameState) {
var stateType = 'object';
if (typeof begin === 'number') stateType = 'number';
if (begin instanceof Array) stateType = 'array';
if (stateType === 'number') return getNumberTransitionState(begin, end, frameState);
if (stateType === 'array') return getArrayTransitionState(begin, end, frameState);
if (stateType === 'object') return getObjectTransitionState(begin, end, frameState);
return frameState.map(function (t) {
return end;
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the transition data of the number type
* @param {Number} startState Transition start state
* @param {Number} endState Transition end state
* @param {Array} frameState Frame state progress
* @return {Array} Transition frame state
2019-09-03 11:07:45 +08:00
*/
function getNumberTransitionState(begin, end, frameState) {
var minus = end - begin;
return frameState.map(function (s) {
return begin + minus * s;
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the transition data of the array type
* @param {Array} startState Transition start state
* @param {Array} endState Transition end state
* @param {Array} frameState Frame state progress
* @return {Array} Transition frame state
2019-09-03 11:07:45 +08:00
*/
function getArrayTransitionState(begin, end, frameState) {
var minus = end.map(function (v, i) {
if (typeof v !== 'number') return false;
return v - begin[i];
});
return frameState.map(function (s) {
return minus.map(function (v, i) {
if (v === false) return end[i];
return begin[i] + v * s;
});
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the transition data of the object type
* @param {Object} startState Transition start state
* @param {Object} endState Transition end state
* @param {Array} frameState Frame state progress
* @return {Array} Transition frame state
2019-09-03 11:07:45 +08:00
*/
function getObjectTransitionState(begin, end, frameState) {
var keys = Object.keys(end);
var beginValue = keys.map(function (k) {
return begin[k];
});
var endValue = keys.map(function (k) {
return end[k];
});
var arrayState = getArrayTransitionState(beginValue, endValue, frameState);
return arrayState.map(function (item) {
var frameData = {};
item.forEach(function (v, i) {
return frameData[keys[i]] = v;
});
return frameData;
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Get the transition state data by recursion
* @param {Array|Object} startState Transition start state
* @param {Array|Object} endState Transition end state
* @param {Array} frameState Frame state progress
* @return {Array} Transition frame state
2019-09-03 11:07:45 +08:00
*/
function recursionTransitionState(begin, end, frameState) {
var state = getTransitionState(begin, end, frameState);
var _loop = function _loop(key) {
var bTemp = begin[key];
var eTemp = end[key];
if ((0, _typeof2["default"])(eTemp) !== 'object') return "continue";
var data = recursionTransitionState(bTemp, eTemp, frameState);
state.forEach(function (fs, i) {
return fs[key] = data[i];
});
};
for (var key in end) {
var _ret = _loop(key);
if (_ret === "continue") continue;
}
return state;
}
2020-05-06 14:15:15 +08:00
/**
* @description Inject new curve into curves as config
* @param {Any} key The key of curve
* @param {Array} curve Bezier curve data
* @return {Undefined} No return
2019-09-03 11:07:45 +08:00
*/
function injectNewCurve(key, curve) {
if (!key || !curve) {
console.error('InjectNewCurve Missing Parameters!');
return;
}
_curves["default"].set(key, curve);
}
var _default = transition;
exports["default"] = _default;
});
unwrapExports(lib$2);
var lib_1$1 = lib$2.transition;
var lib_2$1 = lib$2.injectNewCurve;
var graph_class = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _regenerator = interopRequireDefault(regenerator);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _asyncToGenerator2 = interopRequireDefault(asyncToGenerator);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _classCallCheck2 = interopRequireDefault(classCallCheck);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _style = interopRequireDefault(style_class);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _transition = interopRequireDefault(lib$2);
2019-09-03 11:07:45 +08:00
2020-05-06 14:15:15 +08:00
/**
* @description Class Graph
* @param {Object} graph Graph default configuration
* @param {Object} config Graph config
* @return {Graph} Instance of Graph
2019-09-03 11:07:45 +08:00
*/
var Graph = function Graph(graph, config) {
2019-09-24 16:34:08 +08:00
(0, _classCallCheck2["default"])(this, Graph);
2019-09-03 11:07:45 +08:00
config = (0, util.deepClone)(config, true);
var defaultConfig = {
2020-05-06 14:15:15 +08:00
/**
* @description Weather to render graph
* @type {Boolean}
* @default visible = true
2019-09-03 11:07:45 +08:00
*/
visible: true,
2020-05-06 14:15:15 +08:00
/**
* @description Whether to enable drag
* @type {Boolean}
* @default drag = false
2019-09-03 11:07:45 +08:00
*/
drag: false,
2020-05-06 14:15:15 +08:00
/**
* @description Whether to enable hover
* @type {Boolean}
* @default hover = false
2019-09-03 11:07:45 +08:00
*/
hover: false,
2020-05-06 14:15:15 +08:00
/**
* @description Graph rendering index
* Give priority to index high graph in rendering
* @type {Number}
* @example index = 1
2019-09-03 11:07:45 +08:00
*/
index: 1,
2020-05-06 14:15:15 +08:00
/**
* @description Animation delay time(ms)
* @type {Number}
* @default animationDelay = 0
2019-09-03 11:07:45 +08:00
*/
animationDelay: 0,
2020-05-06 14:15:15 +08:00
/**
* @description Number of animation frames
* @type {Number}
* @default animationFrame = 30
2019-09-03 11:07:45 +08:00
*/
animationFrame: 30,
2020-05-06 14:15:15 +08:00
/**
* @description Animation dynamic curve (Supported by transition)
* @type {String}
* @default animationCurve = 'linear'
* @link https://github.com/jiaming743/Transition
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'linear',
2020-05-06 14:15:15 +08:00
/**
* @description Weather to pause graph animation
* @type {Boolean}
* @default animationPause = false
2019-09-03 11:07:45 +08:00
*/
animationPause: false,
2020-05-06 14:15:15 +08:00
/**
* @description Rectangular hover detection zone
* Use this method for hover detection first
* @type {Null|Array}
* @default hoverRect = null
* @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
2019-09-03 11:07:45 +08:00
*/
hoverRect: null,
2020-05-06 14:15:15 +08:00
/**
* @description Mouse enter event handler
* @type {Function|Null}
* @default mouseEnter = null
2019-09-03 11:07:45 +08:00
*/
mouseEnter: null,
2020-05-06 14:15:15 +08:00
/**
* @description Mouse outer event handler
* @type {Function|Null}
* @default mouseOuter = null
2019-09-03 11:07:45 +08:00
*/
mouseOuter: null,
2020-05-06 14:15:15 +08:00
/**
* @description Mouse click event handler
* @type {Function|Null}
* @default click = null
2019-09-03 11:07:45 +08:00
*/
click: null
};
var configAbleNot = {
status: 'static',
animationRoot: [],
animationKeys: [],
animationFrameState: [],
cache: {}
};
if (!config.shape) config.shape = {};
if (!config.style) config.style = {};
var shape = Object.assign({}, graph.shape, config.shape);
Object.assign(defaultConfig, config, configAbleNot);
Object.assign(this, graph, defaultConfig);
this.shape = shape;
this.style = new _style["default"](config.style);
this.addedProcessor();
};
2020-05-06 14:15:15 +08:00
/**
* @description Processor of added
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
exports["default"] = Graph;
Graph.prototype.addedProcessor = function () {
if (typeof this.setGraphCenter === 'function') this.setGraphCenter(null, this); // The life cycle 'added"
if (typeof this.added === 'function') this.added(this);
};
2020-05-06 14:15:15 +08:00
/**
* @description Processor of draw
* @param {CRender} render Instance of CRender
* @param {Graph} graph Instance of Graph
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.drawProcessor = function (render, graph) {
var ctx = render.ctx;
graph.style.initStyle(ctx);
if (typeof this.beforeDraw === 'function') this.beforeDraw(this, render);
graph.draw(render, graph);
if (typeof this.drawed === 'function') this.drawed(this, render);
graph.style.restoreTransform(ctx);
};
2020-05-06 14:15:15 +08:00
/**
* @description Processor of hover check
* @param {Array} position Mouse Position
* @param {Graph} graph Instance of Graph
* @return {Boolean} Result of hover check
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.hoverCheckProcessor = function (position, _ref) {
var hoverRect = _ref.hoverRect,
style = _ref.style,
hoverCheck = _ref.hoverCheck;
var graphCenter = style.graphCenter,
rotate = style.rotate,
scale = style.scale,
translate = style.translate;
if (graphCenter) {
if (rotate) position = (0, util.getRotatePointPos)(-rotate, position, graphCenter);
if (scale) position = (0, util.getScalePointPos)(scale.map(function (s) {
return 1 / s;
}), position, graphCenter);
if (translate) position = (0, util.getTranslatePointPos)(translate.map(function (v) {
return v * -1;
}), position);
}
2019-09-24 16:34:08 +08:00
if (hoverRect) return util.checkPointIsInRect.apply(void 0, [position].concat((0, _toConsumableArray2["default"])(hoverRect)));
2019-09-03 11:07:45 +08:00
return hoverCheck(position, this);
};
2020-05-06 14:15:15 +08:00
/**
* @description Processor of move
* @param {Event} e Mouse movement event
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.moveProcessor = function (e) {
this.move(e, this);
if (typeof this.beforeMove === 'function') this.beforeMove(e, this);
if (typeof this.setGraphCenter === 'function') this.setGraphCenter(e, this);
if (typeof this.moved === 'function') this.moved(e, this);
};
2020-05-06 14:15:15 +08:00
/**
* @description Update graph state
* @param {String} attrName Updated attribute name
* @param {Any} change Updated value
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.attr = function (attrName) {
var change = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
if (!attrName || change === undefined) return false;
2019-09-24 16:34:08 +08:00
var isObject = (0, _typeof2["default"])(this[attrName]) === 'object';
2019-09-03 11:07:45 +08:00
if (isObject) change = (0, util.deepClone)(change, true);
var render = this.render;
if (attrName === 'style') {
this.style.update(change);
} else if (isObject) {
Object.assign(this[attrName], change);
} else {
this[attrName] = change;
}
if (attrName === 'index') render.sortGraphsByIndex();
render.drawAllGraph();
};
2020-05-06 14:15:15 +08:00
/**
* @description Update graphics state (with animation)
* Only shape and style attributes are supported
* @param {String} attrName Updated attribute name
* @param {Any} change Updated value
* @param {Boolean} wait Whether to store the animation waiting
* for the next animation request
* @return {Promise} Animation Promise
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.animation =
/*#__PURE__*/
function () {
2019-09-24 16:34:08 +08:00
var _ref2 = (0, _asyncToGenerator2["default"])(
2019-09-03 11:07:45 +08:00
/*#__PURE__*/
2019-09-24 16:34:08 +08:00
_regenerator["default"].mark(function _callee2(attrName, change) {
2019-09-03 11:07:45 +08:00
var wait,
changeRoot,
changeKeys,
beforeState,
animationFrame,
animationCurve,
animationDelay,
animationFrameState,
render,
_args2 = arguments;
2019-09-24 16:34:08 +08:00
return _regenerator["default"].wrap(function _callee2$(_context2) {
2019-09-03 11:07:45 +08:00
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
wait = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : false;
if (!(attrName !== 'shape' && attrName !== 'style')) {
_context2.next = 4;
break;
}
console.error('Only supported shape and style animation!');
return _context2.abrupt("return");
case 4:
change = (0, util.deepClone)(change, true);
if (attrName === 'style') this.style.colorProcessor(change);
changeRoot = this[attrName];
changeKeys = Object.keys(change);
beforeState = {};
changeKeys.forEach(function (key) {
return beforeState[key] = changeRoot[key];
});
animationFrame = this.animationFrame, animationCurve = this.animationCurve, animationDelay = this.animationDelay;
animationFrameState = (0, _transition["default"])(animationCurve, beforeState, change, animationFrame, true);
this.animationRoot.push(changeRoot);
this.animationKeys.push(changeKeys);
this.animationFrameState.push(animationFrameState);
if (!wait) {
_context2.next = 17;
break;
}
return _context2.abrupt("return");
case 17:
if (!(animationDelay > 0)) {
_context2.next = 20;
break;
}
_context2.next = 20;
return delay(animationDelay);
case 20:
render = this.render;
return _context2.abrupt("return", new Promise(
/*#__PURE__*/
function () {
2019-09-24 16:34:08 +08:00
var _ref3 = (0, _asyncToGenerator2["default"])(
2019-09-03 11:07:45 +08:00
/*#__PURE__*/
2019-09-24 16:34:08 +08:00
_regenerator["default"].mark(function _callee(resolve) {
return _regenerator["default"].wrap(function _callee$(_context) {
2019-09-03 11:07:45 +08:00
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return render.launchAnimation();
case 2:
resolve();
case 3:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x3) {
return _ref3.apply(this, arguments);
};
}()));
case 22:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
2020-05-06 14:15:15 +08:00
/**
* @description Extract the next frame of data from the animation queue
* and update the graph state
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.turnNextAnimationFrame = function (timeStamp) {
var animationDelay = this.animationDelay,
animationRoot = this.animationRoot,
animationKeys = this.animationKeys,
animationFrameState = this.animationFrameState,
animationPause = this.animationPause;
if (animationPause) return;
if (Date.now() - timeStamp < animationDelay) return;
animationRoot.forEach(function (root, i) {
animationKeys[i].forEach(function (key) {
root[key] = animationFrameState[i][0][key];
});
});
animationFrameState.forEach(function (stateItem, i) {
stateItem.shift();
var noFrame = stateItem.length === 0;
if (noFrame) animationRoot[i] = null;
if (noFrame) animationKeys[i] = null;
});
this.animationFrameState = animationFrameState.filter(function (state) {
return state.length;
});
this.animationRoot = animationRoot.filter(function (root) {
return root;
});
this.animationKeys = animationKeys.filter(function (keys) {
return keys;
});
};
2020-05-06 14:15:15 +08:00
/**
* @description Skip to the last frame of animation
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.animationEnd = function () {
var animationFrameState = this.animationFrameState,
animationKeys = this.animationKeys,
animationRoot = this.animationRoot,
render = this.render;
animationRoot.forEach(function (root, i) {
var currentKeys = animationKeys[i];
var lastState = animationFrameState[i].pop();
currentKeys.forEach(function (key) {
return root[key] = lastState[key];
});
});
this.animationFrameState = [];
this.animationKeys = [];
this.animationRoot = [];
return render.drawAllGraph();
};
2020-05-06 14:15:15 +08:00
/**
* @description Pause animation behavior
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.pauseAnimation = function () {
this.attr('animationPause', true);
};
2020-05-06 14:15:15 +08:00
/**
* @description Try animation behavior
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.playAnimation = function () {
var render = this.render;
this.attr('animationPause', false);
return new Promise(
/*#__PURE__*/
function () {
2019-09-24 16:34:08 +08:00
var _ref4 = (0, _asyncToGenerator2["default"])(
2019-09-03 11:07:45 +08:00
/*#__PURE__*/
2019-09-24 16:34:08 +08:00
_regenerator["default"].mark(function _callee3(resolve) {
return _regenerator["default"].wrap(function _callee3$(_context3) {
2019-09-03 11:07:45 +08:00
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return render.launchAnimation();
case 2:
resolve();
case 3:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return function (_x4) {
return _ref4.apply(this, arguments);
};
}());
};
2020-05-06 14:15:15 +08:00
/**
* @description Processor of delete
* @param {CRender} render Instance of CRender
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
Graph.prototype.delProcessor = function (render) {
var _this = this;
var graphs = render.graphs;
var index = graphs.findIndex(function (graph) {
return graph === _this;
});
if (index === -1) return;
if (typeof this.beforeDelete === 'function') this.beforeDelete(this);
graphs.splice(index, 1, null);
if (typeof this.deleted === 'function') this.deleted(this);
};
2020-05-06 14:15:15 +08:00
/**
* @description Return a timed release Promise
* @param {Number} time Release time
* @return {Promise} A timed release Promise
2019-09-03 11:07:45 +08:00
*/
function delay(time) {
return new Promise(function (resolve) {
setTimeout(resolve, time);
});
}
});
unwrapExports(graph_class);
var crender_class = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _classCallCheck2 = interopRequireDefault(classCallCheck);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _color = interopRequireDefault(lib);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _bezierCurve = interopRequireDefault(lib$1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _graphs = interopRequireDefault(graphs_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _graph = interopRequireDefault(graph_class);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
2020-05-06 14:15:15 +08:00
/**
* @description Class of CRender
* @param {Object} canvas Canvas DOM
* @return {CRender} Instance of CRender
2019-09-03 11:07:45 +08:00
*/
var CRender = function CRender(canvas) {
2019-09-24 16:34:08 +08:00
(0, _classCallCheck2["default"])(this, CRender);
2019-09-03 11:07:45 +08:00
if (!canvas) {
console.error('CRender Missing parameters!');
return;
}
var ctx = canvas.getContext('2d');
var clientWidth = canvas.clientWidth,
clientHeight = canvas.clientHeight;
var area = [clientWidth, clientHeight];
canvas.setAttribute('width', clientWidth);
canvas.setAttribute('height', clientHeight);
2020-05-06 14:15:15 +08:00
/**
* @description Context of the canvas
* @type {Object}
* @example ctx = canvas.getContext('2d')
2019-09-03 11:07:45 +08:00
*/
this.ctx = ctx;
2020-05-06 14:15:15 +08:00
/**
* @description Width and height of the canvas
* @type {Array}
* @example area = [300100]
2019-09-03 11:07:45 +08:00
*/
this.area = area;
2020-05-06 14:15:15 +08:00
/**
* @description Whether render is in animation rendering
* @type {Boolean}
* @example animationStatus = true|false
2019-09-03 11:07:45 +08:00
*/
this.animationStatus = false;
2020-05-06 14:15:15 +08:00
/**
* @description Added graph
* @type {[Graph]}
* @example graphs = [Graph, Graph, ...]
2019-09-03 11:07:45 +08:00
*/
this.graphs = [];
2020-05-06 14:15:15 +08:00
/**
* @description Color plugin
* @type {Object}
* @link https://github.com/jiaming743/color
2019-09-03 11:07:45 +08:00
*/
this.color = _color["default"];
2020-05-06 14:15:15 +08:00
/**
* @description Bezier Curve plugin
* @type {Object}
* @link https://github.com/jiaming743/BezierCurve
2019-09-03 11:07:45 +08:00
*/
this.bezierCurve = _bezierCurve["default"]; // bind event handler
canvas.addEventListener('mousedown', mouseDown.bind(this));
canvas.addEventListener('mousemove', mouseMove.bind(this));
canvas.addEventListener('mouseup', mouseUp.bind(this));
};
2020-05-06 14:15:15 +08:00
/**
* @description Clear canvas drawing area
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
exports["default"] = CRender;
CRender.prototype.clearArea = function () {
var _this$ctx;
var area = this.area;
2019-09-24 16:34:08 +08:00
(_this$ctx = this.ctx).clearRect.apply(_this$ctx, [0, 0].concat((0, _toConsumableArray2["default"])(area)));
2019-09-03 11:07:45 +08:00
};
2020-05-06 14:15:15 +08:00
/**
* @description Add graph to render
* @param {Object} config Graph configuration
* @return {Graph} Graph instance
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.add = function () {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var name = config.name;
if (!name) {
console.error('add Missing parameters!');
return;
}
var graphConfig = _graphs["default"].get(name);
if (!graphConfig) {
console.warn('No corresponding graph configuration found!');
return;
}
var graph = new _graph["default"](graphConfig, config);
if (!graph.validator(graph)) return;
graph.render = this;
this.graphs.push(graph);
this.sortGraphsByIndex();
this.drawAllGraph();
return graph;
};
2020-05-06 14:15:15 +08:00
/**
* @description Sort the graph by index
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.sortGraphsByIndex = function () {
var graphs = this.graphs;
graphs.sort(function (a, b) {
if (a.index > b.index) return 1;
if (a.index === b.index) return 0;
if (a.index < b.index) return -1;
});
};
2020-05-06 14:15:15 +08:00
/**
* @description Delete graph in render
* @param {Graph} graph The graph to be deleted
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.delGraph = function (graph) {
if (typeof graph.delProcessor !== 'function') return;
graph.delProcessor(this);
this.graphs = this.graphs.filter(function (graph) {
return graph;
});
this.drawAllGraph();
};
2020-05-06 14:15:15 +08:00
/**
* @description Delete all graph in render
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.delAllGraph = function () {
var _this = this;
this.graphs.forEach(function (graph) {
return graph.delProcessor(_this);
});
this.graphs = this.graphs.filter(function (graph) {
return graph;
});
this.drawAllGraph();
};
2020-05-06 14:15:15 +08:00
/**
* @description Draw all the graphs in the render
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.drawAllGraph = function () {
var _this2 = this;
this.clearArea();
this.graphs.filter(function (graph) {
return graph && graph.visible;
}).forEach(function (graph) {
return graph.drawProcessor(_this2, graph);
});
};
2020-05-06 14:15:15 +08:00
/**
* @description Animate the graph whose animation queue is not empty
* and the animationPause is equal to false
* @return {Promise} Animation Promise
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.launchAnimation = function () {
var _this3 = this;
var animationStatus = this.animationStatus;
if (animationStatus) return;
this.animationStatus = true;
return new Promise(function (resolve) {
animation.call(_this3, function () {
_this3.animationStatus = false;
resolve();
}, Date.now());
});
};
2020-05-06 14:15:15 +08:00
/**
* @description Try to animate every graph
* @param {Function} callback Callback in animation end
* @param {Number} timeStamp Time stamp of animation start
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function animation(callback, timeStamp) {
var graphs = this.graphs;
if (!animationAble(graphs)) {
callback();
return;
}
graphs.forEach(function (graph) {
return graph.turnNextAnimationFrame(timeStamp);
});
this.drawAllGraph();
requestAnimationFrame(animation.bind(this, callback, timeStamp));
}
2020-05-06 14:15:15 +08:00
/**
* @description Find if there are graph that can be animated
* @param {[Graph]} graphs
* @return {Boolean}
2019-09-03 11:07:45 +08:00
*/
function animationAble(graphs) {
return graphs.find(function (graph) {
return !graph.animationPause && graph.animationFrameState.length;
});
}
2020-05-06 14:15:15 +08:00
/**
* @description Handler of CRender mousedown event
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function mouseDown(e) {
var graphs = this.graphs;
var hoverGraph = graphs.find(function (graph) {
return graph.status === 'hover';
});
if (!hoverGraph) return;
hoverGraph.status = 'active';
}
2020-05-06 14:15:15 +08:00
/**
* @description Handler of CRender mousemove event
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function mouseMove(e) {
var offsetX = e.offsetX,
offsetY = e.offsetY;
var position = [offsetX, offsetY];
var graphs = this.graphs;
var activeGraph = graphs.find(function (graph) {
return graph.status === 'active' || graph.status === 'drag';
});
if (activeGraph) {
if (!activeGraph.drag) return;
if (typeof activeGraph.move !== 'function') {
console.error('No move method is provided, cannot be dragged!');
return;
}
activeGraph.moveProcessor(e);
activeGraph.status = 'drag';
return;
}
var hoverGraph = graphs.find(function (graph) {
return graph.status === 'hover';
});
var hoverAbleGraphs = graphs.filter(function (graph) {
return graph.hover && (typeof graph.hoverCheck === 'function' || graph.hoverRect);
});
var hoveredGraph = hoverAbleGraphs.find(function (graph) {
return graph.hoverCheckProcessor(position, graph);
});
if (hoveredGraph) {
document.body.style.cursor = hoveredGraph.style.hoverCursor;
} else {
document.body.style.cursor = 'default';
}
var hoverGraphMouseOuterIsFun = false,
hoveredGraphMouseEnterIsFun = false;
if (hoverGraph) hoverGraphMouseOuterIsFun = typeof hoverGraph.mouseOuter === 'function';
if (hoveredGraph) hoveredGraphMouseEnterIsFun = typeof hoveredGraph.mouseEnter === 'function';
if (!hoveredGraph && !hoverGraph) return;
if (!hoveredGraph && hoverGraph) {
if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph);
hoverGraph.status = 'static';
return;
}
if (hoveredGraph && hoveredGraph === hoverGraph) return;
if (hoveredGraph && !hoverGraph) {
if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph);
hoveredGraph.status = 'hover';
return;
}
if (hoveredGraph && hoverGraph && hoveredGraph !== hoverGraph) {
if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph);
hoverGraph.status = 'static';
if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph);
hoveredGraph.status = 'hover';
}
}
2020-05-06 14:15:15 +08:00
/**
* @description Handler of CRender mouseup event
* @return {Undefined} Void
2019-09-03 11:07:45 +08:00
*/
function mouseUp(e) {
var graphs = this.graphs;
var activeGraph = graphs.find(function (graph) {
return graph.status === 'active';
});
var dragGraph = graphs.find(function (graph) {
return graph.status === 'drag';
});
if (activeGraph && typeof activeGraph.click === 'function') activeGraph.click(e, activeGraph);
graphs.forEach(function (graph) {
return graph && (graph.status = 'static');
});
if (activeGraph) activeGraph.status = 'hover';
if (dragGraph) dragGraph.status = 'hover';
}
2020-05-06 14:15:15 +08:00
/**
* @description Clone Graph
* @param {Graph} graph The target to be cloned
* @return {Graph} Cloned graph
2019-09-03 11:07:45 +08:00
*/
CRender.prototype.clone = function (graph) {
var style = graph.style.getStyle();
var clonedGraph = _objectSpread({}, graph, {
style: style
});
delete clonedGraph.render;
clonedGraph = (0, util.deepClone)(clonedGraph, true);
return this.add(clonedGraph);
};
});
unwrapExports(crender_class);
var lib$3 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
2019-09-24 16:34:08 +08:00
Object.defineProperty(exports, "CRender", {
2019-09-03 11:07:45 +08:00
enumerable: true,
get: function get() {
2019-09-24 16:34:08 +08:00
return _crender["default"];
2019-09-03 11:07:45 +08:00
}
});
2019-09-24 16:34:08 +08:00
Object.defineProperty(exports, "extendNewGraph", {
2019-09-03 11:07:45 +08:00
enumerable: true,
get: function get() {
2019-09-24 16:34:08 +08:00
return graphs_1.extendNewGraph;
2019-09-03 11:07:45 +08:00
}
});
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _crender = interopRequireDefault(crender_class);
2019-09-03 11:07:45 +08:00
var _default = _crender["default"];
exports["default"] = _default;
});
var CRender = unwrapExports(lib$3);
2020-05-06 13:20:20 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2020-05-06 13:20:20 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
var pie = {
shape: {
rx: 0,
ry: 0,
ir: 0,
or: 0,
startAngle: 0,
endAngle: 0,
clockWise: true
},
validator: function validator(_ref) {
var shape = _ref.shape;
var keys = ['rx', 'ry', 'ir', 'or', 'startAngle', 'endAngle'];
if (keys.find(function (key) {
return typeof shape[key] !== 'number';
})) {
console.error('Pie shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref2, _ref3) {
var ctx = _ref2.ctx;
var shape = _ref3.shape;
ctx.beginPath();
var rx = shape.rx,
ry = shape.ry,
ir = shape.ir,
or = shape.or,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
clockWise = shape.clockWise;
rx = parseInt(rx) + 0.5;
ry = parseInt(ry) + 0.5;
ctx.arc(rx, ry, ir > 0 ? ir : 0, startAngle, endAngle, !clockWise);
var connectPoint1 = (0, util.getCircleRadianPoint)(rx, ry, or, endAngle).map(function (p) {
return parseInt(p) + 0.5;
});
var connectPoint2 = (0, util.getCircleRadianPoint)(rx, ry, ir, startAngle).map(function (p) {
return parseInt(p) + 0.5;
});
2019-09-24 16:34:08 +08:00
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint1));
2019-09-03 11:07:45 +08:00
ctx.arc(rx, ry, or > 0 ? or : 0, endAngle, startAngle, clockWise);
2019-09-24 16:34:08 +08:00
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(connectPoint2));
2019-09-03 11:07:45 +08:00
ctx.closePath();
ctx.stroke();
ctx.fill();
}
};
var agArc = {
shape: {
rx: 0,
ry: 0,
r: 0,
startAngle: 0,
endAngle: 0,
gradientStartAngle: null,
gradientEndAngle: null
},
validator: function validator(_ref4) {
var shape = _ref4.shape;
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
if (keys.find(function (key) {
return typeof shape[key] !== 'number';
})) {
console.error('AgArc shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref5, _ref6) {
var ctx = _ref5.ctx;
var shape = _ref6.shape,
style = _ref6.style;
var gradient = style.gradient;
gradient = gradient.map(function (cv) {
return (0, lib.getColorFromRgbValue)(cv);
});
if (gradient.length === 1) {
gradient = [gradient[0], gradient[0]];
}
var gradientArcNum = gradient.length - 1;
var gradientStartAngle = shape.gradientStartAngle,
gradientEndAngle = shape.gradientEndAngle,
startAngle = shape.startAngle,
endAngle = shape.endAngle,
r = shape.r,
rx = shape.rx,
ry = shape.ry;
if (gradientStartAngle === null) gradientStartAngle = startAngle;
if (gradientEndAngle === null) gradientEndAngle = endAngle;
var angleGap = (gradientEndAngle - gradientStartAngle) / gradientArcNum;
if (angleGap === Math.PI * 2) angleGap = Math.PI * 2 - 0.001;
for (var i = 0; i < gradientArcNum; i++) {
ctx.beginPath();
var startPoint = (0, util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * i);
var endPoint = (0, util.getCircleRadianPoint)(rx, ry, r, startAngle + angleGap * (i + 1));
var color = (0, util$1.getLinearGradientColor)(ctx, startPoint, endPoint, [gradient[i], gradient[i + 1]]);
var arcStartAngle = startAngle + angleGap * i;
var arcEndAngle = startAngle + angleGap * (i + 1);
var doBreak = false;
if (arcEndAngle > endAngle) {
arcEndAngle = endAngle;
doBreak = true;
}
ctx.arc(rx, ry, r, arcStartAngle, arcEndAngle);
ctx.strokeStyle = color;
ctx.stroke();
if (doBreak) break;
}
}
};
var numberText = {
shape: {
number: [],
content: '',
position: [0, 0],
toFixed: 0
},
validator: function validator(_ref7) {
var shape = _ref7.shape;
var number = shape.number,
content = shape.content,
position = shape.position;
if (!(number instanceof Array) || typeof content !== 'string' || !(position instanceof Array)) {
console.error('NumberText shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref8, _ref9) {
var ctx = _ref8.ctx;
var shape = _ref9.shape;
var number = shape.number,
content = shape.content,
2020-05-06 13:20:20 +08:00
toFixed = shape.toFixed,
rowGap = shape.rowGap;
2019-09-03 11:07:45 +08:00
var textSegments = content.split('{nt}');
var lastSegmentIndex = textSegments.length - 1;
var textString = '';
textSegments.forEach(function (t, i) {
var currentNumber = number[i];
if (i === lastSegmentIndex) currentNumber = '';
if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
textString += t + (currentNumber || '');
});
2020-05-06 13:20:20 +08:00
graphs_1.text.draw({
ctx: ctx
}, {
shape: _objectSpread({}, shape, {
content: textString,
rowGap: rowGap || 0
})
});
2019-09-03 11:07:45 +08:00
}
};
var lineIcon = {
shape: {
x: 0,
y: 0,
w: 0,
h: 0
},
validator: function validator(_ref10) {
var shape = _ref10.shape;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
console.error('lineIcon shape configuration is abnormal!');
return false;
}
return true;
},
draw: function draw(_ref11, _ref12) {
var ctx = _ref11.ctx;
var shape = _ref12.shape;
ctx.beginPath();
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
var halfH = h / 2;
ctx.strokeStyle = ctx.fillStyle;
ctx.moveTo(x, y + halfH);
ctx.lineTo(x + w, y + halfH);
ctx.lineWidth = 1;
ctx.stroke();
ctx.beginPath();
var radius = halfH - 5 * 2;
if (radius <= 0) radius = 3;
ctx.arc(x + w / 2, y + halfH, radius, 0, Math.PI * 2);
ctx.lineWidth = 5;
ctx.stroke();
ctx.fillStyle = '#fff';
ctx.fill();
},
hoverCheck: function hoverCheck(position, _ref13) {
var shape = _ref13.shape;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
return (0, util.checkPointIsInRect)(position, x, y, w, h);
},
setGraphCenter: function setGraphCenter(e, _ref14) {
var shape = _ref14.shape,
style = _ref14.style;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
style.graphCenter = [x + w / 2, y + h / 2];
}
};
(0, lib$3.extendNewGraph)('pie', pie);
(0, lib$3.extendNewGraph)('agArc', agArc);
(0, lib$3.extendNewGraph)('numberText', numberText);
(0, lib$3.extendNewGraph)('lineIcon', lineIcon);
var color = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.colorConfig = void 0;
var colorConfig = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff'];
exports.colorConfig = colorConfig;
});
unwrapExports(color);
var color_1 = color.colorConfig;
var grid = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.gridConfig = void 0;
var gridConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Grid left margin
* @type {String|Number}
* @default left = '10%'
* @example left = '10%' | 10
2019-09-03 11:07:45 +08:00
*/
left: '10%',
2019-10-24 10:28:43 +08:00
/**
* @description Grid right margin
* @type {String|Number}
* @default right = '10%'
* @example right = '10%' | 10
2019-09-03 11:07:45 +08:00
*/
right: '10%',
2019-10-24 10:28:43 +08:00
/**
* @description Grid top margin
* @type {String|Number}
* @default top = 60
* @example top = '10%' | 60
2019-09-03 11:07:45 +08:00
*/
top: 60,
2019-10-24 10:28:43 +08:00
/**
* @description Grid bottom margin
* @type {String|Number}
* @default bottom = 60
* @example bottom = '10%' | 60
2019-09-03 11:07:45 +08:00
*/
bottom: 60,
2019-10-24 10:28:43 +08:00
/**
* @description Grid default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: 'rgba(0, 0, 0, 0)'
},
2019-10-24 10:28:43 +08:00
/**
* @description Grid render level
* Priority rendering high level
* @type {Number}
* @default rLevel = -30
2019-09-03 11:07:45 +08:00
*/
rLevel: -30,
2019-10-24 10:28:43 +08:00
/**
* @description Grid animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Grid animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 30
};
exports.gridConfig = gridConfig;
});
unwrapExports(grid);
var grid_1 = grid.gridConfig;
var axis = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.yAxisConfig = exports.xAxisConfig = void 0;
var xAxisConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Axis name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this axis
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis position
* @type {String}
* @default position = 'bottom'
* @example position = 'bottom' | 'top'
2019-09-03 11:07:45 +08:00
*/
position: 'bottom',
2019-10-24 10:28:43 +08:00
/**
* @description Name gap
* @type {Number}
* @default nameGap = 15
2019-09-03 11:07:45 +08:00
*/
nameGap: 15,
2019-10-24 10:28:43 +08:00
/**
* @description Name location
* @type {String}
* @default nameLocation = 'end'
* @example nameLocation = 'end' | 'center' | 'start'
2019-09-03 11:07:45 +08:00
*/
nameLocation: 'end',
2019-10-24 10:28:43 +08:00
/**
* @description Name default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
nameTextStyle: {
fill: '#333',
fontSize: 10
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis min value
* @type {String|Number}
* @default min = '20%'
* @example min = '20%' | 0
2019-09-03 11:07:45 +08:00
*/
min: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Axis max value
* @type {String|Number}
* @default max = '20%'
* @example max = '20%' | 0
2019-09-03 11:07:45 +08:00
*/
max: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Axis value interval
* @type {Number}
* @default interval = null
* @example interval = 100
2019-09-03 11:07:45 +08:00
*/
interval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Min interval
* @type {Number}
* @default minInterval = null
* @example minInterval = 1
2019-09-03 11:07:45 +08:00
*/
minInterval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Max interval
* @type {Number}
* @default maxInterval = null
* @example maxInterval = 100
2019-09-03 11:07:45 +08:00
*/
maxInterval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Boundary gap
* @type {Boolean}
* @default boundaryGap = null
* @example boundaryGap = true
2019-09-03 11:07:45 +08:00
*/
boundaryGap: null,
2019-10-24 10:28:43 +08:00
/**
* @description Axis split number
* @type {Number}
* @default splitNumber = 5
2019-09-03 11:07:45 +08:00
*/
splitNumber: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Axis line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis line
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#333',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisTick: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis tick
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#333',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis label
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}件'
* @example formatter = (dataItem) => (dataItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#333',
fontSize: 10,
rotate: 0
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis split line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
splitLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis split line
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Axis split line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#d4d4d4',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description X axis render level
* Priority rendering high level
* @type {Number}
* @default rLevel = -20
2019-09-03 11:07:45 +08:00
*/
rLevel: -20,
2019-10-24 10:28:43 +08:00
/**
* @description X axis animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description X axis animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.xAxisConfig = xAxisConfig;
var yAxisConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Axis name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this axis
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis position
* @type {String}
* @default position = 'left'
* @example position = 'left' | 'right'
2019-09-03 11:07:45 +08:00
*/
position: 'left',
2019-10-24 10:28:43 +08:00
/**
* @description Name gap
* @type {Number}
* @default nameGap = 15
2019-09-03 11:07:45 +08:00
*/
nameGap: 15,
2019-10-24 10:28:43 +08:00
/**
* @description Name location
* @type {String}
* @default nameLocation = 'end'
* @example nameLocation = 'end' | 'center' | 'start'
2019-09-03 11:07:45 +08:00
*/
nameLocation: 'end',
2019-10-24 10:28:43 +08:00
/**
* @description name default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
nameTextStyle: {
fill: '#333',
fontSize: 10
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis min value
* @type {String|Number}
* @default min = '20%'
* @example min = '20%' | 0
2019-09-03 11:07:45 +08:00
*/
min: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Axis max value
* @type {String|Number}
* @default max = '20%'
* @example max = '20%' | 0
2019-09-03 11:07:45 +08:00
*/
max: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Axis value interval
* @type {Number}
* @default interval = null
* @example interval = 100
2019-09-03 11:07:45 +08:00
*/
interval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Min interval
* @type {Number}
* @default minInterval = null
* @example minInterval = 1
2019-09-03 11:07:45 +08:00
*/
minInterval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Max interval
* @type {Number}
* @default maxInterval = null
* @example maxInterval = 100
2019-09-03 11:07:45 +08:00
*/
maxInterval: null,
2019-10-24 10:28:43 +08:00
/**
* @description Boundary gap
* @type {Boolean}
* @default boundaryGap = null
* @example boundaryGap = true
2019-09-03 11:07:45 +08:00
*/
boundaryGap: null,
2019-10-24 10:28:43 +08:00
/**
* @description Axis split number
* @type {Number}
* @default splitNumber = 5
2019-09-03 11:07:45 +08:00
*/
splitNumber: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Axis line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis line
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#333',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisTick: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis tick
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#333',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis label
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}件'
* @example formatter = (dataItem) => (dataItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#333',
fontSize: 10,
rotate: 0
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis split line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
splitLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis split line
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis split line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#d4d4d4',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Y axis render level
* Priority rendering high level
* @type {Number}
* @default rLevel = -20
2019-09-03 11:07:45 +08:00
*/
rLevel: -20,
2019-10-24 10:28:43 +08:00
/**
* @description Y axis animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Y axis animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.yAxisConfig = yAxisConfig;
});
unwrapExports(axis);
var axis_1 = axis.yAxisConfig;
var axis_2 = axis.xAxisConfig;
var title = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.titleConfig = void 0;
var titleConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display title
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Title text
* @type {String}
* @default text = ''
2019-09-03 11:07:45 +08:00
*/
text: '',
2019-10-24 10:28:43 +08:00
/**
* @description Title offset
* @type {Array}
* @default offset = [0, -20]
2019-09-03 11:07:45 +08:00
*/
offset: [0, -20],
2019-10-24 10:28:43 +08:00
/**
* @description Title default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#333',
fontSize: 17,
fontWeight: 'bold',
textAlign: 'center',
textBaseline: 'bottom'
},
2019-10-24 10:28:43 +08:00
/**
* @description Title render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 20
2019-09-03 11:07:45 +08:00
*/
rLevel: 20,
2019-10-24 10:28:43 +08:00
/**
* @description Title animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Title animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.titleConfig = titleConfig;
});
unwrapExports(title);
var title_1 = title.titleConfig;
var line = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.lineConfig = void 0;
var lineConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this line chart
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Data stacking
* The data value of the series element of the same stack
* will be superimposed (the latter value will be superimposed on the previous value)
* @type {String}
* @default stack = ''
2019-09-24 16:34:08 +08:00
*/
stack: '',
2019-10-24 10:28:43 +08:00
/**
* @description Smooth line
* @type {Boolean}
* @default smooth = false
2019-09-03 11:07:45 +08:00
*/
smooth: false,
2019-10-24 10:28:43 +08:00
/**
* @description Line x axis index
* @type {Number}
* @default xAxisIndex = 0
* @example xAxisIndex = 0 | 1
2019-09-03 11:07:45 +08:00
*/
xAxisIndex: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Line y axis index
* @type {Number}
* @default yAxisIndex = 0
* @example yAxisIndex = 0 | 1
2019-09-03 11:07:45 +08:00
*/
yAxisIndex: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Line chart data
* @type {Array}
* @default data = []
* @example data = [100, 200, 300]
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
lineStyle: {
lineWidth: 1
},
2019-10-24 10:28:43 +08:00
/**
* @description Line point configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
linePoint: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display line point
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Line point radius
* @type {Number}
* @default radius = 2
2019-09-03 11:07:45 +08:00
*/
radius: 2,
2019-10-24 10:28:43 +08:00
/**
* @description Line point default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#fff',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Line area configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
lineArea: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display line area
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Line area gradient color (Hex|rgb|rgba)
* @type {Array}
* @default gradient = []
2019-09-03 11:07:45 +08:00
*/
gradient: [],
2019-10-24 10:28:43 +08:00
/**
* @description Line area style default configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
opacity: 0.5
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Line label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
label: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display line label
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Line label position
* @type {String}
* @default position = 'top'
* @example position = 'top' | 'center' | 'bottom'
2019-09-03 11:07:45 +08:00
*/
position: 'top',
2019-10-24 10:28:43 +08:00
/**
* @description Line label offset
* @type {Array}
* @default offset = [0, -10]
2019-09-03 11:07:45 +08:00
*/
offset: [0, -10],
2019-10-24 10:28:43 +08:00
/**
* @description Line label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}件'
* @example formatter = (dataItem) => (dataItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Line label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 10
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Line chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 10
2019-09-03 11:07:45 +08:00
*/
rLevel: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Line animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Line animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.lineConfig = lineConfig;
});
unwrapExports(line);
var line_1 = line.lineConfig;
var bar = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.barConfig = void 0;
var barConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this bar chart
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Data stacking
* The data value of the series element of the same stack
* will be superimposed (the latter value will be superimposed on the previous value)
* @type {String}
* @default stack = ''
2019-09-24 16:34:08 +08:00
*/
stack: '',
2019-10-24 10:28:43 +08:00
/**
* @description Bar shape type
* @type {String}
* @default shapeType = 'normal'
* @example shapeType = 'normal' | 'leftEchelon' | 'rightEchelon'
2019-09-03 11:07:45 +08:00
*/
shapeType: 'normal',
2019-10-24 10:28:43 +08:00
/**
* @description Echelon bar sharpness offset
* @type {Number}
* @default echelonOffset = 10
2019-09-03 11:07:45 +08:00
*/
echelonOffset: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Bar width
* This property should be set on the last 'bar' series
* in this coordinate system to take effect and will be in effect
* for all 'bar' series in this coordinate system
* @type {String|Number}
* @default barWidth = 'auto'
* @example barWidth = 'auto' | '10%' | 20
2019-09-03 11:07:45 +08:00
*/
barWidth: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Bar gap
* This property should be set on the last 'bar' series
* in this coordinate system to take effect and will be in effect
* for all 'bar' series in this coordinate system
* @type {String|Number}
* @default barGap = '30%'
* @example barGap = '30%' | 30
2019-09-03 11:07:45 +08:00
*/
barGap: '30%',
2019-10-24 10:28:43 +08:00
/**
* @description Bar category gap
* This property should be set on the last 'bar' series
* in this coordinate system to take effect and will be in effect
* for all 'bar' series in this coordinate system
* @type {String|Number}
* @default barCategoryGap = '20%'
* @example barCategoryGap = '20%' | 20
2019-09-03 11:07:45 +08:00
*/
barCategoryGap: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Bar x axis index
* @type {Number}
* @default xAxisIndex = 0
* @example xAxisIndex = 0 | 1
2019-09-03 11:07:45 +08:00
*/
xAxisIndex: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Bar y axis index
* @type {Number}
* @default yAxisIndex = 0
* @example yAxisIndex = 0 | 1
2019-09-03 11:07:45 +08:00
*/
yAxisIndex: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Bar chart data
* @type {Array}
* @default data = []
* @example data = [100, 200, 300]
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Background bar configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
backgroundBar: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display background bar
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Background bar width
* @type {String|Number}
* @default width = 'auto'
* @example width = 'auto' | '30%' | 30
2019-09-03 11:07:45 +08:00
*/
width: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Background bar default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: 'rgba(200, 200, 200, .4)'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Bar label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
label: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display bar label
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Bar label position
* @type {String}
* @default position = 'top'
* @example position = 'top' | 'center' | 'bottom'
2019-09-03 11:07:45 +08:00
*/
position: 'top',
2019-10-24 10:28:43 +08:00
/**
* @description Bar label offset
* @type {Array}
* @default offset = [0, -10]
2019-09-03 11:07:45 +08:00
*/
offset: [0, -10],
2019-10-24 10:28:43 +08:00
/**
* @description Bar label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}件'
* @example formatter = (dataItem) => (dataItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Bar label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 10
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Bar gradient configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
gradient: {
2019-10-24 10:28:43 +08:00
/**
* @description Gradient color (Hex|rgb|rgba)
* @type {Array}
* @default color = []
2019-09-03 11:07:45 +08:00
*/
color: [],
2019-10-24 10:28:43 +08:00
/**
* @description Local gradient
* @type {Boolean}
* @default local = true
2019-09-03 11:07:45 +08:00
*/
local: true
},
2019-10-24 10:28:43 +08:00
/**
* @description Bar style default configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
barStyle: {},
2020-04-28 18:41:09 +08:00
/**
* @description Independent color mode
* When set to true, independent color mode is enabled
* @type {Boolean}
* @default independentColor = false
*/
independentColor: false,
/**
* @description Independent colors
* Only effective when independent color mode is enabled
* Default value is the same as the color in the root configuration
* Two-dimensional color array can produce gradient colors
* @type {Array}
* @example independentColor = ['#fff', '#000']
* @example independentColor = [['#fff', '#000'], '#000']
*/
independentColors: [],
2019-10-24 10:28:43 +08:00
/**
* @description Bar chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 0
2019-09-03 11:07:45 +08:00
*/
rLevel: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Bar animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Bar animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.barConfig = barConfig;
});
unwrapExports(bar);
var bar_1 = bar.barConfig;
var pie$1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pieConfig = void 0;
var pieConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this pie chart
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Radius of pie
* @type {String|Number}
* @default radius = '50%'
* @example radius = '50%' | 100
2019-09-03 11:07:45 +08:00
*/
radius: '50%',
2019-10-24 10:28:43 +08:00
/**
* @description Center point of pie
* @type {Array}
* @default center = ['50%','50%']
* @example center = ['50%','50%'] | [100, 100]
2019-09-03 11:07:45 +08:00
*/
center: ['50%', '50%'],
2019-10-24 10:28:43 +08:00
/**
* @description Pie chart start angle
* @type {Number}
* @default startAngle = -Math.PI / 2
* @example startAngle = -Math.PI
2019-09-03 11:07:45 +08:00
*/
startAngle: -Math.PI / 2,
2019-10-24 10:28:43 +08:00
/**
* @description Whether to enable rose type
* @type {Boolean}
* @default roseType = false
2019-09-03 11:07:45 +08:00
*/
roseType: false,
2019-10-24 10:28:43 +08:00
/**
* @description Automatic sorting in rose type
* @type {Boolean}
* @default roseSort = true
2019-09-03 11:07:45 +08:00
*/
roseSort: true,
2019-10-24 10:28:43 +08:00
/**
* @description Rose radius increasing
* @type {String|Number}
* @default roseIncrement = 'auto'
* @example roseIncrement = 'auto' | '10%' | 10
2019-09-03 11:07:45 +08:00
*/
roseIncrement: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Pie chart data
* @type {Array}
* @default data = []
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Pie inside label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
insideLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display inside label
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Label formatter
* @type {String|Function}
* @default formatter = '{percent}%'
* @example formatter = '${name}-{value}-{percent}%'
* @example formatter = (dataItem) => (dataItem.name)
2019-09-03 11:07:45 +08:00
*/
formatter: '{percent}%',
2019-10-24 10:28:43 +08:00
/**
* @description Label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 10,
fill: '#fff',
textAlign: 'center',
textBaseline: 'middle'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Pie Outside label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
outsideLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display outside label
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Label formatter
* @type {String|Function}
* @default formatter = '{name}'
* @example formatter = '${name}-{value}-{percent}%'
* @example formatter = (dataItem) => (dataItem.name)
2019-09-03 11:07:45 +08:00
*/
formatter: '{name}',
2019-10-24 10:28:43 +08:00
/**
* @description Label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 11
},
2019-10-24 10:28:43 +08:00
/**
* @description Gap beteen label line bended place and pie
* @type {String|Number}
* @default labelLineBendGap = '20%'
* @example labelLineBendGap = '20%' | 20
2019-09-03 11:07:45 +08:00
*/
labelLineBendGap: '20%',
2019-10-24 10:28:43 +08:00
/**
* @description Label line end length
* @type {Number}
* @default labelLineEndLength = 50
2019-09-03 11:07:45 +08:00
*/
labelLineEndLength: 50,
2019-10-24 10:28:43 +08:00
/**
* @description Label line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
labelLineStyle: {
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Pie default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
pieStyle: {},
2019-10-24 10:28:43 +08:00
/**
* @description Percentage fractional precision
* @type {Number}
* @default percentToFixed = 0
2019-09-03 11:07:45 +08:00
*/
percentToFixed: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Pie chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 10
2019-09-03 11:07:45 +08:00
*/
rLevel: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Animation delay gap
* @type {Number}
* @default animationDelayGap = 60
2019-09-03 11:07:45 +08:00
*/
animationDelayGap: 60,
2019-10-24 10:28:43 +08:00
/**
* @description Pie animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Pie start animation curve
* @type {String}
* @default startAnimationCurve = 'easeOutBack'
2019-09-03 11:07:45 +08:00
*/
startAnimationCurve: 'easeOutBack',
2019-10-24 10:28:43 +08:00
/**
* @description Pie animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.pieConfig = pieConfig;
});
unwrapExports(pie$1);
var pie_1 = pie$1.pieConfig;
var radarAxis = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.radarAxisConfig = void 0;
var radarAxisConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this radar axis
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Center point of radar axis
* @type {Array}
* @default center = ['50%','50%']
* @example center = ['50%','50%'] | [100, 100]
2019-09-03 11:07:45 +08:00
*/
center: ['50%', '50%'],
2019-10-24 10:28:43 +08:00
/**
* @description Radius of radar axis
* @type {String|Number}
* @default radius = '65%'
* @example radius = '65%' | 100
2019-09-03 11:07:45 +08:00
*/
radius: '65%',
2019-10-24 10:28:43 +08:00
/**
* @description Radar axis start angle
* @type {Number}
* @default startAngle = -Math.PI / 2
* @example startAngle = -Math.PI
2019-09-03 11:07:45 +08:00
*/
startAngle: -Math.PI / 2,
2019-10-24 10:28:43 +08:00
/**
* @description Radar axis split number
* @type {Number}
* @default splitNum = 5
2019-09-03 11:07:45 +08:00
*/
splitNum: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Whether to enable polygon radar axis
* @type {Boolean}
* @default polygon = false
2019-09-03 11:07:45 +08:00
*/
polygon: false,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis label
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Label gap between label and radar axis
* @type {Number}
* @default labelGap = 15
2019-09-03 11:07:45 +08:00
*/
labelGap: 15,
2019-10-24 10:28:43 +08:00
/**
* @description Label color (Hex|rgb|rgba), will cover style.fill
* @type {Array}
* @default color = []
2019-09-03 11:07:45 +08:00
*/
color: [],
2019-10-24 10:28:43 +08:00
/**
* @description Axis label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#333'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis line
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Line color (Hex|rgb|rgba), will cover style.stroke
* @type {Array}
* @default color = []
2019-09-03 11:07:45 +08:00
*/
color: [],
2019-10-24 10:28:43 +08:00
/**
* @description Axis label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#999',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Split line configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
splitLine: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display split line
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Line color (Hex|rgb|rgba), will cover style.stroke
* @type {Array}
* @default color = []
2019-09-03 11:07:45 +08:00
*/
color: [],
2019-10-24 10:28:43 +08:00
/**
* @description Split line default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#d4d4d4',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Split area configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
splitArea: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display split area
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Area color (Hex|rgb|rgba), will cover style.stroke
* @type {Array}
* @default color = []
2019-09-03 11:07:45 +08:00
*/
color: ['#f5f5f5', '#e6e6e6'],
2019-10-24 10:28:43 +08:00
/**
* @description Split area default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {}
},
2019-10-24 10:28:43 +08:00
/**
* @description Bar chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = -10
2019-09-03 11:07:45 +08:00
*/
rLevel: -10,
2019-10-24 10:28:43 +08:00
/**
* @description Radar axis animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Radar axis animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrane: 50
};
exports.radarAxisConfig = radarAxisConfig;
});
unwrapExports(radarAxis);
var radarAxis_1 = radarAxis.radarAxisConfig;
var radar = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.radarConfig = void 0;
var radarConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this radar
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Radar chart data
* @type {Array}
* @default data = []
* @example data = [100, 200, 300]
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Radar default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
radarStyle: {
lineWidth: 1
},
2019-10-24 10:28:43 +08:00
/**
* @description Radar point configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
point: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display radar point
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Point radius
* @type {Number}
* @default radius = 2
2019-09-03 11:07:45 +08:00
*/
radius: 2,
2019-10-24 10:28:43 +08:00
/**
* @description Radar point default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fill: '#fff'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Radar label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
label: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display radar label
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Label position offset
* @type {Array}
* @default offset = [0, 0]
2019-09-03 11:07:45 +08:00
*/
offset: [0, 0],
2019-10-24 10:28:43 +08:00
/**
* @description Label gap between label and radar
* @type {Number}
* @default labelGap = 5
2019-09-03 11:07:45 +08:00
*/
labelGap: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = 'Score-{value}'
* @example formatter = (label) => (label)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Radar label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 10
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Radar chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 10
2019-09-03 11:07:45 +08:00
*/
rLevel: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Radar animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Radar animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrane: 50
};
exports.radarConfig = radarConfig;
});
unwrapExports(radar);
var radar_1 = radar.radarConfig;
var gauge = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.gaugeConfig = void 0;
var gaugeConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display this gauge
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend name
* @type {String}
* @default name = ''
2019-09-03 11:07:45 +08:00
*/
name: '',
2019-10-24 10:28:43 +08:00
/**
* @description Radius of gauge
* @type {String|Number}
* @default radius = '60%'
* @example radius = '60%' | 100
2019-09-03 11:07:45 +08:00
*/
radius: '60%',
2019-10-24 10:28:43 +08:00
/**
* @description Center point of gauge
* @type {Array}
* @default center = ['50%','50%']
* @example center = ['50%','50%'] | [100, 100]
2019-09-03 11:07:45 +08:00
*/
center: ['50%', '50%'],
2019-10-24 10:28:43 +08:00
/**
* @description Gauge start angle
* @type {Number}
* @default startAngle = -(Math.PI / 4) * 5
* @example startAngle = -Math.PI
2019-09-03 11:07:45 +08:00
*/
startAngle: -(Math.PI / 4) * 5,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge end angle
* @type {Number}
* @default endAngle = Math.PI / 4
* @example endAngle = 0
2019-09-03 11:07:45 +08:00
*/
endAngle: Math.PI / 4,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge min value
* @type {Number}
* @default min = 0
2019-09-03 11:07:45 +08:00
*/
min: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge max value
* @type {Number}
* @default max = 100
2019-09-03 11:07:45 +08:00
*/
max: 100,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge split number
* @type {Number}
* @default splitNum = 5
2019-09-03 11:07:45 +08:00
*/
splitNum: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge arc line width
* @type {Number}
* @default arcLineWidth = 15
2019-09-03 11:07:45 +08:00
*/
arcLineWidth: 15,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge chart data
* @type {Array}
* @default data = []
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Data item arc default style configuration
* @type {Object}
* @default dataItemStyle = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
dataItemStyle: {},
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisTick: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis tick
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick length
* @type {Number}
* @default tickLength = 6
2019-09-03 11:07:45 +08:00
*/
tickLength: 6,
2019-10-24 10:28:43 +08:00
/**
* @description Axis tick default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#999',
lineWidth: 1
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Axis label configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
axisLabel: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display axis label
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label data (Can be calculated automatically)
* @type {Array}
* @default data = [Number...]
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Axis label formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}%'
* @example formatter = (labelItem) => (labelItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label gap between label and axis tick
* @type {String|Function}
* @default labelGap = 5
2019-09-03 11:07:45 +08:00
*/
labelGap: 5,
2019-10-24 10:28:43 +08:00
/**
* @description Axis label default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {}
},
2019-10-24 10:28:43 +08:00
/**
* @description Gauge pointer configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
pointer: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display pointer
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Pointer value index of data
* @type {Number}
* @default valueIndex = 0 (pointer.value = data[0].value)
2019-09-03 11:07:45 +08:00
*/
valueIndex: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Pointer default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
scale: [1, 1],
fill: '#fb7293'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Data item arc detail configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
details: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display details
* @type {Boolean}
* @default show = false
2019-09-03 11:07:45 +08:00
*/
show: false,
2019-10-24 10:28:43 +08:00
/**
* @description Details formatter
* @type {String|Function}
* @default formatter = null
* @example formatter = '{value}%'
* @example formatter = '{name}%'
* @example formatter = (dataItem) => (dataItem.value)
2019-09-03 11:07:45 +08:00
*/
formatter: null,
2019-10-24 10:28:43 +08:00
/**
* @description Details position offset
* @type {Array}
* @default offset = [0, 0]
* @example offset = [10, 10]
2019-09-03 11:07:45 +08:00
*/
offset: [0, 0],
2019-10-24 10:28:43 +08:00
/**
* @description Value fractional precision
* @type {Number}
* @default valueToFixed = 0
2019-09-03 11:07:45 +08:00
*/
valueToFixed: 0,
2019-10-24 10:28:43 +08:00
/**
* @description Details position
* @type {String}
* @default position = 'center'
* @example position = 'start' | 'center' | 'end'
2019-09-03 11:07:45 +08:00
*/
position: 'center',
2019-10-24 10:28:43 +08:00
/**
* @description Details default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
textBaseline: 'middle'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Gauge background arc configuration
* @type {Object}
2019-09-03 11:07:45 +08:00
*/
backgroundArc: {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display background arc
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Background arc default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
style: {
stroke: '#e0e0e0'
}
},
2019-10-24 10:28:43 +08:00
/**
* @description Gauge chart render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 10
2019-09-03 11:07:45 +08:00
*/
rLevel: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Gauge animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Gauge animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.gaugeConfig = gaugeConfig;
});
unwrapExports(gauge);
var gauge_1 = gauge.gaugeConfig;
var legend = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.legendConfig = void 0;
var legendConfig = {
2019-10-24 10:28:43 +08:00
/**
* @description Whether to display legend
* @type {Boolean}
* @default show = true
2019-09-03 11:07:45 +08:00
*/
show: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend orient
* @type {String}
* @default orient = 'horizontal'
* @example orient = 'horizontal' | 'vertical'
2019-09-03 11:07:45 +08:00
*/
orient: 'horizontal',
2019-10-24 10:28:43 +08:00
/**
* @description Legend left
* @type {String|Number}
* @default left = 'auto'
* @example left = 'auto' | '10%' | 10
2019-09-03 11:07:45 +08:00
*/
left: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Legend right
* @type {String|Number}
* @default right = 'auto'
* @example right = 'auto' | '10%' | 10
2019-09-03 11:07:45 +08:00
*/
right: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Legend top
* @type {String|Number}
* @default top = 'auto'
* @example top = 'auto' | '10%' | 10
2019-09-03 11:07:45 +08:00
*/
top: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Legend bottom
* @type {String|Number}
* @default bottom = 'auto'
* @example bottom = 'auto' | '10%' | 10
2019-09-03 11:07:45 +08:00
*/
bottom: 'auto',
2019-10-24 10:28:43 +08:00
/**
* @description Legend item gap
* @type {Number}
* @default itemGap = 10
2019-09-03 11:07:45 +08:00
*/
itemGap: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Icon width
* @type {Number}
* @default iconWidth = 25
2019-09-03 11:07:45 +08:00
*/
iconWidth: 25,
2019-10-24 10:28:43 +08:00
/**
* @description Icon height
* @type {Number}
* @default iconHeight = 10
2019-09-03 11:07:45 +08:00
*/
iconHeight: 10,
2019-10-24 10:28:43 +08:00
/**
* @description Whether legend is optional
* @type {Boolean}
* @default selectAble = true
2019-09-03 11:07:45 +08:00
*/
selectAble: true,
2019-10-24 10:28:43 +08:00
/**
* @description Legend data
* @type {Array}
* @default data = []
2019-09-03 11:07:45 +08:00
*/
data: [],
2019-10-24 10:28:43 +08:00
/**
* @description Legend text default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
textStyle: {
fontFamily: 'Arial',
fontSize: 13,
fill: '#000'
},
2019-10-24 10:28:43 +08:00
/**
* @description Legend icon default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
iconStyle: {},
2019-10-24 10:28:43 +08:00
/**
* @description Legend text unselected default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
textUnselectedStyle: {
fontFamily: 'Arial',
fontSize: 13,
fill: '#999'
},
2019-10-24 10:28:43 +08:00
/**
* @description Legend icon unselected default style configuration
* @type {Object}
* @default style = {Configuration Of Class Style}
2019-09-03 11:07:45 +08:00
*/
iconUnselectedStyle: {
fill: '#999'
},
2019-10-24 10:28:43 +08:00
/**
* @description Legend render level
* Priority rendering high level
* @type {Number}
* @default rLevel = 20
2019-09-03 11:07:45 +08:00
*/
rLevel: 20,
2019-10-24 10:28:43 +08:00
/**
* @description Legend animation curve
* @type {String}
* @default animationCurve = 'easeOutCubic'
2019-09-03 11:07:45 +08:00
*/
animationCurve: 'easeOutCubic',
2019-10-24 10:28:43 +08:00
/**
* @description Legend animation frame
* @type {Number}
* @default animationFrame = 50
2019-09-03 11:07:45 +08:00
*/
animationFrame: 50
};
exports.legendConfig = legendConfig;
});
unwrapExports(legend);
2019-09-24 16:34:08 +08:00
var legend_1 = legend.legendConfig;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var config = createCommonjsModule(function (module, exports) {
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.changeDefaultConfig = changeDefaultConfig;
Object.defineProperty(exports, "colorConfig", {
enumerable: true,
get: function get() {
return color.colorConfig;
}
});
Object.defineProperty(exports, "gridConfig", {
enumerable: true,
get: function get() {
return grid.gridConfig;
}
});
Object.defineProperty(exports, "xAxisConfig", {
enumerable: true,
get: function get() {
return axis.xAxisConfig;
}
});
Object.defineProperty(exports, "yAxisConfig", {
enumerable: true,
get: function get() {
return axis.yAxisConfig;
}
});
Object.defineProperty(exports, "titleConfig", {
enumerable: true,
get: function get() {
return title.titleConfig;
}
});
Object.defineProperty(exports, "lineConfig", {
enumerable: true,
get: function get() {
return line.lineConfig;
}
});
Object.defineProperty(exports, "barConfig", {
enumerable: true,
get: function get() {
return bar.barConfig;
}
});
Object.defineProperty(exports, "pieConfig", {
enumerable: true,
get: function get() {
return pie$1.pieConfig;
}
});
Object.defineProperty(exports, "radarAxisConfig", {
enumerable: true,
get: function get() {
return radarAxis.radarAxisConfig;
}
});
Object.defineProperty(exports, "radarConfig", {
enumerable: true,
get: function get() {
return radar.radarConfig;
}
});
Object.defineProperty(exports, "gaugeConfig", {
enumerable: true,
get: function get() {
return gauge.gaugeConfig;
}
});
Object.defineProperty(exports, "legendConfig", {
enumerable: true,
get: function get() {
return legend.legendConfig;
}
});
exports.keys = void 0;
var allConfig = {
colorConfig: color.colorConfig,
gridConfig: grid.gridConfig,
xAxisConfig: axis.xAxisConfig,
yAxisConfig: axis.yAxisConfig,
titleConfig: title.titleConfig,
lineConfig: line.lineConfig,
barConfig: bar.barConfig,
pieConfig: pie$1.pieConfig,
radarAxisConfig: radarAxis.radarAxisConfig,
radarConfig: radar.radarConfig,
gaugeConfig: gauge.gaugeConfig,
legendConfig: legend.legendConfig
2019-10-24 10:28:43 +08:00
/**
* @description Change default configuration
* @param {String} key Configuration key
* @param {Object|Array} config Your config
* @return {Undefined} No return
2019-09-03 11:07:45 +08:00
*/
};
function changeDefaultConfig(key, config) {
if (!allConfig["".concat(key, "Config")]) {
console.warn('Change default config Error - Invalid key!');
return;
}
(0, util$1.deepMerge)(allConfig["".concat(key, "Config")], config);
}
var keys = ['color', 'title', 'legend', 'xAxis', 'yAxis', 'grid', 'radarAxis', 'line', 'bar', 'pie', 'radar', 'gauge'];
exports.keys = keys;
});
unwrapExports(config);
var config_1 = config.changeDefaultConfig;
var config_2 = config.keys;
var mergeColor_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mergeColor = mergeColor;
function mergeColor(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var defaultColor = (0, util.deepClone)(config.colorConfig, true);
var color = option.color,
series = option.series;
if (!series) series = [];
if (!color) color = [];
option.color = color = (0, util$1.deepMerge)(defaultColor, color);
if (!series.length) return;
var colorNum = color.length;
series.forEach(function (item, i) {
if (item.color) return;
item.color = color[i % colorNum];
});
var pies = series.filter(function (_ref) {
var type = _ref.type;
return type === 'pie';
});
pies.forEach(function (pie) {
return pie.data.forEach(function (di, i) {
return di.color = color[i % colorNum];
});
});
var gauges = series.filter(function (_ref2) {
var type = _ref2.type;
return type === 'gauge';
});
gauges.forEach(function (gauge) {
return gauge.data.forEach(function (di, i) {
return di.color = color[i % colorNum];
});
});
2020-04-28 18:41:09 +08:00
var barWithIndependentColor = series.filter(function (_ref3) {
var type = _ref3.type,
independentColor = _ref3.independentColor;
return type === 'bar' && independentColor;
});
barWithIndependentColor.forEach(function (bar) {
if (bar.independentColors) return;
bar.independentColors = color;
});
2019-09-03 11:07:45 +08:00
}
});
unwrapExports(mergeColor_1);
var mergeColor_2 = mergeColor_1.mergeColor;
var updater_class = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.doUpdate = doUpdate;
exports.Updater = void 0;
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _classCallCheck2 = interopRequireDefault(classCallCheck);
2019-09-03 11:07:45 +08:00
var Updater = function Updater(config, series) {
2019-09-24 16:34:08 +08:00
(0, _classCallCheck2["default"])(this, Updater);
2019-09-03 11:07:45 +08:00
var chart = config.chart,
key = config.key,
getGraphConfig = config.getGraphConfig;
if (typeof getGraphConfig !== 'function') {
console.warn('Updater need function getGraphConfig!');
return;
}
if (!chart[key]) this.graphs = chart[key] = [];
Object.assign(this, config);
this.update(series);
};
exports.Updater = Updater;
Updater.prototype.update = function (series) {
var _this = this;
var graphs = this.graphs,
beforeUpdate = this.beforeUpdate;
delRedundanceGraph(this, series);
if (!series.length) return;
2019-09-24 16:34:08 +08:00
var beforeUpdateType = (0, _typeof2["default"])(beforeUpdate);
2019-09-03 11:07:45 +08:00
series.forEach(function (seriesItem, i) {
if (beforeUpdateType === 'function') beforeUpdate(graphs, seriesItem, i, _this);
var cache = graphs[i];
if (cache) {
changeGraphs(cache, seriesItem, i, _this);
} else {
addGraphs(graphs, seriesItem, i, _this);
}
});
};
function delRedundanceGraph(updater, series) {
var graphs = updater.graphs,
render = updater.chart.render;
var cacheGraphNum = graphs.length;
var needGraphNum = series.length;
if (cacheGraphNum > needGraphNum) {
var needDelGraphs = graphs.splice(needGraphNum);
needDelGraphs.forEach(function (item) {
return item.forEach(function (g) {
return render.delGraph(g);
});
});
}
}
function changeGraphs(cache, seriesItem, i, updater) {
var getGraphConfig = updater.getGraphConfig,
render = updater.chart.render,
beforeChange = updater.beforeChange;
var configs = getGraphConfig(seriesItem, updater);
balanceGraphsNum(cache, configs, render);
cache.forEach(function (graph, j) {
var config = configs[j];
if (typeof beforeChange === 'function') beforeChange(graph, config);
updateGraphConfigByKey(graph, config);
});
}
function balanceGraphsNum(graphs, graphConfig, render) {
var cacheGraphNum = graphs.length;
var needGraphNum = graphConfig.length;
if (needGraphNum > cacheGraphNum) {
var lastCacheGraph = graphs.slice(-1)[0];
var needAddGraphNum = needGraphNum - cacheGraphNum;
var needAddGraphs = new Array(needAddGraphNum).fill(0).map(function (foo) {
return render.clone(lastCacheGraph);
});
2019-09-24 16:34:08 +08:00
graphs.push.apply(graphs, (0, _toConsumableArray2["default"])(needAddGraphs));
2019-09-03 11:07:45 +08:00
} else if (needGraphNum < cacheGraphNum) {
var needDelCache = graphs.splice(needGraphNum);
needDelCache.forEach(function (g) {
return render.delGraph(g);
});
}
}
function addGraphs(graphs, seriesItem, i, updater) {
var getGraphConfig = updater.getGraphConfig,
getStartGraphConfig = updater.getStartGraphConfig,
chart = updater.chart;
var render = chart.render;
var startConfigs = null;
if (typeof getStartGraphConfig === 'function') startConfigs = getStartGraphConfig(seriesItem, updater);
var configs = getGraphConfig(seriesItem, updater);
if (!configs.length) return;
if (startConfigs) {
graphs[i] = startConfigs.map(function (config) {
return render.add(config);
});
graphs[i].forEach(function (graph, i) {
var config = configs[i];
updateGraphConfigByKey(graph, config);
});
} else {
graphs[i] = configs.map(function (config) {
return render.add(config);
});
}
var afterAddGraph = updater.afterAddGraph;
if (typeof afterAddGraph === 'function') afterAddGraph(graphs[i]);
}
function updateGraphConfigByKey(graph, config) {
var keys = Object.keys(config);
keys.forEach(function (key) {
if (key === 'shape' || key === 'style') {
graph.animation(key, config[key], true);
} else {
graph[key] = config[key];
}
});
}
function doUpdate() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
chart = _ref.chart,
series = _ref.series,
key = _ref.key,
getGraphConfig = _ref.getGraphConfig,
getStartGraphConfig = _ref.getStartGraphConfig,
beforeChange = _ref.beforeChange,
beforeUpdate = _ref.beforeUpdate,
afterAddGraph = _ref.afterAddGraph;
if (chart[key]) {
chart[key].update(series);
} else {
chart[key] = new Updater({
chart: chart,
key: key,
getGraphConfig: getGraphConfig,
getStartGraphConfig: getStartGraphConfig,
beforeChange: beforeChange,
beforeUpdate: beforeUpdate,
afterAddGraph: afterAddGraph
}, series);
}
}
});
unwrapExports(updater_class);
var updater_class_1 = updater_class.doUpdate;
var updater_class_2 = updater_class.Updater;
var title_1$1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.title = title;
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
function title(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var title = [];
if (option.title) {
title[0] = (0, util$1.deepMerge)((0, util.deepClone)(config.titleConfig, true), option.title);
}
(0, updater_class.doUpdate)({
chart: chart,
series: title,
key: 'title',
getGraphConfig: getTitleConfig
});
}
function getTitleConfig(titleItem, updater) {
var animationCurve = config.titleConfig.animationCurve,
animationFrame = config.titleConfig.animationFrame,
rLevel = config.titleConfig.rLevel;
var shape = getTitleShape(titleItem, updater);
var style = getTitleStyle(titleItem);
return [{
name: 'text',
index: rLevel,
visible: titleItem.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
}];
}
function getTitleShape(titleItem, updater) {
var offset = titleItem.offset,
text = titleItem.text;
var _updater$chart$gridAr = updater.chart.gridArea,
x = _updater$chart$gridAr.x,
y = _updater$chart$gridAr.y,
w = _updater$chart$gridAr.w;
2019-09-24 16:34:08 +08:00
var _offset = (0, _slicedToArray2["default"])(offset, 2),
2019-09-03 11:07:45 +08:00
ox = _offset[0],
oy = _offset[1];
return {
content: text,
position: [x + w / 2 + ox, y + oy]
};
}
function getTitleStyle(titleItem) {
var style = titleItem.style;
return style;
}
});
unwrapExports(title_1$1);
var title_2 = title_1$1.title;
var grid_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.grid = grid;
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function grid(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var grid = option.grid;
grid = (0, util$1.deepMerge)((0, util.deepClone)(config.gridConfig, true), grid || {});
(0, updater_class.doUpdate)({
chart: chart,
series: [grid],
key: 'grid',
getGraphConfig: getGridConfig
});
}
function getGridConfig(gridItem, updater) {
var animationCurve = gridItem.animationCurve,
animationFrame = gridItem.animationFrame,
rLevel = gridItem.rLevel;
var shape = getGridShape(gridItem, updater);
var style = getGridStyle(gridItem);
updater.chart.gridArea = _objectSpread({}, shape);
return [{
name: 'rect',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
}];
}
function getGridShape(gridItem, updater) {
2019-09-24 16:34:08 +08:00
var _updater$chart$render = (0, _slicedToArray2["default"])(updater.chart.render.area, 2),
2019-09-03 11:07:45 +08:00
w = _updater$chart$render[0],
h = _updater$chart$render[1];
var left = getNumberValue(gridItem.left, w);
var right = getNumberValue(gridItem.right, w);
var top = getNumberValue(gridItem.top, h);
var bottom = getNumberValue(gridItem.bottom, h);
var width = w - left - right;
var height = h - top - bottom;
return {
x: left,
y: top,
w: width,
h: height
};
}
function getNumberValue(val, all) {
if (typeof val === 'number') return val;
if (typeof val !== 'string') return 0;
return all * parseInt(val) / 100;
}
function getGridStyle(gridItem) {
var style = gridItem.style;
return style;
}
});
unwrapExports(grid_1$1);
var grid_2 = grid_1$1.grid;
var axis_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.axis = axis;
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
var axisConfig = {
xAxisConfig: config.xAxisConfig,
yAxisConfig: config.yAxisConfig
};
2019-09-24 16:34:08 +08:00
var abs = Math.abs,
2019-09-03 11:07:45 +08:00
pow = Math.pow;
function axis(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var xAxis = option.xAxis,
yAxis = option.yAxis,
series = option.series;
var allAxis = [];
if (xAxis && yAxis && series) {
allAxis = getAllAxis(xAxis, yAxis);
allAxis = mergeDefaultAxisConfig(allAxis);
allAxis = allAxis.filter(function (_ref) {
var show = _ref.show;
return show;
});
allAxis = mergeDefaultBoundaryGap(allAxis);
allAxis = calcAxisLabelData(allAxis, series);
allAxis = setAxisPosition(allAxis);
allAxis = calcAxisLinePosition(allAxis, chart);
allAxis = calcAxisTickPosition(allAxis);
allAxis = calcAxisNamePosition(allAxis);
allAxis = calcSplitLinePosition(allAxis, chart);
}
(0, updater_class.doUpdate)({
chart: chart,
series: allAxis,
key: 'axisLine',
getGraphConfig: getLineConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: allAxis,
key: 'axisTick',
getGraphConfig: getTickConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: allAxis,
key: 'axisLabel',
getGraphConfig: getLabelConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: allAxis,
key: 'axisName',
getGraphConfig: getNameConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: allAxis,
key: 'splitLine',
getGraphConfig: getSplitLineConfig
});
chart.axisData = allAxis;
}
function getAllAxis(xAxis, yAxis) {
var allXAxis = [],
allYAxis = [];
if (xAxis instanceof Array) {
var _allXAxis;
2019-09-24 16:34:08 +08:00
(_allXAxis = allXAxis).push.apply(_allXAxis, (0, _toConsumableArray2["default"])(xAxis));
2019-09-03 11:07:45 +08:00
} else {
allXAxis.push(xAxis);
}
if (yAxis instanceof Array) {
var _allYAxis;
2019-09-24 16:34:08 +08:00
(_allYAxis = allYAxis).push.apply(_allYAxis, (0, _toConsumableArray2["default"])(yAxis));
2019-09-03 11:07:45 +08:00
} else {
allYAxis.push(yAxis);
}
allXAxis.splice(2);
allYAxis.splice(2);
allXAxis = allXAxis.map(function (axis, i) {
return _objectSpread({}, axis, {
index: i,
axis: 'x'
});
});
allYAxis = allYAxis.map(function (axis, i) {
return _objectSpread({}, axis, {
index: i,
axis: 'y'
});
});
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(allXAxis), (0, _toConsumableArray2["default"])(allYAxis));
2019-09-03 11:07:45 +08:00
}
function mergeDefaultAxisConfig(allAxis) {
var xAxis = allAxis.filter(function (_ref2) {
var axis = _ref2.axis;
return axis === 'x';
});
var yAxis = allAxis.filter(function (_ref3) {
var axis = _ref3.axis;
return axis === 'y';
});
xAxis = xAxis.map(function (axis) {
return (0, util$1.deepMerge)((0, util.deepClone)(config.xAxisConfig), axis);
});
yAxis = yAxis.map(function (axis) {
return (0, util$1.deepMerge)((0, util.deepClone)(config.yAxisConfig), axis);
});
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(xAxis), (0, _toConsumableArray2["default"])(yAxis));
2019-09-03 11:07:45 +08:00
}
function mergeDefaultBoundaryGap(allAxis) {
var valueAxis = allAxis.filter(function (_ref4) {
var data = _ref4.data;
return data === 'value';
});
var labelAxis = allAxis.filter(function (_ref5) {
var data = _ref5.data;
return data !== 'value';
});
valueAxis.forEach(function (axis) {
if (typeof axis.boundaryGap === 'boolean') return;
axis.boundaryGap = false;
});
labelAxis.forEach(function (axis) {
if (typeof axis.boundaryGap === 'boolean') return;
axis.boundaryGap = true;
});
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(valueAxis), (0, _toConsumableArray2["default"])(labelAxis));
2019-09-03 11:07:45 +08:00
}
function calcAxisLabelData(allAxis, series) {
var valueAxis = allAxis.filter(function (_ref6) {
var data = _ref6.data;
return data === 'value';
});
var labelAxis = allAxis.filter(function (_ref7) {
var data = _ref7.data;
return data instanceof Array;
});
valueAxis = calcValueAxisLabelData(valueAxis, series);
labelAxis = calcLabelAxisLabelData(labelAxis);
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(valueAxis), (0, _toConsumableArray2["default"])(labelAxis));
2019-09-03 11:07:45 +08:00
}
function calcValueAxisLabelData(valueAxis, series) {
return valueAxis.map(function (axis) {
var minMaxValue = getValueAxisMaxMinValue(axis, series);
var _getTrueMinMax = getTrueMinMax(axis, minMaxValue),
2019-09-24 16:34:08 +08:00
_getTrueMinMax2 = (0, _slicedToArray2["default"])(_getTrueMinMax, 2),
2019-09-03 11:07:45 +08:00
min = _getTrueMinMax2[0],
max = _getTrueMinMax2[1];
var interval = getValueInterval(min, max, axis);
var formatter = axis.axisLabel.formatter;
var label = [];
2020-04-28 18:41:09 +08:00
if (min < 0 && max > 0) {
2019-09-03 11:07:45 +08:00
label = getValueAxisLabelFromZero(min, max, interval);
} else {
label = getValueAxisLabelFromMin(min, max, interval);
}
label = label.map(function (l) {
return parseFloat(l.toFixed(2));
});
return _objectSpread({}, axis, {
maxValue: label.slice(-1)[0],
minValue: label[0],
label: getAfterFormatterLabel(label, formatter)
});
});
}
function getValueAxisMaxMinValue(axis, series) {
series = series.filter(function (_ref8) {
var show = _ref8.show,
type = _ref8.type;
if (show === false) return false;
if (type === 'pie') return false;
return true;
});
if (series.length === 0) return [0, 0];
var index = axis.index,
axisType = axis.axis;
series = mergeStackData(series);
var axisName = axisType + 'Axis';
var valueSeries = series.filter(function (s) {
return s[axisName] === index;
});
if (!valueSeries.length) valueSeries = series;
return getSeriesMinMaxValue(valueSeries);
}
function getSeriesMinMaxValue(series) {
if (!series) return;
2019-09-24 16:34:08 +08:00
var minValue = Math.min.apply(Math, (0, _toConsumableArray2["default"])(series.map(function (_ref9) {
2019-09-03 11:07:45 +08:00
var data = _ref9.data;
2019-09-24 16:34:08 +08:00
return Math.min.apply(Math, (0, _toConsumableArray2["default"])((0, util$1.filterNonNumber)(data)));
2019-09-03 11:07:45 +08:00
})));
2019-09-24 16:34:08 +08:00
var maxValue = Math.max.apply(Math, (0, _toConsumableArray2["default"])(series.map(function (_ref10) {
2019-09-03 11:07:45 +08:00
var data = _ref10.data;
2019-09-24 16:34:08 +08:00
return Math.max.apply(Math, (0, _toConsumableArray2["default"])((0, util$1.filterNonNumber)(data)));
2019-09-03 11:07:45 +08:00
})));
return [minValue, maxValue];
}
function mergeStackData(series) {
var seriesCloned = (0, util.deepClone)(series, true);
series.forEach(function (item, i) {
var data = (0, util$1.mergeSameStackData)(item, series);
seriesCloned[i].data = data;
});
return seriesCloned;
}
function getTrueMinMax(_ref11, _ref12) {
var min = _ref11.min,
max = _ref11.max,
axis = _ref11.axis;
2019-09-24 16:34:08 +08:00
var _ref13 = (0, _slicedToArray2["default"])(_ref12, 2),
2019-09-03 11:07:45 +08:00
minValue = _ref13[0],
maxValue = _ref13[1];
2019-09-24 16:34:08 +08:00
var minType = (0, _typeof2["default"])(min),
maxType = (0, _typeof2["default"])(max);
2019-09-03 11:07:45 +08:00
if (!testMinMaxType(min)) {
min = axisConfig[axis + 'AxisConfig'].min;
minType = 'string';
}
if (!testMinMaxType(max)) {
max = axisConfig[axis + 'AxisConfig'].max;
maxType = 'string';
}
if (minType === 'string') {
min = parseInt(minValue - abs(minValue * parseFloat(min) / 100));
var lever = getValueLever(min);
min = parseFloat((min / lever - 0.1).toFixed(1)) * lever;
}
if (maxType === 'string') {
max = parseInt(maxValue + abs(maxValue * parseFloat(max) / 100));
var _lever = getValueLever(max);
max = parseFloat((max / _lever + 0.1).toFixed(1)) * _lever;
}
return [min, max];
}
function getValueLever(value) {
var valueString = abs(value).toString();
var valueLength = valueString.length;
var firstZeroIndex = valueString.replace(/0*$/g, '').indexOf('0');
var pow10Num = valueLength - 1;
if (firstZeroIndex !== -1) pow10Num -= firstZeroIndex;
return pow(10, pow10Num);
}
function testMinMaxType(val) {
2019-09-24 16:34:08 +08:00
var valType = (0, _typeof2["default"])(val);
2019-09-03 11:07:45 +08:00
var isValidString = valType === 'string' && /^\d+%$/.test(val);
var isValidNumber = valType === 'number';
return isValidString || isValidNumber;
}
function getValueAxisLabelFromZero(min, max, interval) {
var negative = [],
positive = [];
var currentNegative = 0,
currentPositive = 0;
do {
negative.push(currentNegative -= interval);
} while (currentNegative > min);
do {
positive.push(currentPositive += interval);
} while (currentPositive < max);
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(negative.reverse()), [0], (0, _toConsumableArray2["default"])(positive));
2019-09-03 11:07:45 +08:00
}
function getValueAxisLabelFromMin(min, max, interval) {
var label = [min],
currentValue = min;
do {
label.push(currentValue += interval);
} while (currentValue < max);
return label;
}
function getAfterFormatterLabel(label, formatter) {
if (!formatter) return label;
if (typeof formatter === 'string') label = label.map(function (l) {
return formatter.replace('{value}', l);
});
if (typeof formatter === 'function') label = label.map(function (value, index) {
return formatter({
value: value,
index: index
});
});
return label;
}
function calcLabelAxisLabelData(labelAxis) {
return labelAxis.map(function (axis) {
var data = axis.data,
formatter = axis.axisLabel.formatter;
return _objectSpread({}, axis, {
label: getAfterFormatterLabel(data, formatter)
});
});
}
function getValueInterval(min, max, axis) {
var interval = axis.interval,
minInterval = axis.minInterval,
maxInterval = axis.maxInterval,
splitNumber = axis.splitNumber,
axisType = axis.axis;
var config = axisConfig[axisType + 'AxisConfig'];
if (typeof interval !== 'number') interval = config.interval;
if (typeof minInterval !== 'number') minInterval = config.minInterval;
if (typeof maxInterval !== 'number') maxInterval = config.maxInterval;
if (typeof splitNumber !== 'number') splitNumber = config.splitNumber;
if (typeof interval === 'number') return interval;
var valueInterval = parseInt((max - min) / (splitNumber - 1));
if (valueInterval.toString().length > 1) valueInterval = parseInt(valueInterval.toString().replace(/\d$/, '0'));
if (valueInterval === 0) valueInterval = 1;
if (typeof minInterval === 'number' && valueInterval < minInterval) return minInterval;
if (typeof maxInterval === 'number' && valueInterval > maxInterval) return maxInterval;
return valueInterval;
}
function setAxisPosition(allAxis) {
var xAxis = allAxis.filter(function (_ref14) {
var axis = _ref14.axis;
return axis === 'x';
});
var yAxis = allAxis.filter(function (_ref15) {
var axis = _ref15.axis;
return axis === 'y';
});
if (xAxis[0] && !xAxis[0].position) xAxis[0].position = config.xAxisConfig.position;
if (xAxis[1] && !xAxis[1].position) {
xAxis[1].position = xAxis[0].position === 'bottom' ? 'top' : 'bottom';
}
if (yAxis[0] && !yAxis[0].position) yAxis[0].position = config.yAxisConfig.position;
if (yAxis[1] && !yAxis[1].position) {
yAxis[1].position = yAxis[0].position === 'left' ? 'right' : 'left';
}
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(xAxis), (0, _toConsumableArray2["default"])(yAxis));
2019-09-03 11:07:45 +08:00
}
function calcAxisLinePosition(allAxis, chart) {
var _chart$gridArea = chart.gridArea,
x = _chart$gridArea.x,
y = _chart$gridArea.y,
w = _chart$gridArea.w,
h = _chart$gridArea.h;
allAxis = allAxis.map(function (axis) {
var position = axis.position;
var linePosition = [];
if (position === 'left') {
linePosition = [[x, y], [x, y + h]].reverse();
} else if (position === 'right') {
linePosition = [[x + w, y], [x + w, y + h]].reverse();
} else if (position === 'top') {
linePosition = [[x, y], [x + w, y]];
} else if (position === 'bottom') {
linePosition = [[x, y + h], [x + w, y + h]];
}
return _objectSpread({}, axis, {
linePosition: linePosition
});
});
return allAxis;
}
function calcAxisTickPosition(allAxis, chart) {
return allAxis.map(function (axisItem) {
var axis = axisItem.axis,
linePosition = axisItem.linePosition,
position = axisItem.position,
label = axisItem.label,
boundaryGap = axisItem.boundaryGap;
if (typeof boundaryGap !== 'boolean') boundaryGap = axisConfig[axis + 'AxisConfig'].boundaryGap;
var labelNum = label.length;
2019-09-24 16:34:08 +08:00
var _linePosition = (0, _slicedToArray2["default"])(linePosition, 2),
_linePosition$ = (0, _slicedToArray2["default"])(_linePosition[0], 2),
2019-09-03 11:07:45 +08:00
startX = _linePosition$[0],
startY = _linePosition$[1],
2019-09-24 16:34:08 +08:00
_linePosition$2 = (0, _slicedToArray2["default"])(_linePosition[1], 2),
2019-09-03 11:07:45 +08:00
endX = _linePosition$2[0],
endY = _linePosition$2[1];
var gapLength = axis === 'x' ? endX - startX : endY - startY;
var gap = gapLength / (boundaryGap ? labelNum : labelNum - 1);
var tickPosition = new Array(labelNum).fill(0).map(function (foo, i) {
if (axis === 'x') {
return [startX + gap * (boundaryGap ? i + 0.5 : i), startY];
}
return [startX, startY + gap * (boundaryGap ? i + 0.5 : i)];
});
var tickLinePosition = getTickLinePosition(axis, boundaryGap, position, tickPosition, gap);
return _objectSpread({}, axisItem, {
tickPosition: tickPosition,
tickLinePosition: tickLinePosition,
tickGap: gap
});
});
}
function getTickLinePosition(axisType, boundaryGap, position, tickPosition, gap) {
var index = axisType === 'x' ? 1 : 0;
var plus = 5;
if (axisType === 'x' && position === 'top') plus = -5;
if (axisType === 'y' && position === 'left') plus = -5;
var tickLinePosition = tickPosition.map(function (lineStart) {
var lineEnd = (0, util.deepClone)(lineStart);
lineEnd[index] += plus;
return [(0, util.deepClone)(lineStart), lineEnd];
});
if (!boundaryGap) return tickLinePosition;
index = axisType === 'x' ? 0 : 1;
plus = gap / 2;
tickLinePosition.forEach(function (_ref16) {
2019-09-24 16:34:08 +08:00
var _ref17 = (0, _slicedToArray2["default"])(_ref16, 2),
2019-09-03 11:07:45 +08:00
lineStart = _ref17[0],
lineEnd = _ref17[1];
lineStart[index] += plus;
lineEnd[index] += plus;
});
return tickLinePosition;
}
function calcAxisNamePosition(allAxis, chart) {
return allAxis.map(function (axisItem) {
var nameGap = axisItem.nameGap,
nameLocation = axisItem.nameLocation,
position = axisItem.position,
linePosition = axisItem.linePosition;
2019-09-24 16:34:08 +08:00
var _linePosition2 = (0, _slicedToArray2["default"])(linePosition, 2),
2019-09-03 11:07:45 +08:00
lineStart = _linePosition2[0],
lineEnd = _linePosition2[1];
2019-09-24 16:34:08 +08:00
var namePosition = (0, _toConsumableArray2["default"])(lineStart);
if (nameLocation === 'end') namePosition = (0, _toConsumableArray2["default"])(lineEnd);
2019-09-03 11:07:45 +08:00
if (nameLocation === 'center') {
namePosition[0] = (lineStart[0] + lineEnd[0]) / 2;
namePosition[1] = (lineStart[1] + lineEnd[1]) / 2;
}
var index = 0;
if (position === 'top' && nameLocation === 'center') index = 1;
if (position === 'bottom' && nameLocation === 'center') index = 1;
if (position === 'left' && nameLocation !== 'center') index = 1;
if (position === 'right' && nameLocation !== 'center') index = 1;
var plus = nameGap;
if (position === 'top' && nameLocation !== 'end') plus *= -1;
if (position === 'left' && nameLocation !== 'start') plus *= -1;
if (position === 'bottom' && nameLocation === 'start') plus *= -1;
if (position === 'right' && nameLocation === 'end') plus *= -1;
namePosition[index] += plus;
return _objectSpread({}, axisItem, {
namePosition: namePosition
});
});
}
function calcSplitLinePosition(allAxis, chart) {
var _chart$gridArea2 = chart.gridArea,
w = _chart$gridArea2.w,
h = _chart$gridArea2.h;
return allAxis.map(function (axisItem) {
var tickLinePosition = axisItem.tickLinePosition,
position = axisItem.position,
boundaryGap = axisItem.boundaryGap;
var index = 0,
plus = w;
if (position === 'top' || position === 'bottom') index = 1;
if (position === 'top' || position === 'bottom') plus = h;
if (position === 'right' || position === 'bottom') plus *= -1;
var splitLinePosition = tickLinePosition.map(function (_ref18) {
2019-09-24 16:34:08 +08:00
var _ref19 = (0, _slicedToArray2["default"])(_ref18, 1),
2019-09-03 11:07:45 +08:00
startPoint = _ref19[0];
2019-09-24 16:34:08 +08:00
var endPoint = (0, _toConsumableArray2["default"])(startPoint);
2019-09-03 11:07:45 +08:00
endPoint[index] += plus;
2019-09-24 16:34:08 +08:00
return [(0, _toConsumableArray2["default"])(startPoint), endPoint];
2019-09-03 11:07:45 +08:00
});
if (!boundaryGap) splitLinePosition.shift();
return _objectSpread({}, axisItem, {
splitLinePosition: splitLinePosition
});
});
}
function getLineConfig(axisItem) {
var animationCurve = axisItem.animationCurve,
animationFrame = axisItem.animationFrame,
rLevel = axisItem.rLevel;
return [{
name: 'polyline',
index: rLevel,
visible: axisItem.axisLine.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getLineShape(axisItem),
style: getLineStyle(axisItem)
}];
}
function getLineShape(axisItem) {
var linePosition = axisItem.linePosition;
return {
points: linePosition
};
}
function getLineStyle(axisItem) {
return axisItem.axisLine.style;
}
function getTickConfig(axisItem) {
var animationCurve = axisItem.animationCurve,
animationFrame = axisItem.animationFrame,
rLevel = axisItem.rLevel;
var shapes = getTickShapes(axisItem);
var style = getTickStyle(axisItem);
return shapes.map(function (shape) {
return {
name: 'polyline',
index: rLevel,
visible: axisItem.axisTick.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getTickShapes(axisItem) {
var tickLinePosition = axisItem.tickLinePosition;
return tickLinePosition.map(function (points) {
return {
points: points
};
});
}
function getTickStyle(axisItem) {
return axisItem.axisTick.style;
}
function getLabelConfig(axisItem) {
var animationCurve = axisItem.animationCurve,
animationFrame = axisItem.animationFrame,
rLevel = axisItem.rLevel;
var shapes = getLabelShapes(axisItem);
var styles = getLabelStyle(axisItem, shapes);
return shapes.map(function (shape, i) {
return {
name: 'text',
index: rLevel,
visible: axisItem.axisLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: styles[i],
setGraphCenter: function setGraphCenter() {
return void 0;
}
};
});
}
function getLabelShapes(axisItem) {
var label = axisItem.label,
tickPosition = axisItem.tickPosition,
position = axisItem.position;
return tickPosition.map(function (point, i) {
return {
position: getLabelRealPosition(point, position),
content: label[i].toString()
};
});
}
function getLabelRealPosition(points, position) {
var index = 0,
plus = 10;
if (position === 'top' || position === 'bottom') index = 1;
if (position === 'top' || position === 'left') plus = -10;
points = (0, util.deepClone)(points);
points[index] += plus;
return points;
}
function getLabelStyle(axisItem, shapes) {
var position = axisItem.position;
var style = axisItem.axisLabel.style;
var align = getAxisLabelRealAlign(position);
style = (0, util$1.deepMerge)(align, style);
var styles = shapes.map(function (_ref20) {
var position = _ref20.position;
return _objectSpread({}, style, {
graphCenter: position
});
});
return styles;
}
function getAxisLabelRealAlign(position) {
if (position === 'left') return {
textAlign: 'right',
textBaseline: 'middle'
};
if (position === 'right') return {
textAlign: 'left',
textBaseline: 'middle'
};
if (position === 'top') return {
textAlign: 'center',
textBaseline: 'bottom'
};
if (position === 'bottom') return {
textAlign: 'center',
textBaseline: 'top'
};
}
function getNameConfig(axisItem) {
var animationCurve = axisItem.animationCurve,
animationFrame = axisItem.animationFrame,
rLevel = axisItem.rLevel;
return [{
name: 'text',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getNameShape(axisItem),
style: getNameStyle(axisItem)
}];
}
function getNameShape(axisItem) {
var name = axisItem.name,
namePosition = axisItem.namePosition;
return {
content: name,
position: namePosition
};
}
function getNameStyle(axisItem) {
var nameLocation = axisItem.nameLocation,
position = axisItem.position,
style = axisItem.nameTextStyle;
var align = getNameRealAlign(position, nameLocation);
return (0, util$1.deepMerge)(align, style);
}
function getNameRealAlign(position, location) {
if (position === 'top' && location === 'start' || position === 'bottom' && location === 'start' || position === 'left' && location === 'center') return {
textAlign: 'right',
textBaseline: 'middle'
};
if (position === 'top' && location === 'end' || position === 'bottom' && location === 'end' || position === 'right' && location === 'center') return {
textAlign: 'left',
textBaseline: 'middle'
};
if (position === 'top' && location === 'center' || position === 'left' && location === 'end' || position === 'right' && location === 'end') return {
textAlign: 'center',
textBaseline: 'bottom'
};
if (position === 'bottom' && location === 'center' || position === 'left' && location === 'start' || position === 'right' && location === 'start') return {
textAlign: 'center',
textBaseline: 'top'
};
}
function getSplitLineConfig(axisItem) {
var animationCurve = axisItem.animationCurve,
animationFrame = axisItem.animationFrame,
rLevel = axisItem.rLevel;
var shapes = getSplitLineShapes(axisItem);
var style = getSplitLineStyle(axisItem);
return shapes.map(function (shape) {
return {
name: 'polyline',
index: rLevel,
visible: axisItem.splitLine.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getSplitLineShapes(axisItem) {
var splitLinePosition = axisItem.splitLinePosition;
return splitLinePosition.map(function (points) {
return {
points: points
};
});
}
function getSplitLineStyle(axisItem) {
return axisItem.splitLine.style;
}
});
unwrapExports(axis_1$1);
var axis_2$1 = axis_1$1.axis;
var line_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.line = line;
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _bezierCurve = interopRequireDefault(lib$1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
var polylineToBezierCurve = _bezierCurve["default"].polylineToBezierCurve,
getBezierCurveLength = _bezierCurve["default"].getBezierCurveLength;
function line(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var xAxis = option.xAxis,
yAxis = option.yAxis,
series = option.series;
var lines = [];
if (xAxis && yAxis && series) {
lines = (0, util$1.initNeedSeries)(series, config.lineConfig, 'line');
lines = calcLinesPosition(lines, chart);
}
(0, updater_class.doUpdate)({
chart: chart,
series: lines,
key: 'lineArea',
getGraphConfig: getLineAreaConfig,
getStartGraphConfig: getStartLineAreaConfig,
beforeUpdate: beforeUpdateLineAndArea,
beforeChange: beforeChangeLineAndArea
});
(0, updater_class.doUpdate)({
chart: chart,
series: lines,
key: 'line',
getGraphConfig: getLineConfig,
getStartGraphConfig: getStartLineConfig,
beforeUpdate: beforeUpdateLineAndArea,
beforeChange: beforeChangeLineAndArea
});
(0, updater_class.doUpdate)({
chart: chart,
series: lines,
key: 'linePoint',
getGraphConfig: getPointConfig,
getStartGraphConfig: getStartPointConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: lines,
key: 'lineLabel',
getGraphConfig: getLabelConfig
});
}
function calcLinesPosition(lines, chart) {
var axisData = chart.axisData;
return lines.map(function (lineItem) {
var lineData = (0, util$1.mergeSameStackData)(lineItem, lines);
lineData = mergeNonNumber(lineItem, lineData);
var lineAxis = getLineAxis(lineItem, axisData);
var linePosition = getLinePosition(lineData, lineAxis);
var lineFillBottomPos = getLineFillBottomPos(lineAxis);
return _objectSpread({}, lineItem, {
linePosition: linePosition.filter(function (p) {
return p;
}),
lineFillBottomPos: lineFillBottomPos
});
});
}
function mergeNonNumber(lineItem, lineData) {
var data = lineItem.data;
return lineData.map(function (v, i) {
return typeof data[i] === 'number' ? v : null;
});
}
function getLineAxis(line, axisData) {
var xAxisIndex = line.xAxisIndex,
yAxisIndex = line.yAxisIndex;
var xAxis = axisData.find(function (_ref) {
var axis = _ref.axis,
index = _ref.index;
return axis === 'x' && index === xAxisIndex;
});
var yAxis = axisData.find(function (_ref2) {
var axis = _ref2.axis,
index = _ref2.index;
return axis === 'y' && index === yAxisIndex;
});
return [xAxis, yAxis];
}
function getLinePosition(lineData, lineAxis) {
var valueAxisIndex = lineAxis.findIndex(function (_ref3) {
var data = _ref3.data;
return data === 'value';
});
var valueAxis = lineAxis[valueAxisIndex];
var labelAxis = lineAxis[1 - valueAxisIndex];
var linePosition = valueAxis.linePosition,
axis = valueAxis.axis;
var tickPosition = labelAxis.tickPosition;
var tickNum = tickPosition.length;
var valueAxisPosIndex = axis === 'x' ? 0 : 1;
var valueAxisStartPos = linePosition[0][valueAxisPosIndex];
var valueAxisEndPos = linePosition[1][valueAxisPosIndex];
var valueAxisPosMinus = valueAxisEndPos - valueAxisStartPos;
var maxValue = valueAxis.maxValue,
minValue = valueAxis.minValue;
var valueMinus = maxValue - minValue;
var position = new Array(tickNum).fill(0).map(function (foo, i) {
var v = lineData[i];
if (typeof v !== 'number') return null;
var valuePercent = (v - minValue) / valueMinus;
if (valueMinus === 0) valuePercent = 0;
return valuePercent * valueAxisPosMinus + valueAxisStartPos;
});
return position.map(function (vPos, i) {
if (i >= tickNum || typeof vPos !== 'number') return null;
var pos = [vPos, tickPosition[i][1 - valueAxisPosIndex]];
if (valueAxisPosIndex === 0) return pos;
pos.reverse();
return pos;
});
}
function getLineFillBottomPos(lineAxis) {
var valueAxis = lineAxis.find(function (_ref4) {
var data = _ref4.data;
return data === 'value';
});
var axis = valueAxis.axis,
linePosition = valueAxis.linePosition,
minValue = valueAxis.minValue,
maxValue = valueAxis.maxValue;
var changeIndex = axis === 'x' ? 0 : 1;
var changeValue = linePosition[0][changeIndex];
if (minValue < 0 && maxValue > 0) {
var valueMinus = maxValue - minValue;
var posMinus = Math.abs(linePosition[0][changeIndex] - linePosition[1][changeIndex]);
var offset = Math.abs(minValue) / valueMinus * posMinus;
if (axis === 'y') offset *= -1;
changeValue += offset;
}
return {
changeIndex: changeIndex,
changeValue: changeValue
};
}
function getLineAreaConfig(lineItem) {
var animationCurve = lineItem.animationCurve,
animationFrame = lineItem.animationFrame,
lineFillBottomPos = lineItem.lineFillBottomPos,
rLevel = lineItem.rLevel;
return [{
name: getLineGraphName(lineItem),
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
visible: lineItem.lineArea.show,
lineFillBottomPos: lineFillBottomPos,
shape: getLineAndAreaShape(lineItem),
style: getLineAreaStyle(lineItem),
drawed: lineAreaDrawed
}];
}
function getLineAndAreaShape(lineItem) {
var linePosition = lineItem.linePosition;
return {
points: linePosition
};
}
function getLineAreaStyle(lineItem) {
var lineArea = lineItem.lineArea,
color = lineItem.color;
var gradient = lineArea.gradient,
style = lineArea.style;
var fillColor = [style.fill || color];
var gradientColor = (0, util$1.deepMerge)(fillColor, gradient);
if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
var gradientParams = getGradientParams(lineItem);
style = _objectSpread({}, style, {
stroke: 'rgba(0, 0, 0, 0)'
});
return (0, util$1.deepMerge)({
gradientColor: gradientColor,
gradientParams: gradientParams,
gradientType: 'linear',
gradientWith: 'fill'
}, style);
}
function getGradientParams(lineItem) {
var lineFillBottomPos = lineItem.lineFillBottomPos,
linePosition = lineItem.linePosition;
var changeIndex = lineFillBottomPos.changeIndex,
changeValue = lineFillBottomPos.changeValue;
var mainPos = linePosition.map(function (p) {
return p[changeIndex];
});
2019-09-24 16:34:08 +08:00
var maxPos = Math.max.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
var minPos = Math.min.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
2019-09-03 11:07:45 +08:00
var beginPos = maxPos;
if (changeIndex === 1) beginPos = minPos;
if (changeIndex === 1) {
return [0, beginPos, 0, changeValue];
} else {
return [beginPos, 0, changeValue, 0];
}
}
function lineAreaDrawed(_ref5, _ref6) {
var lineFillBottomPos = _ref5.lineFillBottomPos,
shape = _ref5.shape;
var ctx = _ref6.ctx;
var points = shape.points;
var changeIndex = lineFillBottomPos.changeIndex,
changeValue = lineFillBottomPos.changeValue;
2019-09-24 16:34:08 +08:00
var linePoint1 = (0, _toConsumableArray2["default"])(points[points.length - 1]);
var linePoint2 = (0, _toConsumableArray2["default"])(points[0]);
2019-09-03 11:07:45 +08:00
linePoint1[changeIndex] = changeValue;
linePoint2[changeIndex] = changeValue;
2019-09-24 16:34:08 +08:00
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint1));
ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint2));
2019-09-03 11:07:45 +08:00
ctx.closePath();
ctx.fill();
}
function getStartLineAreaConfig(lineItem) {
var config = getLineAreaConfig(lineItem)[0];
var style = _objectSpread({}, config.style);
style.opacity = 0;
config.style = style;
return [config];
}
function beforeUpdateLineAndArea(graphs, lineItem, i, updater) {
var cache = graphs[i];
if (!cache) return;
var currentName = getLineGraphName(lineItem);
var render = updater.chart.render;
var name = cache[0].name;
var delAll = currentName !== name;
if (!delAll) return;
cache.forEach(function (g) {
return render.delGraph(g);
});
graphs[i] = null;
}
function beforeChangeLineAndArea(graph, config) {
var points = config.shape.points;
var graphPoints = graph.shape.points;
var graphPointsNum = graphPoints.length;
var pointsNum = points.length;
if (pointsNum > graphPointsNum) {
var lastPoint = graphPoints.slice(-1)[0];
var newAddPoints = new Array(pointsNum - graphPointsNum).fill(0).map(function (foo) {
2019-09-24 16:34:08 +08:00
return (0, _toConsumableArray2["default"])(lastPoint);
2019-09-03 11:07:45 +08:00
});
2019-09-24 16:34:08 +08:00
graphPoints.push.apply(graphPoints, (0, _toConsumableArray2["default"])(newAddPoints));
2019-09-03 11:07:45 +08:00
} else if (pointsNum < graphPointsNum) {
graphPoints.splice(pointsNum);
}
}
function getLineConfig(lineItem) {
var animationCurve = lineItem.animationCurve,
animationFrame = lineItem.animationFrame,
rLevel = lineItem.rLevel;
return [{
name: getLineGraphName(lineItem),
index: rLevel + 1,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getLineAndAreaShape(lineItem),
style: getLineStyle(lineItem)
}];
}
function getLineGraphName(lineItem) {
var smooth = lineItem.smooth;
return smooth ? 'smoothline' : 'polyline';
}
function getLineStyle(lineItem) {
var lineStyle = lineItem.lineStyle,
color = lineItem.color,
smooth = lineItem.smooth,
linePosition = lineItem.linePosition;
var lineLength = getLineLength(linePosition, smooth);
return (0, util$1.deepMerge)({
stroke: color,
lineDash: [lineLength, 0]
}, lineStyle);
}
function getLineLength(points) {
var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!smooth) return (0, util$1.getPolylineLength)(points);
var curve = polylineToBezierCurve(points);
return getBezierCurveLength(curve);
}
function getStartLineConfig(lineItem) {
var lineDash = lineItem.lineStyle.lineDash;
var config = getLineConfig(lineItem)[0];
var realLineDash = config.style.lineDash;
if (lineDash) {
realLineDash = [0, 0];
} else {
2019-09-24 16:34:08 +08:00
realLineDash = (0, _toConsumableArray2["default"])(realLineDash).reverse();
2019-09-03 11:07:45 +08:00
}
config.style.lineDash = realLineDash;
return [config];
}
function getPointConfig(lineItem) {
var animationCurve = lineItem.animationCurve,
animationFrame = lineItem.animationFrame,
rLevel = lineItem.rLevel;
var shapes = getPointShapes(lineItem);
var style = getPointStyle(lineItem);
return shapes.map(function (shape) {
return {
name: 'circle',
index: rLevel + 2,
visible: lineItem.linePoint.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getPointShapes(lineItem) {
var linePosition = lineItem.linePosition,
radius = lineItem.linePoint.radius;
return linePosition.map(function (_ref7) {
2019-09-24 16:34:08 +08:00
var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
2019-09-03 11:07:45 +08:00
rx = _ref8[0],
ry = _ref8[1];
return {
r: radius,
rx: rx,
ry: ry
};
});
}
function getPointStyle(lineItem) {
var color = lineItem.color,
style = lineItem.linePoint.style;
return (0, util$1.deepMerge)({
stroke: color
}, style);
}
function getStartPointConfig(lineItem) {
var configs = getPointConfig(lineItem);
configs.forEach(function (config) {
config.shape.r = 0.1;
});
return configs;
}
function getLabelConfig(lineItem) {
var animationCurve = lineItem.animationCurve,
animationFrame = lineItem.animationFrame,
rLevel = lineItem.rLevel;
var shapes = getLabelShapes(lineItem);
var style = getLabelStyle(lineItem);
return shapes.map(function (shape, i) {
return {
name: 'text',
index: rLevel + 3,
visible: lineItem.label.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getLabelShapes(lineItem) {
var contents = formatterLabel(lineItem);
var position = getLabelPosition(lineItem);
return contents.map(function (content, i) {
return {
content: content,
position: position[i]
};
});
}
function getLabelPosition(lineItem) {
var linePosition = lineItem.linePosition,
lineFillBottomPos = lineItem.lineFillBottomPos,
label = lineItem.label;
var position = label.position,
offset = label.offset;
var changeIndex = lineFillBottomPos.changeIndex,
changeValue = lineFillBottomPos.changeValue;
return linePosition.map(function (pos) {
if (position === 'bottom') {
2019-09-24 16:34:08 +08:00
pos = (0, _toConsumableArray2["default"])(pos);
2019-09-03 11:07:45 +08:00
pos[changeIndex] = changeValue;
}
if (position === 'center') {
2019-09-24 16:34:08 +08:00
var bottom = (0, _toConsumableArray2["default"])(pos);
2019-09-03 11:07:45 +08:00
bottom[changeIndex] = changeValue;
pos = getCenterLabelPoint(pos, bottom);
}
return getOffsetedPoint(pos, offset);
});
}
function getOffsetedPoint(_ref9, _ref10) {
2019-09-24 16:34:08 +08:00
var _ref11 = (0, _slicedToArray2["default"])(_ref9, 2),
2019-09-03 11:07:45 +08:00
x = _ref11[0],
y = _ref11[1];
2019-09-24 16:34:08 +08:00
var _ref12 = (0, _slicedToArray2["default"])(_ref10, 2),
2019-09-03 11:07:45 +08:00
ox = _ref12[0],
oy = _ref12[1];
return [x + ox, y + oy];
}
function getCenterLabelPoint(_ref13, _ref14) {
2019-09-24 16:34:08 +08:00
var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
2019-09-03 11:07:45 +08:00
ax = _ref15[0],
ay = _ref15[1];
2019-09-24 16:34:08 +08:00
var _ref16 = (0, _slicedToArray2["default"])(_ref14, 2),
2019-09-03 11:07:45 +08:00
bx = _ref16[0],
by = _ref16[1];
return [(ax + bx) / 2, (ay + by) / 2];
}
function formatterLabel(lineItem) {
var data = lineItem.data,
formatter = lineItem.label.formatter;
data = data.filter(function (d) {
return typeof d === 'number';
}).map(function (d) {
return d.toString();
});
if (!formatter) return data;
2019-09-24 16:34:08 +08:00
var type = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
if (type === 'string') return data.map(function (d) {
return formatter.replace('{value}', d);
});
if (type === 'function') return data.map(function (value, index) {
return formatter({
value: value,
index: index
});
});
return data;
}
function getLabelStyle(lineItem) {
var color = lineItem.color,
style = lineItem.label.style;
2019-09-24 16:34:08 +08:00
return (0, util$1.deepMerge)({
fill: color
}, style);
}
});
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
unwrapExports(line_1$1);
var line_2 = line_1$1.line;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var bar_1$1 = createCommonjsModule(function (module, exports) {
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bar = bar;
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function bar(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var xAxis = option.xAxis,
yAxis = option.yAxis,
series = option.series;
var bars = [];
if (xAxis && yAxis && series) {
bars = (0, util$1.initNeedSeries)(series, config.barConfig, 'bar');
bars = setBarAxis(bars, chart);
bars = setBarPositionData(bars);
bars = calcBarsPosition(bars);
}
(0, updater_class.doUpdate)({
chart: chart,
series: bars.slice(-1),
key: 'backgroundBar',
getGraphConfig: getBackgroundBarConfig
});
bars.reverse();
(0, updater_class.doUpdate)({
chart: chart,
series: bars,
key: 'bar',
getGraphConfig: getBarConfig,
getStartGraphConfig: getStartBarConfig,
beforeUpdate: beforeUpdateBar
});
(0, updater_class.doUpdate)({
chart: chart,
series: bars,
key: 'barLabel',
getGraphConfig: getLabelConfig
});
}
function setBarAxis(bars, chart) {
var axisData = chart.axisData;
bars.forEach(function (bar) {
var xAxisIndex = bar.xAxisIndex,
yAxisIndex = bar.yAxisIndex;
if (typeof xAxisIndex !== 'number') xAxisIndex = 0;
if (typeof yAxisIndex !== 'number') yAxisIndex = 0;
var xAxis = axisData.find(function (_ref) {
var axis = _ref.axis,
index = _ref.index;
return "".concat(axis).concat(index) === "x".concat(xAxisIndex);
});
var yAxis = axisData.find(function (_ref2) {
var axis = _ref2.axis,
index = _ref2.index;
return "".concat(axis).concat(index) === "y".concat(yAxisIndex);
});
var axis = [xAxis, yAxis];
var valueAxisIndex = axis.findIndex(function (_ref3) {
var data = _ref3.data;
return data === 'value';
});
bar.valueAxis = axis[valueAxisIndex];
bar.labelAxis = axis[1 - valueAxisIndex];
});
return bars;
}
function setBarPositionData(bars, chart) {
var labelBarGroup = groupBarByLabelAxis(bars);
labelBarGroup.forEach(function (group) {
setBarIndex(group);
setBarNum(group);
setBarCategoryWidth(group);
setBarWidthAndGap(group);
setBarAllWidthAndGap(group);
});
return bars;
}
function setBarIndex(bars) {
var stacks = getBarStack(bars);
stacks = stacks.map(function (stack) {
return {
stack: stack,
index: -1
};
});
var currentIndex = 0;
bars.forEach(function (bar) {
var stack = bar.stack;
if (!stack) {
bar.barIndex = currentIndex;
currentIndex++;
} else {
var stackData = stacks.find(function (_ref4) {
var s = _ref4.stack;
return s === stack;
});
if (stackData.index === -1) {
stackData.index = currentIndex;
currentIndex++;
}
bar.barIndex = stackData.index;
}
});
}
function groupBarByLabelAxis(bars) {
var labelAxis = bars.map(function (_ref5) {
var _ref5$labelAxis = _ref5.labelAxis,
axis = _ref5$labelAxis.axis,
index = _ref5$labelAxis.index;
return axis + index;
});
2019-09-24 16:34:08 +08:00
labelAxis = (0, _toConsumableArray2["default"])(new Set(labelAxis));
2019-09-03 11:07:45 +08:00
return labelAxis.map(function (axisIndex) {
return bars.filter(function (_ref6) {
var _ref6$labelAxis = _ref6.labelAxis,
axis = _ref6$labelAxis.axis,
index = _ref6$labelAxis.index;
return axis + index === axisIndex;
});
});
}
function getBarStack(bars) {
var stacks = [];
bars.forEach(function (_ref7) {
var stack = _ref7.stack;
if (stack) stacks.push(stack);
});
2019-09-24 16:34:08 +08:00
return (0, _toConsumableArray2["default"])(new Set(stacks));
2019-09-03 11:07:45 +08:00
}
function setBarNum(bars) {
2019-09-24 16:34:08 +08:00
var barNum = (0, _toConsumableArray2["default"])(new Set(bars.map(function (_ref8) {
2019-09-03 11:07:45 +08:00
var barIndex = _ref8.barIndex;
return barIndex;
}))).length;
bars.forEach(function (bar) {
return bar.barNum = barNum;
});
}
function setBarCategoryWidth(bars) {
var lastBar = bars.slice(-1)[0];
var barCategoryGap = lastBar.barCategoryGap,
tickGap = lastBar.labelAxis.tickGap;
var barCategoryWidth = 0;
if (typeof barCategoryGap === 'number') {
barCategoryWidth = barCategoryGap;
} else {
barCategoryWidth = (1 - parseInt(barCategoryGap) / 100) * tickGap;
}
bars.forEach(function (bar) {
return bar.barCategoryWidth = barCategoryWidth;
});
}
function setBarWidthAndGap(bars) {
var _bars$slice$ = bars.slice(-1)[0],
barCategoryWidth = _bars$slice$.barCategoryWidth,
barWidth = _bars$slice$.barWidth,
barGap = _bars$slice$.barGap,
barNum = _bars$slice$.barNum;
var widthAndGap = [];
if (typeof barWidth === 'number' || barWidth !== 'auto') {
widthAndGap = getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap);
} else if (barWidth === 'auto') {
widthAndGap = getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum);
}
var _widthAndGap = widthAndGap,
2019-09-24 16:34:08 +08:00
_widthAndGap2 = (0, _slicedToArray2["default"])(_widthAndGap, 2),
2019-09-03 11:07:45 +08:00
width = _widthAndGap2[0],
gap = _widthAndGap2[1];
bars.forEach(function (bar) {
bar.barWidth = width;
bar.barGap = gap;
});
}
function getBarWidthAndGapWithPercentOrNumber(barCategoryWidth, barWidth, barGap) {
var width = 0,
gap = 0;
if (typeof barWidth === 'number') {
width = barWidth;
} else {
width = parseInt(barWidth) / 100 * barCategoryWidth;
}
if (typeof barGap === 'number') {
gap = barGap;
} else {
gap = parseInt(barGap) / 100 * width;
}
return [width, gap];
}
function getBarWidthAndGapWidthAuto(barCategoryWidth, barWidth, barGap, barNum) {
var width = 0,
gap = 0;
var barItemWidth = barCategoryWidth / barNum;
if (typeof barGap === 'number') {
gap = barGap;
width = barItemWidth - gap;
} else {
var percent = 10 + parseInt(barGap) / 10;
if (percent === 0) {
width = barItemWidth * 2;
gap = -width;
} else {
width = barItemWidth / percent * 10;
gap = barItemWidth - width;
}
}
return [width, gap];
}
function setBarAllWidthAndGap(bars) {
var _bars$slice$2 = bars.slice(-1)[0],
barGap = _bars$slice$2.barGap,
barWidth = _bars$slice$2.barWidth,
barNum = _bars$slice$2.barNum;
var barAllWidthAndGap = (barGap + barWidth) * barNum - barGap;
bars.forEach(function (bar) {
return bar.barAllWidthAndGap = barAllWidthAndGap;
});
}
function calcBarsPosition(bars, chart) {
bars = calcBarValueAxisCoordinate(bars);
bars = calcBarLabelAxisCoordinate(bars);
bars = eliminateNullBarLabelAxis(bars);
bars = keepSameNumBetweenBarAndData(bars);
return bars;
}
function calcBarLabelAxisCoordinate(bars) {
return bars.map(function (bar) {
var labelAxis = bar.labelAxis,
barAllWidthAndGap = bar.barAllWidthAndGap,
barGap = bar.barGap,
barWidth = bar.barWidth,
barIndex = bar.barIndex;
var tickGap = labelAxis.tickGap,
tickPosition = labelAxis.tickPosition,
axis = labelAxis.axis;
var coordinateIndex = axis === 'x' ? 0 : 1;
var barLabelAxisPos = tickPosition.map(function (tick, i) {
var barCategoryStartPos = tickPosition[i][coordinateIndex] - tickGap / 2;
var barItemsStartPos = barCategoryStartPos + (tickGap - barAllWidthAndGap) / 2;
return barItemsStartPos + (barIndex + 0.5) * barWidth + barIndex * barGap;
});
return _objectSpread({}, bar, {
barLabelAxisPos: barLabelAxisPos
});
});
}
function calcBarValueAxisCoordinate(bars) {
return bars.map(function (bar) {
var data = (0, util$1.mergeSameStackData)(bar, bars);
data = eliminateNonNumberData(bar, data);
var _bar$valueAxis = bar.valueAxis,
axis = _bar$valueAxis.axis,
minValue = _bar$valueAxis.minValue,
maxValue = _bar$valueAxis.maxValue,
linePosition = _bar$valueAxis.linePosition;
var startPos = getValuePos(minValue, maxValue, minValue < 0 ? 0 : minValue, linePosition, axis);
var endPos = data.map(function (v) {
return getValuePos(minValue, maxValue, v, linePosition, axis);
});
var barValueAxisPos = endPos.map(function (p) {
return [startPos, p];
});
return _objectSpread({}, bar, {
barValueAxisPos: barValueAxisPos
});
});
}
function eliminateNonNumberData(barItem, barData) {
var data = barItem.data;
return barData.map(function (v, i) {
return typeof data[i] === 'number' ? v : null;
}).filter(function (d) {
return d !== null;
});
}
function eliminateNullBarLabelAxis(bars) {
return bars.map(function (bar) {
var barLabelAxisPos = bar.barLabelAxisPos,
data = bar.data;
data.forEach(function (d, i) {
if (typeof d === 'number') return;
barLabelAxisPos[i] = null;
});
return _objectSpread({}, bar, {
barLabelAxisPos: barLabelAxisPos.filter(function (p) {
return p !== null;
})
});
});
}
function keepSameNumBetweenBarAndData(bars) {
bars.forEach(function (bar) {
var data = bar.data,
barLabelAxisPos = bar.barLabelAxisPos,
barValueAxisPos = bar.barValueAxisPos;
var dataNum = data.filter(function (d) {
return typeof d === 'number';
}).length;
var axisPosNum = barLabelAxisPos.length;
if (axisPosNum > dataNum) {
barLabelAxisPos.splice(dataNum);
barValueAxisPos.splice(dataNum);
}
});
return bars;
}
function getValuePos(min, max, value, linePosition, axis) {
if (typeof value !== 'number') return null;
var valueMinus = max - min;
var coordinateIndex = axis === 'x' ? 0 : 1;
var posMinus = linePosition[1][coordinateIndex] - linePosition[0][coordinateIndex];
var percent = (value - min) / valueMinus;
if (valueMinus === 0) percent = 0;
var pos = percent * posMinus;
return pos + linePosition[0][coordinateIndex];
}
function getBackgroundBarConfig(barItem) {
var animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var shapes = getBackgroundBarShapes(barItem);
var style = getBackgroundBarStyle(barItem);
return shapes.map(function (shape) {
return {
name: 'rect',
index: rLevel,
visible: barItem.backgroundBar.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getBackgroundBarShapes(barItem) {
var labelAxis = barItem.labelAxis,
valueAxis = barItem.valueAxis;
var tickPosition = labelAxis.tickPosition;
var axis = valueAxis.axis,
linePosition = valueAxis.linePosition;
var width = getBackgroundBarWidth(barItem);
var haltWidth = width / 2;
var posIndex = axis === 'x' ? 0 : 1;
var centerPos = tickPosition.map(function (p) {
return p[1 - posIndex];
});
var _ref9 = [linePosition[0][posIndex], linePosition[1][posIndex]],
start = _ref9[0],
end = _ref9[1];
return centerPos.map(function (center) {
if (axis === 'x') {
return {
x: start,
y: center - haltWidth,
w: end - start,
h: width
};
} else {
return {
x: center - haltWidth,
y: end,
w: width,
h: start - end
};
}
});
}
function getBackgroundBarWidth(barItem) {
var barAllWidthAndGap = barItem.barAllWidthAndGap,
barCategoryWidth = barItem.barCategoryWidth,
backgroundBar = barItem.backgroundBar;
var width = backgroundBar.width;
if (typeof width === 'number') return width;
if (width === 'auto') return barAllWidthAndGap;
return parseInt(width) / 100 * barCategoryWidth;
}
function getBackgroundBarStyle(barItem) {
return barItem.backgroundBar.style;
}
function getBarConfig(barItem) {
var barLabelAxisPos = barItem.barLabelAxisPos,
animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var name = getBarName(barItem);
return barLabelAxisPos.map(function (foo, i) {
return {
name: name,
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getBarShape(barItem, i),
style: getBarStyle(barItem, i)
};
});
}
function getBarName(barItem) {
var shapeType = barItem.shapeType;
if (shapeType === 'leftEchelon' || shapeType === 'rightEchelon') return 'polyline';
return 'rect';
}
function getBarShape(barItem, i) {
var shapeType = barItem.shapeType;
if (shapeType === 'leftEchelon') {
return getLeftEchelonShape(barItem, i);
} else if (shapeType === 'rightEchelon') {
return getRightEchelonShape(barItem, i);
} else {
return getNormalBarShape(barItem, i);
}
}
function getLeftEchelonShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth,
echelonOffset = barItem.echelonOffset;
2019-09-24 16:34:08 +08:00
var _barValueAxisPos$i = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
2019-09-03 11:07:45 +08:00
start = _barValueAxisPos$i[0],
end = _barValueAxisPos$i[1];
var labelAxisPos = barLabelAxisPos[i];
var halfWidth = barWidth / 2;
var valueAxis = barItem.valueAxis.axis;
var points = [];
if (valueAxis === 'x') {
points[0] = [end, labelAxisPos - halfWidth];
points[1] = [end, labelAxisPos + halfWidth];
points[2] = [start, labelAxisPos + halfWidth];
points[3] = [start + echelonOffset, labelAxisPos - halfWidth];
if (end - start < echelonOffset) points.splice(3, 1);
} else {
points[0] = [labelAxisPos - halfWidth, end];
points[1] = [labelAxisPos + halfWidth, end];
points[2] = [labelAxisPos + halfWidth, start];
points[3] = [labelAxisPos - halfWidth, start - echelonOffset];
if (start - end < echelonOffset) points.splice(3, 1);
}
return {
points: points,
close: true
};
}
function getRightEchelonShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth,
echelonOffset = barItem.echelonOffset;
2019-09-24 16:34:08 +08:00
var _barValueAxisPos$i2 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
2019-09-03 11:07:45 +08:00
start = _barValueAxisPos$i2[0],
end = _barValueAxisPos$i2[1];
var labelAxisPos = barLabelAxisPos[i];
var halfWidth = barWidth / 2;
var valueAxis = barItem.valueAxis.axis;
var points = [];
if (valueAxis === 'x') {
points[0] = [end, labelAxisPos + halfWidth];
points[1] = [end, labelAxisPos - halfWidth];
points[2] = [start, labelAxisPos - halfWidth];
points[3] = [start + echelonOffset, labelAxisPos + halfWidth];
if (end - start < echelonOffset) points.splice(2, 1);
} else {
points[0] = [labelAxisPos + halfWidth, end];
points[1] = [labelAxisPos - halfWidth, end];
points[2] = [labelAxisPos - halfWidth, start];
points[3] = [labelAxisPos + halfWidth, start - echelonOffset];
if (start - end < echelonOffset) points.splice(2, 1);
}
return {
points: points,
close: true
};
}
function getNormalBarShape(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
barWidth = barItem.barWidth;
2019-09-24 16:34:08 +08:00
var _barValueAxisPos$i3 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
2019-09-03 11:07:45 +08:00
start = _barValueAxisPos$i3[0],
end = _barValueAxisPos$i3[1];
var labelAxisPos = barLabelAxisPos[i];
var valueAxis = barItem.valueAxis.axis;
var shape = {};
if (valueAxis === 'x') {
shape.x = start;
shape.y = labelAxisPos - barWidth / 2;
shape.w = end - start;
shape.h = barWidth;
} else {
shape.x = labelAxisPos - barWidth / 2;
shape.y = end;
shape.w = barWidth;
shape.h = start - end;
}
return shape;
}
function getBarStyle(barItem, i) {
var barStyle = barItem.barStyle,
gradient = barItem.gradient,
2020-04-28 18:41:09 +08:00
color = barItem.color,
independentColor = barItem.independentColor,
independentColors = barItem.independentColors;
2019-09-03 11:07:45 +08:00
var fillColor = [barStyle.fill || color];
var gradientColor = (0, util$1.deepMerge)(fillColor, gradient.color);
2020-04-28 18:41:09 +08:00
if (independentColor) {
var idtColor = independentColors[i % independentColors.length];
gradientColor = idtColor instanceof Array ? idtColor : [idtColor];
}
2019-09-03 11:07:45 +08:00
if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
var gradientParams = getGradientParams(barItem, i);
return (0, util$1.deepMerge)({
gradientColor: gradientColor,
gradientParams: gradientParams,
gradientType: 'linear',
gradientWith: 'fill'
}, barStyle);
}
function getGradientParams(barItem, i) {
var barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos,
data = barItem.data;
var _barItem$valueAxis = barItem.valueAxis,
linePosition = _barItem$valueAxis.linePosition,
axis = _barItem$valueAxis.axis;
2019-09-24 16:34:08 +08:00
var _barValueAxisPos$i4 = (0, _slicedToArray2["default"])(barValueAxisPos[i], 2),
2019-09-03 11:07:45 +08:00
start = _barValueAxisPos$i4[0],
end = _barValueAxisPos$i4[1];
var labelAxisPos = barLabelAxisPos[i];
var value = data[i];
2019-09-24 16:34:08 +08:00
var _linePosition = (0, _slicedToArray2["default"])(linePosition, 2),
2019-09-03 11:07:45 +08:00
lineStart = _linePosition[0],
lineEnd = _linePosition[1];
var valueAxisIndex = axis === 'x' ? 0 : 1;
var endPos = end;
if (!barItem.gradient.local) {
endPos = value < 0 ? lineStart[valueAxisIndex] : lineEnd[valueAxisIndex];
}
if (axis === 'y') {
return [labelAxisPos, endPos, labelAxisPos, start];
} else {
return [endPos, labelAxisPos, start, labelAxisPos];
}
}
function getStartBarConfig(barItem) {
var configs = getBarConfig(barItem);
var shapeType = barItem.shapeType;
configs.forEach(function (config) {
var shape = config.shape;
if (shapeType === 'leftEchelon') {
shape = getStartLeftEchelonShape(shape, barItem);
} else if (shapeType === 'rightEchelon') {
shape = getStartRightEchelonShape(shape, barItem);
} else {
shape = getStartNormalBarShape(shape, barItem);
}
config.shape = shape;
});
return configs;
}
function getStartLeftEchelonShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
shape = (0, util.deepClone)(shape);
var _shape = shape,
points = _shape.points;
var index = axis === 'x' ? 0 : 1;
var start = points[2][index];
points.forEach(function (point) {
return point[index] = start;
});
return shape;
}
function getStartRightEchelonShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
shape = (0, util.deepClone)(shape);
var _shape2 = shape,
points = _shape2.points;
var index = axis === 'x' ? 0 : 1;
var start = points[2][index];
points.forEach(function (point) {
return point[index] = start;
});
return shape;
}
function getStartNormalBarShape(shape, barItem) {
var axis = barItem.valueAxis.axis;
var x = shape.x,
y = shape.y,
w = shape.w,
h = shape.h;
if (axis === 'x') {
w = 0;
} else {
y = y + h;
h = 0;
}
return {
x: x,
y: y,
w: w,
h: h
};
}
function beforeUpdateBar(graphs, barItem, i, updater) {
var render = updater.chart.render;
var name = getBarName(barItem);
if (graphs[i] && graphs[i][0].name !== name) {
graphs[i].forEach(function (g) {
return render.delGraph(g);
});
graphs[i] = null;
}
}
function getLabelConfig(barItem) {
var animationCurve = barItem.animationCurve,
animationFrame = barItem.animationFrame,
rLevel = barItem.rLevel;
var shapes = getLabelShapes(barItem);
var style = getLabelStyle(barItem);
return shapes.map(function (shape) {
return {
name: 'text',
index: rLevel,
visible: barItem.label.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: shape,
style: style
};
});
}
function getLabelShapes(barItem) {
var contents = getFormatterLabels(barItem);
var position = getLabelsPosition(barItem);
return position.map(function (pos, i) {
return {
position: pos,
content: contents[i]
};
});
}
function getFormatterLabels(barItem) {
var data = barItem.data,
label = barItem.label;
var formatter = label.formatter;
data = data.filter(function (d) {
return typeof d === 'number';
}).map(function (d) {
return d.toString();
});
if (!formatter) return data;
2019-09-24 16:34:08 +08:00
var type = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
if (type === 'string') return data.map(function (d) {
return formatter.replace('{value}', d);
});
if (type === 'function') return data.map(function (d, i) {
return formatter({
value: d,
index: i
});
});
return data;
}
function getLabelsPosition(barItem) {
var label = barItem.label,
barValueAxisPos = barItem.barValueAxisPos,
barLabelAxisPos = barItem.barLabelAxisPos;
var position = label.position,
offset = label.offset;
var axis = barItem.valueAxis.axis;
return barValueAxisPos.map(function (_ref10, i) {
2019-09-24 16:34:08 +08:00
var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
2019-09-03 11:07:45 +08:00
start = _ref11[0],
end = _ref11[1];
var labelAxisPos = barLabelAxisPos[i];
var pos = [end, labelAxisPos];
if (position === 'bottom') {
pos = [start, labelAxisPos];
}
if (position === 'center') {
pos = [(start + end) / 2, labelAxisPos];
}
if (axis === 'y') pos.reverse();
return getOffsetedPoint(pos, offset);
});
}
function getOffsetedPoint(_ref12, _ref13) {
2019-09-24 16:34:08 +08:00
var _ref14 = (0, _slicedToArray2["default"])(_ref12, 2),
2019-09-03 11:07:45 +08:00
x = _ref14[0],
y = _ref14[1];
2019-09-24 16:34:08 +08:00
var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
2019-09-03 11:07:45 +08:00
ox = _ref15[0],
oy = _ref15[1];
return [x + ox, y + oy];
}
function getLabelStyle(barItem) {
var color = barItem.color,
style = barItem.label.style,
gc = barItem.gradient.color;
if (gc.length) color = gc[0];
style = (0, util$1.deepMerge)({
fill: color
}, style);
return style;
}
});
unwrapExports(bar_1$1);
var bar_2 = bar_1$1.bar;
var pie_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pie = pie;
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function pie(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var series = option.series;
if (!series) series = [];
var pies = (0, util$1.initNeedSeries)(series, pie$1.pieConfig, 'pie');
pies = calcPiesCenter(pies, chart);
pies = calcPiesRadius(pies, chart);
pies = calcRosePiesRadius(pies);
pies = calcPiesPercent(pies);
pies = calcPiesAngle(pies);
pies = calcPiesInsideLabelPos(pies);
pies = calcPiesEdgeCenterPos(pies);
pies = calcPiesOutSideLabelPos(pies);
(0, updater_class.doUpdate)({
chart: chart,
series: pies,
key: 'pie',
getGraphConfig: getPieConfig,
getStartGraphConfig: getStartPieConfig,
beforeChange: beforeChangePie
});
(0, updater_class.doUpdate)({
chart: chart,
series: pies,
key: 'pieInsideLabel',
getGraphConfig: getInsideLabelConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: pies,
key: 'pieOutsideLabelLine',
getGraphConfig: getOutsideLabelLineConfig,
getStartGraphConfig: getStartOutsideLabelLineConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: pies,
key: 'pieOutsideLabel',
getGraphConfig: getOutsideLabelConfig,
getStartGraphConfig: getStartOutsideLabelConfig
});
}
function calcPiesCenter(pies, chart) {
var area = chart.render.area;
pies.forEach(function (pie) {
var center = pie.center;
center = center.map(function (pos, i) {
if (typeof pos === 'number') return pos;
return parseInt(pos) / 100 * area[i];
});
pie.center = center;
});
return pies;
}
function calcPiesRadius(pies, chart) {
2019-09-24 16:34:08 +08:00
var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(chart.render.area)) / 2;
2019-09-03 11:07:45 +08:00
pies.forEach(function (pie) {
var radius = pie.radius,
data = pie.data;
radius = getNumberRadius(radius, maxRadius);
data.forEach(function (item) {
var itemRadius = item.radius;
if (!itemRadius) itemRadius = radius;
itemRadius = getNumberRadius(itemRadius, maxRadius);
item.radius = itemRadius;
});
pie.radius = radius;
});
return pies;
}
function getNumberRadius(radius, maxRadius) {
if (!(radius instanceof Array)) radius = [0, radius];
radius = radius.map(function (r) {
if (typeof r === 'number') return r;
return parseInt(r) / 100 * maxRadius;
});
return radius;
}
function calcRosePiesRadius(pies, chart) {
var rosePie = pies.filter(function (_ref) {
var roseType = _ref.roseType;
return roseType;
});
rosePie.forEach(function (pie) {
var radius = pie.radius,
data = pie.data,
roseSort = pie.roseSort;
var roseIncrement = getRoseIncrement(pie);
2019-09-24 16:34:08 +08:00
var dataCopy = (0, _toConsumableArray2["default"])(data);
2019-09-03 11:07:45 +08:00
data = sortData(data);
data.forEach(function (item, i) {
item.radius[1] = radius[1] - roseIncrement * i;
});
if (roseSort) {
data.reverse();
} else {
pie.data = dataCopy;
}
pie.roseIncrement = roseIncrement;
});
return pies;
}
function sortData(data) {
return data.sort(function (_ref2, _ref3) {
var a = _ref2.value;
var b = _ref3.value;
if (a === b) return 0;
if (a > b) return -1;
if (a < b) return 1;
});
}
function getRoseIncrement(pie) {
var radius = pie.radius,
roseIncrement = pie.roseIncrement;
if (typeof roseIncrement === 'number') return roseIncrement;
if (roseIncrement === 'auto') {
var data = pie.data;
var allRadius = data.reduce(function (all, _ref4) {
var radius = _ref4.radius;
2019-09-24 16:34:08 +08:00
return [].concat((0, _toConsumableArray2["default"])(all), (0, _toConsumableArray2["default"])(radius));
2019-09-03 11:07:45 +08:00
}, []);
2019-09-24 16:34:08 +08:00
var minRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(allRadius));
var maxRadius = Math.max.apply(Math, (0, _toConsumableArray2["default"])(allRadius));
2019-09-03 11:07:45 +08:00
return (maxRadius - minRadius) * 0.6 / (data.length - 1 || 1);
}
return parseInt(roseIncrement) / 100 * radius[1];
}
function calcPiesPercent(pies) {
pies.forEach(function (pie) {
var data = pie.data,
percentToFixed = pie.percentToFixed;
var sum = getDataSum(data);
data.forEach(function (item) {
var value = item.value;
2020-05-06 15:07:19 +08:00
item.percent = value / sum * 100;
item.percentForLabel = toFixedNoCeil(value / sum * 100, percentToFixed);
2019-09-03 11:07:45 +08:00
});
var percentSumNoLast = (0, util$1.mulAdd)(data.slice(0, -1).map(function (_ref5) {
var percent = _ref5.percent;
return percent;
}));
2020-05-06 15:07:19 +08:00
data.slice(-1)[0].percent = 100 - percentSumNoLast;
data.slice(-1)[0].percentForLabel = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
2019-09-03 11:07:45 +08:00
});
return pies;
}
2020-04-28 18:41:09 +08:00
function toFixedNoCeil(number) {
var toFixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var stringNumber = number.toString();
var splitedNumber = stringNumber.split('.');
var decimal = splitedNumber[1] || '0';
var fixedDecimal = decimal.slice(0, toFixed);
splitedNumber[1] = fixedDecimal;
return parseFloat(splitedNumber.join('.'));
}
2019-09-03 11:07:45 +08:00
function getDataSum(data) {
return (0, util$1.mulAdd)(data.map(function (_ref6) {
var value = _ref6.value;
return value;
}));
}
function calcPiesAngle(pies) {
pies.forEach(function (pie) {
var start = pie.startAngle,
data = pie.data;
data.forEach(function (item, i) {
var _getDataAngle = getDataAngle(data, i),
2019-09-24 16:34:08 +08:00
_getDataAngle2 = (0, _slicedToArray2["default"])(_getDataAngle, 2),
2019-09-03 11:07:45 +08:00
startAngle = _getDataAngle2[0],
endAngle = _getDataAngle2[1];
item.startAngle = start + startAngle;
item.endAngle = start + endAngle;
});
});
return pies;
}
function getDataAngle(data, i) {
var fullAngle = Math.PI * 2;
var needAddData = data.slice(0, i + 1);
var percentSum = (0, util$1.mulAdd)(needAddData.map(function (_ref7) {
var percent = _ref7.percent;
return percent;
}));
var percent = data[i].percent;
var startPercent = percentSum - percent;
return [fullAngle * startPercent / 100, fullAngle * percentSum / 100];
}
function calcPiesInsideLabelPos(pies) {
pies.forEach(function (pieItem) {
var data = pieItem.data;
data.forEach(function (item) {
item.insideLabelPos = getPieInsideLabelPos(pieItem, item);
});
});
return pies;
}
function getPieInsideLabelPos(pieItem, dataItem) {
var center = pieItem.center;
var startAngle = dataItem.startAngle,
endAngle = dataItem.endAngle,
2019-09-24 16:34:08 +08:00
_dataItem$radius = (0, _slicedToArray2["default"])(dataItem.radius, 2),
2019-09-03 11:07:45 +08:00
ir = _dataItem$radius[0],
or = _dataItem$radius[1];
var radius = (ir + or) / 2;
var angle = (startAngle + endAngle) / 2;
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, angle]));
2019-09-03 11:07:45 +08:00
}
function calcPiesEdgeCenterPos(pies) {
pies.forEach(function (pie) {
var data = pie.data,
center = pie.center;
data.forEach(function (item) {
var startAngle = item.startAngle,
endAngle = item.endAngle,
radius = item.radius;
var centerAngle = (startAngle + endAngle) / 2;
2019-09-24 16:34:08 +08:00
var pos = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius[1], centerAngle]));
2019-09-03 11:07:45 +08:00
item.edgeCenterPos = pos;
});
});
return pies;
}
function calcPiesOutSideLabelPos(pies) {
pies.forEach(function (pieItem) {
var leftPieDataItems = getLeftOrRightPieDataItems(pieItem);
var rightPieDataItems = getLeftOrRightPieDataItems(pieItem, false);
leftPieDataItems = sortPiesFromTopToBottom(leftPieDataItems);
rightPieDataItems = sortPiesFromTopToBottom(rightPieDataItems);
addLabelLineAndAlign(leftPieDataItems, pieItem);
addLabelLineAndAlign(rightPieDataItems, pieItem, false);
});
return pies;
}
function getLabelLineBendRadius(pieItem) {
var labelLineBendGap = pieItem.outsideLabel.labelLineBendGap;
var maxRadius = getPieMaxRadius(pieItem);
if (typeof labelLineBendGap !== 'number') {
labelLineBendGap = parseInt(labelLineBendGap) / 100 * maxRadius;
}
return labelLineBendGap + maxRadius;
}
function getPieMaxRadius(pieItem) {
var data = pieItem.data;
var radius = data.map(function (_ref8) {
2019-09-24 16:34:08 +08:00
var _ref8$radius = (0, _slicedToArray2["default"])(_ref8.radius, 2),
2019-09-03 11:07:45 +08:00
foo = _ref8$radius[0],
r = _ref8$radius[1];
return r;
});
2019-09-24 16:34:08 +08:00
return Math.max.apply(Math, (0, _toConsumableArray2["default"])(radius));
2019-09-03 11:07:45 +08:00
}
function getLeftOrRightPieDataItems(pieItem) {
var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var data = pieItem.data,
center = pieItem.center;
var centerXPos = center[0];
return data.filter(function (_ref9) {
var edgeCenterPos = _ref9.edgeCenterPos;
var xPos = edgeCenterPos[0];
if (left) return xPos <= centerXPos;
return xPos > centerXPos;
});
}
function sortPiesFromTopToBottom(dataItem) {
dataItem.sort(function (_ref10, _ref11) {
2019-09-24 16:34:08 +08:00
var _ref10$edgeCenterPos = (0, _slicedToArray2["default"])(_ref10.edgeCenterPos, 2),
2019-09-03 11:07:45 +08:00
t = _ref10$edgeCenterPos[0],
ay = _ref10$edgeCenterPos[1];
2019-09-24 16:34:08 +08:00
var _ref11$edgeCenterPos = (0, _slicedToArray2["default"])(_ref11.edgeCenterPos, 2),
2019-09-03 11:07:45 +08:00
tt = _ref11$edgeCenterPos[0],
by = _ref11$edgeCenterPos[1];
if (ay > by) return 1;
if (ay < by) return -1;
if (ay === by) return 0;
});
return dataItem;
}
function addLabelLineAndAlign(dataItem, pieItem) {
var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var center = pieItem.center,
outsideLabel = pieItem.outsideLabel;
var radius = getLabelLineBendRadius(pieItem);
dataItem.forEach(function (item) {
var edgeCenterPos = item.edgeCenterPos,
startAngle = item.startAngle,
endAngle = item.endAngle;
var labelLineEndLength = outsideLabel.labelLineEndLength;
var angle = (startAngle + endAngle) / 2;
2019-09-24 16:34:08 +08:00
var bendPoint = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, angle]));
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var endPoint = (0, _toConsumableArray2["default"])(bendPoint);
2019-09-03 11:07:45 +08:00
endPoint[0] += labelLineEndLength * (left ? -1 : 1);
item.labelLine = [edgeCenterPos, bendPoint, endPoint];
item.labelLineLength = (0, util$1.getPolylineLength)(item.labelLine);
item.align = {
textAlign: 'left',
textBaseline: 'middle'
};
if (left) item.align.textAlign = 'right';
});
}
function getPieConfig(pieItem) {
var data = pieItem.data,
animationCurve = pieItem.animationCurve,
animationFrame = pieItem.animationFrame,
rLevel = pieItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'pie',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getPieShape(pieItem, i),
style: getPieStyle(pieItem, i)
};
});
}
function getStartPieConfig(pieItem) {
var animationDelayGap = pieItem.animationDelayGap,
startAnimationCurve = pieItem.startAnimationCurve;
var configs = getPieConfig(pieItem);
configs.forEach(function (config, i) {
config.animationCurve = startAnimationCurve;
config.animationDelay = i * animationDelayGap;
config.shape.or = config.shape.ir;
});
return configs;
}
function beforeChangePie(graph) {
graph.animationDelay = 0;
}
function getPieShape(pieItem, i) {
var center = pieItem.center,
data = pieItem.data;
var dataItem = data[i];
var radius = dataItem.radius,
startAngle = dataItem.startAngle,
endAngle = dataItem.endAngle;
return {
startAngle: startAngle,
endAngle: endAngle,
ir: radius[0],
or: radius[1],
rx: center[0],
ry: center[1]
};
}
function getPieStyle(pieItem, i) {
var pieStyle = pieItem.pieStyle,
data = pieItem.data;
var dataItem = data[i];
var color = dataItem.color;
return (0, util$1.deepMerge)({
fill: color
}, pieStyle);
}
function getInsideLabelConfig(pieItem) {
var animationCurve = pieItem.animationCurve,
animationFrame = pieItem.animationFrame,
data = pieItem.data,
rLevel = pieItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: pieItem.insideLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getInsideLabelShape(pieItem, i),
style: getInsideLabelStyle(pieItem)
};
});
}
function getInsideLabelShape(pieItem, i) {
var insideLabel = pieItem.insideLabel,
data = pieItem.data;
var formatter = insideLabel.formatter;
var dataItem = data[i];
2019-09-24 16:34:08 +08:00
var formatterType = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
var label = '';
if (formatterType === 'string') {
label = formatter.replace('{name}', dataItem.name);
2020-05-06 15:07:19 +08:00
label = label.replace('{percent}', dataItem.percentForLabel);
2019-09-03 11:07:45 +08:00
label = label.replace('{value}', dataItem.value);
}
if (formatterType === 'function') {
label = formatter(dataItem);
}
return {
content: label,
position: dataItem.insideLabelPos
};
}
function getInsideLabelStyle(pieItem, i) {
var style = pieItem.insideLabel.style;
return style;
}
function getOutsideLabelLineConfig(pieItem) {
var animationCurve = pieItem.animationCurve,
animationFrame = pieItem.animationFrame,
data = pieItem.data,
rLevel = pieItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'polyline',
index: rLevel,
visible: pieItem.outsideLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getOutsideLabelLineShape(pieItem, i),
style: getOutsideLabelLineStyle(pieItem, i)
};
});
}
function getStartOutsideLabelLineConfig(pieItem) {
var data = pieItem.data;
var configs = getOutsideLabelLineConfig(pieItem);
configs.forEach(function (config, i) {
config.style.lineDash = [0, data[i].labelLineLength];
});
return configs;
}
function getOutsideLabelLineShape(pieItem, i) {
var data = pieItem.data;
var dataItem = data[i];
return {
points: dataItem.labelLine
};
}
function getOutsideLabelLineStyle(pieItem, i) {
var outsideLabel = pieItem.outsideLabel,
data = pieItem.data;
var labelLineStyle = outsideLabel.labelLineStyle;
var color = data[i].color;
return (0, util$1.deepMerge)({
stroke: color,
lineDash: [data[i].labelLineLength, 0]
}, labelLineStyle);
}
function getOutsideLabelConfig(pieItem) {
var animationCurve = pieItem.animationCurve,
animationFrame = pieItem.animationFrame,
data = pieItem.data,
rLevel = pieItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: pieItem.outsideLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getOutsideLabelShape(pieItem, i),
style: getOutsideLabelStyle(pieItem, i)
};
});
}
function getStartOutsideLabelConfig(pieItem) {
var data = pieItem.data;
var configs = getOutsideLabelConfig(pieItem);
configs.forEach(function (config, i) {
config.shape.position = data[i].labelLine[1];
});
return configs;
}
function getOutsideLabelShape(pieItem, i) {
var outsideLabel = pieItem.outsideLabel,
data = pieItem.data;
var formatter = outsideLabel.formatter;
var _data$i = data[i],
labelLine = _data$i.labelLine,
name = _data$i.name,
2020-05-06 15:07:19 +08:00
percentForLabel = _data$i.percentForLabel,
2019-09-03 11:07:45 +08:00
value = _data$i.value;
2019-09-24 16:34:08 +08:00
var formatterType = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
var label = '';
if (formatterType === 'string') {
label = formatter.replace('{name}', name);
2020-05-06 15:07:19 +08:00
label = label.replace('{percent}', percentForLabel);
2019-09-03 11:07:45 +08:00
label = label.replace('{value}', value);
}
if (formatterType === 'function') {
label = formatter(data[i]);
}
return {
content: label,
position: labelLine[2]
};
}
function getOutsideLabelStyle(pieItem, i) {
var outsideLabel = pieItem.outsideLabel,
data = pieItem.data;
var _data$i2 = data[i],
color = _data$i2.color,
align = _data$i2.align;
var style = outsideLabel.style;
return (0, util$1.deepMerge)(_objectSpread({
fill: color
}, align), style);
}
});
unwrapExports(pie_1$1);
var pie_2 = pie_1$1.pie;
var radarAxis_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.radarAxis = radarAxis;
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function radarAxis(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var radar = option.radar;
var radarAxis = [];
if (radar) {
radarAxis = mergeRadarAxisDefaultConfig(radar);
radarAxis = calcRadarAxisCenter(radarAxis, chart);
radarAxis = calcRadarAxisRingRadius(radarAxis, chart);
radarAxis = calcRadarAxisLinePosition(radarAxis);
radarAxis = calcRadarAxisAreaRadius(radarAxis);
radarAxis = calcRadarAxisLabelPosition(radarAxis);
radarAxis = [radarAxis];
}
var radarAxisForUpdate = radarAxis;
if (radarAxis.length && !radarAxis[0].show) radarAxisForUpdate = [];
(0, updater_class.doUpdate)({
chart: chart,
series: radarAxisForUpdate,
key: 'radarAxisSplitArea',
getGraphConfig: getSplitAreaConfig,
beforeUpdate: beforeUpdateSplitArea,
beforeChange: beforeChangeSplitArea
});
(0, updater_class.doUpdate)({
chart: chart,
series: radarAxisForUpdate,
key: 'radarAxisSplitLine',
getGraphConfig: getSplitLineConfig,
beforeUpdate: beforeUpdateSplitLine,
beforeChange: beforeChangeSplitLine
});
(0, updater_class.doUpdate)({
chart: chart,
series: radarAxisForUpdate,
key: 'radarAxisLine',
getGraphConfig: getAxisLineConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: radarAxisForUpdate,
key: 'radarAxisLable',
getGraphConfig: getAxisLabelConfig
});
chart.radarAxis = radarAxis[0];
}
function mergeRadarAxisDefaultConfig(radar) {
return (0, util$1.deepMerge)((0, util.deepClone)(config.radarAxisConfig), radar);
}
function calcRadarAxisCenter(radarAxis, chart) {
var area = chart.render.area;
var center = radarAxis.center;
radarAxis.centerPos = center.map(function (v, i) {
if (typeof v === 'number') return v;
return parseInt(v) / 100 * area[i];
});
return radarAxis;
}
function calcRadarAxisRingRadius(radarAxis, chart) {
var area = chart.render.area;
var splitNum = radarAxis.splitNum,
radius = radarAxis.radius;
2019-09-24 16:34:08 +08:00
var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
2019-09-03 11:07:45 +08:00
if (typeof radius !== 'number') radius = parseInt(radius) / 100 * maxRadius;
var splitGap = radius / splitNum;
radarAxis.ringRadius = new Array(splitNum).fill(0).map(function (foo, i) {
return splitGap * (i + 1);
});
radarAxis.radius = radius;
return radarAxis;
}
function calcRadarAxisLinePosition(radarAxis) {
var indicator = radarAxis.indicator,
centerPos = radarAxis.centerPos,
radius = radarAxis.radius,
startAngle = radarAxis.startAngle;
var fullAngle = Math.PI * 2;
var indicatorNum = indicator.length;
var indicatorGap = fullAngle / indicatorNum;
var angles = new Array(indicatorNum).fill(0).map(function (foo, i) {
return indicatorGap * i + startAngle;
});
radarAxis.axisLineAngles = angles;
radarAxis.axisLinePosition = angles.map(function (g) {
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([radius, g]));
2019-09-03 11:07:45 +08:00
});
return radarAxis;
}
function calcRadarAxisAreaRadius(radarAxis) {
var ringRadius = radarAxis.ringRadius;
var subRadius = ringRadius[0] / 2;
radarAxis.areaRadius = ringRadius.map(function (r) {
return r - subRadius;
});
return radarAxis;
}
function calcRadarAxisLabelPosition(radarAxis) {
var axisLineAngles = radarAxis.axisLineAngles,
centerPos = radarAxis.centerPos,
radius = radarAxis.radius,
axisLabel = radarAxis.axisLabel;
radius += axisLabel.labelGap;
radarAxis.axisLabelPosition = axisLineAngles.map(function (angle) {
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([radius, angle]));
2019-09-03 11:07:45 +08:00
});
return radarAxis;
}
function getSplitAreaConfig(radarAxis) {
var areaRadius = radarAxis.areaRadius,
polygon = radarAxis.polygon,
animationCurve = radarAxis.animationCurve,
animationFrame = radarAxis.animationFrame,
rLevel = radarAxis.rLevel;
var name = polygon ? 'regPolygon' : 'ring';
return areaRadius.map(function (foo, i) {
return {
name: name,
index: rLevel,
visible: radarAxis.splitArea.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getSplitAreaShape(radarAxis, i),
style: getSplitAreaStyle(radarAxis, i)
};
});
}
function getSplitAreaShape(radarAxis, i) {
var polygon = radarAxis.polygon,
areaRadius = radarAxis.areaRadius,
indicator = radarAxis.indicator,
centerPos = radarAxis.centerPos;
var indicatorNum = indicator.length;
var shape = {
rx: centerPos[0],
ry: centerPos[1],
r: areaRadius[i]
};
if (polygon) shape.side = indicatorNum;
return shape;
}
function getSplitAreaStyle(radarAxis, i) {
var splitArea = radarAxis.splitArea,
ringRadius = radarAxis.ringRadius,
axisLineAngles = radarAxis.axisLineAngles,
polygon = radarAxis.polygon,
centerPos = radarAxis.centerPos;
var color = splitArea.color,
style = splitArea.style;
style = _objectSpread({
fill: 'rgba(0, 0, 0, 0)'
}, style);
var lineWidth = ringRadius[0] - 0;
if (polygon) {
2019-09-24 16:34:08 +08:00
var point1 = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([ringRadius[0], axisLineAngles[0]]));
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var point2 = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([ringRadius[0], axisLineAngles[1]]));
2019-09-03 11:07:45 +08:00
lineWidth = (0, util$1.getPointToLineDistance)(centerPos, point1, point2);
}
style = (0, util$1.deepMerge)((0, util.deepClone)(style, true), {
lineWidth: lineWidth
});
if (!color.length) return style;
var colorNum = color.length;
return (0, util$1.deepMerge)(style, {
stroke: color[i % colorNum]
});
}
function beforeUpdateSplitArea(graphs, radarAxis, i, updater) {
var cache = graphs[i];
if (!cache) return;
var render = updater.chart.render;
var polygon = radarAxis.polygon;
var name = cache[0].name;
var currentName = polygon ? 'regPolygon' : 'ring';
var delAll = currentName !== name;
if (!delAll) return;
cache.forEach(function (g) {
return render.delGraph(g);
});
graphs[i] = null;
}
function beforeChangeSplitArea(graph, config) {
var side = config.shape.side;
if (typeof side !== 'number') return;
graph.shape.side = side;
}
function getSplitLineConfig(radarAxis) {
var ringRadius = radarAxis.ringRadius,
polygon = radarAxis.polygon,
animationCurve = radarAxis.animationCurve,
animationFrame = radarAxis.animationFrame,
rLevel = radarAxis.rLevel;
var name = polygon ? 'regPolygon' : 'ring';
return ringRadius.map(function (foo, i) {
return {
name: name,
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
visible: radarAxis.splitLine.show,
shape: getSplitLineShape(radarAxis, i),
style: getSplitLineStyle(radarAxis, i)
};
});
}
function getSplitLineShape(radarAxis, i) {
var ringRadius = radarAxis.ringRadius,
centerPos = radarAxis.centerPos,
indicator = radarAxis.indicator,
polygon = radarAxis.polygon;
var shape = {
rx: centerPos[0],
ry: centerPos[1],
r: ringRadius[i]
};
var indicatorNum = indicator.length;
if (polygon) shape.side = indicatorNum;
return shape;
}
function getSplitLineStyle(radarAxis, i) {
var splitLine = radarAxis.splitLine;
var color = splitLine.color,
style = splitLine.style;
style = _objectSpread({
fill: 'rgba(0, 0, 0, 0)'
}, style);
if (!color.length) return style;
var colorNum = color.length;
return (0, util$1.deepMerge)(style, {
stroke: color[i % colorNum]
});
}
function beforeUpdateSplitLine(graphs, radarAxis, i, updater) {
var cache = graphs[i];
if (!cache) return;
var render = updater.chart.render;
var polygon = radarAxis.polygon;
var name = cache[0].name;
var currenName = polygon ? 'regPolygon' : 'ring';
var delAll = currenName !== name;
if (!delAll) return;
cache.forEach(function (g) {
return render.delGraph(g);
});
graphs[i] = null;
}
function beforeChangeSplitLine(graph, config) {
var side = config.shape.side;
if (typeof side !== 'number') return;
graph.shape.side = side;
}
function getAxisLineConfig(radarAxis) {
var axisLinePosition = radarAxis.axisLinePosition,
animationCurve = radarAxis.animationCurve,
animationFrame = radarAxis.animationFrame,
rLevel = radarAxis.rLevel;
return axisLinePosition.map(function (foo, i) {
return {
name: 'polyline',
index: rLevel,
visible: radarAxis.axisLine.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getAxisLineShape(radarAxis, i),
style: getAxisLineStyle(radarAxis, i)
};
});
}
function getAxisLineShape(radarAxis, i) {
var centerPos = radarAxis.centerPos,
axisLinePosition = radarAxis.axisLinePosition;
var points = [centerPos, axisLinePosition[i]];
return {
points: points
};
}
function getAxisLineStyle(radarAxis, i) {
var axisLine = radarAxis.axisLine;
var color = axisLine.color,
style = axisLine.style;
if (!color.length) return style;
var colorNum = color.length;
return (0, util$1.deepMerge)(style, {
stroke: color[i % colorNum]
});
}
function getAxisLabelConfig(radarAxis) {
var axisLabelPosition = radarAxis.axisLabelPosition,
animationCurve = radarAxis.animationCurve,
animationFrame = radarAxis.animationFrame,
rLevel = radarAxis.rLevel;
return axisLabelPosition.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: radarAxis.axisLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getAxisLableShape(radarAxis, i),
style: getAxisLableStyle(radarAxis, i)
};
});
}
function getAxisLableShape(radarAxis, i) {
var axisLabelPosition = radarAxis.axisLabelPosition,
indicator = radarAxis.indicator;
return {
content: indicator[i].name,
position: axisLabelPosition[i]
};
}
function getAxisLableStyle(radarAxis, i) {
var axisLabel = radarAxis.axisLabel,
2019-09-24 16:34:08 +08:00
_radarAxis$centerPos = (0, _slicedToArray2["default"])(radarAxis.centerPos, 2),
2019-09-03 11:07:45 +08:00
x = _radarAxis$centerPos[0],
y = _radarAxis$centerPos[1],
axisLabelPosition = radarAxis.axisLabelPosition;
var color = axisLabel.color,
style = axisLabel.style;
2019-09-24 16:34:08 +08:00
var _axisLabelPosition$i = (0, _slicedToArray2["default"])(axisLabelPosition[i], 2),
2019-09-03 11:07:45 +08:00
labelXpos = _axisLabelPosition$i[0],
labelYPos = _axisLabelPosition$i[1];
var textAlign = labelXpos > x ? 'left' : 'right';
var textBaseline = labelYPos > y ? 'top' : 'bottom';
style = (0, util$1.deepMerge)({
textAlign: textAlign,
textBaseline: textBaseline
}, style);
if (!color.length) return style;
var colorNum = color.length;
return (0, util$1.deepMerge)(style, {
fill: color[i % colorNum]
});
}
});
unwrapExports(radarAxis_1$1);
var radarAxis_2 = radarAxis_1$1.radarAxis;
var radar_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.radar = radar;
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function radar(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var series = option.series;
if (!series) series = [];
var radars = (0, util$1.initNeedSeries)(series, config.radarConfig, 'radar');
radars = calcRadarPosition(radars, chart);
radars = calcRadarLabelPosition(radars, chart);
radars = calcRadarLabelAlign(radars, chart);
(0, updater_class.doUpdate)({
chart: chart,
series: radars,
key: 'radar',
getGraphConfig: getRadarConfig,
getStartGraphConfig: getStartRadarConfig,
beforeChange: beforeChangeRadar
});
(0, updater_class.doUpdate)({
chart: chart,
series: radars,
key: 'radarPoint',
getGraphConfig: getPointConfig,
getStartGraphConfig: getStartPointConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: radars,
key: 'radarLabel',
getGraphConfig: getLabelConfig
});
}
function calcRadarPosition(radars, chart) {
var radarAxis = chart.radarAxis;
if (!radarAxis) return [];
var indicator = radarAxis.indicator,
axisLineAngles = radarAxis.axisLineAngles,
radius = radarAxis.radius,
centerPos = radarAxis.centerPos;
radars.forEach(function (radarItem) {
var data = radarItem.data;
radarItem.dataRadius = [];
radarItem.radarPosition = indicator.map(function (_ref, i) {
var max = _ref.max,
min = _ref.min;
var v = data[i];
if (typeof max !== 'number') max = v;
if (typeof min !== 'number') min = 0;
if (typeof v !== 'number') v = min;
var dataRadius = (v - min) / (max - min) * radius;
radarItem.dataRadius[i] = dataRadius;
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([dataRadius, axisLineAngles[i]]));
2019-09-03 11:07:45 +08:00
});
});
return radars;
}
function calcRadarLabelPosition(radars, chart) {
var radarAxis = chart.radarAxis;
if (!radarAxis) return [];
var centerPos = radarAxis.centerPos,
axisLineAngles = radarAxis.axisLineAngles;
radars.forEach(function (radarItem) {
var dataRadius = radarItem.dataRadius,
label = radarItem.label;
var labelGap = label.labelGap;
radarItem.labelPosition = dataRadius.map(function (r, i) {
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(centerPos).concat([r + labelGap, axisLineAngles[i]]));
2019-09-03 11:07:45 +08:00
});
});
return radars;
}
function calcRadarLabelAlign(radars, chart) {
var radarAxis = chart.radarAxis;
if (!radarAxis) return [];
2019-09-24 16:34:08 +08:00
var _radarAxis$centerPos = (0, _slicedToArray2["default"])(radarAxis.centerPos, 2),
2019-09-03 11:07:45 +08:00
x = _radarAxis$centerPos[0],
y = _radarAxis$centerPos[1];
radars.forEach(function (radarItem) {
var labelPosition = radarItem.labelPosition;
var labelAlign = labelPosition.map(function (_ref2) {
2019-09-24 16:34:08 +08:00
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
2019-09-03 11:07:45 +08:00
lx = _ref3[0],
ly = _ref3[1];
var textAlign = lx > x ? 'left' : 'right';
var textBaseline = ly > y ? 'top' : 'bottom';
return {
textAlign: textAlign,
textBaseline: textBaseline
};
});
radarItem.labelAlign = labelAlign;
});
return radars;
}
function getRadarConfig(radarItem) {
var animationCurve = radarItem.animationCurve,
animationFrame = radarItem.animationFrame,
rLevel = radarItem.rLevel;
return [{
name: 'polyline',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getRadarShape(radarItem),
style: getRadarStyle(radarItem)
}];
}
function getStartRadarConfig(radarItem, updater) {
var centerPos = updater.chart.radarAxis.centerPos;
var config = getRadarConfig(radarItem)[0];
var pointNum = config.shape.points.length;
var points = new Array(pointNum).fill(0).map(function (foo) {
2019-09-24 16:34:08 +08:00
return (0, _toConsumableArray2["default"])(centerPos);
2019-09-03 11:07:45 +08:00
});
config.shape.points = points;
return [config];
}
function getRadarShape(radarItem) {
var radarPosition = radarItem.radarPosition;
return {
points: radarPosition,
close: true
};
}
function getRadarStyle(radarItem) {
var radarStyle = radarItem.radarStyle,
color = radarItem.color;
var colorRgbaValue = (0, lib.getRgbaValue)(color);
colorRgbaValue[3] = 0.5;
var radarDefaultColor = {
stroke: color,
fill: (0, lib.getColorFromRgbValue)(colorRgbaValue)
};
return (0, util$1.deepMerge)(radarDefaultColor, radarStyle);
}
function beforeChangeRadar(graph, _ref4) {
var shape = _ref4.shape;
var graphPoints = graph.shape.points;
var graphPointsNum = graphPoints.length;
var pointsNum = shape.points.length;
if (pointsNum > graphPointsNum) {
var lastPoint = graphPoints.slice(-1)[0];
var newAddPoints = new Array(pointsNum - graphPointsNum).fill(0).map(function (foo) {
2019-09-24 16:34:08 +08:00
return (0, _toConsumableArray2["default"])(lastPoint);
2019-09-03 11:07:45 +08:00
});
2019-09-24 16:34:08 +08:00
graphPoints.push.apply(graphPoints, (0, _toConsumableArray2["default"])(newAddPoints));
2019-09-03 11:07:45 +08:00
} else if (pointsNum < graphPointsNum) {
graphPoints.splice(pointsNum);
}
}
function getPointConfig(radarItem) {
var radarPosition = radarItem.radarPosition,
animationCurve = radarItem.animationCurve,
animationFrame = radarItem.animationFrame,
rLevel = radarItem.rLevel;
return radarPosition.map(function (foo, i) {
return {
name: 'circle',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
visible: radarItem.point.show,
shape: getPointShape(radarItem, i),
style: getPointStyle(radarItem)
};
});
}
function getStartPointConfig(radarItem) {
var configs = getPointConfig(radarItem);
configs.forEach(function (config) {
return config.shape.r = 0.01;
});
return configs;
}
function getPointShape(radarItem, i) {
var radarPosition = radarItem.radarPosition,
point = radarItem.point;
var radius = point.radius;
var position = radarPosition[i];
return {
rx: position[0],
ry: position[1],
r: radius
};
}
function getPointStyle(radarItem, i) {
var point = radarItem.point,
color = radarItem.color;
var style = point.style;
return (0, util$1.deepMerge)({
stroke: color
}, style);
}
function getLabelConfig(radarItem) {
var labelPosition = radarItem.labelPosition,
animationCurve = radarItem.animationCurve,
animationFrame = radarItem.animationFrame,
rLevel = radarItem.rLevel;
return labelPosition.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: radarItem.label.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getLabelShape(radarItem, i),
style: getLabelStyle(radarItem, i)
};
});
}
function getLabelShape(radarItem, i) {
var labelPosition = radarItem.labelPosition,
label = radarItem.label,
data = radarItem.data;
var offset = label.offset,
formatter = label.formatter;
var position = mergePointOffset(labelPosition[i], offset);
var labelText = data[i] ? data[i].toString() : '0';
2019-09-24 16:34:08 +08:00
var formatterType = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
if (formatterType === 'string') labelText = formatter.replace('{value}', labelText);
if (formatterType === 'function') labelText = formatter(labelText);
return {
content: labelText,
position: position
};
}
function mergePointOffset(_ref5, _ref6) {
2019-09-24 16:34:08 +08:00
var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
2019-09-03 11:07:45 +08:00
x = _ref7[0],
y = _ref7[1];
2019-09-24 16:34:08 +08:00
var _ref8 = (0, _slicedToArray2["default"])(_ref6, 2),
2019-09-03 11:07:45 +08:00
ox = _ref8[0],
oy = _ref8[1];
return [x + ox, y + oy];
}
function getLabelStyle(radarItem, i) {
var label = radarItem.label,
color = radarItem.color,
labelAlign = radarItem.labelAlign;
var style = label.style;
var defaultColorAndAlign = _objectSpread({
fill: color
}, labelAlign[i]);
return (0, util$1.deepMerge)(defaultColorAndAlign, style);
}
});
unwrapExports(radar_1$1);
var radar_2 = radar_1$1.radar;
var gauge_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.gauge = gauge$1;
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2019-09-03 11:07:45 +08:00
function gauge$1(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var series = option.series;
if (!series) series = [];
var gauges = (0, util$1.initNeedSeries)(series, gauge.gaugeConfig, 'gauge');
gauges = calcGaugesCenter(gauges, chart);
gauges = calcGaugesRadius(gauges, chart);
gauges = calcGaugesDataRadiusAndLineWidth(gauges, chart);
gauges = calcGaugesDataAngles(gauges);
gauges = calcGaugesDataGradient(gauges);
gauges = calcGaugesAxisTickPosition(gauges);
gauges = calcGaugesLabelPositionAndAlign(gauges);
gauges = calcGaugesLabelData(gauges);
gauges = calcGaugesDetailsPosition(gauges);
gauges = calcGaugesDetailsContent(gauges);
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugeAxisTick',
getGraphConfig: getAxisTickConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugeAxisLabel',
getGraphConfig: getAxisLabelConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugeBackgroundArc',
getGraphConfig: getBackgroundArcConfig,
getStartGraphConfig: getStartBackgroundArcConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugeArc',
getGraphConfig: getArcConfig,
getStartGraphConfig: getStartArcConfig,
beforeChange: beforeChangeArc
});
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugePointer',
getGraphConfig: getPointerConfig,
getStartGraphConfig: getStartPointerConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: gauges,
key: 'gaugeDetails',
getGraphConfig: getDetailsConfig
});
}
function calcGaugesCenter(gauges, chart) {
var area = chart.render.area;
gauges.forEach(function (gaugeItem) {
var center = gaugeItem.center;
center = center.map(function (pos, i) {
if (typeof pos === 'number') return pos;
return parseInt(pos) / 100 * area[i];
});
gaugeItem.center = center;
});
return gauges;
}
function calcGaugesRadius(gauges, chart) {
var area = chart.render.area;
2019-09-24 16:34:08 +08:00
var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
2019-09-03 11:07:45 +08:00
gauges.forEach(function (gaugeItem) {
var radius = gaugeItem.radius;
if (typeof radius !== 'number') {
radius = parseInt(radius) / 100 * maxRadius;
}
gaugeItem.radius = radius;
});
return gauges;
}
function calcGaugesDataRadiusAndLineWidth(gauges, chart) {
var area = chart.render.area;
2019-09-24 16:34:08 +08:00
var maxRadius = Math.min.apply(Math, (0, _toConsumableArray2["default"])(area)) / 2;
2019-09-03 11:07:45 +08:00
gauges.forEach(function (gaugeItem) {
var radius = gaugeItem.radius,
data = gaugeItem.data,
arcLineWidth = gaugeItem.arcLineWidth;
data.forEach(function (item) {
var arcRadius = item.radius,
lineWidth = item.lineWidth;
if (!arcRadius) arcRadius = radius;
if (typeof arcRadius !== 'number') arcRadius = parseInt(arcRadius) / 100 * maxRadius;
item.radius = arcRadius;
if (!lineWidth) lineWidth = arcLineWidth;
item.lineWidth = lineWidth;
});
});
return gauges;
}
function calcGaugesDataAngles(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var startAngle = gaugeItem.startAngle,
endAngle = gaugeItem.endAngle,
data = gaugeItem.data,
min = gaugeItem.min,
max = gaugeItem.max;
var angleMinus = endAngle - startAngle;
var valueMinus = max - min;
data.forEach(function (item) {
var value = item.value;
var itemAngle = Math.abs((value - min) / valueMinus * angleMinus);
item.startAngle = startAngle;
item.endAngle = startAngle + itemAngle;
});
});
return gauges;
}
function calcGaugesDataGradient(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var data = gaugeItem.data;
data.forEach(function (item) {
var color = item.color,
gradient = item.gradient;
if (!gradient || !gradient.length) gradient = color;
if (!(gradient instanceof Array)) gradient = [gradient];
item.gradient = gradient;
});
});
return gauges;
}
function calcGaugesAxisTickPosition(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var startAngle = gaugeItem.startAngle,
endAngle = gaugeItem.endAngle,
splitNum = gaugeItem.splitNum,
center = gaugeItem.center,
radius = gaugeItem.radius,
arcLineWidth = gaugeItem.arcLineWidth,
axisTick = gaugeItem.axisTick;
var tickLength = axisTick.tickLength,
lineWidth = axisTick.style.lineWidth;
var angles = endAngle - startAngle;
var outerRadius = radius - arcLineWidth / 2;
var innerRadius = outerRadius - tickLength;
var angleGap = angles / (splitNum - 1);
var arcLength = 2 * Math.PI * radius * angles / (Math.PI * 2);
var offset = Math.ceil(lineWidth / 2) / arcLength * angles;
gaugeItem.tickAngles = [];
gaugeItem.tickInnerRadius = [];
gaugeItem.tickPosition = new Array(splitNum).fill(0).map(function (foo, i) {
var angle = startAngle + angleGap * i;
if (i === 0) angle += offset;
if (i === splitNum - 1) angle -= offset;
gaugeItem.tickAngles[i] = angle;
gaugeItem.tickInnerRadius[i] = innerRadius;
2019-09-24 16:34:08 +08:00
return [util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([outerRadius, angle])), util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([innerRadius, angle]))];
2019-09-03 11:07:45 +08:00
});
});
return gauges;
}
function calcGaugesLabelPositionAndAlign(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var center = gaugeItem.center,
tickInnerRadius = gaugeItem.tickInnerRadius,
tickAngles = gaugeItem.tickAngles,
labelGap = gaugeItem.axisLabel.labelGap;
var position = tickAngles.map(function (angle, i) {
2019-09-24 16:34:08 +08:00
return util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([tickInnerRadius[i] - labelGap, tickAngles[i]]));
2019-09-03 11:07:45 +08:00
});
var align = position.map(function (_ref) {
2019-09-24 16:34:08 +08:00
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
2019-09-03 11:07:45 +08:00
x = _ref2[0],
y = _ref2[1];
return {
textAlign: x > center[0] ? 'right' : 'left',
textBaseline: y > center[1] ? 'bottom' : 'top'
};
});
gaugeItem.labelPosition = position;
gaugeItem.labelAlign = align;
});
return gauges;
}
function calcGaugesLabelData(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var axisLabel = gaugeItem.axisLabel,
min = gaugeItem.min,
max = gaugeItem.max,
splitNum = gaugeItem.splitNum;
var data = axisLabel.data,
formatter = axisLabel.formatter;
var valueGap = (max - min) / (splitNum - 1);
var value = new Array(splitNum).fill(0).map(function (foo, i) {
return parseInt(min + valueGap * i);
});
2019-09-24 16:34:08 +08:00
var formatterType = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
data = (0, util$1.deepMerge)(value, data).map(function (v, i) {
var label = v;
if (formatterType === 'string') {
label = formatter.replace('{value}', v);
}
if (formatterType === 'function') {
label = formatter({
value: v,
index: i
});
}
return label;
});
axisLabel.data = data;
});
return gauges;
}
function calcGaugesDetailsPosition(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var data = gaugeItem.data,
details = gaugeItem.details,
center = gaugeItem.center;
var position = details.position,
offset = details.offset;
var detailsPosition = data.map(function (_ref3) {
var startAngle = _ref3.startAngle,
endAngle = _ref3.endAngle,
radius = _ref3.radius;
var point = null;
if (position === 'center') {
point = center;
} else if (position === 'start') {
2019-09-24 16:34:08 +08:00
point = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, startAngle]));
2019-09-03 11:07:45 +08:00
} else if (position === 'end') {
2019-09-24 16:34:08 +08:00
point = util.getCircleRadianPoint.apply(void 0, (0, _toConsumableArray2["default"])(center).concat([radius, endAngle]));
2019-09-03 11:07:45 +08:00
}
return getOffsetedPoint(point, offset);
});
gaugeItem.detailsPosition = detailsPosition;
});
return gauges;
}
function calcGaugesDetailsContent(gauges, chart) {
gauges.forEach(function (gaugeItem) {
var data = gaugeItem.data,
details = gaugeItem.details;
var formatter = details.formatter;
2019-09-24 16:34:08 +08:00
var formatterType = (0, _typeof2["default"])(formatter);
2019-09-03 11:07:45 +08:00
var contents = data.map(function (dataItem) {
var content = dataItem.value;
if (formatterType === 'string') {
content = formatter.replace('{value}', '{nt}');
content = content.replace('{name}', dataItem.name);
}
if (formatterType === 'function') content = formatter(dataItem);
return content.toString();
});
gaugeItem.detailsContent = contents;
});
return gauges;
}
function getOffsetedPoint(_ref4, _ref5) {
2019-09-24 16:34:08 +08:00
var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
2019-09-03 11:07:45 +08:00
x = _ref6[0],
y = _ref6[1];
2019-09-24 16:34:08 +08:00
var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
2019-09-03 11:07:45 +08:00
ox = _ref7[0],
oy = _ref7[1];
return [x + ox, y + oy];
}
function getAxisTickConfig(gaugeItem) {
var tickPosition = gaugeItem.tickPosition,
animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
rLevel = gaugeItem.rLevel;
return tickPosition.map(function (foo, i) {
return {
name: 'polyline',
index: rLevel,
visible: gaugeItem.axisTick.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getAxisTickShape(gaugeItem, i),
style: getAxisTickStyle(gaugeItem)
};
});
}
function getAxisTickShape(gaugeItem, i) {
var tickPosition = gaugeItem.tickPosition;
return {
points: tickPosition[i]
};
}
function getAxisTickStyle(gaugeItem, i) {
var style = gaugeItem.axisTick.style;
return style;
}
function getAxisLabelConfig(gaugeItem) {
var labelPosition = gaugeItem.labelPosition,
animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
rLevel = gaugeItem.rLevel;
return labelPosition.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: gaugeItem.axisLabel.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getAxisLabelShape(gaugeItem, i),
style: getAxisLabelStyle(gaugeItem, i)
};
});
}
function getAxisLabelShape(gaugeItem, i) {
var labelPosition = gaugeItem.labelPosition,
data = gaugeItem.axisLabel.data;
return {
content: data[i].toString(),
position: labelPosition[i]
};
}
function getAxisLabelStyle(gaugeItem, i) {
var labelAlign = gaugeItem.labelAlign,
axisLabel = gaugeItem.axisLabel;
var style = axisLabel.style;
return (0, util$1.deepMerge)(_objectSpread({}, labelAlign[i]), style);
}
function getBackgroundArcConfig(gaugeItem) {
var animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
rLevel = gaugeItem.rLevel;
return [{
name: 'arc',
index: rLevel,
visible: gaugeItem.backgroundArc.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getGaugeBackgroundArcShape(gaugeItem),
style: getGaugeBackgroundArcStyle(gaugeItem)
}];
}
function getGaugeBackgroundArcShape(gaugeItem) {
var startAngle = gaugeItem.startAngle,
endAngle = gaugeItem.endAngle,
center = gaugeItem.center,
radius = gaugeItem.radius;
return {
rx: center[0],
ry: center[1],
r: radius,
startAngle: startAngle,
endAngle: endAngle
};
}
function getGaugeBackgroundArcStyle(gaugeItem) {
var backgroundArc = gaugeItem.backgroundArc,
arcLineWidth = gaugeItem.arcLineWidth;
var style = backgroundArc.style;
return (0, util$1.deepMerge)({
lineWidth: arcLineWidth
}, style);
}
function getStartBackgroundArcConfig(gaugeItem) {
var config = getBackgroundArcConfig(gaugeItem)[0];
var shape = _objectSpread({}, config.shape);
shape.endAngle = config.shape.startAngle;
config.shape = shape;
return [config];
}
function getArcConfig(gaugeItem) {
var data = gaugeItem.data,
animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
rLevel = gaugeItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'agArc',
index: rLevel,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getGaugeArcShape(gaugeItem, i),
style: getGaugeArcStyle(gaugeItem, i)
};
});
}
function getGaugeArcShape(gaugeItem, i) {
var data = gaugeItem.data,
center = gaugeItem.center,
gradientEndAngle = gaugeItem.endAngle;
var _data$i = data[i],
radius = _data$i.radius,
startAngle = _data$i.startAngle,
endAngle = _data$i.endAngle,
localGradient = _data$i.localGradient;
if (localGradient) gradientEndAngle = endAngle;
return {
rx: center[0],
ry: center[1],
r: radius,
startAngle: startAngle,
endAngle: endAngle,
gradientEndAngle: gradientEndAngle
};
}
function getGaugeArcStyle(gaugeItem, i) {
var data = gaugeItem.data,
dataItemStyle = gaugeItem.dataItemStyle;
var _data$i2 = data[i],
lineWidth = _data$i2.lineWidth,
gradient = _data$i2.gradient;
gradient = gradient.map(function (c) {
return (0, lib.getRgbaValue)(c);
});
return (0, util$1.deepMerge)({
lineWidth: lineWidth,
gradient: gradient
}, dataItemStyle);
}
function getStartArcConfig(gaugeItem) {
var configs = getArcConfig(gaugeItem);
configs.map(function (config) {
var shape = _objectSpread({}, config.shape);
shape.endAngle = config.shape.startAngle;
config.shape = shape;
});
return configs;
}
function beforeChangeArc(graph, config) {
var graphGradient = graph.style.gradient;
var cacheNum = graphGradient.length;
var needNum = config.style.gradient.length;
if (cacheNum > needNum) {
graphGradient.splice(needNum);
} else {
var last = graphGradient.slice(-1)[0];
2019-09-24 16:34:08 +08:00
graphGradient.push.apply(graphGradient, (0, _toConsumableArray2["default"])(new Array(needNum - cacheNum).fill(0).map(function (foo) {
return (0, _toConsumableArray2["default"])(last);
2019-09-03 11:07:45 +08:00
})));
}
}
function getPointerConfig(gaugeItem) {
var animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
center = gaugeItem.center,
rLevel = gaugeItem.rLevel;
return [{
name: 'polyline',
index: rLevel,
visible: gaugeItem.pointer.show,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getPointerShape(gaugeItem),
style: getPointerStyle(gaugeItem),
setGraphCenter: function setGraphCenter(foo, graph) {
graph.style.graphCenter = center;
}
}];
}
function getPointerShape(gaugeItem) {
var center = gaugeItem.center;
return {
points: getPointerPoints(center),
close: true
};
}
function getPointerStyle(gaugeItem) {
var startAngle = gaugeItem.startAngle,
endAngle = gaugeItem.endAngle,
min = gaugeItem.min,
max = gaugeItem.max,
data = gaugeItem.data,
pointer = gaugeItem.pointer,
center = gaugeItem.center;
var valueIndex = pointer.valueIndex,
style = pointer.style;
var value = data[valueIndex] ? data[valueIndex].value : 0;
var angle = (value - min) / (max - min) * (endAngle - startAngle) + startAngle + Math.PI / 2;
return (0, util$1.deepMerge)({
rotate: (0, util$1.radianToAngle)(angle),
scale: [1, 1],
graphCenter: center
}, style);
}
function getPointerPoints(_ref8) {
2019-09-24 16:34:08 +08:00
var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
2019-09-03 11:07:45 +08:00
x = _ref9[0],
y = _ref9[1];
var point1 = [x, y - 40];
var point2 = [x + 5, y];
var point3 = [x, y + 10];
var point4 = [x - 5, y];
return [point1, point2, point3, point4];
}
function getStartPointerConfig(gaugeItem) {
var startAngle = gaugeItem.startAngle;
var config = getPointerConfig(gaugeItem)[0];
config.style.rotate = (0, util$1.radianToAngle)(startAngle + Math.PI / 2);
return [config];
}
function getDetailsConfig(gaugeItem) {
var detailsPosition = gaugeItem.detailsPosition,
animationCurve = gaugeItem.animationCurve,
animationFrame = gaugeItem.animationFrame,
rLevel = gaugeItem.rLevel;
var visible = gaugeItem.details.show;
return detailsPosition.map(function (foo, i) {
return {
name: 'numberText',
index: rLevel,
visible: visible,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getDetailsShape(gaugeItem, i),
style: getDetailsStyle(gaugeItem, i)
};
});
}
function getDetailsShape(gaugeItem, i) {
var detailsPosition = gaugeItem.detailsPosition,
detailsContent = gaugeItem.detailsContent,
data = gaugeItem.data,
details = gaugeItem.details;
var position = detailsPosition[i];
var content = detailsContent[i];
var dataValue = data[i].value;
var toFixed = details.valueToFixed;
return {
number: [dataValue],
content: content,
position: position,
toFixed: toFixed
};
}
function getDetailsStyle(gaugeItem, i) {
var details = gaugeItem.details,
data = gaugeItem.data;
var style = details.style;
var color = data[i].color;
return (0, util$1.deepMerge)({
fill: color
}, style);
}
});
unwrapExports(gauge_1$1);
var gauge_2 = gauge_1$1.gauge;
var legend_1$1 = createCommonjsModule(function (module, exports) {
2019-09-24 16:34:08 +08:00
2019-09-03 11:07:45 +08:00
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.legend = legend;
2019-09-24 16:34:08 +08:00
var _defineProperty2 = interopRequireDefault(defineProperty);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _slicedToArray2 = interopRequireDefault(slicedToArray);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
function legend(chart) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var legend = option.legend;
if (legend) {
legend = (0, util$1.deepMerge)((0, util.deepClone)(config.legendConfig, true), legend);
legend = initLegendData(legend);
legend = filterInvalidData(legend, option, chart);
legend = calcLegendTextWidth(legend, chart);
legend = calcLegendPosition(legend, chart);
legend = [legend];
} else {
legend = [];
}
(0, updater_class.doUpdate)({
chart: chart,
series: legend,
key: 'legendIcon',
getGraphConfig: getIconConfig
});
(0, updater_class.doUpdate)({
chart: chart,
series: legend,
key: 'legendText',
getGraphConfig: getTextConfig
});
}
function initLegendData(legend) {
var data = legend.data;
legend.data = data.map(function (item) {
2019-09-24 16:34:08 +08:00
var itemType = (0, _typeof2["default"])(item);
2019-09-03 11:07:45 +08:00
if (itemType === 'string') {
return {
name: item
};
} else if (itemType === 'object') {
return item;
}
return {
name: ''
};
});
return legend;
}
function filterInvalidData(legend, option, chart) {
var series = option.series;
var legendStatus = chart.legendStatus;
var data = legend.data.filter(function (item) {
var name = item.name;
var result = series.find(function (_ref) {
var sn = _ref.name;
return name === sn;
});
if (!result) return false;
if (!item.color) item.color = result.color;
if (!item.icon) item.icon = result.type;
return item;
});
if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true);
data.forEach(function (item, i) {
return item.status = legendStatus[i];
});
legend.data = data;
chart.legendStatus = legendStatus;
return legend;
}
function calcLegendTextWidth(legend, chart) {
var ctx = chart.render.ctx;
var data = legend.data,
textStyle = legend.textStyle,
textUnselectedStyle = legend.textUnselectedStyle;
data.forEach(function (item) {
var status = item.status,
name = item.name;
item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle);
});
return legend;
}
function getTextWidth(ctx, text, style) {
ctx.font = getFontConfig(style);
return ctx.measureText(text).width;
}
function getFontConfig(style) {
var fontFamily = style.fontFamily,
fontSize = style.fontSize;
return "".concat(fontSize, "px ").concat(fontFamily);
}
function calcLegendPosition(legend, chart) {
var orient = legend.orient;
if (orient === 'vertical') {
calcVerticalPosition(legend, chart);
} else {
calcHorizontalPosition(legend, chart);
}
return legend;
}
function calcHorizontalPosition(legend, chart) {
var iconHeight = legend.iconHeight,
itemGap = legend.itemGap;
var lines = calcDefaultHorizontalPosition(legend, chart);
var xOffsets = lines.map(function (line) {
return getHorizontalXOffset(line, legend, chart);
});
var yOffset = getHorizontalYOffset(legend, chart);
var align = {
textAlign: 'left',
textBaseline: 'middle'
};
lines.forEach(function (line, i) {
return line.forEach(function (item) {
var iconPosition = item.iconPosition,
textPosition = item.textPosition;
var xOffset = xOffsets[i];
var realYOffset = yOffset + i * (itemGap + iconHeight);
item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset]);
item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset]);
item.align = align;
});
});
}
function calcDefaultHorizontalPosition(legend, chart) {
var data = legend.data,
iconWidth = legend.iconWidth;
var w = chart.render.area[0];
var startIndex = 0;
var lines = [[]];
data.forEach(function (item, i) {
var beforeWidth = getBeforeWidth(startIndex, i, legend);
var endXPos = beforeWidth + iconWidth + 5 + item.textWidth;
if (endXPos >= w) {
startIndex = i;
beforeWidth = getBeforeWidth(startIndex, i, legend);
lines.push([]);
}
item.iconPosition = [beforeWidth, 0];
item.textPosition = [beforeWidth + iconWidth + 5, 0];
lines.slice(-1)[0].push(item);
});
return lines;
}
function getBeforeWidth(startIndex, currentIndex, legend) {
var data = legend.data,
iconWidth = legend.iconWidth,
itemGap = legend.itemGap;
var beforeItem = data.slice(startIndex, currentIndex);
return (0, util$1.mulAdd)(beforeItem.map(function (_ref2) {
var textWidth = _ref2.textWidth;
return textWidth;
})) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth);
}
function getHorizontalXOffset(data, legend, chart) {
var left = legend.left,
right = legend.right,
iconWidth = legend.iconWidth,
itemGap = legend.itemGap;
var w = chart.render.area[0];
var dataNum = data.length;
var allWidth = (0, util$1.mulAdd)(data.map(function (_ref3) {
var textWidth = _ref3.textWidth;
return textWidth;
})) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap;
var horizontal = [left, right].findIndex(function (pos) {
return pos !== 'auto';
});
if (horizontal === -1) {
return (w - allWidth) / 2;
} else if (horizontal === 0) {
if (typeof left === 'number') return left;
return parseInt(left) / 100 * w;
} else {
if (typeof right !== 'number') right = parseInt(right) / 100 * w;
return w - (allWidth + right);
}
}
function getHorizontalYOffset(legend, chart) {
var top = legend.top,
bottom = legend.bottom,
iconHeight = legend.iconHeight;
var h = chart.render.area[1];
var vertical = [top, bottom].findIndex(function (pos) {
return pos !== 'auto';
});
var halfIconHeight = iconHeight / 2;
if (vertical === -1) {
var _chart$gridArea = chart.gridArea,
y = _chart$gridArea.y,
height = _chart$gridArea.h;
return y + height + 45 - halfIconHeight;
} else if (vertical === 0) {
if (typeof top === 'number') return top - halfIconHeight;
return parseInt(top) / 100 * h - halfIconHeight;
} else {
if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h;
return h - bottom - halfIconHeight;
}
}
function mergeOffset(_ref4, _ref5) {
2019-09-24 16:34:08 +08:00
var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
2019-09-03 11:07:45 +08:00
x = _ref6[0],
y = _ref6[1];
2019-09-24 16:34:08 +08:00
var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
2019-09-03 11:07:45 +08:00
ox = _ref7[0],
oy = _ref7[1];
return [x + ox, y + oy];
}
function calcVerticalPosition(legend, chart) {
var _getVerticalXOffset = getVerticalXOffset(legend, chart),
2019-09-24 16:34:08 +08:00
_getVerticalXOffset2 = (0, _slicedToArray2["default"])(_getVerticalXOffset, 2),
2019-09-03 11:07:45 +08:00
isRight = _getVerticalXOffset2[0],
xOffset = _getVerticalXOffset2[1];
var yOffset = getVerticalYOffset(legend, chart);
calcDefaultVerticalPosition(legend, isRight);
var align = {
textAlign: 'left',
textBaseline: 'middle'
};
legend.data.forEach(function (item) {
var textPosition = item.textPosition,
iconPosition = item.iconPosition;
item.textPosition = mergeOffset(textPosition, [xOffset, yOffset]);
item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset]);
item.align = align;
});
}
function getVerticalXOffset(legend, chart) {
var left = legend.left,
right = legend.right;
var w = chart.render.area[0];
var horizontal = [left, right].findIndex(function (pos) {
return pos !== 'auto';
});
if (horizontal === -1) {
return [true, w - 10];
} else {
var offset = [left, right][horizontal];
if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w;
return [Boolean(horizontal), offset];
}
}
function getVerticalYOffset(legend, chart) {
var iconHeight = legend.iconHeight,
itemGap = legend.itemGap,
data = legend.data,
top = legend.top,
bottom = legend.bottom;
var h = chart.render.area[1];
var dataNum = data.length;
var allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap;
var vertical = [top, bottom].findIndex(function (pos) {
return pos !== 'auto';
});
if (vertical === -1) {
return (h - allHeight) / 2;
} else {
var offset = [top, bottom][vertical];
if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h;
if (vertical === 1) offset = h - offset - allHeight;
return offset;
}
}
function calcDefaultVerticalPosition(legend, isRight) {
var data = legend.data,
iconWidth = legend.iconWidth,
iconHeight = legend.iconHeight,
itemGap = legend.itemGap;
var halfIconHeight = iconHeight / 2;
data.forEach(function (item, i) {
var textWidth = item.textWidth;
var yPos = (iconHeight + itemGap) * i + halfIconHeight;
var iconXPos = isRight ? 0 - iconWidth : 0;
var textXpos = isRight ? iconXPos - 5 - textWidth : iconWidth + 5;
item.iconPosition = [iconXPos, yPos];
item.textPosition = [textXpos, yPos];
});
}
function getIconConfig(legendItem, updater) {
var data = legendItem.data,
selectAble = legendItem.selectAble,
animationCurve = legendItem.animationCurve,
animationFrame = legendItem.animationFrame,
rLevel = legendItem.rLevel;
return data.map(function (item, i) {
2019-09-24 16:34:08 +08:00
return (0, _defineProperty2["default"])({
2019-09-03 11:07:45 +08:00
name: item.icon === 'line' ? 'lineIcon' : 'rect',
index: rLevel,
visible: legendItem.show,
hover: selectAble,
click: selectAble,
animationCurve: animationCurve,
animationFrame: animationFrame,
shape: getIconShape(legendItem, i),
style: getIconStyle(legendItem, i)
}, "click", createClickCallBack(legendItem, i, updater));
});
}
function getIconShape(legendItem, i) {
var data = legendItem.data,
iconWidth = legendItem.iconWidth,
iconHeight = legendItem.iconHeight;
2019-09-24 16:34:08 +08:00
var _data$i$iconPosition = (0, _slicedToArray2["default"])(data[i].iconPosition, 2),
2019-09-03 11:07:45 +08:00
x = _data$i$iconPosition[0],
y = _data$i$iconPosition[1];
var halfIconHeight = iconHeight / 2;
return {
x: x,
y: y - halfIconHeight,
w: iconWidth,
h: iconHeight
};
}
function getIconStyle(legendItem, i) {
var data = legendItem.data,
iconStyle = legendItem.iconStyle,
iconUnselectedStyle = legendItem.iconUnselectedStyle;
var _data$i = data[i],
status = _data$i.status,
color = _data$i.color;
var style = status ? iconStyle : iconUnselectedStyle;
return (0, util$1.deepMerge)({
fill: color
}, style);
}
function getTextConfig(legendItem, updater) {
var data = legendItem.data,
selectAble = legendItem.selectAble,
animationCurve = legendItem.animationCurve,
animationFrame = legendItem.animationFrame,
rLevel = legendItem.rLevel;
return data.map(function (foo, i) {
return {
name: 'text',
index: rLevel,
visible: legendItem.show,
hover: selectAble,
animationCurve: animationCurve,
animationFrame: animationFrame,
hoverRect: getTextHoverRect(legendItem, i),
shape: getTextShape(legendItem, i),
style: getTextStyle(legendItem, i),
click: createClickCallBack(legendItem, i, updater)
};
});
}
function getTextShape(legendItem, i) {
var _legendItem$data$i = legendItem.data[i],
textPosition = _legendItem$data$i.textPosition,
name = _legendItem$data$i.name;
return {
content: name,
position: textPosition
};
}
function getTextStyle(legendItem, i) {
var textStyle = legendItem.textStyle,
textUnselectedStyle = legendItem.textUnselectedStyle;
var _legendItem$data$i2 = legendItem.data[i],
status = _legendItem$data$i2.status,
align = _legendItem$data$i2.align;
var style = status ? textStyle : textUnselectedStyle;
return (0, util$1.deepMerge)((0, util.deepClone)(style, true), align);
}
function getTextHoverRect(legendItem, i) {
var textStyle = legendItem.textStyle,
textUnselectedStyle = legendItem.textUnselectedStyle;
var _legendItem$data$i3 = legendItem.data[i],
status = _legendItem$data$i3.status,
2019-09-24 16:34:08 +08:00
_legendItem$data$i3$t = (0, _slicedToArray2["default"])(_legendItem$data$i3.textPosition, 2),
2019-09-03 11:07:45 +08:00
x = _legendItem$data$i3$t[0],
y = _legendItem$data$i3$t[1],
textWidth = _legendItem$data$i3.textWidth;
var style = status ? textStyle : textUnselectedStyle;
var fontSize = style.fontSize;
return [x, y - fontSize / 2, textWidth, fontSize];
}
function createClickCallBack(legendItem, index, updater) {
var name = legendItem.data[index].name;
return function () {
var _updater$chart = updater.chart,
legendStatus = _updater$chart.legendStatus,
option = _updater$chart.option;
var status = !legendStatus[index];
var change = option.series.find(function (_ref9) {
var sn = _ref9.name;
return sn === name;
});
change.show = status;
legendStatus[index] = status;
updater.chart.setOption(option);
};
}
});
unwrapExports(legend_1$1);
var legend_2 = legend_1$1.legend;
var core = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "mergeColor", {
enumerable: true,
get: function get() {
return mergeColor_1.mergeColor;
}
});
Object.defineProperty(exports, "title", {
enumerable: true,
get: function get() {
return title_1$1.title;
}
});
Object.defineProperty(exports, "grid", {
enumerable: true,
get: function get() {
return grid_1$1.grid;
}
});
Object.defineProperty(exports, "axis", {
enumerable: true,
get: function get() {
return axis_1$1.axis;
}
});
Object.defineProperty(exports, "line", {
enumerable: true,
get: function get() {
return line_1$1.line;
}
});
Object.defineProperty(exports, "bar", {
enumerable: true,
get: function get() {
return bar_1$1.bar;
}
});
Object.defineProperty(exports, "pie", {
enumerable: true,
get: function get() {
return pie_1$1.pie;
}
});
Object.defineProperty(exports, "radarAxis", {
enumerable: true,
get: function get() {
return radarAxis_1$1.radarAxis;
}
});
Object.defineProperty(exports, "radar", {
enumerable: true,
get: function get() {
return radar_1$1.radar;
}
});
Object.defineProperty(exports, "gauge", {
enumerable: true,
get: function get() {
return gauge_1$1.gauge;
}
});
Object.defineProperty(exports, "legend", {
enumerable: true,
get: function get() {
return legend_1$1.legend;
}
});
});
unwrapExports(core);
var charts_class = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _typeof2 = interopRequireDefault(_typeof_1);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _classCallCheck2 = interopRequireDefault(classCallCheck);
2019-09-03 11:07:45 +08:00
2019-09-24 16:34:08 +08:00
var _cRender = interopRequireDefault(lib$3);
2019-09-03 11:07:45 +08:00
var Charts = function Charts(dom) {
2019-09-24 16:34:08 +08:00
(0, _classCallCheck2["default"])(this, Charts);
2019-09-03 11:07:45 +08:00
if (!dom) {
console.error('Charts Missing parameters!');
return false;
}
var clientWidth = dom.clientWidth,
clientHeight = dom.clientHeight;
var canvas = document.createElement('canvas');
canvas.setAttribute('width', clientWidth);
canvas.setAttribute('height', clientHeight);
dom.appendChild(canvas);
var attribute = {
container: dom,
canvas: canvas,
render: new _cRender["default"](canvas),
option: null
};
Object.assign(this, attribute);
};
2019-10-24 10:28:43 +08:00
/**
* @description Set chart option
* @param {Object} option Chart option
* @param {Boolean} animationEnd Execute animationEnd
* @return {Undefined} No return
2019-09-03 11:07:45 +08:00
*/
exports["default"] = Charts;
Charts.prototype.setOption = function (option) {
2019-10-24 10:28:43 +08:00
var animationEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
2019-09-24 16:34:08 +08:00
if (!option || (0, _typeof2["default"])(option) !== 'object') {
2019-09-03 11:07:45 +08:00
console.error('setOption Missing parameters!');
return false;
}
2019-10-24 10:28:43 +08:00
if (animationEnd) this.render.graphs.forEach(function (graph) {
return graph.animationEnd();
});
2019-09-03 11:07:45 +08:00
var optionCloned = (0, util.deepClone)(option, true);
(0, core.mergeColor)(this, optionCloned);
(0, core.grid)(this, optionCloned);
(0, core.axis)(this, optionCloned);
(0, core.radarAxis)(this, optionCloned);
(0, core.title)(this, optionCloned);
(0, core.bar)(this, optionCloned);
(0, core.line)(this, optionCloned);
(0, core.pie)(this, optionCloned);
(0, core.radar)(this, optionCloned);
(0, core.gauge)(this, optionCloned);
(0, core.legend)(this, optionCloned);
this.option = option;
this.render.launchAnimation(); // console.warn(this)
};
2019-10-24 10:28:43 +08:00
/**
* @description Resize chart
* @return {Undefined} No return
2019-09-03 11:07:45 +08:00
*/
Charts.prototype.resize = function () {
var container = this.container,
canvas = this.canvas,
render = this.render,
option = this.option;
var clientWidth = container.clientWidth,
clientHeight = container.clientHeight;
canvas.setAttribute('width', clientWidth);
canvas.setAttribute('height', clientHeight);
render.area = [clientWidth, clientHeight];
this.setOption(option);
};
});
unwrapExports(charts_class);
var lib$4 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "changeDefaultConfig", {
enumerable: true,
get: function get() {
return config.changeDefaultConfig;
}
});
exports["default"] = void 0;
2019-09-24 16:34:08 +08:00
var _charts = interopRequireDefault(charts_class);
2019-09-03 11:07:45 +08:00
var _default = _charts["default"];
exports["default"] = _default;
});
var Charts = unwrapExports(lib$4);
//
2019-12-06 21:07:16 +08:00
var script$q = {
2019-09-03 11:07:45 +08:00
name: 'DvCharts',
mixins: [autoResize],
props: {
option: {
type: Object,
default: () => ({})
}
},
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
2020-05-25 15:57:26 +08:00
ref: `charts-container-${id}`,
chartRef: `chart-${id}`,
2019-09-03 11:07:45 +08:00
chart: null
};
},
watch: {
option() {
let {
chart,
option
} = this;
if (!chart) return;
if (!option) option = {};
2019-10-24 14:12:52 +08:00
chart.setOption(option, true);
2019-09-03 11:07:45 +08:00
}
},
methods: {
afterAutoResizeMixinInit() {
const {
initChart
} = this;
initChart();
},
initChart() {
const {
$refs,
chartRef,
option
} = this;
const chart = this.chart = new Charts($refs[chartRef]);
if (!option) return;
chart.setOption(option);
},
onResize() {
const {
chart
} = this;
if (!chart) return;
chart.resize();
}
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$q = script$q;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$q = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-charts-container" }, [
_c("div", { ref: _vm.chartRef, staticClass: "charts-canvas-container" })
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$q = [];
__vue_render__$q._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$q = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-1f446fe6_0", { source: ".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$q = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$q = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$q = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$q = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
__vue_inject_styles__$q,
__vue_script__$q,
__vue_scope_id__$q,
__vue_is_functional_template__$q,
__vue_module_identifier__$q,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function charts (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$q.name, __vue_component__$q);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$r = {
2019-09-03 11:07:45 +08:00
name: 'DvDigitalFlop',
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
renderer: null,
defaultConfig: {
/**
* @description Number for digital flop
* @type {Array<Number>}
* @default number = []
* @example number = [10]
*/
number: [],
/**
* @description Content formatter
* @type {String}
* @default content = ''
* @example content = '{nt}个'
*/
content: '',
/**
* @description Number toFixed
* @type {Number}
* @default toFixed = 0
*/
toFixed: 0,
/**
* @description Text align
* @type {String}
* @default textAlign = 'center'
* @example textAlign = 'center' | 'left' | 'right'
*/
textAlign: 'center',
2020-05-03 20:15:35 +08:00
/**
* @description rowGap
* @type {Number}
@default rowGap = 0
*/
rowGap: 0,
2019-09-03 11:07:45 +08:00
/**
* @description Text style configuration
* @type {Object} {CRender Class Style}
*/
style: {
fontSize: 30,
fill: '#3de7c9'
},
/**
* @description CRender animationCurve
* @type {String}
* @default animationCurve = 'easeOutCubic'
*/
animationCurve: 'easeOutCubic',
/**
* @description CRender animationFrame
* @type {String}
* @default animationFrame = 50
*/
animationFrame: 50
},
mergedConfig: null,
graph: null
};
},
watch: {
config() {
const {
update
} = this;
update();
}
},
methods: {
init() {
const {
initRender,
mergeConfig,
initGraph
} = this;
initRender();
mergeConfig();
initGraph();
},
initRender() {
const {
$refs
} = this;
this.renderer = new CRender($refs['digital-flop']);
},
mergeConfig() {
const {
defaultConfig,
config
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
initGraph() {
const {
getShape,
getStyle,
renderer,
mergedConfig
} = this;
const {
animationCurve,
animationFrame
} = mergedConfig;
const shape = getShape();
const style = getStyle();
this.graph = renderer.add({
name: 'numberText',
animationCurve,
animationFrame,
shape,
style
});
},
getShape() {
const {
number,
content,
toFixed,
2020-05-03 20:15:35 +08:00
textAlign,
rowGap
2019-09-03 11:07:45 +08:00
} = this.mergedConfig;
const [w, h] = this.renderer.area;
const position = [w / 2, h / 2];
if (textAlign === 'left') position[0] = 0;
if (textAlign === 'right') position[0] = w;
return {
number,
content,
toFixed,
2020-05-03 20:15:35 +08:00
position,
rowGap
2019-09-03 11:07:45 +08:00
};
},
getStyle() {
const {
style,
textAlign
} = this.mergedConfig;
return util_2$1(style, {
textAlign,
textBaseline: 'middle'
});
},
update() {
const {
mergeConfig,
mergeShape,
getShape,
getStyle,
graph,
mergedConfig
} = this;
2019-10-25 10:57:11 +08:00
graph.animationEnd();
2019-09-03 11:07:45 +08:00
mergeConfig();
if (!graph) return;
const {
animationCurve,
animationFrame
} = mergedConfig;
const shape = getShape();
const style = getStyle();
mergeShape(graph, shape);
graph.animationCurve = animationCurve;
graph.animationFrame = animationFrame;
graph.animation('style', style, true);
graph.animation('shape', shape);
},
mergeShape(graph, shape) {
const cacheNum = graph.shape.number.length;
const shapeNum = shape.number.length;
if (cacheNum !== shapeNum) graph.shape.number = shape.number;
}
},
mounted() {
const {
init
} = this;
init();
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$r = script$r;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$r = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "dv-digital-flop" }, [
_c("canvas", { ref: "digital-flop" })
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$r = [];
__vue_render__$r._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$r = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-03 20:15:35 +08:00
inject("data-v-4570caa9_0", { source: ".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$r = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$r = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$r = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$r = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
__vue_inject_styles__$r,
__vue_script__$r,
__vue_scope_id__$r,
__vue_is_functional_template__$r,
__vue_module_identifier__$r,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
//
2019-12-06 21:07:16 +08:00
var script$s = {
2019-09-03 11:07:45 +08:00
name: 'DvActiveRingChart',
components: {
2020-04-28 18:41:09 +08:00
dvDigitalFlop: __vue_component__$r
2019-09-03 11:07:45 +08:00
},
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
defaultConfig: {
/**
* @description Ring radius
* @type {String|Number}
* @default radius = '50%'
* @example radius = '50%' | 100
*/
radius: '50%',
/**
* @description Active ring radius
* @type {String|Number}
* @default activeRadius = '55%'
* @example activeRadius = '55%' | 110
*/
activeRadius: '55%',
/**
* @description Ring data
* @type {Array<Object>}
* @default data = [{ name: '', value: 0 }]
*/
data: [{
name: '',
value: 0
}],
/**
* @description Ring line width
* @type {Number}
* @default lineWidth = 20
*/
lineWidth: 20,
/**
* @description Active time gap (ms)
* @type {Number}
* @default activeTimeGap = 3000
*/
activeTimeGap: 3000,
/**
* @description Ring color (hex|rgb|rgba|color keywords)
* @type {Array<String>}
* @default color = [Charts Default Color]
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
*/
color: [],
/**
* @description Digital flop style
* @type {Object}
*/
digitalFlopStyle: {
fontSize: 25,
fill: '#fff'
},
2020-01-10 14:29:37 +08:00
/**
* @description Digital flop toFixed
* @type {Number}
*/
digitalFlopToFixed: 0,
2019-09-03 11:07:45 +08:00
/**
* @description CRender animationCurve
* @type {String}
* @default animationCurve = 'easeOutCubic'
*/
animationCurve: 'easeOutCubic',
/**
* @description CRender animationFrame
* @type {String}
* @default animationFrame = 50
*/
animationFrame: 50,
2020-05-06 13:47:47 +08:00
/**
2020-05-06 14:15:15 +08:00
* @description showOriginValue
2020-05-06 13:47:47 +08:00
* @type {Boolean}
2020-05-06 14:15:15 +08:00
* @default showOriginValue = false
*/
2020-05-06 14:15:15 +08:00
showOriginValue: false
2019-09-03 11:07:45 +08:00
},
mergedConfig: null,
chart: null,
activeIndex: 0,
animationHandler: ''
};
},
computed: {
digitalFlop() {
const {
mergedConfig,
activeIndex
} = this;
if (!mergedConfig) return {};
const {
digitalFlopStyle,
2020-01-10 14:29:37 +08:00
digitalFlopToFixed,
data,
2020-05-06 14:15:15 +08:00
showOriginValue
2019-09-03 11:07:45 +08:00
} = mergedConfig;
const value = data.map(({
value
}) => value);
let displayValue;
2020-05-06 14:15:15 +08:00
if (showOriginValue) {
displayValue = value[activeIndex];
} else {
const sum = value.reduce((all, v) => all + v, 0);
const percent = parseFloat(value[activeIndex] / sum * 100) || 0;
displayValue = percent;
}
2019-09-03 11:07:45 +08:00
return {
2020-05-06 14:15:15 +08:00
content: showOriginValue ? '{nt}' : '{nt}%',
number: [displayValue],
2020-01-10 14:29:37 +08:00
style: digitalFlopStyle,
toFixed: digitalFlopToFixed
2019-09-03 11:07:45 +08:00
};
},
ringName() {
const {
mergedConfig,
activeIndex
} = this;
if (!mergedConfig) return '';
return mergedConfig.data[activeIndex].name;
},
fontSize() {
const {
mergedConfig
} = this;
if (!mergedConfig) return '';
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`;
}
},
watch: {
config() {
const {
animationHandler,
mergeConfig,
setRingOption
} = this;
clearTimeout(animationHandler);
this.activeIndex = 0;
mergeConfig();
setRingOption();
}
},
methods: {
init() {
const {
initChart,
mergeConfig,
setRingOption
} = this;
initChart();
mergeConfig();
setRingOption();
},
initChart() {
const {
$refs
} = this;
this.chart = new Charts($refs['active-ring-chart']);
},
mergeConfig() {
const {
defaultConfig,
config
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
setRingOption() {
const {
getRingOption,
chart,
ringAnimation
} = this;
const option = getRingOption();
2019-10-24 10:28:43 +08:00
chart.setOption(option, true);
2019-09-03 11:07:45 +08:00
ringAnimation();
},
getRingOption() {
const {
mergedConfig,
getRealRadius
} = this;
const radius = getRealRadius();
mergedConfig.data.forEach(dataItem => {
dataItem.radius = radius;
});
return {
series: [{
type: 'pie',
...mergedConfig,
outsideLabel: {
show: false
}
}],
color: mergedConfig.color
};
},
getRealRadius(active = false) {
const {
mergedConfig,
chart
} = this;
const {
radius,
activeRadius,
lineWidth
} = mergedConfig;
const maxRadius = Math.min(...chart.render.area) / 2;
const halfLineWidth = lineWidth / 2;
let realRadius = active ? activeRadius : radius;
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius;
const insideRadius = realRadius - halfLineWidth;
const outSideRadius = realRadius + halfLineWidth;
return [insideRadius, outSideRadius];
},
ringAnimation() {
let {
activeIndex,
getRingOption,
chart,
getRealRadius
} = this;
const radius = getRealRadius();
const active = getRealRadius(true);
const option = getRingOption();
const {
data
} = option.series[0];
data.forEach((dataItem, i) => {
if (i === activeIndex) {
dataItem.radius = active;
} else {
dataItem.radius = radius;
}
});
2019-10-24 10:28:43 +08:00
chart.setOption(option, true);
2019-09-03 11:07:45 +08:00
const {
activeTimeGap
} = option.series[0];
this.animationHandler = setTimeout(foo => {
activeIndex += 1;
if (activeIndex >= data.length) activeIndex = 0;
this.activeIndex = activeIndex;
this.ringAnimation();
}, activeTimeGap);
}
},
mounted() {
const {
init
} = this;
init();
},
beforeDestroy() {
const {
animationHandler
} = this;
clearTimeout(animationHandler);
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$s = script$s;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$s = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "dv-active-ring-chart" }, [
_c("div", {
ref: "active-ring-chart",
staticClass: "active-ring-chart-container"
}),
_vm._v(" "),
_c(
"div",
{ staticClass: "active-ring-info" },
[
_c("dv-digital-flop", { attrs: { config: _vm.digitalFlop } }),
_vm._v(" "),
_c("div", { staticClass: "active-ring-name", style: _vm.fontSize }, [
_vm._v(_vm._s(_vm.ringName))
])
],
1
)
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$s = [];
__vue_render__$s._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$s = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-7319e037_0", { source: ".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$s = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$s = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$s = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$s = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
__vue_inject_styles__$s,
__vue_script__$s,
__vue_scope_id__$s,
__vue_is_functional_template__$s,
__vue_module_identifier__$s,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function activeRingChart (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$s.name, __vue_component__$s);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$t = {
2019-09-03 11:07:45 +08:00
name: 'DvCapsuleChart',
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
defaultConfig: {
/**
* @description Capsule chart data
* @type {Array<Object>}
* @default data = []
* @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
*/
data: [],
/**
* @description Colors (hex|rgb|rgba|color keywords)
* @type {Array<String>}
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
*/
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
/**
* @description Chart unit
* @type {String}
* @default unit = ''
*/
2020-04-28 16:43:44 +08:00
unit: '',
2020-05-06 14:15:15 +08:00
/**
* @description Show item value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
2019-09-03 11:07:45 +08:00
},
mergedConfig: null,
capsuleLength: [],
capsuleValue: [],
labelData: [],
labelDataLength: []
2019-09-03 11:07:45 +08:00
};
},
watch: {
config() {
const {
calcData
} = this;
calcData();
}
},
methods: {
calcData() {
const {
mergeConfig,
calcCapsuleLengthAndLabelData
} = this;
mergeConfig();
calcCapsuleLengthAndLabelData();
},
mergeConfig() {
let {
config,
defaultConfig
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
calcCapsuleLengthAndLabelData() {
const {
data
} = this.mergedConfig;
if (!data.length) return;
const capsuleValue = data.map(({
value
}) => value);
const maxValue = Math.max(...capsuleValue);
this.capsuleValue = capsuleValue;
2019-09-03 11:07:45 +08:00
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0);
const oneFifth = maxValue / 5;
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))));
this.labelData = labelData;
this.labelDataLength = Array.from(labelData).map(v => maxValue ? v / maxValue : 0);
2019-09-03 11:07:45 +08:00
}
},
mounted() {
const {
calcData
} = this;
calcData();
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$t = script$t;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$t = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ staticClass: "dv-capsule-chart" },
[
_vm.mergedConfig
? [
_c(
"div",
{ staticClass: "label-column" },
[
_vm._l(_vm.mergedConfig.data, function(item) {
return _c("div", { key: item.name }, [
_vm._v(_vm._s(item.name))
])
}),
_vm._v(" "),
_c("div", [_vm._v(" ")])
],
2
),
_vm._v(" "),
_c(
"div",
{ staticClass: "capsule-container" },
[
_vm._l(_vm.capsuleLength, function(capsule, index) {
return _c(
"div",
{ key: index, staticClass: "capsule-item" },
[
_c(
"div",
{
2020-05-06 14:15:15 +08:00
staticClass: "capsule-item-column",
style:
"width: " +
capsule * 100 +
"%; background-color: " +
_vm.mergedConfig.colors[
index % _vm.mergedConfig.colors.length
] +
";"
},
[
2020-05-06 14:15:15 +08:00
_vm.mergedConfig.showValue
? _c("div", { staticClass: "capsule-item-value" }, [
_vm._v(_vm._s(_vm.capsuleValue[index]))
])
: _vm._e()
]
)
2019-09-03 11:07:45 +08:00
]
)
}),
_vm._v(" "),
_c(
"div",
{ staticClass: "unit-label" },
_vm._l(_vm.labelData, function(label, index) {
2020-05-06 14:15:15 +08:00
return _c("div", { key: label + index }, [
_vm._v(_vm._s(label))
])
2019-09-03 11:07:45 +08:00
}),
0
)
],
2
),
_vm._v(" "),
_vm.mergedConfig.unit
? _c("div", { staticClass: "unit-text" }, [
_vm._v(_vm._s(_vm.mergedConfig.unit))
])
: _vm._e()
]
: _vm._e()
],
2
)
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$t = [];
__vue_render__$t._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$t = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-6f678c1a_0", { source: ".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n position: relative;\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n font-size: 12px;\n transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;EACb,yBAAyB;EACzB,mBAAmB;AACrB;AACA;EACE,eAAe;EACf,2BAA2B;AAC7B;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,8BAA8B;EAC9B,mBAAmB;AACrB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n position: relative;\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n font-size: 12px;\n transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$t = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$t = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$t = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$t = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
__vue_inject_styles__$t,
__vue_script__$t,
__vue_scope_id__$t,
__vue_is_functional_template__$t,
__vue_module_identifier__$t,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function capsuleChart (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$t.name, __vue_component__$t);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$u = {
2019-09-03 11:07:45 +08:00
name: 'DvWaterLevelPond',
props: {
config: Object,
default: () => ({})
},
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
2020-05-25 15:57:26 +08:00
gradientId: `water-level-pond-${id}`,
2019-09-03 11:07:45 +08:00
defaultConfig: {
/**
* @description Data
* @type {Array<Number>}
* @default data = []
* @example data = [60, 40]
*/
data: [],
/**
* @description Shape of wanter level pond
* @type {String}
* @default shape = 'rect'
* @example shape = 'rect' | 'roundRect' | 'round'
*/
shape: 'rect',
/**
* @description Water wave number
* @type {Number}
* @default waveNum = 3
*/
waveNum: 3,
/**
* @description Water wave height (px)
* @type {Number}
* @default waveHeight = 40
*/
waveHeight: 40,
/**
* @description Wave opacity
* @type {Number}
* @default waveOpacity = 0.4
*/
waveOpacity: 0.4,
/**
* @description Colors (hex|rgb|rgba|color keywords)
* @type {Array<String>}
* @default colors = ['#00BAFF', '#3DE7C9']
* @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
*/
colors: ['#3DE7C9', '#00BAFF'],
/**
* @description Formatter
* @type {String}
* @default formatter = '{value}%'
*/
formatter: '{value}%'
},
mergedConfig: {},
renderer: null,
svgBorderGradient: [],
details: '',
waves: [],
animation: false
};
},
computed: {
radius() {
const {
shape
} = this.mergedConfig;
if (shape === 'round') return '50%';
if (shape === 'rect') return '0';
if (shape === 'roundRect') return '10px';
return '0';
},
shape() {
const {
shape
} = this.mergedConfig;
if (!shape) return 'rect';
return shape;
}
},
watch: {
config() {
const {
calcData,
renderer
} = this;
renderer.delAllGraph();
this.waves = [];
setTimeout(calcData, 0);
}
},
methods: {
init() {
const {
initRender,
config,
calcData
} = this;
initRender();
if (!config) return;
calcData();
},
initRender() {
const {
$refs
} = this;
this.renderer = new CRender($refs['water-pond-level']);
},
calcData() {
const {
mergeConfig,
calcSvgBorderGradient,
calcDetails
} = this;
mergeConfig();
calcSvgBorderGradient();
calcDetails();
const {
addWave,
animationWave
} = this;
addWave();
animationWave();
},
mergeConfig() {
const {
config,
defaultConfig
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config);
},
calcSvgBorderGradient() {
const {
colors
} = this.mergedConfig;
const colorNum = colors.length;
const colorOffsetGap = 100 / (colorNum - 1);
this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c]);
},
calcDetails() {
const {
data,
formatter
} = this.mergedConfig;
if (!data.length) {
this.details = '';
return;
}
const maxValue = Math.max(...data);
this.details = formatter.replace('{value}', maxValue);
},
addWave() {
const {
renderer,
getWaveShapes,
getWaveStyle,
drawed
} = this;
const shapes = getWaveShapes();
const style = getWaveStyle();
this.waves = shapes.map(shape => renderer.add({
name: 'smoothline',
animationFrame: 300,
shape,
style,
drawed
}));
},
getWaveShapes() {
const {
mergedConfig,
renderer,
mergeOffset
} = this;
const {
waveNum,
waveHeight,
data
} = mergedConfig;
const [w, h] = renderer.area;
const pointsNum = waveNum * 4 + 4;
const pointXGap = w / waveNum / 2;
return data.map(v => {
let points = new Array(pointsNum).fill(0).map((foo, j) => {
const x = w - pointXGap * j;
const startY = (1 - v / 100) * h;
const y = j % 2 === 0 ? startY : startY - waveHeight;
return [x, y];
});
points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]));
return {
points
};
});
},
mergeOffset([x, y], [ox, oy]) {
return [x + ox, y + oy];
},
getWaveStyle() {
const {
renderer,
mergedConfig
} = this;
const h = renderer.area[1];
return {
gradientColor: mergedConfig.colors,
gradientType: 'linear',
gradientParams: [0, 0, 0, h],
gradientWith: 'fill',
opacity: mergedConfig.waveOpacity,
translate: [0, 0]
};
},
drawed({
shape: {
points
}
}, {
ctx,
area
}) {
const firstPoint = points[0];
const lastPoint = points.slice(-1)[0];
const h = area[1];
ctx.lineTo(lastPoint[0], h);
ctx.lineTo(firstPoint[0], h);
ctx.closePath();
ctx.fill();
},
async animationWave(repeat = 1) {
const {
waves,
renderer,
animation
} = this;
if (animation) return;
this.animation = true;
const w = renderer.area[0];
waves.forEach(graph => {
graph.attr('style', {
translate: [0, 0]
});
graph.animation('style', {
translate: [w, 0]
}, true);
});
await renderer.launchAnimation();
this.animation = false;
if (!renderer.graphs.length) return;
this.animationWave(repeat + 1);
}
},
mounted() {
const {
init
} = this;
init();
},
beforeDestroy() {
const {
renderer
} = this;
renderer.delAllGraph();
this.waves = [];
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$u = script$u;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$u = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "dv-water-pond-level" }, [
_vm.renderer
? _c("svg", [
_c(
"defs",
[
_c(
"linearGradient",
{
attrs: {
id: _vm.gradientId,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}
},
_vm._l(_vm.svgBorderGradient, function(lc) {
return _c("stop", {
key: lc[0],
attrs: { offset: lc[0], "stop-color": lc[1] }
})
}),
1
)
],
1
),
_vm._v(" "),
_vm.renderer
? _c(
"text",
{
attrs: {
stroke: "url(#" + _vm.gradientId + ")",
fill: "url(#" + _vm.gradientId + ")",
x: _vm.renderer.area[0] / 2 + 8,
y: _vm.renderer.area[1] / 2 + 8
}
},
[_vm._v("\n " + _vm._s(_vm.details) + "\n ")]
)
: _vm._e(),
_vm._v(" "),
!_vm.shape || _vm.shape === "round"
? _c("ellipse", {
attrs: {
cx: _vm.renderer.area[0] / 2 + 8,
cy: _vm.renderer.area[1] / 2 + 8,
rx: _vm.renderer.area[0] / 2 + 5,
ry: _vm.renderer.area[1] / 2 + 5,
stroke: "url(#" + _vm.gradientId + ")"
}
})
: _c("rect", {
attrs: {
x: "2",
y: "2",
rx: _vm.shape === "roundRect" ? 10 : 0,
ry: _vm.shape === "roundRect" ? 10 : 0,
width: _vm.renderer.area[0] + 12,
height: _vm.renderer.area[1] + 12,
stroke: "url(#" + _vm.gradientId + ")"
}
})
])
: _vm._e(),
_vm._v(" "),
_c("canvas", {
ref: "water-pond-level",
style: "border-radius: " + _vm.radius + ";"
})
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$u = [];
__vue_render__$u._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$u = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-be672a2c_0", { source: ".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$u = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$u = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$u = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$u = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
__vue_inject_styles__$u,
__vue_script__$u,
__vue_scope_id__$u,
__vue_is_functional_template__$u,
__vue_module_identifier__$u,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function waterLevelPond (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$u.name, __vue_component__$u);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$v = {
2019-09-03 11:07:45 +08:00
name: 'DvPercentPond',
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
2020-05-25 15:57:26 +08:00
gradientId1: `percent-pond-gradientId1-${id}`,
gradientId2: `percent-pond-gradientId2-${id}`,
2019-09-03 11:07:45 +08:00
width: 0,
height: 0,
2020-05-25 15:57:26 +08:00
id: 0,
2019-09-03 11:07:45 +08:00
defaultConfig: {
/**
* @description Value
* @type {Number}
* @default value = 0
*/
value: 0,
/**
* @description Colors (hex|rgb|rgba|color keywords)
* @type {Array<String>}
* @default colors = ['#00BAFF', '#3DE7C9']
* @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
*/
colors: ['#3DE7C9', '#00BAFF'],
/**
* @description Border width
* @type {Number}
* @default borderWidth = 3
*/
borderWidth: 3,
/**
* @description Gap between border and pond
* @type {Number}
* @default borderGap = 3
*/
borderGap: 3,
/**
* @description Line dash
* @type {Array<Number>}
* @default lineDash = [5, 1]
*/
lineDash: [5, 1],
/**
* @description Text color
* @type {String}
* @default textColor = '#fff'
*/
textColor: '#fff',
/**
* @description Border radius
* @type {Number}
* @default borderRadius = 5
*/
borderRadius: 5,
/**
* @description Local Gradient
* @type {Boolean}
* @default localGradient = false
* @example localGradient = false | true
*/
localGradient: false,
/**
* @description Formatter
* @type {String}
* @default formatter = '{value}%'
*/
formatter: '{value}%'
},
mergedConfig: null
};
},
computed: {
rectWidth() {
const {
mergedConfig,
width
} = this;
if (!mergedConfig) return 0;
const {
borderWidth
} = mergedConfig;
return width - borderWidth;
},
rectHeight() {
const {
mergedConfig,
height
} = this;
if (!mergedConfig) return 0;
const {
borderWidth
} = mergedConfig;
return height - borderWidth;
},
points() {
const {
mergedConfig,
width,
height
} = this;
const halfHeight = height / 2;
if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`;
const {
borderWidth,
borderGap,
value
} = mergedConfig;
const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value;
return `
${borderWidth + borderGap}, ${halfHeight}
${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
`;
},
polylineWidth() {
const {
mergedConfig,
height
} = this;
if (!mergedConfig) return 0;
const {
borderWidth,
borderGap
} = mergedConfig;
return height - (borderWidth + borderGap) * 2;
},
linearGradient() {
const {
mergedConfig
} = this;
if (!mergedConfig) return [];
const {
colors
} = mergedConfig;
const colorNum = colors.length;
const colorOffsetGap = 100 / (colorNum - 1);
return colors.map((c, i) => [colorOffsetGap * i, c]);
},
polylineGradient() {
const {
gradientId1,
gradientId2,
mergedConfig
} = this;
if (!mergedConfig) return gradientId2;
if (mergedConfig.localGradient) return gradientId1;
return gradientId2;
},
gradient2XPos() {
const {
mergedConfig
} = this;
if (!mergedConfig) return '100%';
const {
value
} = mergedConfig;
return `${200 - value}%`;
},
details() {
const {
mergedConfig
} = this;
if (!mergedConfig) return '';
const {
value,
formatter
} = mergedConfig;
return formatter.replace('{value}', value);
}
},
watch: {
config() {
const {
mergeConfig
} = this;
mergeConfig();
}
},
methods: {
async init() {
const {
initWH,
config,
mergeConfig
} = this;
await initWH();
if (!config) return;
mergeConfig();
},
async initWH() {
const {
$nextTick,
$refs
} = this;
await $nextTick();
2020-05-25 15:57:26 +08:00
const {
clientWidth,
clientHeight
} = $refs['percent-pond'];
this.width = clientWidth;
this.height = clientHeight;
2019-09-03 11:07:45 +08:00
},
mergeConfig() {
2019-09-10 15:11:56 +08:00
const {
2019-09-03 11:07:45 +08:00
config,
defaultConfig
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
}
},
mounted() {
const {
init
} = this;
init();
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$v = script$v;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$v = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: "percent-pond", staticClass: "dv-percent-pond" }, [
_c("svg", [
_c(
"defs",
[
_c(
"linearGradient",
{
attrs: {
id: _vm.gradientId1,
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%"
}
},
_vm._l(_vm.linearGradient, function(lc) {
return _c("stop", {
key: lc[0],
attrs: { offset: lc[0] + "%", "stop-color": lc[1] }
})
}),
1
),
_vm._v(" "),
_c(
"linearGradient",
{
attrs: {
id: _vm.gradientId2,
x1: "0%",
y1: "0%",
x2: _vm.gradient2XPos,
y2: "0%"
}
},
_vm._l(_vm.linearGradient, function(lc) {
return _c("stop", {
key: lc[0],
attrs: { offset: lc[0] + "%", "stop-color": lc[1] }
})
}),
1
)
],
1
),
_vm._v(" "),
_c("rect", {
attrs: {
x: _vm.mergedConfig ? _vm.mergedConfig.borderWidth / 2 : "0",
y: _vm.mergedConfig ? _vm.mergedConfig.borderWidth / 2 : "0",
rx: _vm.mergedConfig ? _vm.mergedConfig.borderRadius : "0",
ry: _vm.mergedConfig ? _vm.mergedConfig.borderRadius : "0",
fill: "transparent",
"stroke-width": _vm.mergedConfig ? _vm.mergedConfig.borderWidth : "0",
stroke: "url(#" + _vm.gradientId1 + ")",
width: _vm.rectWidth > 0 ? _vm.rectWidth : 0,
height: _vm.rectHeight > 0 ? _vm.rectHeight : 0
}
}),
_vm._v(" "),
_c("polyline", {
attrs: {
"stroke-width": _vm.polylineWidth,
"stroke-dasharray": _vm.mergedConfig
? _vm.mergedConfig.lineDash.join(",")
: "0",
stroke: "url(#" + _vm.polylineGradient + ")",
points: _vm.points
}
}),
_vm._v(" "),
_c(
"text",
{
attrs: {
stroke: _vm.mergedConfig ? _vm.mergedConfig.textColor : "#fff",
fill: _vm.mergedConfig ? _vm.mergedConfig.textColor : "#fff",
x: _vm.width / 2,
y: _vm.height / 2
}
},
[_vm._v("\n " + _vm._s(_vm.details) + "\n ")]
)
])
])
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$v = [];
__vue_render__$v._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$v = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-5036687a_0", { source: ".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$v = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$v = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$v = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$v = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
__vue_inject_styles__$v,
__vue_script__$v,
__vue_scope_id__$v,
__vue_is_functional_template__$v,
__vue_module_identifier__$v,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function percentPond (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$v.name, __vue_component__$v);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$w = {
2019-09-03 11:07:45 +08:00
name: 'DvFlylineChart',
mixins: [autoResize],
props: {
config: {
type: Object,
default: () => ({})
},
dev: {
type: Boolean,
default: false
}
},
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2019-09-03 11:07:45 +08:00
return {
ref: 'dv-flyline-chart',
unique: Math.random(),
2020-05-25 15:57:26 +08:00
maskId: `flyline-mask-id-${id}`,
maskCircleId: `mask-circle-id-${id}`,
gradientId: `gradient-id-${id}`,
gradient2Id: `gradient2-id-${id}`,
2019-09-03 11:07:45 +08:00
defaultConfig: {
/**
* @description Flyline chart center point
* @type {Array<Number>}
* @default centerPoint = [0, 0]
*/
centerPoint: [0, 0],
/**
* @description Flyline start points
* @type {Array<Array<Number>>}
* @default points = []
* @example points = [[10, 10], [100, 100]]
*/
points: [],
/**
* @description Flyline width
* @type {Number}
* @default lineWidth = 1
*/
lineWidth: 1,
/**
* @description Orbit color
* @type {String}
* @default orbitColor = 'rgba(103, 224, 227, .2)'
*/
orbitColor: 'rgba(103, 224, 227, .2)',
/**
* @description Flyline color
* @type {String}
* @default orbitColor = '#ffde93'
*/
flylineColor: '#ffde93',
/**
* @description K value
* @type {Number}
* @default k = -0.5
* @example k = -1 ~ 1
*/
k: -0.5,
/**
* @description Flyline curvature
* @type {Number}
* @default curvature = 5
*/
curvature: 5,
/**
* @description Flyline radius
* @type {Number}
* @default flylineRadius = 100
*/
flylineRadius: 100,
/**
* @description Flyline animation duration
* @type {Array<Number>}
* @default duration = [20, 30]
*/
duration: [20, 30],
/**
* @description Relative points position
* @type {Boolean}
* @default relative = true
*/
relative: true,
/**
* @description Back ground image url
* @type {String}
* @default bgImgUrl = ''
* @example bgImgUrl = './img/bg.jpg'
*/
bgImgUrl: '',
/**
* @description Text configuration
* @type {Object}
*/
text: {
/**
* @description Text offset
* @type {Array<Number>}
* @default offset = [0, 15]
*/
offset: [0, 15],
/**
* @description Text color
* @type {String}
* @default color = '#ffdb5c'
*/
color: '#ffdb5c',
/**
* @description Text font size
* @type {Number}
* @default fontSize = 12
*/
fontSize: 12
},
/**
* @description Halo configuration
* @type {Object}
*/
halo: {
/**
* @description Weather to show halo
* @type {Boolean}
* @default show = true
* @example show = true | false
*/
show: true,
/**
* @description Halo animation duration (10 = 1s)
* @type {Number}
* @default duration = 30
*/
duration: 30,
/**
* @description Halo color
* @type {String}
* @default color = '#fb7293'
*/
color: '#fb7293',
/**
* @description Halo max radius
* @type {Number}
* @default radius = 120
*/
radius: 120
},
/**
* @description Center point img configuration
* @type {Object}
*/
centerPointImg: {
/**
* @description Center point img width
* @type {Number}
* @default width = 40
*/
width: 40,
/**
* @description Center point img height
* @type {Number}
* @default height = 40
*/
height: 40,
/**
* @description Center point img url
* @type {String}
* @default url = ''
*/
url: ''
},
/**
* @description Points img configuration
* @type {Object}
* @default radius = 120
*/
pointsImg: {
/**
* @description Points img width
* @type {Number}
* @default width = 15
*/
width: 15,
/**
* @description Points img height
* @type {Number}
* @default height = 15
*/
height: 15,
/**
* @description Points img url
* @type {String}
* @default url = ''
*/
url: ''
}
},
mergedConfig: null,
paths: [],
lengths: [],
times: [],
texts: []
};
},
watch: {
config() {
const {
calcData
} = this;
calcData();
}
},
methods: {
afterAutoResizeMixinInit() {
const {
calcData
} = this;
calcData();
},
onResize() {
const {
calcData
} = this;
calcData();
},
async calcData() {
const {
mergeConfig,
createFlylinePaths,
calcLineLengths
} = this;
mergeConfig();
createFlylinePaths();
await calcLineLengths();
const {
calcTimes,
calcTexts
} = this;
calcTimes();
calcTexts();
},
mergeConfig() {
let {
config,
defaultConfig
} = this;
const mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
const {
points
} = mergedConfig;
mergedConfig.points = points.map(item => {
if (item instanceof Array) {
return {
position: item,
text: ''
};
}
return item;
});
this.mergedConfig = mergedConfig;
},
createFlylinePaths() {
const {
getPath,
mergedConfig,
width,
height
} = this;
let {
centerPoint,
points,
relative
} = mergedConfig;
points = points.map(({
position
}) => position);
if (relative) {
centerPoint = [width * centerPoint[0], height * centerPoint[1]];
points = points.map(([x, y]) => [width * x, height * y]);
}
this.paths = points.map(point => getPath(centerPoint, point));
},
getPath(center, point) {
const {
getControlPoint
} = this;
const controlPoint = getControlPoint(center, point);
return [point, controlPoint, center];
},
getControlPoint([sx, sy], [ex, ey]) {
const {
getKLinePointByx,
mergedConfig
} = this;
const {
curvature,
k
} = mergedConfig;
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2];
const distance = getPointDistance([sx, sy], [ex, ey]);
const targetLength = distance / curvature;
const disDived = targetLength / 2;
let [dx, dy] = [mx, my];
do {
dx += disDived;
dy = getKLinePointByx(k, [mx, my], dx)[1];
} while (getPointDistance([mx, my], [dx, dy]) < targetLength);
return [dx, dy];
},
getKLinePointByx(k, [lx, ly], x) {
const y = ly - k * lx + k * x;
return [x, y];
},
async calcLineLengths() {
const {
$nextTick,
paths,
$refs
} = this;
await $nextTick();
this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength());
},
calcTimes() {
const {
duration,
points
} = this.mergedConfig;
this.times = points.map(foo => randomExtend(...duration) / 10);
},
calcTexts() {
const {
points
} = this.mergedConfig;
this.texts = points.map(({
text
}) => text);
},
consoleClickPos({
offsetX,
offsetY
}) {
const {
width,
height,
dev
} = this;
if (!dev) return;
const relativeX = (offsetX / width).toFixed(2);
const relativeY = (offsetY / height).toFixed(2);
console.warn(`dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`);
}
}
};
/* script */
2019-12-06 21:07:16 +08:00
const __vue_script__$w = script$w;
2019-09-03 11:07:45 +08:00
/* template */
2019-12-06 21:07:16 +08:00
var __vue_render__$w = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
ref: "dv-flyline-chart",
staticClass: "dv-flyline-chart",
style:
"background-image: url(" +
(_vm.mergedConfig ? _vm.mergedConfig.bgImgUrl : "") +
")",
on: { click: _vm.consoleClickPos }
},
[
_vm.mergedConfig
? _c(
"svg",
{ attrs: { width: _vm.width, height: _vm.height } },
[
_c(
"defs",
[
_c(
"radialGradient",
{
attrs: {
id: _vm.gradientId,
cx: "50%",
cy: "50%",
r: "50%"
}
},
[
_c("stop", {
attrs: {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "1"
}
}),
_vm._v(" "),
_c("stop", {
attrs: {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "0"
}
})
],
1
),
_vm._v(" "),
_c(
"radialGradient",
{
attrs: {
id: _vm.gradient2Id,
cx: "50%",
cy: "50%",
r: "50%"
}
},
[
_c("stop", {
attrs: {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "0"
}
}),
_vm._v(" "),
_c("stop", {
attrs: {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "1"
}
})
],
1
),
_vm._v(" "),
_vm.paths[0]
? _c(
"circle",
{
attrs: {
id: "circle" + _vm.paths[0].toString(),
cx: _vm.paths[0][2][0],
cy: _vm.paths[0][2][1]
}
},
[
_c("animate", {
attrs: {
attributeName: "r",
values: "1;" + _vm.mergedConfig.halo.radius,
dur: _vm.mergedConfig.halo.duration / 10 + "s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "opacity",
values: "1;0",
dur: _vm.mergedConfig.halo.duration / 10 + "s",
repeatCount: "indefinite"
}
})
]
)
: _vm._e()
],
1
),
_vm._v(" "),
_vm.paths[0]
? _c("image", {
attrs: {
"xlink:href": _vm.mergedConfig.centerPointImg.url,
width: _vm.mergedConfig.centerPointImg.width,
height: _vm.mergedConfig.centerPointImg.height,
x:
_vm.paths[0][2][0] -
_vm.mergedConfig.centerPointImg.width / 2,
y:
_vm.paths[0][2][1] -
_vm.mergedConfig.centerPointImg.height / 2
}
})
: _vm._e(),
_vm._v(" "),
_c(
"mask",
{ attrs: { id: "maskhalo" + _vm.paths[0].toString() } },
[
_vm.paths[0]
? _c("use", {
attrs: {
"xlink:href": "#circle" + _vm.paths[0].toString(),
fill: "url(#" + _vm.gradient2Id + ")"
}
})
: _vm._e()
]
),
_vm._v(" "),
_vm.paths[0] && _vm.mergedConfig.halo.show
? _c("use", {
attrs: {
"xlink:href": "#circle" + _vm.paths[0].toString(),
fill: _vm.mergedConfig.halo.color,
mask: "url(#maskhalo" + _vm.paths[0].toString() + ")"
}
})
: _vm._e(),
_vm._v(" "),
_vm._l(_vm.paths, function(path, i) {
return _c("g", { key: i }, [
_c("defs", [
_c("path", {
ref: "path" + i,
refInFor: true,
attrs: {
id: "path" + path.toString(),
d:
"M" +
path[0].toString() +
" Q" +
path[1].toString() +
" " +
path[2].toString(),
fill: "transparent"
}
})
]),
_vm._v(" "),
_c("use", {
attrs: {
"xlink:href": "#path" + path.toString(),
"stroke-width": _vm.mergedConfig.lineWidth,
stroke: _vm.mergedConfig.orbitColor
}
}),
_vm._v(" "),
_vm.lengths[i]
? _c(
"use",
{
attrs: {
"xlink:href": "#path" + path.toString(),
"stroke-width": _vm.mergedConfig.lineWidth,
stroke: _vm.mergedConfig.flylineColor,
mask:
"url(#mask" + _vm.unique + path.toString() + ")"
}
},
[
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
from: "0, " + _vm.lengths[i],
to: _vm.lengths[i] + ", 0",
dur: _vm.times[i] || 0,
repeatCount: "indefinite"
}
})
]
)
: _vm._e(),
_vm._v(" "),
_c(
"mask",
{ attrs: { id: "mask" + _vm.unique + path.toString() } },
[
_c(
"circle",
{
attrs: {
cx: "0",
cy: "0",
r: _vm.mergedConfig.flylineRadius,
fill: "url(#" + _vm.gradientId + ")"
}
},
[
_c("animateMotion", {
attrs: {
dur: _vm.times[i] || 0,
path:
"M" +
path[0].toString() +
" Q" +
path[1].toString() +
" " +
path[2].toString(),
rotate: "auto",
repeatCount: "indefinite"
}
})
],
1
)
]
),
_vm._v(" "),
_c("image", {
attrs: {
"xlink:href": _vm.mergedConfig.pointsImg.url,
width: _vm.mergedConfig.pointsImg.width,
height: _vm.mergedConfig.pointsImg.height,
x: path[0][0] - _vm.mergedConfig.pointsImg.width / 2,
y: path[0][1] - _vm.mergedConfig.pointsImg.height / 2
}
}),
_vm._v(" "),
_c(
"text",
{
style:
"fontSize:" + _vm.mergedConfig.text.fontSize + "px;",
attrs: {
fill: _vm.mergedConfig.text.color,
x: path[0][0] + _vm.mergedConfig.text.offset[0],
y: path[0][1] + _vm.mergedConfig.text.offset[1]
}
},
[_vm._v("\n " + _vm._s(_vm.texts[i]) + "\n ")]
)
])
})
],
2
)
: _vm._e()
]
)
};
2019-12-06 21:07:16 +08:00
var __vue_staticRenderFns__$w = [];
__vue_render__$w._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2019-12-06 21:07:16 +08:00
const __vue_inject_styles__$w = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-1edfcf29_0", { source: ".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2019-12-06 21:07:16 +08:00
const __vue_scope_id__$w = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2019-12-06 21:07:16 +08:00
const __vue_module_identifier__$w = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2019-12-06 21:07:16 +08:00
const __vue_is_functional_template__$w = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$w = normalizeComponent(
2019-12-06 21:07:16 +08:00
{ render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
__vue_inject_styles__$w,
__vue_script__$w,
__vue_scope_id__$w,
__vue_is_functional_template__$w,
__vue_module_identifier__$w,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function flylineChart (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$w.name, __vue_component__$w);
2019-09-03 11:07:45 +08:00
}
//
2019-12-06 21:07:16 +08:00
var script$x = {
2020-01-05 22:18:00 +08:00
name: 'DvFlylineChartEnhanced',
mixins: [autoResize],
props: {
config: {
type: Object,
default: () => ({})
},
dev: {
type: Boolean,
default: false
}
},
data() {
2020-05-25 15:57:26 +08:00
const id = uuid();
2020-01-05 22:18:00 +08:00
return {
ref: 'dv-flyline-chart-enhanced',
unique: Math.random(),
2020-05-25 15:57:26 +08:00
flylineGradientId: `flyline-gradient-id-${id}`,
haloGradientId: `halo-gradient-id-${id}`,
2020-01-05 22:18:00 +08:00
/**
* @description Type Declaration
*
* interface Halo {
* show?: boolean
* duration?: [number, number]
* color?: string
* radius?: number
* }
*
* interface Text {
* show?: boolean
* offset?: [number, number]
* color?: string
* fontSize?: number
* }
*
* interface Icon {
* show?: boolean
* src?: string
* width?: number
* height?: number
* }
*
* interface Point {
* name: string
* coordinate: [number, number]
* halo?: Halo
* text?: Text
* icon?: Icon
* }
*
* interface Line {
* width?: number
* color?: string
* orbitColor?: string
* duration?: [number, number]
* radius?: string
* }
*
* interface Flyline extends Line {
* source: string
* target: string
* }
*
* interface FlylineWithPath extends Flyline {
* d: string
* path: [[number, number], [number, number], [number, number]]
* key: string
* }
*/
defaultConfig: {
/**
* @description Flyline chart points
* @type {Point[]}
* @default points = []
*/
points: [],
/**
* @description Lines
* @type {Flyline[]}
* @default lines = []
*/
lines: [],
/**
* @description Global halo configuration
* @type {Halo}
*/
halo: {
/**
* @description Whether to show halo
* @type {Boolean}
* @default show = false
*/
show: false,
/**
* @description Halo animation duration (1s = 10)
* @type {[number, number]}
*/
duration: [20, 30],
/**
* @description Halo color
* @type {String}
* @default color = '#fb7293'
*/
color: '#fb7293',
/**
* @description Halo radius
* @type {Number}
* @default radius = 120
*/
radius: 120
},
/**
* @description Global text configuration
* @type {Text}
*/
text: {
/**
* @description Whether to show text
* @type {Boolean}
* @default show = false
*/
show: false,
/**
* @description Text offset
* @type {[number, number]}
* @default offset = [0, 15]
*/
offset: [0, 15],
/**
* @description Text color
* @type {String}
* @default color = '#ffdb5c'
*/
color: '#ffdb5c',
/**
* @description Text font size
* @type {Number}
* @default fontSize = 12
*/
fontSize: 12
},
/**
* @description Global icon configuration
* @type {Icon}
*/
icon: {
/**
* @description Whether to show icon
* @type {Boolean}
* @default show = false
*/
show: false,
/**
* @description Icon src
* @type {String}
* @default src = ''
*/
src: '',
/**
* @description Icon width
* @type {Number}
* @default width = 15
*/
width: 15,
/**
* @description Icon height
* @type {Number}
* @default width = 15
*/
height: 15
},
/**
* @description Global line configuration
* @type {Line}
*/
line: {
/**
* @description Line width
* @type {Number}
* @default width = 1
*/
width: 1,
/**
* @description Flyline color
* @type {String}
* @default color = '#ffde93'
*/
color: '#ffde93',
/**
* @description Orbit color
* @type {String}
* @default orbitColor = 'rgba(103, 224, 227, .2)'
*/
orbitColor: 'rgba(103, 224, 227, .2)',
/**
* @description Flyline animation duration
* @type {[number, number]}
* @default duration = [20, 30]
*/
duration: [20, 30],
/**
* @description Flyline radius
* @type {Number}
* @default radius = 100
*/
radius: 100
},
/**
* @description Back ground image url
* @type {String}
* @default bgImgSrc = ''
*/
bgImgSrc: '',
/**
* @description K value
* @type {Number}
* @default k = -0.5
* @example k = -1 ~ 1
*/
k: -0.5,
/**
* @description Flyline curvature
* @type {Number}
* @default curvature = 5
*/
curvature: 5,
/**
* @description Relative points position
* @type {Boolean}
* @default relative = true
*/
relative: true
},
/**
* @description Fly line data
* @type {FlylineWithPath[]}
* @default flylines = []
*/
flylines: [],
/**
* @description Fly line lengths
* @type {Number[]}
* @default flylineLengths = []
*/
flylineLengths: [],
/**
* @description Fly line points
* @default flylinePoints = []
*/
flylinePoints: [],
mergedConfig: null
};
},
watch: {
config() {
const {
calcData
} = this;
calcData();
}
},
methods: {
afterAutoResizeMixinInit() {
const {
calcData
} = this;
calcData();
},
onResize() {
const {
calcData
} = this;
calcData();
},
async calcData() {
const {
mergeConfig,
calcflylinePoints,
calcLinePaths
} = this;
mergeConfig();
calcflylinePoints();
calcLinePaths();
const {
calcLineLengths
} = this;
await calcLineLengths();
},
mergeConfig() {
let {
config,
defaultConfig
} = this;
const mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
const {
points,
lines,
halo,
text,
icon,
line
} = mergedConfig;
mergedConfig.points = points.map(item => {
item.halo = util_2$1(util_1(halo, true), item.halo || {});
item.text = util_2$1(util_1(text, true), item.text || {});
item.icon = util_2$1(util_1(icon, true), item.icon || {});
return item;
});
mergedConfig.lines = lines.map(item => {
return util_2$1(util_1(line, true), item);
});
this.mergedConfig = mergedConfig;
},
calcflylinePoints() {
const {
mergedConfig,
width,
height
} = this;
const {
relative,
points
} = mergedConfig;
this.flylinePoints = points.map((item, i) => {
const {
coordinate: [x, y],
halo,
icon,
text
} = item;
if (relative) item.coordinate = [x * width, y * height];
item.halo.time = randomExtend(...halo.duration) / 10;
const {
width: iw,
height: ih
} = icon;
item.icon.x = item.coordinate[0] - iw / 2;
item.icon.y = item.coordinate[1] - ih / 2;
const [ox, oy] = text.offset;
item.text.x = item.coordinate[0] + ox;
item.text.y = item.coordinate[1] + oy;
item.key = `${item.coordinate.toString()}${i}`;
return item;
});
},
calcLinePaths() {
const {
getPath,
mergedConfig
} = this;
const {
points,
lines
} = mergedConfig;
this.flylines = lines.map(item => {
const {
source,
target,
duration
} = item;
const sourcePoint = points.find(({
name
}) => name === source).coordinate;
const targetPoint = points.find(({
name
}) => name === target).coordinate;
const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))));
const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`;
const key = `path${path.toString()}`;
const time = randomExtend(...duration) / 10;
return { ...item,
path,
key,
d,
time
};
});
},
getPath(start, end) {
const {
getControlPoint
} = this;
const controlPoint = getControlPoint(start, end);
return [start, controlPoint, end];
},
getControlPoint([sx, sy], [ex, ey]) {
const {
getKLinePointByx,
mergedConfig
} = this;
const {
curvature,
k
} = mergedConfig;
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2];
const distance = getPointDistance([sx, sy], [ex, ey]);
const targetLength = distance / curvature;
const disDived = targetLength / 2;
let [dx, dy] = [mx, my];
do {
dx += disDived;
dy = getKLinePointByx(k, [mx, my], dx)[1];
} while (getPointDistance([mx, my], [dx, dy]) < targetLength);
return [dx, dy];
},
getKLinePointByx(k, [lx, ly], x) {
const y = ly - k * lx + k * x;
return [x, y];
},
async calcLineLengths() {
const {
$nextTick,
flylines,
$refs
} = this;
await $nextTick();
this.flylineLengths = flylines.map(({
key
}) => $refs[key][0].getTotalLength());
},
consoleClickPos({
offsetX,
offsetY
}) {
const {
width,
height,
dev
} = this;
if (!dev) return;
const relativeX = (offsetX / width).toFixed(2);
const relativeY = (offsetY / height).toFixed(2);
console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`);
}
}
};
/* script */
const __vue_script__$x = script$x;
/* template */
var __vue_render__$x = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
ref: _vm.ref,
staticClass: "dv-flyline-chart-enhanced",
style:
"background-image: url(" +
(_vm.mergedConfig ? _vm.mergedConfig.bgImgSrc : "") +
")",
on: { click: _vm.consoleClickPos }
},
[
_vm.flylines.length
? _c(
"svg",
{ attrs: { width: _vm.width, height: _vm.height } },
[
_c(
"defs",
[
_c(
"radialGradient",
{
attrs: {
id: _vm.flylineGradientId,
cx: "50%",
cy: "50%",
r: "50%"
}
},
[
_c("stop", {
attrs: {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "1"
}
}),
_vm._v(" "),
_c("stop", {
attrs: {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "0"
}
})
],
1
),
_vm._v(" "),
_c(
"radialGradient",
{
attrs: {
id: _vm.haloGradientId,
cx: "50%",
cy: "50%",
r: "50%"
}
},
[
_c("stop", {
attrs: {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "0"
}
}),
_vm._v(" "),
_c("stop", {
attrs: {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "1"
}
})
],
1
)
],
1
),
_vm._v(" "),
_vm._l(_vm.flylinePoints, function(point) {
return _c("g", { key: point.key + Math.random() }, [
_c("defs", [
point.halo.show
? _c(
"circle",
{
attrs: {
id: "halo" + _vm.unique + point.key,
cx: point.coordinate[0],
cy: point.coordinate[1]
}
},
[
_c("animate", {
attrs: {
attributeName: "r",
values: "1;" + point.halo.radius,
dur: point.halo.time + "s",
repeatCount: "indefinite"
}
}),
_vm._v(" "),
_c("animate", {
attrs: {
attributeName: "opacity",
values: "1;0",
dur: point.halo.time + "s",
repeatCount: "indefinite"
}
})
]
)
: _vm._e()
]),
_vm._v(" "),
_c(
"mask",
{ attrs: { id: "mask" + _vm.unique + point.key } },
[
point.halo.show
? _c("use", {
attrs: {
"xlink:href": "#halo" + _vm.unique + point.key,
fill: "url(#" + _vm.haloGradientId + ")"
}
})
: _vm._e()
]
),
_vm._v(" "),
point.halo.show
? _c("use", {
attrs: {
"xlink:href": "#halo" + _vm.unique + point.key,
fill: point.halo.color,
mask: "url(#mask" + _vm.unique + point.key + ")"
}
})
: _vm._e(),
_vm._v(" "),
point.icon.show
? _c("image", {
attrs: {
"xlink:href": point.icon.src,
width: point.icon.width,
height: point.icon.height,
x: point.icon.x,
y: point.icon.y
}
})
: _vm._e(),
_vm._v(" "),
point.text.show
? _c(
"text",
{
style:
"fontSize:" +
point.text.fontSize +
"px;color:" +
point.text.color,
attrs: {
fill: point.text.color,
x: point.text.x,
y: point.text.y
}
},
[_vm._v("\n " + _vm._s(point.name) + "\n ")]
)
: _vm._e()
])
}),
_vm._v(" "),
_vm._l(_vm.flylines, function(line, i) {
return _c("g", { key: line.key + Math.random() }, [
_c("defs", [
_c("path", {
ref: line.key,
refInFor: true,
attrs: { id: line.key, d: line.d, fill: "transparent" }
})
]),
_vm._v(" "),
_c("use", {
attrs: {
"xlink:href": "#" + line.key,
"stroke-width": line.width,
stroke: line.orbitColor
}
}),
_vm._v(" "),
_c(
"mask",
{ attrs: { id: "mask" + _vm.unique + line.key } },
[
_c(
"circle",
{
attrs: {
cx: "0",
cy: "0",
r: line.radius,
fill: "url(#" + _vm.flylineGradientId + ")"
}
},
[
_c("animateMotion", {
attrs: {
dur: line.time,
path: line.d,
rotate: "auto",
repeatCount: "indefinite"
}
})
],
1
)
]
),
_vm._v(" "),
_vm.flylineLengths[i]
? _c(
"use",
{
attrs: {
"xlink:href": "#" + line.key,
"stroke-width": line.width,
stroke: line.color,
mask: "url(#mask" + _vm.unique + line.key + ")"
}
},
[
_c("animate", {
attrs: {
attributeName: "stroke-dasharray",
from: "0, " + _vm.flylineLengths[i],
to: _vm.flylineLengths[i] + ", 0",
dur: line.time,
repeatCount: "indefinite"
}
})
]
)
: _vm._e()
])
})
],
2
)
: _vm._e()
]
)
};
var __vue_staticRenderFns__$x = [];
__vue_render__$x._withStripped = true;
/* style */
const __vue_inject_styles__$x = function (inject) {
if (!inject) return
2020-05-25 15:57:26 +08:00
inject("data-v-a7b8c35c_0", { source: ".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
2020-01-05 22:18:00 +08:00
};
/* scoped */
const __vue_scope_id__$x = undefined;
/* module identifier */
const __vue_module_identifier__$x = undefined;
/* functional template */
const __vue_is_functional_template__$x = false;
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2020-01-05 22:18:00 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$x = normalizeComponent(
2020-01-05 22:18:00 +08:00
{ render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
__vue_inject_styles__$x,
__vue_script__$x,
__vue_scope_id__$x,
__vue_is_functional_template__$x,
__vue_module_identifier__$x,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2020-01-05 22:18:00 +08:00
undefined
);
function flylineChartEnhanced (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$x.name, __vue_component__$x);
2020-01-05 22:18:00 +08:00
}
//
var script$y = {
2019-09-03 11:07:45 +08:00
name: 'DvConicalColumnChart',
mixins: [autoResize],
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
ref: 'conical-column-chart',
defaultConfig: {
/**
* @description Chart data
* @type {Array<Object>}
* @default data = []
*/
data: [],
/**
* @description Chart img
* @type {Array<String>}
* @default img = []
*/
img: [],
/**
* @description Chart font size
* @type {Number}
* @default fontSize = 12
*/
fontSize: 12,
/**
* @description Img side length
* @type {Number}
* @default imgSideLength = 30
*/
imgSideLength: 30,
/**
* @description Column color
* @type {String}
* @default columnColor = 'rgba(0, 194, 255, 0.4)'
*/
columnColor: 'rgba(0, 194, 255, 0.4)',
/**
* @description Text color
* @type {String}
* @default textColor = '#fff'
*/
textColor: '#fff',
/**
* @description Show value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
},
mergedConfig: null,
column: []
};
},
watch: {
config() {
const {
calcData
} = this;
calcData();
}
},
methods: {
afterAutoResizeMixinInit() {
const {
calcData
} = this;
calcData();
},
onResize() {
const {
calcData
} = this;
calcData();
},
calcData() {
const {
mergeConfig,
initData,
calcSVGPath
} = this;
mergeConfig();
initData();
calcSVGPath();
},
mergeConfig() {
const {
defaultConfig,
config
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
initData() {
const {
mergedConfig
} = this;
let {
data
} = mergedConfig;
data = util_1(data, true);
data.sort(({
value: a
}, {
value: b
}) => {
if (a > b) return -1;
if (a < b) return 1;
if (a === b) return 0;
});
const max = data[0] ? data[0].value : 10;
data = data.map(item => ({ ...item,
percent: item.value / max
}));
mergedConfig.data = data;
},
calcSVGPath() {
const {
mergedConfig,
width,
height
} = this;
const {
imgSideLength,
fontSize,
data
} = mergedConfig;
const itemNum = data.length;
const gap = width / (itemNum + 1);
const useAbleHeight = height - imgSideLength - fontSize - 5;
const svgBottom = height - fontSize - 5;
this.column = data.map((item, i) => {
const {
percent
} = item;
const middleXPos = gap * (i + 1);
const leftXPos = gap * i;
const rightXpos = gap * (i + 2);
const middleYPos = svgBottom - useAbleHeight * percent;
const controlYPos = useAbleHeight * percent * 0.6 + middleYPos;
const d = `
M${leftXPos}, ${svgBottom}
Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
M${middleXPos},${middleYPos}
Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
L${leftXPos}, ${svgBottom}
Z
`;
const textY = (svgBottom + middleYPos) / 2 + fontSize / 2;
return { ...item,
d,
x: middleXPos,
y: middleYPos,
textY
};
});
}
}
};
/* script */
2020-01-05 22:18:00 +08:00
const __vue_script__$y = script$y;
2019-09-03 11:07:45 +08:00
/* template */
2020-01-05 22:18:00 +08:00
var __vue_render__$y = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-conical-column-chart" }, [
_c(
"svg",
{ attrs: { width: _vm.width, height: _vm.height } },
_vm._l(_vm.column, function(item, i) {
return _c("g", { key: i }, [
_c("path", {
attrs: { d: item.d, fill: _vm.mergedConfig.columnColor }
}),
_vm._v(" "),
_c(
"text",
{
style: "fontSize:" + _vm.mergedConfig.fontSize + "px",
attrs: {
fill: _vm.mergedConfig.textColor,
x: item.x,
y: _vm.height - 4
}
},
[_vm._v("\n " + _vm._s(item.name) + "\n ")]
),
_vm._v(" "),
_vm.mergedConfig.img.length
? _c("image", {
attrs: {
"xlink:href":
_vm.mergedConfig.img[i % _vm.mergedConfig.img.length],
width: _vm.mergedConfig.imgSideLength,
height: _vm.mergedConfig.imgSideLength,
x: item.x - _vm.mergedConfig.imgSideLength / 2,
y: item.y - _vm.mergedConfig.imgSideLength
}
})
: _vm._e(),
_vm._v(" "),
_vm.mergedConfig.showValue
? _c(
"text",
{
style: "fontSize:" + _vm.mergedConfig.fontSize + "px",
attrs: {
fill: _vm.mergedConfig.textColor,
x: item.x,
y: item.textY
}
},
[_vm._v("\n " + _vm._s(item.value) + "\n ")]
)
: _vm._e()
])
}),
0
)
])
};
2020-01-05 22:18:00 +08:00
var __vue_staticRenderFns__$y = [];
__vue_render__$y._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2020-01-05 22:18:00 +08:00
const __vue_inject_styles__$y = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-382f06c7_0", { source: ".dv-conical-column-chart {\n width: 100%;\n height: 100%;\n}\n.dv-conical-column-chart text {\n text-anchor: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-conical-column-chart {\n width: 100%;\n height: 100%;\n}\n.dv-conical-column-chart text {\n text-anchor: middle;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2020-01-05 22:18:00 +08:00
const __vue_scope_id__$y = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2020-01-05 22:18:00 +08:00
const __vue_module_identifier__$y = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2020-01-05 22:18:00 +08:00
const __vue_is_functional_template__$y = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$y = normalizeComponent(
2020-01-05 22:18:00 +08:00
{ render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
__vue_inject_styles__$y,
__vue_script__$y,
__vue_scope_id__$y,
__vue_is_functional_template__$y,
__vue_module_identifier__$y,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function conicalColumnChart (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$y.name, __vue_component__$y);
2019-09-03 11:07:45 +08:00
}
function digitalFlop (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$r.name, __vue_component__$r);
2019-09-03 11:07:45 +08:00
}
//
2020-01-05 22:18:00 +08:00
var script$z = {
2019-09-03 11:07:45 +08:00
name: 'DvScrollBoard',
mixins: [autoResize],
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
ref: 'scroll-board',
defaultConfig: {
/**
* @description Board header
* @type {Array<String>}
* @default header = []
* @example header = ['column1', 'column2', 'column3']
*/
header: [],
/**
* @description Board data
* @type {Array<Array>}
* @default data = []
*/
data: [],
/**
* @description Row num
* @type {Number}
* @default rowNum = 5
*/
rowNum: 5,
/**
* @description Header background color
* @type {String}
* @default headerBGC = '#00BAFF'
*/
headerBGC: '#00BAFF',
/**
* @description Odd row background color
* @type {String}
* @default oddRowBGC = '#003B51'
*/
oddRowBGC: '#003B51',
/**
* @description Even row background color
* @type {String}
* @default evenRowBGC = '#003B51'
*/
evenRowBGC: '#0A2732',
/**
* @description Scroll wait time
* @type {Number}
* @default waitTime = 2000
*/
waitTime: 2000,
/**
* @description Header height
* @type {Number}
* @default headerHeight = 35
*/
headerHeight: 35,
/**
* @description Column width
* @type {Array<Number>}
* @default columnWidth = []
*/
columnWidth: [],
/**
* @description Column align
* @type {Array<String>}
* @default align = []
* @example align = ['left', 'center', 'right']
*/
align: [],
/**
* @description Show index
* @type {Boolean}
* @default index = false
*/
index: false,
2019-12-06 21:07:16 +08:00
/**
* @description index Header
* @type {String}
* @default indexHeader = '#'
*/
indexHeader: '#',
2019-09-03 11:07:45 +08:00
/**
* @description Carousel type
* @type {String}
* @default carousel = 'single'
* @example carousel = 'single' | 'page'
*/
carousel: 'single'
},
mergedConfig: null,
header: [],
rowsData: [],
rows: [],
widths: [],
heights: [],
avgHeight: 0,
aligns: [],
animationIndex: 0,
2019-11-12 12:46:39 +08:00
animationHandler: '',
updater: 0
2019-09-03 11:07:45 +08:00
};
},
watch: {
config() {
const {
stopAnimation,
calcData
} = this;
stopAnimation();
calcData();
}
},
methods: {
afterAutoResizeMixinInit() {
const {
calcData
} = this;
calcData();
},
onResize() {
const {
mergedConfig,
calcWidths,
calcHeights
} = this;
if (!mergedConfig) return;
calcWidths();
calcHeights();
},
calcData() {
const {
mergeConfig,
calcHeaderData,
calcRowsData
} = this;
mergeConfig();
calcHeaderData();
calcRowsData();
const {
calcWidths,
calcHeights,
calcAligns
} = this;
calcWidths();
calcHeights();
calcAligns();
const {
animation
} = this;
animation(true);
},
mergeConfig() {
let {
config,
defaultConfig
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
calcHeaderData() {
let {
header,
2019-12-06 21:07:16 +08:00
index,
indexHeader
2019-09-03 11:07:45 +08:00
} = this.mergedConfig;
if (!header.length) {
this.header = [];
return;
}
header = [...header];
2019-12-06 21:07:16 +08:00
if (index) header.unshift(indexHeader);
2019-09-03 11:07:45 +08:00
this.header = header;
},
calcRowsData() {
let {
data,
index,
headerBGC,
rowNum
} = this.mergedConfig;
if (index) {
data = data.map((row, i) => {
row = [...row];
2019-09-24 16:34:08 +08:00
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`;
2019-09-03 11:07:45 +08:00
row.unshift(indexTag);
return row;
});
}
data = data.map((ceils, i) => ({
ceils,
rowIndex: i
}));
const rowLength = data.length;
if (rowLength > rowNum && rowLength < 2 * rowNum) {
data = [...data, ...data];
}
data = data.map((d, i) => ({ ...d,
scroll: i
}));
this.rowsData = data;
this.rows = data;
},
calcWidths() {
const {
width,
mergedConfig,
rowsData
} = this;
const {
2019-09-05 17:33:05 +08:00
columnWidth,
header
2019-09-03 11:07:45 +08:00
} = mergedConfig;
const usedWidth = columnWidth.reduce((all, w) => all + w, 0);
2019-09-05 17:33:05 +08:00
let columnNum = 0;
if (rowsData[0]) {
columnNum = rowsData[0].ceils.length;
} else if (header.length) {
columnNum = header.length;
}
2019-09-03 11:07:45 +08:00
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length);
const widths = new Array(columnNum).fill(avgWidth);
this.widths = util_2$1(widths, columnWidth);
},
calcHeights(onresize = false) {
const {
height,
mergedConfig,
header
} = this;
const {
headerHeight,
rowNum,
data
} = mergedConfig;
let allHeight = height;
if (header.length) allHeight -= headerHeight;
const avgHeight = allHeight / rowNum;
this.avgHeight = avgHeight;
if (!onresize) this.heights = new Array(data.length).fill(avgHeight);
},
calcAligns() {
const {
header,
mergedConfig
} = this;
const columnNum = header.length;
let aligns = new Array(columnNum).fill('left');
const {
align
} = mergedConfig;
this.aligns = util_2$1(aligns, align);
},
async animation(start = false) {
let {
avgHeight,
animationIndex,
mergedConfig,
rowsData,
2019-11-12 12:46:39 +08:00
animation,
updater
2019-09-03 11:07:45 +08:00
} = this;
const {
waitTime,
carousel,
rowNum
} = mergedConfig;
const rowLength = rowsData.length;
if (rowNum >= rowLength) return;
2019-11-12 12:46:39 +08:00
if (start) {
await new Promise(resolve => setTimeout(resolve, waitTime));
if (updater !== this.updater) return;
}
2019-09-03 11:07:45 +08:00
const animationNum = carousel === 'single' ? 1 : rowNum;
let rows = rowsData.slice(animationIndex);
rows.push(...rowsData.slice(0, animationIndex));
this.rows = rows;
this.heights = new Array(rowLength).fill(avgHeight);
await new Promise(resolve => setTimeout(resolve, 300));
2019-11-12 12:46:39 +08:00
if (updater !== this.updater) return;
2019-09-03 11:07:45 +08:00
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
animationIndex += animationNum;
const back = animationIndex - rowLength;
if (back >= 0) animationIndex = back;
this.animationIndex = animationIndex;
this.animationHandler = setTimeout(animation, waitTime - 300);
},
stopAnimation() {
const {
2019-11-12 12:46:39 +08:00
animationHandler,
updater
2019-09-03 11:07:45 +08:00
} = this;
2019-11-12 12:46:39 +08:00
this.updater = (updater + 1) % 999999;
2019-09-03 11:07:45 +08:00
if (!animationHandler) return;
clearTimeout(animationHandler);
},
emitEvent(ri, ci, row, ceil) {
const {
ceils,
rowIndex
} = row;
this.$emit('click', {
row: ceils,
ceil,
rowIndex,
columnIndex: ci
});
}
},
destroyed() {
const {
stopAnimation
} = this;
stopAnimation();
}
};
/* script */
2020-01-05 22:18:00 +08:00
const __vue_script__$z = script$z;
2019-09-03 11:07:45 +08:00
/* template */
2020-01-05 22:18:00 +08:00
var __vue_render__$z = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { ref: _vm.ref, staticClass: "dv-scroll-board" }, [
_vm.header.length && _vm.mergedConfig
? _c(
"div",
{
staticClass: "header",
style: "background-color: " + _vm.mergedConfig.headerBGC + ";"
},
_vm._l(_vm.header, function(headerItem, i) {
return _c("div", {
key: headerItem + i,
staticClass: "header-item",
style:
"\n height: " +
_vm.mergedConfig.headerHeight +
"px;\n line-height: " +
_vm.mergedConfig.headerHeight +
"px;\n width: " +
_vm.widths[i] +
"px;\n ",
attrs: { align: _vm.aligns[i] },
domProps: { innerHTML: _vm._s(headerItem) }
})
}),
0
)
: _vm._e(),
_vm._v(" "),
_vm.mergedConfig
? _c(
"div",
{
staticClass: "rows",
style:
"height: " +
(_vm.height -
(_vm.header.length ? _vm.mergedConfig.headerHeight : 0)) +
"px;"
},
_vm._l(_vm.rows, function(row, ri) {
return _c(
"div",
{
key: row.toString() + row.scroll,
staticClass: "row-item",
style:
"\n height: " +
_vm.heights[ri] +
"px;\n line-height: " +
_vm.heights[ri] +
"px;\n background-color: " +
_vm.mergedConfig[
row.rowIndex % 2 === 0 ? "evenRowBGC" : "oddRowBGC"
] +
";\n "
},
_vm._l(row.ceils, function(ceil, ci) {
return _c("div", {
key: ceil + ri + ci,
staticClass: "ceil",
style: "width: " + _vm.widths[ci] + "px;",
attrs: { align: _vm.aligns[ci] },
domProps: { innerHTML: _vm._s(ceil) },
on: {
click: function($event) {
return _vm.emitEvent(ri, ci, row, ceil)
}
}
})
}),
0
)
}),
0
)
: _vm._e()
])
};
2020-01-05 22:18:00 +08:00
var __vue_staticRenderFns__$z = [];
__vue_render__$z._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2020-01-05 22:18:00 +08:00
const __vue_inject_styles__$z = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-1aad958a_0", { source: ".dv-scroll-board {\n position: relative;\n width: 100%;\n height: 100%;\n color: #fff;\n}\n.dv-scroll-board .text {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n display: flex;\n flex-direction: row;\n font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n display: flex;\n font-size: 14px;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n border-radius: 3px;\n padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n position: relative;\n width: 100%;\n height: 100%;\n color: #fff;\n}\n.dv-scroll-board .text {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n display: flex;\n flex-direction: row;\n font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n display: flex;\n font-size: 14px;\n transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n padding: 0 10px;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n border-radius: 3px;\n padding: 0px 3px;\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2020-01-05 22:18:00 +08:00
const __vue_scope_id__$z = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2020-01-05 22:18:00 +08:00
const __vue_module_identifier__$z = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2020-01-05 22:18:00 +08:00
const __vue_is_functional_template__$z = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$z = normalizeComponent(
2020-01-05 22:18:00 +08:00
{ render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
__vue_inject_styles__$z,
__vue_script__$z,
__vue_scope_id__$z,
__vue_is_functional_template__$z,
__vue_module_identifier__$z,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function scrollBoard (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$z.name, __vue_component__$z);
2019-09-03 11:07:45 +08:00
}
//
2020-01-05 22:18:00 +08:00
var script$A = {
2019-09-03 11:07:45 +08:00
name: 'DvScrollRankingBoard',
mixins: [autoResize],
props: {
config: {
type: Object,
default: () => ({})
}
},
data() {
return {
ref: 'scroll-ranking-board',
defaultConfig: {
/**
* @description Board data
* @type {Array<Object>}
* @default data = []
*/
data: [],
/**
* @description Row num
* @type {Number}
* @default rowNum = 5
*/
rowNum: 5,
/**
* @description Scroll wait time
* @type {Number}
* @default waitTime = 2000
*/
waitTime: 2000,
/**
* @description Carousel type
* @type {String}
* @default carousel = 'single'
* @example carousel = 'single' | 'page'
*/
2019-09-04 11:24:03 +08:00
carousel: 'single',
/**
* @description Value unit
* @type {String}
* @default unit = ''
* @example unit = 'ton'
*/
2019-12-25 14:23:39 +08:00
unit: '',
/**
* @description Auto sort by value
* @type {Boolean}
* @default sort = true
*/
sort: true
2019-09-03 11:07:45 +08:00
},
mergedConfig: null,
rowsData: [],
rows: [],
heights: [],
animationIndex: 0,
2019-11-12 12:46:39 +08:00
animationHandler: '',
updater: 0
2019-09-03 11:07:45 +08:00
};
},
watch: {
config() {
const {
stopAnimation,
calcData
} = this;
stopAnimation();
calcData();
}
},
methods: {
afterAutoResizeMixinInit() {
const {
calcData
} = this;
calcData();
},
onResize() {
const {
mergedConfig,
calcHeights
} = this;
if (!mergedConfig) return;
calcHeights(true);
},
calcData() {
const {
mergeConfig,
calcRowsData
} = this;
mergeConfig();
calcRowsData();
const {
calcHeights
} = this;
calcHeights();
const {
animation
} = this;
animation(true);
},
mergeConfig() {
let {
config,
defaultConfig
} = this;
this.mergedConfig = util_2$1(util_1(defaultConfig, true), config || {});
},
calcRowsData() {
let {
data,
2019-12-25 14:23:39 +08:00
rowNum,
sort
2019-09-03 11:07:45 +08:00
} = this.mergedConfig;
2019-12-25 14:23:39 +08:00
sort && data.sort(({
2019-09-03 11:07:45 +08:00
value: a
}, {
value: b
}) => {
if (a > b) return -1;
if (a < b) return 1;
if (a === b) return 0;
});
const value = data.map(({
value
}) => value);
const max = Math.max(...value) || 0;
data = data.map((row, i) => ({ ...row,
ranking: i + 1,
percent: row.value / max * 100
}));
const rowLength = data.length;
if (rowLength > rowNum && rowLength < 2 * rowNum) {
data = [...data, ...data];
}
data = data.map((d, i) => ({ ...d,
scroll: i
}));
this.rowsData = data;
this.rows = data;
},
calcHeights(onresize = false) {
const {
height,
mergedConfig
} = this;
const {
rowNum,
data
} = mergedConfig;
const avgHeight = height / rowNum;
this.avgHeight = avgHeight;
if (!onresize) this.heights = new Array(data.length).fill(avgHeight);
},
async animation(start = false) {
let {
avgHeight,
animationIndex,
mergedConfig,
rowsData,
2019-11-12 12:46:39 +08:00
animation,
updater
2019-09-03 11:07:45 +08:00
} = this;
const {
waitTime,
carousel,
rowNum
} = mergedConfig;
const rowLength = rowsData.length;
if (rowNum >= rowLength) return;
2019-11-12 12:46:39 +08:00
if (start) {
await new Promise(resolve => setTimeout(resolve, waitTime));
if (updater !== this.updater) return;
}
2019-09-03 11:07:45 +08:00
const animationNum = carousel === 'single' ? 1 : rowNum;
let rows = rowsData.slice(animationIndex);
rows.push(...rowsData.slice(0, animationIndex));
this.rows = rows;
this.heights = new Array(rowLength).fill(avgHeight);
await new Promise(resolve => setTimeout(resolve, 300));
2019-11-12 12:46:39 +08:00
if (updater !== this.updater) return;
2019-09-03 11:07:45 +08:00
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
animationIndex += animationNum;
const back = animationIndex - rowLength;
if (back >= 0) animationIndex = back;
this.animationIndex = animationIndex;
this.animationHandler = setTimeout(animation, waitTime - 300);
},
stopAnimation() {
const {
2019-11-12 12:46:39 +08:00
animationHandler,
updater
2019-09-03 11:07:45 +08:00
} = this;
2019-11-12 12:46:39 +08:00
this.updater = (updater + 1) % 999999;
2019-09-03 11:07:45 +08:00
if (!animationHandler) return;
clearTimeout(animationHandler);
}
},
destroyed() {
const {
stopAnimation
} = this;
stopAnimation();
}
};
/* script */
2020-01-05 22:18:00 +08:00
const __vue_script__$A = script$A;
2019-09-03 11:07:45 +08:00
/* template */
2020-01-05 22:18:00 +08:00
var __vue_render__$A = function() {
2019-09-03 11:07:45 +08:00
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{ ref: _vm.ref, staticClass: "dv-scroll-ranking-board" },
_vm._l(_vm.rows, function(item, i) {
return _c(
"div",
{
key: item.toString() + item.scroll,
staticClass: "row-item",
style: "height: " + _vm.heights[i] + "px;"
},
[
_c("div", { staticClass: "ranking-info" }, [
_c("div", { staticClass: "rank" }, [
_vm._v("No." + _vm._s(item.ranking))
]),
_vm._v(" "),
2019-12-25 14:23:39 +08:00
_c("div", {
staticClass: "info-name",
domProps: { innerHTML: _vm._s(item.name) }
}),
2019-09-03 11:07:45 +08:00
_vm._v(" "),
_c("div", { staticClass: "ranking-value" }, [
2019-09-04 11:24:03 +08:00
_vm._v(_vm._s(item.value + _vm.mergedConfig.unit))
2019-09-03 11:07:45 +08:00
])
]),
_vm._v(" "),
_c("div", { staticClass: "ranking-column" }, [
_c(
"div",
{
staticClass: "inside-column",
style: "width: " + item.percent + "%;"
},
[_c("div", { staticClass: "shine" })]
)
])
]
)
}),
0
)
};
2020-01-05 22:18:00 +08:00
var __vue_staticRenderFns__$A = [];
__vue_render__$A._withStripped = true;
2019-09-03 11:07:45 +08:00
/* style */
2020-01-05 22:18:00 +08:00
const __vue_inject_styles__$A = function (inject) {
2019-09-03 11:07:45 +08:00
if (!inject) return
2020-05-06 14:15:15 +08:00
inject("data-v-4fe9e817_0", { source: ".dv-scroll-ranking-board {\n width: 100%;\n height: 100%;\n color: #fff;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n transition: all 0.3s;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n display: flex;\n width: 100%;\n font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n width: 40px;\n color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n position: relative;\n height: 6px;\n background-color: #1370fb;\n margin-bottom: 2px;\n border-radius: 1px;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n position: absolute;\n left: 0%;\n top: 2px;\n height: 2px;\n width: 50px;\n transform: translateX(-100%);\n background: radial-gradient(#28f8ff 5%, transparent 80%);\n animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n left: 0%;\n transform: translateX(-100%);\n}\n100% {\n left: 100%;\n transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n width: 100%;\n height: 100%;\n color: #fff;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n transition: all 0.3s;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n display: flex;\n width: 100%;\n font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n width: 40px;\n color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n position: relative;\n height: 6px;\n background-color: #1370fb;\n margin-bottom: 2px;\n border-radius: 1px;\n overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n position: absolute;\n left: 0%;\n top: 2px;\n height: 2px;\n width: 50px;\n transform: translateX(-100%);\n background: radial-gradient(#28f8ff 5%, transparent 80%);\n animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n 80% {\n left: 0%;\n transform: translateX(-100%);\n }\n 100% {\n left: 100%;\n transform: translateX(0%);\n }\n}\n"]}, media: undefined });
2019-09-03 11:07:45 +08:00
};
/* scoped */
2020-01-05 22:18:00 +08:00
const __vue_scope_id__$A = undefined;
2019-09-03 11:07:45 +08:00
/* module identifier */
2020-01-05 22:18:00 +08:00
const __vue_module_identifier__$A = undefined;
2019-09-03 11:07:45 +08:00
/* functional template */
2020-01-05 22:18:00 +08:00
const __vue_is_functional_template__$A = false;
2019-09-03 11:07:45 +08:00
/* style inject SSR */
2020-04-28 18:41:09 +08:00
/* style inject shadow dom */
2019-09-03 11:07:45 +08:00
2020-04-28 18:41:09 +08:00
const __vue_component__$A = normalizeComponent(
2020-01-05 22:18:00 +08:00
{ render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
__vue_inject_styles__$A,
__vue_script__$A,
__vue_scope_id__$A,
__vue_is_functional_template__$A,
__vue_module_identifier__$A,
2020-04-28 18:41:09 +08:00
false,
createInjector,
undefined,
2019-09-03 11:07:45 +08:00
undefined
);
function scrollRankingBoard (Vue) {
2020-04-28 18:41:09 +08:00
Vue.component(__vue_component__$A.name, __vue_component__$A);
2019-09-03 11:07:45 +08:00
}
/**
* IMPORT COMPONENTS
*/
/**
* USE COMPONENTS
*/
function datav (Vue) {
Vue.use(fullScreenContainer);
Vue.use(loading); // border box
Vue.use(borderBox1);
Vue.use(borderBox2);
Vue.use(borderBox3);
Vue.use(borderBox4);
Vue.use(borderBox5);
Vue.use(borderBox6);
Vue.use(borderBox7);
Vue.use(borderBox8);
Vue.use(borderBox9);
2019-12-06 21:07:16 +08:00
Vue.use(borderBox10);
Vue.use(borderBox11);
Vue.use(borderBox12);
Vue.use(borderBox13); // decoration
2019-09-03 11:07:45 +08:00
Vue.use(decoration1);
Vue.use(decoration2);
Vue.use(decoration3);
Vue.use(decoration4);
Vue.use(decoration5);
Vue.use(decoration6);
Vue.use(decoration7);
Vue.use(decoration8);
Vue.use(decoration9);
2019-12-06 21:07:16 +08:00
Vue.use(decoration10);
Vue.use(decoration11); // charts
2019-09-03 11:07:45 +08:00
Vue.use(charts);
Vue.use(activeRingChart);
Vue.use(capsuleChart);
Vue.use(waterLevelPond);
Vue.use(percentPond);
Vue.use(flylineChart);
2020-01-05 22:18:00 +08:00
Vue.use(flylineChartEnhanced);
2019-09-03 11:07:45 +08:00
Vue.use(conicalColumnChart);
Vue.use(digitalFlop);
Vue.use(scrollBoard);
Vue.use(scrollRankingBoard);
}
Vue.use(datav);
2019-10-24 10:28:43 +08:00
})));