Skip to content

Commit

Permalink
Refs matomo-org#4041, refactored jqplot.js file by removing JQPlot cl…
Browse files Browse the repository at this point in the history 
…ass and creating JqplotGraph datatable class, and did more refactoring to jqplot data generating mechanism.

Notes:
  - Removed jqplot specific code from datatable_manager.js and moved to new JqplotGraph class.
  - Moved tooltip percentage calculating code to client.
  • Loading branch information
Benaka Moorthi committed Sep 1, 2013
1 parent 356d476 commit 42623a0
Show file tree
Hide file tree
Showing 9 changed files with 681 additions and 708 deletions.
3 changes: 2 additions & 1 deletion core/Visualization/Graph.php
View file
Expand Up @@ -92,7 +92,8 @@ abstract class Graph extends DataTableVisualization
'show_series_picker',
'allow_multi_select_series_picker',
'selectable_columns',
'selectable_rows'
'selectable_rows',
'display_percentage_in_tooltip'
);

public static $clientSideParameters = array(
Expand Down
57 changes: 1 addition & 56 deletions plugins/CoreHome/javascripts/dataTable_manager.js
View file
Expand Up @@ -60,7 +60,7 @@
params[key] = params[key].join(',');
}
}

self.initSingleDataTable(this, window[tableType], params, props);
}
});
Expand All @@ -85,61 +85,6 @@
table.param = params;
table.props = props;
table.init(newId);

// if the datatable has a graph, init the graph
var graphElement = $('.piwik-graph', domElem);
if (graphElement[0]) {
this.initJQPlotGraph(graphElement, newId);
}
},

/**
* Initializes and renders a JQPlot graph contained in a
* dataTable.
*
* @param {Element} graphElement The empty graph div element. Will
* usually have the .piwik-graph class.
* @param {String} dataTableId The ID of the containing datatable.
*/
initJQPlotGraph: function (graphElement, dataTableId) {
graphElement = $(graphElement);

// set a unique ID for the graph element
var graphId = dataTableId + 'Chart';
graphElement.attr('id', graphId);

var graphData;
try {
graphData = JSON.parse(graphElement.attr('data-data'));
} catch (e) {
console.error('JSON.parse Error: "' + e + "\" in:\n" + graphElement.attr('data-data'));
return;
}

var plot = new JQPlot(graphData, dataTableId);

// add external series toggle if it should be added
var externalSeriesToggle = graphElement.attr('data-external-series-toggle');
if (externalSeriesToggle) {
plot.addExternalSeriesToggle(
window[externalSeriesToggle], // get the function w/ string name
graphId,
graphElement.attr('data-external-series-show-all') == 1
);
}

// render the graph (setTimeout is required, otherwise the graph will not
// render initially)
setTimeout(function () {
plot.render(graphId, {
noData: _pk_translate('General_NoDataForGraph_js'),
exportTitle: _pk_translate('General_ExportAsImage_js'),
exportText: _pk_translate('General_SaveImageOnYourComputer_js'),
metricsToPlot: _pk_translate('General_MetricsToPlot_js'),
metricToPlot: _pk_translate('General_MetricToPlot_js'),
recordsToPlot: _pk_translate('General_RecordsToPlot_js')
});
}, 1);
},

/**
Expand Down
13 changes: 1 addition & 12 deletions plugins/CoreVisualizations/JqplotDataGenerator.php
View file
Expand Up @@ -92,8 +92,6 @@ public function generate($dataTable)
$this->initChartObjectData($dataTable, $visualization);
}

$visualization->customizeChartProperties();

return $visualization->render();
}

Expand Down Expand Up @@ -125,12 +123,6 @@ protected function initChartObjectData($dataTable, $visualization)
$visualization->setAxisXLabels($xLabels);
$visualization->setAxisYValues($columnNameToValue);
$visualization->setAxisYLabels($columnNameToTranslation);
$visualization->setAxisYUnit($this->properties['y_axis_unit']);

// show_all_ticks is not real query param, it is set by GenerateGraphHTML.
if ($this->properties['visualization_properties']->show_all_ticks) {
$visualization->showAllTicks();
}

$units = $this->getUnitsForColumnsToDisplay();
$visualization->setAxisYUnits($units);
Expand All @@ -141,10 +133,7 @@ protected function getUnitsForColumnsToDisplay()
// derive units from column names
$units = $this->deriveUnitsFromRequestedColumnNames();
if (!empty($this->properties['y_axis_unit'])) {
// force unit to the value set via $this->setAxisYUnit()
foreach ($units as &$unit) {
$unit = $this->properties['y_axis_unit'];
}
$units = array_fill(0, count($units), $this->properties['y_axis_unit']);
}

// the bar charts contain the labels a first series
Expand Down
120 changes: 30 additions & 90 deletions plugins/CoreVisualizations/JqplotDataGenerator/Chart.php
View file
Expand Up @@ -23,23 +23,28 @@ class Chart
protected $series = array();
protected $data = array();
protected $axes = array();
protected $tooltip = array();

// other attributes (not directly used for jqplot)
protected $yUnit = '';

// temporary
public $dataTable;
public $properties;

/**
* Whether to show every x-axis tick or only every other one.
*/
protected $showAllTicks = false;

