Browse Source

Flot widget pull requests: resolve conflicts for #2053, #2061 (#2289)

* Add some datakey settings to edit legend appearance for flot widget

* Fix timestamp and index search in 'line' flot charts tooltip

Co-authored-by: Mirco Pizzichini <52463156+mircopz@users.noreply.github.com>
pull/2290/head
Chantsova Ekaterina 7 years ago
committed by Igor Kulikov
parent
commit
825406690c
  1. 3
      ui/src/app/api/subscription.js
  2. 4
      ui/src/app/components/legend.directive.js
  3. 25
      ui/src/app/components/legend.tpl.html
  4. 55
      ui/src/app/widget/lib/flot-widget.js

3
ui/src/app/api/subscription.js

@ -332,7 +332,8 @@ export default class Subscription {
for (var a = 0; a < datasource.dataKeys.length; a++) { for (var a = 0; a < datasource.dataKeys.length; a++) {
var dataKey = datasource.dataKeys[a]; var dataKey = datasource.dataKeys[a];
dataKey.hidden = false; dataKey.hidden = dataKey.settings.hideDataByDefault ? true : false;
dataKey.inLegend = dataKey.settings.removeFromLegend ? false : true;
dataKey.pattern = angular.copy(dataKey.label); dataKey.pattern = angular.copy(dataKey.label);
if (this.comparisonEnabled && dataKey.settings.comparisonSettings && dataKey.settings.comparisonSettings.showValuesForComparison) { if (this.comparisonEnabled && dataKey.settings.comparisonSettings && dataKey.settings.comparisonSettings.showValuesForComparison) {

4
ui/src/app/components/legend.directive.js

@ -46,7 +46,9 @@ function Legend($compile, $templateCache, types) {
scope.isRowDirection = scope.legendConfig.direction === types.direction.row.value; scope.isRowDirection = scope.legendConfig.direction === types.direction.row.value;
scope.toggleHideData = function(index) { scope.toggleHideData = function(index) {
scope.legendData.keys[index].dataKey.hidden = !scope.legendData.keys[index].dataKey.hidden; if (!scope.legendData.keys[index].dataKey.settings.disableDataHiding) {
scope.legendData.keys[index].dataKey.hidden = !scope.legendData.keys[index].dataKey.hidden;
}
} }
$compile(element.contents())(scope); $compile(element.contents())(scope);

25
ui/src/app/components/legend.tpl.html

@ -27,7 +27,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys" ng-if="!isRowDirection"> <tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys"
ng-if="!isRowDirection && legendData.keys[legendKey.dataIndex].dataKey.inLegend">
<td><span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span></td> <td><span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span></td>
<td class="tb-legend-label" <td class="tb-legend-label"
ng-click="toggleHideData(legendKey.dataIndex)" ng-click="toggleHideData(legendKey.dataIndex)"
@ -41,7 +42,7 @@
</tr> </tr>
<tr class="tb-legend-keys" ng-class="{ 'tb-row-direction': !displayHeader() }" ng-if="isRowDirection"> <tr class="tb-legend-keys" ng-class="{ 'tb-row-direction': !displayHeader() }" ng-if="isRowDirection">
<td></td> <td></td>
<td ng-repeat="legendKey in legendData.keys"> <td ng-repeat="legendKey in legendData.keys" ng-if="legendData.keys[legendKey.dataIndex].dataKey.inLegend">
<span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span> <span class="tb-legend-line" ng-style="{backgroundColor: legendKey.dataKey.color}"></span>
<span class="tb-legend-label" <span class="tb-legend-label"
ng-click="toggleHideData(legendKey.dataIndex)" ng-click="toggleHideData(legendKey.dataIndex)"
@ -52,19 +53,31 @@
</tr> </tr>
<tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMin === true"> <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMin === true">
<td class="tb-legend-type">{{ 'legend.min' | translate }}</td> <td class="tb-legend-type">{{ 'legend.min' | translate }}</td>
<td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].min }}</td> <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys"
ng-if="legendData.keys[legendKey.dataIndex].dataKey.inLegend">
{{ legendData.data[legendKey.dataIndex].min }}
</td>
</tr> </tr>
<tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMax === true"> <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMax === true">
<td class="tb-legend-type">{{ 'legend.max' | translate }}</td> <td class="tb-legend-type">{{ 'legend.max' | translate }}</td>
<td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].max }}</td> <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys"
ng-if="legendData.keys[legendKey.dataIndex].dataKey.inLegend">
{{ legendData.data[legendKey.dataIndex].max }}
</td>
</tr> </tr>
<tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showAvg === true"> <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showAvg === true">
<td class="tb-legend-type">{{ 'legend.avg' | translate }}</td> <td class="tb-legend-type">{{ 'legend.avg' | translate }}</td>
<td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].avg }}</td> <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys"
ng-if="legendData.keys[legendKey.dataIndex].dataKey.inLegend">
{{ legendData.data[legendKey.dataIndex].avg }}
</td>
</tr> </tr>
<tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showTotal === true"> <tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showTotal === true">
<td class="tb-legend-type">{{ 'legend.total' | translate }}</td> <td class="tb-legend-type">{{ 'legend.total' | translate }}</td>
<td class="tb-legend-value" ng-repeat="legendKey in legendData.keys">{{ legendData.data[legendKey.dataIndex].total }}</td> <td class="tb-legend-value" ng-repeat="legendKey in legendData.keys"
ng-if="legendData.keys[legendKey.dataIndex].dataKey.inLegend">
{{ legendData.data[legendKey.dataIndex].total }}
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

