// o---------------------------------------------------------------------------o // | This file is part of the RGraph package - you can learn more at: | // | | // | https://www.rgraph.net | // | | // | RGraph is dual-licensed under the Open Source GPL license. This means | // | that it's free to use for any purpose. The GPL license does have | // | consequences on the license of the software that you include it in, | // | however. If this is not desirable, then there's an inexpensive commercial | // | license option available. See the RGraph website for more details. | // o---------------------------------------------------------------------------o RGraph = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true}; // // The odometer constructor. Pass it the ID of the canvas tag, the start value of the odo, // the end value, and the value that the pointer should point to. // RGraph.Odometer = function (conf) { var id = conf.id, canvas = document.getElementById(id), min = conf.min, max = conf.max, value = conf.value; this.id = id; this.canvas = canvas; this.context = this.canvas.getContext ? this.canvas.getContext("2d", {alpha: (typeof id === 'object' && id.alpha === false) ? false : true}) : null; this.canvas.__object__ = this; this.type = 'odo'; this.isRGraph = true; this.isrgraph = true; this.rgraph = true; this.min = RGraph.stringsToNumbers(min); this.max = RGraph.stringsToNumbers(max); this.value = RGraph.stringsToNumbers(value); this.currentValue = null; this.uid = RGraph.createUID(); this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID(); this.colorsParsed = false; this.coordsText = []; this.original_colors = []; this.firstDraw = true; // After the first draw this will be false this.stopAnimationRequested = false;// Used to control the animations this.properties = { backgroundBorder: 'black', backgroundColor: 'white', backgroundLinesColor: '#ddd', centerx: null, centery: null, radius: null, labels: null, labelsMargin: 35, labelsFont: null, labelsSize: null, labelsColor: null, labelsBold: null, labelsItalic: null, labelsValue: false, labelsValueDecimals: 0, labelsValuePoint: '.', labelsValueThousand: ',', labelsValueUnitsPre: '', labelsValueUnitsPost: '', labelsValueFont: null, labelsValueSize: null, labelsValueColor: null, labelsValueBold: null, labelsValueItalic: null, labelsValueOffsetx: 0, labelsValueOffsety: 0, needleExtra: [], needleColor: 'black', needleLength: null, needleWidth: 2, needleHead: true, needleTail: false, needleType: 'pointer', needleTriangleBorder: '#aaa', textSize: 12, textColor: 'black', textFont: 'Arial, Verdana, sans-serif', textBold: false, textItalic: false, textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, colorsGreenMax: max * 0.75, colorsGreenColor: '#00cc0088', colorsYellowColor: '#ffff0088', colorsRedMin: max * 0.9, colorsRedColor: '#ff000088', marginLeft: 35, marginRight: 35, marginTop: 35, marginBottom: 35, title: '', titleFont: null, titleBold: true, titleItalic: null, titleSize: null, titleColor: null, titleX: null, titleY: null, titleHalign: null, titleValign: null, titleOffsetx: 0, titleOffsety: 0, titleSubtitle: '', titleSubtitleSize: null, titleSubtitleColor: '#aaa', titleSubtitleFont: null, titleSubtitleBold: null, titleSubtitleItalic: null, titleSubtitleOffsetx: 0, titleSubtitleOffsety: 0, contextmenu: null, linewidth: 1, shadowInner: false, shadowInnerColor: 'black', shadowInnerOffsetx: 3, shadowInnerOffsety: 3, shadowInnerBlur: 6, shadowOuter: false, shadowOuterColor: 'black', shadowOuterOffsetx: 3, shadowOuterOffsety: 3, shadowOuterBlur: 6, annotatable: false, annotatableColor: 'black', annotatableLinewidth: 1, scaleDecimals: 0, scalePoint: '.', scaleThousand: ',', scaleUnitsPre: '', scaleUnitsPost: '', scaleZerostart: false, border: false, borderColor1: '#BEBCB0', borderColor2: '#F0EFEA', borderColor3: '#BEBCB0', tickmarks: false, tickmarksHighlighted: true, tickmarksLargeColor: '#999', key: null, keyBackground: 'white', keyPosition: 'graph', keyShadow: false, keyShadowColor: '#666', keyShadowBlur: 3, keyShadowOffsetx: 2, keyShadowOffsety: 2, keyPositionMarginBoxed: false, keyPositionMarginHSpace: 0, keyPositionX: null, keyPositionY: null, keyHalign: 'right', keyColorShape: 'square', keyRounded: true, keyColors: null, keyLabelsSize: null, keyLabelsFont: null, keyLabelsColor: null, keyLabelsBold: null, keyLabelsItalic: null, keyLabelsOffsetx: 0, keyLabelsOffsety: 0, keyFormattedDecimals: 0, keyFormattedPoint: '.', keyFormattedThousand: ',', keyFormattedUnitsPre: '', keyFormattedUnitsPost: '', keyFormattedValueSpecific: null, keyFormattedItemsCount: null, adjustable: false, clearto: 'transparent', events: {}, clip: null, responsive: null, scale: true, scaleFactor: 2, antialiasTranslate: false, style: [] }; this.properties_scale = [ 'centerx', 'centery', 'radius', 'labelsMargin', 'labelsSize', 'labelsValueSize', 'labelsValueOffsetx', 'labelsValueOffsety', 'needleWidth', 'needleLength', 'textSize', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'titleSize', 'titleX', 'titleY', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'linewidth', 'shadowInnerOffsetx', 'shadowInnerOffsety', 'shadowInnerBlur', 'shadowOuterOffsetx', 'shadowOuterOffsety', 'shadowOuterBlur', 'keyShadowBlur', 'keyShadowOffsetx', 'keyShadowOffsety', 'keyPositionMarginHSpace', 'keyPositionX', 'keyPositionY', 'keyLabelsSize', 'keyLabelsOffsetx', 'keyLabelsOffsety', 'annotatableLinewidth' ]; // // 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; } } // Easy access to properties and the path function var properties = this.properties; this.path = RGraph.pathObjectFunction; // // "Decorate" the object with the generic effects if the effects library has been included // if (RGraph.Effects && typeof RGraph.Effects.decorate === 'function') { RGraph.Effects.decorate(this); } // Add the responsive method. This method resides in the common file. this.responsive = RGraph.responsive; // // A peudo setter // this.set = function (name) { var value = typeof arguments[1] === 'undefined' ? null : arguments[1]; // Go through all of the properties and make sure // that they're using the correct capitalisation if (typeof name === 'string') { name = this.properties_lowercase_map[name.toLowerCase()] || name; } // Set the colorsParsed flag to false if the colors // property is being set if ( name === 'colorsRedColor' || name === 'colorsYellowColor' || name === 'colorsGreenColor' ) { this.colorsParsed = false; } // the number of arguments is only one and it's an // object - parse it for configuration data and return. if (arguments.length === 1 && typeof arguments[0] === 'object') { for (i in arguments[0]) { if (typeof i === 'string') { this.set(i, arguments[0][i]); } } return 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 properties[name]; }; // // Draws the odometer // this.draw = function () { // MUST be the first thing that's done - but only // once!! RGraph.runOnce(`scale-up-the-canvas-once-in-the-draw-function-${this.id}-${this.uid}`, () => { // Note that we're in an arrow function so the // 'this' variable is OK to be used and refers // to the RGraph Line chart object. RGraph.scale(this); }); var scaleFactor = RGraph.getScaleFactor(this); // // Fire the onbeforedraw event // RGraph.fireCustomEvent(this, 'onbeforedraw'); // // Add any CSS that has been specified to the document. // This is general CSS and does not necessarily have to // pertain to the canvas tag. It only gets added once // to the document no matter how many times this draw // function is called. // // Add the CSS to a