From 0aa94e87f90cea452eef40f356a38142513d3693 Mon Sep 17 00:00:00 2001
From: Elaine Dunwoody <edunwoody@prc.com.au>
Date: Mon, 27 Apr 2026 15:24:37 +1000
Subject: [PATCH 1/3] feat: added extra setting for Maximum KPI value

---
 CircularKPI.js   | 181 ++++++++++++++++++++++++++++-------------------
 CircularKPI.qext |   2 +-
 2 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/CircularKPI.js b/CircularKPI.js
index 73acff5..304f42e 100644
--- a/CircularKPI.js
+++ b/CircularKPI.js
@@ -1,5 +1,5 @@
 /*globals define*/
-define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.min", "./scripts/radialProgress"], function($, cssContent, chart_theme) {
+define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.min", "./scripts/radialProgress"], function ($, cssContent, chart_theme) {
     'use strict';
     $("<style>").html(cssContent).appendTo("head");
     return {
@@ -51,24 +51,30 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
                                     ref: "animationtime",
                                     defaultValue: 1000
                                 },
-								singlekpilabel: {
-									type: "string",
-									label: "Single KPI Label",
-									ref: "singlekpilabel",
-									defaultValue: ""
-								},
-								showdecimals: {
-									type: "boolean",
-									label: "Show decimal values",
-									ref: "showdecimals",
-									defaultValue: false
-								},
-								showpercentage: {
-									type: "boolean",
-									label: "Show percent (%) symbol",
-									ref: "showpercentage",
-									defaultValue: true
-								}
+                                maxvalue: {
+                                    type: "integer",
+                                    label: "Maximum KPI Value",
+                                    ref: "maxkpivalue",
+                                    defaultValue: 100
+                                },
+                                singlekpilabel: {
+                                    type: "string",
+                                    label: "Single KPI Label",
+                                    ref: "singlekpilabel",
+                                    defaultValue: ""
+                                },
+                                showdecimals: {
+                                    type: "boolean",
+                                    label: "Show decimal values",
+                                    ref: "showdecimals",
+                                    defaultValue: false
+                                },
+                                showpercentage: {
+                                    type: "boolean",
+                                    label: "Show percent (%) symbol",
+                                    ref: "showpercentage",
+                                    defaultValue: true
+                                }
                             }
                         }
                     }
@@ -78,41 +84,59 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
         snapshot: {
             canTakeSnapshot: true
         },
