@flexem/fc-gui 3.0.0-alpha.98 → 3.0.0-alpha.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -1
- package/bundles/@flexem/fc-gui.umd.js +13 -11
- package/bundles/@flexem/fc-gui.umd.js.map +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
- package/elements/alarm/alarm-element.js +4 -6
- package/elements/historical-curve/historical-curve.element.js +9 -5
- package/package.json +1 -1
|
@@ -151,7 +151,6 @@ export class AlarmElement extends ConditionalDisplayElement {
|
|
|
151
151
|
}
|
|
152
152
|
fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
|
|
153
153
|
tr.style.cssText = `height: ${this.model.heights[0]}px;
|
|
154
|
-
background: ${this.model.generalSetting.headerFillColor};
|
|
155
154
|
color: ${this.model.generalSetting.headerFont.color};
|
|
156
155
|
font: ${fontString};
|
|
157
156
|
text-align: ${this.model.generalSetting.headerFont.textAlign};
|
|
@@ -171,7 +170,6 @@ export class AlarmElement extends ConditionalDisplayElement {
|
|
|
171
170
|
for (let row = 0; row < this.pageSize; row++) {
|
|
172
171
|
tr = document.createElement('tr');
|
|
173
172
|
tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
|
|
174
|
-
background: ${this.model.generalSetting.tableFillColor};
|
|
175
173
|
font: ${this.model.generalSetting.fontStyle};
|
|
176
174
|
color: ${this.model.generalSetting.fontColor};
|
|
177
175
|
text-align: ${this.model.generalSetting.textAlign};
|
|
@@ -251,18 +249,18 @@ export class AlarmElement extends ConditionalDisplayElement {
|
|
|
251
249
|
}
|
|
252
250
|
const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
|
|
253
251
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
254
|
-
.style('float', 'right').style('background
|
|
252
|
+
.style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
|
|
255
253
|
.on('click', () => { this.loadLastPage(); });
|
|
256
254
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
257
|
-
.style('float', 'right').style('background
|
|
255
|
+
.style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
|
|
258
256
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
259
257
|
.on('click', () => { this.loadNextPage(); });
|
|
260
258
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
261
|
-
.style('float', 'right').style('background
|
|
259
|
+
.style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
|
|
262
260
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
263
261
|
.on('click', () => { this.loadPreviousPage(); });
|
|
264
262
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
265
|
-
.style('float', 'right').style('background
|
|
263
|
+
.style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
|
|
266
264
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
267
265
|
.on('click', () => { this.loadFirstPage(); });
|
|
268
266
|
this.setStatusAsNormal();
|
|
@@ -412,27 +412,31 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
|
|
|
412
412
|
.append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
|
|
413
413
|
.append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
|
|
414
414
|
const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
|
|
415
|
+
.style('background-color', 'inherit')
|
|
415
416
|
.style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
|
|
416
417
|
const displayTimePeriod = this.rootElement.select('select').property('value');
|
|
417
418
|
this.updateTimeRange(displayTimePeriod);
|
|
418
419
|
this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
|
|
419
420
|
});
|
|
421
|
+
const rect = this.$element.parent().parent().find('rect');
|
|
422
|
+
const fillColor = rect.attr('fill');
|
|
420
423
|
const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
|
|
421
|
-
options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod))
|
|
424
|
+
options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod))
|
|
425
|
+
.style('background-color', fillColor);
|
|
422
426
|
const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
|
|
423
427
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
424
|
-
.style('float', 'right').style('background
|
|
428
|
+
.style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
|
|
425
429
|
.on('click', () => { this.loadLastPage(); });
|
|
426
430
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
427
|
-
.style('float', 'right').style('background
|
|
431
|
+
.style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
|
|
428
432
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
429
433
|
.on('click', () => { this.loadNextPage(); });
|
|
430
434
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
431
|
-
.style('float', 'right').style('background
|
|
435
|
+
.style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
|
|
432
436
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
433
437
|
.on('click', () => { this.loadPreviousPage(); });
|
|
434
438
|
operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
|
|
435
|
-
.style('float', 'right').style('background
|
|
439
|
+
.style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
|
|
436
440
|
.style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
|
|
437
441
|
.on('click', () => { this.loadFirstPage(); });
|
|
438
442
|
}
|