Disable gradient normalization in profile; add legend

css/style.css

@@ -970,12 +970,8 @@ table.dataTable.display tbody tr:hover.selected {
 
 /*
  * Heightgraph customizations;
- * since the legend and the gradient types are in the way, hide them;
  * since there's only the gradient layer, hide the layer selector.
  */
-.legend-hover {
- display: none;
-}
 #selectionText {
  display: none;
 }

js/plugin/Heightgraph.js

@@ -11,49 +11,137 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
  expandControls: false,
  mappings: {
  gradient: {
+ '-16': {
+ text: '< -15%',
+ color: '#81A850',
+ },
+ '-15': {
+ text: '-15%',
+ color: '#89AA55',
+ },
+ '-14': {
+ text: '-14%',
+ color: '#91AD59',
+ },
+ '-13': {
+ text: '-13%',
+ color: '#99AF5E',
+ },
+ '-12': {
+ text: '-12%',
+ color: '#A1B162',
+ },
+ '-11': {
+ text: '-11%',
+ color: '#A8B367',
+ },
+ '-10': {
+ text: '-10%',
+ color: '#B0B66B',
+ },
+ '-9': {
+ text: '-9%',
+ color: '#B8B870',
+ },
+ '-8': {
+ text: '-8%',
+ color: '#C0BA75',
+ },
+ '-7': {
+ text: '-7%',
+ color: '#C8BC79',
+ },
+ '-6': {
+ text: '-6%',
+ color: '#D0BF7E',
+ },
  '-5': {
- text: '- 16%+',
- color: '#028306',
+ text: '-5%',
+ color: '#D8C182',
  },
  '-4': {
- text: '- 10-15%',
- color: '#2AA12E',
+ text: '-4%',
+ color: '#E0C387',
  },
  '-3': {
- text: '- 7-9%',
- color: '#53BF56',
+ text: '-3%',
+ color: '#E7C58B',
  },
  '-2': {
- text: '- 4-6%',
- color: '#7BDD7E',
+ text: '-2%',
+ color: '#EFC890',
  },
  '-1': {
- text: '- 1-3%',
- color: '#A4FBA6',
+ text: '-1%',
+ color: '#F7CA94',
  },
  0: {
  text: '0%',
- color: '#ffcc99',
+ color: '#FFCC99',
  },
  1: {
- text: '1-3%',
- color: '#F29898',
+ text: '1%',
+ color: '#FCC695',
  },
  2: {
- text: '4-6%',
- color: '#E07575',
+ text: '2%',
+ color: '#FAC090',
  },
  3: {
- text: '7-9%',
- color: '#CF5352',
+ text: '3%',
+ color: '#F7BA8C',
  },
  4: {
- text: '10-15%',
- color: '#BE312F',
+ text: '4%',
+ color: '#F5B588',
  },
  5: {
- text: '16%+',
- color: '#AD0F0C',
+ text: '5%',
+ color: '#F2AF83',
+ },
+ 6: {
+ text: '6%',
+ color: '#F0A97F',
+ },
+ 7: {
+ text: '7%',
+ color: '#EDA37A',
+ },
+ 8: {
+ text: '8%',
+ color: '#EB9D76',
+ },
+ 9: {
+ text: '9%',
+ color: '#E89772',
+ },
+ 10: {
+ text: '10%',
+ color: '#E5916D',
+ },
+ 11: {
+ text: '11%',
+ color: '#E38B69',
+ },
+ 12: {
+ text: '12%',
+ color: '#E08665',
+ },
+ 13: {
+ text: '13%',
+ color: '#DE8060',
+ },
+ 14: {
+ text: '14%',
+ color: '#DB7A5C',
+ },
+ 15: {
+ text: '15%',
+ color: '#D97457',
+ },
+ 16: {
+ text: '> 15%',
+ color: '#D66E53',
  },
  },
  },
@@ -167,29 +255,10 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
  } else {
  $('#no-elevation-data').hide();
  }
- var chartWidth;
- if (document.getElementsByClassName('heightgraph-container').length > 0) {
- var hgElement = document.getElementsByClassName('heightgraph-container')[0];
- if (hgElement.getElementsByTagName('g').length > 0) {
- hgGElement = hgElement.getElementsByTagName('g')[0];
- if (hgGElement.getElementsByClassName('grid').length > 1) {
- hgGRectElement = hgGElement.getElementsByClassName('grid')[1];
- chartWidth = hgGRectElement.getBoundingClientRect().width;
- }
- }
- }
- // if I cannot get the chart width (e.g. the chart is not visible),
- // get the width of the content element - that's close enough
- if (typeof chartWidth === 'undefined' || chartWidth === 0) {
- var contentElement = document.getElementById('content');
- if (contentElement) {
- chartWidth = contentElement.getBoundingClientRect().width;
- }
- }
+
  var geojsonFeatures = geoDataExchange.buildGeojsonFeatures(track.getLatLngs(), {
  interpolate: false,
- normalize: true,
- chartWidthInPixels: chartWidth,
+ normalize: false,
  });
  this.addData(geojsonFeatures);
 