-        paint: function($element, layout) {
+        paint: function ($element, layout) {
 
             $element.empty();
-			
-			var id = "container_" + layout.qInfo.qId;
-			var width = $element.width();
-			var height = $element.height();
-			if(document.getElementById(id)) {
-				$("#" + id).empty();
-			}
-			else {
-				$element.append($('<div />').attr("id", id).attr("class", "viz").width(width).height(height));
-			}
+
+            var id = "container_" + layout.qInfo.qId;
+            var width = $element.width();
+            var height = $element.height();
+            if (document.getElementById(id)) {
+                $("#" + id).empty();
+            }
+            else {
+                $element.append($('<div />').attr("id", id).attr("class", "viz").width(width).height(height));
+            }
 
             var IS_SPARK_LAYOUT = this.options.layoutMode === 1;
             var HAS_DIMENSION = layout.qHyperCube.qDimensionInfo.length > 0;
-			var HAS_TWO_DIMENSION = layout.qHyperCube.qDimensionInfo.length > 1;
+            var HAS_TWO_DIMENSION = layout.qHyperCube.qDimensionInfo.length > 1;
 
             var data = layout.qHyperCube.qDataPages[0].qMatrix;
             var label = layout.qHyperCube.qMeasureInfo[0].qFallbackTitle;
 
             var colors = [layout.theme[0], layout.theme[1], layout.theme[2]];
             var animationTime = layout.animationtime;
-			var showdecimals = layout.showdecimals;
-			var showpercentage = layout.showpercentage;
+            var showdecimals = layout.showdecimals;
+            var showpercentage = layout.showpercentage;
 
 
             var rows, columns;
-            if (height > width) {
-                columns = Math.ceil(Math.sqrt(data.length));
-                rows = Math.ceil(data.length / columns);
+
+            // Updated to respect aspect ration
+            var aspectRatio = width / height;
+            var tileGap = 12; // px of white space between KPIs
+
+            if (aspectRatio > 1.5) {
+                // Wide layout: allocate more columns proportionally
+                columns = Math.ceil(Math.sqrt(data.length * aspectRatio));
+            } else if (aspectRatio < 0.75) {
+                // Tall layout: fewer columns
+                columns = Math.ceil(Math.sqrt(data.length / aspectRatio));
             } else {
-                columns = Math.ceil(Math.sqrt(1.5 * data.length) / 1.5);
-                rows = Math.ceil(data.length / columns);
-            };
+                // Balanced layout: near-square
+                columns = Math.ceil(Math.sqrt(data.length));
+            }
+
+            // Safety guards
+            columns = Math.min(columns, data.length);
+            columns = Math.max(columns, 1);
+
+            rows = Math.ceil(data.length / columns);
+
+
+            var tileWidth = Math.floor((width - (columns + 1) * tileGap) / columns);
+            var tileHeight = Math.floor((height - (rows + 1) * tileGap) / rows);
 
             var area = d3.select($("#" + id).get(0))
                 .selectAll('.area')
@@ -120,59 +144,74 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
                 .enter()
                 .append('div')
                 .attr('class', 'circular-kpi-tile')
-                .attr('id', function(d, i) {
+                .attr('id', function (d, i) {
                     return id + '_circular-kpi-tile-' + i;
                 })
-				.attr('selected', 'no')
-                .style('width', Math.ceil(width / columns, 10) - 5 + 'px')
-                .style('height', Math.ceil(height / rows, 10) - 5 + 'px');
-			
-            data.forEach(function(d, i) {
-				if(HAS_TWO_DIMENSION) {
-					var value = d[2].qNum;
-					//For a multidim chart - calculate the color to use so we loop over the # of colors in the theme.
-					var colorIter = Math.round(d[1].qElemNumber/(layout.theme.length-2) % 1 * (layout.theme.length-2));
-					colors = [layout.theme[colorIter], layout.theme[colorIter+1], layout.theme[colorIter+2]];
-				}
-				else {
-					var value = HAS_DIMENSION ? d[1].qNum : d[0].qNum;
+                .attr('selected', 'no')
+                .style('width', tileWidth + 'px')
+                .style('height', tileHeight + 'px')
+                .style('margin', tileGap / 2 + 'px');
+
+
+            data.forEach(function (d, i) {
+                if (HAS_TWO_DIMENSION) {
+                    var value = d[2].qNum;
+                    //For a multidim chart - calculate the color to use so we loop over the # of colors in the theme.
+                    var colorIter = Math.round(d[1].qElemNumber / (layout.theme.length - 2) % 1 * (layout.theme.length - 2));
+                    colors = [layout.theme[colorIter], layout.theme[colorIter + 1], layout.theme[colorIter + 2]];
+                }
+                else {
+                    var value = HAS_DIMENSION ? d[1].qNum : d[0].qNum;
                 }
-				if(layout.singlekpilabel.length>0) {var label = HAS_DIMENSION ? d[0].qText : layout.singlekpilabel};
-				if(layout.singlekpilabel.length==0) {var label = HAS_DIMENSION ? d[0].qText : label};
-				
-				var extraLabel = HAS_TWO_DIMENSION ? d[1].qText : "";
+
+                // added scaled logic using the maxkpivalue
+                var maxValue = layout.maxkpivalue || 100;
+
+                // Convert raw KPI value → percentage for radialProgress
+                var scaledValue = (value / maxValue) * 100;
+
+                // Optional safety clamp (keeps original 300% behaviour)
+                scaledValue = Math.max(0, Math.min(scaledValue, 300));
+
+
+                if (layout.singlekpilabel.length > 0) { var label = HAS_DIMENSION ? d[0].qText : layout.singlekpilabel };
+                if (layout.singlekpilabel.length == 0) { var label = HAS_DIMENSION ? d[0].qText : label };
+
+                var extraLabel = HAS_TWO_DIMENSION ? d[1].qText : "";
 
                 var element = document.getElementById(id + '_circular-kpi-tile-' + i);
-				
+
                 var width = element.offsetWidth - 5, height = element.offsetHeight - 5;
-				
-                var select = function() {
-					$('#' + id + '_circular-kpi-tile-' + i).attr('selected', '1');
-					toggleOpacity();
+
+                var select = function () {
+                    $('#' + id + '_circular-kpi-tile-' + i).attr('selected', '1');
+                    toggleOpacity();
                     return HAS_DIMENSION ? this.selectValues(0, [d[0].qElemNumber], true) : false;
                 }.bind(this);
-                
+
                 if (width < height) {
                     height = width;
                 } else {
                     width = height;
                 };
 
+
                 radialProgress(element, width, height, colors, animationTime, showdecimals, showpercentage)
                     .diameter(width)
                     .label(label)
-					.extraLabel(extraLabel)
+                    .extraLabel(extraLabel)
                     .onClick(select)
-                    .value(value * 100)
+                    .value(scaledValue) // arc only
+                    .displayValue(showpercentage ? scaledValue : value) // text only
                     .render();
-					
+
             }.bind(this));
-            
+
             function toggleOpacity() {
-				$("#" +id).find("[selected=no]")
-					.css({ opacity: 0.5 });
-				$("#" +id).find("[selected=selected]")
-					.css({ opacity: 1 });	
+                $("#" + id).find("[selected=no]")
+                    .css({ opacity: 0.5 });
+                $("#" + id).find("[selected=selected]")
+                    .css({ opacity: 1 });
             };
 
 
diff --git a/CircularKPI.qext b/CircularKPI.qext
index 846707a..94852ba 100644
--- a/CircularKPI.qext
+++ b/CircularKPI.qext
@@ -3,7 +3,7 @@
 	"description": "Circular KPI Visualization",
 	"icon": "kpi",
 	"type": "visualization",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"author": "",
 	"homepage": "",
 	"keywords": "qlik-sense, visualization",

From bfab21c6209f6823cc11dddd2a454a06f9743db7 Mon Sep 17 00:00:00 2001
From: Elaine Dunwoody <edunwoody@prc.com.au>
Date: Mon, 27 Apr 2026 16:00:06 +1000
Subject: [PATCH 2/3] fix: added text wrap

---
 CircularKPI.js            |  42 ++----
 CircularKPI.qext          |   2 +-
 scripts/radialProgress.js | 273 ++++++++++++++++++++++----------------
 3 files changed, 169 insertions(+), 148 deletions(-)

diff --git a/CircularKPI.js b/CircularKPI.js
index 304f42e..0f674bf 100644
--- a/CircularKPI.js
+++ b/CircularKPI.js
@@ -112,31 +112,13 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
 
 
             var rows, columns;
-
-            // Updated to respect aspect ration
-            var aspectRatio = width / height;
-            var tileGap = 12; // px of white space between KPIs
-
-            if (aspectRatio > 1.5) {
-                // Wide layout: allocate more columns proportionally
-                columns = Math.ceil(Math.sqrt(data.length * aspectRatio));
-            } else if (aspectRatio < 0.75) {
-                // Tall layout: fewer columns
-                columns = Math.ceil(Math.sqrt(data.length / aspectRatio));
-            } else {
-                // Balanced layout: near-square
+            if (height > width) {
                 columns = Math.ceil(Math.sqrt(data.length));
-            }
-
-            // Safety guards
-            columns = Math.min(columns, data.length);
-            columns = Math.max(columns, 1);
-
-            rows = Math.ceil(data.length / columns);
-
-
-            var tileWidth = Math.floor((width - (columns + 1) * tileGap) / columns);
-            var tileHeight = Math.floor((height - (rows + 1) * tileGap) / rows);
+                rows = Math.ceil(data.length / columns);
+            } else {
+                columns = Math.ceil(Math.sqrt(1.5 * data.length) / 1.5);
+                rows = Math.ceil(data.length / columns);
+            };
 
             var area = d3.select($("#" + id).get(0))
                 .selectAll('.area')
@@ -148,10 +130,8 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
                     return id + '_circular-kpi-tile-' + i;
                 })
                 .attr('selected', 'no')
-                .style('width', tileWidth + 'px')
-                .style('height', tileHeight + 'px')
-                .style('margin', tileGap / 2 + 'px');
-
+                .style('width', Math.ceil(width / columns, 10) - 5 + 'px')
+                .style('height', Math.ceil(height / rows, 10) - 5 + 'px');
 
             data.forEach(function (d, i) {
                 if (HAS_TWO_DIMENSION) {
@@ -196,13 +176,15 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
                 };
 
 
+                // Decide what number should be displayed
+                var displayValue = showpercentage ? scaledValue : value;
+
                 radialProgress(element, width, height, colors, animationTime, showdecimals, showpercentage)
                     .diameter(width)
                     .label(label)
                     .extraLabel(extraLabel)
                     .onClick(select)
-                    .value(scaledValue) // arc only
-                    .displayValue(showpercentage ? scaledValue : value) // text only
+                    .value(displayValue)
                     .render();
 
             }.bind(this));
diff --git a/CircularKPI.qext b/CircularKPI.qext
index 94852ba..3fec845 100644
--- a/CircularKPI.qext
+++ b/CircularKPI.qext
@@ -3,7 +3,7 @@
 	"description": "Circular KPI Visualization",
 	"icon": "kpi",
 	"type": "visualization",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"author": "",
 	"homepage": "",
 	"keywords": "qlik-sense, visualization",
diff --git a/scripts/radialProgress.js b/scripts/radialProgress.js
index 38c45c1..ee10619 100644
--- a/scripts/radialProgress.js
+++ b/scripts/radialProgress.js
@@ -24,50 +24,85 @@
  */
 
 function radialProgress(parent, width, height, colors, animationTime, showdecimals, showpercentage) {
-	
-	var colors = colors;
-	//console.log(colors);
-	
-	if(showpercentage) {
-		var percentageSymbol = "%";
-	}
-	else {
-		var percentageSymbol ="";
-	}
-	//console.log(percentageSymbol);
-	
-    var _data=null,
-        _duration= animationTime,
+
+    var colors = colors;
+    //console.log(colors);
+
+    if (showpercentage) {
+        var percentageSymbol = "%";
+    }
+    else {
+        var percentageSymbol = "";
+    }
+    //console.log(percentageSymbol);
+
+    var _data = null,
+        _duration = animationTime,
         _selection,
-        _margin = {top:0, right:0, bottom:0, left:0},
+        _margin = { top: 0, right: 0, bottom: 0, left: 0 },
         __width = width,//300,
         __height = height,//300,
         _diameter = 150,
-        _label="",
-		_extraLabel="",
-        _fontSize=10;
+        _label = "",
+        _extraLabel = "",
+        _fontSize = 10;
 
 
     var _mouseClick;
 
-    var _value= 0,
+    var _value = 0,
         _minValue = 0,
         _maxValue = 100;
 
-    var  _currentArc= 0, _currentArc2= 0, _currentArc3= 0, _currentValue=0;
+    var _currentArc = 0, _currentArc2 = 0, _currentArc3 = 0, _currentValue = 0;
 
     var _arc = d3.svg.arc()
-        .startAngle(0 * (Math.PI/180)); //just radians
+        .startAngle(0 * (Math.PI / 180)); //just radians
 
     var _arc2 = d3.svg.arc()
-        .startAngle(0 * (Math.PI/180))
+        .startAngle(0 * (Math.PI / 180))
         .endAngle(0); //just radians
 
     var _arc3 = d3.svg.arc()
-        .startAngle(0 * (Math.PI/180))
+        .startAngle(0 * (Math.PI / 180))
         .endAngle(0); //just radians
 
-    _selection=d3.select(parent);
+    _selection = d3.select(parent);
+
+    // function to wrap label text
+    function wrapSvgText(textSelection, maxWidth) {
+        textSelection.each(function () {
+            var text = d3.select(this);
+            var words = text.text().split(/\s+/).reverse();
+            var word;
+            var line = [];
+            var lineNumber = 0;
+            var lineHeight = 1.1; // ems
+            var y = text.attr("y");
+            var dy = 0;
+
+            var tspan = text.text(null)
+                .append("tspan")
+                .attr("x", text.attr("x"))
+                .attr("y", y)
+                .attr("dy", dy + "em");
+
+            while (word = words.pop()) {
+                line.push(word);
+                tspan.text(line.join(" "));
+                if (tspan.node().getComputedTextLength() > maxWidth) {
+                    line.pop();
+                    tspan.text(line.join(" "));
+                    line = [word];
+                    tspan = text.append("tspan")
+                        .attr("x", text.attr("x"))
+                        .attr("y", y)
+                        .attr("dy", ++lineNumber * lineHeight + dy + "em")
+                        .text(word);
+                }
+            }
+        });
+    }
 
 
     function component() {
@@ -77,7 +112,7 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
             // Select the svg element, if it exists.
             var svg = d3.select(this).selectAll("svg").data([data]);
 
-            var enter = svg.enter().append("svg").attr("class","radial-svg").append("g");
+            var enter = svg.enter().append("svg").attr("class", "radial-svg").append("g");
 
             measure();
 
@@ -85,122 +120,126 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
                 .attr("height", __height);
 
 
-            var background = enter.append("g").attr("class","component")
-                .attr("cursor","pointer")
-                .on("click",onMouseClick);
+            var background = enter.append("g").attr("class", "component")
+                .attr("cursor", "pointer")
+                .on("click", onMouseClick);
 
 
-            _arc.endAngle(360 * (Math.PI/180))
+            _arc.endAngle(360 * (Math.PI / 180))
 
             background.append("rect")
-                .attr("class","background")
+                .attr("class", "background")
                 .attr("width", _width)
                 .attr("height", _height);
 
             background.append("path")
-                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
+                .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
                 .attr("d", _arc);
 
-                
+
             var g = svg.select("g")
-                .attr("transform", "translate(" + _margin.left + "," + _margin.top + ")");	
+                .attr("transform", "translate(" + _margin.left + "," + _margin.top + ")");
 
-            svg.append("text")
+            var dimensionLabel = svg.append("text")
                 .attr("class", "dimensionlabel")
-                .attr("y",_width/2  + (_fontSize / 1.5))
-                .attr("x",_width/2 )
+                .attr("y", _width / 2 + (_fontSize / 1.5))
+                .attr("x", _width / 2)
                 .text(__height > 100 ? _label : '')
-                .style("font-size", function() {
-                    return _fontSize / 4 < 10 ? 10 + "px" : _fontSize / 4 +"px"
+                .style("font-size", function () {
+                    return _fontSize / 4 < 10 ? 10 + "px" : _fontSize / 4 + "px"
                 })
                 .style('text-anchor', 'middle');
-				
-            svg.append("text")
+
+            wrapSvgText(dimensionLabel, _width * 0.7);
+
+            var secondLabel = svg.append("text")
                 .attr("class", "seconddimensionlabel")
-                .attr("y",_width/4.2 + (_fontSize / 1.5))
-                .attr("x",_width/2 )
+                .attr("y", _width / 4.2 + (_fontSize / 1.5))
+                .attr("x", _width / 2)
                 .text(__height > 100 ? _extraLabel : '')
-                .style("font-size", function() {
-                    return _fontSize / 4 < 10 ? 10 + "px" : _fontSize / 4 +"px"
+                .style("font-size", function () {
+                    return _fontSize / 4 < 10 ? 10 + "px" : _fontSize / 4 + "px"
                 })
                 .style('text-anchor', 'middle')
-				.style('font-weight', 'bold');				
+                .style('font-weight', 'bold');
+
+            wrapSvgText(secondLabel, _width * 0.7);
 
             _arc.endAngle(_currentArc);
             enter.append("g").attr("class", "arcs");
             var path = svg.select(".arcs").selectAll(".arc").data(data);
-			
+
             path.enter().append("path")
-                .attr("class","arc")
-				.attr("fill", colors[0])
-                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
+                .attr("class", "arc")
+                .attr("fill", colors[0])
+                .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
                 .attr("d", _arc);
 
             //Another path in case we exceed 100%
             var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
             path2.enter().append("path")
-                .attr("class","arc2")
-				.attr("fill", colors[1])
-                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
+                .attr("class", "arc2")
+                .attr("fill", colors[1])
+                .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
                 .attr("d", _arc2);
 
-			//Another path in case we exceed 200%
+            //Another path in case we exceed 200%
             var path3 = svg.select(".arcs").selectAll(".arc3").data(data);
             path3.enter().append("path")
-                .attr("class","arc3")
-				.attr("fill", colors[2])
-                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
-                .attr("d", _arc3);	
+                .attr("class", "arc3")
+                .attr("fill", colors[2])
+                .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
+                .attr("d", _arc3);
 
             enter.append("g").attr("class", "labels");
             var label = svg.select(".labels").selectAll(".label").data(data);
             label.enter().append("text")
-                .attr("class","label")
-                .attr("y",_width/2+_fontSize/3)
-                .attr("x",_width/2)
-                .attr("cursor","pointer")
-                .attr("width",_width)
+                .attr("class", "label")
+                .attr("y", _width / 2 + _fontSize / 3)
+                .attr("x", _width / 2)
+                .attr("cursor", "pointer")
+                .attr("width", _width)
                 // .attr("x",(3*_fontSize/2))
-                .text(function (d) {return (_value-_minValue)/(_maxValue-_minValue)*100 + percentageSymbol })
-                .style("font-size",_fontSize+"px")
-                .on("click",onMouseClick);
+                .text(function (d) { return (_value - _minValue) / (_maxValue - _minValue) * 100 + percentageSymbol })
+                .style("font-size", _fontSize + "px")
+                .on("click", onMouseClick);
+
+
+            path.exit().transition().duration(500).attr("x", 1000).remove();
 
-				
-            path.exit().transition().duration(500).attr("x",1000).remove();
 
-			
 
             layout(svg);
 
             function layout(svg) {
 
-                var ratio=(_value-_minValue)/(_maxValue-_minValue);
-                var endAngle=Math.min(360*ratio,360);
-                endAngle=endAngle * Math.PI/180;
+                var ratio = (_value - _minValue) / (_maxValue - _minValue);
+                var endAngle = Math.min(360 * ratio, 360);
+                endAngle = endAngle * Math.PI / 180;
 
                 path.datum(endAngle);
                 path.transition().duration(_duration)
                     .attrTween("d", arcTween);
 
                 if (ratio > 1) {
-                    path2.datum(Math.min(360*(ratio-1),360) * Math.PI/180);
+                    path2.datum(Math.min(360 * (ratio - 1), 360) * Math.PI / 180);
                     path2.transition().delay(_duration).duration(_duration)
                         .attrTween("d", arcTween2);
                 }
-				if (ratio > 2) {
-					//console.log("over 200%");
-					path2.datum(Math.min(360*(ratio-1),360) * Math.PI/180);
+                if (ratio > 2) {
+                    //console.log("over 200%");
+                    path2.datum(Math.min(360 * (ratio - 1), 360) * Math.PI / 180);
                     path2.transition().delay(_duration).duration(_duration)
                         .attrTween("d", arcTween2);
-					path3.datum(Math.min(360*(ratio-2),360) * Math.PI/180);
-					path3.transition().delay(_duration).duration(_duration)
-						.attrTween("d", arcTween3);
-				}
-                
-                label.datum((ratio*100)); //Math.round
+                    path3.datum(Math.min(360 * (ratio - 2), 360) * Math.PI / 180);
+                    path3.transition().delay(_duration).duration(_duration)
+                        .attrTween("d", arcTween3);
+                }
+
+                label.datum((ratio * 100)); //Math.round
                 label.transition().duration(_duration)
-                    .tween("text",labelTween);
-				//console.log(labelTween("54.32"));
+                    .tween("text", labelTween);
+                //console.log(labelTween("54.32"));
             }
 
         });
@@ -216,23 +255,23 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
         var i = d3.interpolate(_currentValue, a);
         _currentValue = i(0);
 
-        return function(t) {
+        return function (t) {
             _currentValue = i(t);
-			if(showdecimals) {
-				this.textContent = Math.round(i(t)*100)/100 + percentageSymbol; //Show decimals, up to 2
-			}
-			else {
-				this.textContent = Math.round(i(t)) + percentageSymbol; //Don't show decimals
-			}
-			
+            if (showdecimals) {
+                this.textContent = Math.round(i(t) * 100) / 100 + percentageSymbol; //Show decimals, up to 2
+            }
+            else {
+                this.textContent = Math.round(i(t)) + percentageSymbol; //Don't show decimals
+            }
+
         }
     }
 
     function arcTween(a) {
         var i = d3.interpolate(_currentArc, a);
 
-        return function(t) {
-            _currentArc=i(t);
+        return function (t) {
+            _currentArc = i(t);
             return _arc.endAngle(i(t))();
         };
     }
@@ -240,7 +279,7 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
     function arcTween2(a) {
         var i = d3.interpolate(_currentArc2, a);
 
-        return function(t) {
+        return function (t) {
             return _arc2.endAngle(i(t))();
         };
     }
@@ -248,26 +287,26 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
     function arcTween3(a) {
         var i = d3.interpolate(_currentArc3, a);
 
-        return function(t) {
+        return function (t) {
             return _arc3.endAngle(i(t))();
         };
-    }    
+    }
 
 
     function measure() {
-        _width=_diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
-        _height=_width;
-        _fontSize=_width*.2;
-        _arc.outerRadius(_width/2);
-        _arc.innerRadius(_width/2 * .85);
-        _arc2.outerRadius(_width/2 * .85);
-        _arc2.innerRadius(_width/2 * .85 - (_width/2 * .15));
-        _arc3.outerRadius(_width/2 * .7);
-        _arc3.innerRadius(_width/2 * .7 - (_width/2 * .15));		
+        _width = _diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
+        _height = _width;
+        _fontSize = _width * .2;
+        _arc.outerRadius(_width / 2);
+        _arc.innerRadius(_width / 2 * .85);
+        _arc2.outerRadius(_width / 2 * .85);
+        _arc2.innerRadius(_width / 2 * .85 - (_width / 2 * .15));
+        _arc3.outerRadius(_width / 2 * .7);
+        _arc3.innerRadius(_width / 2 * .7 - (_width / 2 * .15));
     }
 
 
-    component.render = function() {
+    component.render = function () {
         measure();
         component();
         return component;
@@ -281,43 +320,43 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
     }
 
 
-    component.margin = function(_) {
+    component.margin = function (_) {
         if (!arguments.length) return _margin;
         _margin = _;
         return component;
     };
 
-    component.diameter = function(_) {
+    component.diameter = function (_) {
         if (!arguments.length) return _diameter
-        _diameter =  _;
+        _diameter = _;
         return component;
     };
 
-    component.minValue = function(_) {
+    component.minValue = function (_) {
         if (!arguments.length) return _minValue;
         _minValue = _;
         return component;
     };
 
-    component.maxValue = function(_) {
+    component.maxValue = function (_) {
         if (!arguments.length) return _maxValue;
         _maxValue = _;
         return component;
     };
 
-    component.label = function(_) {
+    component.label = function (_) {
         if (!arguments.length) return _label;
         _label = _;
         return component;
     };
-	
-    component.extraLabel = function(_) {
+
+    component.extraLabel = function (_) {
         if (!arguments.length) return _extraLabel;
         _extraLabel = _;
         return component;
-    };	
+    };
 
-    component._duration = function(_) {
+    component._duration = function (_) {
         if (!arguments.length) return _duration;
         _duration = _;
         return component;
@@ -325,7 +364,7 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
 
     component.onClick = function (_) {
         if (!arguments.length) return _mouseClick;
-        _mouseClick=_;
+        _mouseClick = _;
         return component;
     }
 

From 7b86c1cd06dbc2bfdb7962dae6325b5ad094a1fb Mon Sep 17 00:00:00 2001
From: Elaine Dunwoody <edunwoody@prc.com.au>
Date: Mon, 27 Apr 2026 16:04:55 +1000
Subject: [PATCH 3/3] fix: arc changes dpending on show percentage setting

---
 CircularKPI.js            |  6 ++----
 CircularKPI.qext          |  2 +-
 scripts/radialProgress.js | 34 +++++++++++++++++++++++++---------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/CircularKPI.js b/CircularKPI.js
index 0f674bf..c891565 100644
--- a/CircularKPI.js
+++ b/CircularKPI.js
@@ -176,15 +176,13 @@ define(["jquery", "text!./scripts/style.css", "./scripts/themes", "./scripts/d3.
                 };
 
 
-                // Decide what number should be displayed
-                var displayValue = showpercentage ? scaledValue : value;
-
                 radialProgress(element, width, height, colors, animationTime, showdecimals, showpercentage)
                     .diameter(width)
                     .label(label)
                     .extraLabel(extraLabel)
                     .onClick(select)
-                    .value(displayValue)
+                    .value(scaledValue) // arc only
+                    .displayValue(showpercentage ? scaledValue : value) // text only
                     .render();
 
             }.bind(this));
diff --git a/CircularKPI.qext b/CircularKPI.qext
index 3fec845..6890bef 100644
--- a/CircularKPI.qext
+++ b/CircularKPI.qext
@@ -3,7 +3,7 @@
 	"description": "Circular KPI Visualization",
 	"icon": "kpi",
 	"type": "visualization",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"author": "",
 	"homepage": "",
 	"keywords": "qlik-sense, visualization",
diff --git a/scripts/radialProgress.js b/scripts/radialProgress.js
index ee10619..b9c70d8 100644
--- a/scripts/radialProgress.js
+++ b/scripts/radialProgress.js
@@ -54,6 +54,8 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
         _minValue = 0,
         _maxValue = 100;
 
+    var _displayValue = null;
+
     var _currentArc = 0, _currentArc2 = 0, _currentArc3 = 0, _currentValue = 0;
 
     var _arc = d3.svg.arc()
@@ -236,7 +238,9 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
                         .attrTween("d", arcTween3);
                 }
 
-                label.datum((ratio * 100)); //Math.round
+
+                var labelTarget = _displayValue !== null ? _displayValue : (ratio * 100);
+                label.datum(labelTarget);
                 label.transition().duration(_duration)
                     .tween("text", labelTween);
                 //console.log(labelTween("54.32"));
@@ -255,16 +259,23 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
         var i = d3.interpolate(_currentValue, a);
         _currentValue = i(0);
 
+
         return function (t) {
-            _currentValue = i(t);
-            if (showdecimals) {
-                this.textContent = Math.round(i(t) * 100) / 100 + percentageSymbol; //Show decimals, up to 2
+            var v = i(t);
+            _currentValue = v;
+
+            if (showpercentage) {
+                // Percentage display
+                this.textContent = showdecimals
+                    ? (Math.round(v * 100) / 100) + percentageSymbol
+                    : Math.round(v) + percentageSymbol;
+            } else {
+                // Raw value display (no %)
+                this.textContent = showdecimals
+                    ? (Math.round(v * 100) / 100)
+                    : Math.round(v);
             }
-            else {
-                this.textContent = Math.round(i(t)) + percentageSymbol; //Don't show decimals
-            }
-
-        }
+        };
     }
 
     function arcTween(a) {
@@ -319,6 +330,11 @@ function radialProgress(parent, width, height, colors, animationTime, showdecima
         return component;
     }
 
+    component.displayValue = function (_) {
+        if (!arguments.length) return _displayValue;
+        _displayValue = _;
+        return component;
+    };
 
     component.margin = function (_) {
         if (!arguments.length) return _margin;