// 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}; RGraph.Effects = RGraph.Effects || {}; RGraph.Effects.Rose = RGraph.Effects.Rose || {}; // // The rose chart constuctor // RGraph.Rose = function (conf) { this.id = conf.id; this.canvas = document.getElementById(this.id); this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null; this.data = conf.data; this.unmodified_data = RGraph.arrayClone(this.data); this.canvas.__object__ = this; this.type = 'rose'; this.isRGraph = true; this.isrgraph = true; this.rgraph = true; 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.centerx = 0; this.centery = 0; this.radius = 0; this.max = 0; this.angles = []; this.angles2 = []; this.properties = { axes: false, axesColor: 'black', axesLinewidth: 1, axesTickmarks: true, backgroundGrid: true, backgroundGridColor: '#ccc', backgroundGridSize: null, backgroundGridRadialsCount: 0, backgroundGridRadialsOffset: 0, backgroundGridCirclesCount: 5, // [TODO] Need linewidth setting centerx: null, centery: null, radius: null, anglesStart: 0, anglesOffset: 0, linewidth: 1, colors: RGraph.getColors(), colorsSequential: false, colorsAlpha: null, colorsStroke: 'transparent', margin: 5, marginLeft: 35, marginRight: 35, marginTop: 35, marginBottom: 35, shadow: false, shadowColor: '#aaa', shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 15, title: '', titleBold: true, titleFont: null, titleSize: null, titleItalic: 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, labels: null, labelsFormattedDecimals: 0, labelsFormattedPoint: '.', labelsFormattedThousand: ',', labelsFormattedUnitsPre: '', labelsFormattedUnitsPost: '', labelsColor: null, labelsFont: null, labelsSize: null, labelsBold: null, labelsItalic: null, labelsPosition: 'center', labelsBoxed: false, labelsOffsetRadius: 0, labelsOffsetAngle: 0, labelsAxes: 'n', labelsAxesFont: null, labelsAxesSize: null, labelsAxesColor: null, labelsAxesBold: null, labelsAxesItalic: null, labelsAxesBackground: 'rgba(255,255,255,0.8)', labelsAxesCount: 5, labelsAxesOffsetx: 0, labelsAxesOffsety: 0, textColor: 'black', textFont: 'Arial, Verdana, sans-serif', textSize: 12, textBold: false, textItalic: false, textAccessible: false, textAccessibleOverflow: 'visible', textAccessiblePointerevents: false, text: null, key: null, keyBackground: 'white', keyPosition: 'graph', keyHalign: 'right', keyShadow: false, keyShadowColor: '#666', keyShadowBlur: 3, keyShadowOffsetx: 2, keyShadowOffsety: 2, keyPositionGutterBoxed: false, keyPositionX: null, keyPositionY: null, keyColorShape: 'square', keyRounded: true, keyLinewidth: 1, keyColors: null, keyInteractive: false, keyinteractiveHighlightChartLinewidth: 20, keyInteractiveHighlightChartStroke: 'black', keyInteractiveHighlightChartFill: 'rgba(255,255,255,0.7)', keyInteractiveHighlightLabel: 'rgba(255,0,0,0.2)', keyLabelsColor: null, keyLabelsFont: null, keyLabelsSize: null, keyLabelsBold: null, keyLabelsItalic: null, keyLabelsOffsetx: 0, keyLabelsOffsety: 0, keyFormattedDecimals: 0, keyFormattedPoint: '.', keyFormattedThousand: ',', keyFormattedUnitsPre: '', keyFormattedUnitsPost: '', keyFormattedValueSpecific: null, keyFormattedItemsCount: null, contextmenu: null, tooltips: null, tooltipsEvent: 'click', tooltipsEffect: 'slide', tooltipsCssClass: 'RGraph_tooltip', tooltipsCss: null, tooltipsHighlight: true, tooltipsPersistent: false, tooltipsFormattedThousand: ',', tooltipsFormattedPoint: '.', tooltipsFormattedDecimals: 0, tooltipsFormattedUnitsPre: '', tooltipsFormattedUnitsPost: '', tooltipsFormattedKeyColors: null, tooltipsFormattedKeyColorsShape: 'square', tooltipsFormattedKeyLabels: [], tooltipsFormattedListType: 'ul', tooltipsFormattedListItems: null, tooltipsFormattedTableHeaders: null, tooltipsFormattedTableData: null, tooltipsPointer: true, tooltipsPointerOffsetx: 0, tooltipsPointerOffsety: 0, tooltipsPositionStatic: true, tooltipsHotspotIgnore: null, highlightStroke: 'transparent', highlightFill: 'rgba(255,255,255,0.7)', highlightFade: true, highlightLinewidth: 1, annotatable: false, annotatableColor: 'black', annotatableLinewidth: 1, adjustable: false, scaleMax: null, scaleMin: 0, scaleDecimals: null, scalePoint: '.', scaleThousand: ',', scaleUnitsPre: '', scaleUnitsPost: '', variant: 'stacked', variantThreedDepth: 10, variantThreedShadow: false, variantThreedShadowColor: '#ccc', variantThreedShadowOffsetx: 5, variantThreedShadowOffsety: 5, variantThreedShadowBlur: 5, exploded: 0, animationRoundrobinFactor: 1, animationRoundrobinRadius: true, animationGrowMultiplier: 1, segmentHighlight: false, segmentHighlightCount: null, segmentHighlightFill: 'rgba(0,255,0,0.5)', segmentHighlightStroke: 'transparent', clearto: 'transparent', events: {}, clip: null, responsive: null, scale: true, scaleFactor: 2, antialiasTranslate: false, style: [] }; // // These are the properties that get scaled up if the // scale option is enabled. // this.properties_scale = [ //'margin', // Don't double this - it's an angle 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'linewidth', 'labelsSize', 'labelsOffsetRadius', 'labelsAxesSize', 'labelsAxesOffsetx', 'labelsAxesOffsety', 'textSize', 'titleSize', 'titleX', 'titleY', 'titleOffsetx', 'titleOffsety', 'titleSubtitleSize', 'titleSubtitleOffsetx', 'titleSubtitleOffsety', 'keyShadowBlur', 'keyShadowOffsetx', 'keyShadowOffsety', 'keyPositionX', 'keyPositionY', 'keyLinewidth', 'keyLabelsSize', 'keyLabelsOffsetx', 'keyLabelsOffsety', 'annotateLinewidth', 'highlightLinewidth', 'centerx', 'centery', 'radius', 'variantThreedDepth', 'exploded' ]; // // 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; } } // Go through the data converting it to numbers this.data = RGraph.stringsToNumbers(this.data); // // Create the $ objects. In the case of non-equi-angular rose charts it actually creates too many $ objects, // but it doesn't matter. // var linear_data = RGraph.arrayLinearize(this.data); this.data_seq = linear_data; // Add .data_seq this.data_arr = linear_data; // Add .data_arr for (var i=0; i -1) { name = name.replace(/variant3d/i,'variantThreed'); } // 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; } // BC if (name === 'labelsOffset') { name = 'labelsOffsetRadius'; } // Accommodate misspelling of 3D variant name if (name.indexOf('variant3d') > -1) { name = name.replace(/variant3d/,'variantThreed'); } // Set the colorsParsed flag to false if the colors // property is being set if ( name === 'colors' || name === 'keyColors' || name === 'highlightStroke' || name === 'highlightFill' ) { 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 simple getter // // @param string name 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; // Accommodate misspelling of 3D variant name name = name.replace(/variant3d/,'variantThreed'); // BC if (name === 'labelsOffset') { name = 'labelsOffsetRadius'; } return properties[name]; }; // // This method draws the rose chart // 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); }); // // 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