' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n // }\n if(this.statename == \"Andaman and Nicobar Islands\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n \n if (d.id == \"Andaman and Nicobar Islands\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Andaman and Nicobar Islands\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Andaman and Nicobar Islands\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Andhra Pradesh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n \n if (d.id == \"Andhra Pradesh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Andhra Pradesh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Andhra Pradesh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Arunachal Pradesh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n \n if (d.id == \"Arunachal Pradesh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Arunachal Pradesh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Arunachal Pradesh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Assam\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Assam\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Assam\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Assam\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Bihar\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Bihar\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Bihar\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Bihar\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Chandigarh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Chandigarh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Chandigarh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Chandigarh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Chhattisgarh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Chhattisgarh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Chhattisgarh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Chhattisgarh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Dadra and Nagar Haveli\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n \n if (d.id == \"Dadra and Nagar Haveli\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Dadra and Nagar Haveli\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Dadra and Nagar Haveli\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n\n if(this.statename == \"Daman and Diu\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Daman and Diu\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Daman and Diu\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Daman and Diu\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Delhi\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Delhi\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Delhi\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Delhi\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Goa\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Goa\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Goa\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Goa\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Gujarat\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Gujarat\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Gujarat\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Gujarat\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Haryana\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Haryana\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Haryana\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Haryana\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Himachal Pradesh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Himachal Pradesh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Himachal Pradesh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Himachal Pradesh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Jammu and Kashmir\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Jammu and Kashmir\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Jammu and Kashmir\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Jammu and Kashmir\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Jharkhand\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Jharkhand\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Jharkhand\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Jharkhand\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Karnataka\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Karnataka\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Karnataka\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Karnataka\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n\n if(this.statename == \"Kerala\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Kerala\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Kerala\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Kerala\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n if(this.statename == \"Ladakh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Ladakh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Ladakh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Ladakh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n if(this.statename == \"Lakshadweep\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Lakshadweep\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Lakshadweep\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Lakshadweep\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n if(this.statename == \"Madhya Pradesh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Madhya Pradesh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Madhya Pradesh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Madhya Pradesh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n if(this.statename == \"Maharashtra\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Maharashtra\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Maharashtra\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Maharashtra\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n if(this.statename == \"Manipur\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Manipur\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Manipur\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Manipur\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Meghalaya\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Meghalaya\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Meghalaya\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Meghalaya\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Mizoram\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Mizoram\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Mizoram\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Mizoram\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Nagaland\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Nagaland\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Nagaland\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Nagaland\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Odisha\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Odisha\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Odisha\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Odisha\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Puducherry\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Puducherry\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Puducherry\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Puducherry\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Punjab\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Punjab\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Punjab\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Punjab\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Rajasthan\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Rajasthan\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Rajasthan\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Rajasthan\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Sikkim\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Sikkim\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Sikkim\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Sikkim\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Tamil Nadu\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Tamil Nadu\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Tamil Nadu\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Tamil Nadu\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Telangana\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Telangana\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Telangana\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Telangana\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Tripura\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Tripura\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Tripura\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Tripura\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Uttar Pradesh\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Uttar Pradesh\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Uttar Pradesh\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Uttar Pradesh\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"Uttarakhand\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"Uttarakhand\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"Uttarakhand\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"Uttarakhand\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n if(this.statename == \"West Bengal\"){\n // features.features= features.features.filter(e => e.state_name == this.statename);\n svg.append(\"g\")\n .attr(\"class\", \"bubble\")\n .selectAll(\"circle\")\n .data(features.features)\n .enter().append(\"circle\")\n .attr(\"transform\", function (d: any) {\n console.log(\"check\", d)\n if (d.id == \"West Bengal\") {\n return \"translate(\" + path.centroid(d) + \")\";\n }\n })\n .attr(\"r\", 14)\n .attr(\"r\", function (d: any) {\n if (d.id == \"West Bengal\") {\n return radius(d.details.tot_total) \n }\n \n })\n .style(\"fill\", function (d) {\n if (d.id == \"West Bengal\") {\n return '#1C2039';//on condition match\n\n } \n })\n \n .attr(\"stroke\", function (d: any) {\n if (d.details.tot_total > 0) { return '#1C2039'} else { return \"none\" }\n })\n .attr(\"stroke-width\", 15)\n .attr('stroke-opacity', .5)\n .on('mousemove', function (event, d: any) {\n // console.log(\"mouse\", d)\n d3.select(this)\n\n tooltip.html(' ' + d.id + ' ' +\n '
Dose One '+'
' + d.details.dose1.toLocaleString('en-IN') + '' +\n '
Dose Two ' + '
' + d.details.dose2.toLocaleString('en-IN') + '' +\n '
Precaution Dose ' + '
' + d.details.precaution_dose.toLocaleString('en-IN') + '' +\n '')\n .style(\"left\", (event.pageX + 50) + \"px\")\n .style(\"top\", (event.pageY - 30) + \"px\")\n // d3.select(\"tooltip\").html(\"\"+(d.id + \" : \" + d.details.total)+\"\")\n .style(\"cursor\", \"default\")\n\n })\n .on(\"mouseover \", function (d) {\n tooltip.style(\"opacity\", 1)\n })\n .on(\"mouseleave\", function (d) {\n tooltip.style(\"opacity\", 0)\n })\n \n }\n \n \n // ------------legend------------\n\n var radius1 = d3.scaleSqrt()\n .domain([0, 1e6])\n .range([0, 15]);\n\n const xCircle = 40\n const xLabel = 90\n\n const valueExtent = d3.extent(data, (d: any) => +d.total)\n console.log(\"valueExtent\", valueExtent)\n var size = d3.scaleSqrt()\n .domain([1, 100]) // What's in the data\n .range([1, 500]) // Size in pixel\n\n var legend = svg.append(\"g\")\n .attr(\"class\", \"legend\")\n // .attr(\"transform\", \"translate(\" + (this.width - 90) + \",\" + (this.height - 50) + \")\")\n // .attr(\"transform\", \"translate(\" + (400) + \",\" + (490) + \")\")\n .attr(\"transform\", \"translate(\" + (1) + \",\" + (545) + \")\")\n .selectAll(\"g\")\n // .data([10000, 500000, 10000000])\n .data([1e6, 3e6, 6e6])\n\n .enter().append(\"g\");\n\n legend.append(\"circle\")\n .attr(\"cx\", xCircle)\n .attr(\"cy\", function (d) { return -radius1(d); })\n // .attr(\"cy\", function(d){ \n\n // return this.height - size(d) } )\n .attr(\"r\", function (d) { return size(d) })\n .style(\"fill\", \"none\")\n .attr(\"stroke\", \"#A8B8E2\")\n\n\n .attr(\"r\", function (d) {\n console.log(\"r\", d)\n return radius1(d)\n });\n\n legend.append(\"text\")\n .attr(\"y\", function (d) {\n\n return -2 * radius1(d);\n })\n .attr(\"dy\", \"1.5em\")\n .attr(\"dx\", \"3.6em\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"text-anchor\", \"middle\")\n .style(\"text-color\", \"white\")\n .style(\"fill\", \"#A8B8E2\")\n .text(d3.format(\".1s\"));\n\n\n }\n\n drawEmptyMap(world: any) {\n console.log(world)\n const svg = d3.select('#my_dataviz1').append('svg')\n\n .attr('width', this.width).attr('height', this.height);\n const path: any = d3.geoPath(null);\n var features: any = topojson.feature(world, world.objects.states);\n svg.selectAll('path').data(features.features).enter().append('path').\n attr('class', 'state').attr('d', path)\n .style(\"fill\", \"#A8B8E2\")\n .style(\"stroke\", \"#FFFFFF\")\n .attr(\"preserveAspectRatio\", \"xMinYMin meet\")\n .attr(\"viewBox\", \"0 0 600 400\")\n .attr(\"id\", function (d: any) {\n // console.log(\"dh\", d)\n return d.id;\n })\n\n\n .attr(\"d\", path)\n }\n getStatename(state = \"\") {\n this.statename = state;\n console.log(\"this.statename \", this.statename)\n this.publicReportService.getPublicReports('', '', this.todaysdate).subscribe((res: any) => {\n if (res) {\n this.VaccData = res.getBeneficiariesGroupBy;\n console.log(\"this.VaccData \", this.VaccData.length)\n const totalVac = this.VaccData.reduce((sum: number, v: any) => {\n return sum + parseInt(v.total);\n }, 0)\n\n this.bubbleData = this.VaccData.map((vacc: any) => {\n return {\n total: vacc.total,\n }\n\n });\n\n Promise.all([\n d3.json('../../../assets/json/states.json'),\n d3.json('../../../assets/json/sample.json')\n\n\n ]).then(([data1, data2]) => {\n // const countries = topojson.feature(data1, data1.objects.states);\n\n this.drawBubbleMap(data1, this.VaccData);\n\n\n }).catch(err => console.log('checkong d3 map'))\n } else {\n\n }\n\n });\n }\n\n\n}\n","
\n
\n","const BASE_URL = 'https://cdndemo-api.co-vin.in';\nconst DIRECT_BASE_URL = 'https://cdndemo-api.co-vin.in';\n\nconst API_ADMIN_PORT = ``;\nconst API_AUTH_PORT = ``;\nconst API_USER_PORT = ``;\nconst API_REGISTRATION_PORT = ``;\nconst API_SESSION_PORT = ``;\nconst API_REPORTS_PORT = ``;\nconst SELF_REGISTRATION_URL = `https://selfregistration.demo.co-vin.in`;\n\nexport const environment = {\n production: false,\n defaultLanguage: 'en',\n supportedLanguages: [\n { id: 'en', name: 'English', regional: 'English' },\n { id: 'hi', name: 'Hindi', regional: 'हिंदी' },\n { id: 'mr', name: 'Marathi', regional: 'मराठी' },\n { id: 'ml', name: 'Malayalam', regional: 'മലയാളം' },\n { id: 'pb', name: 'Punjabi', regional: 'ਪੰਜਾਬੀ' },\n { id: 'te', name: 'Telugu', regional: 'తెలుగు' },\n { id: 'gu', name: 'Gujarati', regional: 'ગુજરાતી' },\n { id: 'as', name: 'Assamese', regional: 'অসমীয়া' },\n { id: 'be', name: 'Bengali', regional: 'বাংলা' },\n { id: 'ka', name: 'Kannada', regional: 'ಕನ್ನಡ' },\n { id: 'or', name: 'Odia', regional: 'ଓଡିଆ' },\n { id: 'ta', name: 'Tamil', regional: 'தமிழ்' },\n ],\n session_prefix_url_port: `${BASE_URL}:9005`,\n session_prefix_url: `${BASE_URL}${API_SESSION_PORT}/api/v1/session`,\n admin_prefix_url: `${BASE_URL}${API_ADMIN_PORT}/api/v1/admin`,\n auth_prefix_url: `${BASE_URL}${API_AUTH_PORT}/api/v1/auth`,\n user_prefix_url: `${BASE_URL}${API_USER_PORT}/api/v1/user`,\n beneficiary_registration_prefix_url: `${BASE_URL}${API_REGISTRATION_PORT}/api/v1/registration`,\n admin_prefix_direct_url: `${DIRECT_BASE_URL}${API_ADMIN_PORT}/api/v1/admin`,\n beneficiary_registration_prefix_direct_url: `${DIRECT_BASE_URL}${API_REGISTRATION_PORT}/api/v1/registration`,\n report_prefix_direct_url: `${BASE_URL}${API_REPORTS_PORT}/api/v1/reports`,\n rd_device_prefix_url: `https://localhost:`,\n recaptcha_site_key: '6LdNBNUZAAAAAAYITU9accPJNhMSzHMsuqc99RPE',\n selfregistration: `${SELF_REGISTRATION_URL}`,\n isUat: false,\n chatboturl: 'https://covid19-staging.nhp.gov.in:80/vaccinator/',\n isProduction: false,\n env: 'OtherEnv',\n apkVersion: '3.0',\n AppRedirectUrls: {\n admin: 'https://admin.demo.co-vin.in',\n webApp: 'https://app.demo.co-vin.in',\n selfReg: 'https://selfregistration.demo.co-vin.in/',\n trackReg: 'https://selfregistration.demo.co-vin.in/applicationtracker',\n certificate: 'http://selfregistration.demo.co-vin.in/vaccination-certificate',\n dashboard: 'https://dashboard.demo.co-vin.in',\n international: 'https://sandbox.demo.co-vin.in',\n verifyCertificate: 'https://verify.cowin.gov.in/',\n dashboardInd: 'https://dashboard.demo.co-vin.in',\n mainPage: 'https://demo.co-vin.in',\n },\n playStoreUrl: {\n android: 'https://play.google.com/store/apps/details?id=com.cowinapp.app',\n ios: '',\n },\n socket_live_counter_url_port: `wss://websocketprod.co-vin.in`,\n socket_live_counter_url_port_age: `wss://websocketvaccprod.co-vin.in`,\n ENV: \"SIT\"\n};\n","import { WebSocketService } from './../../modules/services/websocket.service';\nimport { NumberFormatPipe } from '../../modules/pipe/number-format.pipe';\nimport { switchMap, startWith } from 'rxjs/operators';\nimport { PublicReportService } from '../../modules/services/public-report.service';\nimport { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';\nimport * as $ from 'jquery';\nimport { ChartDataSets, ChartLegendItem, ChartOptions, ChartType, Chart } from 'chart.js';\nimport * as _ from 'lodash';\nimport * as _moment from 'moment';\nconst moment = _moment;\nimport { DeviceDetectorService } from 'ngx-device-detector';\nimport { Observable } from 'rxjs';\n// import { Console } from 'console';\nimport { DatePipe } from '@angular/common';\nimport { TranslateService } from '@ngx-translate/core';\nimport * as Excel from 'exceljs/dist/exceljs.min.js'\nimport * as fs from 'file-saver';\nimport { saveAs } from 'file-saver';\nimport { interval, Subscription } from 'rxjs';\nimport { environment } from 'src/environments/environment';\nimport { HeatmapBubbleComponent } from '../heatmap-bubble/heatmap-bubble.component';\n@Component({\n selector: 'app-new-main-dashboard',\n templateUrl: './new-main-dashboard.component.html',\n styleUrls: ['./new-main-dashboard.component.scss']\n})\nexport class NewMainDashboardComponent implements OnInit {\n @ViewChild(HeatmapBubbleComponent) Heatmap: HeatmapBubbleComponent;\n @Output() clickevent = new EventEmitter();\n selectedTabLabel = '';\n headerTextLbl = 'State';\n state_id;\n district_id;\n todaysdate;\n reportData;\n ReportGenerateTime;\n topBlockReport;\n liveVaccData\n vaccinatedAefiPer;\n lineChartDataNew;\n realTimeChart;\n isday = true;\n ismonth = false;\n isweek;\n isByAge;\n isByDoses = true;\n realTimeChartlast30days;\n last30DaysVaccinationData;\n weeklyReportData;\n realTimeChartweek;\n isdayVaccAge = false;\n ismonthVaccAge = false;\n isweekVaccAge = false;\n vaccinationAgeDataToday;\n vaccinationAgeChartToday;\n vaccinationAgeChartMonth;\n vaccinationAgeDataMonth;\n vaccinationAgeDataAll;\n vaccinationAgeChartAll;\n liveVaccinationCounter: any;\n webSocketCounter: any;\n totalVaccinationCounter: any = 0;\n partialVaccinationCounter: any = 0;\n fullyVaccinationCounter: any = 0;\n totalRegistrationCounter: any = 0;\n intervalSub$: Subscription = new Subscription();\n hideWebSocketCounter = true;\n suffix = 'IND';\n liveVaccChart;\n liveVaccChartStreaming;\n prevsData;\n updateCountTotalVacc = 0;\n liveVaccChartStreamingRegistration;\n prevsRegData;\n updateCountTotalReg = 0;\n liveVaccChartStreamingPartialVacc;\n prevsPartialVaccData;\n updateCountPartialVacc = 0;\n liveVaccChartStreamingFullyVacc;\n prevsFullyVaccData;\n updateCountFullyVacc = 0;\n updateInterval = 300;\n numberOfElements = 10;\n options: any = {\n useGrouping: false,\n formattingFn: (n: number) => n.toLocaleString('en-IN')\n }\n vaccinationByAgeChart;\n vaccinationByAgeChartData;\n genderVaccPieChart;\n materialVaccPieChart;\n materialVaccPieChartnew;\n genderVaccPieChartNew;\n vaccinationByAgeChartNew;\n states;\n // districtListfromstate = [];\n // districtList;\n stateId;\n district;\n chartFlag;\n registartionChartDataMonth: any;\n isdayReg: boolean;\n ismonthReg: boolean;\n isweekReg: boolean;\n registartionChartMonth: any;\n registartionChartDataAll: any;\n registartionChartAll: any;\n registartionChart: any;\n registartionChartData: any;\n isdayVacc: boolean;\n ismonthVacc: boolean;\n isweekVacc: boolean;\n vaccinationAEFIChart: any;\n vaccinationAEFIChartData: any;\n vaccinationByCategoryChart: any;\n vaccinationByCategoryData: any;\n secondHalf: any;\n getVaccinationByStateUTData: any;\n doughnutChartForTable: any;\n chartStateId: any;\n chartDose_1: any;\n chartDose_2: any;\n chartTotal: any;\n dynamicId: string;\n charts = [];\n semesters: number[];\n stateArr: any;\n dose_1: any;\n // states: { state_id: number; state_code: string; state_name: string; }[];\n districtListfromstate: any;\n districtList: any;\n collapseId: any;\n iconClass: boolean = false;\n hideShowFilter: boolean = false;\n FilterIcon: boolean = false;\n districtListnew;\nsession_site_id\n hideShowExport: boolean;\n isState: string;\n isDistrict: string;\n DownlloadVaccinationDoneByTime: any;\n DownlloadVaccinationDoneByTimeAgeWise: any;\n DownlloadImeWiseTodayRegReport: any;\n DownlloadLast30DaysAefi: any;\n DownlloadVaccinationByAge: any;\n Downloadlast30DaysVaccination: any;\n DownloadweeklyReport: any;\n Downloadlast30DaysAgeWiseVaccination: any;\n DownloadweeklyVacAgeWiseReport: any;\n DownloadRegReportData: any;\n DownloadRegWeekReportData: any;\n getBeneficiariesGroupBy: any;\n vaccinationByAgefinalResult: any = [];\n downloadExcelHeader;\n downloadExcelHeaderForCoverage: string;\n vaccinationCoverageByStateChartData: any;\n tableheader: any;\n exportIcon: boolean;\n statename;\n total12_14Vaccination: any = 0;\n total15_17Vaccination: any = 0;\ntotal18_44Vaccination: any = 0;\ntotal45_60Vaccination: any = 0;\ntotalabove_60Vaccination: any = 0;\ntotal_hcw_flw_precaution_vaccinations: any = 0;\ntotal_60_plus_precaution_vaccinations: any = 0;\nstatedistrict:any;\n constructor(private publicReportService: PublicReportService,\n public deviceService: DeviceDetectorService,\n public datepipe: DatePipe,\n public numberFormatPipe: NumberFormatPipe,\n private translate: TranslateService,\n private webSocket: WebSocketService) { }\n\n ngOnInit(): void {\n this.todaysdate = new Date();\n this.todaysdate = this.datepipe.transform(this.todaysdate, 'yyyy-MM-dd');\n this.states = [\n {\n \"state_id\": 1,\n \"state_code\": \"AN\",\n \"state_name\": \"Andaman and Nicobar Islands\"\n },\n {\n \"state_id\": 2,\n \"state_code\": \"AP\",\n \"state_name\": \"Andhra Pradesh\"\n },\n {\n \"state_id\": 3,\n \"state_code\": \"AR\",\n \"state_name\": \"Arunachal Pradesh\",\n\n },\n {\n \"state_id\": 4,\n \"state_code\": \"AS\",\n \"state_name\": \"Assam\"\n },\n {\n \"state_id\": 5,\n \"state_code\": \"BR\",\n \"state_name\": \"Bihar\"\n },\n {\n \"state_id\": 6,\n \"state_code\": \"CH\",\n \"state_name\": \"Chandigarh\"\n },\n {\n \"state_id\": 7,\n \"state_code\": \"CG\",\n \"state_name\": \"Chhattisgarh\"\n },\n {\n \"state_id\": 8,\n \"state_code\": \"DH\",\n \"state_name\": \"Dadra and Nagar Haveli\"\n },\n {\n \"state_id\": 37,\n \"state_code\": \"DD\",\n \"state_name\": \"Daman and Diu\"\n },\n {\n \"state_id\": 9,\n \"state_code\": \"DL\",\n \"state_name\": \"Delhi\"\n },\n {\n \"state_id\": 10,\n \"state_code\": \"GA\",\n \"state_name\": \"Goa\"\n },\n {\n \"state_id\": 11,\n \"state_code\": \"GJ\",\n \"state_name\": \"Gujarat\"\n },\n {\n \"state_id\": 12,\n \"state_code\": \"HR\",\n \"state_name\": \"Haryana\"\n },\n {\n \"state_id\": 13,\n \"state_code\": \"HP\",\n \"state_name\": \"Himachal Pradesh\"\n },\n {\n \"state_id\": 14,\n \"state_code\": \"JK\",\n \"state_name\": \"Jammu and Kashmir\"\n },\n {\n \"state_id\": 15,\n \"state_code\": \"JH\",\n \"state_name\": \"Jharkhand\"\n },\n {\n \"state_id\": 16,\n \"state_code\": \"KA\",\n \"state_name\": \"Karnataka\"\n },\n {\n \"state_id\": 17,\n \"state_code\": \"KL\",\n \"state_name\": \"Kerala\"\n },\n {\n \"state_id\": 18,\n \"state_code\": \"LA\",\n \"state_name\": \"Ladakh\"\n },\n {\n \"state_id\": 19,\n \"state_code\": \"LD\",\n \"state_name\": \"Lakshadweep\"\n },\n {\n \"state_id\": 20,\n \"state_code\": \"MP\",\n \"state_name\": \"Madhya Pradesh\"\n },\n {\n \"state_id\": 21,\n \"state_code\": \"MH\",\n \"state_name\": \"Maharashtra\"\n },\n {\n \"state_id\": 22,\n \"state_code\": \"MN\",\n \"state_name\": \"Manipur\"\n },\n {\n \"state_id\": 23,\n \"state_code\": \"ML\",\n \"state_name\": \"Meghalaya\"\n },\n {\n \"state_id\": 24,\n \"state_code\": \"MZ\",\n \"state_name\": \"Mizoram\"\n },\n {\n \"state_id\": 25,\n \"state_code\": \"NL\",\n \"state_name\": \"Nagaland\"\n },\n {\n \"state_id\": 26,\n \"state_code\": \"OD\",\n \"state_name\": \"Odisha\"\n },\n {\n \"state_id\": 27,\n \"state_code\": \"PY\",\n \"state_name\": \"Puducherry\"\n },\n {\n \"state_id\": 28,\n \"state_code\": \"PB\",\n \"state_name\": \"Punjab\"\n },\n {\n \"state_id\": 29,\n \"state_code\": \"RJ\",\n \"state_name\": \"Rajasthan\"\n },\n {\n \"state_id\": 30,\n \"state_code\": \"SK\",\n \"state_name\": \"Sikkim\"\n },\n {\n \"state_id\": 31,\n \"state_code\": \"TN\",\n \"state_name\": \"Tamil Nadu\"\n },\n {\n \"state_id\": 32,\n \"state_code\": \"TS\",\n \"state_name\": \"Telangana\"\n },\n {\n \"state_id\": 33,\n \"state_code\": \"TR\",\n \"state_name\": \"Tripura\"\n },\n {\n \"state_id\": 34,\n \"state_code\": \"UP\",\n \"state_name\": \"Uttar Pradesh\"\n },\n {\n \"state_id\": 35,\n \"state_code\": \"UK\",\n \"state_name\": \"Uttarakhand\"\n },\n {\n \"state_id\": 36,\n \"state_code\": \"WB\",\n \"state_name\": \"West Bengal\"\n }\n\n ]\n this.getLiveVaccinationCounter();\n // this.getDataForLiveVaccCountChart();\n // setTimeout(() => {\n // this.prepareDataForLiveVaccStareaming();\n // this.prepareDataForLiveVaccStareamingRegistration();\n // this.prepareDataForLiveVaccStareamingPartialVacc();\n // this.prepareDataForLiveVaccStareamingFullyVacc();\n // this.getDistrictList()\n\n // }, 1)\n\n setTimeout(() => {\n this.prepareDataForLiveVaccStareaming();\n this.prepareDataForLiveVaccStareamingRegistration();\n this.prepareDataForLiveVaccStareamingPartialVacc();\n this.prepareDataForLiveVaccStareamingFullyVacc();\n this.getDistrictList()\n this.prepareDataForLiveVaccStareaming12_14();\n this.prepareDataForLiveVaccStareaming15_17();\n this.prepareDataForLiveVaccStareaming18_44();\n this.prepareDataForLiveVaccStareaming45_60();\n // this.prepareDataForLiveVaccStareamingabove_60();\n this.updateDataAge();\n }, 1)\n\n\n }\n\n getDashboardData(state_id = \"\", district_id = \"\") {\n this.state_id = state_id;\n this.district_id = district_id\n console.log(\"\")\n if (district_id == '' || district_id == undefined) {\n this.getDistrictID(state_id);\n }\n this.chartFlag = (district_id) ? true : false;\n // this.getVacChartData();\n\n this.publicReportService.getPublicReports(state_id, district_id, this.todaysdate).subscribe(res => {\n this.reportData = res;\n this.ReportGenerateTime = res.timestamp;\n this.ReportGenerateTime = moment(this.ReportGenerateTime).format('yyyy/MM/DD hh:mm a')\n this.topBlockReport = res.topBlock;\n console.log(this.topBlockReport);\n this.liveVaccData = res.vaccinationDoneByTime;\n this.vaccinatedAefiPer = res.aefiPercentage;\n this.lineChartDataNew = res.vaccinationDoneByTime;\n this.vaccinationAgeDataToday = res.vaccinationDoneByTimeAgeWise;\n this.vaccinationByAgeChartData = res.vaccinationByAge;\n this.registartionChartData = res.timeWiseTodayRegReport;\n this.vaccinationAEFIChartData = res.last30DaysAefi;\n // this.getVaccinationByStateUTData = _.orderBy(res.getBeneficiariesGroupBy, 'total',\n // 'desc');\n this.getVaccinationByStateUTData = res.getBeneficiariesGroupBy;\n\n this.DownlloadVaccinationDoneByTime = res.vaccinationDoneByTime;\n this.DownlloadVaccinationDoneByTimeAgeWise = res.vaccinationDoneByTimeAgeWise;\n this.DownlloadImeWiseTodayRegReport = res.timeWiseTodayRegReport;\n this.DownlloadLast30DaysAefi = res.last30DaysAefi;\n this.DownlloadVaccinationByAge = res.vaccinationByAge;\n this.getBeneficiariesGroupBy = _.orderBy(res.getBeneficiariesGroupBy, 'total',\n 'desc');\n\n\n // this.isday = true;\n // this.ismonth = false;\n // this.isweek = false;\n // this.isdayVaccAge = true;\n // this.isweekVaccAge = false;\n // this.ismonthVaccAge = false\n if (this.isday == true) {\n this.prepareDataForVaccByDosesToday()\n }\n\n // this.loadVaccinationByAgeChart();\n // this.prepareDataForDoughnutChartGender();\n // this.prepareDataForDoughnutChartVaccType();\n this.prepareDataForDoughnutChartVaccTypeNew();\n this.prepareDataForPieChartGenderNew();\n this.loadVaccinationByAgeChartnew();\n if (res.timeWiseTodayRegReport) {\n this.prepareDataForRegChart();\n }\n\n this.isdayReg = true;\n this.loadVaccinationAEFIChart();\n this.semesters = _.map(this.getVaccinationByStateUTData, 'state_id');\n setTimeout(() => {\n // this.prepareDataForDoughnutChartForTable();\n\n }, 1)\n if(this.state_id == '' && district_id == '' ){\n this.Heatmap.getStatename(\"\");\n }\n\n if (this.state_id === '' && this.district_id === '') {\n // this.tableheader = \" State/UT\";\n // this.ChartHeading = \"Top States by Capacity Utilization\"\n this.downloadExcelHeader = \"StateWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"StateWiseVaccinationCoverage\"\n } else if (this.state_id != '' && this.district_id == '') {\n // this.tableheader = \" Districts\";\n // this.ChartHeading = \"Top Districts by Capacity Utilization\"\n this.downloadExcelHeader = \"DistrictWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"DistrictWiseVaccinationCoverage\"\n } else if (this.state_id != '' && this.district_id != '') {\n // this.tableheader = \" Centers\";\n // this.ChartHeading = \"Top Centers by Capacity Utilization\"\n this.downloadExcelHeader = \"CenterWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"CenterWiseVaccinationCoverage\"\n } else {\n // this.tableheader = \" State/UT\";\n // this.ChartHeading = \"Top States by Capacity Utilization\"\n this.downloadExcelHeader = \"StateWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"StateWiseVaccinationCoverage\"\n }\n\n\n })\n }\n\n getVacChartData(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.last30DaysVaccinationData = res.last30DaysVaccination;\n this.weeklyReportData = res.weeklyReport;\n this.vaccinationAgeDataMonth = res.last30DaysAgeWiseVaccination;\n\n this.Downloadlast30DaysVaccination = res.last30DaysVaccination;\n this.DownloadweeklyReport = res.weeklyReport;\n this.Downloadlast30DaysAgeWiseVaccination = res.last30DaysAgeWiseVaccination;\n this.DownloadweeklyVacAgeWiseReport = res.weeklyVacAgeWiseReport;\n this.DownloadRegReportData = res.regReportData;\n this.DownloadRegWeekReportData = res.regWeekReportData;\n\n if (this.last30DaysVaccinationData.length) {\n this.prepareDataForVaccByDosesMonth();\n }\n this.vaccinationByCategoryData = [];\n this.secondHalf = [];\n this.vaccinationByCategoryData = res.last30DaysVaccination;\n\n if (this.vaccinationByCategoryData.length) {\n const half = Math.ceil(this.vaccinationByCategoryData.length / 2);\n this.secondHalf = this.vaccinationByCategoryData.slice(-half);\n this.vaccinationByCategoryData = this.secondHalf;\n this.prepareDataForVaccinationByCategory();\n }\n if (value == \"Last 30 Days\") {\n this.isByDoses = true;\n this.isday = false;\n this.ismonth = true;\n this.isweek = false;\n }\n if (value == \"All\") {\n if (this.weeklyReportData.length) {\n this.prepareDataForVaccByDosesAll();\n }\n this.isday = false;\n this.ismonth = false;\n this.isweek = true;\n this.isdayVaccAge = false;\n this.isweekVaccAge = false;\n this.ismonthVaccAge = false\n }\n }\n });\n\n }\n\n getVaccChartAgewiseDataMonth(value = \"\") {\n\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataMonth = res.last30DaysAgeWiseVaccination;\n // console.log(\"this.vaccinationAgeTodayData\", this.vaccinationAgeDataMonth)\n if (this.vaccinationAgeDataMonth.length) {\n this.prepareDataForVaccAgewiseLast30Days();\n }\n\n if (value == \"Last 30 Days\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = true;\n this.isweekVaccAge = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n }\n }\n });\n }\n\n getVaccChartAgewiseDataAll(value = \"\") {\n\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataAll = res.weeklyVacAgeWiseReport;\n // console.log(\"this.vaccinationAgeDataAll\", this.vaccinationAgeDataAll)\n if (this.vaccinationAgeDataAll.length) {\n this.prepareDataForVaccAgewiseAll();\n }\n\n if (value == \"All\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = true;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n\n }\n }\n });\n }\n getVaccChartAgewiseDataToday(value = \"\") {\n\n this.publicReportService.getPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataToday = res.vaccinationDoneByTimeAgeWise;\n\n if (this.vaccinationAgeDataToday.length) {\n this.prepareDataForVaccAgewiseToday();\n }\n\n if (value == \"Today\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVaccAge = true;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n\n }\n }\n });\n }\n\n delay(time) {\n return new Promise((resolve) => {\n\n setTimeout(() => {\n\n resolve(true)\n\n }, time);\n\n })\n\n }\n getVaccByTab(tabName = '') {\n\n if (tabName == 'By Doses') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n }\n else if (tabName == 'Today') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n }\n else if (tabName == \"By Age\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n this.isdayVaccAge = true;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n this.prepareDataForVaccAgewiseToday();\n\n\n }\n else if (tabName == 'isdayReg') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isdayReg = true;\n this.ismonthReg = false;\n this.isweekReg = false;\n }\n\n\n\n }\n\n async prepareDataForVaccByDosesToday() {\n await this.delay(300);\n let draw = Chart.controllers.line.prototype.draw;\n\n Chart.controllers.line = Chart.controllers.line.extend({\n draw: function() {\n let ctx = this.chart.chart.ctx;\n ctx.save();\n ctx.shadowColor = 'rgb(32 33 36 / 25%)';\n ctx.shadowBlur = 10;\n ctx.shadowOffsetX = 0;\n ctx.shadowOffsetY = 4;\n ctx.stroke();\n draw.apply(this, arguments);\n ctx.restore();\n }\n });\n\n if (this.realTimeChart) {\n this.realTimeChart.destroy();\n }\n const ctx = $('#realtime');\n // var originalStroke = ctx.stroke;\n // ctx.stroke = function () {\n // ctx.save();\n // ctx.shadowColor = '#F54394';\n // ctx.shadowBlur = 10;\n // ctx.shadowOffsetX = 8;\n // ctx.shadowOffsetY = 8;\n // originalStroke.apply(this, arguments)\n // ctx.restore();\n // }\n\n if (this.lineChartDataNew) {\n this.lineChartDataNew = this.lineChartDataNew.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n const labels = _.map(this.lineChartDataNew, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DDTHH:mm:ssZ\").subtract(330, \"minutes\").format('HH:mm');\n });\n //console.log(\"lable\",labels )\n const data1 = _.map(this.lineChartDataNew, 'count');\n const data2 = _.map(this.lineChartDataNew, 'dose_one');\n const data3 = _.map(this.lineChartDataNew, 'dose_two');\n const data4 = _.map(this.lineChartDataNew, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(245, 67, 148)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data1,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_One'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: '#ff9800',\n borderWidth: 2,\n pointBackgroundColor: '#ff9800',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(84, 57, 252, 0.05)',\n borderColor: '#21cc98',\n borderWidth: 2,\n pointBackgroundColor: '#21cc98',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(33, 204, 152, 0.05)', // 84, 57, 252\n borderColor: '#12ad06',\n borderWidth: 2,\n pointBackgroundColor: '#12ad06',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChart = new Chart(ctx, vaccConfig);\n this.realTimeChart.update();\n }\n\n async prepareDataForVaccByDosesMonth() {\n\n await this.delay(300);\n if (this.realTimeChartlast30days) {\n this.realTimeChartlast30days.destroy();\n }\n\n\n const ctx = $('#realtimemonth');\n\n if (this.last30DaysVaccinationData) {\n this.last30DaysVaccinationData = this.last30DaysVaccinationData.sort((a, b) => (a.vaccine_date > b.vaccine_date) ? 1 : -1)\n }\n\n const labels = this.last30DaysVaccinationData.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n const data1 = _.map(this.last30DaysVaccinationData, 'total');\n const data2 = _.map(this.last30DaysVaccinationData, 'dose_1');\n const data3 = _.map(this.last30DaysVaccinationData, 'dose_2');\n const data4 = _.map(this.last30DaysVaccinationData, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfigmonth = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(245, 67, 148)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data1,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_One'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: '#ff9800',\n borderWidth: 2,\n pointBackgroundColor: '#ff9800',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(84, 57, 252, 0.05)',\n borderColor: '#21cc98',\n borderWidth: 2,\n pointBackgroundColor: '#21cc98',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(33, 204, 152, 0.05)', // 84, 57, 252\n borderColor: '#12ad06',\n borderWidth: 2,\n pointBackgroundColor: '#12ad06',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n }\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChartlast30days = new Chart(ctx, vaccConfigmonth);\n this.realTimeChartlast30days.update();\n\n }\n\n async prepareDataForVaccByDosesAll() {\n\n await this.delay(300);\n if (this.realTimeChartweek) {\n this.realTimeChartweek.destroy();\n }\n\n\n const ctx = $('#realtimeweek');\n\n\n // console.log(\"this.lineChartDataweek\", this.weeklyReportData)\n const labels = this.weeklyReportData.map(obj => obj.label);\n\n\n // console.log(\"lable\", labels)\n\n const data1 = _.map(this.weeklyReportData, 'total');\n const data2 = _.map(this.weeklyReportData, 'dose1');\n const data3 = _.map(this.weeklyReportData, 'dose2');\n const data4 = _.map(this.weeklyReportData, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(245, 67, 148)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data1,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_One'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: '#ff9800',\n borderWidth: 2,\n pointBackgroundColor: '#ff9800',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(84, 57, 252, 0.05)',\n borderColor: '#21cc98',\n borderWidth: 2,\n pointBackgroundColor: '#21cc98',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(33, 204, 152, 0.05)', // 84, 57, 252\n borderColor: '#12ad06',\n borderWidth: 2,\n pointBackgroundColor: '#12ad06',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChartweek = new Chart(ctx, vaccConfig);\n this.realTimeChartweek.update();\n\n }\n\n getDistrictList() {\n\n this.publicReportService.getDistricts().subscribe((dist) => {\n this.states = this.states.map(res => {\n this.collapseId = res.state_id;\n // console.log(\"cccc\", this.collapseId);\n // this.districtListnew = res\n // this.districtListfromstate = this.districtListnew.filter(e => e.state_id == this.collapseId );\n res['districtList'] = dist.filter(d => d.state_id == res.state_id);\n return res;\n })\n });\n\n\n\n }\n\n iconChange(item){\n this.iconClass = this.iconClass === item ? !this.iconClass : item;\n // this.loadDataByStateTab();\n }\n closeFilter() {\n // $('#myDropdown').css('top', 4 * ($(window).scrollTop() / 5));\n\n\n this.hideShowFilter = !this.hideShowFilter;\n this.FilterIcon = !this.FilterIcon;\n if(this.hideShowExport){\n this.hideShowExport = false;\n }\n if(this.exportIcon){\n this.exportIcon = false;\n }\n }\n exportDashboard(){\n this.hideShowExport = !this.hideShowExport;\n this.exportIcon = !this.exportIcon;\n if(this.hideShowFilter){\n this.hideShowFilter = false;\n }\n if(this.FilterIcon){\n this.FilterIcon = false;\n }\n }\n\n ExportDashboardDataInJson(){\n let key = \"\";\n if(this.state_id !=\"\" && !this.district_id){\n key = \"districtWiseVaccination\";\n }\n else if(this.state_id !=\"\" && this.district_id != \"\"){\n key = \"centerWiseVaccination\";\n }\n else if(!this.district_id && !this.state_id){\n key = \"stateWiseVaccination\";\n }\n\n let jsonDashboardData: object = {\n \"vaccinationDoneByTimeToday\": this.DownlloadVaccinationDoneByTime,\n \"last30DaysVaccination\": this.Downloadlast30DaysVaccination,\n \"weeklyVaccination\": this.DownloadweeklyReport,\n \"vaccinationDoneByTimeAgeWiseToday\": this.DownlloadVaccinationDoneByTimeAgeWise,\n \"last30DaysAgeWiseVaccination\": this.Downloadlast30DaysAgeWiseVaccination,\n \"weeklyAgeWiseVaccination\": this.DownloadweeklyVacAgeWiseReport,\n \"registrationDoneByTimeToday\": this.DownlloadImeWiseTodayRegReport,\n \"last30DaysRegistration\": this.DownloadRegReportData,\n \"weeklyRegistration\": this.DownloadRegWeekReportData,\n \"last30DaysAefiReported\": this.DownlloadLast30DaysAefi,\n \"vaccinationByAge\": this.DownlloadVaccinationByAge\n };\n jsonDashboardData[key] = this.getBeneficiariesGroupBy;\n // jsonDashboardData[\"stateWiseVaccination\"] = this.getBeneficiariesGroupBy;\n const blob = new Blob([JSON.stringify(jsonDashboardData)], {type : 'application/json'});\n saveAs(blob, 'dashboard_export.json');\n }\n ExportDashboardDataInExcel(){\n\n const header = ['label', 'dose_one', 'dose_two','Precaution Dose','count'];\n /**************DownloadVaccinationByDoses Today**************/\n const exportdataByDoseToday = [];\n if (this.DownlloadVaccinationDoneByTime) {\n this.DownlloadVaccinationDoneByTime.forEach(element => {\n exportdataByDoseToday.push([element.label,element.dose_one,element.dose_two,element.dose_pd,element.count])\n\n });\n }\n const workbook = new Excel.Workbook();\n const worksheet1 = workbook.addWorksheet('VaccinationDoneByTimeToday');\n const headerRow = worksheet1.addRow(header);\n headerRow.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow.alignment = { vertical: 'middle', horizontal: 'center' };\n\n\n exportdataByDoseToday.forEach(d => {\n const row = worksheet1.addRow(d);\n});\nworksheet1.getColumn(1).width = 20;\nworksheet1.getColumn(2).width = 20;\nworksheet1.getColumn(3).width = 20;\nworksheet1.getColumn(4).width = 20;\nworksheet1.getColumn(5).width = 20;\nworksheet1.addRow([]);\n\n /**************DownloadVaccinationByDoses 30 Days**************/\n const header001 = ['vaccine_date', 'dose_1', 'dose_2','Precaution Dose','total'];\n const exportdataByDose30Days = [];\n if (this.Downloadlast30DaysVaccination) {\n this.Downloadlast30DaysVaccination.forEach(element => {\n exportdataByDose30Days.push([element.vaccine_date,element.dose_1,element.dose_2,element.dose_pd,element.total])\n\n });\n }\n const worksheet2 = workbook.addWorksheet('Last30DaysVaccination');\n const headerRow2 = worksheet2.addRow(header001);\n headerRow2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow2.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataByDose30Days.forEach(d => {\n const row = worksheet2.addRow(d);\n});\nworksheet2.getColumn(1).width = 20;\nworksheet2.getColumn(2).width = 20;\nworksheet2.getColumn(3).width = 20;\nworksheet2.getColumn(4).width = 20;\nworksheet2.getColumn(5).width = 20;\nworksheet2.addRow([]);\n\n /**************DownloadVaccinationByDoses ALL**************/\n const header002 = ['label', 'dose1', 'dose2','Precaution Dose','total'];\n\n const exportdataByDoseAll = [];\n if (this.DownloadweeklyReport) {\n this.DownloadweeklyReport.forEach(element => {\n exportdataByDoseAll.push([element.label,element.dose1,element.dose2,element.dose_pd,element.total])\n\n });\n }\n const worksheet3 = workbook.addWorksheet('WeeklyVaccination');\n const headerRow3 = worksheet3.addRow(header002);\n headerRow3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow3.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataByDoseAll.forEach(d => {\n const row = worksheet3.addRow(d);\n});\nworksheet3.getColumn(1).width = 20;\nworksheet3.getColumn(2).width = 20;\nworksheet3.getColumn(3).width = 20;\nworksheet3.getColumn(4).width = 20;\nworksheet3.getColumn(5).width = 20;\nworksheet3.addRow([]);\n\n/**************exportdataByAgeToday**************/\nconst header1 = ['label','vac_12_14','vac_15_17', 'vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAgeToday = [];\nif (this.DownlloadVaccinationDoneByTimeAgeWise) {\n this.DownlloadVaccinationDoneByTimeAgeWise.forEach(element => {\n exportdataByAgeToday.push([element.label,element.vac_12_14,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\n//const worksheet4 = workbook.addWorksheet('Today Vaccination-Agewise');\nconst worksheet4 = workbook.addWorksheet('VaccinationByTimeAgeWiseToday');\n\nconst header1Row = worksheet4.addRow(header1);\nheader1Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n\nexportdataByAgeToday.forEach(d => {\nconst row = worksheet4.addRow(d);\n});\nworksheet4.getColumn(1).width = 20;\nworksheet4.getColumn(2).width = 20;\nworksheet4.getColumn(3).width = 20;\nworksheet4.getColumn(4).width = 20;\nworksheet4.getColumn(5).width = 20;\nworksheet4.getColumn(6).width = 20;\nworksheet4.getColumn(7).width = 20;\nworksheet4.addRow([]);\n\n/**************exportdataByAge30Days**************/\nconst header1001 = ['vaccine_date','vac_12_14','vac_15_17', 'vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAge30Days = [];\nif (this.Downloadlast30DaysAgeWiseVaccination) {\n this.Downloadlast30DaysAgeWiseVaccination.forEach(element => {\n exportdataByAge30Days.push([element.vaccine_date,element.vac_12_14,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\nconst worksheet5 = workbook.addWorksheet('Last30DaysAgeWiseVaccination');\nconst header1Row2 = worksheet5.addRow(header1001);\nheader1Row2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row2.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataByAge30Days.forEach(d => {\nconst row = worksheet5.addRow(d);\n});\nworksheet5.getColumn(1).width = 20;\nworksheet5.getColumn(2).width = 20;\nworksheet5.getColumn(3).width = 20;\nworksheet5.getColumn(4).width = 20;\nworksheet5.getColumn(5).width = 20;\nworksheet5.getColumn(4).width = 20;\nworksheet5.getColumn(4).width = 20;\nworksheet5.addRow([]);\n\n/**************exportdataByAgeAll**************/\nconst header1002 = ['label','vac_12_14','vac_15_17', 'vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAgeAll = [];\nif (this.DownloadweeklyVacAgeWiseReport) {\n this.DownloadweeklyVacAgeWiseReport.forEach(element => {\n exportdataByAgeAll.push([element.label,element.vac_12_14,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\nconst worksheet6 = workbook.addWorksheet('weeklyAgeWiseVaccination');\nconst header1Row3 = worksheet6.addRow(header1002);\nheader1Row3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row3.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataByAgeAll.forEach(d => {\nconst row = worksheet6.addRow(d);\n});\nworksheet6.getColumn(1).width = 20;\nworksheet6.getColumn(2).width = 20;\nworksheet6.getColumn(3).width = 20;\nworksheet6.getColumn(4).width = 20;\nworksheet6.getColumn(5).width = 20;\nworksheet1.getColumn(6).width = 20;\nworksheet1.getColumn(7).width = 20;\nworksheet6.addRow([]);\n\n/**************exportdataRegistrationTrendsToday**************/\nconst header02 = ['label','age12','age15', 'age18', 'age45','age60', 'total'];\n const exportdataRegistrationTrendsToday = [];\n if (this.DownlloadImeWiseTodayRegReport) {\n this.DownlloadImeWiseTodayRegReport.forEach(element => {\n exportdataRegistrationTrendsToday.push([element.label,element.age12,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n }\n const worksheet07 = workbook.addWorksheet('registrationDoneByTimeToday');\n const header02Row = worksheet07.addRow(header02);\n header02Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n header02Row.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataRegistrationTrendsToday.forEach(d => {\n const row = worksheet07.addRow(d);\n});\nworksheet07.getColumn(1).width = 20;\nworksheet07.getColumn(2).width = 20;\nworksheet07.getColumn(3).width = 20;\nworksheet07.getColumn(4).width = 20;\nworksheet07.getColumn(5).width = 20;\nworksheet07.getColumn(6).width = 20;\nworksheet07.getColumn(7).width = 20;\nworksheet07.addRow([]);\n\n/**************exportdataRegistrationTrends30Days**************/\nconst header02001 = ['reg_date','age12','age15', 'age18', 'age45','age60', 'total'];\n\nconst exportdataRegistrationTrends30Days = [];\n\nif (this.DownloadRegReportData) {\n this.DownloadRegReportData.forEach(element => {\n const reg_date = moment(element.reg_date, \"YYYY-MM-DD\").format('DD MMM');\n exportdataRegistrationTrends30Days.push([reg_date,element.age12,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n}\nconst worksheet8 = workbook.addWorksheet('last30DaysRegistration');\nconst header2Row2 = worksheet8.addRow(header02001);\nheader2Row2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader2Row2.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataRegistrationTrends30Days.forEach(d => {\nconst row = worksheet8.addRow(d);\n});\nworksheet8.getColumn(1).width = 20;\nworksheet8.getColumn(2).width = 20;\nworksheet8.getColumn(3).width = 20;\nworksheet8.getColumn(4).width = 20;\nworksheet8.getColumn(5).width = 20;\nworksheet8.getColumn(6).width = 20;\nworksheet8.getColumn(7).width = 20;\nworksheet8.addRow([]);\n\n/**************exportdataRegistrationTrendsAll**************/\nconst header02002 = ['label', 'age12','age15','age18', 'age45','age60', 'total'];\n\nconst exportdataRegistrationTrendsAll = [];\nif (this.DownloadRegWeekReportData) {\n this.DownloadRegWeekReportData.forEach(element => {\n exportdataRegistrationTrendsAll.push([element.label,element.age12,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n}\nconst worksheet9 = workbook.addWorksheet('weeklyRegistration');\nconst header2Row3 = worksheet9.addRow(header02002);\nheader2Row3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader2Row3.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataRegistrationTrendsAll.forEach(d => {\nconst row = worksheet9.addRow(d);\n});\nworksheet9.getColumn(1).width = 20;\nworksheet9.getColumn(2).width = 20;\nworksheet9.getColumn(3).width = 20;\nworksheet9.getColumn(4).width = 20;\nworksheet9.getColumn(5).width = 20;\nworksheet9.getColumn(6).width = 20;\nworksheet9.getColumn(7).width = 20;\nworksheet9.addRow([]);\n\n/**************vaccinationAEFIChartData**************/\nconst header3 = ['vaccine_date', 'aefi'];\nconst AEFIChartExportData = [];\nif (this.DownlloadLast30DaysAefi) {\n this.DownlloadLast30DaysAefi.forEach(element => {\n AEFIChartExportData.push([element.vaccine_date,element.aefi])\n\n });\n}\nconst worksheet10 = workbook.addWorksheet('last30DaysAefiReported');\nconst header3Row = worksheet10.addRow(header3);\nheader3Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\n\nAEFIChartExportData.forEach(d => {\nconst row = worksheet10.addRow(d);\n});\nworksheet10.getColumn(1).width = 20;\nworksheet10.getColumn(2).width = 20;\nworksheet10.addRow([]);\nheader3Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************vaccinationByAge**************/\n\nconst header4 = ['vac_12_14','vac_15_17','vac_18_45','vac_45_60', 'above_60'];\nconst vaccinationByAgeexportdata = [];\nthis.vaccinationByAgefinalResult.push(this.DownlloadVaccinationByAge);\n\nif (this.vaccinationByAgefinalResult) {\n this.vaccinationByAgefinalResult.forEach(element => {\n vaccinationByAgeexportdata.push([element.vac_12_14,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.above_60])\n\n });\n}\nconst workbook11 = workbook.addWorksheet('vaccinationByAge');\nconst header4Row = workbook11.addRow(header4);\nheader4Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nvaccinationByAgeexportdata.forEach(d => {\nconst row = workbook11.addRow(d);\n});\nworkbook11.getColumn(1).width = 20;\nworkbook11.getColumn(2).width = 20;\nworkbook11.getColumn(3).width = 20;\nworkbook11.getColumn(4).width = 20;\nworkbook11.getColumn(5).width = 20;\nworkbook11.addRow([]);\nheader4Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************stateWiseVaccination**************/\nconst header5 = ['title', 'today','partial_vaccinated', 'totally_vaccinated','Precaution Dose','total'];\nconst stateWiseVaccinationData = [];\nif (this.getBeneficiariesGroupBy) {\n this.getBeneficiariesGroupBy.forEach(element => {\n stateWiseVaccinationData.push([element.title,element.today,element.partial_vaccinated,element.totally_vaccinated,element.precaution_dose,element.total])\n\n });\n}\nconst worksheet12 = workbook.addWorksheet(this.downloadExcelHeader);\nconst header5Row = worksheet12.addRow(header5);\nheader5Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nstateWiseVaccinationData.forEach(d => {\nconst row = worksheet12.addRow(d);\n});\nworksheet12.getColumn(1).width = 20;\nworksheet12.getColumn(2).width = 20;\nworksheet12.getColumn(3).width = 20;\nworksheet12.getColumn(4).width = 20;\nworksheet12.getColumn(5).width = 20;\nworksheet12.getColumn(6).width = 20;\nworksheet12.addRow([]);\nheader5Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************vaccinationByCategoryRuralUrbanData**************/\n\nconst header7 = ['vaccine_date', 'rural','urban'];\nconst RuralUrbanExportdata = [];\nif (this.vaccinationByCategoryData) {\n this.vaccinationByCategoryData.forEach(element => {\n RuralUrbanExportdata.push([element.vaccine_date,element.rural,element.urban])\n\n });\n}\nconst worksheet14 = workbook.addWorksheet('VaccinationByCategory');\nconst header7Row = worksheet14.addRow(header7);\nheader7Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nRuralUrbanExportdata.forEach(d => {\nconst row = worksheet14.addRow(d);\n});\nworksheet14.getColumn(1).width = 25;\nworksheet14.getColumn(2).width = 20;\nworksheet14.getColumn(3).width = 20;\nworksheet14.addRow([]);\nheader7Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\nthis.tableheader\nlet filename = `dashboard_export.xlsx`;\n workbook.xlsx.writeBuffer().then((data: any) => {\n const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n fs.saveAs(blob, filename);\n\n });\n\n }\n\n getRegChartDataMonth(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.registartionChartDataMonth = res.regReportData;\n console.log(this.registartionChartDataMonth);\n if (this.registartionChartDataMonth.length) {\n this.prepareDataForRegChartMonth();\n }\n\n if (value == \"Last 30 Days\") {\n this.isdayReg = false;\n this.ismonthReg = true;\n this.isweekReg = false;\n\n }\n\n }\n });\n }\n\n async prepareDataForRegChartMonth() {\n\n await this.delay(300);\n if (this.registartionChartMonth) {\n this.registartionChartMonth.destroy();\n }\n const ctx = $('#realtimeregchartmonth');\n const labels = this.registartionChartDataMonth.map(obj => moment(obj.reg_date, \"YYYY-MM-DD\").format('DD MMM'));\n const data1 = _.map(this.registartionChartDataMonth, 'total');\n const data5 = _.map(this.registartionChartDataMonth, 'age15');\n const data2 = _.map(this.registartionChartDataMonth, 'age18');\n const data3 = _.map(this.registartionChartDataMonth, 'age45');\n const data4 = _.map(this.registartionChartDataMonth, 'age60');\n const data6 = _.map(this.registartionChartDataMonth, 'age12');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n\n datasets: [\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1', //'+1'\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.05)', //255, 152, 0\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n lineTension: 0,\n fill: true,\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 15,\n // fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChartMonth = new Chart(ctx, regConfig);\n this.registartionChartMonth.update();\n\n }\n\n getRegChartDataAll(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.registartionChartDataAll = res.regWeekReportData;\n\n // console.log(\"reg report Month\", this.registartionChartDataAll);\n\n if (this.registartionChartDataAll.length) {\n this.prepareDataForRegChartAll();\n }\n\n if (value == \"All\") {\n this.isdayReg = false;\n this.ismonthReg = false;\n this.isweekReg = true;\n\n }\n\n }\n });\n }\n\n async prepareDataForRegChartAll() {\n\n await this.delay(300);\n if (this.registartionChartAll) {\n this.registartionChartAll.destroy();\n }\n\n const ctx = $('#realtimeregweek');\n\n const labels = this.registartionChartDataAll.map(obj => obj.label);\n\n const data1 = _.map(this.registartionChartDataAll, 'total');\n const data5 = _.map(this.registartionChartDataAll, 'age15');\n const data2 = _.map(this.registartionChartDataAll, 'age18');\n const data3 = _.map(this.registartionChartDataAll, 'age45');\n const data4 = _.map(this.registartionChartDataAll, 'age60');\n const data6 = _.map(this.registartionChartDataAll, 'age12');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n\n datasets: [\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1',\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.05)', // 255, 152, 0\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n lineTension: 0,\n fill: '2',\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n lineTension: 0,\n fill: true,\n\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 15,\n // fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChartAll = new Chart(ctx, regConfig);\n this.registartionChartAll.update();\n\n }\n\n async prepareDataForRegChart() {\n\n await this.delay(300);\n if (this.registartionChart) {\n this.registartionChart.destroy();\n }\n\n\n const ctx = $('#realtimeregchart');\n if (this.registartionChartData) {\n this.registartionChartData = this.registartionChartData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n\n // const labels = this.registartionChartData.map(obj => obj.label);\n\n const labels = _.map(this.registartionChartData, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DD HH:mm:ssZ\").format('HH:mm');\n });\n\n\n const data1 = _.map(this.registartionChartData, 'total');\n const data5 = _.map(this.registartionChartData, 'age15');\n const data2 = _.map(this.registartionChartData, 'age18');\n const data3 = _.map(this.registartionChartData, 'age45');\n const data4 = _.map(this.registartionChartData, 'age60');\n const data6 = _.map(this.registartionChartData, 'age12');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n\n datasets: [\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1',\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.1)', // 245, 67, 148\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n lineTension: 0,\n fill: true,\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n lineTension: 0,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 15,\n // fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChart = new Chart(ctx, regConfig);\n this.registartionChart.update();\n\n }\n\n //load AEFI report\n loadVaccinationAEFIChart() {\n const format = this.numberFormatPipe;\n\n if (this.vaccinationAEFIChart) {\n this.vaccinationAEFIChart.destroy();\n }\n\n // console.log(\"aefi\", this.vaccinationAEFIChartData);\n const labels = this.vaccinationAEFIChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const data = _.map(this.vaccinationAEFIChartData, 'aefi');\n var configuration = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: 'Total',\n backgroundColor: 'rgba(255, 255, 255, 1)',\n borderColor: 'rgba(33, 204, 152, 1)',\n borderWidth: 2,\n pointBackgroundColor: 'rgba(33, 204, 152, 1)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data,\n\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n // align: \"end\",\n labels: {\n usePointStyle: true,\n // fontSize: 7,\n boxWidth: 6,\n // padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n\n userCallback: function (label, index, labels) {\n // when the floored value is the same as the value we have a whole number\n if (Math.floor(label) === label) {\n return label;\n }\n\n },\n }\n }]\n },\n }\n };\n // this.vaccinationAEFIChart.yAxis.tickFormat(d3.format(',f'));\n var ctx = $('#vaccination-aefi-seven-days');\n this.vaccinationAEFIChart = new Chart(ctx, configuration);\n this.vaccinationAEFIChart.update();\n\n }\n\n prepareDataForVaccinationByCategory() {\n if (this.vaccinationByCategoryChart) {\n this.vaccinationByCategoryChart.destroy();\n }\n\n\n // -------------------------------------------------\n Chart.helpers.drawRoundedTopRectangle = function(ctx, x, y, width, height, radius) {\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n // top right corner\n ctx.lineTo(x + width - radius, y);\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n // bottom right corner\n ctx.lineTo(x + width, y + height);\n // bottom left corner\n ctx.lineTo(x, y + height);\n // top left\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n };\n Chart.elements.RoundedTopRectangle = Chart.elements.Rectangle.extend({\n draw: function() {\n var ctx = this._chart.ctx;\n var vm = this._view;\n var left, right, top, bottom, signX, signY, borderSkipped;\n var borderWidth = vm.borderWidth;\n\n if (!vm.horizontal) {\n // bar\n left = vm.x - vm.width / 2;\n right = vm.x + vm.width / 2;\n top = vm.y;\n bottom = vm.base;\n signX = 1;\n signY = bottom > top? 1: -1;\n borderSkipped = vm.borderSkipped || 'bottom';\n } else {\n // horizontal bar\n left = vm.base;\n right = vm.x;\n top = vm.y - vm.height / 2;\n bottom = vm.y + vm.height / 2;\n signX = right > left? 1: -1;\n signY = 1;\n borderSkipped = vm.borderSkipped || 'left';\n }\n\n // Canvas doesn't allow us to stroke inside the width so we can\n // adjust the sizes to fit if we're setting a stroke on the line\n if (borderWidth) {\n // borderWidth shold be less than bar width and bar height.\n var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));\n borderWidth = borderWidth > barSize? barSize: borderWidth;\n var halfStroke = borderWidth / 2;\n // Adjust borderWidth when bar top position is near vm.base(zero).\n var borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0);\n var borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0);\n var borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0);\n var borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0);\n // not become a vertical line?\n if (borderLeft !== borderRight) {\n top = borderTop;\n bottom = borderBottom;\n }\n // not become a horizontal line?\n if (borderTop !== borderBottom) {\n left = borderLeft;\n right = borderRight;\n }\n }\n\n // calculate the bar width and roundess\n var barWidth = Math.abs(left - right);\n var roundness = this._chart.config.options.barRoundness || 0.5;\n var radius = barWidth * roundness * 0.8;\n\n // keep track of the original top of the bar\n var prevTop = top;\n\n // move the top down so there is room to draw the rounded top\n top = prevTop + radius;\n var barRadius = top - prevTop;\n\n ctx.beginPath();\n ctx.fillStyle = vm.backgroundColor;\n ctx.strokeStyle = vm.borderColor;\n ctx.lineWidth = borderWidth;\n\n // draw the rounded top rectangle\n Chart.helpers.drawRoundedTopRectangle(ctx, left, (top - barRadius + 1), barWidth, bottom - prevTop, barRadius);\n\n ctx.fill();\n if (borderWidth) {\n ctx.stroke();\n }\n\n // restore the original top value so tooltips and scales still work\n top = prevTop;\n },\n });\n Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);\n\nChart.controllers.roundedBar = Chart.controllers.bar.extend({\n dataElementType: Chart.elements.RoundedTopRectangle\n});\n // ------------------------------------------------\n\n\n\n // console.log(\"vaccinationByCategoryDatatest\", this.vaccinationByCategoryData)\n const ctx = $('#vacc-bycategory');\n\n if (this.vaccinationByCategoryData) {\n this.vaccinationByCategoryData = this.vaccinationByCategoryData.sort((a, b) => (a.vaccine_date > b.vaccine_date) ? 1 : -1)\n }\n\n\n const labels = this.vaccinationByCategoryData.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n const data1 = _.map(this.vaccinationByCategoryData, 'rural');\n const data2 = _.map(this.vaccinationByCategoryData, 'urban');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'bar',\n label:this.translate.instant('DASHBOARD.Urban'),\n backgroundColor: \"rgba(84, 57, 252, 1)\",\n borderColor: \"rgba(84, 57, 252, 1)\",\n data: data2,\n },\n {\n type: 'roundedBar',\n label: this.translate.instant('DASHBOARD.Rural'),\n backgroundColor: \"rgba(255, 119, 35, 1)\",\n borderColor: \"rgba(255, 119, 35, 1)\",\n data: data1,\n }\n]\n },\n options: {\n cornerRadius: 20,\n legend: {\n display: true,\n position: 'bottom',\n // align: \"end\",\n labels: {\n usePointStyle: true,\n // fontSize: 7,\n boxWidth: 6,\n // padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n barThickness: 10,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n this.vaccinationByCategoryChart = new Chart(ctx, vaccConfig);\n this.vaccinationByCategoryChart.update();\n }\n\n prepareDataForDoughnutChartForTable() {\n const format = this.numberFormatPipe;\n var count = 0;\n // for(let i=0; i<=this.getVaccinationByStateUTData.length;i++){\n // this.getVaccinationByStateUTData = this.getVaccinationByStateUTData.slice(0, 200);\n // console.log(\" this.getVaccinationByStateUTData\", this.getVaccinationByStateUTData)\n this.getVaccinationByStateUTData.forEach((res) => {\n count = count + 1;\n\n\n this.charts.push(\n\n new Chart('vaccination-table-data' + count, {\n type: 'doughnut',\n data: {\n labels: ['Dose 1', 'Dose 2'],\n datasets: [\n {\n data: [res.partial_vaccinated, res.totally_vaccinated],\n //borderColor: \"#3cba9f\",\n backgroundColor: [\n ('#21CC98'),\n ('#FF9800')\n\n ]\n }\n ]\n },\n options: {\n cutoutPercentage: 70,\n borderRadius: 30,\n // rotation: 1 * Math.PI,\n // circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n enabled: false\n },\n legend: {\n display: false,\n }\n }\n })\n );\n\n });\n // }\n }\n\n async prepareDataForVaccAgewiseToday() {\n await this.delay(300);\n\n if (this.vaccinationAgeChartToday) {\n this.vaccinationAgeChartToday.destroy();\n }\n if (this.vaccinationAgeDataToday) {\n this.vaccinationAgeDataToday = this.vaccinationAgeDataToday.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n const ctx = $('#vacc-agewise-today');\n\n\n const labels = _.map(this.vaccinationAgeDataToday, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DDTHH:mm:ssZ\").subtract(330, \"minutes\").format('HH:mm');\n });\n\n\n const data1 = _.map(this.vaccinationAgeDataToday, 'total');\n const data5 = _.map(this.vaccinationAgeDataToday, 'vac_15_17');\n const data2 = _.map(this.vaccinationAgeDataToday, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataToday, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataToday, 'vac_60_above');\n const data6= _.map(this.vaccinationAgeDataToday, 'vac_12_14');\n const format = this.numberFormatPipe;\n\n\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1',\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.05)', // 255, 152, 0\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n\n\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartToday = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartToday.update();\n }\n\n async prepareDataForVaccAgewiseLast30Days() {\n await this.delay(300);\n if (this.vaccinationAgeChartMonth) {\n this.vaccinationAgeChartMonth.destroy();\n }\n\n const ctx = $('#vacc-agewise-month');\n\n const labels = this.vaccinationAgeDataMonth.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n\n const data1 = _.map(this.vaccinationAgeDataMonth, 'total');\n const data5 = _.map(this.vaccinationAgeDataMonth, 'vac_15_17');\n const data2 = _.map(this.vaccinationAgeDataMonth, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataMonth, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataMonth, 'vac_60_above');\n const data6 = _.map(this.vaccinationAgeDataMonth, 'vac_12_14');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1',\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.05)', // 255, 152, 0\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartMonth = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartMonth.update();\n }\n\n async prepareDataForVaccAgewiseAll() {\n await this.delay(300);\n if (this.vaccinationAgeChartAll) {\n this.vaccinationAgeChartAll.destroy();\n }\n\n\n const ctx = $('#vacc-agewise-all');\n\n const labels = this.vaccinationAgeDataAll.map(obj => obj.label);\n\n\n const data1 = _.map(this.vaccinationAgeDataAll, 'total');\n const data5 = _.map(this.vaccinationAgeDataAll, 'vac_15_17');\n const data2 = _.map(this.vaccinationAgeDataAll, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataAll, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataAll, 'vac_60_above');\n const data6 = _.map(this.vaccinationAgeDataAll, 'vac_12_14');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n label: this.translate.instant('DASHBOARD.Total'),\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n strokeColor: \"rgba(54, 162, 235, 0.2)\",\n pointRadius: 3,\n fill: '+1',\n lineTension: 0,\n data: data1,\n },\n {\n type: 'line',\n label: '12-14',\n backgroundColor: 'rgb(178, 76, 194, 0.1)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(178, 76, 194)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data6,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(0, 179, 255, 0.05)', // 255, 152, 0\n borderColor: 'rgb(0, 179, 255)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(0, 179, 255)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(255, 152 , 0, 0.1)',\n borderColor: 'rgb(255, 152 , 0)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(255, 152 , 0)',\n pointBorderWidth: 1,\n\n pointRadius: 3,\n fill: '+2',\n lineTension: 0,\n data: data2,\n shadowColor : '#F54394'\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(84, 57, 252,0.1)',\n borderColor: 'rgb(84, 57, 252)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(84, 57, 252)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(245, 67, 148, 0.2)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(245, 67, 148)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n lineTension: 0,\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartAll = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartAll.update();\n }\n getLiveVaccinationCounter() {\n const channelName = `covid_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n // let liveData = data.split('::@::');\n // this.totalVaccinationCounter = parseInt(liveData[0]);\n this.totalVaccinationCounter = parseInt(data);\n });\n\n const channelNameReg = `covid_registration_live_counter`;\n this.webSocket.listen(channelNameReg).subscribe((data:any) => {\n this.totalRegistrationCounter = parseInt(data);\n });\n\n const channelNamepartialVacc = `covid_partially_vaccination_live_counter`;\n this.webSocket.listen(channelNamepartialVacc).subscribe((data:any) => {\n this.partialVaccinationCounter = parseInt(data);\n });\n\n const channelNametotalVacc = `covid_fully_vaccination_live_counter`;\n this.webSocket.listen(channelNametotalVacc).subscribe((data:any) => {\n this.fullyVaccinationCounter = parseInt(data);\n });\n\n this.webSocket.listenAgeSocket('covid_vaccination_bifurcation').subscribe((data: any) => {\n this.total12_14Vaccination = data['vaccination_12_14_total'];\n this.total15_17Vaccination = data['vaccination_15_17_total'];\n this.total18_44Vaccination = data['vaccination_18_44_total'];\n this.total45_60Vaccination = data['vaccination_45_60_total'];\n this.totalabove_60Vaccination = data['vaccination_above_60_total'];\n this.total_hcw_flw_precaution_vaccinations = data['vaccination_18_44_precaution_dose'] + data['vaccination_45_60_precaution_dose'];\n this.total_60_plus_precaution_vaccinations = data['vaccination_above_60_precaution_dose']\n })\n }\n getDataForLiveVaccCountChart() {\n this.publicReportService.getLiveVaccinationCounterChart(this.todaysdate).subscribe(res => {\n if (res) {\n this.liveVaccData = res;\n for (let i = 0; i < this.liveVaccData.length; i++) {\n this.liveVaccData[i].last5mins = i == 0 ? 0 : this.liveVaccData[i].count - this.liveVaccData[i - 1].count\n }\n\n this.liveVaccData = this.liveVaccData.slice(Math.max(this.liveVaccData.length - 12, -1))\n console.log(\" this.liveVaccData1\", this.liveVaccData);\n this.prepareDataForLiveVaccCount();\n }\n });\n }\n\n prepareDataForLiveVaccCount() {\n if (this.liveVaccChart) {\n this.liveVaccChart.destroy();\n }\n\n const ctx = $('#liveVacc');\n\n // if (this.liveVaccData) {\n // this.liveVaccData = this.liveVaccData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n // }\n // -----------------------------------------\n // Chart.defaults.LineWithLine = Chart.defaults.line;\n // Chart.controllers.LineWithLine = Chart.controllers.line.extend({\n // draw: function(ease) {\n // Chart.controllers.line.prototype.draw.call(this, ease);\n\n // if (this.chart.tooltip._active && this.chart.tooltip._active.length) {\n // var activePoint = this.chart.tooltip._active[0],\n // ctx = this.chart.ctx,\n // x = activePoint.tooltipPosition().x,\n // topY = this.chart.legend.bottom,\n // bottomY = this.chart.chartArea.bottom;\n\n // // draw line\n // ctx.save();\n // ctx.beginPath();\n // ctx.moveTo(x, topY);\n // ctx.lineTo(x, bottomY);\n // ctx.lineWidth = 1;\n // ctx.strokeStyle = '#808080';\n // ctx.stroke();\n // ctx.restore();\n // }\n // }\n // });\n\n\n\n // ----------------------------------------\n\n\n\n const labels = _.map(this.liveVaccData, (data) => {\n return moment(data.time, \"YYYY-MM-DDTHH:mm:ssZ\").add(330, \"minutes\").format('hh:mm A');\n });\n\n const data1 = _.map(this.liveVaccData, 'last5mins');\n // console.log(\" this.liveVaccDataxcXC\", this.liveVaccData);\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n // borderRadius: 50,\n // borderwidth:10,\n data: {\n labels: labels,\n\n datasets: [\n {\n // type: 'line',\n // // label: '5 Min Interval',\n // backgroundColor: \"rgb(28,169,121, 1)\",\n // borderColor: \"rgb(28,169,121, 1)\",\n\n // data: data1,\n // borderwidth:10,\n // borderRadius: 50,\n // // corners: 'round',\n // // bezierCurve : false\n\n\n\n type: 'line',\n // tension: 0.1,\n backgroundColor: 'rgb(28,169,121, .1)',\n borderColor: 'rgb(28,169,121, 1)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(28,169,121, 1)',\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve: false,\n data: data1,\n }\n\n ]\n },\n options: {\n borderRadius: 50,\n // cornerRadius: 20,\n // barRoundness: 1,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n yAlign: 'top',\n displayColors: false,\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n\n\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n display: true,\n // barPercentage:1.0,\n // categoryPercentage:1.0,\n // // maintainAspectRatio :false,\n beginAtZero: true,\n // barThickness: 7,\n // borderRadius: 50,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 3,\n fontSize: 6,\n display: true,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\",\n // callback: function (label, index, labels) {\n // // return label / 100000 + 'L';\n // return \"\"\n // }\n },\n stacked: false,\n gridLines: {\n display: true,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000',\n // color: \"#808080\"\n },\n }],\n yAxes: [{\n\n stacked: false,\n barPercentage: 0.35,\n dispaly: false,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [2, 4],\n zeroLineColor: 'rgb(247, 250, 252)',\n display: false,\n offsetGridLines: true\n },\n ticks: {\n dispaly: true,\n fontSize: 6,\n beginAtZero: false,\n autoSkip: true,\n maxTicksLimit: 3,\n fontColor: \"#000000\",\n callback: function (label, index, labels) {\n return label / 100000 + 'L';\n // return \"\"\n }\n }\n }]\n },\n // annotation: {\n // annotations: [{\n // type: 'line',\n // mode: 'vertical',\n // scaleID: 'y-axis-0',\n // value: 5,\n // borderColor: 'rgb(75, 192, 192)',\n // borderWidth: 4,\n // label: {\n // enabled: false,\n // content: 'Test label'\n // }\n // }]\n // }\n\n\n },\n // plugins: [{\n // beforeInit: function (chart) {\n // chart.data.labels.forEach(function (e, i, a) {\n // if (/\\n/.test(e)) {\n // a[i] = e.split(/\\n/)\n // }\n // })\n // }\n // }]\n };\n\n this.liveVaccChart = new Chart(ctx, vaccConfig);\n this.liveVaccChart.update();\n }\n prepareDataForLiveVaccStareaming() {\n if (this.liveVaccChartStreaming) {\n this.liveVaccChartStreaming.destroy();\n }\n\n const ctx = $('#liveVaccStreaming');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(20, 122, 214, 0.5)',\n borderColor: 'rgb(20, 122, 214)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display: false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display: false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly: false,\n // beginAtZero: true,\n gridLines: {\n display: false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly: false,\n userCallback: function (value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming.update();\n this.updateData();\n }\n async updateData() {\n const channelName = `covid_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data: any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreaming.data.labels.push(label);\n this.liveVaccChartStreaming.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsData) {\n diff = currentData - this.prevsData\n }\n this.prevsData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsData) {\n diff = currentData - this.prevsData\n }\n this.prevsData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountTotalVacc > this.numberOfElements) {\n this.liveVaccChartStreaming.data.labels.shift();\n this.liveVaccChartStreaming.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVacc++;\n }\n this.liveVaccChartStreaming.update();\n this.liveVaccChartStreaming = this.liveVaccChartStreaming;\n })\n }\n prepareDataForLiveVaccStareamingRegistration() {\n if (this.liveVaccChartStreamingRegistration) {\n this.liveVaccChartStreamingRegistration.destroy();\n }\n\n const ctx = $('#liveVaccStreamingReg');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(1, 113, 113, 0.5)',\n borderColor: 'rgb(1, 113, 113, 1)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display: false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display: false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly: false,\n // beginAtZero: true,\n gridLines: {\n display: false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly: false,\n userCallback: function (value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingRegistration = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingRegistration.update();\n this.updateDataRegistration();\n }\n async updateDataRegistration() {\n const channelName = `covid_registration_live_counter`;\n this.webSocket.listen(channelName).subscribe((data: any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingRegistration.data.labels.push(label);\n this.liveVaccChartStreamingRegistration.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsRegData) {\n diff = currentData - this.prevsRegData\n }\n this.prevsRegData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsRegData) {\n diff = currentData - this.prevsRegData\n }\n this.prevsRegData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountTotalReg > this.numberOfElements) {\n this.liveVaccChartStreamingRegistration.data.labels.shift();\n this.liveVaccChartStreamingRegistration.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalReg++;\n }\n this.liveVaccChartStreamingRegistration.update();\n this.liveVaccChartStreamingRegistration = this.liveVaccChartStreamingRegistration;\n })\n }\n prepareDataForLiveVaccStareamingPartialVacc() {\n if (this.liveVaccChartStreamingPartialVacc) {\n this.liveVaccChartStreamingPartialVacc.destroy();\n }\n\n const ctx = $('#liveVaccStreamingPartialVacc');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(255, 154, 49, 0.5)',\n borderColor: 'rgb(255, 154, 49)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display: false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display: false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly: false,\n // beginAtZero: true,\n gridLines: {\n display: false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly: false,\n userCallback: function (value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingPartialVacc = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingPartialVacc.update();\n this.updateDataPartialVacc();\n }\n async updateDataPartialVacc() {\n const channelName = `covid_partially_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data: any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingPartialVacc.data.labels.push(label);\n this.liveVaccChartStreamingPartialVacc.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsPartialVaccData) {\n diff = currentData - this.prevsPartialVaccData\n }\n this.prevsPartialVaccData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsPartialVaccData) {\n diff = currentData - this.prevsPartialVaccData\n }\n this.prevsPartialVaccData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountPartialVacc > this.numberOfElements) {\n this.liveVaccChartStreamingPartialVacc.data.labels.shift();\n this.liveVaccChartStreamingPartialVacc.data.datasets[0].data.shift();\n } else {\n this.updateCountPartialVacc++;\n }\n this.liveVaccChartStreamingPartialVacc.update();\n this.liveVaccChartStreamingPartialVacc = this.liveVaccChartStreamingPartialVacc;\n })\n }\n prepareDataForLiveVaccStareamingFullyVacc() {\n if (this.liveVaccChartStreamingFullyVacc) {\n this.liveVaccChartStreamingFullyVacc.destroy();\n }\n\n const ctx = $('#liveVaccStreamingFullyVacc');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(47, 181, 141, 0.5)',\n borderColor: 'rgb(47, 181, 141)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n showScale: false,\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display: false,\n // beginAtZero: true,\n // ticks: {\n // autoSkip: true,\n // maxTicksLimit: 5,\n // fontSize: 6,\n // display:false,\n // maxRotation: 0,\n // minRotation: 0,\n // fontColor: \"#000000\"\n // },\n // stacked: false,\n // gridLines: {\n // display: false,\n // drawBorder: true,\n // borderDash: [2, 4],\n // zeroLineWidth: 0.05,\n // zeroLineColor: '#000000'\n // },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly: false,\n // beginAtZero: true,\n gridLines: {\n display: false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly: false,\n userCallback: function (value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingFullyVacc = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingFullyVacc.update();\n this.updateDataFullyVacc();\n }\n async updateDataFullyVacc() {\n const channelName = `covid_fully_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data: any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingFullyVacc.data.labels.push(label);\n this.liveVaccChartStreamingFullyVacc.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsFullyVaccData) {\n diff = currentData - this.prevsFullyVaccData\n }\n this.prevsFullyVaccData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsFullyVaccData) {\n diff = currentData - this.prevsFullyVaccData\n }\n this.prevsFullyVaccData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountFullyVacc > this.numberOfElements) {\n this.liveVaccChartStreamingFullyVacc.data.labels.shift();\n this.liveVaccChartStreamingFullyVacc.data.datasets[0].data.shift();\n } else {\n this.updateCountFullyVacc++;\n }\n this.liveVaccChartStreamingFullyVacc.update();\n this.liveVaccChartStreamingFullyVacc = this.liveVaccChartStreamingFullyVacc;\n })\n }\n\n loadVaccinationByAgeChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationByAgeChart) {\n this.vaccinationByAgeChart.destroy();\n}\n console.log(\"this.vaccinationByAgeChartData\", this.vaccinationByAgeChartData)\n const labels_data = Object.keys(this.vaccinationByAgeChartData);\n const labels = labels_data.map(obj => obj.replace('vac_', '').replace('_', '-'));\n labels.shift();\n\n const vac_15_17 = this.vaccinationByAgeChartData.vac_15_17\n const vac_18_45 = this.vaccinationByAgeChartData.vac_18_45\n const vac_45_60 = this.vaccinationByAgeChartData.vac_45_60\n const above_60 = this.vaccinationByAgeChartData.above_60\n\n\n console.log(\"check\", vac_18_45);\n var configuration = {\n type: 'bar',\n\n data: {\n datasets: [\n {\n label: '15-17',\n data: [vac_15_17],\n backgroundColor: [\n // \"rgb(254, 125, 90)\",\n // \"rgb(243, 244, 249)\"\n 'rgb(15, 22, 53)'\n ],\n },\n {\n label: '18-44',\n data: [vac_18_45],\n backgroundColor: 'rgb(50 72 158)'\n },\n {\n label: '45-60',\n data: [vac_45_60],\n backgroundColor: 'rgb(2, 99, 255)'\n },\n {\n label: 'Above 60',\n data: [above_60],\n backgroundColor: 'rgb(100, 154, 241)'\n }\n ]\n\n\n },\n options: {\n legend: {\n display: true,\n position: 'right',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n barThickness: 40,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n display: false\n\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-by-age');\n this.vaccinationByAgeChart = new Chart(ctx, configuration);\n this.vaccinationByAgeChart.update();\n }\n\n prepareDataForDoughnutChartGender() {\n\n const format = this.numberFormatPipe;\n if (this.genderVaccPieChart) {\n this.genderVaccPieChart.destroy()\n }\n\n\n\n const male = this.topBlockReport?.vaccination?.male\n const female = this.topBlockReport?.vaccination?.female\n const others = this.topBlockReport?.vaccination?.others\n const total = this.topBlockReport?.vaccination?.total_doses\n\n console.log(\"male\", this.topBlockReport)\n var configcmr2 = {\n type: 'doughnut',\n\n data: {\n datasets: [\n /* Outer doughnut data starts*/\n {\n data: [this.topBlockReport?.vaccination?.male,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(84, 57, 252)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Male',\n borderRadius: 30\n },\n /* Outer doughnut data ends*/\n /* Inner doughnut data starts*/\n {\n data: [this.topBlockReport?.vaccination?.female,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(245, 67, 148)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Female',\n\n },\n {\n data: [this.topBlockReport?.vaccination?.others,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(255, 152, 0)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Others',\n\n }\n ],\n labels: [\n \"Male\",\n \"Female\",\n \"Others\"\n\n ],\n\n },\n options: {\n cutoutPercentage: 60,\n borderRadius: 30,\n // rotation: 1 * Math.PI,\n // circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'label',\n\n\n callbacks: {\n label: function (item, data) {\n console.log(data.labels, item);\n return data.datasets[item.datasetIndex].label + \": \" + format.transform(data.datasets[item.datasetIndex].data[item.index]);\n }\n }\n },\n legend: {\n display: false,\n position: 'right',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 50,\n // fontSize: 11,\n }\n }\n }\n };\n\n\n\n\n const genderCtx = $('#total-vaccinated-gender');\n this.genderVaccPieChart = new Chart(genderCtx, configcmr2);\n\n\n }\n\n\n prepareDataForDoughnutChartVaccType() {\n\n const format = this.numberFormatPipe;\n if (this.materialVaccPieChart) {\n this.materialVaccPieChart.destroy()\n }\n\n\n\n const male = this.topBlockReport?.vaccination?.male\n const female = this.topBlockReport?.vaccination?.female\n const others = this.topBlockReport?.vaccination?.others\n const total = this.topBlockReport?.vaccination?.total_doses\n\n console.log(\"male\", this.topBlockReport)\n var configcmr2 = {\n type: 'doughnut',\n\n data: {\n datasets: [\n /* Outer doughnut data starts*/\n {\n data: [this.topBlockReport?.vaccination?.covishield,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(59, 125, 254)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Covishield',\n borderRadius: 30\n },\n /* Outer doughnut data ends*/\n /* Inner doughnut data starts*/\n {\n data: [this.topBlockReport?.vaccination?.covaxin,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(254, 125, 90)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Covaxin',\n\n },\n {\n data: [this.topBlockReport?.vaccination?.sputnik,\n this.topBlockReport?.vaccination?.total_doses],\n backgroundColor: [\n \"rgb(35, 200, 150)\",\n \"rgb(243, 244, 249)\"\n ],\n label: 'Sputnik V',\n\n }\n ],\n labels: [\n \"Covishield\",\n \"Covaxin\",\n \"Sputnik V\"\n\n ],\n\n },\n options: {\n cutoutPercentage: 60,\n borderRadius: 30,\n // rotation: 1 * Math.PI,\n // circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'label',\n\n\n callbacks: {\n label: function (item, data) {\n console.log(data.labels, item);\n return data.datasets[item.datasetIndex].label + \": \" + format.transform(data.datasets[item.datasetIndex].data[item.index]);\n }\n }\n },\n legend: {\n display: false,\n position: 'right',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 50,\n // fontSize: 11,\n }\n }\n }\n };\n\n\n\n\n const materialCtx = $('#material-used');\n this.materialVaccPieChart = new Chart(materialCtx, configcmr2);\n\n\n }\n\n prepareDataForDoughnutChartVaccTypeNew() {\n\n const format = this.numberFormatPipe;\n if (this.materialVaccPieChartnew) {\n this.materialVaccPieChartnew.destroy()\n }\n\n\n\n const male = this.topBlockReport?.vaccination?.male\n const female = this.topBlockReport?.vaccination?.covaxin\n const others = this.topBlockReport?.vaccination?.sputnik\n const total = this.topBlockReport?.vaccination?.total_doses\n\n const labels = ['Covishield', 'Covaxin', 'Sputnik V']\n const bgcolor = ['rgb(59, 125, 254)', 'rgb(254, 125, 90)', 'rgb(35, 200, 150)']\n const vaccData = [\n\n this.topBlockReport?.vaccination?.covishield,\n\n this.topBlockReport?.vaccination?.covaxin,\n\n this.topBlockReport?.vaccination?.sputnik,\n\n ]\n\n if(this.topBlockReport.vaccination.corbevax){\n\n labels.push('Corbevax');\n\n vaccData.push(this.topBlockReport?.vaccination?.corbevax)\n bgcolor.push('rgb(245, 67, 148)')\n\n }\n if(this.topBlockReport.vaccination.covovax){\n\n labels.push('Covovax');\n bgcolor.push('rgb(178, 76, 194)')\n vaccData.push(this.topBlockReport?.vaccination?.covovax)\n }\n\n if(this.topBlockReport.vaccination.incovacc){\n labels.push('iNCOVACC');\n bgcolor.push('rgb(92, 186, 24)')\n vaccData.push(this.topBlockReport?.vaccination?.incovacc)\n }\n\n if(this.topBlockReport.vaccination.gemcovacc){\n labels.push('GEMCOVAC');\n bgcolor.push('rgb(33, 24, 204)')\n vaccData.push(this.topBlockReport?.vaccination?.gemcovacc)\n }\n\n if(this.topBlockReport.vaccination.gemcovacc_om){\n labels.push('GEMCOVAC®-OM');\n bgcolor.push('rgb(37, 196, 172)')\n vaccData.push(this.topBlockReport?.vaccination?.gemcovacc_om)\n }\n\n // console.log(\"male\",this.topBlockReport)\n var configcmr2 = {\n type: 'doughnut',\n\n\n\n data: {\n datasets: [{\n data: vaccData,\n // backgroundColor: ['rgb(59, 125, 254)', 'rgb(254, 125, 90)', 'rgb(35, 200, 150)','rgb(245, 67, 148)','rgb(178, 76, 194)'],\n backgroundColor:bgcolor,\n borderWidth: 1,\n }],\n labels: labels\n },\n options: {\n cutoutPercentage: 60,\n borderRadius: 30,\n // rotation: 1 * Math.PI,\n // circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var indice = tooltipItem.index;\n const value = data.datasets[0].data[indice] || 0\n const dataNum = Math.round(value * 100) / 100;\n return data.labels[indice] + ': ' + format.transform(data.datasets[0].data[indice]) + '';\n }\n }\n },\n legend: {\n display: true,\n position: 'right',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n // padding: 50,\n // fontSize: 11,\n }\n }\n }\n };\n\n\n\n\n const materialCtxnew = $('#material-used-new');\n this.materialVaccPieChartnew = new Chart(materialCtxnew, configcmr2);\n\n\n }\n\n\n\n prepareDataForPieChartGenderNew() {\n const format = this.numberFormatPipe;\n if (this.genderVaccPieChartNew) {\n this.genderVaccPieChartNew.destroy();\n }\n // console.log(\"this.vaccinationByAgeChartData\", this.vaccinationByAgeChartData)\n // const labels_data = Object.keys(this.vaccinationByAgeChartData);\n // const labels = labels_data.map(obj => obj.replace('vac_', '').replace('_', '-'));\n // labels.shift();\n // const data = Object.values(this.vaccinationByAgeChartData);\n // data.shift();\n var configuration = {\n type: 'pie',\n // data: {\n // labels: labels,\n // datasets: [{\n // type: 'bar',\n // label: 'Vaccinations By Age',\n // backgroundColor: \"rgb(85 86 253)\",\n // borderColor: \"rgb(85 86 253)\",\n // data: data,\n // }]\n // },\n\n data: {\n datasets: [{\n data: [\n // this.vaccinationByAgeChartData.total,\n this.topBlockReport?.vaccination?.male,\n this.topBlockReport?.vaccination?.female,\n this.topBlockReport?.vaccination?.others\n ],\n backgroundColor: ['rgb(84, 57, 252)', 'rgb(245, 67, 148)', 'rgb(255, 152, 0)'],\n borderWidth: 1,\n }],\n labels: ['Male', 'Female', 'Others']\n },\n options: {\n legend: {\n display: true,\n position: 'right',\n labels: {\n usePointStyle: true,\n // fontSize: 11,\n boxWidth: 6,\n // padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var indice = tooltipItem.index;\n const value = data.datasets[0].data[indice] || 0\n const dataNum = Math.round(value * 100) / 100;\n return data.labels[indice] + ': ' + format.transform(data.datasets[0].data[indice]) + '';\n }\n }\n },\n\n }\n };\n\n var ctx = $('#total-vaccinated-gender-new');\n this.genderVaccPieChartNew = new Chart(ctx, configuration);\n this.genderVaccPieChartNew.update();\n }\n\n loadVaccinationByAgeChartnew() {\n const format = this.numberFormatPipe;\n if (this.vaccinationByAgeChartNew) {\n this.vaccinationByAgeChartNew.destroy();\n }\n console.log(\"this.vaccinationByAgeChartData\", this.vaccinationByAgeChartData)\n const labels_data = Object.keys(this.vaccinationByAgeChartData);\n const labels = labels_data.map(obj => obj.replace('vac_', '').replace('_', '-'));\n labels.shift();\n\n const vac_15_17 = this.vaccinationByAgeChartData.vac_15_17\n const vac_18_45 = this.vaccinationByAgeChartData.vac_18_45\n const vac_45_60 = this.vaccinationByAgeChartData.vac_45_60\n const above_60 = this.vaccinationByAgeChartData.above_60\n const vac_12_14 = this.vaccinationByAgeChartData.vac_12_14\n // console.log(\"check\", vac_18_45);\n var configuration = {\n type: 'bar',\n\n data: {\n datasets: [\n {\n label: '12-14',\n data: [vac_12_14],\n backgroundColor: [\n // \"rgb(254, 125, 90)\",\n // \"rgb(243, 244, 249)\"\n 'rgb(1, 2, 13)'\n ],\n },\n {\n label: '15-17',\n data: [vac_15_17],\n backgroundColor: [\n // \"rgb(254, 125, 90)\",\n // \"rgb(243, 244, 249)\"\n // 'rgb(15, 22, 53)'\n 'rgb(50, 72, 158)'\n ],\n },\n {\n label: '18-44',\n data: [vac_18_45],\n // backgroundColor: 'rgb(50 72 158)'\n backgroundColor: 'rgb( 86, 90, 143)'\n\n\n },\n {\n label: '45-60',\n data: [vac_45_60],\n backgroundColor: 'rgb(2, 99, 255)'\n },\n {\n label: 'Above 60',\n data: [above_60],\n backgroundColor: 'rgb(100, 154, 241)'\n }\n ]\n\n\n },\n options: {\n legend: {\n display: true,\n position: 'right',\n labels: {\n usePointStyle: true,\n boxWidth: 6,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n title: function (tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n barThickness: 40,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n display: false\n\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-by-age-new');\n this.vaccinationByAgeChartNew = new Chart(ctx, configuration);\n this.vaccinationByAgeChartNew.update();\n }\n\n loadDataByStateTab(state_id = \"\", district_id = \"\") {\n console.log(\"sate\", state_id);\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n if(this.Heatmap !=undefined){\n this.Heatmap.getStatename(state_id);\n }\n this.statename = state_id;\n this.stateId = this.states.filter(e => e.state_name == state_id);\n this.chartFlag = true;\n console.log(\"stateId\", this.stateId)\n this.getDashboardData(this.stateId[0].state_id, district_id);\n this.getVacChartData();\n this.iconChange(this.stateId[0].state_id);\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n // this.getVaccChartAgewiseDataMonth('Last 30 Days')\n\n }\n\n getDistrictID(stateId) {\n // console.log(\"stateId\", stateId)\n this.publicReportService.getDistricts().subscribe((res) => this.districtListnew = res);\n if (stateId !== \"\") {\n this.districtListfromstate = this.districtListnew.filter(e => e.state_id == stateId);\n // console.log(this.districtListfromstate)\n }\n }\n\n\n loadDataByDitrictTab(district_name = \"\") {\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVaccAge = false;\n this.ismonthVaccAge = false;\n this.isweekVaccAge = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n\n this.statedistrict=this.districtListnew.filter(e => e.state_id == this.state_id);\n this.district = this.statedistrict.filter(e => e.district_name == district_name);\n // this.chartFlag = false;\nif(this.state_id !=\"\"){\n this.chartFlag = true;\n // this.getNewDashboardDataforDistrict(this.district[0].district_id);\n this.getDashboardData(this.state_id, this.district[0].district_id);\n this.getVacChartData();\n}\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n // this.getVaccChartAgewiseDataMonth('Last 30 Days')\n\n }\n\n filterFunction() {\n console.log(\"drop\")\n var input, filter, ul, li, a, i, txtValue;\n input = document.getElementById(\"myInput\");\n filter = input.value.toUpperCase();\n let div = document.getElementById(\"myDropdown\");\n a = div.getElementsByTagName(\"a\");\n for (i = 0; i < a.length; i++) {\n txtValue = a[i].textContent || a[i].innerText;\n if (txtValue.toUpperCase().indexOf(filter) > -1) {\n a[i].style.display = \"\";\n } else {\n a[i].style.display = \"none\";\n }\n }\n }\n\n\n getVacPerc(data, dose_type) {\n if (dose_type == 1) {\n return (data.partial_vaccinated / data.total).toFixed(2);\n } else {\n return (data.totally_vaccinated / data.total).toFixed(2)\n }\n }\n\n liveVaccChartStreaming12_14;\n prepareDataForLiveVaccStareaming12_14() {\n if (this.liveVaccChartStreaming12_14) {\n this.liveVaccChartStreaming12_14.destroy();\n }\n\n const ctx = $('#liveVacc12_14');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgba(243,201,42,0.55)',\n borderColor: 'rgb(243,201,42)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming12_14 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming12_14.update();\n }\n\n\n liveVaccChartStreaming15_17;\n prepareDataForLiveVaccStareaming15_17() {\n if (this.liveVaccChartStreaming15_17) {\n this.liveVaccChartStreaming15_17.destroy();\n }\n\n const ctx = $('#liveVacc15_17');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(178, 76, 194, 0.5)',\n borderColor: 'rgb(178, 76, 194)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming15_17 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming15_17.update();\n }\n\n\n liveVaccChartStreaming18_44;\n prepareDataForLiveVaccStareaming18_44() {\n if (this.liveVaccChartStreaming18_44) {\n this.liveVaccChartStreaming18_44.destroy();\n }\n\n const ctx = $('#liveVacc18_44');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(225, 75, 75, 0.5)',\n borderColor: 'rgb(225, 75, 75)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming18_44 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming18_44.update();\n }\n\n liveVaccChartStreaming45_60;\n prepareDataForLiveVaccStareaming45_60() {\n if (this.liveVaccChartStreaming45_60) {\n this.liveVaccChartStreaming45_60.destroy();\n }\n\n const ctx = $('#liveVacc45_60');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(52, 183, 82, 0.5)',\n borderColor: 'rgb(52, 183, 82)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(255, 255, 255)\",\n pointBorderWidth: 1.5,\n pointRadius: 2,\n fill: true,\n bezierCurve: false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming45_60 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming45_60.update();\n }\n\n liveVaccChartStreamingabove_60;\n prepareDataForLiveVaccStareamingabove_60() {\n if (this.liveVaccChartStreamingabove_60) {\n this.liveVaccChartStreamingabove_60.destroy();\n }\n\n const ctx = $('#liveVaccabove_60');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(94, 190, 93, 0.3)',\n borderColor: 'rgb(94, 190, 93)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(94, 190, 93)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n showScale: false,\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n // beginAtZero: true,\n // ticks: {\n // autoSkip: true,\n // maxTicksLimit: 5,\n // fontSize: 6,\n // display:false,\n // maxRotation: 0,\n // minRotation: 0,\n // fontColor: \"#000000\"\n // },\n // stacked: false,\n // gridLines: {\n // display: false,\n // drawBorder: true,\n // borderDash: [2, 4],\n // zeroLineWidth: 0.05,\n // zeroLineColor: '#000000'\n // },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingabove_60 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingabove_60.update();\n }\n\n\n prevsDataAge = {};\n updateCountTotalVaccAge = {'12_14': 0, '15_17': 0, '18_44': 0, '45_60': 0, 'above_60': 0};\n async updateDataAge() {\n const channelName = `covid_vaccination_bifurcation`;\n this.webSocket.listenAgeSocket(channelName).subscribe((data:any) => {\n let vacc_total_12_14 = data['vaccination_12_14_total'];\n let vacc_total_15_17 = data['vaccination_15_17_total'];\n let vacc_total_18_44 = data['vaccination_18_44_precaution_dose'] + data['vaccination_45_60_precaution_dose'];\n let vacc_total_45_60 = data['vaccination_above_60_precaution_dose'];\n // let vacc_total_above_60 = data['vaccination_above_60_total'];\n let label = moment(new Date()).format('HH:mm:ss');\n this.liveVaccChartStreaming12_14.data.labels.push(label);\n this.liveVaccChartStreaming15_17.data.labels.push(label);\n this.liveVaccChartStreaming18_44.data.labels.push(label);\n this.liveVaccChartStreaming45_60.data.labels.push(label);\n // this.liveVaccChartStreamingabove_60.data.labels.push(label);\n\n //12-14\n this.liveVaccChartStreaming12_14.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['12_14']) {\n diff = vacc_total_12_14 - this.prevsDataAge['12_14']\n }\n this.prevsDataAge['12_14'] = vacc_total_12_14;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['12_14']) {\n diff = vacc_total_12_14 - this.prevsDataAge['12_14']\n }\n this.prevsDataAge['12_14'] = vacc_total_12_14;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['12_14'] > this.numberOfElements) {\n this.liveVaccChartStreaming12_14.data.labels.shift();\n this.liveVaccChartStreaming12_14.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['12_14']++;\n }\n this.liveVaccChartStreaming12_14.update();\n this.liveVaccChartStreaming12_14 = this.liveVaccChartStreaming12_14;\n\n //15-17\n this.liveVaccChartStreaming15_17.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['15_17']) {\n diff = vacc_total_15_17 - this.prevsDataAge['15_17']\n }\n this.prevsDataAge['15_17'] = vacc_total_15_17;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['15_17']) {\n diff = vacc_total_15_17 - this.prevsDataAge['15_17']\n }\n this.prevsDataAge['15_17'] = vacc_total_15_17;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['15_17'] > this.numberOfElements) {\n this.liveVaccChartStreaming15_17.data.labels.shift();\n this.liveVaccChartStreaming15_17.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['15_17']++;\n }\n this.liveVaccChartStreaming15_17.update();\n this.liveVaccChartStreaming15_17 = this.liveVaccChartStreaming15_17;\n\n //18-44\n this.liveVaccChartStreaming18_44.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['18_44']) {\n diff = vacc_total_18_44 - this.prevsDataAge['18_44']\n }\n this.prevsDataAge['18_44'] = vacc_total_18_44;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['18_44']) {\n diff = vacc_total_18_44 - this.prevsDataAge['18_44']\n }\n this.prevsDataAge['18_44'] = vacc_total_18_44;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['18_44'] > this.numberOfElements) {\n this.liveVaccChartStreaming18_44.data.labels.shift();\n this.liveVaccChartStreaming18_44.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['18_44']++;\n }\n this.liveVaccChartStreaming18_44.update();\n this.liveVaccChartStreaming18_44 = this.liveVaccChartStreaming18_44;\n\n\n //45-60\n this.liveVaccChartStreaming45_60.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['45_60']) {\n diff = vacc_total_45_60 - this.prevsDataAge['45_60']\n }\n this.prevsDataAge['45_60'] = vacc_total_45_60;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['45_60']) {\n diff = vacc_total_45_60 - this.prevsDataAge['45_60']\n }\n this.prevsDataAge['45_60'] = vacc_total_45_60;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['45_60'] > this.numberOfElements) {\n this.liveVaccChartStreaming45_60.data.labels.shift();\n this.liveVaccChartStreaming45_60.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['45_60']++;\n }\n this.liveVaccChartStreaming45_60.update();\n this.liveVaccChartStreaming45_60 = this.liveVaccChartStreaming45_60;\n\n //above-60\n /*this.liveVaccChartStreamingabove_60.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['above_60']) {\n diff = vacc_total_above_60 - this.prevsDataAge['above_60']\n }\n this.prevsDataAge['above_60'] = vacc_total_above_60;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['above_60']) {\n diff = vacc_total_above_60 - this.prevsDataAge['above_60']\n }\n this.prevsDataAge['above_60'] = vacc_total_above_60;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['above_60'] > this.numberOfElements) {\n this.liveVaccChartStreamingabove_60.data.labels.shift();\n this.liveVaccChartStreamingabove_60.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['above_60']++;\n }\n this.liveVaccChartStreamingabove_60.update();\n this.liveVaccChartStreamingabove_60 = this.liveVaccChartStreamingabove_60; */\n });\n }\n\n loadIndiadata(){\n this.state_id = \"\";\n this.district_id = \"\";\n this.getDashboardData('','');\n this.getVacChartData('');\n }\n\n}\n","\n \n
\n\n\n \n \n
\n \n\n
\n \n
\n\n
\n \n
\n \n
\n \n \n \n\n
\n \n
\n \n \n\n
\n \n
\n\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n \n Registrations\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n Vaccinations\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n\n \n 0 \n
\n \n Partially Vaccinated\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n \n Fully Vaccinated\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n \n 12-14 Vaccinations\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n \n 15-17 Vaccinations\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n 18-59 Precaution Doses\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n 0 \n
\n \n 60+ Precaution Doses\n Today\n
\n\n \n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n \n India \n \n
\n \n \n {{ state.state_name }}\n \n \n \n \n \n {{ district.district_name }}\n
\n \n
\n \n \n \n\n \n Json\n
\n \n Excel\n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n {{ \"DASHBOARD.Total_Vaccination_Doses\" | translate }}\n ![](\"assets/images/info_icon.svg\"){kind=icon}
\n \n
\n {{\n topBlockReport?.vaccination?.total_doses | numberFormat\n }}\n
\n\n
\n \n {{\n topBlockReport?.vaccination?.tot_dose_1 | numberFormat\n }} \n
\n \n {{\n \"DASHBOARD.Dose_1\" | translate\n }}\n
\n \n {{\n topBlockReport?.vaccination?.tot_dose_2 | numberFormat\n }} \n
\n \n {{\n \"DASHBOARD.Dose_2\" | translate\n }}\n
\n \n {{\n topBlockReport?.vaccination?.tot_pd | numberFormat\n }} \n
\n \n {{\n \"Precaution Dose\" | translate\n }}\n
\n \n
\n \n \n
\n \n
\n \n {{ \"DASHBOARD.Sites_Conducting_Vaccination\" | translate }}\n \n \n
\n {{\n topBlockReport?.sites?.total | numberFormat\n }}\n
\n\n
\n \n \n {{ topBlockReport?.sites?.govt | numberFormat }}\n \n
\n \n {{\n \"DASHBOARD.Government\" | translate\n }}\n
\n \n \n {{ topBlockReport?.sites?.pvt | numberFormat }}\n \n
\n \n {{\n \"DASHBOARD.Private\" | translate\n }}\n
\n \n
\n \n \n \n
\n \n \n
\n \n
\n \n Total Registrations\n \n \n
\n {{\n topBlockReport?.registration?.total | numberFormat\n }}\n
\n\n
\n \n \n {{ topBlockReport?.registration?.cit_12_14 | numberFormat }}\n \n
\n \n Age 12-14\n \n
\n \n \n {{ topBlockReport?.registration?.cit_15_17 | numberFormat }}\n \n
\n \n {{ \"Age 15-17\" | translate }}\n \n
\n \n \n {{ topBlockReport?.registration?.cit_18_45 | numberFormat }}\n \n
\n \n {{ \"DASHBOARD.Age_18-44\" | translate }}\n \n
\n \n \n {{\n topBlockReport?.registration?.cit_45_above | numberFormat\n }}\n \n
\n \n {{ \"DASHBOARD.Age_45+\" | translate }}\n \n
\n \n \n \n
\n \n\n \n \n
\n \n \n {{ \"DASHBOARD.Vaccination_Trends\" | translate }}\n
\n
\n \n {{ \"DASHBOARD.Vaccination_Trends\" | translate }}\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n\n \n
\n \n
\n - \n
- \n
- \n
\n
\n\n - \n
- \n
- \n
- \n
\n
\n - \n
- \n
- \n
- \n
\n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n
\n \n
\n \n Vaccination By Gender\n
\n\n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n Vaccination By Type\n
\n\n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n Vaccination By Age\n
\n\n
\n \n
\n \n
\n \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {{\n tableData.precaution_dose\n | numberFormat\n }}\n
\n \n
\n \n Vaccination Coverage by State/UT\n
\n\n
\n \n \n {{\n tableData.totally_vaccinated\n | numberFormat\n }}\n
\n \n \n
\n \n
\n \n \n {{\n tableData.partial_vaccinated\n | numberFormat\n }}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n {{ tableData.total | numberFormat }}\n
\n \n
\n \n {{ tableData.title }} \n
\n \n \n {{ tableData.today | numberFormat }}\n
\n \n \n Today\n
\n \n \n Total\n
\n \n \n Dose 1\n
\n \n \n Dose 2\n
\n \n \n Precaution Dose\n
\n \n \n
\n \n \n \n \n \n\n \n
\n \n
\n \n Vaccination By Centers\n
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n {{\n tableData.title\n }}\n
\n \n
\n \n
\n Today
\n \n {{ tableData.today | numberFormat }}\n
\n \n
\n Total
\n \n {{ tableData.total | numberFormat }}\n
\n \n
\n Dose 1
\n \n {{\n tableData.partial_vaccinated\n | numberFormat\n }}\n
\n \n
\n Dose 2
\n \n {{\n tableData.totally_vaccinated\n | numberFormat\n }}\n
\n \n
\n \n Precaution Dose\n
\n \n {{\n tableData.precaution_dose\n | numberFormat\n }}\n
\n \n \n
\n\n \n
\n \n \n
\n \n \n {{ \"DASHBOARD.Registration_Trends\" | translate }}\n
\n
\n \n {{ \"DASHBOARD.Registration_Trends\" | translate }}\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n - \n
\n
\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n\n\n\n
\n \n
\n \n \n {{ \"HOME.AEFI_REPORTED\" | translate }}\n \n \n \n \n
\n \n \n \n \n {{ \"DASHBOARD.Overall\" | translate }} :\n {{ vaccinatedAefiPer }} %\n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n {{ \"DASHBOARD.Rural_Vs_Urban_Trend\" | translate }}\n
\n\n
\n \n
\n \n \n \n \n \n
\n \n
\n\n
\n \n
\n\n \n The figure displayed in the dose counter are provisional and are\n subject to reconciliation.\n
\n\n The figures for 18 years old (birth year 2004) are included in\n 18-44 age group.\n
\n\n
\n \n
\n
\n \n \n \n \n \n
\n \n
\n \n \n \n \n Ministry of Health and Family Welfare \n \n
\n \n \n \n
\n\n \n
\n \n \n \n \n \n\n \n \n
\n \n \n \n \n \n
\n \n \n \n\n \n\n
\n \n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n Verify Certificate\n \n FAQ\n \n\n \n \n
\n \n \n\n \n\n\n\n\n\n
\n \n\n \n \n\n\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'numberFormat'\n})\nexport class NumberFormatPipe implements PipeTransform {\n\n transform(value: number): string {\n let returnValue = '0';\n if (value) {\n returnValue = Number(''+value).toLocaleString('en-IN')\n }\n return returnValue;\n }\n\n}\n","import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { TokenInterceptor } from './interceptors/token.interceptor';\nimport { CountUpModule } from 'ngx-countup';\nimport { NumberFormatPipe } from './modules/pipe/number-format.pipe';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MainDashboardComponent } from './components/main-dashboard/main-dashboard.component';\nimport { RegistrationDashboardComponent } from './components/registration-dashboard/registration-dashboard.component';\nimport { VaccinationDashboardComponent } from './components/vaccination-dashboard/vaccination-dashboard.component';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { TabsModule } from 'ngx-bootstrap/tabs';\nimport { SharedModule } from './modules/shared/shared.module';\nimport { I18nModule } from './modules/i18n/i18n.module';\nimport { NewMainDashboardComponent } from './components/new-main-dashboard/new-main-dashboard.component';\nimport { HeatmapBubbleComponent } from './components/heatmap-bubble/heatmap-bubble.component';\n\n\n\n@NgModule({\n declarations: [\n AppComponent,\n NumberFormatPipe,\n MainDashboardComponent,\n RegistrationDashboardComponent,\n VaccinationDashboardComponent,\n NewMainDashboardComponent,\n HeatmapBubbleComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n HttpClientModule,\n CountUpModule,\n SharedModule,\n I18nModule,\n BrowserAnimationsModule,\n TooltipModule.forRoot(),\n TabsModule.forRoot()\n ],\n providers: [\n {\n provide: HTTP_INTERCEPTORS,\n useClass: TokenInterceptor,\n multi: true\n }\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n","import { HttpClient, HttpClientModule } from '@angular/common/http';\nimport { NgModule, Optional, SkipSelf } from '@angular/core';\nimport { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { i18nTranslateLoader } from './i18n-loader';\nimport { I18nService } from './i18n.service';\nimport { environment } from 'src/environments/environment';\n\n\n@NgModule({\n imports: [\n HttpClientModule,\n TranslateModule.forRoot()\n // TranslateModule.forRoot({\n // loader: {\n // provide: TranslateLoader,\n // useFactory: i18nTranslateLoader,\n // deps: [HttpClient]\n // }\n // }),\n ],\n exports: [TranslateModule]\n})\nexport class I18nModule {\n constructor(\n @Optional() @SkipSelf() parentModule: I18nModule,\n translate: TranslateService,\n i18nService: I18nService,\n ) {\n i18nService.init(environment.defaultLanguage, environment.supportedLanguages);\n }\n}\n\n","import { Observable } from 'rxjs';\nimport { Injectable } from '@angular/core';\nimport { environment } from 'src/environments/environment';\nimport {io} from 'socket.io-client';\n\n@Injectable({providedIn: 'root'})\nexport class WebSocketService {\n\n private socketLiveCounter: any;\n private socketLiveCounterAge: any;\n constructor() {\n this.liveCounterSocketConnect();\n }\n\n liveCounterSocketConnect() {\n try {\n this.socketLiveCounter = io(`${environment.socket_live_counter_url_port}`, {transports: ['websocket']}).connect();\n this.socketLiveCounterAge = io(`${environment.socket_live_counter_url_port_age}`, {transports: ['websocket']}).connect();\n } catch(err) {\n console.log(err);\n }\n }\n\n listen(eventName: string) {\n return new Observable((subscriber) => {\n this.socketLiveCounter.on(eventName, (data: any) => {\n subscriber.next(data);\n })\n })\n }\n\n listenAgeSocket(eventName: string) {\n return new Observable((subscriber) => {\n this.socketLiveCounterAge.on(eventName, (data: any) => {\n subscriber.next(data);\n })\n })\n }\n emit(eventName: string, data: any) {\n this.socketLiveCounter.emit(eventName, data);\n }\n\n disconnect() {\n if (this.socketLiveCounter) {\n try {\n this.socketLiveCounter.disconnect();\n } catch (error) {\n console.log(error);\n }\n }\n }\n disconnectAge() {\n if (this.socketLiveCounterAge) {\n try {\n this.socketLiveCounterAge.disconnect();\n } catch (error) {\n console.log(error);\n }\n }\n }\n}\n","import { Component, OnInit } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport { DeviceDetectorService } from 'ngx-device-detector';\nimport { ChartDataSets, ChartLegendItem, ChartOptions, ChartType, Chart } from 'chart.js';\nimport * as $ from 'jquery';\nimport { NumberFormatPipe } from '../../modules/pipe/number-format.pipe';\nimport { PublicReportService } from '../../modules/services/public-report.service';\nimport { ConfigurableFocusTrap } from '@angular/cdk/a11y';\nimport * as _ from 'lodash';\nimport * as _moment from 'moment';\nconst moment = _moment;\n\n@Component({\n selector: 'app-vaccination-dashboard',\n templateUrl: './vaccination-dashboard.component.html',\n styleUrls: ['./vaccination-dashboard.component.scss']\n})\nexport class VaccinationDashboardComponent implements OnInit {\n todaysdate;\n headerTextLbl = 'State';\n breadCrumbArr = [];\n type;\n state_id;\n state_name;\n district_id;\n district_name;\n vaccinationDashboardReport = [];\n vaccinationData;\n vaccinationTrendChartData;\n vaccinationTrendChart;\n vaccinationCoverageByStateChartData;\n vaccinationCoverageByStateChart;\n vaccinationByAgeChartData;\n vaccinationByAgeChart;\n vaccinationDoseChartData;\n vaccinationDoseChart;\n vaccinationBrandChartData;\n vaccinationBrandChart;\n vaccinationAEFIChartData;\n vaccinationAEFIChart;\n vaccinatedAefiPer = 0;\n constructor(\n private publicReportService: PublicReportService,\n public deviceService: DeviceDetectorService,\n public datepipe: DatePipe,\n public numberFormatPipe: NumberFormatPipe\n ) { }\n\n ngOnInit(): void {\n this.todaysdate = new Date();\n this.todaysdate = this.datepipe.transform(this.todaysdate, 'yyyy-MM-dd');\n this.publicReportService.filterParams.date = this.datepipe.transform(this.todaysdate, 'yyyy-MM-dd');\n this.publicReportService.getDistrictname().subscribe(val => {\n if (val && val != undefined) {\n this.district_name = val;\n }\n })\n this.publicReportService.getDistrictID().subscribe(val => {\n if (val && val != undefined) {\n this.district_id = val;\n }\n })\n this.publicReportService.getSessionStatus().subscribe(val => {\n if (val && val != undefined) {\n this.state_id = val;\n }\n })\n this.publicReportService.getStatename().subscribe(val => {\n if (val && val != undefined) {\n this.state_name = val;\n }\n })\n //console.log(this.publicReportService);\n }\n\n nextLevel(type) {\n console.log(type);\n console.log(this.state_id+'-'+this.state_name+'- '+this.district_id+' -'+this.district_name);\n this.publicReportService.tabname.next(\"Vaccination\");\n this.headerTextLbl = type;\n if (this.headerTextLbl == 'Center') {\n return;\n } else if (this.headerTextLbl === 'India') {\n this.breadCrumbArr = [];\n this.district_id=\"\";\n this.district_name = \"\";\n this.state_id = \"\";\n this.headerTextLbl = 'State';\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.districtname.next(this.district_name);\n this.publicReportService.type.next(\"India\");\n this.publicReportService.isnational.next(true);\n this.getVaccinationDashboard(this.todaysdate,this.state_id,this.district_id);\n } else if (this.headerTextLbl === 'State') {\n this.breadCrumbArr = [];\n this.district_id=\"\";\n this.district_name = \"\";\n if(this.breadCrumbArr.length == 0){\n this.breadCrumbArr.push({\n type: 'India',\n id: '',\n name: 'India'\n });\n this.breadCrumbArr.push({\n type: 'State',\n id: this.state_id,\n state_id: this.state_id,\n state_name: this.state_name,\n name: this.state_name\n });\n }\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n this.publicReportService.statename.next(this.state_name);\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.districtname.next(this.district_name);\n this.publicReportService.isnational.next(false);\n this.publicReportService.type.next(\"State\");\n this.getVaccinationDashboard(this.todaysdate,this.state_id,this.district_id);\n } else if (this.headerTextLbl === 'District') {\n this.breadCrumbArr = [];\n this.breadCrumbArr.push({\n type: 'India',\n id: '',\n name: 'India'\n });\n this.breadCrumbArr.push({\n type: 'State',\n id: this.state_id,\n state_name: this.state_name,\n state_id: this.state_id,\n name: this.state_name\n });\n\n this.breadCrumbArr.push({\n type: 'District',\n id: this.district_id,\n district_id: this.district_id,\n district_name: this.district_name,\n name: this.district_name\n });\n\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n this.publicReportService.statename.next(this.state_name);\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.districtname.next(this.district_name);\n this.publicReportService.isnational.next(false);\n this.publicReportService.type.next(\"District\");\n this.getVaccinationDashboard(this.todaysdate,this.state_id,this.district_id);\n }\n\n }\n\n getVaccinationDashboard(datefilter,state_id,district_id) {\n\n this.publicReportService.getVaccinationDashboardData(state_id, district_id, this.todaysdate).subscribe(res => {\n this.vaccinationDashboardReport = res;\n this.vaccinatedAefiPer = res.aefiPercentage;\n this.vaccinationData = res.topBlock;\n this.vaccinationTrendChartData = res.vaccinationDoneByTime;\n this.vaccinationCoverageByStateChartData = res.getBeneficiariesGroupBy;\n this.vaccinationByAgeChartData = res.vaccinationByAge;\n this.vaccinationDoseChartData = res.last7DaysVaccination;\n this.vaccinationBrandChartData = res.last7DaysVaccination;\n this.vaccinationAEFIChartData = res.last7DaysVaccination;\n this.loadVaccinationTrendChart();\n this.loadVaccinationCoverageByState();\n this.loadVaccinationByAgeChart();\n this.loadVaccinationDoseLastSevenDaysChart();\n this.loadVaccinationAEFIChart();\n this.loadVaccinationBrandLastSevenDaysChart();\n },\n err => {\n console.log(\"error\", err)\n this.vaccinationDashboardReport = [];\n });\n }\n\n //vaccination trends chart\n loadVaccinationTrendChart() {\n if (this.vaccinationTrendChart) {\n this.vaccinationTrendChart.destroy();\n }\n const labels = _.map(this.vaccinationTrendChartData, 'label');\n const total = _.map(this.vaccinationTrendChartData, 'count');\n const dose_1 = _.map(this.vaccinationTrendChartData, 'dose_one');\n const dose_2 = _.map(this.vaccinationTrendChartData, 'dose_two');\n const format = this.numberFormatPipe;\n var configuration = {\n type: 'horizontalBar',\n data: {\n labels: labels,\n datasets: [\n {\n label: \"Total\",\n backgroundColor: \"rgb(242, 9, 251, 0.5)\",\n borderColor: 'rgb(242, 9, 251)',\n data: total,\n borderWidth: 2,\n pointBackgroundColor: \"rgb(167, 0 , 73)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: false\n },\n {\n label: \"Dose 1\",\n backgroundColor: \"rgb(20, 232, 251, 0.5)\",\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: false,\n data: dose_1\n\n },\n {\n label: \"Dose 2\",\n backgroundColor: \"rgb(251, 167, 20, 0.5)\",\n borderColor: 'rgb(251, 167, 20)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: false,\n data: dose_2\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 9,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.xLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }],\n yAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }]\n }\n }\n };\n const ctx = $('#vaccination-trends');\n this.vaccinationTrendChart = new Chart(ctx, configuration);\n this.vaccinationTrendChart.update();\n }\n\n //vaccination coverage by state\n loadVaccinationCoverageByState() {\n const format = this.numberFormatPipe;\n if (this.vaccinationCoverageByStateChart) {\n this.vaccinationCoverageByStateChart.destroy();\n }\n //vaccinationCoverageByStateChartData\n const labels = _.map(this.vaccinationCoverageByStateChartData, 'title')\n //const total = _.map(this.vaccinationCoverageByStateChartData,'total')\n const partially_vaccinated = _.map(this.vaccinationCoverageByStateChartData, 'partial_vaccinated')\n const totally_vaccinated = _.map(this.vaccinationCoverageByStateChartData, 'totally_vaccinated')\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'bar',\n label: 'Partially Vaccinated',\n backgroundColor: \"rgb(242, 9, 251, 0.5)\",\n borderColor: \"rgb(242, 9, 251, 0.5)\",\n data: partially_vaccinated,\n },\n {\n type: 'bar',\n label: 'Fully Vaccinated',\n backgroundColor: \"rgb(20, 232, 251, 0.5)\",\n borderColor: \"rgb(20, 232, 251, 0.5)\",\n data: totally_vaccinated,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-coverage-by-state');\n this.vaccinationCoverageByStateChart = new Chart(ctx, configuration);\n this.vaccinationCoverageByStateChart.update();\n\n }\n\n //vaccination By Age\n loadVaccinationByAgeChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationByAgeChart) {\n this.vaccinationByAgeChart.destroy();\n }\n const labels_data = Object.keys(this.vaccinationByAgeChartData);\n const labels = labels_data.map(obj => obj.replace('vac_', '').replace('_', '-'));\n labels.shift();\n const data = Object.values(this.vaccinationByAgeChartData);\n data.shift();\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Vaccinations By Age',\n backgroundColor: \"rgb(245, 67, 148)\",\n borderColor: \"rgb(245, 67, 148)\",\n data: data,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-by-age');\n this.vaccinationByAgeChart = new Chart(ctx, configuration);\n this.vaccinationByAgeChart.update();\n }\n\n //vaccination trend last 7 days (stacked by dose)\n loadVaccinationDoseLastSevenDaysChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationDoseChart) {\n this.vaccinationDoseChart.destroy();\n }\n const labels = this.vaccinationDoseChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const doseOne = this.vaccinationDoseChartData.map(obj => obj.dose_one);\n const doseTwo = this.vaccinationDoseChartData.map(obj => obj.dose_two);\n\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Dose 1',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: doseOne,\n }, {\n type: 'bar',\n label: 'Dose 2',\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n data: doseTwo,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-trends-seven-days');\n this.vaccinationDoseChart = new Chart(ctx, configuration);\n this.vaccinationDoseChart.update();\n }\n\n //load AEFI report\n loadVaccinationAEFIChart() {\n const format = this.numberFormatPipe;\n\n if (this.vaccinationAEFIChart) {\n this.vaccinationAEFIChart.destroy();\n }\n const labels = this.vaccinationAEFIChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const data = _.map(this.vaccinationAEFIChartData, 'aefi');\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'AEFI',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: data,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n // callback: function (label, index, labels) {\n // return label / 1000 + 'k';\n // }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-aefi-seven-days');\n this.vaccinationAEFIChart = new Chart(ctx, configuration);\n this.vaccinationAEFIChart.update();\n\n }\n\n //vaccination brand last 7 days chart\n loadVaccinationBrandLastSevenDaysChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationBrandChart) {\n this.vaccinationBrandChart.destroy();\n }\n const labels = this.vaccinationBrandChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const doseOne = this.vaccinationBrandChartData.map(obj => obj.covishield);\n const doseTwo = this.vaccinationBrandChartData.map(obj => obj.covaxin);\n\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Covishield',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: doseOne,\n }, {\n type: 'bar',\n label: 'Covaxin',\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n data: doseTwo,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-brand-seven-days');\n this.vaccinationBrandChart = new Chart(ctx, configuration);\n this.vaccinationBrandChart.update();\n }\n}\n","\n
\n \n\n \n\n\n \n\n
\n\n\n \n
\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'titleCaseCustom'\n})\nexport class TitleCaseCustomPipe implements PipeTransform {\n\n transform(value: string): string {\n let returnString = '';\n if (value) {\n const splitString = value.split(\" \");\n var final = [];\n for(var i=0; i< splitString.length; i++) {\n var d = splitString[i];\n\n if (d) {\n try {\n var c = d[0].toUpperCase()+d.substring(1, d.length)\n final.push(c);\n } catch(e) {\n console.log('--------');\n console.log(d);\n console.log('--------');\n }\n }\n }\n returnString = final.join(' ');\n }\n return returnString;\n }\n\n}\n","import { Injectable } from '@angular/core';\nimport { TranslateService, LangChangeEvent } from '@ngx-translate/core';\nimport { Subscription } from 'rxjs';\nimport { Observable, Subject } from 'rxjs';\n\nimport en from 'src/assets/i18n/en.json';\nimport hi from 'src/assets/i18n/hi.json';\nimport mr from 'src/assets/i18n/mr.json';\nimport ml from 'src/assets/i18n/ml.json';\nimport pb from 'src/assets/i18n/pb.json';\nimport te from 'src/assets/i18n/te.json';\nimport gu from 'src/assets/i18n/gu.json';\nimport as from 'src/assets/i18n/as.json';\nimport be from 'src/assets/i18n/be.json';\nimport ka from 'src/assets/i18n/ka.json';\nimport or from 'src/assets/i18n/or.json';\nimport ta from 'src/assets/i18n/ta.json';\n\nconst languageKey = 'language';\n\n/**\n * Pass-through function to mark a string for translation extraction.\n * Running `npm translations:extract` will include the given string by using this.\n * @param s The string to extract for translation.\n * @return The same string.\n */\nexport function extract(s: string) {\n return s;\n}\n\n@Injectable({\n providedIn: 'root'\n})\nexport class I18nService {\n\n defaultLanguage!: string;\n supportedLanguages!: object[];\n langChanged = new Subject\n \n\n \n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Total Vaccinated
\n\n {{ this.vaccinationData?.vaccination?.total | numberFormat }}\n
\n\n\n
\n \n Male\n
\n \n {{\n this.vaccinationData?.vaccination?.male\n | numberFormat\n }}\n
\n\n Female\n
\n \n {{\n this.vaccinationData?.vaccination?.female\n | numberFormat\n }}\n
\n\n Others\n
\n \n {{\n this.vaccinationData?.vaccination?.others\n | numberFormat\n }}\n
\n\n
\n \n
\n \n \n
\n \n
\n Vaccination Centers
\n\n {{ vaccinationData?.sites?.total | numberFormat }}\n
\n\n\n
\n \n Government\n
\n \n {{ vaccinationData?.sites?.govt | numberFormat }}\n
\n\n Private\n
\n \n {{ vaccinationData?.sites?.pvt | numberFormat }}\n
\n\n
\n \n
\n \n
\n \n
\n Vaccination Doses Administered
\n\n {{\n vaccinationData?.vaccination?.total_doses | numberFormat\n }}\n
\n\n\n
\n \n Dose 1\n
\n \n {{\n vaccinationData?.vaccination?.tot_dose_1 | numberFormat\n }}\n
\n\n Dose 2\n
\n \n {{\n vaccinationData?.vaccination?.tot_dose_2 | numberFormat\n }}\n
\n\n \n \n\n \n \n
\n \n
\n \n
\n Vaccination Trend - {{todaysdate | date: 'dd/MM/yyyy'}}
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n Vaccination Trend (Last 7 Days)\n
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n Vaccination by Age\n \n
\n
\n Vaccination by Age\n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n
\n Vaccination Coverage
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n \n\n \n \n
\n \n
\n \n
\n AEFI Reported
\n Overall : {{ vaccinatedAefiPer }} %\n\n \n \n \n \n \n \n
\n \n\n \n \n \n \n
\n \n
\n \n
\n Vaccination by Brand
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n \n \n
\n","import { WebSocketService } from './../../modules/services/websocket.service';\nimport { NumberFormatPipe } from '../../modules/pipe/number-format.pipe';\nimport { switchMap,startWith } from 'rxjs/operators';\nimport { PublicReportService } from '../../modules/services/public-report.service';\nimport { Component, OnInit, EventEmitter, Output } from '@angular/core';\nimport * as $ from 'jquery';\nimport { ChartDataSets, ChartLegendItem, ChartOptions, ChartType, Chart } from 'chart.js';\nimport * as _ from 'lodash';\nimport * as _moment from 'moment';\nconst moment = _moment;\nimport { DeviceDetectorService } from 'ngx-device-detector';\nimport { Observable } from 'rxjs';\n// import { Console } from 'console';\nimport { DatePipe } from '@angular/common';\nimport { TranslateService } from '@ngx-translate/core';\nimport * as Excel from 'exceljs/dist/exceljs.min.js'\nimport * as fs from 'file-saver';\nimport { saveAs } from 'file-saver';\nimport { interval, Subscription } from 'rxjs';\nimport { environment } from 'src/environments/environment';\n\n// import { timeStamp } from 'console';\n\n@Component({\n selector: 'app-main-dashboard',\n templateUrl: './main-dashboard.component.html',\n styleUrls: ['./main-dashboard.component.scss']\n})\nexport class MainDashboardComponent implements OnInit {\n @Output() clickevent = new EventEmitter();\n selectedTabLabel = '';\n headerTextLbl = 'State';\n breadCrumbArr = [];\n title = 'cowindashboard';\n reportData;\n stateWiseBeneficiaries;\n dailySessionsSummaryByState;\n dailySessionsData;\n vaccinationDataAtDiffTimes;\n vaccinePlannedGivenData;\n vaccinatedBeneficiaryByGender;\n vaccinatedBeneficiaryByMaterial;\n vaccinationCoverageByStateChartData;\n vaccinationCoverageByStateChart;\n vaccinationDoseChartData;\n vaccinationDoseChart;\n vaccinationBrandChartData;\n vaccinationBrandChart;\n vaccinationAEFIChartData;\n vaccinationAEFIChart;\n vaccinatedAefiPer = 0;\n realTimeChart;\n realTimeChart30Days\n lineChartData;\n vaccinationByDay;\n updateInterval = 300;\n numberOfElements = 10;\n vaccinationDoneByDay;\n stateArr;\n states;\n statename;\n heading = 'National';\n myChartGender;\n myChartBenficiariesVsVaccinated;\n myChartTotalVaccinatedByMaterial;\n myChartTodayTotalVaccination;\n myChartForSessionData;\n districtArr;\n districtList;\n districtListfromstate = [];\n district_id;\n state_id;\n districtname;\n totally_vaccinated;\n todaysdate;\n site_logo;\n cowinlogo;\n isnational = true;\n mobile = false;\n onload = true;\n districtId;\n datechange;\n totalDoseOne;\n totalDoseTwo;\n myChartDose1VsDose2;\n totaldoses;\n tableheader;\n isStates;\n topBlockReport;\n lineChartDataNew = [];\n lastSevenDaysReg = [];\n getBeneficiariesGroupBy = [];\n last7DaysVaccination = [];\n lastSevenDaysAppointment = [];\n\n lastSevenDayVaccChart;\n lastSevenDayChart;\n genderVaccPieChart;\n materialVaccPieChart;\n lastSevenDayAppointmentChart;\n dailyCapVsUtilizeChart;\n dailyCapVsUtilizeData = [];\n Last5daysCenterData = [];\n Last5daysCenterChart;\n Top10States = [];\n Top10StatesChart;\n CowinStatistics;\n CowinStatisticsChart;\n ChartHeading;\n columnheading;\n chartFlag;\n vaccinationByAgeChart;\n vaccinationByAgeChartData;\n last30DaysVaccinationData;\n weeklyReportData;\n realTimeChartweek;\n realTimeChartlast30days;\n isday=false;\n ismonth = true;\n isweek;\n isdayReg;\n ismonthReg;\n isweekReg;\n sortDir = 1;//1= 'ASE' -1= DSC;\n registartionChartData;\n registartionChartDataMonth;\n registartionChartDataAll;\n registartionChart;\n registartionChartMonth;\n registartionChartAll;\n isByAge;\n isByDoses;\n vaccinationAgeDataToday;\n vaccinationAgeChartToday;\n isdayVacc;\n ismonthVacc;\n isweekVacc;\n vaccinationAgeDataMonth;\n vaccinationAgeChartMonth;\n vaccinationAgeDataAll;\n vaccinationAgeChartAll;\n vaccinationUpTrendsChart;\n vaccinationUpTrendsData;\n registrationUpTrendsChart;\n registrationUpTrendsData;\n isByCategory;\n vaccinationByCategoryChart;\n vaccinationByCategoryData;\n isupTrendToday = false;\n isupTrendMonth = true;\n isupTrendAll = false;\n vaccinationUpTrendsMonthChart;\n vaccinationUpTrendsMonthData;\n vaccinationUpTrendsAllChart;\n vaccinationUpTrendsAllData;\n secondHalf;\n DownlloadVaccinationDoneByTime: any;\n DownlloadVaccinationDoneByTimeAgeWise: any;\n Downloadlast30DaysVaccination: any;\n DownloadweeklyReport: any;\n Downloadlast30DaysAgeWiseVaccination: any;\n DownloadweeklyVacAgeWiseReport: any;\n DownlloadImeWiseTodayRegReport: any;\n DownloadRegReportData: any;\n DownloadRegWeekReportData: any;\n DownlloadLast30DaysAefi: any;\n DownlloadVaccinationByAge: any;\n VaccinationData: any;\n isState: any;\n isDistrict: any;\n vaccinationByAgefinalResult: any = [];\n downloadExcelHeader: any;\n downloadExcelHeaderForCoverage: any;\n options: any = {\n useGrouping: false,\n formattingFn: (n:number) => n.toLocaleString('en-IN')\n }\n counterFlag=false;\n liveVaccChart;\n liveVaccData\n ReportGenerateTime;\n constructor(private publicReportService: PublicReportService,\n public deviceService: DeviceDetectorService,\n public datepipe: DatePipe,\n public numberFormatPipe: NumberFormatPipe,\n private translate: TranslateService,\n private webSocket: WebSocketService) { }\n\n ngOnInit(): void {\n this.todaysdate = new Date();\n this.todaysdate = this.datepipe.transform(this.todaysdate, 'yyyy-MM-dd')\n // document.getElementById(\"dateId\").setAttribute(\"max\", this.todaysdate);\n //console.log(\"this.todaysdate\", this.todaysdate)\n if (window.screen.width === 360 || window.screen.width === 768) { // 768px portrait\n this.mobile = true;\n }\n this.states = [\n {\n \"state_id\": 1,\n \"state_code\": \"AN\",\n \"state_name\": \"Andaman and Nicobar Islands\"\n },\n {\n \"state_id\": 2,\n \"state_code\": \"AP\",\n \"state_name\": \"Andhra Pradesh\"\n },\n {\n \"state_id\": 3,\n \"state_code\": \"AR\",\n \"state_name\": \"Arunachal Pradesh\",\n\n },\n {\n \"state_id\": 4,\n \"state_code\": \"AS\",\n \"state_name\": \"Assam\"\n },\n {\n \"state_id\": 5,\n \"state_code\": \"BR\",\n \"state_name\": \"Bihar\"\n },\n {\n \"state_id\": 6,\n \"state_code\": \"CH\",\n \"state_name\": \"Chandigarh\"\n },\n {\n \"state_id\": 7,\n \"state_code\": \"CG\",\n \"state_name\": \"Chhattisgarh\"\n },\n {\n \"state_id\": 8,\n \"state_code\": \"DH\",\n \"state_name\": \"Dadra and Nagar Haveli\"\n },\n {\n \"state_id\": 37,\n \"state_code\": \"DD\",\n \"state_name\": \"Daman and Diu\"\n },\n {\n \"state_id\": 9,\n \"state_code\": \"DL\",\n \"state_name\": \"Delhi\"\n },\n {\n \"state_id\": 10,\n \"state_code\": \"GA\",\n \"state_name\": \"Goa\"\n },\n {\n \"state_id\": 11,\n \"state_code\": \"GJ\",\n \"state_name\": \"Gujarat\"\n },\n {\n \"state_id\": 12,\n \"state_code\": \"HR\",\n \"state_name\": \"Haryana\"\n },\n {\n \"state_id\": 13,\n \"state_code\": \"HP\",\n \"state_name\": \"Himachal Pradesh\"\n },\n {\n \"state_id\": 14,\n \"state_code\": \"JK\",\n \"state_name\": \"Jammu and Kashmir\"\n },\n {\n \"state_id\": 15,\n \"state_code\": \"JH\",\n \"state_name\": \"Jharkhand\"\n },\n {\n \"state_id\": 16,\n \"state_code\": \"KA\",\n \"state_name\": \"Karnataka\"\n },\n {\n \"state_id\": 17,\n \"state_code\": \"KL\",\n \"state_name\": \"Kerala\"\n },\n {\n \"state_id\": 18,\n \"state_code\": \"LA\",\n \"state_name\": \"Ladakh\"\n },\n {\n \"state_id\": 19,\n \"state_code\": \"LD\",\n \"state_name\": \"Lakshadweep\"\n },\n {\n \"state_id\": 20,\n \"state_code\": \"MP\",\n \"state_name\": \"Madhya Pradesh\"\n },\n {\n \"state_id\": 21,\n \"state_code\": \"MH\",\n \"state_name\": \"Maharashtra\"\n },\n {\n \"state_id\": 22,\n \"state_code\": \"MN\",\n \"state_name\": \"Manipur\"\n },\n {\n \"state_id\": 23,\n \"state_code\": \"ML\",\n \"state_name\": \"Meghalaya\"\n },\n {\n \"state_id\": 24,\n \"state_code\": \"MZ\",\n \"state_name\": \"Mizoram\"\n },\n {\n \"state_id\": 25,\n \"state_code\": \"NL\",\n \"state_name\": \"Nagaland\"\n },\n {\n \"state_id\": 26,\n \"state_code\": \"OD\",\n \"state_name\": \"Odisha\"\n },\n {\n \"state_id\": 27,\n \"state_code\": \"PY\",\n \"state_name\": \"Puducherry\"\n },\n {\n \"state_id\": 28,\n \"state_code\": \"PB\",\n \"state_name\": \"Punjab\"\n },\n {\n \"state_id\": 29,\n \"state_code\": \"RJ\",\n \"state_name\": \"Rajasthan\"\n },\n {\n \"state_id\": 30,\n \"state_code\": \"SK\",\n \"state_name\": \"Sikkim\"\n },\n {\n \"state_id\": 31,\n \"state_code\": \"TN\",\n \"state_name\": \"Tamil Nadu\"\n },\n {\n \"state_id\": 32,\n \"state_code\": \"TS\",\n \"state_name\": \"Telangana\"\n },\n {\n \"state_id\": 33,\n \"state_code\": \"TR\",\n \"state_name\": \"Tripura\"\n },\n {\n \"state_id\": 34,\n \"state_code\": \"UP\",\n \"state_name\": \"Uttar Pradesh\"\n },\n {\n \"state_id\": 35,\n \"state_code\": \"UK\",\n \"state_name\": \"Uttarakhand\"\n },\n {\n \"state_id\": 36,\n \"state_code\": \"WB\",\n \"state_name\": \"West Bengal\"\n }\n\n ]\n\n this.publicReportService.getSessionStatus().subscribe(val => {\n\n if (val && val != undefined) {\n // console.log(\"checking\", val);\n this.stateArr = this.states.find(e => e.state_id == val);\n this.heading = this.stateArr.state_name;\n this.site_logo = this.stateArr.state_code;\n this.state_id = val;\n // console.log(\"this.stateArr\", this.stateArr)\n }\n })\n\n this.publicReportService.getDistrictID().subscribe(val => {\n if (val && val != undefined) {\n // console.log(\"checking\", val);\n\n this.district_id = val;\n\n }\n })\n this.publicReportService.tabname.next(\"Dashboard\");\n // this.getNewDashboardData();\n this.site_logo = this.publicReportService.filterParams.site_logo;\n this.heading = this.publicReportService.filterParams.heading;\n this.isday = false;\n this.ismonth = true;\n this.isweek = false;\n// this.getVacChartData('Last 30 Days');\nthis.getVaccByTab('By Doses')\nthis.getLiveVaccinationCounter();\n// this.getDataForLiveVaccCountChart();\nsetTimeout(() => {\n this.prepareDataForLiveVaccStareaming();\n this.prepareDataForLiveVaccStareamingRegistration();\n this.prepareDataForLiveVaccStareamingPartialVacc();\n this.prepareDataForLiveVaccStareamingFullyVacc();\n\n this.prepareDataForLiveVaccStareaming15_17();\n this.prepareDataForLiveVaccStareaming18_44();\n this.prepareDataForLiveVaccStareaming45_60();\n // this.prepareDataForLiveVaccStareamingabove_60();\n this.updateDataAge();\n}, 1)\n }\n\n getNewDashboardData(state_id = \"\", district_id = \"\") {\n\n this.publicReportService.tabname.next(\"Dashboard\");\n\n // state_id = this.state_id;\n // district_id = this.district_id;\n\n\n\n this.state_id = state_id;\n this.district_id = district_id;\n //console.log(\"this.state_id\", this.state_id)\n //console.log(\"this.district_id\", this.district_id)\n this.chartFlag = (district_id) ? true : false;\n if(district_id || state_id){\n this.counterFlag=true\n }else{\n this.counterFlag=false\n }\n this.publicReportService.tabname.next(\"Dashboard\");\n if (district_id == '' || district_id == undefined)\n this.getDistrictList(state_id);\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n if (this.state_id == \"\") {\n this.publicReportService.isnational.next(true);\n this.districtListfromstate = [];\n }\n this.publicReportService.getPublicReports(state_id, district_id, this.todaysdate).subscribe(res => {\n //console.log(\"res\",res);\n this.publicReportService.tabname.next(\"Dashboard\");\n this.reportData = res;\n this.ReportGenerateTime = res.timestamp;\n // console.log(\"this.ReportGenerateTime\", this.ReportGenerateTime)\n // this.ReportGenerateTime = this.datepipe.transform(this.ReportGenerateTime, 'yyyy/MM/dd hh:mm a');\n this.ReportGenerateTime = moment(this.ReportGenerateTime).format('yyyy/MM/DD hh:mm a')\n // if(this.ReportGenerateTime){\n // this.tConvert(this.ReportGenerateTime);\n // }\n // console.log(\"this.ReportGenerateTime1\", this.ReportGenerateTime)\n this.topBlockReport = res.topBlock;\n this.vaccinatedAefiPer = res.aefiPercentage;\n this.lineChartDataNew = res.vaccinationDoneByTime;\n this.DownlloadVaccinationDoneByTime = res.vaccinationDoneByTime;\n this.DownlloadVaccinationDoneByTimeAgeWise = res.vaccinationDoneByTimeAgeWise;\n this.DownlloadImeWiseTodayRegReport = res.timeWiseTodayRegReport;\n this.DownlloadLast30DaysAefi = res.last30DaysAefi;\n this.DownlloadVaccinationByAge = res.vaccinationByAge;\n\nthis.liveVaccData = res.vaccinationDoneByTime;\n\n this.lastSevenDaysReg = res.last7DaysRegistration;\n this.getBeneficiariesGroupBy = _.orderBy(res.getBeneficiariesGroupBy, 'total',\n 'desc');\n\n this.vaccinationCoverageByStateChartData = _.orderBy(res.getBeneficiariesGroupBy, 'total',\n 'desc');\n this.vaccinationBrandChartData = res.last7DaysVaccination;\n this.vaccinationAEFIChartData = res.last30DaysAefi;\n // this.last7DaysVaccination = res.last7DaysVaccination;\n this.lastSevenDaysAppointment = res.last7DaysRegistration;\n // this.vaccinationDoseChartData = res.last7DaysVaccination;\n this.dailyCapVsUtilizeData = res.last7DaysVaccination;\n this.Last5daysCenterData = res.last5daySessionStatus;\n this.Top10States = res.topUtilization;\n this.CowinStatistics = res.verificationMethod;\n this.vaccinationByAgeChartData = res.vaccinationByAge;\n this.registartionChartData = res.timeWiseTodayRegReport;\n this.vaccinationUpTrendsData = res.vaccinationDoneByTimeUptrend;\n this.registrationUpTrendsData = res.timeWiseTodayRegReportUptrend;\n\n // console.log(\" this.vaccinationByCategoryData11 \", this.vaccinationByCategoryData )\n // this.vaccinationAgeDataToday = res.vaccinationDoneByTimeAgeWise;\n // console.log(\"this.vaccinationAgeDataToday12\",this.vaccinationAgeDataToday)\n this.prepareDataForSemiPieChartsNew();\n this.prepareDataForLineGraphNew();\n\n if (res.timeWiseTodayRegReport) {\n this.prepareDataForRegChart();\n }\n // this.prepareDataForVaccinationByCategory()\n // this.prepareDataForStackedBarRegGraphNew();\n // this.prepareDataForLastSevenDaysVacc();\n // this.prepareDataForDailyCapacityVsUtilization();\n // this.prepareDataFor5daysCenterAnalysis();\n // this.prepareDataForTop10StatesByCoverage();\n // this.prepareDataForCowinStatistics();\n if (!this.chartFlag) {\n this.loadVaccinationCoverageByState();\n }\n // console.log(\"vaccinationCoverageByStateChartData\", this.vaccinationCoverageByStateChartData)\n this.loadVaccinationAEFIChart();\n // this.loadVaccinationBrandLastSevenDaysChart();\n // this.loadVaccinationDoseLastSevenDaysChart();\n this.loadVaccinationByAgeChart();\n\n // this.prepareDataForVaccinationUpTrends();\n // this.prepareDataForRegistarionUpTrends();\n\n // this.isday = true;\n // this.ismonth = false;\n // this.isweek = false;\n\n // this.isdayReg = true;\n // this.ismonthReg = false;\n // this.isweekReg = false;\n this.isByDoses = true;\n this.isByAge = false;\n this.isdayReg = true;\n // this.isdayVacc = false;\n // this.ismonthVacc = false;\n // this.isweekVacc = false;\n // this.isByCategory = false;\n // this.isupTrendToday = true;\n // this.isupTrendMonth = false;\n // this.isupTrendAll = false;\n if (this.state_id === '' && this.district_id === '') {\n this.tableheader = \" State/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n this.downloadExcelHeader = \"StateWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"StateWiseVaccinationCoverage\"\n } else if (this.state_id != '' && this.district_id == '') {\n this.tableheader = \" Districts\";\n this.ChartHeading = \"Top Districts by Capacity Utilization\"\n this.downloadExcelHeader = \"DistrictWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"DistrictWiseVaccinationCoverage\"\n } else if (this.state_id != '' && this.district_id != '') {\n this.tableheader = \" Centers\";\n this.ChartHeading = \"Top Centers by Capacity Utilization\"\n this.downloadExcelHeader = \"CenterWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"CenterWiseVaccinationCoverage\"\n } else {\n this.tableheader = \" State/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n this.downloadExcelHeader = \"StateWiseVaccination\"\n this.downloadExcelHeaderForCoverage = \"StateWiseVaccinationCoverage\"\n }\n });\n // this.isday = true;\n\n //for breadcrumb\n this.breadCrumbArr = [];\n if (this.state_id) {\n this.stateArr = this.states.find(e => e.state_id == this.state_id);\n this.statename = this.stateArr.state_name;\n }\n this.breadCrumbArr.push({\n type: 'India',\n id: '',\n name: 'India'\n });\n if (this.state_id != '' && this.state_id != undefined) {\n this.breadCrumbArr.push({\n type: 'State',\n id: this.state_id,\n state_id: this.state_id,\n state_name: this.statename,\n name: this.statename\n });\n }\n //console.log('dfas',this.district_id);\n if (this.district_id != '' && this.district_id != undefined) {\n this.breadCrumbArr.push({\n type: 'District',\n id: this.district_id,\n district_id: this.district_id,\n district_name: this.districtname.district_name,\n name: this.districtname.district_name\n });\n }\n // console.log('bread crumb',this.breadCrumbArr)\n }\n\n getNewDashboardDataforDistrict(district_id = \"\") {\n\n this.publicReportService.tabname.next(\"Dashboard\");\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n\n this.district_id = district_id;\n //console.log(\"this.state_id\", this.state_id)\n //console.log(\"this.district_id\", this.district_id)ischeckSessionStarted\n this.chartFlag = (district_id) ? true : false;\n this.publicReportService.tabname.next(\"Dashboard\");\n // this.publicReportService.ischeckSessionStarted.next(this.state_id);\n\n if (this.district_id != \"\" && this.district_id != undefined) {\n this.districtname = this.districtListfromstate.find(e => e.district_id == district_id);\n\n this.getNewDashboardData(this.state_id, district_id);\n this.publicReportService.districtname.next(this.districtname.district_name);\n } else {\n this.getNewDashboardData(this.state_id, \"\")\n this.districtListfromstate = [];\n this.getDistrictList(this.state_id);\n }\n\n /*this.publicReportService.getPublicReports(this.state_id, district_id, this.todaysdate).subscribe(res => {\n //console.log(\"res\",res);\n this.publicReportService.tabname.next(\"Dashboard\");\n this.reportData = res;\n this.topBlockReport = res.topBlock;\n this.vaccinatedAefiPer = res.aefiPercentage;\n this.lineChartDataNew = res.vaccinationDoneByTime;\n this.lastSevenDaysReg = res.last7DaysRegistration;\n this.getBeneficiariesGroupBy = res.getBeneficiariesGroupBy;\n this.vaccinationCoverageByStateChartData = res.getBeneficiariesGroupBy;\n this.vaccinationBrandChartData = res.last7DaysVaccination;\n this.vaccinationAEFIChartData = res.last7DaysVaccination;\n this.last7DaysVaccination = res.last7DaysVaccination;\n this.lastSevenDaysAppointment = res.last7DaysRegistration;\n this.vaccinationDoseChartData = res.last7DaysVaccination;\n this.dailyCapVsUtilizeData = res.last7DaysVaccination;\n this.Last5daysCenterData = res.last5daySessionStatus;\n this.Top10States = res.topUtilization;\n this.CowinStatistics = res.verificationMethod;\n this.vaccinationByAgeChartData = res.vaccinationByAge;\n this.prepareDataForSemiPieChartsNew();\n this.prepareDataForLineGraphNew();\n // this.prepareDataForStackedBarRegGraphNew();\n // this.prepareDataForLastSevenDaysVacc();\n // this.prepareDataForDailyCapacityVsUtilization();\n this.prepareDataFor5daysCenterAnalysis();\n // this.prepareDataForTop10StatesByCoverage();\n // this.prepareDataForCowinStatistics();\n // this.loadVaccinationCoverageByState();\n this.loadVaccinationAEFIChart();\n // this.loadVaccinationBrandLastSevenDaysChart();\n // this.loadVaccinationDoseLastSevenDaysChart();\n this.loadVaccinationByAgeChart();\n if (this.state_id === '' && this.district_id === '') {\n this.tableheader = \" State/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n } else if (this.state_id != '' && this.district_id == '') {\n this.tableheader = \" Districts\";\n this.ChartHeading = \"Top Districts by Capacity Utilization\"\n } else if (this.state_id != '' && this.district_id != '') {\n this.tableheader = \" Centers\";\n this.ChartHeading = \"Top Centers by Capacity Utilization\"\n } else {\n this.tableheader = \" State/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n }\n\n });*/\n }\n\ngetVacChartData(value = \"\") {\n\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n\n this.last30DaysVaccinationData = res.last30DaysVaccination;\n // console.log(\"vacc report\", this.last30DaysVaccinationData);\n if (this.last30DaysVaccinationData.length) {\n this.prepareDataForVaccChart();\n }\n this.vaccinationByCategoryData = [];\n this.secondHalf = [];\n this.vaccinationByCategoryData = res.last30DaysVaccination;\n\n this.Downloadlast30DaysVaccination = res.last30DaysVaccination;\n this.DownloadweeklyReport = res.weeklyReport;\n this.Downloadlast30DaysAgeWiseVaccination = res.last30DaysAgeWiseVaccination;\n this.DownloadweeklyVacAgeWiseReport = res.weeklyVacAgeWiseReport;\n\n this.DownloadRegReportData = res.regReportData;\n this.DownloadRegWeekReportData = res.regWeekReportData;\n\n if (this.vaccinationByCategoryData.length) {\n const half = Math.ceil(this.vaccinationByCategoryData.length / 2);\n this.secondHalf = this.vaccinationByCategoryData.slice(-half);\n this.vaccinationByCategoryData = this.secondHalf;\n this.prepareDataForVaccinationByCategory();\n }\n\n\n this.vaccinationUpTrendsMonthData = res.last30DaysVaccinationUptrend;\n\n // if (this.vaccinationUpTrendsMonthData.length) {\n // this.prepareDataForVaccinationUpTrendsMonth();\n // }\n\n // this.registartionChartDataMonth = res.regReportData;\n // if (this.registartionChartDataMonth.length) {\n // this.prepareDataForRegChartMonth();\n // }\n\n if (value == \"Last 30 Days\") {\n this.isByDoses = true;\n this.isday = false;\n this.ismonth = true;\n this.isweek = false;\n this.isdayVacc = false;\n this.isweekVacc = false;\n this.ismonthVacc = false\n\n // this.isupTrendToday = false;\n // this.isupTrendMonth = true;\n // this.isupTrendAll = false;\n // this.isdayReg = false;\n // this.ismonthReg = true;\n // this.isweekReg = false;\n }\n }\n });\n }\n\n getVacChartDataAll(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.weeklyReportData = res.weeklyReport;\n\n // console.log(\"vacc report\", this.weeklyReportData);\n\n if (this.weeklyReportData.length) {\n this.prepareDataForVaccChartAll();\n }\n\n if (value == \"All\") {\n this.isday = false;\n this.ismonth = false;\n this.isweek = true;\n this.isdayVacc = false;\n this.isweekVacc = false;\n this.ismonthVacc = false\n }\n\n }\n });\n }\n\n //for getting district list\n getDistrictList(stateId) {\n\n this.publicReportService.getDistricts().subscribe((res) => this.districtList = res);\n if (stateId !== \"\") {\n this.districtListfromstate = this.districtList.filter(e => e.state_id == stateId);\n }\n }\n\n prepareDataForLastSevenDaysVacc() {\n const format = this.numberFormatPipe;\n if (this.lastSevenDayVaccChart) {\n this.lastSevenDayVaccChart.destroy();\n }\n const labels = this.last7DaysVaccination.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const doseOne = this.last7DaysVaccination.map(obj => obj.dose_one);\n const doseTwo = this.last7DaysVaccination.map(obj => obj.dose_two);\n var vaccConfig = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: this.translate.instant('Dose'),\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: doseOne,\n }, {\n type: 'bar',\n label: 'Dose 2',\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n data: doseTwo,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 11,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccine-last-30');\n this.lastSevenDayVaccChart = new Chart(ctx, vaccConfig);\n }\n\n prepareDataForSemiPieChartsNew() {\n const format = this.numberFormatPipe;\n var configcmr2 = {\n type: 'pie',\n data: {\n datasets: [{\n data: [\n this.topBlockReport?.vaccination?.male,\n this.topBlockReport?.vaccination?.female,\n this.topBlockReport?.vaccination?.others\n ],\n backgroundColor: ['rgb(90, 141, 238)', 'rgb(245, 67, 148)', 'rgb(255 152 0)'],\n borderWidth: 1,\n }],\n labels: ['Male', 'Female', 'Other']\n },\n options: {\n cutoutPercentage: 70,\n rotation: 1 * Math.PI,\n circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var indice = tooltipItem.index;\n const value = data.datasets[0].data[indice] || 0\n const dataNum = Math.round(value * 100) / 100;\n return data.labels[indice] + ': ' + format.transform(data.datasets[0].data[indice]) + '';\n }\n }\n },\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 7,\n padding: 15,\n fontSize: 11,\n }\n }\n }\n };\n\n var configcmr22 = {\n type: 'pie',\n data: {\n datasets: [{\n data: [\n this.topBlockReport?.vaccination?.covishield,\n this.topBlockReport?.vaccination?.covaxin,\n this.topBlockReport?.vaccination?.sputnik,\n // this.topBlockReport?.vaccination?.zycov,\n ],\n backgroundColor: ['rgb(0, 124, 195)', 'rgb(122, 193, 66)', 'rgb(255, 244, 76)'],\n borderWidth: 1,\n }],\n labels: ['Covishield', 'Covaxin', 'Sputnik V']\n },\n options: {\n cutoutPercentage: 70,\n rotation: 1 * Math.PI,\n circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var indice = tooltipItem.index;\n const value = data.datasets[0].data[indice] || 0\n const dataNum = Math.round(value * 100) / 100;\n return data.labels[indice] + ': ' + format.transform(data.datasets[0].data[indice]) + '';\n }\n }\n },\n\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 7,\n padding: 15,\n fontSize: 11,\n }\n }\n }\n };\n\n if (this.genderVaccPieChart) {\n this.genderVaccPieChart.destroy()\n }\n\n if (this.materialVaccPieChart) {\n this.materialVaccPieChart.destroy()\n }\n\n const genderCtx = $('#total-vaccinated-gender');\n this.genderVaccPieChart = new Chart(genderCtx, configcmr2);\n\n const materialCtx = $('#material-used');\n this.materialVaccPieChart = new Chart(materialCtx, configcmr22);\n }\n\n prepareDataForStackedBarRegGraphNew() {\n if (this.lastSevenDayChart) {\n this.lastSevenDayChart.destroy();\n }\n const ctx = $('#lastSevenReg');\n const labels = this.lastSevenDaysReg.map(obj => {\n return moment(obj.reg_date).format('DD MMM')\n });\n const maleData = this.lastSevenDaysReg.map(obj => {\n return obj.male;\n });\n\n const femaleData = this.lastSevenDaysReg.map(obj => {\n return obj.female;\n });\n\n const othersData = this.lastSevenDaysReg.map(obj => {\n return obj.others;\n });\n const format = this.numberFormatPipe;\n var lastSevenDayRegChartObj = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label:this.translate.instant('DASHBOARD.Male'),\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: maleData,\n }, {\n type: 'bar',\n label:this.translate.instant('DASHBOARD.Female'),\n backgroundColor: \"rgba(255,105,165)\",\n borderColor: \"rgba(255,105,165)\",\n data: femaleData,\n },\n {\n type: 'bar',\n label: this.translate.instant('DASHBOARD.Other'),\n backgroundColor: \"rgb(72, 219, 179)\",\n borderColor: \"rgb(72, 219, 179)\",\n data: othersData,\n }]\n },\n options: {\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n this.lastSevenDayChart = new Chart(ctx, lastSevenDayRegChartObj);\n\n // lastSevenReg\n }\n\n nextLevel(type, state_id = '', district_id = '') {\n this.headerTextLbl = type;\n this.state_id = state_id;\n this.district_id = district_id;\n this.publicReportService.type.next(type);\n if (this.headerTextLbl == 'Center') {\n this.isnational = false;\n this.onload = false;\n return;\n } else if (this.headerTextLbl === 'India') {\n this.heading = 'National';\n this.isnational = true;\n this.site_logo = 'AN.png';\n this.onload = true;\n this.breadCrumbArr = [];\n this.headerTextLbl = 'State';\n this.district_id = \"\";\n this.districtname = \"\";\n this.state_id = \"\";\n if(this.district_id || this.state_id){\n this.counterFlag=true\n }else{\n this.counterFlag=false\n }\n $('#state').get(0).selectedIndex = 0;\n // document.getElementById(\"state\").setAttribute(\"value\",\"Select State\");\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.districtname.next(this.districtname);\n this.publicReportService.type.next(\"India\");\n this.publicReportService.isnational.next(true);\n this.getNewDashboardData('', '');\n this.isday=true;\n this.isweek =false;\n this.isweekVacc = false;\n this.isdayVacc = false;\n this.ismonthVacc = false\n this.ismonth = false;\n this.isdayReg = true;\n this.ismonthReg = false;\n this.isweekReg = false;\n // this.getVacChartData('Last 30 Days');\n // this.getRegChartDataMonth('Last 30 Days');\n } else if (this.headerTextLbl === 'State') {\n this.breadCrumbArr = [];\n this.isnational = false;\n this.onload = false;\n this.stateArr = this.states.find(e => e.state_id == this.state_id);\n this.statename = this.stateArr.state_name;\n this.heading = this.statename;\n this.site_logo = this.stateArr.state_code;\n this.breadCrumbArr.push({\n type: 'India',\n id: '',\n name: 'India'\n });\n this.breadCrumbArr.push({\n type: 'State',\n id: this.state_id,\n state_id: this.state_id,\n state_name: this.statename,\n name: this.statename\n });\n // this.isStatelogin = true;\n this.headerTextLbl = 'District';\n this.district_id = \"\";\n this.districtname = \"\";\n this.clickevent.emit(this.state_id);\n this.publicReportService.ischeckSessionStarted.next(this.state_id);\n this.publicReportService.statename.next(this.statename);\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.districtname.next(this.districtname);\n this.publicReportService.isnational.next(false);\n this.publicReportService.type.next(\"State\");\n this.publicReportService.filterParams.type = \"State\";\n this.getNewDashboardData(this.state_id, '');\n this.isday=true;\n this.isweek =false;\n this.isweekVacc = false;\n this.isdayVacc = false;\n this.ismonthVacc = false\n this.ismonth = false;\n this.isdayReg = true;\n this.ismonthReg = false;\n this.isweekReg = false;\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n } else if (this.headerTextLbl === 'District') {\n this.isnational = false;\n this.onload = false;\n this.state_id = state_id;\n this.stateArr = this.states.find(e => e.state_id == this.state_id);\n //console.log(this.stateArr);\n this.statename = this.stateArr.state_name;\n this.site_logo = this.stateArr.state_code;\n if (this.breadCrumbArr.length == 0) {\n this.breadCrumbArr = [];\n this.breadCrumbArr.push({\n type: 'State',\n id: this.state_id,\n state_name: this.statename,\n state_id: this.state_id,\n name: this.statename\n });\n }\n this.publicReportService.isnational.next(false);\n this.districtArr = this.getBeneficiariesGroupBy.find(e => e.district_id == this.district_id);\n this.districtname = this.districtArr.district_name;\n this.heading = this.districtname;\n this.publicReportService.districtname.next(this.districtname);\n this.publicReportService.filterParams.district_id = this.district_id;\n this.publicReportService.district_id.next(this.district_id);\n this.publicReportService.filterParams.type = \"District\";\n this.publicReportService.type.next(\"District\");\n this.breadCrumbArr.push({\n type: 'District',\n id: this.district_id,\n district_id: this.district_id,\n district_name: this.districtname,\n name: this.districtname\n });\n this.headerTextLbl = 'Center';\n this.getNewDashboardData(this.state_id, this.district_id);\n this.isday=true;\n this.isweek =false;\n this.isweekVacc = false;\n this.isdayVacc = false;\n this.ismonthVacc = false\n this.ismonth = false;\n this.isdayReg = true;\n this.ismonthReg = false;\n this.isweekReg = false;\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n }\n this.publicReportService.breadCrumbArr = this.breadCrumbArr;\n // this.publicReportService.filterParams = {\n // state_id : this.state_id,\n // district_id : this.district_id,\n // heading : this.heading,\n // site_logo : this.site_logo\n // };\n\n if (this.state_id === undefined && this.district_id === undefined) {\n this.tableheader = \" Vaccination By States/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n this.columnheading = \"States/UT\";\n } else if (this.state_id != '' && this.district_id == '') {\n this.tableheader = \" Vaccination By Districts\";\n this.ChartHeading = \"Top Districts by Capacity Utilization\";\n this.columnheading = \"Districts\";\n } else if (this.state_id != '' && this.district_id != '') {\n this.tableheader = \" Vaccination By Centers\";\n this.ChartHeading = \"Top Centers by Capacity Utilization\"\n this.columnheading = \"Centers\";\n } else {\n this.tableheader = \" Vaccination By State/UT\";\n this.ChartHeading = \"Top States by Capacity Utilization\"\n this.columnheading = \"States/UT\";\n }\n\n }\n\n delay(time) {\n\n return new Promise((resolve) => {\n\n setTimeout(() => {\n\n resolve(true)\n\n }, time);\n\n })\n\n }\n\n async prepareDataForLineGraphNew() {\n await this.delay(300);\n if (this.realTimeChart) {\n this.realTimeChart.destroy();\n }\n\n\n const ctx = $('#realtime');\n\n if (this.lineChartDataNew) {\n this.lineChartDataNew = this.lineChartDataNew.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n\n // console.log(\"this.lineChartData1\", this.lineChartDataNew)\n\n /* const labels = _.map(this.lineChartData,(data) => {\n return data.label;\n }); */\n // const labels = _.map(this.lineChartDataNew, (data) => {\n // return moment(data.timestamps).subtract(330, \"minutes\").format('HH:mm');\n // });\n const labels = _.map(this.lineChartDataNew, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DDTHH:mm:ssZ\").subtract(330, \"minutes\").format('HH:mm');\n });\n //console.log(\"lable\",labels )\n const data1 = _.map(this.lineChartDataNew, 'count');\n const data2 = _.map(this.lineChartDataNew, 'dose_one');\n const data3 = _.map(this.lineChartDataNew, 'dose_two');\n const data4 = _.map(this.lineChartDataNew, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_One'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(90, 141, 238, 0.1)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(251, 167, 20, 0.1)',\n borderColor: 'rgb(251, 167, 20)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChart = new Chart(ctx, vaccConfig);\n this.realTimeChart.update();\n }\n\n\n\n prepareDataForDailyCapacityVsUtilization() {\n const format = this.numberFormatPipe;\n if (this.dailyCapVsUtilizeChart) {\n this.dailyCapVsUtilizeChart.destroy();\n }\n //console.log(\"this.dailyCapVsUtilizeChart\",this.dailyCapVsUtilizeData)\n const labels = this.dailyCapVsUtilizeData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const data1 = this.dailyCapVsUtilizeData.map(obj => obj.count);\n const data2 = this.dailyCapVsUtilizeData.map(obj => obj.capacity);\n var vaccConfig = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Vaccination',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: data1,\n }, {\n type: 'bar',\n label: 'Capacity',\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n data: data2,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#dailyCapVsUtiliz');\n this.dailyCapVsUtilizeChart = new Chart(ctx, vaccConfig);\n }\n\n prepareDataFor5daysCenterAnalysis() {\n if (this.Last5daysCenterChart) {\n this.Last5daysCenterChart.destroy();\n }\n\n\n const ctx = $('#Last5daysCenterAnalysis');\n\n this.Last5daysCenterData = this.Last5daysCenterData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n //console.log(\"this.Last5daysCenterData\", this.Last5daysCenterData)\n\n /* const labels = _.map(this.lineChartData,(data) => {\n return data.label;\n }); */\n // const labels = _.map(this.Last5daysCenterData,(data) => {\n // return moment(data.session_date).subtract(330,\"minutes\").format('HH:mm');\n // });\n this.Last5daysCenterData = this.Last5daysCenterData.sort((a, b) => (a.session_date > b.session_date) ? 1 : -1)\n const labels = this.Last5daysCenterData.map(obj => moment(obj.session_date).format('DD MMM'));\n\n // console.log(\"lable\", labels)\n const data1 = _.map(this.Last5daysCenterData, 'completed');\n //const data2 = _.map(this.Last5daysCenterData,'total');\n // const data3 = _.map(this.Last5daysCenterData,'ongoing');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n type: 'line',\n label: 'Completed',\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(90, 141, 238, 0.1)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data1,\n }\n // {\n // type: 'line',\n // label: 'Ongoing',\n // backgroundColor: 'rgb(20, 232, 251, 0.1)',\n // borderColor: 'rgb(20, 232, 251)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(1, 161, 179)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: '2',\n\n // data: data3,\n // },\n // {\n // type: 'line',\n // label: 'Planned',\n // backgroundColor: 'rgb(20, 232, 251, 0.1)',\n // borderColor: 'rgb(20, 232, 251)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(1, 161, 179)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n\n // fill:true,\n\n // data: data2,\n // }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n\n }\n }]\n }\n }\n };\n\n this.Last5daysCenterChart = new Chart(ctx, vaccConfig);\n this.Last5daysCenterChart.update();\n }\n\n //vaccination coverage by state\n\n loadVaccinationCoverageByState() {\n const format = this.numberFormatPipe;\n if (this.vaccinationCoverageByStateChart) {\n this.vaccinationCoverageByStateChart.destroy();\n }\n //vaccinationCoverageByStateChartData\n const labels = _.map(this.vaccinationCoverageByStateChartData, 'title')\n //const total = _.map(this.vaccinationCoverageByStateChartData,'total')\n const partially_vaccinated = _.map(this.vaccinationCoverageByStateChartData, 'partial_vaccinated')\n const totally_vaccinated = _.map(this.vaccinationCoverageByStateChartData, 'totally_vaccinated')\n const precaution_dose = _.map(this.vaccinationCoverageByStateChartData, 'precaution_dose')\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'bar',\n label: this.translate.instant('DASHBOARD.Dose_1'),\n backgroundColor: \"rgb(33, 204, 152, 1)\",\n borderColor: \"rgb(33, 204, 152, 1)\",\n data: partially_vaccinated,\n },\n \n {\n type: 'bar',\n label: this.translate.instant('DASHBOARD.Dose_2'),\n backgroundColor: \"rgb(242, 9, 251, 1)\",\n borderColor: \"rgb(242, 9, 251, 1)\",\n data: totally_vaccinated,\n },\n {\n type: 'bar',\n label: 'Precaution Dose',\n backgroundColor: \"rgb( 20, 232, 251, 1)\",\n borderColor: \"rgb( 20, 232, 251, 1)\",\n data: precaution_dose,\n }\n]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 11,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n barThickness: 10,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-coverage-by-state');\n this.vaccinationCoverageByStateChart = new Chart(ctx, configuration);\n this.vaccinationCoverageByStateChart.update();\n\n }\n\n //load AEFI report\n loadVaccinationAEFIChart() {\n const format = this.numberFormatPipe;\n\n if (this.vaccinationAEFIChart) {\n this.vaccinationAEFIChart.destroy();\n }\n\n // console.log(\"aefi\", this.vaccinationAEFIChartData);\n const labels = this.vaccinationAEFIChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const data = _.map(this.vaccinationAEFIChartData, 'aefi');\n var configuration = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n\n type: 'line',\n label: 'Total',\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data,\n\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 11,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: true,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n\n userCallback: function (label, index, labels) {\n // when the floored value is the same as the value we have a whole number\n if (Math.floor(label) === label) {\n return label;\n }\n\n },\n }\n }]\n },\n }\n };\n // this.vaccinationAEFIChart.yAxis.tickFormat(d3.format(',f'));\n var ctx = $('#vaccination-aefi-seven-days');\n this.vaccinationAEFIChart = new Chart(ctx, configuration);\n this.vaccinationAEFIChart.update();\n\n }\n\n //vaccination brand last 7 days chart\n loadVaccinationBrandLastSevenDaysChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationBrandChart) {\n this.vaccinationBrandChart.destroy();\n }\n const labels = this.vaccinationBrandChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const doseOne = this.vaccinationBrandChartData.map(obj => obj.covishield);\n const doseTwo = this.vaccinationBrandChartData.map(obj => obj.covaxin);\n\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: this.translate.instant('SLOT_SEARCH.Covishield'),\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: doseOne,\n }, {\n type: 'bar',\n label: this.translate.instant('SLOT_SEARCH.Covaxin'),\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n data: doseTwo,\n }]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.25,\n beginAtZero: true,\n barThickness: 10,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: false,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-brand-seven-days');\n this.vaccinationBrandChart = new Chart(ctx, configuration);\n this.vaccinationBrandChart.update();\n }\n\n\n prepareDataForTop10StatesByCoverage() {\n const format = this.numberFormatPipe;\n if (this.Top10StatesChart) {\n this.Top10StatesChart.destroy();\n }\n // console.log(\"this.Top10StatesChart\", this.Top10States)\n\n const labels = this.Top10States.map(obj => obj.title);\n // const labels = this.Top10States.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n // const data1 = this.Top10States.map(obj => obj.capacity);\n // const data2 = this.Top10States.map(obj => obj.count);\n const data3 = this.Top10States.map(obj => obj.utilization);\n // console.log(\"data3\", data3)\n\n\n var vaccConfig = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Utilization',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n data: data3,\n\n }\n // {\n // type: 'bar',\n // label: 'Count',\n // backgroundColor: \"rgb(75 222 219)\",\n // borderColor: \"rgb(75 222 219)\",\n // data: data2,\n\n // }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 10,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label + \"%\";\n }\n // label: function(tooltipItem, data) {\n // var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n // return item.y + ' ' + item.value;\n // }\n }\n },\n scales: {\n xAxes: [{\n barPercentage: 0.45,\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n // maxRotation: 90,\n // minRotation: 90\n },\n stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n stacked: true,\n // margin: 100,\n\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true\n\n }\n }]\n },\n }\n };\n\n var ctx = $('#top10states');\n this.Top10StatesChart = new Chart(ctx, vaccConfig);\n }\n\n prepareDataForCowinStatistics() {\n const format = this.numberFormatPipe;\n // console.log(\"cowin\", this.CowinStatistics)\n var configcmrnew = {\n type: 'pie',\n data: {\n datasets: [{\n data: [\n this.CowinStatistics?.aadhaar,\n this.CowinStatistics?.others,\n\n ],\n backgroundColor: ['rgb(245, 67, 148)', 'rgb(90, 141, 238)'],\n borderWidth: 1,\n }],\n labels: ['Aadhar', 'Others']\n },\n options: {\n cutoutPercentage: 70,\n rotation: 1 * Math.PI,\n circumference: 1 * Math.PI,\n responsive: true,\n animation: {\n animateScale: true,\n animateRotate: true\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n\n var label = data.labels[tooltipItem.index] || '';\n\n if (label) {\n label += ': ';\n }\n const value = data.datasets[0].data[tooltipItem.index] || 0\n const dataNum = Math.round(value * 100) / 100;\n label += format.transform(dataNum);\n return label + \"%\";\n }\n }\n },\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: true,\n boxWidth: 7,\n padding: 15,\n fontSize: 10,\n }\n }\n }\n };\n\n\n if (this.CowinStatisticsChart) {\n this.CowinStatisticsChart.destroy()\n }\n\n\n\n const cowinstat = $('#cowinstat');\n this.CowinStatisticsChart = new Chart(cowinstat, configcmrnew);\n\n // const materialCtx = $('#material-used');\n // this.materialVaccPieChart = new Chart(materialCtx, configcmr22);\n }\n\n //vaccination trend last 7 days (stacked by dose)\n loadVaccinationDoseLastSevenDaysChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationDoseChart) {\n this.vaccinationDoseChart.destroy();\n }\n const labels = this.vaccinationDoseChartData.map(obj => moment(obj.vaccine_date).format('DD MMM'));\n const doseOne = this.vaccinationDoseChartData.map(obj => obj.dose_one);\n const doseTwo = this.vaccinationDoseChartData.map(obj => obj.dose_two);\n\n var configuration = {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n type: 'bar',\n label: 'Dose 1',\n backgroundColor: \"rgb(85 86 253)\",\n borderColor: \"rgb(85 86 253)\",\n borderWidth: 2,\n data: doseOne,\n }, {\n type: 'bar',\n label: 'Dose 2',\n backgroundColor: \"rgb(75 222 219)\",\n borderColor: \"rgb(75 222 219)\",\n borderWidth: 2,\n data: doseTwo,\n }]\n },\n\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 11,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n scales: {\n xAxes: [{\n barWidth: 0.5,\n barPercentage: 0.25,\n beginAtZero: true,\n padding: 0,\n barThickness: 15,\n ticks: {\n autoSkip: false,\n fontSize: 10,\n },\n stacked: false,\n\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n stacked: false,\n barPercentage: 0.35,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 0],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n },\n }\n };\n\n var ctx = $('#vaccination-trends-seven-days');\n this.vaccinationDoseChart = new Chart(ctx, configuration);\n this.vaccinationDoseChart.update();\n }\n\n\n //vaccination By Age\n loadVaccinationByAgeChart() {\n const format = this.numberFormatPipe;\n if (this.vaccinationByAgeChart) {\n this.vaccinationByAgeChart.destroy();\n }\n // console.log(\"this.vaccinationByAgeChartData\", this.vaccinationByAgeChartData)\n const labels_data = Object.keys(this.vaccinationByAgeChartData);\n const labels = labels_data.map(obj => obj.replace('vac_', '').replace('_', '-'));\n labels.shift();\n const data = Object.values(this.vaccinationByAgeChartData);\n data.shift();\n var configuration = {\n type: 'pie',\n // data: {\n // labels: labels,\n // datasets: [{\n // type: 'bar',\n // label: 'Vaccinations By Age',\n // backgroundColor: \"rgb(85 86 253)\",\n // borderColor: \"rgb(85 86 253)\",\n // data: data,\n // }]\n // },\n\n data: {\n datasets: [{\n data: [\n this.vaccinationByAgeChartData.vac_15_17,\n this.vaccinationByAgeChartData.vac_18_45,\n this.vaccinationByAgeChartData.vac_45_60,\n this.vaccinationByAgeChartData.above_60\n ],\n backgroundColor: ['rgb(255, 152, 0)','rgb(170, 222, 167)', 'rgb(100, 194, 166)', 'rgb(45, 135, 187)'],\n borderWidth: 1,\n }],\n labels: ['15-17','18-44', '45-60', 'Above 60']\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n fontSize: 11,\n boxWidth: 10,\n padding: 15,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var indice = tooltipItem.index;\n const value = data.datasets[0].data[indice] || 0\n const dataNum = Math.round(value * 100) / 100;\n return data.labels[indice] + ': ' + format.transform(data.datasets[0].data[indice]) + '';\n }\n }\n },\n\n }\n };\n\n var ctx = $('#vaccination-by-age');\n this.vaccinationByAgeChart = new Chart(ctx, configuration);\n this.vaccinationByAgeChart.update();\n }\n\n async prepareDataForVaccChart() {\n\n await this.delay(300);\n if (this.realTimeChartlast30days) {\n this.realTimeChartlast30days.destroy();\n }\n\n\n const ctx = $('#realtimemonth');\n\n if (this.last30DaysVaccinationData) {\n this.last30DaysVaccinationData = this.last30DaysVaccinationData.sort((a, b) => (a.vaccine_date > b.vaccine_date) ? 1 : -1)\n }\n\n // console.log(\"this.lineChartData1month12\", this.last30DaysVaccinationData)\n\n const labels = this.last30DaysVaccinationData.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n // const labels = this.last30DaysVaccinationData.map(obj => obj.vaccine_date);\n // console.log(\"lable1\",labels )\n const data1 = _.map(this.last30DaysVaccinationData, 'total');\n const data2 = _.map(this.last30DaysVaccinationData, 'dose_1');\n const data3 = _.map(this.last30DaysVaccinationData, 'dose_2');\n const data4 = _.map(this.last30DaysVaccinationData, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfigmonth = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label:this.translate.instant('DASHBOARD.Dose_One'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(90, 141, 238, 0.1)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(251, 167, 20, 0.1)',\n borderColor: 'rgb(251, 167, 20)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n }\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChartlast30days = new Chart(ctx, vaccConfigmonth);\n this.realTimeChartlast30days.update();\n\n }\n\n async prepareDataForVaccChartAll() {\n\n await this.delay(300);\n if (this.realTimeChartweek) {\n this.realTimeChartweek.destroy();\n }\n\n\n const ctx = $('#realtimeweek');\n\n\n // console.log(\"this.lineChartDataweek\", this.weeklyReportData)\n const labels = this.weeklyReportData.map(obj => obj.label);\n\n\n // console.log(\"lable\", labels)\n\n const data1 = _.map(this.weeklyReportData, 'total');\n const data2 = _.map(this.weeklyReportData, 'dose1');\n const data3 = _.map(this.weeklyReportData, 'dose2');\n const data4 = _.map(this.weeklyReportData, 'dose_pd');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total_Doses'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_One'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(90, 141, 238, 0.1)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Dose_Two'),\n backgroundColor: 'rgb(251, 167, 20, 0.1)',\n borderColor: 'rgb(251, 167, 20)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: 'Precaution Dose',\n backgroundColor: 'rgb(245, 67, 148, 0.1)',\n borderColor: 'rgb(245, 67, 148)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(185, 118, 0)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.realTimeChartweek = new Chart(ctx, vaccConfig);\n this.realTimeChartweek.update();\n\n }\n\n onSortClick(event, filedName) {\n\n let target = event.currentTarget,\n classList = target.classList;\n\n if (classList.contains('fa-chevron-up')) {\n classList.remove('fa-chevron-up');\n classList.add('fa-chevron-down');\n this.sortDir = -1;\n } else {\n classList.add('fa-chevron-up');\n classList.remove('fa-chevron-down');\n this.sortDir = 1;\n }\n this.sortArr(filedName);\n }\n sortArr(colName: any) {\n this.getBeneficiariesGroupBy.sort((a, b) => {\n a = a[colName];\n b = b[colName];\n if (a < b) {\n return -1 * this.sortDir;\n }\n if (a > b) {\n return 1 * this.sortDir;\n }\n });\n }\n\n async prepareDataForRegChart() {\n\n await this.delay(300);\n if (this.registartionChart) {\n this.registartionChart.destroy();\n }\n\n\n const ctx = $('#realtimeregchart');\n if (this.registartionChartData) {\n this.registartionChartData = this.registartionChartData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n\n // console.log(\"this.registartionChartData12\", this.registartionChartData)\n // const labels = this.registartionChartData.map(obj => obj.label);\n\n const labels = _.map(this.registartionChartData, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DD HH:mm:ssZ\").format('HH:mm');\n });\n\n\n const data1 = _.map(this.registartionChartData, 'total');\n const data2 = _.map(this.registartionChartData, 'age18');\n const data3 = _.map(this.registartionChartData, 'age45');\n const data4 = _.map(this.registartionChartData, 'age60');\n const data5 = _.map(this.registartionChartData, 'age15');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label:this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChart = new Chart(ctx, regConfig);\n this.registartionChart.update();\n\n }\n\n getRegChartDataMonth(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.registartionChartDataMonth = res.regReportData;\n if (this.registartionChartDataMonth.length) {\n this.prepareDataForRegChartMonth();\n }\n\n if (value == \"Last 30 Days\") {\n this.isdayReg = false;\n this.ismonthReg = true;\n this.isweekReg = false;\n\n }\n\n }\n });\n }\n\n async prepareDataForRegChartMonth() {\n\n await this.delay(300);\n if (this.registartionChartMonth) {\n this.registartionChartMonth.destroy();\n }\n\n const ctx = $('#realtimeregchartmonth');\n\n const labels = this.registartionChartDataMonth.map(obj => moment(obj.reg_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n\n\n const data1 = _.map(this.registartionChartDataMonth, 'total');\n const data2 = _.map(this.registartionChartDataMonth, 'age18');\n const data3 = _.map(this.registartionChartDataMonth, 'age45');\n const data4 = _.map(this.registartionChartDataMonth, 'age60');\n const data5 = _.map(this.registartionChartDataMonth, 'age15');\n\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label: '15-17',\n backgroundColor: 'rgb(33, 204, 152,0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChartMonth = new Chart(ctx, regConfig);\n this.registartionChartMonth.update();\n\n }\n\n getRegChartDataAll(value = \"\") {\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.registartionChartDataAll = res.regWeekReportData;\n\n // console.log(\"reg report Month\", this.registartionChartDataAll);\n\n if (this.registartionChartDataAll.length) {\n this.prepareDataForRegChartAll();\n }\n\n if (value == \"All\") {\n this.isdayReg = false;\n this.ismonthReg = false;\n this.isweekReg = true;\n\n }\n\n }\n });\n }\n\n async prepareDataForRegChartAll() {\n\n await this.delay(300);\n if (this.registartionChartAll) {\n this.registartionChartAll.destroy();\n }\n\n const ctx = $('#realtimeregweek');\n\n const labels = this.registartionChartDataAll.map(obj => obj.label);\n\n const data1 = _.map(this.registartionChartDataAll, 'total');\n const data2 = _.map(this.registartionChartDataAll, 'age18');\n const data3 = _.map(this.registartionChartDataAll, 'age45');\n const data4 = _.map(this.registartionChartDataAll, 'age60');\n const data5 = _.map(this.registartionChartDataAll, 'age15');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label:'15-17',\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChartAll = new Chart(ctx, regConfig);\n this.registartionChartAll.update();\n\n }\n\n getVaccByTab(tabName = '') {\n if (tabName == \"By Age\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVacc = true;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n this.isByCategory = false;\n this.getVaccChartAgewiseDataToday('Today')\n // this.getVaccChartAgewiseDataMonth('Last 30 Days')\n\n } else if (tabName == 'By Doses') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isByCategory = false;\n // this.getVacChartData('Last 30 Days')\n // this.getNewDashboardData()\n // this.prepareDataForLineGraphNew();\n }\n\n else if (tabName == 'isday') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isByCategory = false;\n this.prepareDataForLineGraphNew();\n }\n else if (tabName == 'isdayReg') {\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n this.isdayReg = true;\n this.ismonthReg = false;\n this.isweekReg = false;\n\n }\n\n\n\n\n else if (tabName == 'By Uptrends'){\n this.isupTrendToday = true;\n this.isupTrendMonth = false;\n this.isupTrendAll = false;\n this.prepareDataForVaccinationUpTrends();\n }\n }\n\n getVaccChartAgewiseDataMonth(value = \"\") {\n\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataMonth = res.last30DaysAgeWiseVaccination;\n // console.log(\"this.vaccinationAgeTodayData\", this.vaccinationAgeDataMonth)\n if (this.vaccinationAgeDataMonth.length) {\n this.prepareDataForVaccAgewiseLast30Days();\n }\n\n if (value == \"Last 30 Days\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVacc = false;\n this.ismonthVacc = true;\n this.isweekVacc = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n }\n }\n });\n }\n\n async prepareDataForVaccAgewiseLast30Days() {\n await this.delay(300);\n if (this.vaccinationAgeChartMonth) {\n this.vaccinationAgeChartMonth.destroy();\n }\n\n const ctx = $('#vacc-agewise-month');\n\n const labels = this.vaccinationAgeDataMonth.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n\n const data1 = _.map(this.vaccinationAgeDataMonth, 'total');\n const data2 = _.map(this.vaccinationAgeDataMonth, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataMonth, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataMonth, 'vac_60_above');\n const data5 = _.map(this.vaccinationAgeDataMonth, 'vac_15_17');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label:'15-17',\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(33, 204, 152)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartMonth = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartMonth.update();\n }\n\n\n getVaccChartAgewiseDataAll(value = \"\") {\n\n this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataAll = res.weeklyVacAgeWiseReport;\n // console.log(\"this.vaccinationAgeDataAll\", this.vaccinationAgeDataAll)\n if (this.vaccinationAgeDataAll.length) {\n this.prepareDataForVaccAgewiseAll();\n }\n\n if (value == \"All\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = true;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n this.isByCategory = false;\n }\n }\n });\n }\n\n\n async prepareDataForVaccAgewiseAll() {\n await this.delay(300);\n if (this.vaccinationAgeChartAll) {\n this.vaccinationAgeChartAll.destroy();\n }\n\n\n const ctx = $('#vacc-agewise-all');\n\n const labels = this.vaccinationAgeDataAll.map(obj => obj.label);\n\n\n const data1 = _.map(this.vaccinationAgeDataAll, 'total');\n const data2 = _.map(this.vaccinationAgeDataAll, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataAll, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataAll, 'vac_60_above');\n const data5 = _.map(this.vaccinationAgeDataAll, 'vac_15_17');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label:'15-17',\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(1, 161, 179)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label:this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartAll = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartAll.update();\n }\n\n getVaccChartAgewiseDataToday(value = \"\") {\n\n this.publicReportService.getPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n if (res) {\n this.vaccinationAgeDataToday = res.vaccinationDoneByTimeAgeWise;\n // console.log(\"this.vaccinationAgeDataToday\", this.vaccinationAgeDataToday)\n if (this.vaccinationAgeDataToday.length) {\n this.prepareDataForVaccAgewiseToday();\n }\n\n if (value == \"Today\") {\n this.isByAge = true;\n this.isByDoses = false;\n this.isdayVacc = true;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = false;\n this.ismonth = false;\n this.isweek = false;\n this.isByCategory = false;\n }\n }\n });\n }\n\n async prepareDataForVaccAgewiseToday() {\n await this.delay(300);\n\n if (this.vaccinationAgeChartToday) {\n this.vaccinationAgeChartToday.destroy();\n }\n if (this.vaccinationAgeDataToday) {\n this.vaccinationAgeDataToday = this.vaccinationAgeDataToday.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n const ctx = $('#vacc-agewise-today');\n\n\n const labels = _.map(this.vaccinationAgeDataToday, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DDTHH:mm:ssZ\").subtract(330, \"minutes\").format('HH:mm');\n });\n\n\n const data1 = _.map(this.vaccinationAgeDataToday, 'total');\n const data2 = _.map(this.vaccinationAgeDataToday, 'vac_18_45');\n const data3 = _.map(this.vaccinationAgeDataToday, 'vac_45_60');\n const data4 = _.map(this.vaccinationAgeDataToday, 'vac_60_above');\n const data5 = _.map(this.vaccinationAgeDataToday, 'vac_15_17');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label:this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label:'15-17',\n backgroundColor: 'rgb(33, 204, 152, 0.1)',\n borderColor: 'rgb(33, 204, 152)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+1',\n\n data: data5,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.2)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationAgeChartToday = new Chart(ctx, vaccConfig);\n this.vaccinationAgeChartToday.update();\n }\n\n loadDataByStateTab(state_id = \"\", district_id = \"\"){\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n\n this.getNewDashboardData(state_id,district_id);\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n // this.getVaccChartAgewiseDataMonth('Last 30 Days')\n\n }\n\n loadDataByDitrictTab(district_id = \"\"){\n this.isByAge = false;\n this.isByDoses = true;\n this.isdayVacc = false;\n this.ismonthVacc = false;\n this.isweekVacc = false;\n this.isday = true;\n this.ismonth = false;\n this.isweek = false;\n\n this.getNewDashboardDataforDistrict(district_id);\n // this.getVacChartData('Last 30 Days')\n // this.getRegChartDataMonth('Last 30 Days')\n // this.getVaccChartAgewiseDataMonth('Last 30 Days')\n\n }\n\n prepareDataForVaccinationUpTrends() {\n if (this.vaccinationUpTrendsChart) {\n this.vaccinationUpTrendsChart.destroy();\n }\n\n\n const ctx = $('#vacc-uptrends');\n\n if (this.vaccinationUpTrendsData) {\n this.vaccinationUpTrendsData = this.vaccinationUpTrendsData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n\n\n const labels = _.map(this.vaccinationUpTrendsData, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DDTHH:mm:ssZ\").subtract(330, \"minutes\").format('HH:mm');\n });\n\n const data1 = _.map(this.vaccinationUpTrendsData, 'count');\n const data2 = _.map(this.vaccinationUpTrendsData, 'dose_one');\n const data3 = _.map(this.vaccinationUpTrendsData, 'dose_two');\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: 'Total Doses',\n backgroundColor: 'rgb(81,196,211, 0.1)',\n borderColor: 'rgb(81,196,211)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(81,196,211)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '2',\n\n data: data1\n },\n {\n type: 'line',\n label: 'Dose One',\n backgroundColor: 'rgb(0,145,124, 0.1)',\n borderColor: 'rgb(0,145,124)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(0,145,124)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '2',\n\n data: data2,\n },\n {\n type: 'line',\n label: 'Dose Two',\n backgroundColor: 'rgb(216,58,86, 0.15)',\n borderColor: 'rgb(216,58,86)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(216,58,86)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationUpTrendsChart = new Chart(ctx, vaccConfig);\n this.vaccinationUpTrendsChart.update();\n }\n\n\n prepareDataForRegistarionUpTrends() {\n\n\n if (this.registrationUpTrendsChart) {\n this.registrationUpTrendsChart.destroy();\n }\n\n\n const ctx = $('#reg-uptrends');\n if (this.registrationUpTrendsData) {\n this.registrationUpTrendsData = this.registrationUpTrendsData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n }\n\n // console.log(\"this.registartionChartData12\", this.registartionChartData)\n // const labels = this.registartionChartData.map(obj => obj.label);\n\n const labels = _.map(this.registrationUpTrendsData, (data) => {\n return moment(data.timestamps, \"YYYY-MM-DD HH:mm:ssZ\").format('HH:mm');\n });\n\n\n const data1 = _.map(this.registrationUpTrendsData, 'total');\n const data2 = _.map(this.registrationUpTrendsData, 'age18');\n const data3 = _.map(this.registrationUpTrendsData, 'age45');\n const data4 = _.map(this.registrationUpTrendsData, 'age60');\n const format = this.numberFormatPipe;\n var regConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Total'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(222, 137, 113, 0.1)',\n borderColor: 'rgb(222, 137, 113)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(222, 137, 113)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '+2',\n\n data: data1,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.18-44'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: '2',\n\n data: data2,\n },\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.45-60'),\n backgroundColor: 'rgb(167, 208, 205, 0.1)',\n borderColor: 'rgb(167, 208, 205)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(167, 208, 205)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data3,\n },\n\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Above_60'),\n backgroundColor: 'rgb(90, 141, 238, 0.3)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data4,\n }\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.registartionChart = new Chart(ctx, regConfig);\n this.registartionChart.update();\n\n }\n\n\n\n // getVaccChartCategoryWise(value = \"\") {\n\n // this.publicReportService.getPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n // if (res) {\n // this.vaccinationByCategoryData = res.vaccinationDoneByTimeAgeWise;\n // console.log(\"this.vaccinationByCategoryData\", this.vaccinationByCategoryData)\n // // if (this.vaccinationByCategoryData.length) {\n // // this.prepareDataForVaccinationByCategory();\n // // }\n\n\n // }\n // });\n // }\n\n prepareDataForVaccinationByCategory() {\n if (this.vaccinationByCategoryChart) {\n this.vaccinationByCategoryChart.destroy();\n }\n\n// console.log(\"vaccinationByCategoryDatatest\", this.vaccinationByCategoryData)\n const ctx = $('#vacc-bycategory');\n\n if (this.vaccinationByCategoryData) {\n this.vaccinationByCategoryData = this.vaccinationByCategoryData.sort((a, b) => (a.vaccine_date > b.vaccine_date) ? 1 : -1)\n }\n\n\n const labels = this.vaccinationByCategoryData.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n const data1 = _.map(this.vaccinationByCategoryData, 'rural');\n const data2 = _.map(this.vaccinationByCategoryData, 'urban');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n labels: labels,\n datasets: [\n {\n type: 'line',\n label: this.translate.instant('DASHBOARD.Rural'),\n backgroundColor: 'rgb(20, 232, 251, 0.1)',\n borderColor: 'rgb(20, 232, 251)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(1, 161, 179)',\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data1,\n },\n {\n type: 'line',\n label:this.translate.instant('DASHBOARD.Urban'),\n // backgroundColor: 'rgb(255, 152 , 0, 0.5)',\n backgroundColor: 'rgb(90, 141, 238, 0.1)',\n borderColor: 'rgb(90, 141, 238)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(79, 95, 125)\",\n pointBorderWidth: 1,\n pointRadius: 3,\n fill: true,\n\n data: data2,\n }\n\n ]\n },\n options: {\n legend: {\n display: true,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 20,\n padding: 15,\n fontSize: 11,\n }\n },\n tooltips: {\n mode: 'label',\n callbacks: {\n label: function (tooltipItem, data) {\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n beginAtZero: false,\n ticks: {\n autoSkip: false,\n fontSize: 11,\n },\n // stacked: true,\n gridLines: {\n display: false,\n drawBorder: false,\n },\n }],\n yAxes: [{\n // stacked: true,\n barPercentage: 0.3,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [5, 2],\n zeroLineColor: 'rgb(247, 250, 252)',\n },\n ticks: {\n fontSize: 9,\n beginAtZero: true,\n callback: function (label, index, labels) {\n return label / 1000 + 'k';\n }\n }\n }]\n }\n }\n };\n\n this.vaccinationByCategoryChart = new Chart(ctx, vaccConfig);\n this.vaccinationByCategoryChart.update();\n }\n\n // getUptrendVacChartDataMonth(value = \"\") {\n\n // this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n // if (res) {\n\n // this.vaccinationUpTrendsMonthData = res.last30DaysVaccinationUptrend;\n\n // if (this.vaccinationUpTrendsMonthData.length) {\n // this.prepareDataForVaccinationUpTrendsMonth();\n // }\n\n // if (value == \"Last 30 Days\") {\n\n // this.isupTrendToday = false;\n // this.isupTrendMonth = true;\n // this.isupTrendAll = false;\n // }\n // }\n // });\n // }\n\n // prepareDataForVaccinationUpTrendsMonth() {\n // if (this.vaccinationUpTrendsMonthChart) {\n // this.vaccinationUpTrendsMonthChart.destroy();\n // }\n\n // const ctx = $('#vacc-uptrends-month');\n\n // const labels = this.vaccinationUpTrendsMonthData.map(obj => moment(obj.vaccine_date, \"YYYY-MM-DD\").format('DD MMM'));\n\n // const data1 = _.map(this.vaccinationUpTrendsMonthData, 'total');\n // const data2 = _.map(this.vaccinationUpTrendsMonthData, 'dose_1');\n // const data3 = _.map(this.vaccinationUpTrendsMonthData, 'dose_2');\n // const format = this.numberFormatPipe;\n // var vaccConfig = {\n // type: 'line',\n // data: {\n // labels: labels,\n // datasets: [\n // {\n // type: 'line',\n // label: 'Total Doses',\n // backgroundColor: 'rgb(81,196,211, 0.1)',\n // borderColor: 'rgb(81,196,211)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(81,196,211)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: '2',\n\n // data: data1,\n // bezierCurve : false\n // },\n // {\n // type: 'line',\n // label: 'Dose One',\n // backgroundColor: 'rgb(0,145,124, 0.1)',\n // borderColor: 'rgb(0,145,124)',\n // borderWidth: 2,\n // pointBackgroundColor: \"rgb(0,145,124)\",\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: '2',\n\n // data: data2,\n // bezierCurve : false\n // },\n // {\n // type: 'line',\n // label: 'Dose Two',\n // backgroundColor: 'rgb(216,58,86, 0.15)',\n // borderColor: 'rgb(216,58,86)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(216,58,86)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: true,\n\n // data: data3,\n // bezierCurve : false\n // }\n // ]\n // },\n // options: {\n // legend: {\n // display: true,\n // position: 'bottom',\n // labels: {\n // usePointStyle: false,\n // boxWidth: 20,\n // padding: 15,\n // fontSize: 11,\n // }\n // },\n // tooltips: {\n // mode: 'label',\n // callbacks: {\n // label: function (tooltipItem, data) {\n // var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n // if (label) {\n // label += ': ';\n // }\n\n // const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n // label += format.transform(dataNum);\n // return label;\n // }\n // }\n // },\n // responsive: true,\n // scales: {\n // xAxes: [{\n // beginAtZero: false,\n // ticks: {\n // autoSkip: false,\n // fontSize: 11,\n // },\n // // stacked: true,\n // gridLines: {\n // display: false,\n // drawBorder: false,\n // },\n // }],\n // yAxes: [{\n // // stacked: true,\n // barPercentage: 0.3,\n // gridLines: {\n // color: 'rgb(247, 250, 252)',\n // borderDash: [5, 2],\n // zeroLineColor: 'rgb(247, 250, 252)',\n // },\n // ticks: {\n // fontSize: 9,\n // beginAtZero: true,\n // callback: function (label, index, labels) {\n // return label / 1000 + 'k';\n // }\n // }\n // }]\n // }\n // }\n // };\n\n // this.vaccinationUpTrendsMonthChart = new Chart(ctx, vaccConfig);\n // this.vaccinationUpTrendsMonthChart.update();\n // }\n\n\n // getUptrendVacChartDataAll(value = \"\") {\n\n // this.publicReportService.getVacPublicReports(this.state_id, this.district_id, this.todaysdate).subscribe(res => {\n // if (res) {\n\n // this.vaccinationUpTrendsAllData = res.weeklyReportUptrend;\n // // console.log(\"vacc report\", this.last30DaysVaccinationData);\n // if (this.vaccinationUpTrendsAllData.length) {\n // this.prepareDataForVaccinationUpTrendsAll();\n // }\n\n // if (value == \"All\") {\n\n // this.isupTrendToday = false;\n // this.isupTrendMonth = false;\n // this.isupTrendAll = true;\n // }\n // }\n // });\n // }\n\n // prepareDataForVaccinationUpTrendsAll() {\n // if (this.vaccinationUpTrendsAllChart) {\n // this.vaccinationUpTrendsAllChart.destroy();\n // }\n\n // const ctx = $('#vacc-uptrends-week');\n\n // const labels = this.vaccinationUpTrendsAllData.map(obj => obj.label);\n\n // const data1 = _.map(this.vaccinationUpTrendsAllData, 'total');\n // const data2 = _.map(this.vaccinationUpTrendsAllData, 'dose1');\n // const data3 = _.map(this.vaccinationUpTrendsAllData, 'dose2');\n // const format = this.numberFormatPipe;\n // var vaccConfig = {\n // type: 'line',\n // data: {\n // labels: labels,\n // datasets: [\n // {\n // type: 'line',\n // label: 'Total Doses',\n // backgroundColor: 'rgb(81,196,211, 0.1)',\n // borderColor: 'rgb(81,196,211)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(81,196,211)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: '2',\n\n // data: data1,\n // },\n // {\n // type: 'line',\n // label: 'Dose One',\n // backgroundColor: 'rgb(0,145,124, 0.1)',\n // borderColor: 'rgb(0,145,124)',\n // borderWidth: 2,\n // pointBackgroundColor: \"rgb(0,145,124)\",\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: '2',\n\n // data: data2,\n // },\n // {\n // type: 'line',\n // label: 'Dose Two',\n // backgroundColor: 'rgb(216,58,86, 0.15)',\n // borderColor: 'rgb(216,58,86)',\n // borderWidth: 2,\n // pointBackgroundColor: 'rgb(216,58,86)',\n // pointBorderWidth: 1,\n // pointRadius: 3,\n // fill: true,\n\n // data: data3,\n // }\n // ]\n // },\n // options: {\n // legend: {\n // display: true,\n // position: 'bottom',\n // labels: {\n // usePointStyle: false,\n // boxWidth: 20,\n // padding: 15,\n // fontSize: 11,\n // }\n // },\n // tooltips: {\n // mode: 'label',\n // callbacks: {\n // label: function (tooltipItem, data) {\n // var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n // if (label) {\n // label += ': ';\n // }\n\n // const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n // label += format.transform(dataNum);\n // return label;\n // }\n // }\n // },\n // responsive: true,\n // scales: {\n // xAxes: [{\n // beginAtZero: false,\n // ticks: {\n // autoSkip: false,\n // fontSize: 11,\n // },\n // // stacked: true,\n // gridLines: {\n // display: false,\n // drawBorder: false,\n // },\n // }],\n // yAxes: [{\n // // stacked: true,\n // barPercentage: 0.3,\n // gridLines: {\n // color: 'rgb(247, 250, 252)',\n // borderDash: [5, 2],\n // zeroLineColor: 'rgb(247, 250, 252)',\n // },\n // ticks: {\n // fontSize: 9,\n // beginAtZero: true,\n // callback: function (label, index, labels) {\n // return label / 1000 + 'k';\n // }\n // }\n // }]\n // }\n // }\n // };\n\n // this.vaccinationUpTrendsAllChart = new Chart(ctx, vaccConfig);\n // this.vaccinationUpTrendsAllChart.update();\n // }\n\nExportDashboardDataInJson(){\n this.isState = (document.getElementById(\"state\") as HTMLInputElement).value;\n this.isDistrict = (document.getElementById(\"district\") as HTMLInputElement).value;\n let key = \"\";\n if(this.isState !=\"\" && !this.isDistrict){\n key = \"districtWiseVaccination\";\n }\n else if(this.isState !=\"\" && this.isDistrict != \"\"){\n key = \"centerWiseVaccination\";\n }\n else if(!this.isDistrict && !this.isState){\n key = \"stateWiseVaccination\";\n }\n\n let jsonDashboardData: object = {\n \"vaccinationDoneByTimeToday\": this.DownlloadVaccinationDoneByTime,\n \"last30DaysVaccination\": this.Downloadlast30DaysVaccination,\n \"weeklyVaccination\": this.DownloadweeklyReport,\n \"vaccinationDoneByTimeAgeWiseToday\": this.DownlloadVaccinationDoneByTimeAgeWise,\n \"last30DaysAgeWiseVaccination\": this.Downloadlast30DaysAgeWiseVaccination,\n \"weeklyAgeWiseVaccination\": this.DownloadweeklyVacAgeWiseReport,\n \"registrationDoneByTimeToday\": this.DownlloadImeWiseTodayRegReport,\n \"last30DaysRegistration\": this.DownloadRegReportData,\n \"weeklyRegistration\": this.DownloadRegWeekReportData,\n \"last30DaysAefiReported\": this.DownlloadLast30DaysAefi,\n \"vaccinationByAge\": this.DownlloadVaccinationByAge\n };\n jsonDashboardData[key] = this.getBeneficiariesGroupBy;\n const blob = new Blob([JSON.stringify(jsonDashboardData)], {type : 'application/json'});\n saveAs(blob, 'dashboard_export.json');\n}\nExportDashboardDataInExcel(){\n const header = ['label', 'dose_one', 'dose_two','precaution_dose','count'];\n /**************DownloadVaccinationByDoses Today**************/\n const exportdataByDoseToday = [];\n if (this.DownlloadVaccinationDoneByTime) {\n this.DownlloadVaccinationDoneByTime.forEach(element => {\n exportdataByDoseToday.push([element.label,element.dose_one,element.dose_two,element.dose_pd,element.count])\n\n });\n }\n const workbook = new Excel.Workbook();\n const worksheet1 = workbook.addWorksheet('VaccinationDoneByTimeToday');\n const headerRow = worksheet1.addRow(header);\n headerRow.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow.alignment = { vertical: 'middle', horizontal: 'center' };\n\n\n exportdataByDoseToday.forEach(d => {\n const row = worksheet1.addRow(d);\n});\nworksheet1.getColumn(1).width = 20;\nworksheet1.getColumn(2).width = 20;\nworksheet1.getColumn(3).width = 20;\n// worksheet1.getColumn(4).width = 20;\nworksheet1.addRow([]);\n\n /**************DownloadVaccinationByDoses 30 Days**************/\n const header001 = ['vaccine_date', 'dose_1', 'dose_2','precaution_dose','total'];\n const exportdataByDose30Days = [];\n if (this.Downloadlast30DaysVaccination) {\n this.Downloadlast30DaysVaccination.forEach(element => {\n exportdataByDose30Days.push([element.vaccine_date,element.dose_1,element.dose_2,element.dose_pd,\n element.total])\n\n });\n }\n const worksheet2 = workbook.addWorksheet('Last30DaysVaccination');\n const headerRow2 = worksheet2.addRow(header001);\n headerRow2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow2.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataByDose30Days.forEach(d => {\n const row = worksheet2.addRow(d);\n});\nworksheet2.getColumn(1).width = 20;\nworksheet2.getColumn(2).width = 20;\nworksheet2.getColumn(3).width = 20;\nworksheet2.getColumn(4).width = 20;\n// worksheet2.getColumn(5).width = 20;\nworksheet2.addRow([]);\n\n /**************DownloadVaccinationByDoses ALL**************/\n const header002 = ['label', 'dose1', 'dose2','precaution_dose','total'];\n\n const exportdataByDoseAll = [];\n if (this.DownloadweeklyReport) {\n this.DownloadweeklyReport.forEach(element => {\n exportdataByDoseAll.push([element.label,element.dose1,element.dose2,element.dose_pd,element.total])\n\n });\n }\n const worksheet3 = workbook.addWorksheet('WeeklyVaccination');\n const headerRow3 = worksheet3.addRow(header002);\n headerRow3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n headerRow3.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataByDoseAll.forEach(d => {\n const row = worksheet3.addRow(d);\n});\nworksheet3.getColumn(1).width = 20;\nworksheet3.getColumn(2).width = 20;\nworksheet3.getColumn(3).width = 20;\nworksheet3.getColumn(4).width = 20;\n// worksheet2.getColumn(5).width = 20;\nworksheet3.addRow([]);\n\n/**************exportdataByAgeToday**************/\nconst header1 = ['label', 'vac_15_17','vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAgeToday = [];\nif (this.DownlloadVaccinationDoneByTimeAgeWise) {\n this.DownlloadVaccinationDoneByTimeAgeWise.forEach(element => {\n exportdataByAgeToday.push([element.label,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\n//const worksheet4 = workbook.addWorksheet('Today Vaccination-Agewise');\nconst worksheet4 = workbook.addWorksheet('VaccinationByTimeAgeWiseToday');\n\nconst header1Row = worksheet4.addRow(header1);\nheader1Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n\nexportdataByAgeToday.forEach(d => {\nconst row = worksheet4.addRow(d);\n});\nworksheet4.getColumn(1).width = 20;\nworksheet4.getColumn(2).width = 20;\nworksheet4.getColumn(3).width = 20;\nworksheet4.getColumn(4).width = 20;\nworksheet4.getColumn(5).width = 20;\nworksheet4.getColumn(6).width = 20;\nworksheet4.addRow([]);\n\n/**************exportdataByAge30Days**************/\nconst header1001 = ['vaccine_date', 'vac_15_17','vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAge30Days = [];\nif (this.Downloadlast30DaysAgeWiseVaccination) {\n this.Downloadlast30DaysAgeWiseVaccination.forEach(element => {\n exportdataByAge30Days.push([element.vaccine_date,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\nconst worksheet5 = workbook.addWorksheet('Last30DaysAgeWiseVaccination');\nconst header1Row2 = worksheet5.addRow(header1001);\nheader1Row2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row2.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataByAge30Days.forEach(d => {\nconst row = worksheet5.addRow(d);\n});\nworksheet5.getColumn(1).width = 20;\nworksheet5.getColumn(2).width = 20;\nworksheet5.getColumn(3).width = 20;\nworksheet5.getColumn(4).width = 20;\nworksheet5.getColumn(5).width = 20;\nworksheet5.getColumn(6).width = 20;\nworksheet5.addRow([]);\n\n/**************exportdataByAgeAll**************/\nconst header1002 = ['label', 'vac_15_17','vac_18_45', 'vac_45_60','vac_60_above', 'total'];\n\nconst exportdataByAgeAll = [];\nif (this.DownloadweeklyVacAgeWiseReport) {\n this.DownloadweeklyVacAgeWiseReport.forEach(element => {\n exportdataByAgeAll.push([element.label,element.vac_15_17,element.vac_18_45,element.vac_45_60,element.vac_60_above,element.total])\n\n });\n}\nconst worksheet6 = workbook.addWorksheet('weeklyAgeWiseVaccination');\nconst header1Row3 = worksheet6.addRow(header1002);\nheader1Row3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader1Row3.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataByAgeAll.forEach(d => {\nconst row = worksheet6.addRow(d);\n});\nworksheet6.getColumn(1).width = 20;\nworksheet6.getColumn(2).width = 20;\nworksheet6.getColumn(3).width = 20;\nworksheet6.getColumn(4).width = 20;\nworksheet6.getColumn(5).width = 20;\nworksheet6.getColumn(6).width = 20;\nworksheet6.addRow([]);\n\n/**************exportdataRegistrationTrendsToday**************/\nconst header02 = ['label','age15', 'age18', 'age45','age60', 'total'];\n const exportdataRegistrationTrendsToday = [];\n if (this.DownlloadImeWiseTodayRegReport) {\n this.DownlloadImeWiseTodayRegReport.forEach(element => {\n exportdataRegistrationTrendsToday.push([element.label,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n }\n const worksheet07 = workbook.addWorksheet('registrationDoneByTimeToday');\n const header02Row = worksheet07.addRow(header02);\n header02Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n });\n header02Row.alignment = { vertical: 'middle', horizontal: 'center' };\n exportdataRegistrationTrendsToday.forEach(d => {\n const row = worksheet07.addRow(d);\n});\nworksheet07.getColumn(1).width = 20;\nworksheet07.getColumn(2).width = 20;\nworksheet07.getColumn(3).width = 20;\nworksheet07.getColumn(4).width = 20;\nworksheet07.getColumn(5).width = 20;\nworksheet07.getColumn(6).width = 20;\nworksheet07.addRow([]);\n\n/**************exportdataRegistrationTrends30Days**************/\nconst header02001 = ['reg_date', 'age15','age18', 'age45','age60', 'total'];\n\nconst exportdataRegistrationTrends30Days = [];\n\nif (this.DownloadRegReportData) {\n this.DownloadRegReportData.forEach(element => {\n const reg_date = moment(element.reg_date, \"YYYY-MM-DD\").format('DD MMM');\n exportdataRegistrationTrends30Days.push([reg_date,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n}\nconst worksheet8 = workbook.addWorksheet('last30DaysRegistration');\nconst header2Row2 = worksheet8.addRow(header02001);\nheader2Row2.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader2Row2.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataRegistrationTrends30Days.forEach(d => {\nconst row = worksheet8.addRow(d);\n});\nworksheet8.getColumn(1).width = 20;\nworksheet8.getColumn(2).width = 20;\nworksheet8.getColumn(3).width = 20;\nworksheet8.getColumn(4).width = 20;\nworksheet8.getColumn(5).width = 20;\nworksheet8.getColumn(6).width = 20;\nworksheet8.addRow([]);\n\n/**************exportdataRegistrationTrendsAll**************/\nconst header02002 = ['label', 'age15','age18', 'age45','age60', 'total'];\n\nconst exportdataRegistrationTrendsAll = [];\nif (this.DownloadRegWeekReportData) {\n this.DownloadRegWeekReportData.forEach(element => {\n exportdataRegistrationTrendsAll.push([element.label,element.age15,element.age18,element.age45,element.age60,element.total])\n\n });\n}\nconst worksheet9 = workbook.addWorksheet('weeklyRegistration');\nconst header2Row3 = worksheet9.addRow(header02002);\nheader2Row3.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nheader2Row3.alignment = { vertical: 'middle', horizontal: 'center' };\nexportdataRegistrationTrendsAll.forEach(d => {\nconst row = worksheet9.addRow(d);\n});\nworksheet9.getColumn(1).width = 20;\nworksheet9.getColumn(2).width = 20;\nworksheet9.getColumn(3).width = 20;\nworksheet9.getColumn(4).width = 20;\nworksheet9.getColumn(5).width = 20;\nworksheet9.getColumn(6).width = 20;\nworksheet9.addRow([]);\n\n/**************vaccinationAEFIChartData**************/\nconst header3 = ['vaccine_date', 'aefi'];\nconst AEFIChartExportData = [];\nif (this.DownlloadLast30DaysAefi) {\n this.DownlloadLast30DaysAefi.forEach(element => {\n AEFIChartExportData.push([element.vaccine_date,element.aefi])\n\n });\n}\nconst worksheet10 = workbook.addWorksheet('last30DaysAefiReported');\nconst header3Row = worksheet10.addRow(header3);\nheader3Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\n\nAEFIChartExportData.forEach(d => {\nconst row = worksheet10.addRow(d);\n});\nworksheet10.getColumn(1).width = 20;\nworksheet10.getColumn(2).width = 20;\nworksheet10.addRow([]);\nheader3Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************vaccinationByAge**************/\n\nconst header4 = ['vac_15_17','vac_18_45','vac_45_60', 'above_60'];\nconst vaccinationByAgeexportdata = [];\nthis.vaccinationByAgefinalResult.push(this.DownlloadVaccinationByAge);\n\nif (this.vaccinationByAgefinalResult) {\n this.vaccinationByAgefinalResult.forEach(element => {\n vaccinationByAgeexportdata.push([element.vac_15_17,element.vac_18_45,element.vac_45_60,element.above_60])\n\n });\n}\nconst workbook11 = workbook.addWorksheet('vaccinationByAge');\nconst header4Row = workbook11.addRow(header4);\nheader4Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nvaccinationByAgeexportdata.forEach(d => {\nconst row = workbook11.addRow(d);\n});\nworkbook11.getColumn(1).width = 20;\nworkbook11.getColumn(2).width = 20;\nworkbook11.getColumn(3).width = 20;\nworkbook11.getColumn(4).width = 20;\nworkbook11.addRow([]);\nheader4Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************stateWiseVaccination**************/\nconst header5 = ['title', 'today','total'];\nconst stateWiseVaccinationData = [];\nif (this.getBeneficiariesGroupBy) {\n this.getBeneficiariesGroupBy.forEach(element => {\n stateWiseVaccinationData.push([element.title,element.today,element.total])\n\n });\n}\nconst worksheet12 = workbook.addWorksheet(this.downloadExcelHeader);\nconst header5Row = worksheet12.addRow(header5);\nheader5Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nstateWiseVaccinationData.forEach(d => {\nconst row = worksheet12.addRow(d);\n});\nworksheet12.getColumn(1).width = 20;\nworksheet12.getColumn(2).width = 20;\nworksheet12.getColumn(3).width = 20;\nworksheet12.addRow([]);\nheader5Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************vaccinationCoverageByStateChartData**************/\n\nconst header6 = ['title', 'partial_vaccinated','totally_vaccinated','precaution_dose'];\nconst vaccinationCoverageData = [];\nif (this.vaccinationCoverageByStateChartData) {\n this.vaccinationCoverageByStateChartData.forEach(element => {\n vaccinationCoverageData.push([element.title,element.partial_vaccinated,element.totally_vaccinated,\n element.precaution_dose])\n\n });\n}\nconst worksheet13 = workbook.addWorksheet(this.downloadExcelHeaderForCoverage);\nconst header6Row = worksheet13.addRow(header6);\nheader6Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nvaccinationCoverageData.forEach(d => {\nconst row = worksheet13.addRow(d);\n});\nworksheet13.getColumn(1).width = 25;\nworksheet13.getColumn(2).width = 20;\nworksheet13.getColumn(3).width = 20;\nworksheet13.getColumn(4).width = 20;\nworksheet13.addRow([]);\nheader6Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\n/**************vaccinationByCategoryRuralUrbanData**************/\n\nconst header7 = ['vaccine_date', 'rural','urban'];\nconst RuralUrbanExportdata = [];\nif (this.vaccinationByCategoryData) {\n this.vaccinationByCategoryData.forEach(element => {\n RuralUrbanExportdata.push([element.vaccine_date,element.rural,element.urban])\n\n });\n}\nconst worksheet14 = workbook.addWorksheet('VaccinationByCategory');\nconst header7Row = worksheet14.addRow(header7);\nheader7Row.eachCell((cell, number) => {\n cell.fill = {\n type: 'pattern',\n pattern: 'solid',\n fgColor: { argb: 'D3D3D3' },\n bgColor: { argb: 'D3D3D3' }\n };\n\n cell.font = {\n name: 'Calibri',\n bold: true,\n color: { argb: '000000' }\n };\n cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };\n});\nRuralUrbanExportdata.forEach(d => {\nconst row = worksheet14.addRow(d);\n});\nworksheet14.getColumn(1).width = 25;\nworksheet14.getColumn(2).width = 20;\nworksheet14.getColumn(3).width = 20;\nworksheet14.addRow([]);\nheader7Row.alignment = { vertical: 'middle', horizontal: 'center' };\n\nthis.tableheader\nlet filename = `dashboard_export.xlsx`;\n workbook.xlsx.writeBuffer().then((data: any) => {\n const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n fs.saveAs(blob, filename);\n\n });\n\n}\n\nliveVaccinationCounter:any;\nwebSocketCounter: any;\ntotalVaccinationCounter: any = 0;\npartialVaccinationCounter: any = 0;\nfullyVaccinationCounter: any = 0;\ntotalRegistrationCounter: any = 0;\n\ntotal15_17Vaccination: any = 0;\ntotal18_44Vaccination: any = 0;\ntotal45_60Vaccination: any = 0;\ntotalabove_60Vaccination: any = 0;\ntotal_hcw_flw_precaution_vaccinations: any = 0;\ntotal_60_plus_precaution_vaccinations: any = 0;\nintervalSub$: Subscription = new Subscription();\nhideWebSocketCounter = true;\nsuffix = 'IND';\ngetLiveVaccinationCounter() {\n const channelName = `covid_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n // let liveData = data.split('::@::');\n // this.totalVaccinationCounter = parseInt(liveData[0]);\n this.totalVaccinationCounter = parseInt(data);\n });\n\n const channelNameReg = `covid_registration_live_counter`;\n this.webSocket.listen(channelNameReg).subscribe((data:any) => {\n this.totalRegistrationCounter = parseInt(data);\n });\n\n const channelNamepartialVacc = `covid_partially_vaccination_live_counter`;\n this.webSocket.listen(channelNamepartialVacc).subscribe((data:any) => {\n this.partialVaccinationCounter = parseInt(data);\n });\n\n const channelNametotalVacc = `covid_fully_vaccination_live_counter`;\n this.webSocket.listen(channelNametotalVacc).subscribe((data:any) => {\n this.fullyVaccinationCounter = parseInt(data);\n });\n\n this.webSocket.listenAgeSocket('covid_vaccination_bifurcation').subscribe((data: any) => {\n this.total15_17Vaccination = data['vaccination_15_17_total'];\n this.total18_44Vaccination = data['vaccination_18_44_total'];\n this.total45_60Vaccination = data['vaccination_45_60_total'];\n this.totalabove_60Vaccination = data['vaccination_above_60_total'];\n this.total_hcw_flw_precaution_vaccinations = data['vaccination_18_44_precaution_dose'] + data['vaccination_45_60_precaution_dose'];\n this.total_60_plus_precaution_vaccinations = data['vaccination_above_60_precaution_dose']\n })\n}\n\ngetDataForLiveVaccCountChart(){\n this.publicReportService.getLiveVaccinationCounterChart(this.todaysdate).subscribe(res => {\nif(res){\n this.liveVaccData = res;\n for (let i = 0; i < this.liveVaccData.length; i++) {\n this.liveVaccData[i].last5mins = i == 0 ? 0 : this.liveVaccData[i].count - this.liveVaccData[i - 1].count\n}\n\nthis.liveVaccData = this.liveVaccData.slice(Math.max(this.liveVaccData.length - 12, -1))\n console.log(\" this.liveVaccData1\", this.liveVaccData);\n this.prepareDataForLiveVaccCount();\n}\n });\n}\n\n\nprepareDataForLiveVaccCount() {\n if (this.liveVaccChart) {\n this.liveVaccChart.destroy();\n }\n\n const ctx = $('#liveVacc');\n\n // if (this.liveVaccData) {\n // this.liveVaccData = this.liveVaccData.sort((a, b) => (a.timestamps > b.timestamps) ? 1 : -1)\n // }\n// -----------------------------------------\n// Chart.defaults.LineWithLine = Chart.defaults.line;\n// Chart.controllers.LineWithLine = Chart.controllers.line.extend({\n// draw: function(ease) {\n// Chart.controllers.line.prototype.draw.call(this, ease);\n\n// if (this.chart.tooltip._active && this.chart.tooltip._active.length) {\n// var activePoint = this.chart.tooltip._active[0],\n// ctx = this.chart.ctx,\n// x = activePoint.tooltipPosition().x,\n// topY = this.chart.legend.bottom,\n// bottomY = this.chart.chartArea.bottom;\n\n// // draw line\n// ctx.save();\n// ctx.beginPath();\n// ctx.moveTo(x, topY);\n// ctx.lineTo(x, bottomY);\n// ctx.lineWidth = 1;\n// ctx.strokeStyle = '#808080';\n// ctx.stroke();\n// ctx.restore();\n// }\n// }\n// });\n\n\n\n// ----------------------------------------\n\n\n\n const labels = _.map(this.liveVaccData, (data) => {\n return moment(data.time, \"YYYY-MM-DDTHH:mm:ssZ\").add(330, \"minutes\").format('hh:mm A');\n });\n\n const data1 = _.map(this.liveVaccData, 'last5mins');\n // console.log(\" this.liveVaccDataxcXC\", this.liveVaccData);\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n // borderRadius: 50,\n // borderwidth:10,\n data: {\n labels: labels,\n\n datasets: [\n {\n // type: 'line',\n // // label: '5 Min Interval',\n // backgroundColor: \"rgb(28,169,121, 1)\",\n // borderColor: \"rgb(28,169,121, 1)\",\n\n // data: data1,\n // borderwidth:10,\n // borderRadius: 50,\n // // corners: 'round',\n // // bezierCurve : false\n\n\n\n type: 'line',\n // tension: 0.1,\n backgroundColor: 'rgb(28,169,121, .1)',\n borderColor: 'rgb(28,169,121, 1)',\n borderWidth: 2,\n pointBackgroundColor: 'rgb(28,169,121, 1)',\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: data1,\n }\n\n ]\n },\n options: {\n borderRadius: 50,\n // cornerRadius: 20,\n // barRoundness: 1,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n yAlign: 'top',\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.datasets[tooltipItem.datasetIndex].label || '';\n\n\n if (label) {\n label += ': ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n\n\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n display:true,\n // barPercentage:1.0,\n // categoryPercentage:1.0,\n // // maintainAspectRatio :false,\n beginAtZero: true,\n // barThickness: 7,\n // borderRadius: 50,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 3,\n fontSize: 6,\n display:true,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\",\n // callback: function (label, index, labels) {\n // // return label / 100000 + 'L';\n // return \"\"\n // }\n },\n stacked: false,\n gridLines: {\n display: true,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000',\n // color: \"#808080\"\n },\n }],\n yAxes: [{\n\n stacked: false,\n barPercentage: 0.35,\n dispaly:false,\n gridLines: {\n color: 'rgb(247, 250, 252)',\n borderDash: [2,4],\n zeroLineColor: 'rgb(247, 250, 252)',\n display:false,\n offsetGridLines: true\n },\n ticks: {\n dispaly:true,\n fontSize: 6,\n beginAtZero: false,\n autoSkip: true,\n maxTicksLimit: 3,\n fontColor: \"#000000\",\n callback: function (label, index, labels) {\n return label / 100000 + 'L';\n // return \"\"\n }\n }\n }]\n },\n // annotation: {\n // annotations: [{\n // type: 'line',\n // mode: 'vertical',\n // scaleID: 'y-axis-0',\n // value: 5,\n // borderColor: 'rgb(75, 192, 192)',\n // borderWidth: 4,\n // label: {\n // enabled: false,\n // content: 'Test label'\n // }\n // }]\n // }\n\n\n },\n // plugins: [{\n // beforeInit: function (chart) {\n // chart.data.labels.forEach(function (e, i, a) {\n // if (/\\n/.test(e)) {\n // a[i] = e.split(/\\n/)\n // }\n // })\n // }\n // }]\n };\n\n this.liveVaccChart = new Chart(ctx, vaccConfig);\n this.liveVaccChart.update();\n}\n\n\n\n liveVaccChartStreaming;\n prepareDataForLiveVaccStareaming() {\n if (this.liveVaccChartStreaming) {\n this.liveVaccChartStreaming.destroy();\n }\n\n const ctx = $('#liveVaccStreaming');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(30,55,112, 0.3)',\n borderColor: 'rgb(30, 55, 112)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(30,55,112)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming.update();\n this.updateData();\n }\n\n\n prevsData;\n updateCountTotalVacc = 0;\n async updateData() {\n const channelName = `covid_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreaming.data.labels.push(label);\n this.liveVaccChartStreaming.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsData) {\n diff = currentData - this.prevsData\n }\n this.prevsData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsData) {\n diff = currentData - this.prevsData\n }\n this.prevsData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountTotalVacc > this.numberOfElements) {\n this.liveVaccChartStreaming.data.labels.shift();\n this.liveVaccChartStreaming.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVacc++;\n }\n this.liveVaccChartStreaming.update();\n this.liveVaccChartStreaming = this.liveVaccChartStreaming;\n })\n }\n\n liveVaccChartStreamingRegistration;\n prepareDataForLiveVaccStareamingRegistration() {\n if (this.liveVaccChartStreamingRegistration) {\n this.liveVaccChartStreamingRegistration.destroy();\n }\n\n const ctx = $('#liveVaccStreamingReg');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(129,136,142, 0.3)',\n borderColor: 'rgb(129,136,142)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(129,136,142)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingRegistration = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingRegistration.update();\n this.updateDataRegistration();\n }\n\n\n prevsRegData;\n updateCountTotalReg = 0\n async updateDataRegistration() {\n const channelName = `covid_registration_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingRegistration.data.labels.push(label);\n this.liveVaccChartStreamingRegistration.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsRegData) {\n diff = currentData - this.prevsRegData\n }\n this.prevsRegData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsRegData) {\n diff = currentData - this.prevsRegData\n }\n this.prevsRegData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountTotalReg > this.numberOfElements) {\n this.liveVaccChartStreamingRegistration.data.labels.shift();\n this.liveVaccChartStreamingRegistration.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalReg++;\n }\n this.liveVaccChartStreamingRegistration.update();\n this.liveVaccChartStreamingRegistration = this.liveVaccChartStreamingRegistration;\n })\n }\n\n\n liveVaccChartStreamingPartialVacc;\n prepareDataForLiveVaccStareamingPartialVacc() {\n if (this.liveVaccChartStreamingPartialVacc) {\n this.liveVaccChartStreamingPartialVacc.destroy();\n }\n\n const ctx = $('#liveVaccStreamingPartialVacc');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(244,140,43, 0.3)',\n borderColor: 'rgb(244,140,43)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(244,140,43)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingPartialVacc = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingPartialVacc.update();\n this.updateDataPartialVacc();\n }\n\n\n prevsPartialVaccData;\n updateCountPartialVacc = 0\n async updateDataPartialVacc() {\n const channelName = `covid_partially_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingPartialVacc.data.labels.push(label);\n this.liveVaccChartStreamingPartialVacc.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsPartialVaccData) {\n diff = currentData - this.prevsPartialVaccData\n }\n this.prevsPartialVaccData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsPartialVaccData) {\n diff = currentData - this.prevsPartialVaccData\n }\n this.prevsPartialVaccData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountPartialVacc > this.numberOfElements) {\n this.liveVaccChartStreamingPartialVacc.data.labels.shift();\n this.liveVaccChartStreamingPartialVacc.data.datasets[0].data.shift();\n } else {\n this.updateCountPartialVacc++;\n }\n this.liveVaccChartStreamingPartialVacc.update();\n this.liveVaccChartStreamingPartialVacc = this.liveVaccChartStreamingPartialVacc;\n })\n }\n\n\n liveVaccChartStreamingFullyVacc;\n prepareDataForLiveVaccStareamingFullyVacc() {\n if (this.liveVaccChartStreamingFullyVacc) {\n this.liveVaccChartStreamingFullyVacc.destroy();\n }\n\n const ctx = $('#liveVaccStreamingFullyVacc');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(94, 190, 93, 0.3)',\n borderColor: 'rgb(94, 190, 93)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(94, 190, 93)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n showScale: false,\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n // beginAtZero: true,\n // ticks: {\n // autoSkip: true,\n // maxTicksLimit: 5,\n // fontSize: 6,\n // display:false,\n // maxRotation: 0,\n // minRotation: 0,\n // fontColor: \"#000000\"\n // },\n // stacked: false,\n // gridLines: {\n // display: false,\n // drawBorder: true,\n // borderDash: [2, 4],\n // zeroLineWidth: 0.05,\n // zeroLineColor: '#000000'\n // },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingFullyVacc = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingFullyVacc.update();\n this.updateDataFullyVacc();\n }\n\n\n prevsFullyVaccData;\n updateCountFullyVacc = 0;\n async updateDataFullyVacc() {\n const channelName = `covid_fully_vaccination_live_counter`;\n this.webSocket.listen(channelName).subscribe((data:any) => {\n let currentData = parseInt(data);\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreamingFullyVacc.data.labels.push(label);\n this.liveVaccChartStreamingFullyVacc.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsFullyVaccData) {\n diff = currentData - this.prevsFullyVaccData\n }\n this.prevsFullyVaccData = currentData;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsFullyVaccData) {\n diff = currentData - this.prevsFullyVaccData\n }\n this.prevsFullyVaccData = currentData;\n dataset.data.push(diff)\n }\n });\n if (this.updateCountFullyVacc > this.numberOfElements) {\n this.liveVaccChartStreamingFullyVacc.data.labels.shift();\n this.liveVaccChartStreamingFullyVacc.data.datasets[0].data.shift();\n } else {\n this.updateCountFullyVacc++;\n }\n this.liveVaccChartStreamingFullyVacc.update();\n this.liveVaccChartStreamingFullyVacc = this.liveVaccChartStreamingFullyVacc;\n })\n }\n\n tConvert (time) {\n console.log(\"time\",time )\n // Check correct time format and split into components\n time = time.toString ().match (/^([01]\\d|2[0-3])(:)([0-5]\\d)(:[0-5]\\d)?$/) || [time];\n\n if (time.length >= 0) { // If time format correct\n time = time.slice (1); // Remove full string match value\n time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM\n time[0] = +time[0] % 12 || 12; // Adjust hours\n }\n return time.join (''); // return adjusted time or original string\n }\n\n\n\n liveVaccChartStreaming15_17;\n prepareDataForLiveVaccStareaming15_17() {\n if (this.liveVaccChartStreaming15_17) {\n this.liveVaccChartStreaming15_17.destroy();\n }\n\n const ctx = $('#liveVacc15_17');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(129,136,142, 0.3)',\n borderColor: 'rgb(129,136,142)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(129,136,142)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming15_17 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming15_17.update();\n }\n\n\n liveVaccChartStreaming18_44;\n prepareDataForLiveVaccStareaming18_44() {\n if (this.liveVaccChartStreaming18_44) {\n this.liveVaccChartStreaming18_44.destroy();\n }\n\n const ctx = $('#liveVacc18_44');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(30,55,112, 0.3)',\n borderColor: 'rgb(30, 55, 112)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(30,55,112)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming18_44 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming18_44.update();\n }\n\n liveVaccChartStreaming45_60;\n prepareDataForLiveVaccStareaming45_60() {\n if (this.liveVaccChartStreaming45_60) {\n this.liveVaccChartStreaming45_60.destroy();\n }\n\n const ctx = $('#liveVacc45_60');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(244,140,43, 0.3)',\n borderColor: 'rgb(244,140,43)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(244,140,43)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n beginAtZero: true,\n ticks: {\n autoSkip: true,\n maxTicksLimit: 5,\n fontSize: 6,\n display:false,\n maxRotation: 0,\n minRotation: 0,\n fontColor: \"#000000\"\n },\n stacked: false,\n gridLines: {\n display: false,\n drawBorder: true,\n borderDash: [2, 4],\n zeroLineWidth: 0.05,\n zeroLineColor: '#000000'\n },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreaming45_60 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreaming45_60.update();\n }\n\n liveVaccChartStreamingabove_60;\n prepareDataForLiveVaccStareamingabove_60() {\n if (this.liveVaccChartStreamingabove_60) {\n this.liveVaccChartStreamingabove_60.destroy();\n }\n\n const ctx = $('#liveVaccabove_60');\n\n const format = this.numberFormatPipe;\n var vaccConfig = {\n type: 'line',\n data: {\n datasets: [{\n type: 'line',\n backgroundColor: 'rgb(94, 190, 93, 0.3)',\n borderColor: 'rgb(94, 190, 93)',\n borderWidth: 2,\n pointBackgroundColor: \"rgb(94, 190, 93)\",\n pointBorderWidth: 1.5,\n pointRadius: 1.5,\n fill: true,\n bezierCurve : false,\n data: 0,\n }]\n },\n options: {\n borderRadius: 50,\n tooltips: {\n enabled: true,\n mode: 'label',\n intersect: false,\n displayColors: false,\n callbacks: {\n title: function(tooltipItems, data) {\n return '';\n },\n label: function (tooltipItem, data) {\n var datasetLabel = '';\n var label = data.labels[tooltipItem.datasetIndex] || '';\n\n\n if (label) {\n // label = moment(label).format('h:mm:ss a')\n label += ' | ';\n }\n\n const dataNum = Math.round(tooltipItem.yLabel * 100) / 100;\n label += format.transform(dataNum);\n return label;\n }\n }\n },\n legend: {\n display: false,\n boxWidth: 0,\n position: 'bottom',\n labels: {\n usePointStyle: false,\n boxWidth: 0,\n padding: 5,\n fontSize: 10,\n }\n },\n responsive: true,\n scales: {\n showScale: false,\n xAxes: [{\n // type: 'time',\n // time: {\n // displayFormats: {\n // second: 'h:mm:ss a'\n // }\n // },\n display:false,\n // beginAtZero: true,\n // ticks: {\n // autoSkip: true,\n // maxTicksLimit: 5,\n // fontSize: 6,\n // display:false,\n // maxRotation: 0,\n // minRotation: 0,\n // fontColor: \"#000000\"\n // },\n // stacked: false,\n // gridLines: {\n // display: false,\n // drawBorder: true,\n // borderDash: [2, 4],\n // zeroLineWidth: 0.05,\n // zeroLineColor: '#000000'\n // },\n }],\n yAxes: [{\n // stacked: false,\n // barPercentage: 0.35,\n dispaly:false,\n // beginAtZero: true,\n gridLines: {\n display:false,\n },\n scaleShowLabels: false,\n ticks: {\n dispaly:false,\n userCallback: function(value, index, values) {\n return \"\";\n }\n }\n }]\n }\n\n\n }\n };\n\n this.liveVaccChartStreamingabove_60 = new Chart(ctx, vaccConfig);\n this.liveVaccChartStreamingabove_60.update();\n }\n\n\n prevsDataAge = {};\n updateCountTotalVaccAge = {'15_17': 0, '18_44': 0, '45_60': 0, 'above_60': 0};\n async updateDataAge() {\n const channelName = `covid_vaccination_bifurcation`;\n this.webSocket.listenAgeSocket(channelName).subscribe((data:any) => {\n let vacc_total_15_17 = data['vaccination_15_17_total'];\n let vacc_total_18_44 = data['vaccination_18_44_precaution_dose'] + data['vaccination_45_60_precaution_dose'];\n let vacc_total_45_60 = data['vaccination_above_60_precaution_dose'];\n // let vacc_total_above_60 = data['vaccination_above_60_total'];\n let label = moment(new Date()).format('HH:mm:ss')\n this.liveVaccChartStreaming15_17.data.labels.push(label);\n this.liveVaccChartStreaming18_44.data.labels.push(label);\n this.liveVaccChartStreaming45_60.data.labels.push(label);\n // this.liveVaccChartStreamingabove_60.data.labels.push(label);\n\n //15-17\n this.liveVaccChartStreaming15_17.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['15_17']) {\n diff = vacc_total_15_17 - this.prevsDataAge['15_17']\n }\n this.prevsDataAge['15_17'] = vacc_total_15_17;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['15_17']) {\n diff = vacc_total_15_17 - this.prevsDataAge['15_17']\n }\n this.prevsDataAge['15_17'] = vacc_total_15_17;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['15_17'] > this.numberOfElements) {\n this.liveVaccChartStreaming15_17.data.labels.shift();\n this.liveVaccChartStreaming15_17.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['15_17']++;\n }\n this.liveVaccChartStreaming15_17.update();\n this.liveVaccChartStreaming15_17 = this.liveVaccChartStreaming15_17;\n\n //18-44\n this.liveVaccChartStreaming18_44.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['18_44']) {\n diff = vacc_total_18_44 - this.prevsDataAge['18_44']\n }\n this.prevsDataAge['18_44'] = vacc_total_18_44;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['18_44']) {\n diff = vacc_total_18_44 - this.prevsDataAge['18_44']\n }\n this.prevsDataAge['18_44'] = vacc_total_18_44;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['18_44'] > this.numberOfElements) {\n this.liveVaccChartStreaming18_44.data.labels.shift();\n this.liveVaccChartStreaming18_44.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['18_44']++;\n }\n this.liveVaccChartStreaming18_44.update();\n this.liveVaccChartStreaming18_44 = this.liveVaccChartStreaming18_44;\n\n\n //45-60\n this.liveVaccChartStreaming45_60.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['45_60']) {\n diff = vacc_total_45_60 - this.prevsDataAge['45_60']\n }\n this.prevsDataAge['45_60'] = vacc_total_45_60;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['45_60']) {\n diff = vacc_total_45_60 - this.prevsDataAge['45_60']\n }\n this.prevsDataAge['45_60'] = vacc_total_45_60;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['45_60'] > this.numberOfElements) {\n this.liveVaccChartStreaming45_60.data.labels.shift();\n this.liveVaccChartStreaming45_60.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['45_60']++;\n }\n this.liveVaccChartStreaming45_60.update();\n this.liveVaccChartStreaming45_60 = this.liveVaccChartStreaming45_60;\n\n\n //above-60\n /*this.liveVaccChartStreamingabove_60.data.datasets.forEach((dataset) => {\n if (typeof dataset.data == 'number') {\n let diff = 0;\n if (this.prevsDataAge['above_60']) {\n diff = vacc_total_above_60 - this.prevsDataAge['above_60']\n }\n this.prevsDataAge['above_60'] = vacc_total_above_60;\n dataset.data = [diff];\n } else {\n let diff = 0;\n if (this.prevsDataAge['above_60']) {\n diff = vacc_total_above_60 - this.prevsDataAge['above_60']\n }\n this.prevsDataAge['above_60'] = vacc_total_above_60;\n dataset.data.push(diff)\n }\n });\n\n if (this.updateCountTotalVaccAge['above_60'] > this.numberOfElements) {\n this.liveVaccChartStreamingabove_60.data.labels.shift();\n this.liveVaccChartStreamingabove_60.data.datasets[0].data.shift();\n } else {\n this.updateCountTotalVaccAge['above_60']++;\n }\n this.liveVaccChartStreamingabove_60.update();\n this.liveVaccChartStreamingabove_60 = this.liveVaccChartStreamingabove_60; */\n });\n }\n}\n\n\n\n","\n \n \n
\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n Registration Trend - {{todaysdate | date: 'dd/MM/yyyy'}}\n
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n
\n Registrations - {{totalRegistrations | numberFormat }}
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n
\n Appointments Scheduled
\n\n \n \n \n \n \n \n
\n \n \n
\n \n \n \n \n \n
\n \n
\n \n Registrations by Age \n
\n
\n Registrations by Age \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n
\n Registrations Vs Appointments
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n
\n ();\n public ischeckSessionStarted = new Subject();\n public isnational = new Subject();\n public district_id = new Subject();\n public type = new Subject();\n public statename = new Subject();\n public tabname = new Subject();\n constructor(private http: HttpClient) { }\n\n\n getPublicReports(stateid = \"\", districtid = \"\", date = \"\"): Observable {\n return this.http.get(\n `${environment.report_prefix_direct_url}/v2/getPublicReports?state_id=${stateid}&district_id=${districtid}&date=${date}`\n );\n }\n\n //registration Dashboard data\n getRegistrationDashboardData(date = \"\"): Observable {\n //return this.http.get(\"/assets/json/regReport.json\");https://api.sit.co-vin.in/api/v1/reports/getAllRegReports\n return this.http.get(\n `${environment.report_prefix_direct_url}/getAllRegReports`\n );\n }\n\n //Vaccination Dashboard data\n getVaccinationDashboardData(stateid = \"\", districtid = \"\", date = \"\"): Observable {\n //return this.http.get(\"/assets/json/vaccDashboard.json\");\n return this.http.get(\n `${environment.report_prefix_direct_url}/v2/getVacPublicReports?state_id=${stateid}&district_id=${districtid}&date=${date}`\n );\n }\n\n\n dashboardLogin(): Observable {\n return this.http.post(\n `${environment.auth_prefix_url}/guest/dashboard_login`,\n {},\n { responseType: 'text' }\n );\n }\n\n getNewDashboardData(): Observable {\n return this.http.get(\"/assets/json/dashboard.json\");\n }\n\n getDistricts(): Observable {\n return this.http.get(\"/assets/json/csvjson.json\");\n }\n\n getDistrictname(): Observable {\n return this.districtname.asObservable();\n }\n\n getSessionStatus(): Observable {\n return this.ischeckSessionStarted.asObservable();\n }\n\n getNationalStatus(): Observable {\n return this.isnational.asObservable();\n }\n getDistrictID(): Observable {\n return this.district_id.asObservable();\n }\n\n getType(): Observable {\n return this.type.asObservable();\n }\n getStatename(): Observable {\n return this.statename.asObservable();\n }\n\n getTabname(): Observable {\n return this.tabname.asObservable();\n }\n\n \n getVacPublicReports(stateid = \"\", districtid = \"\", date = \"\"): Observable {\n return this.http.get(\n `${environment.report_prefix_direct_url}/v2/getVacPublicReports?state_id=${stateid}&district_id=${districtid}&date=${date}`\n );\n }\n\n getLiveVaccinationCounter(): Observable {\n return this.http.get(`https://cdn-api.co-vin.in/api/v1/reports/getLiveVaccination`)\n }\n\n \n getLiveVaccinationCounterChart(date): Observable {\n return this.http.get(`https://prod-cdn.preprod.co-vin.in/vaccination_live_counter/PROD/${date}.json`)\n }\n}\n","import { I18nService } from 'src/app/modules/i18n/i18n.service';\nimport { Component, OnInit } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n selector: 'app-language',\n templateUrl: './language.component.html',\n styleUrls: ['./language.component.scss'],\n})\nexport class LanguageComponent implements OnInit {\n language: any;\n selectedLang: any = '';\n isMobile = false;\n currentSelectedValue = 'English'\n constructor(\n private i18nService: I18nService,\n private translate: TranslateService,\n ) {}\n\n ngOnInit() {\n this.selectedLang = '';\n this.language = this.currentLanguage;\n this.currentSelectedValue = this.languages.find((langObj:any) => langObj.id == this.language ).regional;\n this.translate.onLangChange.subscribe((l: any) => {\n this.language = this.translate.currentLang;\n this.currentSelectedValue = this.languages.find((langObj:any) => langObj.id == this.language ).regional;\n })\n }\n\n setLanguage() {\n if (!this.selectedLang){ return; }\n this.i18nService.language = this.selectedLang.id;\n }\n\n selectLanguage(language: any) {\n this.selectedLang = language;\n if (!this.selectedLang){ return; }\n this.i18nService.language = this.selectedLang.id;\n this.currentSelectedValue = this.languages.find((langObj:any) => langObj.id == this.selectedLang.id ).regional;\n }\n\n get currentLanguage(): string {\n return this.i18nService.language;\n }\n\n get languages(): any {\n return this.i18nService.supportedLanguages;\n }\n}\n","\n\n\n
\n \n\n \n \n \n \n
\n\n","import { Observable, Subject } from 'rxjs';\nimport { environment } from './../../../environments/environment';\nimport { HttpClient } from '@angular/common/http';\nimport { Injectable } from \"@angular/core\";\n\n@Injectable({ providedIn: 'root' })\nexport class PublicReportService {\n breadCrumbArr = [];\n headerTextLbl = 'State';\n filterParams: any = {};\n public districtname = new Subject\n \n
\n\n\n \n\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n Registrations Today
\n 0\n\n
\n \n \n \n \n \n \n
\n \n
\n \n \n
\n \n
\n \n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n Vaccinations Today
\n 0\n\n
\n \n \n \n \n \n
\n \n
\n \n\n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n Partially Vaccinated Today
\n 0\n\n
\n \n \n \n \n \n
\n \n
\n \n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n Fully Vaccinated Today
\n 0\n\n
\n \n \n \n \n \n
\n \n
\n \n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n 15-17 Vaccinations Today
\n 0\n\n
\n \n \n \n \n \n
\n \n
\n \n\n \n \n
\n \n
\n \n
\n \n
\n \n
\n HCW/FLW Precaution Doses Today
\n 0\n\n
\n \n \n \n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n 60+ Precaution Doses Today
\n 0\n\n
\n \n \n \n \n \n
\n \n \n\n\n\n\n
\n \n
\n\n \n\n \n \n
\n\n \n \n \n \n
\n \n
\n \n\n \n \n \n
\n \n \n
\n\n
\n \n \n \n
\n\n *The figure displayed in the dose counter are provisional and are subject to reconciliation.
\n*The figures for 18 years old (birth year 2004) are included in 18-44 age group.
\n\n \n
\n Last updated : {{ReportGenerateTime | date:'yyyy/M/d hh:mm aa'}}
\n\n\n
\n\n
\n\n \n\n \n
\n \n \n
\n \n \n
\n \n\n
\n \n \n {{'DASHBOARD.Today' | translate}}: {{topBlockReport?.vaccination?.today | numberFormat}}
\n{{'DASHBOARD.Total_Vaccination_Doses' | translate}}\n \n \n \n \n
{{topBlockReport?.vaccination?.total_doses | numberFormat}}
\n\n\n
\n \n {{'DASHBOARD.Dose_1' | translate}}\n
\n {{topBlockReport?.vaccination?.tot_dose_1 | numberFormat}}
\n\n\n {{'DASHBOARD.Dose_2' | translate}}\n
\n {{topBlockReport?.vaccination?.tot_dose_2 | numberFormat}}
\n\n\n Precaution Dose\n
\n {{topBlockReport?.vaccination?.tot_pd | numberFormat}}
\n\n\n
\n\n\n \n
\n \n \n ![\"sites\"](\"assets/images/building.png\")
\n
\n \n \n \n \n
\n \n {{'DASHBOARD.Sites_Conducting_Vaccination' | translate}}\n \n \n \n \n
{{topBlockReport?.sites?.total| numberFormat}}
\n\n\n
\n \n {{'DASHBOARD.Government' | translate}}\n
\n {{topBlockReport?.sites?.govt | numberFormat}}
\n\n\n {{'DASHBOARD.Private' | translate}}\n
\n {{topBlockReport?.sites?.pvt | numberFormat}}
\n\n\n\n
\n\n\n \n
\n \n\n\n
\n \n \n ![\"sites\"](\"assets/images/group.png\")
\n
\n\n\n\n \n \n \n
\n {{'DASHBOARD.Total_Registrations' | translate}}\n \n \n \n\n
{{topBlockReport?.registration?.total | numberFormat}}
\n\n\n\n
\n\n \n Age 15-17\n
\n {{topBlockReport?.registration?.cit_15_17 | numberFormat}}
\n\n\n {{'DASHBOARD.Age_18-44' | translate}}\n
\n {{topBlockReport?.registration?.cit_18_45 | numberFormat}}
\n\n\n {{'DASHBOARD.Age_45+' | translate}}\n
\n {{topBlockReport?.registration?.cit_45_above | numberFormat}}
\n\n\n\n \n \n\n
\n\n \n\n \n\n
\n \n\n\n \n {{'DASHBOARD.Vaccination_Trends' | translate}}\n \n
\n\n
\n \n {{'DASHBOARD.Vaccination_Trends' | translate}}\n \n \n \n \n \n \n \n \n \n
\n\n \n\n
\n\n\n \n
\n\n - \n
- \n \n \n
- \n \n \n \n\n
\n
\n \n
\n\n - \n
- \n \n \n \n
- \n \n \n
- \n \n\n \n
\n \n \n
\n\n \n
\n\n\n \n
\n\n - \n
- \n \n \n
- \n \n \n
- \n \n\n \n
\n\n
\n\n\n \n
\n \n \n \n \n \n
\n \n
\n\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n\n \n
\n \n \n \n \n \n
\n \n \n \n\n \n\n\n \n\n \n\n \n\n
\n\n\n \n
\n \n
\n \n {{'DASHBOARD.Vaccination_Category' | translate}}\n
\n\n \n \n
\n \n \n \n \n \n\n\n \n \n \n \n
\n \n
\n\n \n
\n {{'DASHBOARD.Vaccination_by_Age' | translate}}
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n\n
\n \n \n {{'DASHBOARD.Vaccination_By' | translate}}{{tableheader}}\n \n
\n\n\n
\n \n \n \n
\n
\n | {{tableheader}} | \n{{'DASHBOARD.Today' | translate}} | \n{{'DASHBOARD.Total' | translate}} | \n \n \n\n \n
|---|---|---|
| {{benData.title}} | \n{{benData.today | numberFormat}} | \n\n \n {{benData.total | numberFormat}}\n | \n
\n \n \n\n \n\n\n \n \n
\n\n \n
\n \n {{'HOME.AEFI_REPORTED' | translate}} \n
\n
\n {{'HOME.AEFI_REPORTED' | translate}} \n \n
\n \n {{'DASHBOARD.Overall' | translate}} : {{ vaccinatedAefiPer }} %\n
\n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n\n \n {{'DASHBOARD.Rural_Vs_Urban_Trend' | translate}}\n
\n\n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n\n \n \n
\n \n
\n \n
\n {{'DASHBOARD.Vaccination_Coverage' | translate}}
\n\n \n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n \n \n
\n\n\n\n\n\n
\n \n \n {{'DASHBOARD.Registration_Trends' | translate}}\n \n
\n
\n \n {{'DASHBOARD.Registration_Trends' | translate}}\n \n \n \n \n \n \n \n \n \n
\n \n
\n\n\n - \n
- \n \n\n\n \n
- \n \n \n
- \n \n\n\n\n \n
\n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n\n \n
\n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n
\n \n \n {{ currentSelectedValue }} \n \n {{ lang?.regional }} {{ lang?.regional }}({{ lang?.name }}) \n
\n","import { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\n\nconst routes: Routes = [];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n\n\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n .catch(err => console.error(err));\n","function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncaught exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = \"zn8P\";"],"sourceRoot":"webpack:///"}