mesosteros mesosteros - 3 months ago 31
AngularJS Question

Conditional template if milliseconds are 000 or not in Kendo UI

I'm building a conditional template for my Kendo Scatter Chart, in which the y axis is a values axis and the x axis is the timestamp axis.

The tooltip that shows the value should also display the timestamp all the way until the milliseconds but it should be conditional: if the milliseconds are 000, I don't want to display them.

Example:
// If not 000

24/08/2016 - 14:22:15:313

// If 000

24/08/2016 - 14:21:54

My difficulty is in evaluating the current value ({0}, value.x) and then comparing it to '000'.

Here's where I am (Edited after ezanker's first answer):

template: function(dataItem) {
var tooltipTemplate = "<ul style='margin-left:-20px; margin-bottom:-1px;'>";
tooltipTemplate += "<li style='text-align: left;'>Value: ";
tooltipTemplate += dataItem.value.y;
tooltipTemplate += " (";
tooltipTemplate += $sce.trustAsHtml(getConversionString(sInfo.gaugeDesc[0].unit));
tooltipTemplate += ")</li>";
tooltipTemplate += "<li style='text-align: left;'>Date: ";

if(dataItem.value.x.getMilliseconds() > 0){
tooltipTemplate += kendo.toString(dataItem.value.x, "dd/MM/yyyy - hh:mm:ss:fff");
}
else{
tooltipTemplate += kendo.toString(dataItem.value.x, "dd/MM/yyyy - hh:mm:ss");
}
tooltipTemplate += "</li></ul>";
return tooltipTemplate;
}

Answer

If the x-axis is already a date you don't need the new Date or the Date.parse. If it is a string, then you only need one of those.

I find it easier to use a function for the template instead of the formatted string:

template: function(dataItem) {
    var tt = "<li style='text-align: left;'>Date: ";
     if (dataItem.value.x.getMilliseconds() > 0){
         tt += kendo.toString(dataItem.value.x, "dd/MM/yyyy - hh:mm:ss:fff");
     } else {
         tt += kendo.toString(dataItem.value.x, "dd/MM/yyyy - hh:mm:ss");;
     }
     tt += "</li><li style='text-align: left;'>Value: ";
     tt += dataItem.value.y;
     tt += "</li>";
     return tt;
 }

DEMO

Comments