diff options
| -rw-r--r-- | ChangeLog | 2 | ||||
| -rw-r--r-- | frontends/php/include/classes/graph/CSvgGraph.php | 22 | ||||
| -rw-r--r-- | frontends/php/include/classes/html/svg/CSvgGraphLine.php | 30 | ||||
| -rw-r--r-- | frontends/php/include/classes/html/svg/CSvgGraphLineGroup.php | 94 | ||||
| -rw-r--r-- | frontends/php/include/classes/html/svg/CSvgGraphPoints.php | 8 | ||||
| -rw-r--r-- | frontends/php/js/class.csvggraph.js | 31 | ||||
| -rw-r--r-- | frontends/php/styles/blue-theme.css | 4 | ||||
| -rw-r--r-- | frontends/php/styles/dark-theme.css | 4 | ||||
| -rw-r--r-- | frontends/php/styles/hc-dark.css | 4 | ||||
| -rw-r--r-- | frontends/php/styles/hc-light.css | 4 | ||||
| -rw-r--r-- | sass/stylesheets/sass/screen.scss | 4 |
11 files changed, 157 insertions, 50 deletions
diff --git a/ChangeLog b/ChangeLog index 0ef2d0c0e26..3f67ba9aa5a 100644 --- a/ChangeLog +++ b/ChangeLog @@ -1,6 +1,7 @@ Changes for 4.2.0alpha3 New features: +..F....... [ZBXNEXT-4873] implemented single dot datasets to be drawn as points in line vector graphs (miks) Bug fixes: A......... [ZBX-14331] fixed error allowed to change interface type which is already used by items (gcalenko) @@ -75,6 +76,7 @@ A.F.I...S. [ZBXNEXT-4853,ZBXNEXT-517] added ability to send email messages in HT Changes for 4.0.4rc1 New features: +..F....... [ZBXNEXT-4873] implemented single dot datasets to be drawn as points in line vector graphs (miks) ...G...... [ZBX-14876] added a new optional parameter <regex_excl_dir> to items vfs.dir.size[] and vfs.dir.count[] (viktors) Bug fixes: diff --git a/frontends/php/include/classes/graph/CSvgGraph.php b/frontends/php/include/classes/graph/CSvgGraph.php index 7fea6864fc7..694525608bb 100644 --- a/frontends/php/include/classes/graph/CSvgGraph.php +++ b/frontends/php/include/classes/graph/CSvgGraph.php @@ -25,6 +25,10 @@ class CSvgGraph extends CSvg { const SVG_GRAPH_X_AXIS_HEIGHT = 20; + const SVG_GRAPH_DEFAULT_COLOR = '#b0af07'; + const SVG_GRAPH_DEFAULT_TRANSPARENCY = 5; + const SVG_GRAPH_DEFAULT_POINTSIZE = 1; + const SVG_GRAPH_DEFAULT_LINE_WIDTH = 1; const SVG_GRAPH_X_AXIS_LABEL_MARGIN = 5; const SVG_GRAPH_Y_AXIS_LEFT_LABEL_MARGIN = 5; @@ -895,7 +899,9 @@ class CSvgGraph extends CSvg { $y_zero = ($metric['options']['axisy'] == GRAPH_YAXIS_SIDE_RIGHT) ? $this->right_y_zero : $this->left_y_zero; foreach ($paths as $path) { - $this->addItem(new CSvgGraphArea($path, $metric, $y_zero)); + if (count($path) > 1) { + $this->addItem(new CSvgGraphArea($path, $metric, $y_zero)); + } } } @@ -906,23 +912,11 @@ class CSvgGraph extends CSvg { foreach ($this->metrics as $index => $metric) { if (array_key_exists($index, $this->paths) && ($metric['options']['type'] == SVG_GRAPH_TYPE_LINE || $metric['options']['type'] == SVG_GRAPH_TYPE_STAIRCASE)) { - $group = (new CSvgGroup()) - ->setAttribute('data-set', $metric['options']['type'] == SVG_GRAPH_TYPE_LINE ? 'line' : 'staircase') - ->setAttribute('data-metric', CHtml::encode($metric['name'])) - ->setAttribute('data-color', $metric['options']['color']); - if ($metric['options']['fill'] > 0) { $this->drawMetricArea($metric, $this->paths[$index]); } - foreach ($this->paths[$index] as $path) { - $group->addItem(new CSvgGraphLine($path, $metric)); - } - - $this->addItem($group->addItem( - (new CSvgCircle(-10, -10, $metric['options']['width'] + 4)) - ->addClass(CSvgTag::ZBX_STYLE_GRAPH_HIGHLIGHTED_VALUE) - )); + $this->addItem(new CSvgGraphLineGroup($this->paths[$index], $metric)); } } } diff --git a/frontends/php/include/classes/html/svg/CSvgGraphLine.php b/frontends/php/include/classes/html/svg/CSvgGraphLine.php index 4df0a38f7e7..0768a446bab 100644 --- a/frontends/php/include/classes/html/svg/CSvgGraphLine.php +++ b/frontends/php/include/classes/html/svg/CSvgGraphLine.php @@ -40,13 +40,12 @@ class CSvgGraphLine extends CSvgPath { $this->item_name = $metric['name']; $this->units = $metric['units']; $this->host = $metric['host']; - $this->line_values = ''; $this->options = $metric['options'] + [ - 'transparency' => 5, + 'transparency' => CSvgGraph::SVG_GRAPH_DEFAULT_TRANSPARENCY, + 'width' => CSvgGraph::SVG_GRAPH_DEFAULT_LINE_WIDTH, + 'color' => CSvgGraph::SVG_GRAPH_DEFAULT_COLOR, 'type' => SVG_GRAPH_TYPE_LINE, - 'width' => 1, - 'color' => '#b0af07', 'order' => 1 ]; } @@ -71,19 +70,22 @@ class CSvgGraphLine extends CSvgPath { } protected function draw() { - $last_point = [0, 0]; + // drawMetricArea can be called with single data point. + if (count($this->path) > 1) { + $last_point = [0, 0]; - foreach ($this->path as $i => $point) { - if ($i == 0) { - $this->moveTo($point[0], $point[1]); - } - else { - if ($this->options['type'] == SVG_GRAPH_TYPE_STAIRCASE) { - $this->lineTo($point[0], $last_point[1]); + foreach ($this->path as $i => $point) { + if ($i == 0) { + $this->moveTo($point[0], $point[1]); + } + else { + if ($this->options['type'] == SVG_GRAPH_TYPE_STAIRCASE) { + $this->lineTo($point[0], $last_point[1]); + } + $this->lineTo($point[0], $point[1]); } - $this->lineTo($point[0], $point[1]); + $last_point = $point; } - $last_point = $point; } } diff --git a/frontends/php/include/classes/html/svg/CSvgGraphLineGroup.php b/frontends/php/include/classes/html/svg/CSvgGraphLineGroup.php new file mode 100644 index 00000000000..b385b2f4cd5 --- /dev/null +++ b/frontends/php/include/classes/html/svg/CSvgGraphLineGroup.php @@ -0,0 +1,94 @@ +<?php +/* +** Zabbix +** Copyright (C) 2001-2018 Zabbix SIA +** +** This program is free software; you can redistribute it and/or modify +** it under the terms of the GNU General Public License as published by +** the Free Software Foundation; either version 2 of the License, or +** (at your option) any later version. +** +** This program is distributed in the hope that it will be useful, +** but WITHOUT ANY WARRANTY; without even the implied warranty of +** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +** GNU General Public License for more details. +** +** You should have received a copy of the GNU General Public License +** along with this program; if not, write to the Free Software +** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +**/ + + +/* + * Class to draw graph line. Single data points will be drawn as points instead of lines. + */ +class CSvgGraphLineGroup extends CSvgGroup { + + protected $paths; + protected $metric; + protected $options; + + public function __construct($paths, $metric) { + parent::__construct(); + + $this->paths = $paths; + $this->metric = $metric; + + $this->options = $metric['options'] + [ + 'transparency' => CSvgGraph::SVG_GRAPH_DEFAULT_TRANSPARENCY, + 'width' => CSvgGraph::SVG_GRAPH_DEFAULT_LINE_WIDTH, + 'color' => CSvgGraph::SVG_GRAPH_DEFAULT_COLOR, + 'type' => SVG_GRAPH_TYPE_LINE, + 'order' => 1 + ]; + + // Minimal point size is 3 to make single data points visible even for thin lines. + $this->options['pointsize'] = max($this->options['width'], 3); + } + + public function makeStyles() { + $this + ->addClass(CSvgTag::ZBX_STYLE_GRAPH_LINE) + ->addClass(CSvgTag::ZBX_STYLE_GRAPH_LINE.'-'.$this->metric['itemid'].'-'.$this->options['order']); + + $line_style = ($this->options['type'] == SVG_GRAPH_TYPE_LINE) ? ['stroke-linejoin' => 'round'] : []; + + return [ + '.'.CSvgTag::ZBX_STYLE_GRAPH_LINE => [ + 'fill' => 'none' + ], + '.'.CSvgTag::ZBX_STYLE_GRAPH_LINE.'-'.$this->metric['itemid'].'-'.$this->options['order'] => [ + 'stroke-opacity' => $this->options['transparency'] * 0.1, + 'stroke' => $this->options['color'], + 'stroke-width' => $this->options['width'] + ] + $line_style, + '.'.CSvgTag::ZBX_STYLE_GRAPH_LINE.'-'.$this->metric['itemid'].'-'.$this->options['order'].' circle' => [ + 'fill-opacity' => $this->options['transparency'] * 0.1, + 'fill' => $this->options['color'], + 'stroke-width' => 0 + ] + ]; + } + + protected function draw() { + foreach ($this->paths as $path) { + // Draw single data point paths as circles instead of lines. + $this->addItem((count($path) > 1) + ? new CSvgGraphLine($path, $this->metric) + : (new CSvgCircle($path[0][0], $path[0][1], $this->options['pointsize'])) + ->setAttribute('label', $path[0][2]) + ); + } + } + + public function toString($destroy = true) { + $this->setAttribute('data-set', $this->options['type'] == SVG_GRAPH_TYPE_LINE ? 'line' : 'staircase') + ->setAttribute('data-metric', CHtml::encode($this->metric['name'])) + ->setAttribute('data-color', $this->options['color']) + ->addItem((new CSvgCircle(-10, -10, $this->options['width'] + 4)) + ->addClass(CSvgTag::ZBX_STYLE_GRAPH_HIGHLIGHTED_VALUE)) + ->draw(); + + return parent::toString($destroy); + } +} diff --git a/frontends/php/include/classes/html/svg/CSvgGraphPoints.php b/frontends/php/include/classes/html/svg/CSvgGraphPoints.php index a0a5cdc8991..8712c57e1e0 100644 --- a/frontends/php/include/classes/html/svg/CSvgGraphPoints.php +++ b/frontends/php/include/classes/html/svg/CSvgGraphPoints.php @@ -33,10 +33,10 @@ class CSvgGraphPoints extends CSvgGroup { $this->itemid = $metric['itemid']; $this->item_name = $metric['name']; $this->options = $metric['options'] + [ - 'color' => '#b0af07', - 'order' => 1, - 'pointsize' => 1, - 'transparency' => 5 + 'color' => CSvgGraph::SVG_GRAPH_DEFAULT_COLOR, + 'pointsize' => CSvgGraph::SVG_GRAPH_DEFAULT_POINTSIZE, + 'transparency' => CSvgGraph::SVG_GRAPH_DEFAULT_TRANSPARENCY, + 'order' => 1 ]; } diff --git a/frontends/php/js/class.csvggraph.js b/frontends/php/js/class.csvggraph.js index 60dc608cd4d..b4658023e80 100644 --- a/frontends/php/js/class.csvggraph.js +++ b/frontends/php/js/class.csvggraph.js @@ -279,11 +279,25 @@ jQuery(function ($) { var direction_string = '', label = [], data_set = nodes[i].getAttribute('data-set'), - paths = nodes[i].querySelectorAll('.svg-graph-line'); - - for (var index = 0, len = paths.length; index < len; index++) { - direction_string += ' ' + paths[index].getAttribute('d'); - label.push(paths[index].getAttribute('label')); + data_nodes = nodes[i].childNodes, + elmnt_label, + cx, + cy; + + for (var index = 0, len = data_nodes.length; index < len; index++) { + elmnt_label = data_nodes[index].getAttribute('label'); + if (elmnt_label) { + label.push(elmnt_label); + + if (data_nodes[index].tagName.toLowerCase() === 'circle') { + cx = data_nodes[index].getAttribute('cx'); + cy = data_nodes[index].getAttribute('cy'); + direction_string += ' _' + cx + ',' + cy; + } + else { + direction_string += ' ' + data_nodes[index].getAttribute('d'); + } + } } label = label.join(',').split(','); @@ -349,12 +363,13 @@ jQuery(function ($) { * this function. Tolerance is used to find exacly matched point only. */ function getDataPointTolerance(ds) { - if (ds.getAttribute('data-set') === 'points') { - // Take radius of first real data set point (the 0th is .svg-point-highlight). + var data_tag = ds.querySelector(':not(.svg-point-highlight)'); + + if (data_tag.tagName.toLowerCase() === 'circle') { return +ds.childNodes[1].getAttribute('r'); } else { - return +window.getComputedStyle(ds.querySelectorAll('path')[0])['strokeWidth']; + return +window.getComputedStyle(data_tag)['strokeWidth']; } } diff --git a/frontends/php/styles/blue-theme.css b/frontends/php/styles/blue-theme.css index 5430ecfb0fd..39ec7e7500b 100644 --- a/frontends/php/styles/blue-theme.css +++ b/frontends/php/styles/blue-theme.css @@ -2924,8 +2924,8 @@ button[disabled], button[disabled]:hover, button[disabled]:active { stroke-width: 2px; } .svg-point-highlight { - fill: #1f2c33; - fill-opacity: 0.5; } + fill: #1f2c33 !important; + fill-opacity: 0.5 !important; } .svg-graph-preview { margin-top: 10px; diff --git a/frontends/php/styles/dark-theme.css b/frontends/php/styles/dark-theme.css index ab4b7e13dfc..90d38fdbb50 100644 --- a/frontends/php/styles/dark-theme.css +++ b/frontends/php/styles/dark-theme.css @@ -2948,8 +2948,8 @@ button[disabled], button[disabled]:hover, button[disabled]:active { stroke-width: 2px; } .svg-point-highlight { - fill: #f2f2f2; - fill-opacity: 0.5; } + fill: #f2f2f2 !important; + fill-opacity: 0.5 !important; } .svg-graph-preview { margin-top: 10px; diff --git a/frontends/php/styles/hc-dark.css b/frontends/php/styles/hc-dark.css index 8efa0f423c9..8cde20e8995 100644 --- a/frontends/php/styles/hc-dark.css +++ b/frontends/php/styles/hc-dark.css @@ -2911,8 +2911,8 @@ button[disabled], button[disabled]:hover, button[disabled]:active { stroke-width: 2px; } .svg-point-highlight { - fill: #fff; - fill-opacity: 0.5; } + fill: #fff !important; + fill-opacity: 0.5 !important; } .svg-graph-preview { margin-top: 10px; diff --git a/frontends/php/styles/hc-light.css b/frontends/php/styles/hc-light.css index e567c87c34d..a5fdd6be897 100644 --- a/frontends/php/styles/hc-light.css +++ b/frontends/php/styles/hc-light.css @@ -2911,8 +2911,8 @@ button[disabled], button[disabled]:hover, button[disabled]:active { stroke-width: 2px; } .svg-point-highlight { - fill: #000; - fill-opacity: 0.5; } + fill: #000 !important; + fill-opacity: 0.5 !important; } .svg-graph-preview { margin-top: 10px; diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 0d549068ade..2bc784846b4 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -4254,8 +4254,8 @@ $form-icon-btn: ( stroke-width: 2px; } .svg-point-highlight { - fill: $font-color; - fill-opacity: 0.5; + fill: $font-color !important; + fill-opacity: 0.5 !important; } .svg-graph-preview { |