FloatBackOfffice/application/views/member/extra/activities/emissions.php

<?php
// EMISSIONS CALC
$emissions = $emission_charts = [];
// filter by range date
$checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
if ( $checkDateRangeExist ) {
    $start_date = str_replace( '-', '/', $start_date );
    $end_date = str_replace('-', '/', $end_date);
    $emission_data['report'] = array_filter( $emission_data['report'], function( $e ) use ( $start_date, $end_date ) {
        $report_time = strtotime( $e['date'] );
        if ( $report_time >= strtotime( $start_date ) and $report_time <= strtotime( $end_date ) ) {
            return $e;
        }
    } );
}

$emissionTotalItems = isset($emission_data["report"]) ? count($emission_data["report"]) : 0;

// do not separation by date if have date range params
if ( ! $checkDateRangeExist ) {
    if ($emissionTotalItems >= 7) {
        $emissions['7D'] = array_reverse(array_slice($emission_data['report'], 0, 7));
    }
    if ($emissionTotalItems >= 30) {
        $emissions['30D'] = array_reverse(array_slice($emission_data['report'], 0, 30));
        if ($emissionTotalItems > 30) {
            $emissions[$emissionTotalItems . 'D'] = array_reverse($emission_data['report']);
        }
    } elseif ($emissionTotalItems > 0) {
        $emissions[$emissionTotalItems . 'D'] = array_reverse($emission_data['report']);
    }
} else {
    $emissions['dateranges'] = array_reverse( $emission_data['report'] );
}

foreach ($emissions as $key_day => $ems) {
    $em_chart = [
        'labels' => [],
        'data' => [],
        'total_value' => 0
    ];
    $total = 0;
    foreach ($ems as $em) {
        $total+=$em['value'];
    }
    foreach ($ems as $em) {
        $em_chart['labels'][] = $em['date'].'/'.$total;
        $em_chart['data'][] = round($em['value'],2);//($em['value']*100/$total);

    }
    $em_chart['total_value'] += $total;
    $emission_charts[$key_day] = $em_chart;
}
?>

<div class="col-lg-7 overflow-auto">
<?php
foreach ($emissions as $key_day => $ems) {
    ?>
    <div class="table_emission_wrap" id="table_emission_wrap_<?= $key_day ?>">
        <table class="table_emission table table-striped table-border-solid"
               id="table_emission_<?= $key_day ?>">
            <thead>
            <tr>
                <th>#</th>
                <th>#</th>
                <th>Date</th>
                <th>Emission</th>
                <th>GAS</th>
                <th>GAS Emission</th>
                <th>Merchant name</th>
                <th>Transaction amount</th>
            </tr>
            </thead>
            <tbody>
            <?php
            $ii = 0;
            foreach ($ems as $rows) {
                $ii++;
                echo '<tr>';
                echo '<td>' . $ii . '</td>';
                echo '<td>' . $ii . '</td>';
                echo '<td>' . $rows["date"] . '</td>';
                echo '<td><span' . ($rows["value"] > 0 ? ' style="font-weight:bold;"' : '') . '>' . number_format($rows["value"], 2) . '</span></td>';
                echo '<td><span' . ($rows["value"] > 0 ? ' style="font-weight:bold;"' : '') . '>' . number_format($rows["gas"], 2) . '</span></td>';
                echo '<td><span' . ($rows["value"] > 0 ? ' style="font-weight:bold;"' : '') . '>' . number_format($rows["gas_emission"], 2) . '</span></td>';
                echo '<td>' . $rows["merchant_name"]??'-' . '</td>';
                echo '<td>' . $rows["amount"]??'-' . '</td>';
                echo '</tr>';
            }
            ?>
            </tbody>
        </table>
    </div>
<?php } ?>
</div>
<div class="col-lg-5 overflow-auto">
<h4 class="text-center">Emission Chart</h4>
<?php if ( !$checkDateRangeExist ): ?>
    <div class="text-center" style="margin-bottom: 8px;">
        <div class="btn-group" role="group" aria-label="Basic example">
            <?php
            foreach (array_keys($emission_charts) as $id) {
                echo '<button type="button" id="btn_switch_emission_' . $id . '" class="btn_switch_emission btn btn-outline-secondary" onclick="fn_show_emission_(\'' . $id . '\')">' . $id . '</button>';
            }
            ?>
        </div>
    </div>
<?php endif ?>
<?php
foreach ((array_keys($emission_charts)) as $em_chart_id) {
    echo '<canvas class="emission_chart" id="emission_chart_' . $em_chart_id . '"  height="500px" width="800px"></canvas>';
}
?>

<div>
    <?php
    $activities_cards = $emission_data['options']['cards']??[];
    include( __DIR__ . '/cards.php' ); ?>
</div>
</div>

<script type="text/javascript">
    var emission_charts = <?php echo json_encode($emission_charts); ?>;
    var emission_keys = <?php echo json_encode(array_keys($emission_charts)); ?>;
    $(function () {
        emission_keys.forEach(function (id) {
            $('#table_emission_' + id).DataTable({
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    }
                ],
                "order": [[2, "desc"]]
            });
        });
        for (var chart_id in emission_charts) {
            var em_chart = emission_charts[chart_id];
            var ctx = document.getElementById("emission_chart_" + chart_id);
            if ( ctx == null ) {
                continue;
            }
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: em_chart.labels,
                    datasets: [{
                        label: numberWithCommas(em_chart.total_value.toFixed(2)) + ' kg/CO2',
                        data: em_chart.data,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {},
                    plugins: { labels: { render: 'value' } },
                    // plugins: {
                    //     labels: {
                    //         render: function (args) {
                    //             console.log(args);
                    //             let sum = em_chart.data.reduce(function(a, b) { return a + b; }, 0);
                    //             var prc = (args.value*100/sum);
                    //             return prc > 0 ? prc.toFixed(1) + '%' : '';
                    //         }
                    //     }
                    // },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem) {
                                var total = parseFloat(tooltipItem.label.split('/')[1]);
                                var prc = parseFloat(tooltipItem.yLabel)*100/total;
                                return tooltipItem.yLabel+'kg/CO2 - '+prc.toFixed(1) + "%";
                            }
                        }
                    },
                    scales: {
                        yAxes: [{
                            display: true,
                            ticks: {
                                min: 0,
                            },
                        }],
                        xAxes: [{
                            display: true,
                            ticks: {
                                callback: function (value) {
                                    return value.split("/")[0];
                                },
                            },
                        }],
                    }
                }
            });
        }
    });

    function fn_show_emission_(id) {
        $('.emission_chart').hide();
        $('#emission_chart_' + id).show();

        $('.table_emission_wrap').hide();
        $('#table_emission_wrap_' + id).show();

        $(".btn_switch_emission").removeClass('btn-success');
        $("#btn_switch_emission_" + id).addClass('btn-success');
    }

    if (emission_keys.length > 0) {
        //trigger show first days default
        fn_show_emission_(emission_keys[0]);
    }
</script>