Dashboard

Onde está animais, conforme destacado em amarelo, mudar para a tabela principal;

Em tipos_classes, conforme destacado em amarelo, mudar para a tabela que vai ser montado a
quantidade e o percentual;

dashboardCST.html

<!-- Read View -->

<!-- Content -->

<div id="gz-content" class="dv-f-r">

<p class="dv-mt-mdpi dv-mr-xdpi dv-mb-hdpi dv-ml-xdpi gz-gray">

<one(titles)>

<gz>menus.menu</gz> /

<span class="gz-black gz-bold">

<gz>telas.tela</gz>

</span>

</one>

</p>

<!-- Table -->

<div class="dv-pr-xdpi dv-pb-xdpi dv-pl-xdpi">

<table class="gz-box">

<tr>

<th>

<script>

var animaisl = [<for(animais)><gz>size</gz></for>];

var animaisc = [<for(animais)><gz>day</gz></for>];

</script>

Quantidade de animais adotados nos últimos 10 dias

</th>

</tr>

<tr>

<td>

Dashboard 1
 <div id="animaisl" class="dv-pt-hdpi dv-pb-hdpi">

</div>

<canvas id="animais" style="display: block; margin: 0 auto; height: 250px; width: 900px;">

</canvas>

<div id="animaisc" class="dv-pt-hdpi dv-pb-hdpi">

</div>

</td>

</tr>

</table>

</div>

<!-- Categorias -->

<div class="dv-pr-xdpi dv-pb-xdpi dv-pl-xdpi">

<table class="gz-box" style="float: left; width: 42%;">

<tr>

<th>

Despesas - Totalizador por categoria

</th>

</tr>

<tr>

<td class="dv-pt-hdpi dv-pb-hdpi">

<table id="tipost" style="margin-bottom: 0 !important;">

<tr>

<th>Categoria</th>

<th>Quantidade</th>

<th>Percentual</th>

</tr>

<for(tipos_classes)>

<tr>

<td><span class="<gz>cores.cor</gz> gz-bold"><gz>tipos_classes.tipo_classe</gz></span></td>

<td class="gz-bold"><gz>quantidade</gz></td>

<td class="gz-bold"><gz>percentual</gz> %</td>

</tr>

</for>

</table>

</td>

</tr>

</table>

<table class="gz-box" style="float: right; width: 53%;">

<tr>

<th>

Dashboard 2
 Gráfico - Totalizador por categoria

</th>

</tr>

<tr>

<td>

<canvas id="tipos" width="550" height="198" class="dv-pt-hdpi dv-pb-hdpi"

style="display: block; margin: 0 auto;"></canvas>

</td>

</tr>

</table>

<div class="dv-clear">

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

Em dashboard.php, onde está animais, mudar para a tabela principal;

Onde está tipos_classes, mudar para a tabela que vai ser gerado a quantidade e o percentual;

Não esquecer de mudar o Dao também;

dashboard.php

<?php

/**

* Generated by Getz Framework

* @author Mario Sakamoto <mskamot@gmail.com>

* @see https://wtag.com.br/getz

*/

use lib\getz;
use src\model;

require_once $_DOCUMENT_ROOT . "/lib/getz/Activator.php";

