Treemap php treemap generator

Description

This php package provides you to build treemaps in formats of html, canvas and image from native php multiarrays. Special architecture of classes gives you an opportunity for customization at level of one node: node content, node color and other.

More info about treemaps you may see in wiki.

View on github Download .zip Download .tar.zip

Installation

Install the latest version via composer:

composer require codeagent\treemap

Also, it's necessary to plug in required css-styles to your page for correct display of html markup. You can do that by copying treemap.css file to web-accessible folder of your server. For this, simply run vendor/bin/treemap command with target directory as argument. Then, you need to include it into the head section of page via <link> tag, for example <link rel="stylesheet" href="assets/treemap.css" />

Basic usage

Include composer’s autoloader and inject Treemap class from codeagent\treemap namespace into php script. Map is waiting at the entrance your data as first argument, width and height as second and third arguments respectively. To obtain the result of rendering (html markup, image), call render method of Presenter interface:

include("vendor/autoload.php");
use codeagent\treemap\Treemap;

// your data in consistent format
$data = [["value" => 2, "children" => [...]], ["value" => 4, "children" => [...]], [...], ...];
$presenter = Treemap::html($data, 1200, 800);
echo $presenter->render();

The result of snippet would be something like this (based on your data):

By default, Treemap class considers, that "weight" (from which calcualted node rectangle) non-negative value are located in the value attribute and the "children" nodes addressed via correspond children key of node. If it is not suitable for you, you can tell treemap which keys to pick explicitly:

$treemap = new Treemap($data, 1200, 800);
$treemap->valueAttribute = "volume";
$treemap->childrenAttribute = "department";

And then draw treemap using appropriate Presenter:

$presenter = new HtmlPresenter($treemap);
echo $presenter->render();

Not forget to inject presenter class to you script via use statement.

Custom node rendering

There is no practical benefit of presenting treemap without accompanying data. For this reason there is Presenter interface, that gives an ability to adjust a single node rendering via a utility Nodeinfo class, for example, consider the folowing example:

use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\NodeInfo;
use codeagent\treemap\Gradient;

$gradient = new Gradient(['0.0' => '#f75557', '0.5' => '#646a82', '1.0' => '#5ad87b']);
echo Treemap::html($data, WIDTH, HEIGHT)->render(function (NodeInfo $node) use ($gradient) {
    if($node->isLeaf()) {
        $data   = $node->data();
        $max    = 5000;
        $min    = 10;
        $factor = ($data['float'] - $min) / ($max - $min);
        $color  = $gradient->color($factor);
        $node->content()->html("<span style='line-height: {$node->rectangle()->height}px'>{$data['name']}</span>");
        $node->background($color);
    }
});

The result is:

Another useful feature is customizing node frame calculating. Because of rectangles calculation specific, set up it in Treemap::setNodeFrameResolver(callable $resolver) method. Pass to it a closure (or any callable you want) whitch returns new rectangle boundaries:

use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\Rectangle;
use codeagent\treemap\NodeInfo;

$files                    = new Treemap($data, WIDTH, HEIGHT);
$files->valueAttribute    = 'size';
$files->childrenAttribute = 'files';
$files->setNodeFrameResolver(function (Rectangle $rectangle, $level) {
    if($level == 1) {
        $titleHeight = 20;
        $spacing     = 4;
        return new Rectangle(
            $rectangle->left + $spacing,
            $rectangle->top + $titleHeight,
            $rectangle->width - $spacing,
            $rectangle->height - $titleHeight - $spacing
        );
    }
    return $rectangle;
});

echo (new HtmlPresenter($files))->render(function (NodeInfo $node) {
    $data = $node->data();

    if($node->isLeaf()) {
        $node->visible(true);
        $node->content()->html("<span style='line-height: {$node->rectangle()->height}px'>{$data['name']}</span>");
    }
    elseif($node->isRoot()) {
        $node->visible(true);
        $node->background('transparent');
        $node
            ->content()
            ->html("<div style='width:100%;text-align:center'><strong>{$data['name']}</strong></div>");
    }
});

Map formats

Of course, presentation of treemap does not limited only by html. Besides html there are classes for building images and canvas elements in this package.

use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\presenter\NestedHtmlPresenter;
use codeagent\treemap\presenter\CanvasPresenter;
use codeagent\treemap\presenter\ImagePresenter;

/**
 * @var HtmlPresenter $html
 */
$html = Treemap::html($data, WIDTH, HEIGHT);

/**
 * @var NestedHtmlPresenter $html
 */
$nested = Treemap::nested($data, WIDTH, HEIGHT);

/**
 * @var ImagePresenter $html
 */
$image = Treemap::image($data, WIDTH, HEIGHT, "png");

/**
 * @var CanvasPresenter $html
 */
$canvas = Treemap::canvas($data, WIDTH, HEIGHT);

echo $html->render($renderrer);
echo $nested->render($renderrer);
echo $canvas->render($renderrer);

header("Content-Type: image/png");
echo $image->render($renderrer);

Canvas

Image

ImagePresenter outputs image in form of raw data. For this reason, pass appropriate content-type header with image data: header("Content-Type: image/png").

// todo:

Nested maps

It is worth noting the NestedtmlPresenter. In fact, it is a collection of treemaps with different detalization degree, which gives you conveniently navigate from one map to another via headers and breadcrumbs at top of presenter:

License & contributing

This project is maintained by codeagent. If you find out any problems, please let me know: this is open source project on github, you can create a new issue or open a pull request.

License: MIT

---

Created by codeagent. © 2016