Merge remote-tracking branch 'origin/master'

README.md

@@ -130,6 +130,10 @@ Note that outside the contiguous US, some of these variables may be shown differ
 
 
 ## Changelog
+(3.2.2):
+- Fixed 1961-1990 historical observed average calculation issue.
+- Minor style / font-sizing changes.
+
 (3.2.1):
 - Rotated hover legend items.
 - Fixed 'font' option.
@@ -194,4 +198,4 @@ Note that outside the contiguous US, some of these variables may be shown differ
 (2.1.0) Jan 2019:
 - Refactored to jQuery UI and somewhat modernized codebase
 
-(1.X.X) 2015-2017
+(1.X.X) 2015-2017

dist/climate_by_location.climate_by_forest.bundle.js

@@ -6788,7 +6788,7 @@
         this.element.id = 'climatebylocation-' + Math.floor(Math.random() * Math.floor(100));
       }
 
-      this._styles = ["#".concat(this.element.id, " {position: relative;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%;}")];
+      this._styles = ["#".concat(this.element.id, " {position: relative; display: flex; flex-flow: column nowrap;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%; flex: 1 1 auto;}")];
       this.view_container = document.createElement('div');
       this.view_container.classList.add('climate_by_location_view');
       this.element.append(this.view_container);
@@ -6821,7 +6821,7 @@
     }
 
     _init_popover() {
-      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.75);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
+      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.825);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
       // `#${this.element.id} .climate_by_location_popover .legend-line { margin-left: 0.5rem; border-left-width: 0.15rem; border-left-style: solid; padding-left: 0.5rem; }`,
       "#".concat(this.element.id, " .climate_by_location_popover .popover-header { display: flex; flex-flow: row nowrap; align-items: center;}"), "#".concat(this.element.id, ".popover-pinned .climate_by_location_popover { pointer-events: all; background: rgba(252,253,255,0.95); left: 60px !important; top: 15px !important; }"), "#".concat(this.element.id, ".popover-open .climate_by_location_popover { display: flex;   }")];
       this._popover = document.createElement("span");
@@ -8621,7 +8621,7 @@
         chart_data['hist_obs_year'].push(round(hist_obs_data[i][0], precision));
         chart_data['hist_obs'].push(round(hist_obs_data[i][1], precision));
 
-        if (1961 <= hist_obs_data[i][0] <= 1990) {
+        if (1961 <= hist_obs_data[i][0] && hist_obs_data[i][0] <= 1990) {
           chart_data['hist_obs_base'].push(round(hist_obs_data[i][1], precision));
         }
       }

dist/climate_by_location.climate_explorer.bundle.js

@@ -6628,7 +6628,7 @@
         this.element.id = 'climatebylocation-' + Math.floor(Math.random() * Math.floor(100));
       }
 
-      this._styles = ["#".concat(this.element.id, " {position: relative;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%;}")];
+      this._styles = ["#".concat(this.element.id, " {position: relative; display: flex; flex-flow: column nowrap;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%; flex: 1 1 auto;}")];
       this.view_container = document.createElement('div');
       this.view_container.classList.add('climate_by_location_view');
       this.element.append(this.view_container);
@@ -6661,7 +6661,7 @@
     }
 
     _init_popover() {
-      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.75);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
+      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.825);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
       // `#${this.element.id} .climate_by_location_popover .legend-line { margin-left: 0.5rem; border-left-width: 0.15rem; border-left-style: solid; padding-left: 0.5rem; }`,
       "#".concat(this.element.id, " .climate_by_location_popover .popover-header { display: flex; flex-flow: row nowrap; align-items: center;}"), "#".concat(this.element.id, ".popover-pinned .climate_by_location_popover { pointer-events: all; background: rgba(252,253,255,0.95); left: 60px !important; top: 15px !important; }"), "#".concat(this.element.id, ".popover-open .climate_by_location_popover { display: flex;   }")];
       this._popover = document.createElement("span");
@@ -8173,7 +8173,7 @@
         chart_data['hist_obs_year'].push(hist_obs_data[i][0]);
         chart_data['hist_obs'].push(round(hist_obs_data[i][1], precision));
 
-        if (1961 <= hist_obs_data[i][0] <= 1990) {
+        if (1961 <= hist_obs_data[i][0] && hist_obs_data[i][0] <= 1990) {
           chart_data['hist_obs_base'].push(round(hist_obs_data[i][1], precision));
         }
       }

dist/climate_by_location.complete.bundle.js

@@ -6820,7 +6820,7 @@
         this.element.id = 'climatebylocation-' + Math.floor(Math.random() * Math.floor(100));
       }
 
-      this._styles = ["#".concat(this.element.id, " {position: relative;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%;}")];
+      this._styles = ["#".concat(this.element.id, " {position: relative; display: flex; flex-flow: column nowrap;}"), "#".concat(this.element.id, " .climate_by_location_view {width: 100%; height: 100%; flex: 1 1 auto;}")];
       this.view_container = document.createElement('div');
       this.view_container.classList.add('climate_by_location_view');
       this.element.append(this.view_container);
