.widget
	.widget-body
		- if !@mensagem_de_alerta.blank?
			.row
				.col-md-12
					.alert.alert-warning style="font-weight: 500;"
						span.fw-bold Aviso!
						= @mensagem_de_alerta
						strong Para ver mais detalhes!
						==< " "
						= link_to 'Clique aqui.',  em_analise_empenhos_path, class: 'alert-link'

		.panel.panel-primary
			.panel-heading Painel de Informações Gerenciais
			.panel-body

				.row
					.col-md-6
						= pie_chart @programas_tematicos_por_empenhados, title: "Empenhos por programa temático",  width: "500px", label: "Total",
							library: {                                               \
								tooltip: {                                             \
									pointFormat: 'Total: <b>{point.y:.2f}</b> %'  \
								},                                                      \
								plotOptions: {                                          \
									pie: {                                                \
										dataLabels: {                                       \
											enabled: false                                    \
										},                                                  \
										showInLegend: true                                  \
									}                                                     \
								}                                                       \
							}

					.col-md-6
						= pie_chart @programas_de_gestao_por_empenhados, title: "Empenhos por programa de gestão",  width: "500px", label: "Total",
							library: {                                               \
								tooltip: {                                             \
									pointFormat: 'Total: <b>{point.y:.2f}</b> %'  \
								},                                                      \
								plotOptions: {                                          \
									pie: {                                                \
										dataLabels: {                                       \
											enabled: false                                    \
										},                                                  \
										showInLegend: true                                  \
									}                                                     \
								}                                                       \
							}

				.row
					.col-md-6
						= pie_chart @programas_tematicos_por_liquidacao, title: "Liquidações por programa temático",  width: "500px", label: "Total",
							library: {                                               \
								tooltip: {                                             \
									pointFormat: 'Total: <b>{point.y:.2f}</b> %'  \
								},                                                      \
								plotOptions: {                                          \
									pie: {                                                \
										dataLabels: {                                       \
											enabled: false                                    \
										},                                                  \
										showInLegend: true                                  \
									}                                                     \
								}                                                       \
							}

					.col-md-6
						= pie_chart @programas_gestao_por_liquidacao, title: "Liquidações por programa de gestão",  width: "500px", label: "Total",
							library: {                                               \
								tooltip: {                                             \
									pointFormat: 'Total: <b>{point.y:.2f}</b> %'  \
								},                                                      \
								plotOptions: {                                          \
									pie: {                                                \
										dataLabels: {                                       \
											enabled: false                                    \
										},                                                  \
										showInLegend: true                                  \
									}                                                     \
								}                                                       \
							}

				br
					.row
						.col-md-6
							= bar_chart @fim_da_vigencia_do_contrato_por_subelemento, title: "Fim de vigência de Contratos por subelementos", colors: ["#ff0000"], width: "500px", label: "Faltam",
								library: {                                               \
									tooltip: {                                             \
										pointFormat: 'Faltam: <b>{point.y}</b> dias'        \
									},                                                     \
									yAxis: {                   \
										allowDecimals: false,    \
										title: {                 \
												text: '<b>Qtd. de dias para encerramento</b>'  \
										}                        \
									},                         \
									xAxis: {                   \
										allowDecimals: false,    \
										title: {                 \
												text: '<b>Subelemento</b>'  \
										}                        \
									}                          \
								}

						.col-md-6
							= bar_chart @fim_da_vigencia_da_ata_por_subelemento, title: "Fim de vigência das atas por subelementos", colors: ["#ff0000"], width: "500px", label: "Faltam",
								library: {                                               \
									tooltip: {                                             \
										pointFormat: 'Faltam: <b>{point.y}</b> dias'        \
									},                                                     \
									yAxis: {                   \
										allowDecimals: false,    \
										title: {                 \
												text: '<b>Qtd. de dias para encerramento</b>'  \
										}                        \
									},                         \
									xAxis: {                   \
										allowDecimals: false,    \
										title: {                 \
												text: '<b>Subelemento</b>'  \
										}                        \
									}                          \
								}