Graph

This component allows you to place line, bar or pie graphs anywhere by pplacing a single HTML tag within any view rendered by Apex. You may create a new graph using the create graph CLI command, such as:

apex create graph <PACKAGE> <ALIAS>

apex create graph my-shop order_summary

Using the above example, a new file will be created at /src/MyShop/Opus/Graphs/OrderSummary.php which contains a single method of getData(), and three properties which are explained below.

Property Description
$type The type of graph. Supported values are, "bar", "line", "pie".
$label_yaxis The label to place on the Y-axis.
$label_xaxis The label to place on the X-axis.

Within the class generated, you will notice the GraphUtils class is injected within the properties, which provides various methods to handle date periods / intervals. The class also extends the Graph class, providing direct access to methods to add data points to the graph, set legend labels, and more.

Example

Below is the example of the growth line graph from within the users package, and below the code is some notes regarding the class.

<?php
declare(strict_types = 1);

namespace App\Users\Opus\Graphs;

use Apex\Svc\{App, Db};
use Apex\App\Base\Web\Utils\GraphUtils;
use Apex\App\Base\Web\Render\Graph;
use Apex\App\Interfaces\Opus\GraphInterface;

/**
 * Graph - Growth
 */
class Growth extends Graph implements GraphInterface
{

    /**
     * The type of graph.  Supported values are: bar, line, pie
     */
    public string $type = 'line';

    /**
     * The labels of the X and Y axis
     */
    public string $label_yaxis = 'Date';
    public string $label_xaxis = 'Users';

    #[Inject(App::class)]
    protected App $app;

    #[Inject(Db::class)]
    private Db $db;

    #[Inject(GraphUtils::class)]
    protected GraphUtils $graph_utils;


    /**
     * Get graph data
     */
    public function getData(array $attr = []):void
    {

        // initialize
        $period = $this->app->get('period', 'day');
        $user_groups = $this->db->getHash("SELECT id,name FROM user_groups ORDER BY iD");

        // Go through last 15
        $sets = [];
        for ($x=0; $x < 15; $x++) { 

            // Get where SQL
        list($where_sql, $display_date, $date) = $this->graph_utils->getPeriodSql('armor_users.created_at', $x, $period, '', true);

            // Get total by group
            $totals = $this->db->getHash("SELECT user_profiles.group_id,count(*) FROM user_profiles, armor_users WHERE user_profiles.uuid = armor_users.uuid AND $where_sql GROUP BY user_profiles.group_id");
            foreach ($user_groups as $group_id => $group_name) { 
                if (!isset($sets[$group_id])) { $sets[$group_id] = []; }
                $sets[$group_id][] = $totals[$group_id] ?? 0;
            }

            // Add label
            $this->addLabel($display_date);
        }

        // Add data sets
        foreach ($sets as $group_id => $points) { 
            $name = $user_groups[$group_id] ?? 'Unknown';
            $this->addDataset($points, $name);
        }

    }

}

A few notes regarding the above class:

  • The class extends the Graph class, and the GraphUtils class is injected within the properties.
  • It's a line graph that shows growth in registration numbers, grouped by user group.
  • Shows the last 15 time periods, all depending on which period is being viewed (day, week, month, quarter, year).
  • ( While looping through the 15 periods:
    • Uses the GraphUtils::getPeriodSql function to get the SQL for WHERE clause.
    • Generates the $sets associative array which lists number of registrations during time period for each user group.
    • Last, it adds the group name as the label and adds the data set as the next point on the x-axis.