@@ -6853,7 +6853,7 @@
     }
 
     _init_popover() {
-      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.75);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
+      this._styles = [...this._styles, "#".concat(this.element.id, " .hoverlayer .legend {display: none !important;}"), "#".concat(this.element.id, " .climate_by_location_popover {\n            z-index: 9999;\n            display: none;\n            position:absolute;\n            background: rgba(252,253,255,0.825);\n            pointer-events: none;\n            min-height: ").concat(this.options.smaller_labels ? '3' : '3.75', "rem;\n            flex-flow: column nowrap;\n            height: fit-content;\n            width: ").concat(this.options.smaller_labels ? '11.5' : '15', "rem;\n            box-shadow: 2px 1px 5px rgb(0 0 0 / 50%);\n            border: solid 1.3px rgba(0, 0, 0, 0.3);\n            padding: 0.45rem 0.55rem;\n            font-size: ").concat(this.options.smaller_labels ? '0.75' : '1', "rem;\n            font-weight: 500;\n            line-height: ").concat(this.options.smaller_labels ? '1.15' : '1.5', "rem;\n       }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp85 { background-color: ").concat(rgba(this.options.colors.rcp85.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-rcp45 { background-color: ").concat(rgba(this.options.colors.rcp45.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .bg-hist { background: ").concat(rgba(this.options.colors.hist.outerBand, 0.1), "; }"), "#".concat(this.element.id, " .climate_by_location_popover .label1 { font-size: 1em; font-weight: 700; line-height: 1.5em; grid-column: 1 / span 2; }"), "#".concat(this.element.id, " .climate_by_location_popover .label2 { font-size: 0.7em; padding-left: 0.3rem; line-height: 1em; grid-column: 1 / span 2; }"), // `#${this.element.id} .climate_by_location_popover .legend-area { margin-left: 0.5rem; border-left-width: 0.4rem; border-left-style: solid;  padding-left: 0.5rem;}`,
       // `#${this.element.id} .climate_by_location_popover .legend-line { margin-left: 0.5rem; border-left-width: 0.15rem; border-left-style: solid; padding-left: 0.5rem; }`,
       "#".concat(this.element.id, " .climate_by_location_popover .popover-header { display: flex; flex-flow: row nowrap; align-items: center;}"), "#".concat(this.element.id, ".popover-pinned .climate_by_location_popover { pointer-events: all; background: rgba(252,253,255,0.95); left: 60px !important; top: 15px !important; }"), "#".concat(this.element.id, ".popover-open .climate_by_location_popover { display: flex;   }")];
       this._popover = document.createElement("span");
@@ -8365,7 +8365,7 @@
         chart_data['hist_obs_year'].push(hist_obs_data[i][0]);
         chart_data['hist_obs'].push(round(hist_obs_data[i][1], precision));
 
-        if (1961 <= hist_obs_data[i][0] <= 1990) {
+        if (1961 <= hist_obs_data[i][0] && hist_obs_data[i][0] <= 1990) {
           chart_data['hist_obs_base'].push(round(hist_obs_data[i][1], precision));
         }
       }
@@ -10221,7 +10221,7 @@
         chart_data['hist_obs_year'].push(round(hist_obs_data[i][0], precision));
         chart_data['hist_obs'].push(round(hist_obs_data[i][1], precision));
 
-        if (1961 <= hist_obs_data[i][0] <= 1990) {
+        if (1961 <= hist_obs_data[i][0] && hist_obs_data[i][0] <= 1990) {
           chart_data['hist_obs_base'].push(round(hist_obs_data[i][1], precision));
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "climate-by-location",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Interactive climate graphs",
   "main": "dist/climate-by-location.climate_explorer.bundle.min.js",
   "maintainers": [

src/main.js

@@ -118,8 +118,8 @@ export default class ClimateByLocationWidget {
       this.element.id = 'climatebylocation-' + Math.floor(Math.random() * Math.floor(100));
     }
     this._styles = [
-      `#${this.element.id} {position: relative;}`,
-      `#${this.element.id} .climate_by_location_view {width: 100%; height: 100%;}`,
+      `#${this.element.id} {position: relative; display: flex; flex-flow: column nowrap;}`,
+      `#${this.element.id} .climate_by_location_view {width: 100%; height: 100%; flex: 1 1 auto;}`,
     ];
     this.view_container = document.createElement('div');
     this.view_container.classList.add('climate_by_location_view');
@@ -155,7 +155,7 @@ export default class ClimateByLocationWidget {
             z-index: 9999;
             display: none;
             position:absolute;
-            background: rgba(252,253,255,0.75);
+            background: rgba(252,253,255,0.825);
             pointer-events: none;
             min-height: ${this.options.smaller_labels? '3' : '3.75'}rem;
             flex-flow: column nowrap;
@@ -455,7 +455,7 @@ export default class ClimateByLocationWidget {
     }
     if (Number.isFinite(x_range_min) && Number.isFinite(x_range_max)) {
       window.setTimeout(() => {
-        this.element.dispatchEvent(new CustomEvent('x_axis_range_change', {detail: [x_range_min, x_range_max, get(this.options, ['x_axis_range', 0], x_range_min), get(this.options, ['x_axis_range', 1], x_range_max)]}));
+          this.element.dispatchEvent(new CustomEvent('x_axis_range_change', {detail: [x_range_min, x_range_max, get(this.options, ['x_axis_range', 0], x_range_min), get(this.options, ['x_axis_range', 1], x_range_max)]}));
         this.element.dispatchEvent(new CustomEvent('y_axis_range_change', {detail: [y_range_min, y_range_max, get(this.options, ['y_axis_range', 0], y_range_min), get(this.options, ['y_axis_range', 1], y_range_max)]}));
       });
     }

src/views/conus_decade.js

@@ -362,7 +362,7 @@ export default class ConusDecadeView extends View {
     for (let i = 0; i < hist_obs_data.length; i++) {
       chart_data['hist_obs_year'].push(hist_obs_data[i][0]);
       chart_data['hist_obs'].push(round(hist_obs_data[i][1], precision));
-      if (1961 <= hist_obs_data[i][0] <= 1990) {
+      if (1961 <= hist_obs_data[i][0] && hist_obs_data[i][0] <= 1990) {
         chart_data['hist_obs_base'].push(round(hist_obs_data[i][1], precision));
       }
     }