export function renderTemplate(data){

    const hasTitle = (data.title !== undefined && data.title !== null && data.title !== ""),
        hasDescription = (data.description !== undefined && data.description !== null && data.description !== "")
    ;

    let chartVizGroup = `<div class="chart-viz-group">`,
        svgElmt = `<svg role="img" ></svg>`
    ;

    if (hasTitle || hasDescription) {

        const labelArray = [],
            elementArray = []
        ;

        if (hasTitle) {
            const titleId = `${data.id}-title`;
            labelArray.push(titleId);
            elementArray.push(`<title id="${titleId}">${data.title}</title>`);
        }

        if (hasDescription) {
            const descriptionId = `${data.id}-desc`;
            labelArray.push(descriptionId);
            elementArray.push(`<desc id="${descriptionId}">${data.description}</desc>`);
        }

        svgElmt = `
            <svg role="img" aria-labelledby="${labelArray.join(" ")}" >
                ${elementArray.join(" ")}
            </svg>
            `;
    }

    if (data.isFocusable){
        chartVizGroup = `<div class="chart-viz-group" tabindex="0" focusable="true">`;
    }

    chartVizGroup = chartVizGroup + `
            <canvas></canvas>
            ${svgElmt}
        </div>
        `;

    return `
    <div class="chart-main">
        <div class="chart-content">
            <div class="chart-viz">
                ${chartVizGroup}
            </div>
            <div class="chart-annotation"></div>
            <div class="chart-details details-above"></div>
        </div>
        <div class="chart-legends">
            <div class="chart-legend-structure">
                <div class="chart-legend-container"></div>
            </div>
        </div>
    </div>
    `;
}