@domoinc/multiline-chart/bower_components/utilities/js/DomoFormattedNumberDirector.js

MultiLineChart - Domo Widget

//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// DomoFormatted Number Director:
// This util can append a Domo formatted number and set its contents.
//
// Example: (http://jsfiddle.net/chrisclm09/gXjB5/)
// var test = d3.select("#test");
// var t    = d3.appendDomoFormattedNumberTextElementToContainer(test);
// d3.setDomoFormattedTextElement(t, "$", 100000, 18, "DAYS", 10);
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------


//**********************************************************************************
// This function will append a text element to the given container with two
// inner tspans for formatting later.
//**********************************************************************************
d3.appendDomoFormattedNumberTextElementToContainer = function(container)
{
    var textElement = container.append("text");

    textElement.append("tspan").attr("id", "largeTspan").classed("largeTspan", true);

    textElement.append("tspan").attr("id", "smallTspan").classed("smallTspan", true);

    return textElement;
};

//**********************************************************************************
// This function will set a DomoFormattedTextElement's text and size.
// Prefix: Something to append to the front of the number, like $
// prefixSize: Size of the prefix text and the number.
// number: number to be show, this will be formatted.
// postfix: Something to be appended to the end of the number, like 'DAYS' or '%'
//          If there is no magnitude on the number i.e.:(10.0K) there will be no space
//          between the number and postfix: (10%) (10DAYS).
//          If there is a magnitude on the number a space will be added to separate
//          the magnitude and the postfix, as long as the postfix doesn't start with
//          a space.
//          Example: (magnitude, postfix) -> output
//          ''  , 'DAYS'  -> 10DAYS
//          'K' , 'DAYS'  -> 10K DAYS
//          ''  , ' DAYS' -> 10 DAYS
//          'K' , ' DAYS' -> 10K DAYS
// postfixSize: Size of the magnitude if appended and the postfix string.
//
// Example:
// (dom, '$', 1000, 18, 'USA', 10) -> "$1.00K USA"
//**********************************************************************************
d3.setDomoFormattedTextElement = function(domoElement, prefix, number, prefixSize, postfix, postfixSize)
{
    var largeTspan    = domoElement.select("#largeTspan");
    var smallTspan    = domoElement.select("#smallTspan");
    var numberAndUnit = service.summaryNumberToObject(number);

    largeTspan
        .style("font-size", (prefixSize + 'px'))
        .text(prefix + String(numberAndUnit.prefix));

        // smallTspan
        // .style("font-size", postfixSize)
        // .text(numberAndUnit.magnitude +
        //       ((numberAndUnit.magnitude == '' ||
        //        (postfix && postfix.length && postfix[0] == ' ')) ? '' : ' ') +
        //       postfix);


    smallTspan
        .style("font-size", (postfixSize + 'px'))
        .text(numberAndUnit.magnitude + ' ' + postfix);
};



//**********************************************************************************
// Return a str formatted number.
// Example:
// 1000 -> '1.00K'
//**********************************************************************************
d3.DomoFormatNumber = function (val)
{
    return service.summaryNumber(val);
}