21 Posts
laucal
1 year ago
2
Topic

Hello world 

I am looking for an extension that provides me with a progress bar giving the percentage of evolution of certain data compared to the total number of articles, this must be automatic. An idea? Thank you so much

Laurent

Get a Book for SEBLOD
147 Posts
MtnPavlas
1 year ago
1
Level 1

I just needed to do something similar for our non-profit's fundraiser so here's what I did for that.

Use the Sourcerer plugin, which will allow you to include php code, and create a new article or module with the following content (this is just an example - gets the % of published articles vs. all submitted articles in category ID '2' for the logged-in user):

{source}
<?php
// input
$catId = 2;
$barWidth = 355; // in pixels
// some Joomla stuff
$user = JFactory::getUser();
$db = JFactory::getDbo();
$userId = $user->id;
// get # of published articles in category
$query = $db->getQuery(true);
$query
    ->select('count(id)')
    ->from($db->quoteName('#__content'))
    ->where($db->quoteName('catid') . ' LIKE ' . $catId)
    ->where($db->quoteName('created_by') . ' LIKE ' . $userId);
$db->setQuery($query);
$artCt = $db->loadResult();
echo $artCt . ' articles by this user<br />';
// get # of published articles in category by logged-in user
$query = $db->getQuery(true);
$query
    ->select('count(id)')
    ->from($db->quoteName('#__content'))
    ->where($db->quoteName('catid') . ' LIKE ' . $db->quote($catId))
    ->where($db->quoteName('created_by') . ' LIKE ' . $userId)
    ->where($db->quoteName('state') . ' LIKE ' . $db->quote('1'));
$db->setQuery($query);
$artCtPubl = $db->loadResult();
echo $artCtPubl . ' published articles by this user<br />';
// do the math and get border radius based on the results
$complPercent = floor(($artCtPubl / $artCt) * 100);
$progressWidth = floor($complPercent * 355 / 100);
if ($complPercent > 95) {
    $progressRadius = "10px";
} else {
    $progressRadius = "10px 0 0 10px;";
}
echo $complPercent . ' % published<br />';
// render the progress bar
echo '<div class="my-1 mx-auto lead fw-bold" style="width: ' . $barWidth . 'px;">
    <div class="clearfix d-flex align-items-center" style="height: 80px;">
        <div class="position-relative" style="width: ' . $barWidth . 'px; height: 50px; border-radius: 10px;">
            <div class="position-absolute h-100 bg-info overflow-hidden" style="width: ' . $progressWidth . 'px; border-radius: ' . $progressRadius . ';"></div>
            <div class="position-absolute w-100 h-100 border border-2 shadow" style="border-radius: 10px;"></div>
            <div class="position-absolute top-50 w-100 text-center bg-transparent" style="transform: translateY(-50%);"><b>' . $complPercent . '% of articles published</b></div>
        </div>
    </div>
    <div class="text-center evergreen-blue"><b>' . $artCt . ' articles submitted</b></div>
</div>';
?>
{/source}

Assumes Bootstrap 5.2.3+. Hopefully, you can adjust to meet your needs.

Gets you the following:

21 Posts
laucal
1 year ago
0
Level 2

Thanks a lot MtnPavlas!!

Get a Book for SEBLOD