@flexem/fc-gui 3.0.0-alpha.33 → 3.0.0-alpha.37

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/bundles/@flexem/fc-gui.umd.js +141 -53
  3. package/bundles/@flexem/fc-gui.umd.js.map +1 -1
  4. package/bundles/@flexem/fc-gui.umd.min.js +4 -4
  5. package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
  6. package/elements/historical-curve/historical-curve.element.js +80 -4
  7. package/gui/gui-host.d.ts +1 -1
  8. package/gui/gui.component.d.ts +3 -0
  9. package/gui/gui.component.js +14 -2
  10. package/gui/gui.component.metadata.json +1 -1
  11. package/package.json +1 -1
package/elements/historical-curve/historical-curve.element.js CHANGED
@@ -22,7 +22,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
22
22
  marginRight: 20,
23
23
  mobileMinWidth: 450,
24
24
  operationAreaHeight: 32,
25
- operationAreaMarginTop: 10,
25
+ operationAreaMarginTop: 25,
26
26
  operationSelectFontSize: '16px',
27
27
  operationButtonWidth: 24,
28
28
  operationButtonHeight: 24,
@@ -39,7 +39,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
39
39
  }, this.model.displaySetting.refreshInterval * 1000);
40
40
  this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
41
41
  if (this.isMobileMode) {
42
- this.displayOption.operationAreaMarginTop = 20;
42
+ this.displayOption.operationAreaMarginTop = 35;
43
43
  if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
44
44
  this.displayOption.operationAreaHeight = 68;
45
45
  this.displayOption.operationSelectFontSize = '24px';
@@ -205,7 +205,12 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
205
205
  renderCommonProperty(chart, chartWidth, chartHeight, data) {
206
206
  chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
207
207
  if (this.model.displaySetting.showAxis) {
208
- chart.xAxis.showMaxMin(true).tickFormat(d => this.timeFormat(d, '%X'));
208
+ chart.xAxis.showMaxMin(true).tickFormat(d => {
209
+ if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
210
+ return this.timeFormat(d, '%y-%m-%d');
211
+ }
212
+ return this.timeFormat(Number(d), '%X');
213
+ });
209
214
  if (this.model.displaySetting.axisSetting) {
210
215
  if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
211
216
  chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
@@ -230,15 +235,86 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
230
235
  chart.update();
231
236
  this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
232
237
  });
238
+ const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
233
239
  this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
234
240
  if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
235
241
  const axisColor = this.model.displaySetting.axisSetting.axisColor;
236
242
  this.rootElement.selectAll('.domain').style('stroke', axisColor);
237
243
  if (this.model.displaySetting.axisSetting.showAxisLabel) {
238
- const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
239
244
  this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
240
245
  }
241
246
  }
247
+ const self = this;
248
+ if (self.currentTimePeriod === 3 || self.currentTimePeriod === 4 || self.currentTimePeriod === 5) {
249
+ this.rootElement
250
+ .selectAll('.nv-x')
251
+ .selectAll('.tick')
252
+ .selectAll('text')
253
+ .data(function (d) {
254
+ return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
255
+ })
256
+ .enter()
257
+ .append('text')
258
+ .attr('class', 'full-date')
259
+ .attr('x', 0)
260
+ .attr('y', 0)
261
+ .attr('dy', '2.3em')
262
+ .style('text-anchor', 'middle')
263
+ .style('font-size', fontSize)
264
+ .text((d) => d);
265
+ this.rootElement
266
+ .selectAll('.nv-axisMaxMin-x')
267
+ .selectAll('text')
268
+ .data(function (d) {
269
+ return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
270
+ })
271
+ .enter()
272
+ .append('text')
273
+ .attr('class', 'full-date')
274
+ .attr('x', 0)
275
+ .attr('y', 0)
276
+ .attr('dy', '2.3em')
277
+ .style('text-anchor', 'middle')
278
+ .style('font-size', fontSize)
279
+ .text((d) => d);
280
+ const h = this.rootElement
281
+ .selectAll('.nv-focusWrap')
282
+ .attr('transform')
283
+ .slice(0, -1)
284
+ .split(',')[1];
285
+ this.rootElement
286
+ .selectAll('.nv-focusWrap')
287
+ .attr('transform', `translate(0,${Number(h) + 15})`);
288
+ const resizeObserver = new window.MutationObserver(() => {
289
+ this.rootElement
290
+ .selectAll('.nv-x')
291
+ .selectAll('.tick')
292
+ .selectAll('.full-date')
293
+ .remove();
294
+ this.rootElement
295
+ .selectAll('.nv-x')
296
+ .selectAll('.tick')
297
+ .selectAll('text')
298
+ .data(function (d) {
299
+ return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
300
+ })
301
+ .enter()
302
+ .append('text')
303
+ .attr('class', 'full-date')
304
+ .attr('x', 0)
305
+ .attr('y', 0)
306
+ .attr('dy', '2.3em')
307
+ .style('text-anchor', 'middle')
308
+ .style('font-size', fontSize)
309
+ .text((d) => d);
310
+ });
311
+ resizeObserver.observe(document.getElementsByClassName('extent')[0], { attributes: true });
312
+ }
313
+ else {
314
+ this.rootElement
315
+ .selectAll('.full-date')
316
+ .remove();
317
+ }
242
318
  }