@@ -220,6 +289,109 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
  $('#elevation-chart').collapse('hide');
  }
  },
+
+ _createLegend: function () {
+ if (this._categories.length > 0) {
+ // find the min and the max gradients for the current profile
+ var minGradient = 16;
+ var maxGradient = -16;
+ // this legend object has the profile gradients as keys; it was built by heightgraph
+ var allLegend = this._categories[this.options.selectedAttributeIdx].legend;
+ for (key in allLegend) {
+ var gradient = parseInt(key);
+ if (minGradient > gradient) {
+ minGradient = gradient;
+ }
+ if (maxGradient < gradient) {
+ maxGradient = gradient;
+ }
+ }
+
+ // define the simplified legend with all known gradients
+ var simplifiedLegend = [
+ {
+ type: -16,
+ text: this.options.mappings.gradient['-16'].text,
+ color: this.options.mappings.gradient['-16'].color,
+ },
+ {
+ type: -10,
+ text: this.options.mappings.gradient['-10'].text,
+ color: this.options.mappings.gradient['-10'].color,
+ },
+ {
+ type: -5,
+ text: this.options.mappings.gradient['-5'].text,
+ color: this.options.mappings.gradient['-5'].color,
+ },
+ {
+ type: 0,
+ text: this.options.mappings.gradient['0'].text,
+ color: this.options.mappings.gradient['0'].color,
+ },
+ {
+ type: 5,
+ text: this.options.mappings.gradient['5'].text,
+ color: this.options.mappings.gradient['5'].color,
+ },
+ {
+ type: 10,
+ text: this.options.mappings.gradient['10'].text,
+ color: this.options.mappings.gradient['10'].color,
+ },
+ {
+ type: 16,
+ text: this.options.mappings.gradient['16'].text,
+ color: this.options.mappings.gradient['16'].color,
+ },
+ ];
+ // then, keep only the range relevant to the current profile
+ // (e.g. if min gradient of profile is -6, remove -16 and -15 from range)
+ for (var i = 0; i < simplifiedLegend.length; i++) {
+ if (simplifiedLegend[i].type > minGradient) {
+ simplifiedLegend.splice(0, i - 1);
+ break;
+ }
+ }
+ for (var i = simplifiedLegend.length - 1; i > -1; i--) {
+ if (simplifiedLegend[i].type < maxGradient) {
+ simplifiedLegend.splice(i + 2);
+ break;
+ }
+ }
+
+ this._categories[this.options.selectedAttributeIdx].legend = simplifiedLegend;
+ }
+
+ var existingLegend = document.querySelector('.legend-container');
+ if (existingLegend !== null) {
+ existingLegend.remove();
+ }
+
+ var legend = L.DomUtil.create('div', 'legend-container', this._container);
+ // hack to keep the chart from getting too tall,
+ // and to keep it from growing vertically on window resize
+ legend.style.setProperty('position', 'absolute');
+ // naively align the legend vertically with the y-axis
+ legend.style.setProperty('margin-left', '65px');
+ legend.style.setProperty('margin-top', '-18px');
+
+ var legendLabel = L.DomUtil.create('span', 'legend-hover legend-text', legend);
+ legendLabel.textContent = this._getTranslation('legend') + ':';
+
+ this._categories[this.options.selectedAttributeIdx].legend.forEach((l) => {
+ var color = L.DomUtil.create('span', 'legend-rect', legend);
+ color.style.setProperty('padding-left', '10px');
+ color.style.setProperty('padding-right', '3px');
+ color.style.setProperty('width', '6px');
+ color.style.setProperty('height', '6px');
+ color.style.setProperty('color', l.color);
+ color.innerHTML = '&#9632;';
+
+ var label = L.DomUtil.create('span', 'legend-text', legend);
+ label.textContent = l.text;
+ });
+ },
  });
 
  var heightgraphControl = new Heightgraph();

package.json

@@ -54,7 +54,7 @@
  "datatables": "1.10.18",
  "fit-file-writer": "tbsmark86/fit-file-writer#3eebe13",
  "font-awesome": "4.7.0",
- "geo-data-exchange": "alexcojocaru/geo-data-exchange#v2.1.0",
+ "geo-data-exchange": "alexcojocaru/geo-data-exchange#v2.2.0",
  "i18next": "19.9.2",
  "i18next-browser-languagedetector": "7.0.2",
  "i18next-xhr-backend": "3.2.2",

yarn.lock

@@ -5632,9 +5632,9 @@ gensync@^1.0.0-beta.2:
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-geo-data-exchange@alexcojocaru/geo-data-exchange#v2.1.0:
- version "2.1.0"
- resolved "https://codeload.github.com/alexcojocaru/geo-data-exchange/tar.gz/aa1a0bc98f0b3f7233ea3dcbc038bf46a99702d9"
+geo-data-exchange@alexcojocaru/geo-data-exchange#v2.2.0:
+ version "2.2.0"
+ resolved "https://codeload.github.com/alexcojocaru/geo-data-exchange/tar.gz/d6d517dee5e07e32ef948eecd7a151479a6d7938"
  dependencies:
  leaflet "^1.5.0"