tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Range chart widget config improvements. Update range chart basic config.

pull/10473/head
Igor Kulikov 2 years ago
parent
604a35b267
commit
c8b2a2a6cd
5 changed files with 400 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 153
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
  2. 153
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
  3. 109
      ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
  4. 44
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
  5. 3
      ui-ngx/src/assets/locale/locale.constant-en_US.json

153
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
View File

@ -75,6 +75,21 @@
{{ 'widgets.range-chart.data-zoom' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.range-chart.range-chart-appearance</div>
<div class="tb-form-row space-between">
<div translate>widget-config.units-short</div>
<tb-unit-input
formControlName="units">
</tb-unit-input>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.decimals-short</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.range-chart.range-colors' | translate }}</div>
<tb-color-range-settings formControlName="rangeColors">
@ -87,24 +102,139 @@
formControlName="outOfRangeColor">
</tb-color-input>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="showRangeThresholds">
{{ 'widgets.range-chart.show-range-thresholds' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="fillArea">
{{ 'widgets.range-chart.fill-area' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.units-short</div>
<tb-unit-input
formControlName="units">
</tb-unit-input>
</div>
<div class="tb-form-row space-between">
<div translate>widget-config.decimals-short</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div class="tb-form-row space-between column-xs">
<div translate>widgets.range-chart.fill-area-opacity</div>
<mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
<input matInput type="number" formControlName="fillAreaOpacity" min="0" max="100"
step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
</mat-form-field>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>widgets.time-series-chart.series.line.line</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="showLine">
{{ 'widgets.time-series-chart.series.line.show-line' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between column-xs">
<mat-slide-toggle class="mat-slide" formControlName="step">
{{ 'widgets.time-series-chart.series.line.step-line' | translate }}
</mat-slide-toggle>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="stepType">
<mat-option *ngFor="let stepType of lineSeriesStepTypes" [value]="stepType">
{{ lineSeriesStepTypeTranslations.get(stepType) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="smooth">
{{ 'widgets.time-series-chart.series.line.smooth-line' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.time-series-chart.line-type</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="lineType">
<mat-option *ngFor="let lineType of timeSeriesLineTypes" [value]="lineType">
{{ timeSeriesLineTypeTranslations.get(lineType) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.time-series-chart.line-width</div>
<mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
<input matInput type="number" formControlName="lineWidth" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
</mat-form-field>
</div>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>widgets.time-series-chart.series.point.points</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="showPoints">
{{ 'widgets.time-series-chart.series.point.show-points' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between column-lt-md">
<mat-slide-toggle class="mat-slide" formControlName="showPointLabel">
<div tb-hint-tooltip-icon="{{'widgets.time-series-chart.series.point.point-label-hint' | translate}}">
{{ 'widgets.time-series-chart.series.point.point-label' | translate }}
</div>
</mat-slide-toggle>
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="pointLabelPosition">
<mat-option *ngFor="let position of seriesLabelPositions" [value]="position">
{{ seriesLabelPositionTranslations.get(position) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<tb-font-settings formControlName="pointLabelFont"
clearButton
disabledLineHeight
forceSizeUnit="px"
[previewText]="pointLabelPreviewFn">
</tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="pointLabelColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.time-series-chart.series.point.point-shape</div>
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="pointShape">
<mat-option *ngFor="let shape of timeSeriesChartShapes" [value]="shape">
{{ timeSeriesChartShapeTranslations.get(shape) | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.time-series-chart.series.point.point-size</div>
<mat-form-field class="medium-width number" appearance="outline" subscriptSizing="dynamic">
<input matInput type="number" formControlName="pointSize" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"/>
</mat-form-field>
</div>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.y-axis</div>
<tb-time-series-chart-axis-settings
formControlName="yAxis"
axisType="yAxis"
hideUnits
hideDecimals>
</tb-time-series-chart-axis-settings>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.time-series-chart.axis.x-axis</div>
<tb-time-series-chart-axis-settings
formControlName="xAxis"
axisType="xAxis">
</tb-time-series-chart-axis-settings>
</div>
<tb-time-series-chart-thresholds-panel
formControlName="thresholds"
[aliasController]="aliasController"
[dataKeyCallbacks]="callbacks"
[datasource]="datasource"
[widgetConfig]="widgetConfig?.config"
hideYAxis>
</tb-time-series-chart-thresholds-panel>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="rangeChartWidgetConfigForm.get('showLegend').value" [disabled]="!rangeChartWidgetConfigForm.get('showLegend').value">
<mat-expansion-panel-header fxLayout="row wrap">
@ -204,6 +334,9 @@
</ng-template>
</mat-expansion-panel>
</div>
<tb-time-series-chart-animation-settings
formControlName="animation">
</tb-time-series-chart-animation-settings>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
<div class="tb-form-row space-between">

153
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
View File

@ -14,13 +14,19 @@
/// limitations under the License.
///
import { ChangeDetectorRef, Component, Injector } from '@angular/core';
import { Component, Injector } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
import { WidgetConfigComponentData } from '@home/models/widget-component.models';
import { DataKey, legendPositions, legendPositionTranslationMap, WidgetConfig, } from '@shared/models/widget.models';
import {
DataKey,
Datasource,
legendPositions,
legendPositionTranslationMap,
WidgetConfig,
} from '@shared/models/widget.models';
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import {
@ -38,6 +44,16 @@ import {
rangeChartDefaultSettings,
RangeChartWidgetSettings
} from '@home/components/widget/lib/chart/range-chart-widget.models';
import {
lineSeriesStepTypes,
lineSeriesStepTypeTranslations,
seriesLabelPositions,
seriesLabelPositionTranslations,
timeSeriesChartShapes,
timeSeriesChartShapeTranslations,
timeSeriesLineTypes,
timeSeriesLineTypeTranslations
} from '@home/components/widget/lib/chart/time-series-chart.models';
@Component({
selector: 'tb-range-chart-basic-config',
@ -46,12 +62,39 @@ import {
})
export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
public get datasource(): Datasource {
const datasources: Datasource[] = this.rangeChartWidgetConfigForm.get('datasources').value;
if (datasources && datasources.length) {
return datasources[0];
} else {
return null;
}
}
lineSeriesStepTypes = lineSeriesStepTypes;
lineSeriesStepTypeTranslations = lineSeriesStepTypeTranslations;
timeSeriesLineTypes = timeSeriesLineTypes;
timeSeriesLineTypeTranslations = timeSeriesLineTypeTranslations;
seriesLabelPositions = seriesLabelPositions;
seriesLabelPositionTranslations = seriesLabelPositionTranslations;
timeSeriesChartShapes = timeSeriesChartShapes;
timeSeriesChartShapeTranslations = timeSeriesChartShapeTranslations;
legendPositions = legendPositions;
legendPositionTranslationMap = legendPositionTranslationMap;
rangeChartWidgetConfigForm: UntypedFormGroup;
pointLabelPreviewFn = this._pointLabelPreviewFn.bind(this);
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this);
tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
@ -90,11 +133,36 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
iconColor: [configData.config.iconColor, []],
dataZoom: [settings.dataZoom, []],
units: [configData.config.units, []],
decimals: [configData.config.decimals, []],
rangeColors: [settings.rangeColors, []],
outOfRangeColor: [settings.outOfRangeColor, []],
showRangeThresholds: [settings.showRangeThresholds, []],
fillArea: [settings.fillArea, []],
units: [configData.config.units, []],
decimals: [configData.config.decimals, []],
fillAreaOpacity: [settings.fillAreaOpacity, [Validators.min(0), Validators.max(100)]],
showLine: [settings.showLine, []],
step: [settings.step, []],
stepType: [settings.stepType, []],
smooth: [settings.smooth, []],
lineType: [settings.lineType, []],
lineWidth: [settings.lineWidth, [Validators.min(0)]],
showPoints: [settings.showPoints, []],
showPointLabel: [settings.showPointLabel, []],
pointLabelPosition: [settings.pointLabelPosition, []],
pointLabelFont: [settings.pointLabelFont, []],
pointLabelColor: [settings.pointLabelColor, []],
pointShape: [settings.pointShape, []],
pointSize: [settings.pointSize, [Validators.min(0)]],
yAxis: [settings.yAxis, []],
xAxis: [settings.xAxis, []],
thresholds: [settings.thresholds, []],
animation: [settings.animation, []],
showLegend: [settings.showLegend, []],
legendPosition: [settings.legendPosition, []],
@ -139,12 +207,39 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
this.widgetConfig.config.settings.dataZoom = config.dataZoom;
this.widgetConfig.config.units = config.units;
this.widgetConfig.config.decimals = config.decimals;
this.widgetConfig.config.settings.rangeColors = config.rangeColors;
this.widgetConfig.config.settings.outOfRangeColor = config.outOfRangeColor;
this.widgetConfig.config.settings.showRangeThresholds = config.showRangeThresholds;
this.widgetConfig.config.settings.fillArea = config.fillArea;
this.widgetConfig.config.units = config.units;
this.widgetConfig.config.decimals = config.decimals;
this.widgetConfig.config.settings.fillAreaOpacity = config.fillAreaOpacity;
this.widgetConfig.config.settings.showLine = config.showLine;
this.widgetConfig.config.settings.step = config.step;
this.widgetConfig.config.settings.stepType = config.stepType;
this.widgetConfig.config.settings.smooth = config.smooth;
this.widgetConfig.config.settings.lineType = config.lineType;
this.widgetConfig.config.settings.lineWidth = config.lineWidth;
this.widgetConfig.config.settings.showPoints = config.showPoints;
this.widgetConfig.config.settings.showPointLabel = config.showPointLabel;
this.widgetConfig.config.settings.pointLabelPosition = config.pointLabelPosition;
this.widgetConfig.config.settings.pointLabelFont = config.pointLabelFont;
this.widgetConfig.config.settings.pointLabelColor = config.pointLabelColor;
this.widgetConfig.config.settings.pointShape = config.pointShape;
this.widgetConfig.config.settings.pointSize = config.pointSize;
this.widgetConfig.config.settings.yAxis = config.yAxis;
this.widgetConfig.config.settings.xAxis = config.xAxis;
this.widgetConfig.config.settings.thresholds = config.thresholds;
this.widgetConfig.config.settings.animation = config.animation;
this.widgetConfig.config.settings.showLegend = config.showLegend;
this.widgetConfig.config.settings.legendPosition = config.legendPosition;
@ -173,12 +268,16 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
}
protected validatorTriggers(): string[] {
return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate'];
return ['showTitle', 'showIcon', 'fillArea', 'showLine', 'step', 'showPointLabel', 'showLegend', 'showTooltip', 'tooltipShowDate'];
}
protected updateValidators(emitEvent: boolean, trigger?: string) {
const showTitle: boolean = this.rangeChartWidgetConfigForm.get('showTitle').value;
const showIcon: boolean = this.rangeChartWidgetConfigForm.get('showIcon').value;
const fillArea: boolean = this.rangeChartWidgetConfigForm.get('fillArea').value;
const showLine: boolean = this.rangeChartWidgetConfigForm.get('showLine').value;
const step: boolean = this.rangeChartWidgetConfigForm.get('step').value;
const showPointLabel: boolean = this.rangeChartWidgetConfigForm.get('showPointLabel').value;
const showLegend: boolean = this.rangeChartWidgetConfigForm.get('showLegend').value;
const showTooltip: boolean = this.rangeChartWidgetConfigForm.get('showTooltip').value;
const tooltipShowDate: boolean = this.rangeChartWidgetConfigForm.get('tooltipShowDate').value;
@ -210,6 +309,40 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
this.rangeChartWidgetConfigForm.get('iconColor').disable();
}
if (fillArea) {
this.rangeChartWidgetConfigForm.get('fillAreaOpacity').enable();
} else {
this.rangeChartWidgetConfigForm.get('fillAreaOpacity').disable();
}
if (showLine) {
this.rangeChartWidgetConfigForm.get('step').enable({emitEvent: false});
if (step) {
this.rangeChartWidgetConfigForm.get('stepType').enable();
this.rangeChartWidgetConfigForm.get('smooth').disable();
} else {
this.rangeChartWidgetConfigForm.get('stepType').disable();
this.rangeChartWidgetConfigForm.get('smooth').enable();
}
this.rangeChartWidgetConfigForm.get('lineType').enable();
this.rangeChartWidgetConfigForm.get('lineWidth').enable();
} else {
this.rangeChartWidgetConfigForm.get('step').disable({emitEvent: false});
this.rangeChartWidgetConfigForm.get('stepType').disable();
this.rangeChartWidgetConfigForm.get('smooth').disable();
this.rangeChartWidgetConfigForm.get('lineType').disable();
this.rangeChartWidgetConfigForm.get('lineWidth').disable();
}
if (showPointLabel) {
this.rangeChartWidgetConfigForm.get('pointLabelPosition').enable();
this.rangeChartWidgetConfigForm.get('pointLabelFont').enable();
this.rangeChartWidgetConfigForm.get('pointLabelColor').enable();
} else {
this.rangeChartWidgetConfigForm.get('pointLabelPosition').disable();
this.rangeChartWidgetConfigForm.get('pointLabelFont').disable();
this.rangeChartWidgetConfigForm.get('pointLabelColor').disable();
}
if (showLegend) {
this.rangeChartWidgetConfigForm.get('legendPosition').enable();
this.rangeChartWidgetConfigForm.get('legendLabelFont').enable();
@ -262,6 +395,12 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
config.enableFullscreen = buttons.includes('fullscreen');
}
private _pointLabelPreviewFn(): string {
const units: string = this.rangeChartWidgetConfigForm.get('units').value;
const decimals: number = this.rangeChartWidgetConfigForm.get('decimals').value;
return formatValue(22, decimals, units, false);
}
private _tooltipValuePreviewFn(): string {
const units: string = this.rangeChartWidgetConfigForm.get('units').value;
const decimals: number = this.rangeChartWidgetConfigForm.get('decimals').value;

109
ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
View File

@ -27,16 +27,25 @@ import { LegendPosition } from '@shared/models/widget.models';
import { EChartsTooltipWidgetSettings } from '@home/components/widget/lib/chart/echarts-widget.models';
import {
createTimeSeriesChartVisualMapPiece,
defaultTimeSeriesChartXAxisSettings,
defaultTimeSeriesChartYAxisSettings,
LineSeriesStepType,
SeriesFillType,
SeriesLabelPosition, timeSeriesChartAnimationDefaultSettings,
TimeSeriesChartAnimationSettings,
timeSeriesChartColorScheme,
TimeSeriesChartKeySettings,
TimeSeriesChartLineType,
TimeSeriesChartSeriesType,
TimeSeriesChartSettings,
TimeSeriesChartShape,
TimeSeriesChartThreshold,
TimeSeriesChartThresholdType,
TimeSeriesChartVisualMapPiece
TimeSeriesChartVisualMapPiece,
TimeSeriesChartXAxisSettings,
TimeSeriesChartYAxisSettings
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { isNumber } from '@core/utils';
import { isNumber, mergeDeep } from '@core/utils';
import { DeepPartial } from '@shared/models/common';
export interface RangeItem {
@ -54,7 +63,26 @@ export interface RangeChartWidgetSettings extends EChartsTooltipWidgetSettings {
dataZoom: boolean;
rangeColors: Array<ColorRange>;
outOfRangeColor: string;
showRangeThresholds: boolean;
fillArea: boolean;
fillAreaOpacity: number;
showLine: boolean;
step: boolean;
stepType: LineSeriesStepType;
smooth: boolean;
lineType: TimeSeriesChartLineType;
lineWidth: number;
showPoints: boolean;
showPointLabel: boolean;
pointLabelPosition: SeriesLabelPosition;
pointLabelFont: Font;
pointLabelColor: string;
pointShape: TimeSeriesChartShape;
pointSize: number;
yAxis: TimeSeriesChartYAxisSettings;
xAxis: TimeSeriesChartXAxisSettings;
animation: TimeSeriesChartAnimationSettings;
thresholds: TimeSeriesChartThreshold[];
showLegend: boolean;
legendPosition: LegendPosition;
legendLabelFont: Font;
@ -75,7 +103,38 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
{from: 40, color: '#D81838'}
],
outOfRangeColor: '#ccc',
showRangeThresholds: true,
fillArea: true,
fillAreaOpacity: 0.7,
showLine: true,
step: false,
stepType: LineSeriesStepType.start,
smooth: false,
lineType: TimeSeriesChartLineType.solid,
lineWidth: 2,
showPoints: false,
showPointLabel: false,
pointLabelPosition: SeriesLabelPosition.top,
pointLabelFont: {
family: 'Roboto',
size: 11,
sizeUnit: 'px',
style: 'normal',
weight: '400',
lineHeight: '1'
},
pointLabelColor: timeSeriesChartColorScheme['series.label'].light,
pointShape: TimeSeriesChartShape.emptyCircle,
pointSize: 4,
yAxis: mergeDeep({} as TimeSeriesChartYAxisSettings,
defaultTimeSeriesChartYAxisSettings,
{ id: 'default', order: 0, showLine: false, showTicks: false } as TimeSeriesChartYAxisSettings),
xAxis: mergeDeep({} as TimeSeriesChartXAxisSettings,
defaultTimeSeriesChartXAxisSettings,
{showSplitLines: false} as TimeSeriesChartXAxisSettings),
animation: mergeDeep({} as TimeSeriesChartAnimationSettings,
timeSeriesChartAnimationDefaultSettings),
thresholds: [],
showLegend: true,
legendPosition: LegendPosition.top,
legendLabelFont: {
@ -125,7 +184,7 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings, rangeItems: RangeItem[],
decimals: number, units: string): DeepPartial<TimeSeriesChartSettings> => {
const thresholds: DeepPartial<TimeSeriesChartThreshold>[] = getMarkPoints(rangeItems).map(item => ({
let thresholds: DeepPartial<TimeSeriesChartThreshold>[] = settings.showRangeThresholds ? getMarkPoints(rangeItems).map(item => ({
type: TimeSeriesChartThresholdType.constant,
yAxisId: 'default',
units,
@ -146,28 +205,24 @@ export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings,
borderRadius: 4,
},
value: item
} as DeepPartial<TimeSeriesChartThreshold>));
} as DeepPartial<TimeSeriesChartThreshold>)) : [];
if (settings.thresholds?.length) {
thresholds = thresholds.concat(settings.thresholds);
}
return {
dataZoom: settings.dataZoom,
thresholds,
yAxes: {
default: {
show: true,
showLine: false,
showTicks: false,
showTickLabels: true,
showSplitLines: true,
decimals,
units
...settings.yAxis,
...{
decimals,
units
}
}
},
xAxis: {
show: true,
showLine: true,
showTicks: true,
showTickLabels: true,
showSplitLines: false
},
xAxis: settings.xAxis,
animation: settings.animation,
visualMapSettings: {
outOfRangeColor: settings.outOfRangeColor,
pieces: rangeItems.map(item => item.piece)
@ -188,12 +243,22 @@ export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings,
export const rangeChartTimeSeriesKeySettings = (settings: RangeChartWidgetSettings): DeepPartial<TimeSeriesChartKeySettings> => ({
type: TimeSeriesChartSeriesType.line,
lineSettings: {
showLine: true,
smooth: false,
showPoints: false,
showLine: settings.showLine,
step: settings.step,
stepType: settings.stepType,
smooth: settings.smooth,
lineType: settings.lineType,
lineWidth: settings.lineWidth,
showPoints: settings.showPoints,
showPointLabel: settings.showPointLabel,
pointLabelPosition: settings.pointLabelPosition,
pointLabelFont: settings.pointLabelFont,
pointLabelColor: settings.pointLabelColor,
pointShape: settings.pointShape,
pointSize: settings.pointSize,
fillAreaSettings: {
type: settings.fillArea ? SeriesFillType.opacity : SeriesFillType.none,
opacity: 0.7
opacity: settings.fillAreaOpacity
}
}
});

44
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
View File

@ -81,7 +81,7 @@ export const timeSeriesChartTypeTranslations = new Map<TimeSeriesChartType, stri
]
);
const timeSeriesChartColorScheme: TbColorScheme = {
export const timeSeriesChartColorScheme: TbColorScheme = {
'threshold.line': {
light: 'rgba(0, 0, 0, 0.76)',
dark: '#eee'
@ -1365,28 +1365,26 @@ const createSeriesLabelOption = (item: TimeSeriesChartDataItem, show: boolean,
labelStyle = createChartTextStyle(labelFont, labelColor, darkMode, 'series.label');
}
let formatter: LabelFormatterCallback;
if (labelFormatter) {
if (isFunction(labelFormatter)) {
formatter = labelFormatter as LabelFormatterCallback;
} else if (labelFormatter.length) {
const formatFunction = parseFunction(labelFormatter, ['value']);
formatter = (params): string => {
let result: string;
try {
result = formatFunction(params.value[1]);
} catch (_e) {
}
if (isUndefined(result)) {
result = formatValue(params.value[1], item.decimals, item.units, false);
}
return `{value|${result}}`;
};
} else {
formatter = (params): string => {
const value = formatValue(params.value[1], item.decimals, item.units, false);
return `{value|${value}}`;
};
}
if (isFunction(labelFormatter)) {
formatter = labelFormatter as LabelFormatterCallback;
} else if (labelFormatter?.length) {
const formatFunction = parseFunction(labelFormatter, ['value']);
formatter = (params): string => {
let result: string;
try {
result = formatFunction(params.value[1]);
} catch (_e) {
}
if (isUndefined(result)) {
result = formatValue(params.value[1], item.decimals, item.units, false);
}
return `{value|${result}}`;
};
} else {
formatter = (params): string => {
const value = formatValue(params.value[1], item.decimals, item.units, false);
return `{value|${value}}`;
};
}
return {
show,

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -6172,9 +6172,12 @@
"range-chart": {
"chart": "Chart",
"data-zoom": "Data zoom",
"range-chart-appearance": "Range chart appearance",
"range-colors": "Range colors",
"out-of-range-color": "Out of range color",
"show-range-thresholds": "Show range thresholds",
"fill-area": "Fill area",
"fill-area-opacity": "Fill area opacity",
"range-chart-card-style": "Range chart card style"
},
"rpc": {

Write Preview
Loading…
Cancel
Save