Merge pull request #4338 from camptocamp/profile

Fix profile issues on null values

contribs/gmf/src/profile/component.html

@@ -17,8 +17,11 @@
     <li ng-repeat="name in ::ctrl.getLayersNames()">
       <i
         class="fa fa-minus"
-        style="color:{{::ctrl.getColor(name)}};"></i>
-      &nbsp;{{name | translate}}&nbsp;{{ctrl.currentPoint.elevations[name]}}&nbsp;{{ctrl.currentPoint.yUnits}}
+        ng-style="ctrl.getStyle(name)"></i>
+      {{name | translate}}
+      <span ng-if="ctrl.currentPoint.elevations[name] != null">
+      {{ctrl.currentPoint.elevations[name]}}&nbsp;{{ctrl.currentPoint.yUnits}}
+      </span>
     </li>
   </ul>
 

contribs/gmf/src/profile/component.js

@@ -41,8 +41,7 @@ exports.value('gmfProfileTemplateUrl',
    */
   ($element, $attrs) => {
     const templateUrl = $attrs['gmfProfileTemplateurl'];
-    return templateUrl !== undefined ? templateUrl :
-      'gmf/profile';
+    return templateUrl !== undefined ? templateUrl : 'gmf/profile';
   });
 
 exports.run(/* @ngInject */ ($templateCache) => {
@@ -507,30 +506,25 @@ exports.Controller_.prototype.outCallback_ = function() {
 
 
 /**
- * @return {string} A texte formatted to a tooltip.
+ * @return {string} A text formatted to a tooltip.
  * @private
  */
 exports.Controller_.prototype.getTooltipHTML_ = function() {
-  const separator = ' : ';
+  const gettextCatalog = this.gettextCatalog_;
+  const separator = ' : ';
   let elevationName, translatedElevationName;
   const innerHTML = [];
   const number = this.$filter_('number');
   const DistDecimal = this.currentPoint.xUnits === 'm' ? 0 : 2;
-  innerHTML.push(
-    `${this.profileLabels_.xAxis +
-      separator +
-      number(this.currentPoint.distance, DistDecimal)
-    } ${
-      this.currentPoint.xUnits}`
-  );
+  const value = number(this.currentPoint.distance, DistDecimal);
+  innerHTML.push(`${this.profileLabels_.xAxis} ${separator} ${value} ${this.currentPoint.xUnits}`);
   for (elevationName in this.currentPoint.elevations) {
-    translatedElevationName = this.gettextCatalog_.getString(elevationName);
-    innerHTML.push(
-      `${translatedElevationName +
-        separator +
-        number(this.currentPoint.elevations[elevationName], 0)
-      } ${this.currentPoint.yUnits}`
-    );
+    translatedElevationName = gettextCatalog.getString(elevationName);
+    const int_value = this.currentPoint.elevations[elevationName];
+    const value = int_value === null ?
+      gettextCatalog.getString('no value') :
+      `${number(int_value, 0)} ${this.currentPoint.yUnits}`;
+    innerHTML.push(`${translatedElevationName} ${separator} ${value}`);
   }
   return innerHTML.join('</br>');
 };
@@ -559,26 +553,27 @@ exports.Controller_.prototype.createMeasureTooltip_ = function() {
  */
 exports.Controller_.prototype.removeMeasureTooltip_ = function() {
   if (this.measureTooltipElement_ !== null) {
-    this.measureTooltipElement_.parentNode.removeChild(
-      this.measureTooltipElement_);
+    this.measureTooltipElement_.parentNode.removeChild(this.measureTooltipElement_);
     this.measureTooltipElement_ = null;
     this.map_.removeOverlay(this.measureTooltip_);
   }
 };
 
 
 /**
- * Return the color value of a gmfx.ProfileLineConfiguration.
+ * Return the styler value of a gmfx.ProfileLineConfiguration.
  * @param {string} layerName name of the elevation layer.
- * @return {string|undefined} A HEX color or undefined is nothing is found.
+ * @return {object} The object representation of the style.
  * @export
  */
-exports.Controller_.prototype.getColor = function(layerName) {
+exports.Controller_.prototype.getStyle = function(layerName) {
   const lineConfiguration = this.linesConfiguration_[layerName];
   if (!lineConfiguration) {
-    return undefined;
+    return {};
   }
-  return lineConfiguration.color;
+  return {
+    'color': lineConfiguration.color || '#F00'
+  };
 };
 
 
@@ -605,7 +600,7 @@ exports.Controller_.prototype.getZFactory_ = function(layerName) {
    * @private
    */
   const getZFn = function(item) {
-    if ('values' in item && layerName in item['values']) {
+    if ('values' in item && layerName in item['values'] && item['values'][layerName]) {
       return parseFloat(item['values'][layerName]);
     }
     return null;

contribs/gmf/src/raster/widgetComponent.html

@@ -13,7 +13,7 @@
     <span class="gmf-elevationwidget-value">
       {{ctrl.elevationValue}}
       <span ng-show="ctrl.elevationLoading" class="fa fa-spinner"></span>
-      <span ng-show="!ctrl.elevationValue == undefined && !ctrl.elevationLoading" translate>Elevation…</span>
+      <span ng-show="!ctrl.elevationValue && !ctrl.elevationLoading" translate>Elevation…</span>
     </span><span class="caret" ng-if="::ctrl.layers.length > 1"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-right" role="menu"

src/profile/d3Elevation.js

@@ -173,7 +173,7 @@ const exports = function(options) {
      * @return {string} Elevation.
      */
     yhover(ele, units) {
-      return `${Math.round(ele)} m`;
+      return ele !== null ? `${Math.round(ele)} m` : '';
     },
     /**
      * @param {number} dist Distance.
@@ -545,20 +545,18 @@ const exports = function(options) {
     g.select('.x.grid-hover text')
       .text(formatter.xhover(dist / xFactor, xUnits))
       .style('text-anchor', right ? 'end' : 'start')
-      .attr('transform', `translate(${xtranslate},${
-        height - 10})`);
+      .attr('transform', `translate(${xtranslate},${height - 10})`);
 
     const yUnits = 'm';
     // Display altitude on guides only if there is one line.
     if (numberOfLines === 1) {
+      const text = elevations[0] === null ? 'no value' : formatter.yhover(elevations[0], 'm');
       g.select('.y.grid-hover text')
-        .text(formatter.yhover(elevations[0], 'm'))
+        .text(text)
         .style('text-anchor', right ? 'end' : 'start')
-        .attr('transform', `translate(${xtranslate},${
-          y(elevations[0]) - 10})`);
+        .attr('transform', `translate(${xtranslate},${y(elevations[0]) - 10})`);
     }
-    hoverCallback.call(null, point, dist / xFactor, xUnits, elevationsRef,
-      yUnits);
+    hoverCallback.call(null, point, dist / xFactor, xUnits, elevationsRef, yUnits);
   };
 
 
@@ -607,15 +605,9 @@ const exports = function(options) {
     poiEnterG.selectAll('text')
       .attr('transform', (d) => {
         if (light) {
-          return ['translate(',
-            x(pe.dist(d)), ',',
-            y(pe.z(d)) - 10, ')'
-          ].join('');
+          return [`translate(${x(pe.dist(d))},${y(pe.z(d)) - 10})`];
         } else {
-          return ['translate(',
-            x(pe.dist(d)), ',',
-            y(pe.z(d)) - 20, ') rotate(', poiLabelAngle, ')'
-          ].join('');
+          return [`translate(${x(pe.dist(d))},${y(pe.z(d)) - 20}) rotate(${poiLabelAngle})`];
         }
       })
       .text(d => pe.sort(d) + (light ? '' : (` - ${pe.title(d)}`)));