// o---------------------------------------------------------------------------------o // | This file is part of the RGraph package - you can learn more at: | // | | // | https://www.rgraph.net/license.html | // | | // | RGraph is dual-licensed under the Open Source GPL license. That means that it's | // | free to use and there are no restrictions on what you can use RGraph for! | // | If the GPL license does not suit you however, then there's an inexpensive | // | commercial license option available. See the URL above for more details. | // o---------------------------------------------------------------------------------o RGraph = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true}; RGraph.SVG = RGraph.SVG || {}; // Module pattern (function (win, doc, undefined) { RGraph.SVG.Activity = function (conf) { // // A setter that the constructor uses (at the end) // to set all of the properties // // @param string name The name of the property to set // @param string value The value to set the property to // this.set = function (name, value) { if (arguments.length === 1 && typeof name === 'object') { for (i in arguments[0]) { if (typeof i === 'string') { name = ret.name; value = ret.value; this.set(name, value); } } } else { // Go through all of the properties and make sure // that they're using the correct capitalisation name = this.properties_lowercase_map[name.toLowerCase()] || name; var ret = RGraph.SVG.commonSetter({ object: this, name: name, value: value }); name = ret.name; value = ret.value; this.properties[name] = value; } return this; }; // // A getter. // // @param name string The name of the property to get // this.get = function (name) { // Go through all of the properties and make sure // that they're using the correct capitalisation name = this.properties_lowercase_map[name.toLowerCase()] || name; return this.properties[name]; }; this.type = 'activity'; this.min = RGraph.SVG.stringsToNumbers(conf.min); this.max = RGraph.SVG.stringsToNumbers(conf.max); this.value = RGraph.SVG.stringsToNumbers(conf.value); this.currentValue = null; // Used by animations this.id = conf.id; this.uid = RGraph.SVG.createUID(); this.container = document.getElementById(this.id); this.layers = {}; // MUST be before the SVG tag is created! this.svg = RGraph.SVG.createSVG({object: this,container: this.container}); this.svgAllGroup = RGraph.SVG.createAllGroup(this); this.clipid = null; // Used to clip the canvas this.isRGraph = true; this.isrgraph = true; this.rgraph = true; this.width = Number(this.svg.getAttribute('width')); this.height = Number(this.svg.getAttribute('height')); this.colorsParsed = false; this.originalColors = {}; this.gradientCounter = 1; this.adjusting_index = null; this.nodes = {}; this.firstDraw = true; // After the first draw this will be false // Add this object to the ObjectRegistry RGraph.SVG.OR.add(this); // Set the DIV container to be inline-block this.container.style.display = 'inline-block'; this.properties = { radius: null, centerx: null, centery: null, width: null, ends: 'round', marginLeft: 15, marginRight: 15, marginTop: 15, marginBottom: 15, marginInner: 1, backgroundColor: 'black', backgroundGrid: false, backgroundGridColor: '#ddd', backgroundGridRadials: true, backgroundGridRadialsCount: 8, backgroundRings: true, backgroundRingsColors: null, backgroundRingsAlpha: 0.5, colors: ['#F45B5B','#90EE7E','#2B908F','red','green','blue','yellow','pink'], icons: null, iconsWidth: null, iconsHeight: null, iconsOffsetx: 0, iconsOffsety: 0, textFont: 'Arial, Verdana, sans-serif', textSize: 12, textColor: '#aaa', textBold: false, textItalic: false, text: null, labelsCenter: false, labelsCenterIndex: 0, labelsCenterFont: null, labelsCenterSize: 40, labelsCenterColor: null, labelsCenterBold: null, labelsCenterItalic: null, labelsCenterUnitsPre: '', labelsCenterUnitsPost: '', labelsCenterDecimals: 0, labelsCenterPoint: '.', labelsCenterThousand: ',', labelsCenterSpecific: null, labelsCenterHalign: 'center', labelsCenterValign: 'center', labelsCenterOffsetx: 0, labelsCenterOffsety: 0, labels: [], labelsColor: null, labelsFont: null, labelsSize: null, labelsBold: null, labelsItalic: null, labelsBackgroundFill: 'transparent', labelsBackgroundStroke: 'transparent', labelsHalign: 'right', labelsValign: 'center', labelsOffsetx: 0, labelsOffsety: 0, labelsFormattedDecimals: 0, labelsFormattedPoint: '.', labelsFormattedThousand: ',', labelsFormattedUnitsPre: '', labelsFormattedUnitsPost: '', adjustable: false, tooltips: null, tooltipsOverride: null, tooltipsEffect: 'fade', tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsEvent: 'click', tooltipsFormattedThousand: ',', tooltipsFormattedPoint: '.', tooltipsFormattedDecimals: 0, tooltipsFormattedUnitsPre: '', tooltipsFormattedUnitsPost: '', tooltipsFormattedKeyColors: null, tooltipsFormattedKeyColorsShape: 'square', tooltipsFormattedKeyLabels: [], tooltipsFormattedTableHeaders: null, tooltipsFormattedTableData: null, tooltipsPointer: true, tooltipsPositionStatic: true, highlightStroke: 'rgba(0,0,0,0)', highlightFill: 'rgba(255,255,255,0.7)', highlightLinewidth: 1, clip: null }; // // Add the reverse look-up table for property names // so that property names can be specified in any case. // this.properties_lowercase_map = []; for (var i in this.properties) { if (typeof i === 'string') { this.properties_lowercase_map[i.toLowerCase()] = i; } } // // Copy the global object properties to this instance // RGraph.SVG.getGlobals(this); // // "Decorate" the object with the generic effects if the effects library has been included // if (RGraph.SVG.FX && typeof RGraph.SVG.FX.decorate === 'function') { RGraph.SVG.FX.decorate(this); } // Add the responsive function to the object this.responsive = RGraph.SVG.responsive; var properties = this.properties; // // The draw method draws the Bar chart // this.draw = function () { // Fire the beforedraw event RGraph.SVG.fireCustomEvent(this, 'onbeforedraw'); // // Convert the value to an array if its a number // if (typeof this.value === 'number') { this.value = [this.value]; } // Bounds checking for (var i=0; i this.max) this.value[i] = this.max; if (this.value[i] < this.min) this.value[i] = this.min; } // Reset this to prevent it from growing this.nodes = {}; // Should the first thing that's done in the.draw() function // except for the onbeforedraw event and the // installation of clipping. this.width = Number(this.svg.getAttribute('width')); this.height = Number(this.svg.getAttribute('height')); // Create the defs tag if necessary this.defs = RGraph.SVG.createDefs(this); // Add these this.graphWidth = this.width - properties.marginLeft - properties.marginRight; this.graphHeight = this.height - properties.marginTop - properties.marginBottom; // Work out the center point this.centerx = (this.graphWidth / 2) + properties.marginLeft; this.centery = (this.graphHeight / 2) + properties.marginTop; this.radius = Math.min(this.graphWidth / 2, this.graphHeight / 2); // Allow the user to override the calculated centerx/y/radius this.centerx = typeof properties.centerx === 'number' ? properties.centerx : this.centerx; this.centery = typeof properties.centery === 'number' ? properties.centery : this.centery; this.radius = typeof properties.radius === 'number' ? properties.radius : this.radius; // // Allow the centerx/centery/radius to be a plus/minus // if (typeof properties.radius === 'string' && properties.radius.match(/^\+|-\d+$/) ) this.radius += parseFloat(properties.radius); if (typeof properties.centerx === 'string' && properties.centerx.match(/^\+|-\d+$/) ) this.centerx += parseFloat(properties.centerx); if (typeof properties.centery === 'string' && properties.centery.match(/^\+|-\d+$/) ) this.centery += parseFloat(properties.centery); // Parse the colors for gradients RGraph.SVG.resetColorsToOriginalValues({object:this}); this.parseColors(); // Calculate the width if (!properties.width) { properties.width = (this.radius * 0.75) / this.value.length; properties.width -= (2 * properties.marginInner); } // Install clipping if requested if (this.properties.clip && !this.clipid) { this.clipid = RGraph.SVG.installClipping(this); // Add the clip ID to the all group this.svgAllGroup.setAttribute( 'clip-path', 'url(#{1})'.format(this.clipid) ); } else { // No clipping - so ensure that there's no clip-path // attribute this.clipid = null; this.svgAllGroup.removeAttribute('clip-path'); } // Draw the background this.drawBackground(); // Draw the meter this.drawMeter(); // Draw the labels this.drawLabels(); // Draw the icons this.drawIcons(); // // Ajusting // if (properties.adjustable && !this.adjusting_event_listeners_installed) { this.adjusting_mousedown = false; var obj = this; var func = function (e) { var div = e.currentTarget, mouseX = e.offsetX, mouseY = e.offsetY; if (RGraph.SVG.ISFF) { mouseX = e.pageX - e.currentTarget.offsetLeft; mouseY = e.pageY - e.currentTarget.offsetTop; } // Get the radius of the click var radius = obj.getRadius(e); if (radius > obj.radius) { return; } if (typeof obj.adjusting_index !== 'number') { var index = obj.getIndexByRadius({radius: radius}); obj.adjusting_index = index; } else { var index = obj.adjusting_index; } var value = obj.getValue(e); obj.value[index] = value; obj.currentValue = RGraph.SVG.arrayClone(value); //RGraph.SVG.clear(obj.svg); //obj.draw(); RGraph.SVG.redraw(obj.svg); }; this.container.addEventListener('mousedown', function (e) { obj.adjusting_mousedown = true; func(e); // Fire the beforedraw event RGraph.SVG.fireCustomEvent(obj, 'onadjustbegin'); }, false); this.container.addEventListener('mousemove', function (e) { if (obj.adjusting_mousedown) { func(e); // Fire the beforedraw event RGraph.SVG.fireCustomEvent(obj, 'onadjust'); } }, false); window.addEventListener('mouseup', function (e) { obj.adjusting_mousedown = false; obj.adjusting_index = null; // Fire the beforedraw event RGraph.SVG.fireCustomEvent(obj, 'onadjustend'); }, false); this.adjusting_event_listeners_installed = true; } // Add the event listener that clears the highlight var obj = this; document.body.addEventListener('mouseup', function (e) { obj.removeHighlight(); }, false); // // Allow the addition of custom text via the // text: property. // RGraph.SVG.addCustomText(this); // // Fire the onfirstdraw event // if (this.firstDraw) { this.firstDraw = false; RGraph.SVG.fireCustomEvent(this, 'onfirstdraw'); } // Fire the draw event RGraph.SVG.fireCustomEvent(this, 'ondraw'); // // Install any inline responsive configuration. This // should be last in the draw function - even after // the draw events. // RGraph.SVG.installInlineResponsive(this); return this; }; // // New create() shortcut function //eg: // this.create('rect,x:0,y:0,width:100,height:100'[,parent]); // // @param mixed definition This can either be an object // which holds details of the object // that you want to make or a string // that holds the same information. // @param mixed This can be either a string that // holds style information to be // applied to the new node or it // can be the parent node that the // new node is to be added to. // @param string If used, this can be a string // that holds the style information // that is to be applied to the new // node. // this.create = function (str) { var def = RGraph.SVG.create.parseStr(this, str); def.svg = this.svg; // By default the parent is the SVG tag - but if // requested then change it to the tag that has // been given if (arguments[1]) { def.parent = arguments[1]; } return RGraph.SVG.create(def); }; // // Go through the bars looking for the correct one for the given radius // this.getIndexByRadius = function (opt) { var radius = opt.radius; for (var i=0; i= radiusInner && radius <= radiusOuter) { return i; } } return null; }; // // Draw the background"grid" // this.drawBackground = function () { // First thing to do is clear the canvas to the backgroundColor if ( properties.backgroundColor) { RGraph.SVG.create({ svg: this.svg, type: 'rect', parent: this.svgAllGroup, attr: { fill: properties.backgroundColor, x: 0, y: 0, width: this.width, height: this.height } }); } // // Draw the grid? // if (properties.backgroundGrid) { // Determine how many background circles // should be shown on the data points var count = this.value.length + 1; for (var i=0; i