@flexem/fc-gui 3.0.0-alpha.32 → 3.0.0-alpha.36

package/elements/air-quality/air-quality-element.js

@@ -40,9 +40,9 @@ export class AirQualityElement extends ConditionalDisplayElement {
         this.buildBackgroudRect(airQualitySvg, backgroundColor);
         this.buildLocGroup(airQualitySvg, airQuality.city, fontColor);
         this.buildAirQualityText(airQualitySvg, 130, 55, airQuality.aqi, fontColor, 53);
-        this.buildAirQualityText(airQualitySvg, 190, 28, '空气质量', fontColor);
+        this.buildAirQualityText(airQualitySvg, 220, 28, '空气质量', fontColor);
         this.buildRectBackgroundForAqi(airQualitySvg, airQuality.level);
-        this.buildAirQualityText(airQualitySvg, 190, 49, airQuality.category, fontColor);
+        this.buildAirQualityText(airQualitySvg, 220, 49, airQuality.category, fontColor);
         this.buildAirQualityText(airQualitySvg, 30, 75, 'PM2.5', fontColor, 12, 0.8);
         this.buildAirQualityText(airQualitySvg, 30, 95, airQuality.pm25, fontColor, 15);
         this.buildAirQualityText(airQualitySvg, 80, 75, 'PM10', fontColor, 12, 0.8);
@@ -105,7 +105,7 @@ export class AirQualityElement extends ConditionalDisplayElement {
             backgroundColor = '#A10E0E';
         }
         airQualitySvg.append('rect')
-            .attr('x', '165')
+            .attr('x', '195')
             .attr('y', '35')
             .attr('rx', '5')
             .attr('width', '50')

package/elements/historical-curve/historical-curve.element.js

@@ -22,7 +22,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             marginRight: 20,
             mobileMinWidth: 450,
             operationAreaHeight: 32,
-            operationAreaMarginTop: 10,
+            operationAreaMarginTop: 25,
             operationSelectFontSize: '16px',
             operationButtonWidth: 24,
             operationButtonHeight: 24,
@@ -39,7 +39,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }, this.model.displaySetting.refreshInterval * 1000);
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         if (this.isMobileMode) {
-            this.displayOption.operationAreaMarginTop = 20;
+            this.displayOption.operationAreaMarginTop = 35;
             if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
                 this.displayOption.operationAreaHeight = 68;
                 this.displayOption.operationSelectFontSize = '24px';
@@ -205,7 +205,12 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
     renderCommonProperty(chart, chartWidth, chartHeight, data) {
         chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
         if (this.model.displaySetting.showAxis) {
-            chart.xAxis.showMaxMin(true).tickFormat(d => this.timeFormat(d, '%X'));
+            chart.xAxis.showMaxMin(true).tickFormat(d => {
+                if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+                    return this.timeFormat(d, '%y-%m-%d');
+                }
+                return this.timeFormat(Number(d), '%X');
+            });
             if (this.model.displaySetting.axisSetting) {
                 if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
                     chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
@@ -230,15 +235,86 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             chart.update();
             this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
         });
+        const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
         this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
         if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
             const axisColor = this.model.displaySetting.axisSetting.axisColor;
             this.rootElement.selectAll('.domain').style('stroke', axisColor);
             if (this.model.displaySetting.axisSetting.showAxisLabel) {
-                const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
                 this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
             }
         }
+        const self = this;
+        if (self.currentTimePeriod === 3 || self.currentTimePeriod === 4 || self.currentTimePeriod === 5) {
+            this.rootElement
+                .selectAll('.nv-x')
+                .selectAll('.tick')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            this.rootElement
+                .selectAll('.nv-axisMaxMin-x')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            const h = this.rootElement
+                .selectAll('.nv-focusWrap')
+                .attr('transform')
+                .slice(0, -1)
+                .split(',')[1];
+            this.rootElement
+                .selectAll('.nv-focusWrap')
+                .attr('transform', `translate(0,${Number(h) + 15})`);
+            const resizeObserver = new window.MutationObserver(() => {
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('.full-date')
+                    .remove();
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('text')
+                    .data(function (d) {
+                    return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+                })
+                    .enter()
+                    .append('text')
+                    .attr('class', 'full-date')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('dy', '2.3em')
+                    .style('text-anchor', 'middle')
+                    .style('font-size', fontSize)
+                    .text((d) => d);
+            });
+            resizeObserver.observe(document.getElementsByClassName('extent')[0], { attributes: true });
+        }
+        else {
+            this.rootElement
+                .selectAll('.full-date')
+                .remove();
+        }
     }
     renderOperationArea(chartWidth, chartHeight) {
         const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.32",
+	"version": "3.0.0-alpha.36",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",