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

UI: Improve time series charts ticks generation.

pull/10369/head
Igor Kulikov 3 years ago
parent
15a88a90a3
commit
c4bc1ba6bb
4 changed files with 196 additions and 93 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. 141
      ui-ngx/patches/echarts+5.5.0.patch
  2. 7
      ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
  3. 112
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
  4. 29
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts

141
ui-ngx/patches/echarts+5.5.0.patch
View File

@ -207,3 +207,144 @@ index b8a9b95..8e4cb2f 100644
return;
}
var axisValueLabel = axisPointerViewHelper.getValueLabel(axisValue, axisModel.axis, ecModel, axisItem.seriesDataIndices, axisItem.valueLabelOpt);
diff --git a/node_modules/echarts/lib/coord/axisHelper.js b/node_modules/echarts/lib/coord/axisHelper.js
index a76c66b..be22cb0 100644
--- a/node_modules/echarts/lib/coord/axisHelper.js
+++ b/node_modules/echarts/lib/coord/axisHelper.js
@@ -187,7 +187,9 @@ export function createScaleByModel(model, axisType) {
});
default:
// case 'value'/'interval', 'log', or others.
- return new (Scale.getClass(axisType) || IntervalScale)();
+ return new (Scale.getClass(axisType) || IntervalScale)({
+ ticksGenerator: model.get('ticksGenerator')
+ });
}
}
}
diff --git a/node_modules/echarts/lib/coord/cartesian/Grid.js b/node_modules/echarts/lib/coord/cartesian/Grid.js
index 5b18f02..4960e67 100644
--- a/node_modules/echarts/lib/coord/cartesian/Grid.js
+++ b/node_modules/echarts/lib/coord/cartesian/Grid.js
@@ -91,11 +91,11 @@ var Grid = /** @class */function () {
var scale = axis.scale;
if (
// Only value and log axis without interval support alignTicks.
- isIntervalOrLogScale(scale) && model.get('alignTicks') && model.get('interval') == null) {
+ isIntervalOrLogScale(scale) && model.get('alignTicks') && model.get('interval') == null && model.get('ticksGenerator') == null) {
axisNeedsAlign.push(axis);
} else {
niceScaleExtent(scale, model);
- if (isIntervalOrLogScale(scale)) {
+ if (isIntervalOrLogScale(scale) && !scale.isBlank()) {
// Can only align to interval or log axis.
alignTo = axis;
}
@@ -105,10 +105,15 @@ var Grid = /** @class */function () {
// All axes has set alignTicks. Pick the first one.
// PENDING. Should we find the axis that both set interval, min, max and align to this one?
if (axisNeedsAlign.length) {
- if (!alignTo) {
- alignTo = axisNeedsAlign.pop();
- niceScaleExtent(alignTo.scale, alignTo.model);
+ while (!alignTo && axisNeedsAlign.length) {
+ var axis = axisNeedsAlign.pop();
+ niceScaleExtent(axis.scale, axis.model);
+ if (!axis.scale.isBlank()) {
+ alignTo = axis;
+ }
}
+ }
+ if (axisNeedsAlign.length && alignTo) {
each(axisNeedsAlign, function (axis) {
alignScaleTicks(axis.scale, axis.model, alignTo.scale);
});
diff --git a/node_modules/echarts/lib/scale/Interval.js b/node_modules/echarts/lib/scale/Interval.js
index 1094662..8f4e07a 100644
--- a/node_modules/echarts/lib/scale/Interval.js
+++ b/node_modules/echarts/lib/scale/Interval.js
@@ -46,12 +46,17 @@ import * as numberUtil from '../util/number.js';
import * as formatUtil from '../util/format.js';
import Scale from './Scale.js';
import * as helper from './helper.js';
+import { isFunction } from 'zrender/lib/core/util.js';
var roundNumber = numberUtil.round;
var IntervalScale = /** @class */function (_super) {
__extends(IntervalScale, _super);
- function IntervalScale() {
- var _this = _super !== null && _super.apply(this, arguments) || this;
+ function IntervalScale(setting) {
+ var _this = _super.call(this, setting) || this;
_this.type = 'interval';
+ var ticksGenerator = _this.getSetting('ticksGenerator');
+ if (isFunction(ticksGenerator)) {
+ _this._ticksGenerator = ticksGenerator;
+ }
// Step is calculated in adjustExtent.
_this._interval = 0;
_this._intervalPrecision = 2;
@@ -104,7 +109,17 @@ var IntervalScale = /** @class */function (_super) {
var extent = this._extent;
var niceTickExtent = this._niceExtent;
var intervalPrecision = this._intervalPrecision;
- var ticks = [];
+ var ticksGenerator = this._ticksGenerator;
+ var ticks;
+ if (ticksGenerator) {
+ try {
+ ticks = ticksGenerator(extent, interval, niceTickExtent, intervalPrecision);
+ if (ticks) {
+ return ticks;
+ }
+ } catch (_e) {}
+ }
+ ticks = [];
// If interval is 0, return [];
if (!interval) {
return ticks;
diff --git a/node_modules/echarts/types/dist/shared.d.ts b/node_modules/echarts/types/dist/shared.d.ts
index ca74097..98f8b18 100644
--- a/node_modules/echarts/types/dist/shared.d.ts
+++ b/node_modules/echarts/types/dist/shared.d.ts
@@ -2422,6 +2422,9 @@ interface AxisBaseOptionCommon extends ComponentOption, AnimationOptionMixin {
max: number;
}) => ScaleDataValue);
}
+
+declare type NumericAxisTicksGenerator = (extent?: number[], interval?: number, niceTickExtent?: number[], intervalPrecision?: number) => {value: number}[];
+
interface NumericAxisBaseOptionCommon extends AxisBaseOptionCommon {
boundaryGap?: [number | string, number | string];
/**
@@ -2447,6 +2450,8 @@ interface NumericAxisBaseOptionCommon extends AxisBaseOptionCommon {
* Will be ignored if interval is set.
*/
alignTicks?: boolean;
+
+ ticksGenerator?: NumericAxisTicksGenerator;
}
interface CategoryAxisBaseOption extends AxisBaseOptionCommon {
type?: 'category';
diff --git a/node_modules/echarts/types/src/coord/axisCommonTypes.d.ts b/node_modules/echarts/types/src/coord/axisCommonTypes.d.ts
index c5c2792..d524b70 100644
--- a/node_modules/echarts/types/src/coord/axisCommonTypes.d.ts
+++ b/node_modules/echarts/types/src/coord/axisCommonTypes.d.ts
@@ -56,6 +56,9 @@ export interface AxisBaseOptionCommon extends ComponentOption, AnimationOptionMi
max: number;
}) => ScaleDataValue);
}
+
+export declare type NumericAxisTicksGenerator = (extent?: number[], interval?: number, niceTickExtent?: number[], intervalPrecision?: number) => {value: number}[];
+
export interface NumericAxisBaseOptionCommon extends AxisBaseOptionCommon {
boundaryGap?: [number | string, number | string];
/**
@@ -81,6 +84,8 @@ export interface NumericAxisBaseOptionCommon extends AxisBaseOptionCommon {
* Will be ignored if interval is set.
*/
alignTicks?: boolean;
+
+ ticksGenerator?: NumericAxisTicksGenerator;
}
export interface CategoryAxisBaseOption extends AxisBaseOptionCommon {
type?: 'category';

7
ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
View File

@ -44,7 +44,6 @@ import {
getDataKey,
getLatestSingleTsValue,
overlayStyle,
simpleDateFormat,
textStyle
} from '@shared/models/widget-settings.models';
import { DataKey } from '@shared/models/widget.models';
@ -55,10 +54,9 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
import { DomSanitizer } from '@angular/platform-browser';
import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
import {
TimeSeriesChartAxisSettings,
TimeSeriesChartKeySettings,
TimeSeriesChartSeriesType,
TimeSeriesChartSettings, TimeSeriesChartYAxisSettings
TimeSeriesChartSettings
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { DeepPartial } from '@shared/models/common';
@ -189,8 +187,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
showSplitLines: true,
min: 'dataMin',
max: 'dataMax',
intervalCalculator:
'var scale = axis.scale; return !scale.isBlank() ? ((scale.getExtent()[1] - scale.getExtent()[0]) / 2) : undefined;'
ticksGenerator: (extent?: number[]) => (extent ? [{ value: (extent[0] + extent[1]) / 2}] : [])
}
},
tooltipDateInterval: false,

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

@ -19,21 +19,23 @@ import {
EChartsOption,
EChartsSeriesItem,
EChartsTooltipTrigger,
EChartsTooltipWidgetSettings, getYAxis,
EChartsTooltipWidgetSettings,
measureThresholdLabelOffset
} from '@home/components/widget/lib/chart/echarts-widget.models';
import {
autoDateFormat, AutoDateFormatSettings,
autoDateFormat,
AutoDateFormatSettings,
ComponentStyle,
Font,
simpleDateFormat,
textStyle, tsToFormatTimeUnit
textStyle,
tsToFormatTimeUnit
} from '@shared/models/widget-settings.models';
import { XAXisOption, YAXisOption } from 'echarts/types/dist/shared';
import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts';
import {
formatValue,
isDefinedAndNotNull,
isFunction,
isNumeric,
isUndefined,
isUndefinedOrNull,
@ -42,7 +44,6 @@ import {
} from '@core/utils';
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
import tinycolor from 'tinycolor2';
import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D';
import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes';
import { SeriesLabelOption } from 'echarts/types/src/util/types';
import {
@ -320,6 +321,12 @@ export const defaultXAxisTicksFormat: AutoDateFormatSettings = {
export type TimeSeriesChartYAxisId = 'default' | string;
export type TimeSeriesChartTicksGenerator =
(extent?: number[], interval?: number, niceTickExtent?: number[], intervalPrecision?: number) => {value: number}[];
export type TimeSeriesChartTicksFormatter =
(value: any) => string;
export interface TimeSeriesChartYAxisSettings extends TimeSeriesChartAxisSettings {
id?: TimeSeriesChartYAxisId;
order?: number;
@ -329,8 +336,8 @@ export interface TimeSeriesChartYAxisSettings extends TimeSeriesChartAxisSetting
splitNumber?: number;
min?: number | string;
max?: number | string;
intervalCalculator?: string;
ticksFormatter?: string;
ticksGenerator?: TimeSeriesChartTicksGenerator | string;
ticksFormatter?: TimeSeriesChartTicksFormatter | string;
}
export const timeSeriesChartYAxisValid = (axis: TimeSeriesChartYAxisSettings): boolean =>
@ -788,8 +795,6 @@ export interface TimeSeriesChartYAxis {
decimals: number;
settings: TimeSeriesChartYAxisSettings;
option: YAXisOption & ValueAxisBaseOption;
intervalCalculator?: (axis: Axis2D) => number;
ticksFormatter?: (value: any) => string;
}
export const createTimeSeriesYAxis = (units: string,
@ -800,11 +805,37 @@ export const createTimeSeriesYAxis = (units: string,
settings.tickLabelColor, darkMode, 'axis.tickLabel');
const yAxisNameStyle = createChartTextStyle(settings.labelFont,
settings.labelColor, darkMode, 'axis.label');
let ticksFormatter: (value: any) => string;
if (settings.ticksFormatter && settings.ticksFormatter.length) {
ticksFormatter = parseFunction(settings.ticksFormatter, ['value']);
let ticksFormatter: TimeSeriesChartTicksFormatter;
if (settings.ticksFormatter) {
if (isFunction(settings.ticksFormatter)) {
ticksFormatter = settings.ticksFormatter as TimeSeriesChartTicksFormatter;
} else if (settings.ticksFormatter.length) {
ticksFormatter = parseFunction(settings.ticksFormatter, ['value']);
}
}
let ticksGenerator: TimeSeriesChartTicksGenerator;
let minInterval: number;
let interval: number;
let splitNumber: number;
if (settings.ticksGenerator) {
if (isFunction(settings.ticksGenerator)) {
ticksGenerator = settings.ticksGenerator as TimeSeriesChartTicksGenerator;
} else if (settings.ticksGenerator.length) {
ticksGenerator = parseFunction(settings.ticksGenerator, ['extent', 'interval', 'niceTickExtent', 'intervalPrecision']);
}
}
const yAxis: TimeSeriesChartYAxis = {
if (!ticksGenerator) {
interval = settings.interval;
if (isUndefinedOrNull(interval)) {
if (isDefinedAndNotNull(settings.splitNumber)) {
splitNumber = settings.splitNumber;
} else {
minInterval = (1 / Math.pow(10, decimals));
}
}
}
return {
id: settings.id,
decimals,
settings,
@ -818,6 +849,10 @@ export const createTimeSeriesYAxis = (units: string,
scale: true,
min: settings.min,
max: settings.max,
minInterval,
splitNumber,
interval,
ticksGenerator,
name: settings.label,
nameLocation: 'middle',
nameRotate: settings.position === AxisPosition.left ? 90 : -90,
@ -853,7 +888,8 @@ export const createTimeSeriesYAxis = (units: string,
if (ticksFormatter) {
try {
result = ticksFormatter(value);
} catch (_e) {}
} catch (_e) {
}
}
if (isUndefined(result)) {
result = formatValue(value, decimals, units, false);
@ -869,54 +905,6 @@ export const createTimeSeriesYAxis = (units: string,
}
}
};
if (settings.intervalCalculator && settings.intervalCalculator.length) {
yAxis.intervalCalculator = parseFunction(settings.intervalCalculator, ['axis']);
}
return yAxis;
};
export const updateYAxisIntervals = (chart: ECharts,
yAxis: TimeSeriesChartYAxis, empty: boolean): boolean => {
let changed = false;
let interval: number;
let splitNumber: number;
let minInterval: number;
if (!empty) {
interval = calculateYAxisInterval(chart, yAxis);
if (isUndefinedOrNull(interval)) {
if (isDefinedAndNotNull(yAxis.settings.splitNumber)) {
splitNumber = yAxis.settings.splitNumber;
} else {
minInterval = (1 / Math.pow(10, yAxis.decimals));
}
}
}
if (yAxis.option.interval !== interval) {
yAxis.option.interval = interval;
changed = true;
}
if (yAxis.option.splitNumber !== splitNumber) {
yAxis.option.splitNumber = splitNumber;
changed = true;
}
if (yAxis.option.minInterval !== minInterval) {
yAxis.option.minInterval = minInterval;
changed = true;
}
return changed;
};
const calculateYAxisInterval = (chart: ECharts, yAxis: TimeSeriesChartYAxis): number | undefined => {
let interval = yAxis.settings.interval;
if (yAxis.intervalCalculator) {
const axis = getYAxis(chart, yAxis.id);
if (axis) {
try {
interval = yAxis.intervalCalculator(axis);
} catch (_e) {}
}
}
return interval;
};
export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartXAxisSettings,

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

@ -27,7 +27,8 @@ import {
TimeSeriesChartDataItem,
timeSeriesChartDefaultSettings,
timeSeriesChartKeyDefaultSettings,
TimeSeriesChartKeySettings, TimeSeriesChartNoAggregationBarWidthStrategy,
TimeSeriesChartKeySettings,
TimeSeriesChartNoAggregationBarWidthStrategy,
TimeSeriesChartSeriesType,
TimeSeriesChartSettings,
TimeSeriesChartShape,
@ -39,7 +40,7 @@ import {
TimeSeriesChartYAxis,
TimeSeriesChartYAxisId,
TimeSeriesChartYAxisSettings,
updateDarkMode, updateYAxisIntervals
updateDarkMode
} from '@home/components/widget/lib/chart/time-series-chart.models';
import { ResizeObserver } from '@juggle/resize-observer';
import {
@ -611,11 +612,6 @@ export class TbTimeSeriesChart {
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option);
this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis', 'xAxis', 'grid'], lazyUpdate: true});
}
changed = this.updateYAxesIntervals(this.yAxisList);
if (changed) {
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option);
this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis'], lazyUpdate: true});
}
if (this.yAxisList.length) {
const extent = getAxisExtent(this.timeSeriesChart, this.yAxisList[0].id);
const min = extent[0];
@ -680,9 +676,6 @@ export class TbTimeSeriesChart {
yAxis.option.scale = scaleYAxis;
changed = true;
}
if (updateYAxisIntervals(this.timeSeriesChart, yAxis, this.yAxisEmpty(yAxis))) {
changed = true;
}
}
return changed;
}
@ -693,22 +686,6 @@ export class TbTimeSeriesChart {
return !axisBarDataItems.length;
}
private yAxisEmpty(yAxis: TimeSeriesChartYAxis): boolean {
const axisDataItems = this.dataItems.filter(d => d.yAxisId === yAxis.id && d.enabled &&
d.data.length);
return !axisDataItems.length;
}
private updateYAxesIntervals(axisList: TimeSeriesChartYAxis[]): boolean {
let changed = false;
for (const yAxis of axisList) {
if (updateYAxisIntervals(this.timeSeriesChart, yAxis, this.yAxisEmpty(yAxis))) {
changed = true;
}
}
return changed;
}
private minTopOffset(): number {
const showTickLabels =
!!this.yAxisList.find(yAxis => yAxis.settings.show && yAxis.settings.showTickLabels);

Write Preview
Loading…
Cancel
Save