SplitBarChartTemplate

Id: 9D7BFB1F-9C66-4DE7-9B35-C459A6C606AA
Configurable: no — system template
Company: 6E919CFE-74DD-4EBC-8665-3C0D44866649
Created: 2023-09-15 16:16:58.450000
Updated: —

HTML body (19746 chars)

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="x-apple-disable-message-reformatting"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Account Welcome</title><style type="text/css">a{text-decoration:none;outline:0}@media (max-width:649px){.o_col-full{max-width:100%!important}.o_col-half{max-width:50%!important}.o_hide-lg{display:inline-block!important;font-size:inherit!important;max-height:none!important;line-height:inherit!important;overflow:visible!important;width:auto!important;visibility:visible!important}.o_hide-xs,.o_hide-xs.o_col_i{display:none!important;font-size:0!important;max-height:0!important;width:0!important;line-height:0!important;overflow:hidden!important;visibility:hidden!important;height:0!important}.o_xs-center{text-align:center!important}.o_xs-left{text-align:left!important}.o_xs-right{text-align:left!important}table.o_xs-left{margin-left:0!important;margin-right:auto!important;float:none!important}table.o_xs-right{margin-left:auto!important;margin-right:0!important;float:none!important}table.o_xs-center{margin-left:auto!important;margin-right:auto!important;float:none!important}h1.o_heading{font-size:32px!important;line-height:41px!important}h2.o_heading{font-size:26px!important;line-height:37px!important}h3.o_heading{font-size:20px!important;line-height:30px!important}.o_xs-py-md{padding-top:24px!important;padding-bottom:24px!important}.o_xs-pt-xs{padding-top:8px!important}.o_xs-pb-xs{padding-bottom:8px!important}}@media screen{@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.o_heading,.o_sans{font-family:Roboto,sans-serif!important}.o_heading,b,strong{font-weight:700!important}a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important}}</style></head><body class="o_body o_bg-light" style="width:100%;margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#dbe5ea"><table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"><tbody><tr><td class="o_hide" align="center" style="display:none;font-size:0;max-height:0;width:0;line-height:0;overflow:hidden;mso-hide:all;visibility:hidden">Email Summary (Hidden)</td></tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"><tbody><tr><td class="o_bg-light o_px-xs o_pt-lg o_xs-pt-xs" align="center" style="background-color:#dbe5ea;padding-left:8px;padding-right:8px;padding-top:32px"><table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:632px;margin:0 auto"><tbody><tr><td class="o_bg-primary o_px o_py-md o_br-t o_sans o_text" align="center" style="font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;font-size:16px;line-height:24px;background-color:#126de5;border-radius:4px 4px 0 0;padding-left:16px;padding-right:16px;padding-top:24px;padding-bottom:24px"><p style="margin-top:0;margin-bottom:0"><a class="o_text-white" style="text-decoration:none;outline:0;color:#fff"><img src="##CompanyLogo##" width="136" height="36" style="max-width:136px;-ms-interpolation-mode:bicubic;vertical-align:middle;border:0;line-height:100%;height:auto;outline:0;text-decoration:none"></a></p></td></tr></tbody></table></td></tr></tbody></table><script src="https://d3js.org/d3.v4.js"></script><div id="chart"></div><div id="tooltip"></div><script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script><script>var maxProd = 1;
         var myData = [];
         var dataFromDB = ##splitBarChartJson##;
         var subGroups = [];
         
         convertDataToD3Format(dataFromDB);
         createChart(dataFromDB);
         
         function convertDataToD3Format(data) {
                 var dataSet = data;
         		var maxProdValue = [];
                 if (dataSet && dataSet.length > 0) {
                     dataSet.forEach(x => {
                         var obj = {};
                         var names = x.ConfigurationName.split(",");
                         var values = x.ConfigurationTime.split(",");
                         obj["dateName"] = x.DateName;
                         obj["originalSpentTime"] = x.OriginalSpentTime;
         				obj["bugsCountText"] = x.BugsCountText;
                         names.forEach((y, i) => {
                             obj[y] = values[i];
         					maxProdValue.push(parseFloat(values[i]));
                         });
         				maxProdValue.push(x.OriginalSpentTime);
                         myData.push(obj);
                     });
         			subGroups = dataSet[0].ConfigurationName.split(",");
                     maxProd = Math.max(...maxProdValue);
         			if (maxProd == 0)
         				maxProd = 1;
                 }
         		else
         			maxProd = 1;
             }
         
         function createChart(data) {
         		var color = d3.scaleOrdinal()
         						.domain(subGroups)
         						.range(["blue","#d2691e","orange","#6554c0","red","#ff5630","#00b8d9","#04fe02","#757575"]);
         	
         		var stackedData = d3.stack()
         							.keys(subGroups)	
         							(myData)						
                 d3.select("#chart").select("svg").remove();
                 var margin = { top: 30, right: 30, bottom: 70, left: 60 },
                     width = 360 - margin.left - margin.right,
                     height = 300 - margin.top - margin.bottom;
         
                 var tooltip = d3.select("#toolTip").attr("class", "toolTip");
         
                 var svg = d3.select("#chart")
                     .classed("svg-container", true)
                     .append("svg")
                     .attr("preserveAspectRatio", "xMinYMin meet")
                     .attr("viewBox", "0 0 900 400")
                     .classed("svg-content-responsive", true)
                     .append("g")
                     .attr("transform",
                         "translate(280,30)");
         
                 var x = d3.scaleBand()
                     .range([0, width])
                     .domain(myData.map(function (d) { return d.dateName; }))
                     .padding(0.4);
         
                 svg.append("g")
                     .attr("transform", "translate(0,200)")
                     .call(d3.axisBottom(x))
                     .selectAll("text")
                     .attr("transform", "translate(-10,0)rotate(-45)")
                     .style("text-anchor", "end");
         
                 svg.append("text")
                     .attr("x", 135)
                     .attr("y", 270)
                     .style("text-anchor", "middle")
                     .text("Time period");
         		
         		// Right side text
         		svg.append("text")
                     .attr("x", 365)
                     .attr("y", 20)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Original spent time")
         			.attr("fill","green");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 35)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Test case created/updated")
         			.attr("fill","blue");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 50)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Scenario created/updated")
         			.attr("fill","#d2691e");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 65)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Run created/updated")
         			.attr("fill","orange");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 80)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Test case status updated")
         			.attr("fill","#6554c0");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 95)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Bugs created/updated")
         			.attr("fill","red");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 110)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Version created/updated")
         			.attr("fill","#ff5630");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 125)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Test report created/updated")
         			.attr("fill","#00b8d9");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 140)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Test case viewed")
         			.attr("fill","#04fe02");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 155)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Scenario section created/updated")
         			.attr("fill","#757575");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 170)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text("Bugs created today")
         			.attr("fill","red");
         		// Right side text
         		svg.append("text")
                     .attr("x", 362)
                     .attr("y", 185)
                     .style("text-anchor", "middle")
         			.style("font-size","8")
                     .text(data[0].BugsCountText)
         			.attr("fill","red");
         
                 var y = d3.scaleLinear()
                     .domain([0, maxProd])
                     .range([height, 0]);
         
                 svg.append("g")
                     .call(d3.axisLeft(y));
         
                 svg.append("text")
                     .attr("transform", "rotate(-90)")
                     .attr("y", -50)
                     .attr("x", -105)
                     .attr("dy", "1em")
                     .style("text-anchor", "middle")
                     .text("Effective spent time (hr)");
         		
         		svg.selectAll("mybar1")
                     .data(myData)
                     .enter()
                     .append("rect")
                     .attr("x", function (d) { 
         				return x(d["dateName"]); 
         				})
                     .attr("y", function (d) { 
         				return y(0); 
         				})
                     .attr("width", 10)
                     .attr("height", function (d) { 
         				return height - y(0); 
         				})
                     .attr("fill", "green")
         
         		// Tooltip
                 svg.selectAll("rect")
                     .data(myData)
                     .on("mousemove", function (d) {
                         tooltip
                             .style("left", d3.event.pageX - 50 + "px")
                             .style("top", d3.event.pageY - 70 + "px")
                             .style("display", "inline-block")
                             .html(("Day: " + d["dateName"]) + "<br>" + "Effective spent time: " + (d["originalSpentTime"]));
                     })
                     .on("mouseout", function (d) { tooltip.style("display", "none"); });
         
                 svg.selectAll("rect")
                     .attr("y", function (d) { return y(d["originalSpentTime"]); })
                     .attr("height", function (d) { return height - y(d["originalSpentTime"]); })
         			
         
         		// Show the bars			
         			svg.append("g")
         				.selectAll("g")
         				.data(stackedData)
         				.enter().append("g")
         				.attr("fill", function(d) { 
         					return color(d.key); 
         				})
         				.selectAll("rect")
         				.data(function(d) { 
         					return d; 
         				})
         				.enter().append("rect")
         				.attr("x", function(d) { 
         					return x(d.data.dateName); 
         				})
         				.attr("y", function(d) { 
         					return y(d[1]); 
         				})
         				.attr("height", function(d) { 
         					return y(d[0]) - y(d[1]); 
         				})
         				.attr("width",10)
         				.attr("transform",
                         "translate(11,0)")
             }</script><table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation"><tbody><tr><td class="o_bg-light o_px-xs o_pb-lg o_xs-pb-xs" align="center" style="background-color:#dbe5ea;padding-left:8px;padding-right:8px;padding-bottom:32px"><table class="o_block" width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:632px;margin:0 auto;background-color:#242b3d"><tbody><tr><td class="o_bg-white o_br-b o_sans" style="font-size:8px;line-height:8px;height:8px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;background-color:#fff;border-radius:0 0 4px 4px">&nbsp;</td></tr><tr><td class="o_re o_px o_pb-lg" align="center" style="font-size:0;vertical-align:top;padding-left:16px;padding-right:16px;padding-bottom:32px"><div class="o_col o_col-4" style="display:inline-block;vertical-align:top;width:100%;max-width:400px"><div style="font-size:32px;line-height:32px;height:32px">&nbsp;</div><div class="o_px-xs o_sans o_text-xs o_text-dark_light o_left o_xs-center" style="font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;font-size:14px;line-height:21px;color:#a0a3ab;text-align:left;padding-left:8px;padding-right:8px"><p class="o_mb-xs" style="margin-top:0;margin-bottom:8px">© 2008-2020 Snovasys. All rights reserved</p><p class="o_mb-xs" style="margin-top:0;margin-bottom:8px">(+44) 07944 144 944 - info@snovasys.com</p><p class="o_mb-xs" style="margin-top:0;margin-bottom:8px">Vista Centre 50 Salisbury Road London - TW4 6JQ</p><p style="margin-top:0;margin-bottom:0">Learn more at <a class="o_text-dark_light o_underline" href="##Registersite##" style="text-decoration:underline;outline:0;color:#dbe5ea">snovasys.com</a></p></div></div><div class="o_col o_col-2" style="display:inline-block;vertical-align:top;width:100%;max-width:200px"><div style="font-size:32px;line-height:32px;height:32px">&nbsp;</div><div class="o_px-xs o_sans o_text-xs o_text-dark_light o_right o_xs-center" style="font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;font-size:14px;line-height:21px;color:#a0a3ab;text-align:right;padding-left:8px;padding-right:6px"><p style="margin-top:0;margin-bottom:0"><a class="o_text-dark_light" href="https://www.facebook.com/snovasys" style="text-decoration:none;outline:0;color:#a0a3ab"><img src="https://i.stack.imgur.com/Xu3X2.png" width="36" height="36" alt="fb" style="max-width:36px;-ms-interpolation-mode:bicubic;vertical-align:middle;border:0;line-height:100%;height:auto;outline:0;text-decoration:none"></a><span>&nbsp;</span> <a class="o_text-dark_light" href="https://twitter.com/snovasys" style="text-decoration:none;outline:0;color:#a0a3ab"><img src="https://i.stack.imgur.com/elPSB.png" width="36" height="36" alt="tw" style="max-width:36px;-ms-interpolation-mode:bicubic;vertical-align:middle;border:0;line-height:100%;height:auto;outline:0;text-decoration:none"></a><span>&nbsp;</span> <a class="o_text-dark_light" href="https://www.linkedin.com/company/snovasys/" style="text-decoration:none;outline:0;color:#a0a3ab"><img src="https://i.stack.imgur.com/vBBlN.png" width="36" height="36" alt="ig" style="max-width:36px;-ms-interpolation-mode:bicubic;vertical-align:middle;border:0;line-height:100%;height:auto;outline:0;text-decoration:none"></a><span>&nbsp;</span></p></div></div></td></tr></tbody></table><div class="o_hide-xs" style="font-size:64px;line-height:64px;height:64px">&nbsp;</div></td></tr></tbody></table></body></html>

Save note (optional, shown in version history)

Reset

Rendered preview — preview as

Version history (0 most recent)

Saved at	By	Size	Note
No saved versions yet. Each Save will record one.

SplitBarChartTemplate

HTML body (19746 chars)

Rendered preview — preview as unfilled (placeholders visible)

Version history (0 most recent)

Rendered preview — preview as