public function setAxisXLabels(&$xLabels)
public function setAxisXLabels($xLabels)
{
$this->axes['xaxis']['ticks'] = & $xLabels;
$xSteps = $this->properties['visualization_properties']->x_axis_step_size;
$showAllTicks = $this->properties['visualization_properties']->show_all_ticks;

$this->axes['xaxis']['labels'] = array_values($xLabels);

$ticks = array_values($xLabels);
if (!$showAllTicks) {
// unset labels so there are $xSteps number of blank ticks between labels
foreach ($ticks as $i => &$label) {
if ($i % $xSteps != 0) {
$label = ' ';
}
}
}
$this->axes['xaxis']['ticks'] = $ticks;
}

public function setAxisXOnClick(&$onClick)
Expand All @@ -63,54 +68,29 @@ public function setAxisYValues(&$values)
}
}

protected function addTooltipToValue($seriesIndex, $valueIndex, $tooltipTitle, $tooltipText)
{
$this->tooltip[$seriesIndex][$valueIndex] = array($tooltipTitle, $tooltipText);
}

public function setAxisYUnit($yUnit)
{
$yUnits = array();
for ($i = 0; $i < count($this->data); $i++) {
$yUnits[] = $yUnit;
}
$this->setAxisYUnits($yUnits);
}

public function setAxisYUnits($yUnits)
{
// generate an axis config for each unit
$yUnits = array_values(array_map('strval', $yUnits));

// generate axis IDs for each unique y unit
$axesIds = array();
// associate each series with the appropriate axis
$seriesAxes = array();
// units for tooltips
$seriesUnits = array();
foreach ($yUnits as $unit) {
// handle axes ids: first y[]axis, then y[2]axis, y[3]axis...
$nextAxisId = empty($axesIds) ? '' : count($axesIds) + 1;

$unit = $unit ? $unit : '';
foreach ($yUnits as $idx => $unit) {
if (!isset($axesIds[$unit])) {
$axesIds[$unit] = array('id' => $nextAxisId, 'unit' => $unit);
$seriesAxes[] = 'y' . $nextAxisId . 'axis';
} else {
// reuse existing axis
$seriesAxes[] = 'y' . $axesIds[$unit]['id'] . 'axis';
// handle axes ids: first y[]axis, then y[2]axis, y[3]axis...
$nextAxisId = empty($axesIds) ? '' : count($axesIds) + 1;

$axesIds[$unit] = 'y' . $nextAxisId . 'axis';
}
$seriesUnits[] = $unit;
}

// generate jqplot axes config
foreach ($axesIds as $axis) {
$axisKey = 'y' . $axis['id'] . 'axis';
$this->axes[$axisKey]['tickOptions']['formatString'] = '%s' . $axis['unit'];
foreach ($axesIds as $unit => $axisId) {
$this->axes[$axisId]['tickOptions']['formatString'] = '%s' . $unit;
}

$this->tooltip['yUnits'] = $seriesUnits;

// add axis config to series
foreach ($seriesAxes as $i => $axisName) {
$this->series[$i]['yaxis'] = $axisName;
// map each series to appropriate yaxis
foreach ($yUnits as $idx => $unit) {
$this->series[$idx]['yaxis'] = $axesIds[$unit];
}
}

Expand All @@ -124,14 +104,6 @@ public function setAxisYLabels($labels)
}
}

/**
* Show every x-axis tick instead of just every other one.
*/
public function showAllTicks()
{
$this->showAllTicks = true;
}

public function render()
{
Piwik::overrideCacheControlHeaders();
Expand All @@ -142,41 +114,9 @@ public function render()
'axes' => &$this->axes,
'series' => &$this->series
),
'data' => &$this->data,
'tooltip' => &$this->tooltip,
'data' => &$this->data
);

return Common::json_encode($data);
}

public function customizeChartProperties()
{
// x axis labels with steps
if (isset($this->axes['xaxis']['ticks'])) {
$xSteps = $this->properties['visualization_properties']->x_axis_step_size;
foreach ($this->axes['xaxis']['ticks'] as $i => &$xLabel) {
$this->axes['xaxis']['labels'][$i] = $xLabel;
if (!$this->showAllTicks && ($i % $xSteps) != 0) {
$xLabel = ' ';
}
}
}

if ($this->properties['visualization_properties']->display_percentage_in_tooltip) {
foreach ($this->data as $seriesIndex => &$series) {
$sum = array_sum($series);

foreach ($series as $valueIndex => $value) {
$value = (float)$value;

$percentage = 0;
if ($sum > 0) {
$percentage = round(100 * $value / $sum);
}

$this->tooltip['percentages'][$seriesIndex][$valueIndex] = $percentage;
}
}
}
}
}
7 changes: 7 additions & 0 deletions plugins/CoreVisualizations/Visualizations/JqplotGraph.php
View file
Expand Up @@ -44,6 +44,11 @@ class JqplotGraph extends Graph
*/
const X_AXIS_STEP_SIZE = 'x_axis_step_size';

public static $clientSideProperties = array(
'external_series_toggle',
'external_series_toggle_show_all'
);

/**
* Constructor.
*
Expand All @@ -65,6 +70,8 @@ public function __construct($view)
$result['filter_sort_column'] = $firstColumn;
$result['filter_sort_order'] = 'desc';
}

$view->datatable_js_type = 'JqplotGraphDataTable';
}

/**
Expand Down

0 comments on commit 42623a0

Please sign in to comment.