55
ui/src/app/widget/lib/flot-widget.js

@ -139,12 +139,7 @@ export default class TbFlot {
return seriesHover.index === seriesIndex; return seriesHover.index === seriesIndex;
}); });
if (found && found.length) { if (found && found.length) {
let timestamp; let timestamp = parseInt(found[0].time);
if (!angular.isNumber(hoverInfo[0].time) || (found[0].time < hoverInfo[0].time)) {
timestamp = parseInt(hoverInfo[1].time);
} else {
timestamp = parseInt(hoverInfo[0].time);
}
let date = moment(timestamp).format('YYYY-MM-DD HH:mm:ss'); let date = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
let dateDiv = $('<div>' + date + '</div>'); let dateDiv = $('<div>' + date + '</div>');
dateDiv.css({ dateDiv.css({
@ -1213,7 +1208,35 @@ export default class TbFlot {
} }
static get pieDatakeySettingsSchema() { static get pieDatakeySettingsSchema() {
return {} return {
"schema": {
"type": "object",
"title": "DataKeySettings",
"properties": {
"hideDataByDefault": {
"title": "Data is hidden by default",
"type": "boolean",
"default": false
},
"disableDataHiding": {
"title": "Disable data hiding",
"type": "boolean",
"default": false
},
"removeFromLegend": {
"title": "Remove datakey from legend",
"type": "boolean",
"default": false
}
},
"required": []
},
"form": [
"hideDataByDefault",
"disableDataHiding",
"removeFromLegend"
]
};
} }
static datakeySettingsSchema(defaultShowLines, chartType) { static datakeySettingsSchema(defaultShowLines, chartType) {
@ -1228,6 +1251,21 @@ export default class TbFlot {
"type": "boolean", "type": "boolean",
"default": false "default": false
}, },
"hideDataByDefault": {
"title": "Data is hidden by default",
"type": "boolean",
"default": false
},
"disableDataHiding": {
"title": "Disable data hiding",
"type": "boolean",
"default": false
},
"removeFromLegend": {
"title": "Remove datakey from legend",
"type": "boolean",
"default": false
},
"showLines": { "showLines": {
"title": "Show lines", "title": "Show lines",
"type": "boolean", "type": "boolean",
@ -1316,6 +1354,9 @@ export default class TbFlot {
"required": ["showLines", "fillLines", "showPoints"] "required": ["showLines", "fillLines", "showPoints"]
}, },
"form": [ "form": [
"hideDataByDefault",
"disableDataHiding",
"removeFromLegend",
"excludeFromStacking", "excludeFromStacking",
"showLines", "showLines",
"fillLines", "fillLines",

Loading…
Cancel
Save