if (!getActiveSession($_ROOT . $_MODULE)) {
echo "<script>goTo(\"/login/1\");</script>";
} else {

if ($method == "stateRead") {

$daoFactory->beginTransaction();

$response["titles"] = $daoFactory->getTelasDao()->read("telas.identificador = \"" . $screen . "\"", "", true);

$response["animais"] = $daoFactory->getAnimaisDao()->read("", "", true);

$response["respondido"][0]["quantidade"] = 0;

$response["respondido"][0]["percentual"] = 0;

Dashboard 3
 $response["aguardando"][0]["quantidade"] = 0;

$response["aguardando"][0]["percentual"] = 0;

$response["tipos_classes"] = $daoFactory->getTipos_classesDao()->read("", "tipos_classes.tipo_classe ASC", true);

for ($x = 0; $x < sizeof($response["tipos_classes"]); $x++) {

$response[$response["tipos_classes"][$x]["tipos_classes.tipo_classe"]][0]["quantidade"] = 0;

$response[$response["tipos_classes"][$x]["tipos_classes.tipo_classe"]][0]["percentual"] = 0;

if (is_array($response["animais"]) && sizeof($response["animais"]) > 0) {

for ($x = 0; $x < sizeof($response["animais"]); $x++) {

for ($y = 0; $y < sizeof($response["tipos_classes"]); $y++) {

if ($response["animais"][$x]["tipos_classes.tipo_classe"] ==

$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]) {

$response[$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]][0]["quantidade"]++;

for ($y = 0; $y < sizeof($response["tipos_classes"]); $y++) {

if ($response[$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]][0]["quantidade"] > 0) {

$response[$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]][0]["percentual"] =

modelDouble($response[$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]][0]["quantidade"]

* 100 / sizeof($response["animais"]));

} else {

$response[$response["tipos_classes"][$y]["tipos_classes.tipo_classe"]][0]["percentual"] = 0;

for ($x = 0; $x < sizeof($response["tipos_classes"]); $x++) {

$response["tipos_classes"][$x]["quantidade"] = $response[$response["tipos_classes"][$x]["tipos_classes.tipo_classe"]][0]["quanti

$response["tipos_classes"][$x]["percentual"] = $response[$response["tipos_classes"][$x]["tipos_classes.tipo_classe"]][0]["perce

$firstFull[9] = date("Y-m-d");

$firstFull[8] = date("Y-m-d", strtotime("-1 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[7] = date("Y-m-d", strtotime("-2 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[6] = date("Y-m-d", strtotime("-3 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[5] = date("Y-m-d", strtotime("-4 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[4] = date("Y-m-d", strtotime("-5 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[3] = date("Y-m-d", strtotime("-6 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[2] = date("Y-m-d", strtotime("-7 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[1] = date("Y-m-d", strtotime("-8 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

$firstFull[0] = date("Y-m-d", strtotime("-9 days", strtotime(date("Y-m-d", (time() - 3600 * 3)))));

for ($i = 0; $i < sizeof($firstFull); $i++) {

Dashboard 4
 $tipos_classes = $daoFactory->getAnimaisDao()->read(

"animais.cadastrado LIKE \"%" . $firstFull[$i] . "%\"", "", true);

$response["animais"][$i]["day"] = ($i > 0 ? ",'" : "'") .

getDay($firstFull[$i]) . " " . getMounth($firstFull[$i]) . "'";

$response["animais"][$i]["size"] = ($i > 0 ? ",'" : "'") .

(is_array($tipos_classes) ? sizeof($tipos_classes) : 0) . "'";

$daoFactory->close();

echo $view->parse($_DOCUMENT_ROOT . $_PACKAGE . "/html/menus/menusCST.html",

getMenu($daoFactory, $_USER, $screen));

echo $view->parse($_DOCUMENT_ROOT . $_PACKAGE . "/html/dashboard/dashboardCST.html", $response);

?>

No handler, alterar a tabela animais para a tabela principal;

handler.js mod/cms

function dashboardHDL() {

line("animais", animaisl, animaisc, "", "", false, "#009688");

pizzaComLegenda("tipos");

No ext, somente mudar o título, conforme destacado em amarelo;

ext.js mod/cms

function pizzaComLegenda(id){

var data_table = gI(id + "t");

var canvas = gI(id);

// Which TD contains the data

var td_index = 1;
var td_index_label = 0;

// Get the data[] from the table

var tds, data = [], color, colors = [], value = 0, total = 0, labels = [],labelValue =0;

// All TRs
var trs = data_table.getElementsByTagName("tr");

for (var i = 0; i < trs.length; i++) {

// All TRs
tds = trs[i].getElementsByTagName("td");

if (tds.length === 0) continue; //  no TDs here, move on

// get the value, update total

Dashboard 5
 value = parseFloat(tds[td_index].innerHTML);
labelValue = tds[td_index_label].children[0].innerHTML;
data[data.length] = value;
labels[labels.length] = labelValue;
total += value;

// random color
if (id == "idade") {
color = getColorIdade(i);
} else {
color = getColor(i);
}

colors[colors.length] = randomColor();

console.log("data:", data);
console.log("data:", labels);

const myChart = new Chart(canvas.getContext('2d'), {

type: 'pie',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: colors,
borderWidth: 1

}]

},

options: {
scales: {
y: {

beginAtZero: true
}
}

});

function line(id, lines, columns, preValue, posValue, convertToDecimal, lineColor) {

var canvas = document.getElementById(id);
var context = canvas.getContext("2d");

const myChart = new Chart(context, {

type: 'line',
data: {
labels: columns,
datasets: [{
label: "GRÁFICO DE ANIMAIS",
data: lines,
borderWidth: 4,
borderColor: 'rgba(0,0,255)',
backgroundColor: 'transparent',
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}

function randomIntFromInterval(min, max) { // min and max included

return Math.floor(Math.random() * (max - min + 1) + min)
}

function randomColor(){
return colors[randomIntFromInterval(0,colors.length -1)];

Dashboard 6
 } let colors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Black', 'Pink', 'darksalmon',
'#801818','#EEDC82', '#C0E8D5', '#A9B2C3'];

Resultado Final:

Dashboard 7