/**
 * construct template html of hover over details window
 * @param: detailsObj: a JS object, with structure like: {data: payload.d, hasColorIcon: false}, data is the
 * required attribute of this object. payload is an object from dispatcher's call back function. payload.d
 * contains a single dLayout object, which contains details, the text content for details template, also may contain
 * other attribute like color, size etc
 */
export function renderTemplate(detailsObj){
    if (detailsObj.hasColorIcon){
        return `
         <div class="chart-details-content">
            <svg width="10" height="10"><rect width="10" height="10" fill="${detailsObj.data.color.value}"></rect></svg>
            <span class="details-text">${detailsObj.data.details}</span>
         </div>
        <svg class="details-point" width="25" height="16" ><polygon points="0,0 12.5,16 25,0" /></svg>
        `;
    }
    else{
        return `
        <div class="chart-details-content">${detailsObj.data.details}</div>
        <svg class="details-point" width="25" height="16" ><polygon points="0,0 12.5,16 25,0" /></svg>
        `;
    }

}