Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/matomo-org/matomo.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBenaka Moorthi <benaka.moorthi@gmail.com>2013-09-24 12:26:49 +0400
committerBenaka Moorthi <benaka.moorthi@gmail.com>2013-09-24 12:26:49 +0400
commit18818e8be2216213505aedce3f669e2224b11246 (patch)
tree0658d9db31bd4d62f691387e293d093f3e7829dd /plugins
parentc0f2eb2d7e74ba114a6b8ccf69823c98da5ebe88 (diff)
Removed TreemapVisualization plugin (located in its own git repo).
Diffstat (limited to 'plugins')
-rw-r--r--plugins/TreemapVisualization/API.php78
-rw-r--r--plugins/TreemapVisualization/README.md15
-rw-r--r--plugins/TreemapVisualization/Treemap.php150
-rw-r--r--plugins/TreemapVisualization/TreemapDataGenerator.php294
-rw-r--r--plugins/TreemapVisualization/TreemapVisualization.php116
-rw-r--r--plugins/TreemapVisualization/images/treemap-icon.pngbin341 -> 0 bytes
-rw-r--r--plugins/TreemapVisualization/javascripts/treemapViz.js561
-rw-r--r--plugins/TreemapVisualization/stylesheets/treemap.less81
-rw-r--r--plugins/TreemapVisualization/stylesheets/treemapColors.less19
-rw-r--r--plugins/TreemapVisualization/templates/_dataTableViz_treemap.twig3
10 files changed, 0 insertions, 1317 deletions
diff --git a/plugins/TreemapVisualization/API.php b/plugins/TreemapVisualization/API.php
deleted file mode 100644
index f4d7afdb0a..0000000000
--- a/plugins/TreemapVisualization/API.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-/**
- * Piwik - Open source web analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- *
- * @category Piwik_Plugins
- * @package TreemapVisualization
- */
-namespace Piwik\Plugins\TreemapVisualization;
-
-use Piwik\Common;
-use Piwik\Metrics;
-use Piwik\Period\Range;
-use Piwik\API\Request;
-
-class API
-{
- private static $instance = null;
-
- public static function getInstance()
- {
- if (self::$instance == null) {
- self::$instance = new self;
- }
- return self::$instance;
- }
-
- /**
- * Gets report data and converts it into data that can be used with the JavaScript Infovis
- * Toolkit's treemap visualization.
- *
- * @param string $apiMethod The API module & action to call. The result of this method is converted
- * to data usable by the treemap visualization. E.g. 'Actions.getPageUrls'.
- * @param string $column The column to generate metric data for. If more than one column is supplied,
- * the first is used and the rest discarded.
- * @param string $period
- * @param string $date
- * @param bool $availableWidth Available screen width in pixels.
- * @param bool $availableHeight Available screen height in pixels.
- * @param int|bool $show_evolution_values Whether to calculate evolution values for each row or not.
- *
- * @return array
- */
- public function getTreemapData($apiMethod, $column, $period, $date, $availableWidth = false, $availableHeight = false,
- $show_evolution_values = false)
- {
- if ($period == 'range') {
- $show_evolution_values = false;
- }
-
- $params = array();
- if ($show_evolution_values) {
- list($previousDate, $ignore) = Range::getLastDate($date, $period);
- $params['date'] = $previousDate . ',' . $date;
- }
-
- $params['filter_limit'] = false;
- $params['disable_queued_filters'] = true;
-
- $dataTable = Request::processRequest("$apiMethod", $params);
-
- $columns = explode(',', $column);
- $column = reset($columns);
-
- $translations = Metrics::getDefaultMetricTranslations();
- $translation = empty($translations[$column]) ? $column : $translations[$column];
-
- $generator = new TreemapDataGenerator($column, $translation);
- $generator->setInitialRowOffset(Common::getRequestVar('filter_offset', 0, 'int'));
- $generator->setAvailableDimensions($availableWidth, $availableHeight);
- if ($show_evolution_values) {
- $generator->showEvolutionValues();
- }
- return $generator->generate($dataTable);
- }
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/README.md b/plugins/TreemapVisualization/README.md
deleted file mode 100644
index e034148140..0000000000
--- a/plugins/TreemapVisualization/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Description
-
-TreemapVisualization is a Piwik plugin that provides the treemap report visualization.
-
-# Features
-
-The treemap visualization will show rows of data tables as squares whose size correspond to the metric of the row. For example, if you're looking at visits, the row with the most visits will take up the most space. Just like the other graph visualizations, you can use it to easily see which rows have the largest values. The treemap differs from other graphs though, in that it shows much more rows.
-
-The treemap visualization will also show you one thing that no other visualization included with Piwik does: the evolution of each row. You can hover over a treemap square to see how much the row changed from the last period. Each treemap square is also colored based on the evolution. A red square means the change is negative; a green square means the change is positive. The more green the bigger the change; the more red the smaller the change.
-
-# Limitations
-
-Currently there is one known limitation:
-
-* Treemaps will not work with flattened tables. Currently, if a table is flattened, the treemap icon will be removed.
diff --git a/plugins/TreemapVisualization/Treemap.php b/plugins/TreemapVisualization/Treemap.php
deleted file mode 100644
index 16b955ff08..0000000000
--- a/plugins/TreemapVisualization/Treemap.php
+++ /dev/null
@@ -1,150 +0,0 @@
-<?php
-/**
- * Piwik - Open source web analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- *
- * @category Piwik_Plugins
- * @package TreemapVisualization
- */
-
-namespace Piwik\Plugins\TreemapVisualization;
-
-use Piwik\Common;
-use Piwik\View;
-use Piwik\Period;
-use Piwik\Period\Range;
-use Piwik\DataTable\Map;
-use Piwik\ViewDataTable\Graph;
-
-/**
- * DataTable visualization that displays DataTable data as a treemap (see
- * http://en.wikipedia.org/wiki/Treemapping).
- *
- * Uses the JavaScript Infovis Toolkit (see philogb.github.io/jit/).
- */
-class Treemap extends Graph
-{
- const ID = 'infoviz-treemap';
- const FOOTER_ICON = 'plugins/TreemapVisualization/images/treemap-icon.png';
- const FOOTER_ICON_TITLE = 'Treemap';
-
- /**
- * Controls whether the treemap nodes should be colored based on the evolution percent of
- * individual metrics, or not. If false, the jqPlot pie graph's series colors are used to
- * randomly color different nodes.
- *
- * Default Value: false
- */
- const SHOW_EVOLUTION_VALUES = 'show_evolution_values';
-
- public static $clientSideProperties = array(
- 'filter_offset',
- 'max_graph_elements',
- 'show_evolution_values',
- 'subtable_controller_action'
- );
-
- /**
- * Constructor.
- *
- * @param \Piwik\ViewDataTable $view
- */
- public function __construct($view)
- {
- // we determine the elements count dynamically based on available width/height
- $view->visualization_properties->max_graph_elements = false;
-
- parent::__construct($view, '@TreemapVisualization/_dataTableViz_treemap.twig');
-
- $view->datatable_js_type = 'TreemapDataTable';
- $view->show_pagination_control = false;
- $view->show_offset_information = false;
- $view->show_flatten_table = false;
-
- $metric = $this->getMetricToGraph($view->columns_to_display);
- $view->filters[] = function ($dataTable, $view) use ($metric) {
- $view->custom_parameters['columns'] = $metric;
- };
-
- $this->createTreemapDataGenerator($view);
- $this->handleShowEvolutionValues($view);
- }
-
- private function createTreemapDataGenerator($view)
- {
- $metric = $this->getMetricToGraph($view->columns_to_display);
- $translation = empty($view->translations[$metric]) ? $metric : $view->translations[$metric];
-
- $this->generator = new TreemapDataGenerator($metric, $translation);
- $this->generator->setInitialRowOffset($view->filter_offset ?: 0);
-
- $availableWidth = Common::getRequestVar('availableWidth', false);
- $availableHeight = Common::getRequestVar('availableHeight', false);
- $this->generator->setAvailableDimensions($availableWidth, $availableHeight);
- }
-
- /**
- * Returns the default view property values for this visualization.
- *
- * @return array
- */
- public static function getDefaultPropertyValues()
- {
- $result = parent::getDefaultPropertyValues();
- $result['visualization_properties']['graph']['allow_multi_select_series_picker'] = false;
- $result['visualization_properties']['infoviz-treemap']['show_evolution_values'] = true;
- return $result;
- }
-
- /**
- * Checks if the data obtained by ViewDataTable has data or not. Since we get the last period
- * when calculating evolution, we need this hook to determine if there's data in the latest
- * table.
- *
- * @param \Piwik\DataTable $dataTable
- * @return true
- */
- public function isThereDataToDisplay($dataTable, $view)
- {
- return $this->getCurrentData($dataTable)->getRowsCount() != 0;
- }
-
- public function getMetricToGraph($columnsToDisplay)
- {
- $firstColumn = reset($columnsToDisplay);
- if ($firstColumn == 'label') {
- $firstColumn = next($columnsToDisplay);
- }
- return $firstColumn;
- }
-
- private function handleShowEvolutionValues($view)
- {
- // evolution values cannot be calculated if range period is used
- $period = Common::getRequestVar('period');
- if ($period == 'range') {
- return;
- }
-
- if ($view->visualization_properties->show_evolution_values) {
- $date = Common::getRequestVar('date');
- list($previousDate, $ignore) = Range::getLastDate($date, $period);
-
- $view->request_parameters_to_modify['date'] = $previousDate . ',' . $date;
-
- $this->generator->showEvolutionValues();
- }
- }
-
- private function getCurrentData($dataTable)
- {
- if ($dataTable instanceof Map) { // will be true if calculating evolution values
- $childTables = $dataTable->getArray();
- return end($childTables);
- } else {
- return $dataTable;
- }
- }
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/TreemapDataGenerator.php b/plugins/TreemapVisualization/TreemapDataGenerator.php
deleted file mode 100644
index 5c5fc681e5..0000000000
--- a/plugins/TreemapVisualization/TreemapDataGenerator.php
+++ /dev/null
@@ -1,294 +0,0 @@
-<?php
-/**
- * Piwik - Open source web analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- *
- * @category Piwik_Plugins
- * @package TreemapVisualization
- */
-namespace Piwik\Plugins\TreemapVisualization;
-
-use Piwik\Common;
-use Piwik\DataTable;
-use Piwik\DataTable\Map;
-use Piwik\DataTable\Filter\CalculateEvolutionFilter;
-
-/**
- * A utility class that generates JSON data meant to be used with the JavaScript
- * Infovis Toolkit's treemap visualization.
- */
-class TreemapDataGenerator
-{
- const DEFAULT_MAX_ELEMENTS = 10;
- const MIN_NODE_AREA = 400; // 20px * 20px
-
- /**
- * The list of row metadata that should appear in treemap JSON data, if in the row.
- *
- * @var array
- */
- private static $rowMetadataToCopy = array('logo', 'url');
-
- /**
- * The name of the root node.
- *
- * @var string
- */
- private $rootName = '';
-
- /**
- * The offset of the first row in the DataTable. When exploring aggregate rows (ie, the
- * 'Others' row), the DataTable used won't have the initial rows, so the row offsets
- * aren't the same as the row IDs. In order to make sure each node has a unique ID,
- * we need to to know the actual row offset of each row.
- *
- * @var int
- */
- private $firstRowOffset = 0;
-
- /**
- * The name of the metric to generate a treemap for.
- *
- * @var string
- */
- private $metricToGraph;
-
- /**
- * The internationalized label of the metric to graph. Used in the tooltip of each node.
- *
- * @var string
- */
- private $metricTranslation;
-
- /**
- * Whether to include evolution values in the output JSON.
- *
- * @var bool
- */
- private $showEvolutionValues = false;
-
- /**
- * Holds the date of the past period. Implementation detail.
- *
- * @var string
- */
- private $pastDataDate = null;
-
- /**
- * Holds the available screen width in pixels for the treemap.
- *
- * @var int
- */
- private $availableWidth = false;
-
- /**
- * Holds the available screen height in pixels for the treemap.
- *
- * @var int
- */
- private $availableHeight = false;
-
- /**
- * Constructor.
- *
- * @param string $metricToGraph @see self::$metricToGraph
- * @param string $metricTranslation
- */
- public function __construct($metricToGraph, $metricTranslation)
- {
- $this->metricToGraph = $metricToGraph;
- $this->metricTranslation = $metricTranslation;
- }
-
- /**
- * Sets the name of the root node.
- *
- * @param string $name
- */
- public function setRootNodeName($name)
- {
- $this->rootName = $name;
- }
-
- /**
- * Sets the offset of the first row in the converted DataTable.
- *
- * @param int $offset
- */
- public function setInitialRowOffset($offset)
- {
- $this->firstRowOffset = (int)$offset;
- }
-
- /**
- * Configures the generator to calculate the evolution of column values and include
- * this data in the outputted tree structure.
- */
- public function showEvolutionValues()
- {
- $this->showEvolutionValues = true;
- }
-
- /**
- * Sets the available screen width & height for this treemap.
- *
- * @param int $availableWidth
- * @param int $availableHeight
- */
- public function setAvailableDimensions($availableWidth, $availableHeight)
- {
- $this->availableWidth = $availableWidth;
- $this->availableHeight = $availableHeight;
- }
-
- /**
- * Generates an array that can be encoded as JSON and used w/ the JavaScript Infovis Toolkit.
- *
- * @param \Piwik\DataTable $dataTable
- * @return array
- */
- public function generate($dataTable)
- {
- // sanity check: if the dataTable is not a Map, we don't have the data to calculate evolution
- // values, so make sure we don't try
- if (!($dataTable instanceof Map)) {
- $this->showEvolutionValues = false;
- }
-
- // if showEvolutionValues is true, $dataTable must be a DataTable\Map w/ two child tables
- $pastData = false;
- if ($this->showEvolutionValues) {
- list($pastData, $dataTable) = array_values($dataTable->getArray());
- $this->pastDataDate = $pastData->getMetadata('period')->getLocalizedShortString();
- }
-
- // handle extra truncation (only for current data)
- $truncateAfter = $this->getDynamicMaxElementCount($dataTable);
- if ($truncateAfter > 0) {
- $dataTable->filter('Truncate', array($truncateAfter));
- }
-
- $tableId = Common::getRequestVar('idSubtable', '');
-
- $root = $this->makeNode('treemap-root', $this->rootName);
- $this->addDataTableToNode($root, $dataTable, $pastData, $tableId, $this->firstRowOffset);
- return $root;
- }
-
- private function getDynamicMaxElementCount($dataTable)
- {
- if (!is_numeric($this->availableWidth)
- || !is_numeric($this->availableHeight)
- ) {
- return self::DEFAULT_MAX_ELEMENTS - 1;
- } else {
- $totalArea = $this->availableWidth * $this->availableHeight;
-
- $dataTable->filter('ReplaceColumnNames');
-
- $metricValues = $dataTable->getColumn($this->metricToGraph);
- $metricSum = array_sum($metricValues);
-
- // find the row index in $dataTable for which all rows after it will have treemap
- // nodes that are too small. this is the row from which we truncate.
- // Note: $dataTable is sorted at this point, so $metricValues is too
- $result = 0;
- foreach ($metricValues as $value) {
- $nodeArea = ($totalArea * $value) / $metricSum;
-
- if ($nodeArea < self::MIN_NODE_AREA) {
- break;
- } else {
- ++$result;
- }
- }
- return $result;
- }
- }
-
- private function addDataTableToNode(&$node, $dataTable, $pastData = false, $tableId = '', $offset = 0)
- {
- foreach ($dataTable->getRows() as $rowId => $row) {
- $pastRow = $pastData ? $pastData->getRowFromLabel($row->getColumn('label')) : false;
-
- $childNode = $this->makeNodeFromRow($tableId, $rowId, $row, $pastRow);
- if (empty($childNode)) {
- continue;
- }
-
- if ($rowId == DataTable::ID_SUMMARY_ROW) {
- $childNode['data']['aggregate_offset'] = $offset + $dataTable->getRowsCount() - 1;
- } else if ($row->getIdSubDataTable() !== null) {
- $childNode['data']['idSubtable'] = $row->getIdSubDataTable();
- }
-
- $node['children'][] = $childNode;
- }
- }
-
- private function makeNodeFromRow($tableId, $rowId, $row, $pastRow)
- {
- $label = $row->getColumn('label');
- $columnValue = $row->getColumn($this->metricToGraph) ?: 0;
-
- if ($columnValue == 0) { // avoid issues in JIT w/ 0 $area values
- return false;
- }
-
- $data = array();
- $data['$area'] = $columnValue;
-
- // add metadata
- foreach (self::$rowMetadataToCopy as $metadataName) {
- $metadataValue = $row->getMetadata($metadataName);
- if ($metadataValue !== false) {
- $data['metadata'][$metadataName] = $metadataValue;
- }
- }
-
- // add evolution
- if ($rowId !== DataTable::ID_SUMMARY_ROW
- && $this->showEvolutionValues
- ) {
- if ($pastRow === false) {
- $data['evolution'] = 100;
- } else {
- $pastValue = $pastRow->getColumn($this->metricToGraph) ?: 0;
- $data['evolution'] = CalculateEvolutionFilter::calculate(
- $columnValue, $pastValue, $quotientPrecision = 0, $appendPercentSign = false);
- }
- }
-
- // add node tooltip
- $data['metadata']['tooltip'] = "\n" . $columnValue . ' ' . $this->metricTranslation;
- if (isset($data['evolution'])) {
- $plusOrMinus = $data['evolution'] >= 0 ? '+' : '-';
- $evolutionChange = $plusOrMinus . abs($data['evolution']) . '%';
-
- $data['metadata']['tooltip'] = Piwik_Translate('General_XComparedToY', array(
- $data['metadata']['tooltip'] . "\n" . $evolutionChange,
- $this->pastDataDate
- ));
- }
-
- return $this->makeNode($this->getNodeId($tableId, $rowId), $label, $data);
- }
-
- private function getNodeId($tableId, $rowId)
- {
- if ($rowId == DataTable::ID_SUMMARY_ROW) {
- $rowId = $this->firstRowOffset . '_' . $rowId;
- } else {
- $rowId = $this->firstRowOffset += $rowId;
- }
-
- return $tableId . '_' . $rowId;
- }
-
- private function makeNode($id, $title, $data = array())
- {
- return array('id' => $id, 'name' => $title, 'data' => $data, 'children' => array());
- }
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/TreemapVisualization.php b/plugins/TreemapVisualization/TreemapVisualization.php
deleted file mode 100644
index 7b002ffd93..0000000000
--- a/plugins/TreemapVisualization/TreemapVisualization.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?php
-/**
- * Piwik - Open source web analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- *
- * @category Piwik_Plugins
- * @package TreemapVisualization
- */
-
-namespace Piwik\Plugins\TreemapVisualization;
-
-use Piwik\Period;
-use Piwik\Common;
-
-/**
- * @see plugins/TreemapVisualization/Treemap.php
- */
-require_once PIWIK_INCLUDE_PATH . '/plugins/TreemapVisualization/Treemap.php';
-
-/**
- * Plugin that contains the Treemap DataTable visualization.
- */
-class TreemapVisualization extends \Piwik\Plugin
-{
- /**
- * The list of Actions reports for whom the treemap should have a width of 100%.
- */
- private static $fullWidthActionsReports = array(
- 'getPageUrls',
- 'getEntryPageUrls',
- 'getExitPageUrls',
- 'getEntryPageTitles',
- 'getExitPageTitles',
- 'getPageTitles',
- 'getOutlinks',
- 'getDownloads',
- );
-
- /**
- * @see Piwik_Plugin::getListHooksRegistered
- */
- public function getListHooksRegistered()
- {
- return array(
- 'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
- 'AssetManager.getJsFiles' => 'getJsFiles',
- 'ViewDataTable.Visualization.getAvailable' => 'getAvailableVisualizations',
- 'ViewDataTable.configureReportView' => 'configureReportViewForActions'
- );
- }
-
- public function getAvailableVisualizations(&$visualizations)
- {
- // treemap doesn't work w/ flat=1
- if (!Common::getRequestVar('flat', 0)) {
- $visualizations[] = 'Piwik\\Plugins\\TreemapVisualization\\Treemap';
- }
- }
-
- public function getStylesheetFiles(&$stylesheets)
- {
- $stylesheets[] = 'plugins/TreemapVisualization/stylesheets/treemap.less';
- $stylesheets[] = 'plugins/TreemapVisualization/stylesheets/treemapColors.less';
- }
-
- public function getJsFiles(&$jsFiles)
- {
- $jsFiles[] = 'libs/Jit/jit-2.0.1-yc.js';
- $jsFiles[] = 'plugins/TreemapVisualization/javascripts/treemapViz.js';
- }
-
- public function configureReportViewForActions($view)
- {
- list($module, $method) = explode('.', $view->getReportApiMethod());
-
- // make sure treemap is shown on actions reports
- if ($module === 'Actions') {
- if ($view->getViewDataTableId() != Treemap::ID) {
- // make sure we're looking at data that the treemap visualization can use (a single datatable)
- // TODO: this is truly ugly code. need to think up an abstraction that can allow us to describe the
- // problem...
- $requestArray = $view->getRequestArray() + $_GET + $_POST;
- $date = Common::getRequestVar('date', null, 'string', $requestArray);
- $period = Common::getRequestVar('period', null, 'string', $requestArray);
- $idSite = Common::getRequestVar('idSite', null, 'string', $requestArray);
- if (Period::isMultiplePeriod($date, $period)
- || strpos($idSite, ',') !== false
- || $idSite == 'all'
- ) {
- return;
- }
- }
-
- $view->show_all_views_icons = true;
- $view->show_bar_chart = false;
- $view->show_pie_chart = false;
- $view->show_tag_cloud = false;
-
- if ($view->getViewDataTableId() == Treemap::ID) {
- // for some actions reports, use all available space
- if (in_array($method, self::$fullWidthActionsReports)) {
- $view->datatable_css_class = 'infoviz-treemap-full-width';
- $view->visualization_properties->max_graph_elements = 50;
- } else {
- $view->visualization_properties->max_graph_elements = max(10, $view->visualization_properties->max_graph_elements);
- }
- }
- } else if ($module === 'ExampleUI'
- && $view->getViewDataTableId() == Treemap::ID
- ) {
- $view->visualization_properties->show_evolution_values = false;
- }
- }
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/images/treemap-icon.png b/plugins/TreemapVisualization/images/treemap-icon.png
deleted file mode 100644
index be66a71868..0000000000
--- a/plugins/TreemapVisualization/images/treemap-icon.png
+++ /dev/null
Binary files differ
diff --git a/plugins/TreemapVisualization/javascripts/treemapViz.js b/plugins/TreemapVisualization/javascripts/treemapViz.js
deleted file mode 100644
index 51e19c9690..0000000000
--- a/plugins/TreemapVisualization/javascripts/treemapViz.js
+++ /dev/null
@@ -1,561 +0,0 @@
-/*!
- * Piwik - Web Analytics
- *
- * @link http://piwik.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-(function ($, $jit, require) {
-
- var exports = require('piwik/UI'),
- DataTable = exports.DataTable,
- dataTablePrototype = DataTable.prototype;
-
- /**
- * Class that handles UI behavior for the treemap visualization.
- */
- exports.TreemapDataTable = function (element) {
- DataTable.call(this, element);
- };
-
- $.extend(exports.TreemapDataTable.prototype, dataTablePrototype, {
-
- /**
- * Constructor.
- */
- init: function () {
- dataTablePrototype.init.call(this);
-
- var domElem = this.$element;
- var treemapContainerId = this.workingDivId + '-infoviz-treemap';
- var treemapContainer = $('.infoviz-treemap', domElem).attr('id', treemapContainerId);
-
- if (!treemapContainer[0]) {
- return;
- }
-
- this._bindEventCallbacks(domElem);
-
- var self = this;
- this.treemap = new $jit.TM.Squarified({
- injectInto: treemapContainerId,
- titleHeight: 24,
- animate: true, // TODO: disable on ipad/w/o native canvas support
- offset: 1,
- levelsToShow: 1,
- constrained: true,
- Events: {
- enable: true,
- onClick: function (node, info, event) {
- if (event.which == 2) {
- self._onMiddleClick(node);
- } else {
- self._onLeftClickNode(node);
- }
- },
- onRightClick: function (node) {
- self._onRightClickNode(node);
- }
- },
- duration: 1000,
- Tips: {
- enable: false // TODO: show more in tooltips
- },
- onCreateLabel: function (nodeElement, node) {
- self._initNode(nodeElement, node);
- },
- onPlaceLabel: function (nodeElement, node) {
- self._toggleLabelBasedOnAvailableSpace(nodeElement, node);
- }
- });
-
- this.data = this._prepareTreemapData(treemapContainer.attr('data-data'));
- this._refreshTreemap({animate: true});
- this._addSeriesPicker(domElem);
- },
-
- /**
- * Recursively iterates over the entire data tree and executes a function with
- * each node.
- *
- * @param {Function} f The function to execute. Accepts one argument, the node.
- * @param {Object} [node] The JSON node object to start from. This defaults to the root
- * of the entire tree.
- */
- foreachNode: function (f, node) {
- node = node || this.data;
-
- f(node);
- for (var i = 0; i != (node.children || []).length; ++i) {
- this.foreachNode(f, node.children[i]);
- }
- },
-
- /**
- * Changes the metric the treemap displays.
- *
- * @param {String} metric The name of the metric, e.g. 'nb_visits', 'nb_actions', etc.
- */
- changeMetric: function (metric) {
- this.param.columns = metric;
- this.reloadAjaxDataTable();
- },
-
- /**
- * Handle events to make this control functional.
- */
- _bindEventCallbacks: function (domElem) {
- var self = this;
- domElem.on('click', '.infoviz-treemap-zoom-out', function (e) {
- e.preventDefault();
- self._leaveNode();
- return false;
- });
-
- this.onWidgetResize(function () {
- var $treemap = self.$element.find('.infoviz-treemap');
- self.treemap.canvas.resize($treemap.width(), $treemap.height());
- });
- },
-
- /**
- * Adds the SeriesPicker DataTable visualization widget to this treemap visualization.
- */
- _addSeriesPicker: function (dataTableDomElem) {
- var self = this;
- var SeriesPicker = require('piwik/DataTableVisualizations/Widgets').SeriesPicker;
-
- this._seriesPicker = new SeriesPicker(this);
-
- $(this._seriesPicker).bind('placeSeriesPicker', function () {
- var displayedColumn = this.getMetricTranslation(self.param.columns);
-
- var metricLabel = $('<span/>')
- .addClass('infoviz-treemap-colors')
- .attr('data-name', 'header-color')
- .text("— " + displayedColumn)
- ;
-
- var seriesPickerContainer = $('<div/>') // TODO: this behavior should probably be a part of SeriesPicker
- .addClass('infoviz-treemap-series-picker')
- .append(metricLabel)
- .append(this.domElem)
- ;
-
- dataTableDomElem.find('.infoviz-treemap').prepend(seriesPickerContainer);
- });
-
- $(this._seriesPicker).bind('seriesPicked', function (e, columns) {
- self.changeMetric(columns[0]);
- });
-
- this._seriesPicker.init();
- },
-
- /**
- * Initializes the display of a treemap node element.
- */
- _initNode: function (nodeElement, node) {
- var $nodeElement = $(nodeElement),
- nodeHasUrl = node.data.metadata && node.data.metadata.url,
- nodeHasLogo = node.data.metadata && node.data.metadata.logo;
-
- // add label (w/ logo if it exists)
- var $label = $('<div></div>').addClass("infoviz-treemap-node-label");
- $label.append($('<span></span>').text(node.name));
-
- var leftImage = null;
- if (nodeHasLogo) {
- leftImage = node.data.metadata.logo;
- } else if (nodeHasUrl) {
- leftImage = 'plugins/Zeitgeist/images/link.gif';
- }
-
- if (leftImage) {
- $label.prepend($('<img></img>').attr('src', leftImage));
- }
-
- $nodeElement.append($label);
-
- // set node tooltip
- if (nodeHasUrl) {
- var tooltip = node.data.metadata.url;
- } else {
- var tooltip = node.name;
- }
- if (node.data.metadata
- && node.data.metadata.tooltip
- ) {
- tooltip += ' ' + node.data.metadata.tooltip;
- }
- $nodeElement.attr('title', tooltip);
-
- // set label color
- if (this.labelColor) {
- $label.css('color', this.labelColor);
- }
-
- // if the node can be clicked into, show a pointer cursor over it
- if (this._canEnterNode(node)
- || nodeHasUrl
- ) {
- $nodeElement.addClass("infoviz-treemap-enterable-node");
- }
- },
-
- /**
- * Shows/hides the label depending on whether there's enough vertical space in the node
- * to show it.
- */
- _toggleLabelBasedOnAvailableSpace: function (nodeElement, node) {
- var $nodeElement = $(nodeElement),
- $label = $nodeElement.children('span');
- $label.toggle($nodeElement.height() > $label.height());
- },
-
- /**
- * Prepares data obtained from Piwik server-side code to be used w/ the JIT Treemap
- * visualization. Will make sure each node ID is unique and has a color.
- */
- _prepareTreemapData: function (data) {
- if (typeof data == 'string') {
- data = JSON.parse(data);
- }
-
- this._prependDataTableIdToNodeIds(this.workingDivId, data);
- this._setTreemapColors(data);
- return data;
- },
-
- /**
- * Reloads the treemap visualization using this.data.
- */
- _refreshTreemap: function (options) {
- if (!options.animate) {
- this.treemap.config.animate = false;
- }
-
- this.treemap.loadJSON(this.data);
- this.treemap.refresh();
-
- if (!options.animate) {
- this.treemap.config.animate = true;
- }
- },
-
- /**
- * Alters the ID of each node in tree so it will be unique even if more than one treemap
- * is displayed.
- */
- _prependDataTableIdToNodeIds: function (idPrefix, tree) {
- tree.id = idPrefix + '-' + tree.id;
-
- var children = tree.children || [];
- for (var i = 0; i != children.length; ++i) {
- this._prependDataTableIdToNodeIds(idPrefix, children[i]);
- }
- },
-
- /**
- * Sets the color of each treemap node.
- */
- _setTreemapColors: function (root) {
- if (this.props.show_evolution_values) {
- this._setTreemapColorsFromEvolution(root);
- } else {
- this._setTreemapColorsNormal(root);
- }
- },
-
- _setTreemapColorsFromEvolution: function (root) {
- // get colors
- var colorManager = piwik.ColorManager;
- var colorNames = ['no-change', 'negative-change-max', 'positive-change-max', 'label'];
- var colors = colorManager.getColors('infoviz-treemap-evolution-colors', colorNames);
-
- // find min-max evolution values to make colors relative to
- var minEvolution = -100, maxEvolution = 100;
- this.foreachNode(function (node) {
- var evolution = node.data.evolution || 0;
-
- if (evolution < 0) {
- minEvolution = Math.min(minEvolution, evolution);
- } else if (evolution > 0) {
- maxEvolution = Math.max(maxEvolution, evolution);
- }
- }, root);
-
- // color each node
- var self = this,
- negativeChangeColor = colorManager.getRgb(colors['negative-change-max'] || '#f00'),
- positiveChangeColor = colorManager.getRgb(colors['positive-change-max'] || '#0f0'),
- noChangeColor = colorManager.getRgb(colors['no-change'] || '#333');
-
- this.foreachNode(function (node) {
- var evolution = node.data.evolution || 0;
-
- var color;
- if (evolution < 0) {
- var colorPercent = (minEvolution - evolution) / minEvolution;
- color = colorManager.getSingleColorFromGradient(negativeChangeColor, noChangeColor, colorPercent);
- } else if (evolution > 0) {
- var colorPercent = (maxEvolution - evolution) / maxEvolution;
- color = colorManager.getSingleColorFromGradient(positiveChangeColor, noChangeColor, colorPercent);
- } else {
- color = colors['no-change'];
- }
-
- node.data.$color = color;
- }, root);
-
- this.labelColor = colors.label;
- },
-
- /**
- * Sets the color of treemap nodes using pie-graph-colors.
- */
- _setTreemapColorsNormal: function (root) {
- var seriesColorNames = ['series1', 'series2', 'series3', 'series4', 'series5',
- 'series6', 'series7', 'series8', 'series9', 'series10'];
- var colors = piwik.ColorManager.getColors('pie-graph-colors', seriesColorNames, true);
-
- var colorIdx = 0;
- this.foreachNode(function (node) {
- node.data.$color = colors[colorIdx];
- colorIdx = (colorIdx + 1) % colors.length;
- }, root);
- },
-
- /**
- * Event handler for when a node is left-clicked.
- *
- * This function will enter the node if it can be entered. If it can't be entered, we try
- * and open the node's associated URL, if it has one.
- */
- _onLeftClickNode: function (node) {
- if (!node) {
- return;
- }
-
- if (this._nodeHasSubtable(node)) {
- this._enterSubtable(node);
- } else {
- this._openNodeUrl(node);
- }
- },
-
- /**
- * Event handler for when a node is middle clicked.
- *
- * If the node has a url, this function will load the URL in a new tab/window.
- */
- _onMiddleClick: function (node) {
- if (!node) {
- return;
- }
-
- this._openNodeUrl(node);
- },
-
- /**
- * If the given node has an associated URL, it is opened in a new tab/window.
- */
- _openNodeUrl: function (node) {
- if (node.data.metadata
- && node.data.metadata.url
- ) {
- window.open(node.data.metadata.url, '_blank');
- }
- },
-
- /**
- * Event handler for when a node is right clicked.
- *
- * This function will advance to the parent of the current node, if it has one.
- */
- _onRightClickNode: function (node) {
- this._leaveNode();
- },
-
- /**
- * Enter a treemap node that is a node for a row w/ a subtable.
- */
- _enterSubtable: function (node) {
- if (node.data.loading) {
- return;
- }
-
- if (!node.data.loaded) {
- var self = this;
- this._loadSubtableNodeChildren(node, function (newNode) {
- self._enterNode(newNode);
- });
- } else {
- this._enterNode(node);
- }
- },
-
- /**
- * Enters a node and toggles the zoom out link.
- */
- _enterNode: function (node) {
- this.treemap.enter(node);
- this._toggleZoomOut(true);
- },
-
- /**
- * Leaves a node and toggles the zoom out link if at the root node.
- */
- _leaveNode: function () {
- this.treemap.out();
- this._toggleZoomOut();
- },
-
- /**
- * Show/hide the zoom out button based on the currently selected node.
- */
- _toggleZoomOut: function (toggle) {
- var toggle = toggle || !this._isFirstLevelNode(this.treemap.clickedNode);
- $('.infoviz-treemap-zoom-out', this.$element).css('visibility', toggle ? 'visible' : 'hidden');
- },
-
- /**
- * Returns true if node is a child of the root node, false if it represents a subtable row.
- */
- _isFirstLevelNode: function (node) {
- var parent = node.getParents()[0];
- return !parent || parent.id.indexOf('treemap-root') != -1;
- },
-
- /**
- * Loads data for a node's subtable without reloading the datatable view.
- */
- _loadSubtableNodeChildren: function (node, callback) {
- var ajax = this._getNodeChildrenAjax({
- idSubtable: node.data.idSubtable,
-
- }, node, callback);
- ajax.send();
- },
-
- /**
- * Loads a node's children via AJAX and updates w/o reloading the datatable view.
- */
- _getNodeChildrenAjax: function (overrideParams, node, callback) {
- var self = this,
- dataNode = self._findNodeWithId(node.id),
- params = $.extend({}, self.param, overrideParams, {
- module: 'API',
- method: 'TreemapVisualization.getTreemapData',
- action: 'index',
- apiMethod: self.param.module + '.' + self.props.subtable_controller_action,
- format: 'json',
- column: self.param.columns,
- show_evolution_values: self.props.show_evolution_values || 0,
- });
-
- // make sure parallel load data requests aren't made
- node.data.loading = dataNode.data.loading = true;
-
- var ajax = new ajaxHelper();
- ajax.addParams(params, 'get');
- ajax.setLoadingElement('#' + self.workingDivId + ' .loadingPiwikBelow');
- ajax.setCallback(function (response) {
- dataNode.data.loaded = true;
- delete dataNode.data.loading;
-
- var repsonse = self._prepareTreemapData(response);
- dataNode.children = response.children;
-
- self._refreshTreemap({animate: false});
-
- callback(self.treemap.graph.getNode(node.id));
- });
- ajax.setFormat('json');
- return ajax;
- },
-
- /**
- * Returns true if the given node is the node of an aggregate row, false if otherwise.
- */
- _isOthersNode: function (node) {
- return this._getRowIdFromNode(node) == -1;
- },
-
- /**
- * Returns true if the given node has a subtable, false if otherwise.
- */
- _nodeHasSubtable: function (node) {
- return !! node.data.idSubtable;
- },
-
- /**
- * Returns true if the given node can be entered, false if otherwise.
- *
- * A node can be entered if it has a subtable.
- */
- _canEnterNode: function (node) {
- return this._nodeHasSubtable(node);
- },
-
- /**
- * Returns the ID of the DataTable row associated with a node.
- */
- _getRowIdFromNode: function (node) {
- return node.id.substring(node.id.lastIndexOf('_') + 1);
- },
-
- /**
- * Find node in the JSON data used to initialize the Treemap by its ID.
- */
- _findNodeWithId: function (id, node) {
- if (!node) {
- node = this.data;
- }
-
- if (node.id == id) {
- return node;
- }
-
- for (var i = 0; i != node.children.length; ++i) {
- var result = this._findNodeWithId(id, node.children[i]);
- if (result) {
- return result;
- }
- }
- }
- });
-
- DataTable.registerFooterIconHandler('infoviz-treemap', function (dataTable, viewDataTableId) {
- var filters = dataTable.resetAllFilters();
-
- // make sure only one column is used
- var columns = filters.columns || 'nb_visits';
- if (columns.indexOf(',') != -1) {
- columns = columns.split(',')[0];
- }
- dataTable.param.columns = columns;
-
- // determine what the width of a treemap will be, by inserting a dummy infoviz-treemap element
- // into the DOM
- var $wrapper = dataTable.$element.find('.dataTableWrapper'),
- $dummyTreemap = $('<div/>').addClass('infoviz-treemap').css({'visibility': 'hidden', 'position': 'absolute'});
-
- $wrapper.prepend($dummyTreemap);
- var width = $dummyTreemap.width(), height = $dummyTreemap.height();
-
- // send available width & height so we can pick the best number of elements to display
- dataTable.param.availableWidth = width;
- dataTable.param.availableHeight = height;
-
- dataTable.param.viewDataTable = viewDataTableId;
- dataTable.reloadAjaxDataTable();
- dataTable.notifyWidgetParametersChange(dataTable.$element, {
- viewDataTable: viewDataTableId,
- availableWidth: width,
- availableHeight: height,
- columns: columns
- });
- });
-
-}(jQuery, $jit, require)); \ No newline at end of file
diff --git a/plugins/TreemapVisualization/stylesheets/treemap.less b/plugins/TreemapVisualization/stylesheets/treemap.less
deleted file mode 100644
index 03f9f5b20b..0000000000
--- a/plugins/TreemapVisualization/stylesheets/treemap.less
+++ /dev/null
@@ -1,81 +0,0 @@
-.infoviz-treemap-node-label {
- margin: 3px 6px 0 6px;
- display: block;
-
- > img {
- margin: 2px 6px 0 0;
- display:inline-block;
- vertical-align:top;
- float:left;
- }
-
- > span {
- white-space:nowrap;
- text-overflow:ellipsis;
- overflow:hidden;
- vertical-align:top;
- display:block;
- }
-}
-
-.infoviz-treemap-zoom-out {
- position:absolute;
- right:6px;
- z-index:1000;
- top:30px;
- background-color:#e9e8e1;
- display:none;
- padding:3px 1px 2px 3px;
- border-radius:3px;
- opacity:.6;
- cursor:pointer;
-}
-
-.infoviz-treemap:hover .infoviz-treemap-zoom-out {
- display:inline;
-}
-
-.infoviz-treemap-zoom-out:hover {
- opacity:.7;
-}
-
-.infoviz-treemap-enterable-node {
- cursor:pointer;
-}
-
-.infoviz-treemap {
- width:450px;
- height:320px;
- position:relative;
-
- .node {
- overflow:hidden;
- }
-}
-
-.infoviz-treemap-full-width > .dataTableWrapper {
- width:100%;
-
- .infoviz-treemap {
- width:100%;
- height:640px;
- }
-}
-
-.widget .infoviz-treemap {
- width:100% !important;
-}
-
-.infoviz-treemap-series-picker {
- display:inline-block;
- position:absolute;
- right:0;
- z-index:1000;
-
-
- > .jqplot-seriespicker {
- display:inline-block;
- position:relative;
- margin-left:4px;
- }
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/stylesheets/treemapColors.less b/plugins/TreemapVisualization/stylesheets/treemapColors.less
deleted file mode 100644
index 08eba94776..0000000000
--- a/plugins/TreemapVisualization/stylesheets/treemapColors.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.infoviz-treemap-evolution-colors[data-name=no-change] {
- color: #333;
-}
-
-.infoviz-treemap-evolution-colors[data-name=negative-change-max] {
- color: red;
-}
-
-.infoviz-treemap-evolution-colors[data-name=positive-change-max] {
- color: green;
-}
-
-.infoviz-treemap-evolution-colors[data-name=label] {
- color: white;
-}
-
-.infoviz-treemap-colors[data-name=header-color] {
- color: white;
-} \ No newline at end of file
diff --git a/plugins/TreemapVisualization/templates/_dataTableViz_treemap.twig b/plugins/TreemapVisualization/templates/_dataTableViz_treemap.twig
deleted file mode 100644
index 2699dc646e..0000000000
--- a/plugins/TreemapVisualization/templates/_dataTableViz_treemap.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="infoviz-treemap" data-data="{{ generator.generate(dataTable)|json_encode }}">
- <img class="infoviz-treemap-zoom-out" style="visibility:hidden;" src="plugins/Zeitgeist/images/zoom-out.png"/>
-</div> \ No newline at end of file