feat:Added piechart in Dashboard
This commit is contained in:
+235
@@ -0,0 +1,235 @@
|
||||
/*! svg.draggable.js - v2.2.2 - 2019-01-08
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
* Copyright (c) 2019 Wout Fierens; Licensed MIT */
|
||||
;(function() {
|
||||
|
||||
// creates handler, saves it
|
||||
function DragHandler(el){
|
||||
el.remember('_draggable', this)
|
||||
this.el = el
|
||||
}
|
||||
|
||||
|
||||
// Sets new parameter, starts dragging
|
||||
DragHandler.prototype.init = function(constraint, val){
|
||||
var _this = this
|
||||
this.constraint = constraint
|
||||
this.value = val
|
||||
this.el.on('mousedown.drag', function(e){ _this.start(e) })
|
||||
this.el.on('touchstart.drag', function(e){ _this.start(e) })
|
||||
}
|
||||
|
||||
// transforms one point from screen to user coords
|
||||
DragHandler.prototype.transformPoint = function(event, offset){
|
||||
event = event || window.event
|
||||
var touches = event.changedTouches && event.changedTouches[0] || event
|
||||
this.p.x = touches.clientX - (offset || 0)
|
||||
this.p.y = touches.clientY
|
||||
return this.p.matrixTransform(this.m)
|
||||
}
|
||||
|
||||
// gets elements bounding box with special handling of groups, nested and use
|
||||
DragHandler.prototype.getBBox = function(){
|
||||
|
||||
var box = this.el.bbox()
|
||||
|
||||
if(this.el instanceof SVG.Nested) box = this.el.rbox()
|
||||
|
||||
if (this.el instanceof SVG.G || this.el instanceof SVG.Use || this.el instanceof SVG.Nested) {
|
||||
box.x = this.el.x()
|
||||
box.y = this.el.y()
|
||||
}
|
||||
|
||||
return box
|
||||
}
|
||||
|
||||
// start dragging
|
||||
DragHandler.prototype.start = function(e){
|
||||
|
||||
// check for left button
|
||||
if(e.type == 'click'|| e.type == 'mousedown' || e.type == 'mousemove'){
|
||||
if((e.which || e.buttons) != 1){
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
var _this = this
|
||||
|
||||
// fire beforedrag event
|
||||
this.el.fire('beforedrag', { event: e, handler: this })
|
||||
if(this.el.event().defaultPrevented) return;
|
||||
|
||||
// prevent browser drag behavior as soon as possible
|
||||
e.preventDefault();
|
||||
|
||||
// prevent propagation to a parent that might also have dragging enabled
|
||||
e.stopPropagation();
|
||||
|
||||
// search for parent on the fly to make sure we can call
|
||||
// draggable() even when element is not in the dom currently
|
||||
this.parent = this.parent || this.el.parent(SVG.Nested) || this.el.parent(SVG.Doc)
|
||||
this.p = this.parent.node.createSVGPoint()
|
||||
|
||||
// save current transformation matrix
|
||||
this.m = this.el.node.getScreenCTM().inverse()
|
||||
|
||||
var box = this.getBBox()
|
||||
|
||||
var anchorOffset;
|
||||
|
||||
// fix text-anchor in text-element (#37)
|
||||
if(this.el instanceof SVG.Text){
|
||||
anchorOffset = this.el.node.getComputedTextLength();
|
||||
|
||||
switch(this.el.attr('text-anchor')){
|
||||
case 'middle':
|
||||
anchorOffset /= 2;
|
||||
break
|
||||
case 'start':
|
||||
anchorOffset = 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.startPoints = {
|
||||
// We take absolute coordinates since we are just using a delta here
|
||||
point: this.transformPoint(e, anchorOffset),
|
||||
box: box,
|
||||
transform: this.el.transform()
|
||||
}
|
||||
|
||||
// add drag and end events to window
|
||||
SVG.on(window, 'mousemove.drag', function(e){ _this.drag(e) })
|
||||
SVG.on(window, 'touchmove.drag', function(e){ _this.drag(e) })
|
||||
SVG.on(window, 'mouseup.drag', function(e){ _this.end(e) })
|
||||
SVG.on(window, 'touchend.drag', function(e){ _this.end(e) })
|
||||
|
||||
// fire dragstart event
|
||||
this.el.fire('dragstart', {event: e, p: this.startPoints.point, m: this.m, handler: this})
|
||||
}
|
||||
|
||||
// while dragging
|
||||
DragHandler.prototype.drag = function(e){
|
||||
|
||||
var box = this.getBBox()
|
||||
, p = this.transformPoint(e)
|
||||
, x = this.startPoints.box.x + p.x - this.startPoints.point.x
|
||||
, y = this.startPoints.box.y + p.y - this.startPoints.point.y
|
||||
, c = this.constraint
|
||||
, gx = p.x - this.startPoints.point.x
|
||||
, gy = p.y - this.startPoints.point.y
|
||||
|
||||
this.el.fire('dragmove', {
|
||||
event: e
|
||||
, p: p
|
||||
, m: this.m
|
||||
, handler: this
|
||||
})
|
||||
|
||||
if(this.el.event().defaultPrevented) return p
|
||||
|
||||
// move the element to its new position, if possible by constraint
|
||||
if (typeof c == 'function') {
|
||||
|
||||
var coord = c.call(this.el, x, y, this.m)
|
||||
|
||||
// bool, just show us if movement is allowed or not
|
||||
if (typeof coord == 'boolean') {
|
||||
coord = {
|
||||
x: coord,
|
||||
y: coord
|
||||
}
|
||||
}
|
||||
|
||||
// if true, we just move. If !false its a number and we move it there
|
||||
if (coord.x === true) {
|
||||
this.el.x(x)
|
||||
} else if (coord.x !== false) {
|
||||
this.el.x(coord.x)
|
||||
}
|
||||
|
||||
if (coord.y === true) {
|
||||
this.el.y(y)
|
||||
} else if (coord.y !== false) {
|
||||
this.el.y(coord.y)
|
||||
}
|
||||
|
||||
} else if (typeof c == 'object') {
|
||||
|
||||
// keep element within constrained box
|
||||
if (c.minX != null && x < c.minX) {
|
||||
x = c.minX
|
||||
gx = x - this.startPoints.box.x
|
||||
} else if (c.maxX != null && x > c.maxX - box.width) {
|
||||
x = c.maxX - box.width
|
||||
gx = x - this.startPoints.box.x
|
||||
} if (c.minY != null && y < c.minY) {
|
||||
y = c.minY
|
||||
gy = y - this.startPoints.box.y
|
||||
} else if (c.maxY != null && y > c.maxY - box.height) {
|
||||
y = c.maxY - box.height
|
||||
gy = y - this.startPoints.box.y
|
||||
}
|
||||
|
||||
if (c.snapToGrid != null) {
|
||||
x = x - (x % c.snapToGrid)
|
||||
y = y - (y % c.snapToGrid)
|
||||
gx = gx - (gx % c.snapToGrid)
|
||||
gy = gy - (gy % c.snapToGrid)
|
||||
}
|
||||
|
||||
if(this.el instanceof SVG.G)
|
||||
this.el.matrix(this.startPoints.transform).transform({x:gx, y: gy}, true)
|
||||
else
|
||||
this.el.move(x, y)
|
||||
}
|
||||
|
||||
// so we can use it in the end-method, too
|
||||
return p
|
||||
}
|
||||
|
||||
DragHandler.prototype.end = function(e){
|
||||
|
||||
// final drag
|
||||
var p = this.drag(e);
|
||||
|
||||
// fire dragend event
|
||||
this.el.fire('dragend', { event: e, p: p, m: this.m, handler: this })
|
||||
|
||||
// unbind events
|
||||
SVG.off(window, 'mousemove.drag')
|
||||
SVG.off(window, 'touchmove.drag')
|
||||
SVG.off(window, 'mouseup.drag')
|
||||
SVG.off(window, 'touchend.drag')
|
||||
|
||||
}
|
||||
|
||||
SVG.extend(SVG.Element, {
|
||||
// Make element draggable
|
||||
// Constraint might be an object (as described in readme.md) or a function in the form "function (x, y)" that gets called before every move.
|
||||
// The function can return a boolean or an object of the form {x, y}, to which the element will be moved. "False" skips moving, true moves to raw x, y.
|
||||
draggable: function(value, constraint) {
|
||||
|
||||
// Check the parameters and reassign if needed
|
||||
if (typeof value == 'function' || typeof value == 'object') {
|
||||
constraint = value
|
||||
value = true
|
||||
}
|
||||
|
||||
var dragHandler = this.remember('_draggable') || new DragHandler(this)
|
||||
|
||||
// When no parameter is given, value is true
|
||||
value = typeof value === 'undefined' ? true : value
|
||||
|
||||
if(value) dragHandler.init(constraint || {}, value)
|
||||
else {
|
||||
this.off('mousedown.drag')
|
||||
this.off('touchstart.drag')
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}).call(this);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
/*! svg.draggable.js - v2.2.2 - 2019-01-08
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
* Copyright (c) 2019 Wout Fierens; Licensed MIT */
|
||||
(function(){function a(a){a.remember("_draggable",this),this.el=a}a.prototype.init=function(a,b){var c=this;this.constraint=a,this.value=b,this.el.on("mousedown.drag",function(a){c.start(a)}),this.el.on("touchstart.drag",function(a){c.start(a)})},a.prototype.transformPoint=function(a,b){a=a||window.event;var c=a.changedTouches&&a.changedTouches[0]||a;return this.p.x=c.clientX-(b||0),this.p.y=c.clientY,this.p.matrixTransform(this.m)},a.prototype.getBBox=function(){var a=this.el.bbox();return this.el instanceof SVG.Nested&&(a=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(a.x=this.el.x(),a.y=this.el.y()),a},a.prototype.start=function(a){if("click"!=a.type&&"mousedown"!=a.type&&"mousemove"!=a.type||1==(a.which||a.buttons)){var b=this;if(this.el.fire("beforedrag",{event:a,handler:this}),!this.el.event().defaultPrevented){a.preventDefault(),a.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var c,d=this.getBBox();if(this.el instanceof SVG.Text)switch(c=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":c/=2;break;case"start":c=0}this.startPoints={point:this.transformPoint(a,c),box:d,transform:this.el.transform()},SVG.on(window,"mousemove.drag",function(a){b.drag(a)}),SVG.on(window,"touchmove.drag",function(a){b.drag(a)}),SVG.on(window,"mouseup.drag",function(a){b.end(a)}),SVG.on(window,"touchend.drag",function(a){b.end(a)}),this.el.fire("dragstart",{event:a,p:this.startPoints.point,m:this.m,handler:this})}}},a.prototype.drag=function(a){var b=this.getBBox(),c=this.transformPoint(a),d=this.startPoints.box.x+c.x-this.startPoints.point.x,e=this.startPoints.box.y+c.y-this.startPoints.point.y,f=this.constraint,g=c.x-this.startPoints.point.x,h=c.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:a,p:c,m:this.m,handler:this}),this.el.event().defaultPrevented)return c;if("function"==typeof f){var i=f.call(this.el,d,e,this.m);"boolean"==typeof i&&(i={x:i,y:i}),i.x===!0?this.el.x(d):i.x!==!1&&this.el.x(i.x),i.y===!0?this.el.y(e):i.y!==!1&&this.el.y(i.y)}else"object"==typeof f&&(null!=f.minX&&d<f.minX?(d=f.minX,g=d-this.startPoints.box.x):null!=f.maxX&&d>f.maxX-b.width&&(d=f.maxX-b.width,g=d-this.startPoints.box.x),null!=f.minY&&e<f.minY?(e=f.minY,h=e-this.startPoints.box.y):null!=f.maxY&&e>f.maxY-b.height&&(e=f.maxY-b.height,h=e-this.startPoints.box.y),null!=f.snapToGrid&&(d-=d%f.snapToGrid,e-=e%f.snapToGrid,g-=g%f.snapToGrid,h-=h%f.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:g,y:h},!0):this.el.move(d,e));return c},a.prototype.end=function(a){var b=this.drag(a);this.el.fire("dragend",{event:a,p:b,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(b,c){("function"==typeof b||"object"==typeof b)&&(c=b,b=!0);var d=this.remember("_draggable")||new a(this);return b="undefined"==typeof b?!0:b,b?d.init(c||{},b):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}).call(this);
|
||||
Reference in New Issue
Block a user