Skip to content

Instantly share code, notes, and snippets.

@MatthewBarker
Last active August 29, 2015 14:17
Show Gist options
  • Save MatthewBarker/b77e87793e6495893037 to your computer and use it in GitHub Desktop.
Save MatthewBarker/b77e87793e6495893037 to your computer and use it in GitHub Desktop.
Knocout-Kendo custom binding for data bars
ko.bindingHandlers.kendoDataBar = {
init: function (element, valueAccessor,
allBindingsAccessor, viewModel, bindingContext) {
var data = ko.computed(function() {
var field = ko.utils.unwrapObservable(valueAccessor().field),
comparisons = ko.utils.unwrapObservable(valueAccessor().comparisons),
numerator = 0,
max = 0,
sum = 0,
values = [],
result = { percentage: 0, value: 0 };
if (field) {
numerator = parseFloat(ko.utils.unwrapObservable(valueAccessor().value[field]), 10);
ko.utils.arrayForEach(comparisons, function(comparison) {
values.push(parseFloat(ko.utils.unwrapObservable(comparison[field]), 10));
});
} else {
numerator = parseFloat(ko.utils.unwrapObservable(valueAccessor().value), 10);
ko.utils.arrayForEach(comparisons, function(comparison) {
values.push(parseFloat(ko.utils.unwrapObservable(comparison), 10));
});
}
ko.utils.arrayForEach(values, function(value) {
sum += value;
});
max = Math.max.apply(Math, values);
if (max) {
result.value = numerator/max;
}
if (sum) {
result.percentage = numerator/sum;
}
return result;
}),
color = ko.utils.unwrapObservable(valueAccessor().color) || ko.bindingHandlers.kendoDataBar.defaultColor,
template = ko.utils.unwrapObservable(valueAccessor().template) || ko.bindingHandlers.kendoDataBar.defaultTemplate,
dataBar = ko.observable({
data: [data],
type: 'bar',
valueAxis: { min: 0, max: 1 },
series: [{ field: 'value', gap: 0, color: color }],
tooltip: { template: template }
});
ko.bindingHandlers.kendoSparkline.init(element, dataBar,
allBindingsAccessor, viewModel, bindingContext);
},
defaultColor: 0,
defaultTemplate: '#= kendo.format("{0:P}", dataItem.percentage) #'
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment