Browse Source

Propagate UI changes

pull/2471/head
Igor Kulikov 7 years ago
parent
commit
19dac7d5aa
  1. 4
      ui-ngx/src/app/core/api/widget-subscription.ts
  2. 2
      ui-ngx/src/app/modules/home/components/widget/legend.component.html
  3. 13
      ui-ngx/src/app/modules/home/components/widget/legend.component.ts
  4. 51
      ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
  5. 12
      ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
  6. 1
      ui-ngx/src/app/shared/models/widget.models.ts

4
ui-ngx/src/app/core/api/widget-subscription.ts

@ -352,6 +352,7 @@ export class WidgetSubscription implements IWidgetSubscription {
initDataSubscriptionSubject.complete(); initDataSubscriptionSubject.complete();
}, },
(err) => { (err) => {
this.notifyDataLoaded();
initDataSubscriptionSubject.error(err); initDataSubscriptionSubject.error(err);
} }
); );
@ -368,7 +369,8 @@ export class WidgetSubscription implements IWidgetSubscription {
const additionalDataKeys: DataKey[] = []; const additionalDataKeys: DataKey[] = [];
let datasourceAdditionalKeysNumber = 0; let datasourceAdditionalKeysNumber = 0;
datasource.dataKeys.forEach((dataKey) => { datasource.dataKeys.forEach((dataKey) => {
dataKey.hidden = false; dataKey.hidden = dataKey.settings.hideDataByDefault ? true : false;
dataKey.inLegend = dataKey.settings.removeFromLegend ? false : true;
dataKey.pattern = dataKey.label; dataKey.pattern = dataKey.label;
if (this.comparisonEnabled && dataKey.settings.comparisonSettings && dataKey.settings.comparisonSettings.showValuesForComparison) { if (this.comparisonEnabled && dataKey.settings.comparisonSettings && dataKey.settings.comparisonSettings.showValuesForComparison) {
datasourceAdditionalKeysNumber++; datasourceAdditionalKeysNumber++;

2
ui-ngx/src/app/modules/home/components/widget/legend.component.html

@ -26,7 +26,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tb-legend-keys" *ngFor="let legendKey of legendData.keys" [ngClass]="{ 'tb-row-direction': isRowDirection }"> <tr class="tb-legend-keys" *ngFor="let legendKey of legendKeys()" [ngClass]="{ 'tb-row-direction': isRowDirection }">
<td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td> <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
<td class="tb-legend-label" <td class="tb-legend-label"
(click)="toggleHideData(legendKey.dataIndex)" (click)="toggleHideData(legendKey.dataIndex)"

13
ui-ngx/src/app/modules/home/components/widget/legend.component.ts

@ -15,7 +15,7 @@
/// ///
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { LegendConfig, LegendData, LegendDirection, LegendPosition } from '@shared/models/widget.models'; import { LegendConfig, LegendData, LegendDirection, LegendKey, LegendPosition } from '@shared/models/widget.models';
@Component({ @Component({
selector: 'tb-legend', selector: 'tb-legend',
@ -52,8 +52,15 @@ export class LegendComponent implements OnInit {
} }
toggleHideData(index: number) { toggleHideData(index: number) {
this.legendData.keys[index].dataKey.hidden = !this.legendData.keys[index].dataKey.hidden; if (!this.legendData.keys[index].dataKey.settings.disableDataHiding) {
this.legendKeyHiddenChange.emit(index); this.legendData.keys[index].dataKey.hidden = !this.legendData.keys[index].dataKey.hidden;
this.legendKeyHiddenChange.emit(index);
}
}
legendKeys(): LegendKey[] {
return this.legendData.keys
.filter(legendKey => this.legendData.keys[legendKey.dataIndex].dataKey.inLegend);
} }
} }

51
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts

@ -160,6 +160,9 @@ export declare type TbFlotXAxisPosition = 'top' | 'bottom';
export interface TbFlotKeySettings { export interface TbFlotKeySettings {
excludeFromStacking: boolean; excludeFromStacking: boolean;
hideDataByDefault: boolean;
disableDataHiding: boolean;
removeFromLegend: boolean;
showLines: boolean; showLines: boolean;
fillLines: boolean; fillLines: boolean;
showPoints: boolean; showPoints: boolean;
@ -612,6 +615,36 @@ export const flotPieSettingsSchema: JsonSettingsSchema = {
] ]
}; };
export const flotPieDatakeySettingsSchema: JsonSettingsSchema = {
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'
]
};
export function flotDatakeySettingsSchema(defaultShowLines: boolean, chartType: ChartType): JsonSettingsSchema { export function flotDatakeySettingsSchema(defaultShowLines: boolean, chartType: ChartType): JsonSettingsSchema {
const schema: JsonSettingsSchema = { const schema: JsonSettingsSchema = {
schema: { schema: {
@ -623,6 +656,21 @@ export function flotDatakeySettingsSchema(defaultShowLines: boolean, chartType:
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',
@ -711,6 +759,9 @@ export function flotDatakeySettingsSchema(defaultShowLines: boolean, chartType:
required: ['showLines', 'fillLines', 'showPoints'] required: ['showLines', 'fillLines', 'showPoints']
}, },
form: [ form: [
'hideDataByDefault',
'disableDataHiding',
'removeFromLegend',
'excludeFromStacking', 'excludeFromStacking',
'showLines', 'showLines',
'fillLines', 'fillLines',

12
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@ -21,7 +21,7 @@ import { IWidgetSubscription } from '@core/api/widget-api.models';
import { DatasourceData, JsonSettingsSchema } from '@app/shared/models/widget.models'; import { DatasourceData, JsonSettingsSchema } from '@app/shared/models/widget.models';
import { import {
ChartType, ChartType,
flotDatakeySettingsSchema, flotDatakeySettingsSchema, flotPieDatakeySettingsSchema,
flotPieSettingsSchema, flotPieSettingsSchema,
flotSettingsSchema, flotSettingsSchema,
TbFlotAxisOptions, TbFlotAxisOptions,
@ -47,6 +47,7 @@ const tinycolor = tinycolor_;
const moment = moment_; const moment = moment_;
const flotPieSettingsSchemaValue = flotPieSettingsSchema; const flotPieSettingsSchemaValue = flotPieSettingsSchema;
const flotPieDatakeySettingsSchemaValue = flotPieDatakeySettingsSchema;
export class TbFlot { export class TbFlot {
@ -103,7 +104,7 @@ export class TbFlot {
} }
static pieDatakeySettingsSchema(): JsonSettingsSchema { static pieDatakeySettingsSchema(): JsonSettingsSchema {
return {}; return flotPieDatakeySettingsSchemaValue;
} }
static settingsSchema(chartType: ChartType): JsonSettingsSchema { static settingsSchema(chartType: ChartType): JsonSettingsSchema {
@ -814,12 +815,7 @@ export class TbFlot {
return seriesHover.index === seriesIndex; return seriesHover.index === seriesIndex;
}); });
if (found && found.length) { if (found && found.length) {
let timestamp: number; const timestamp = parseInt(found[0].time, 10);
if (!isNumber(hoverInfo[0].time) || (found[0].time < hoverInfo[0].time)) {
timestamp = parseInt(hoverInfo[1].time, 10);
} else {
timestamp = parseInt(hoverInfo[0].time, 10);
}
const date = moment(timestamp).format('YYYY-MM-DD HH:mm:ss'); const date = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
const dateDiv = $('<div>' + date + '</div>'); const dateDiv = $('<div>' + date + '</div>');
dateDiv.css({ dateDiv.css({

1
ui-ngx/src/app/shared/models/widget.models.ts

@ -231,6 +231,7 @@ export interface DataKey extends KeyInfo {
settings?: any; settings?: any;
usePostProcessing?: boolean; usePostProcessing?: boolean;
hidden?: boolean; hidden?: boolean;
inLegend?: boolean;
_hash?: number; _hash?: number;
} }

Loading…
Cancel
Save