Skip to content

feat: added extra setting for Maximum KPI value #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elaine-f-dunwoody wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: added extra setting for Maximum KPI value #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0aa94e8
feat: added extra setting for Maximum KPI value
elaine-f-dunwoody Apr 27, 2026
bfab21c
fix: added text wrap
elaine-f-dunwoody Apr 27, 2026
7b86c1c
fix: arc changes dpending on show percentage setting
elaine-f-dunwoody Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 82 additions & 63 deletions CircularKPI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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
}
}
}
}
Expand All @@ -78,31 +84,31 @@ 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;
Expand All @@ -120,59 +126,72 @@ 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')
.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;

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 });
};


Expand Down
2 changes: 1 addition & 1 deletion CircularKPI.qext
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "Circular KPI Visualization",
"icon": "kpi",
"type": "visualization",
"version": "1.0.0",
"version": "1.1.2",
"author": "",
"homepage": "",
"keywords": "qlik-sense, visualization",
Expand Down
Loading