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++) {
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);
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.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);

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

@ -27,7 +27,8 @@
</tr>
</thead>
<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 class="tb-legend-label"
ng-click="toggleHideData(legendKey.dataIndex)"
@ -41,7 +42,7 @@
</tr>
<tr class="tb-legend-keys" ng-class="{ 'tb-row-direction': !displayHeader() }" ng-if="isRowDirection">
<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-label"
ng-click="toggleHideData(legendKey.dataIndex)"
@ -52,19 +53,31 @@
</tr>
<tr class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMin === true">
<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 class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showMax === true">
<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 class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showAvg === true">
<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 class="tb-legend-keys" ng-if="isRowDirection && legendConfig.showTotal === true">
<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>
</tbody>
</table>

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

@ -139,12 +139,7 @@ export default class TbFlot {
return seriesHover.index === seriesIndex;
});
if (found && found.length) {
let timestamp;
if (!angular.isNumber(hoverInfo[0].time) || (found[0].time < hoverInfo[0].time)) {
timestamp = parseInt(hoverInfo[1].time);
} else {
timestamp = parseInt(hoverInfo[0].time);
}
let timestamp = parseInt(found[0].time);
let date = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
let dateDiv = $('<div>' + date + '</div>');
dateDiv.css({
@ -1213,7 +1208,35 @@ export default class TbFlot {
}
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) {
@ -1228,6 +1251,21 @@ export default class TbFlot {
"type": "boolean",
"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": {
"title": "Show lines",
"type": "boolean",
@ -1316,6 +1354,9 @@ export default class TbFlot {
"required": ["showLines", "fillLines", "showPoints"]
},
"form": [
"hideDataByDefault",
"disableDataHiding",
"removeFromLegend",
"excludeFromStacking",
"showLines",
"fillLines",

Loading…
Cancel
Save