243
319
  renderOperationArea(chartWidth, chartHeight) {
244
320
  const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
package/gui/gui-host.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare class GuiHost implements Disposable {
13
13
  readonly el: ElementRef;
14
14
  private isLoaded;
15
15
  private currentView;
16
- private currentViewIndex;
16
+ currentViewIndex: number;
17
17
  private containerEl;
18
18
  private currentViewSize;
19
19
  private currentViewReiszeMode;
package/gui/gui.component.d.ts CHANGED
@@ -24,10 +24,12 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
24
24
  initHeight: number;
25
25
  lastScale: number;
26
26
  isMobileMode: boolean;
27
+ hostContainerId: string;
27
28
  private $svg;
28
29
  private host;
29
30
  private get viewResizeMode();
30
31
  private readonly globalSettings;
32
+ private readonly viewService;
31
33
  constructor(el: ElementRef, localization: Localization, injector: Injector, bsModalService: BsModalService);
32
34
  ngOnChanges(changes: {
33
35
  [propKey: string]: SimpleChange;
@@ -39,4 +41,5 @@ export declare class GuiComponent implements OnChanges, OnDestroy {
39
41
  private onSizeChanged;
40
42
  private onResizeModeChanged;
41
43
  private onDisplayModeChanged;
44
+ refreshCurrentPage(): void;
42
45
  }
package/gui/gui.component.js CHANGED
@@ -18,6 +18,7 @@ import { Size } from '../model';
18
18
  import { DisplayMode, GlobalSettings, ViewResizeMode } from '../settings';
19
19
  import { GuiHost } from './gui-host';
20
20
  import { Guid } from '../utils/guid';
21
+ import { ViewService } from '../view/view.service';
21
22
  let GuiComponent = class GuiComponent {
22
23
  constructor(el, localization, injector, bsModalService) {
23
24
  this.el = el;
@@ -29,6 +30,7 @@ let GuiComponent = class GuiComponent {
29
30
  this.lastScale = 1;
30
31
  this.isMobileMode = false;
31
32
  this.globalSettings = this.injector.get(GlobalSettings);
33
+ this.viewService = injector.get(ViewService);
32
34
  }
33
35
  get viewResizeMode() {
34
36
  switch (this.resizeMode) {
@@ -131,11 +133,11 @@ let GuiComponent = class GuiComponent {
131
133
  this.$svg = $(this.el.nativeElement).find('div.svgView').first();
132
134
  this.$svg.empty();
133
135
  const svgRootClass = 'S' + Guid.newGuid().toString('n');
134
- const hostContainerId = 'H' + Guid.newGuid().toString('n');
136
+ this.hostContainerId = 'H' + Guid.newGuid().toString('n');
135
137
  this.$svg.addClass(svgRootClass);
136
138
  const guiOptions = {
137
139
  svgRootClass: svgRootClass,
138
- hostContainerId: hostContainerId,
140
+ hostContainerId: this.hostContainerId,
139
141
  el: this.el
140
142
  };
141
143
  const host = new GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
@@ -190,6 +192,16 @@ let GuiComponent = class GuiComponent {
190
192
  this.isMobileMode = this.displayMode === 'Mobile';
191
193
  this.globalSettings.displayMode = this.isMobileMode ? DisplayMode.Mobile : DisplayMode.Web;
192
194
  }
195
+ refreshCurrentPage() {
196
+ const viewIndex = this.host.currentViewIndex;
197
+ if (null != viewIndex) {
198
+ const toggleView = this.viewService.toggleViews.get(this.el);
199
+ if (!toggleView) {
200
+ return;
201
+ }
202
+ toggleView(viewIndex, this.hostContainerId, this.el).subscribe();
203
+ }
204
+ }
193
205
  };
194
206
  __decorate([
195
207
  Input(),
package/gui/gui.component.metadata.json CHANGED
@@ -1 +1 @@
1
- [{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":46,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":46,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":46,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":47,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":48,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}]}}}}]
1
+ [{"__symbolic":"module","version":4,"metadata":{"GuiComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"fc-gui","template":"<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "}]}],"members":{"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"resizeMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"displayMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"loadFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"loaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":50,"character":9},"arguments":[{"__symbolic":"reference","module":"../localization","name":"LOCALIZATION","line":50,"character":16}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":49,"character":37},{"__symbolic":"reference","module":"../localization","name":"Localization","line":50,"character":61},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":35},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":41}]}],"ngOnChanges":[{"__symbolic":"method"}],"doubleFingerZooming":[{"__symbolic":"method"}],"getDistance":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onProviderChanged":[{"__symbolic":"method"}],"onSizeChanged":[{"__symbolic":"method"}],"onResizeModeChanged":[{"__symbolic":"method"}],"onDisplayModeChanged":[{"__symbolic":"method"}],"refreshCurrentPage":[{"__symbolic":"method"}]}}}}]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "main": "bundles/fc-gui.umd.js",
3
- "version": "3.0.0-alpha.33",
3
+ "version": "3.0.0-alpha.37",
4
4
  "module": "public_api.js",
5
5
  "typings": "public_api.d.ts",
6
6
  "license": "UNLICENSED",