1 2 contractsApp.directive('donutChart', ['donutChartDirectiveServices', 'mainServices', function (donutChartDirectiveServices, mainServices) { 3 4 return { 5 restrict: 'EA', 6 scope: { 7 configuration: '@', 8 clickedLabel: '&' 9 }, 10 controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { 11 12 $scope.$watch(function () { return $scope.configuration; }, function (newVal, oldVal) { 13 14 if(newVal != null && newVal != '') { 15 16 var currentConfig = JSON.parse(newVal); 17 18 var canvas = document.createElement('canvas'); 19 20 canvas.height = canvas.width; 21 22 if($element.find('canvas').length>0) { 23 $element.find('canvas')[0].remove(); 24 } 25 26 $("#donutChartDirective")[0].appendChild(canvas); 27 28 if(!currentConfig.chartJs.fontFamily) { 29 currentConfig.chartJs.fontFamily = "'Verdana', sans-serif"; 30 } 31 32 donutChartDirectiveServices.createChart(currentConfig.chartJs, canvas, $scope, $element); 33 34 donutChartDirectiveServices.addTextInside(currentConfig); 35 36 //modify padding for IE11 37 if(mainServices.checkIE11()) { 38 39 var div = $("#donutChartDirective")[0]; 40 41 //transform the padding percentage in padding pixels 42 div.style.padding = ( (12.5/100) *$("#donutChartDirective")[0].clientWidth)/2 + "px"; 43 44 //transform the padding every window resize 45 $( window ).resize(function() { 46 47 var div = $("#donutChartDirective")[0]; 48 49 div.style.padding = ( (12.5/100) *$("#donutChartDirective")[0].clientWidth)/2 + "px"; 50 51 });
52 } 53 } 54 55 }); 56 57 }], 58 link: function ($scope, $element, $attrs) { 59 }, 60 //set padding to adjust chart dimension 61 template: '<div id="donutChartDirective" width="100%" height="100%" style="padding: 12.5%;"></div>' 62 }; 63}]) 64 65.service('donutChartDirectiveServices', [function () { 66 67 var _that = this; 68 69 _that.createChart = function (extConfig, element, $scope, $element) { 70 71 var config = { 72 type: 'doughnut', 73 data: { 74 labels: extConfig.labels, 75 datasets: [ 76 { 77 data: extConfig.values, 78 backgroundColor: extConfig.backgroundColor, 79 hoverBackgroundColor: "#bbb" 80 } 81 ] 82 }, 83 options: { 84 responsive: true, 85 cutoutPercentage: 87.5, //rise the radius from center 86 legend: { 87 display: false 88 }, 89 tooltips: { 90 callbacks: { 91 title: function(tooltipItem, data) { 92 /** @type string */ 93 var title = data['labels'][tooltipItem[0]['index']]; 94 var hasSpaces = title.includes(' ') 95 if (title.length > 22 && hasSpaces) { 96 return title.split(/\s+(?=\S*$)/) 97 } 98 return data['labels'][tooltipItem[0]['index']]; 99 }, 100 label: function(tooltipItem, data) { 101 102 nContracts = data['datasets'][0]['data'][tooltipItem['index']] 103 104 //to decide if show 'contratto' or 'contratti' 105 if (nContracts > 1) { 106 return nContracts += " contratti"; 107 } 108 else { 109 return nContracts += " contratto"; 110 } 111 }, 112 }, 113 backgroundColor: "rgba(102, 102, 102, 0.9)", 114 titleFontFamily: extConfig.fontFamily, 115 titleFontSize: 20, 116 titleFontStyle: "bold", 117 titleFontColor: "#fff", 118 bodyFontFamily: extConfig.fontFamily, 119 bodyFontSize: 20, 120 bodyFontColor: "#ddd", 121 xPadding: 20, 122 yPadding: 20, 123 cornerRadius: 0, 124 displayColors: false, 125 borderColor: "#ddd", 126 borderWidth: 2 127 } 128 } 129 }; 130 131 //check if is a chart with on click event 132 if($element[0].attributes["clicked-label"]) { 133 if($element[0].attributes["clicked-label"].nodeValue) { 134 135 //function on click 136 config.options.onClick = function (c, i) { 137 138 if(i) { 139 $scope.clickedLabel({ label: i[0]._model.label }); 140 } 141 }; 142 143 //hover aspect 144 config.options.hover = { 145 onHover: function(e) { 146 var point = this.getElementAtEvent(e); 147 if (point.length) e.target.style.cursor = 'pointer'; 148 else e.target.style.cursor = 'default'; 149 } 150 } 151 152 } 153 } 154 155 //create chart 156 new Chart(element, config); 157 }; 158 159 _that.addTextInside = function (extConfig) { 160 161 //manage the font size of top text 162 function manageTextTop (left, right, line, chart) { 163 164 var widthLeft = 0; 165 var widthRight = 0; 166 167 //LEFT 168 169 var canvasLeft = document.createElement('canvas'); 170 var contextLeft = canvasLeft.getContext("2d"); 171 172 canvasLeft.height = canvasLeft.width; 173 174 contextLeft.font = left.fontSize + "px " + extConfig.chartJs.fontFamily; 175 176 widthLeft = contextLeft.measureText(left.text).width; 177 178 //find the correct font size to draw text 179 while(line.width/2 <= widthLeft ) { 180 181 left.fontSize--; 182 183 contextLeft.font = left.fontSize + "px " + extConfig.chartJs.fontFamily; 184 185 widthLeft = contextLeft.measureText(left.text).width; 186 } 187 188 //RIGHT 189 190 var canvasRight = document.createElement('canvas'); 191 var contextRight = canvasRight.getContext("2d"); 192 193 canvasRight.height = canvasRight.width; 194 195 contextRight.font = right.fontSize + "px " + extConfig.chartJs.fontFamily; 196 197 widthRight = contextRight.measureText(right.text).width; 198 199 //find the correct font size to draw text 200 while(line.width/2 <= widthRight ) { 201 202 right.fontSize--; 203 204 contextRight.font = right.fontSize + "px " + extConfig.chartJs.fontFamily; 205 206 widthRight = contextRight.measureText(right.text).width; 207 } 208 209 //check if need to translate left and right top text 210 if(widthLeft != widthRight) { 211 212 if(widthLeft > widthRight) { 213 214 right.xPixels = left.xPixels = Math.abs(((widthLeft + widthRight) / 2) - widthLeft); 215 } 216 else { 217 right.xPixels = left.xPixels = -1 * (((widthLeft + widthRight) / 2) - widthLeft); 218 } 219 } 220 221 }; 222 223 function setTextTopLeft (ctx, chart, config) { 224 225 //TOP LEFT 226 ctx.font = config.top.left.fontSize + "px " + extConfig.chartJs.fontFamily; 227 ctx.textBaseline = "middle"; 228 229 var textX = config.top.right.xPixels + Math.round((chart.chart.width / 2) - ctx.measureText(config.top.left.text).width) - 5; 230 var textY = (chart.chart.height / 2) - (config.top.left.fontSize/2); 231 ctx.fillText(config.top.left.text, textX, textY); 232 }; 233 234 function setTextTopRight (ctx, chart, config) { 235 236 //TOP RIGHT 237 ctx.font = config.top.right.fontSize + "px " + extConfig.chartJs.fontFamily; 238 ctx.textBaseline = "middle"; 239 240 var textX = config.top.left.xPixels + Math.round(chart.chart.width / 2) + 5; 241 var textY = (chart.chart.height / 2) - (config.top.right.fontSize); 242 ctx.fillText(config.top.right.text, textX, textY); 243 }; 244 245 function setLine (ctx, chart, config) { 246 247 //LINE 248 ctx.beginPath();
249 ctx.moveTo((chart.chart.width-config.line.width)/2,(chart.chart.height / 2)); 250 ctx.lineTo((chart.chart.width+config.line.width)/2,(chart.chart.height / 2)); 251 ctx.strokeStyle = "#ccc"; 252 ctx.stroke(); 253 }; 254 255 function setTextBottomTop (ctx, chart, config) { 256 257 //BOTTOM TOP 258 ctx.font = "bold " + config.bottom.top.fontSize + "px " + extConfig.chartJs.fontFamily; 259 ctx.textBaseline = "middle"; 260 261 var textX = Math.round((chart.chart.width - ctx.measureText(config.bottom.top.text).width) / 2); 262 var textY = (chart.chart.height / 2) + 10 + (config.bottom.top.fontSize); 263 ctx.fillText(config.bottom.top.text, textX, textY); 264 }; 265 266 function setTextBottomBottom (ctx, chart, config) { 267 268 //BOTTOM TOP 269 ctx.font = config.bottom.bottom.fontSize + "px " + extConfig.chartJs.fontFamily; 270 ctx.textBaseline = "middle"; 271 272 var textX = Math.round((chart.chart.width - ctx.measureText(config.bottom.bottom.text).width) / 2); 273 var textY = (chart.chart.height / 2) + 10 + (config.bottom.top.fontSize + 5 + config.bottom.bottom.fontSize); 274 ctx.fillText(config.bottom.bottom.text, textX, textY); 275 }; 276 277 //to reset old settings 278 Chart.pluginService.clear(); 279 280 Chart.pluginService.register({ 281 282 beforeDraw: function(chart) { 283 284 chart.chart.ctx.restore(); 285 286 var config = { 287 top: { 288 left: { 289 text: extConfig.insideChart.topText.left, 290 fontSize: parseInt((chart.chart.height * (10/77) * 1.62).toFixed(0)), 291 xPixels: 0 292 }, 293 right: { 294 text: extConfig.insideChart.topText.right, 295 fontSize: parseInt((chart.chart.height * (10/295) * 1.62).toFixed(0)), 296 xPixels: 0 297 } 298 }, 299 bottom: { 300 top: { 301 text: extConfig.insideChart.bottomText.top, 302 fontSize: parseInt((chart.chart.height * (10/322) * 1.62).toFixed(0)) 303 }, 304 bottom: { 305 text: extConfig.insideChart.bottomText.bottom, 306 fontSize: parseInt((chart.chart.height * (10/295) * 1.62).toFixed(0)) 307 } 308 }, 309 line: { 310 width: parseInt((chart.chart.width * (10/16)).toFixed(0)) 311 } 312 }; 313 314 //adjust top font size 315 manageTextTop(config.top.left, config.top.right, config.line, chart) 316 317 //TOP LEFT 318 setTextTopLeft(chart.chart.ctx, chart, config); 319 320 //TOP RIGHT 321 setTextTopRight(chart.chart.ctx, chart, config); 322 323 //LINE 324 setLine(chart.chart.ctx, chart, config); 325 326 //BOTTOM TOP 327 setTextBottomTop(chart.chart.ctx, chart, config); 328 329 //BOTTOM BOTTOM 330 setTextBottomBottom(chart.chart.ctx, chart, config); 331 332 chart.chart.ctx.save(); 333 } 334 }); 335 }; 336 337}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.