From 12dc322a54295a83ccc585ff958c17a0017d19cb Mon Sep 17 00:00:00 2001 From: alexcojocaru Date: Sun, 25 Feb 2024 15:45:59 -0800 Subject: [PATCH] Disable gradient normalization in profile; add legend --- css/style.css | 4 - js/plugin/Heightgraph.js | 256 ++++++++++++++++++++++++++++++++------- package.json | 2 +- yarn.lock | 6 +- 4 files changed, 218 insertions(+), 50 deletions(-) diff --git a/css/style.css b/css/style.css index 0fec68f6..ac505ab1 100644 --- a/css/style.css +++ b/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; } diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js index cb428494..cad05722 100644 --- a/js/plugin/Heightgraph.js +++ b/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 = '■'; + + var label = L.DomUtil.create('span', 'legend-text', legend); + label.textContent = l.text; + }); + }, }); var heightgraphControl = new Heightgraph(); diff --git a/package.json b/package.json index 88041918..0e4e5283 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f9849e07..5395a4e0 100644 --- a/yarn.lock +++ b/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"