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

<?php
    $spents = [];
    if (isset($speding_category7) && isset($speding_category7["report"])) {
        $spents['7D'] = $speding_category7;
    }
    if (isset($speding_category30) && isset($speding_category30["report"])) {
        $spents['30D'] = $speding_category30;
    }
    if (isset($speding_category) && isset($speding_category["report"])) {
        $spents['60D'] = $speding_category;
    }
    if (isset($speding_category_daysrange) && isset($speding_category_daysrange['report'])) {
        $spents['daysrange'] = $speding_category_daysrange;
    }
    $spent_charts = [];
    $colors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#969696"];
    $spent_keys = array_keys($spents);
    $checkDateRangeExist = ( isset( $start_date ) and !empty( $start_date ) ) and ( isset( $end_date ) and !empty( $end_date ) );
?>

<div class="col-lg-4 overflow-auto">
    <?php
        foreach ($spents as $spent_id => $spent) {
            ?>
            <div class="spent_table_wrap" id="spent_table_wrap_<?= $spent_id ?>">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Type</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Percent</th>
                        <th scope="col">Detail</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                    $ii = 0;
                    $spent_chart_item = [
                        'labels' => [],
                        'total_spent'   => 0,
                        'datasets' => [
                            'data' => [],
                            'backgroundColor' => []
                        ]
                    ];
                    $total_spent = 0;
                    foreach ($spent["report"] as $rows) {
                        $total_spent += (float)$rows['spent'];
                    }

                    foreach ($spent["report"] as $rows) {
                        $ii++;
                        $prc = $total_spent > 0 ? ((float)$rows['spent']??0)*100/($total_spent?:1) : 0;
                        echo '<tr>';
                        echo '<td>'.$ii.'</td>';
                        echo '<td>'.$rows["type"].'</td>';
                        echo '<td>'.$rows["spent"].'</td>';
                        echo '<td '.($prc>0?'style="font-weight:bold;"':'').'>'.number_format($prc,2,'.','').'%</td>';
                        echo '<td></td>';
                        echo '</tr>';
                        //echo "<tr><td>$ii</td><td>" . $rows["type"] . "</td><td>" . $rows["spent"] . "</td><td></td></tr>";
                        $spent_chart_item['labels'][] = $rows["type"] ?? '-';
                        $spent_chart_item['datasets']['data'][] = (float)$rows["spent"] ?? 0;
                        $spent_chart_item['datasets']['backgroundColor'][] = isset($colors[$ii - 1]) ? $colors[$ii - 1] : '#49ff00';
                    }
                    $spent_chart_item['total_spent'] = $total_spent;
                    $spent_charts[$spent_id] = $spent_chart_item;
                    ?>
                    </tbody>
                </table>
            </div>
            <?php
        }
    ?>
</div>
<div class="col-lg-8 overflow-auto">
    <?php if ( ! $checkDateRangeExist ): ?>
        <div class="text-center" style="margin-bottom: 8px;">
            <div class="btn-group" role="group" aria-label="Basic example">
                <?php
                foreach ($spent_keys as $id) {
                    echo '<button type="button" id="btn_switch_spent_' . $id . '" 
                         class="btn_switch_spent btn btn-outline-secondary" 
                         onclick="fn_show_spent_(\'' . $id . '\')">' . $id . '</button>';
                }
                ?>
            </div>
        </div>
    <?php endif ?>

    <?php
    foreach ($spent_keys as $id) {
        echo '<canvas id="spent_category_chart_' . $id . '" class="spent_chart" width="800" height="450"></canvas>';
    }
    ?>
    <script type="text/javascript">
        function chartHexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        var spent_categore_charts = <?=json_encode($spent_charts)?>;
        var spent_keys = <?=json_encode(array_keys($spent_charts))?>;
        for (var spent_id in spent_categore_charts) {
            var spent_char_data = spent_categore_charts[spent_id];
            var showTitle = '<?php echo !$checkDateRangeExist ? 'true' : 'false'; ?>';
            var _title;
            if ( showTitle == 'true' ) {
                _title = 'Spend Category Chart ' + spent_id;
            } else {
                _title = 'Spend Category Chart from ' + '<?php if ( isset( $start_date ) ) echo $start_date; ?>' + ' to ' + '<?php if ( isset( $end_date ) ) echo $end_date; ?>';
            }

            var ctx = document.getElementById("spent_category_chart_" + spent_id);
            if ( ctx == null ) {
                continue;
            }

            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: spent_char_data.labels,
                    datasets: [
                        {
                            backgroundColor: spent_char_data.datasets.backgroundColor,
                            data: spent_char_data.datasets.data,
                        }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: [_title,'Total Spend: $'+spent_char_data.total_spent]
                    },
                    tooltips: {
                        enabled: true
                    },
                    plugins: {
                        labels: {
                            textShadow: true,
                            render: function (args) {
                                return args.percentage+'%\n$'+args.value;
                            },
                            fontColor: function (data) {
                                var rgb = chartHexToRgb(data.dataset.backgroundColor[data.index]);
                                var threshold = 140;
                                var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
                                return luminance > threshold ? 'black' : 'white';
                            },
                            precision: 2
                        }
                    }
                }
            });
        }

        function fn_show_spent_(id) {
            $('.spent_chart').hide();
            $('#spent_category_chart_' + id).show();

            $('.spent_table_wrap').hide();
            $('#spent_table_wrap_' + id).show();

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

        if (spent_keys.length > 0) {
            //trigger show first days default
            fn_show_spent_(spent_keys[0]);
        }
    </script>
    <div>
        <?php
        $activities_cards = $speding_category7['options']['cards']??[];
        include( __DIR__ . '/cards.php' ); ?>
    </div>
</div>