Skip to content
This repository has been archived by the owner on Mar 15, 2024. It is now read-only.

Commit

Permalink
Merge pull request #1969 from USGS-WiM/MJ-1921
Browse files Browse the repository at this point in the history 
Fixes #1921: Stage vs. Discharge Plot - Move Legend for Age & Quality Data
  • Loading branch information
@amedenblik
amedenblik authored Feb 27, 2024
2 parents f6f9980 + 161dffd commit bd23c55
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 59 deletions.
99 changes: 55 additions & 44 deletions src/Views/gagepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,58 +280,69 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
&nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
</div>
<div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">

<input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()">
<label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label>

<input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()">
<label for="ageData" ng-if="vm.error == false"> Age</label>

<input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')">
<label for="qualityData" ng-if="vm.error == false"> Quality</label>

<!-- Start Sliders -->
<div class="slider-container">
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements Between Months</span>
<rzslider class="rzSlider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
<span id="months2show"></span>
<div class="stagedischarge-inputs-container" ng-if="vm.formattedDischargePeakDates.length > 0 || this.dischargeObj.length > 0 || this.measuredObj.length > 0">
<!-- Begin Sliders -->
<div class="slider-wrapper" ng-if="vm.error == false">
<span class="slider-text">Plot USGS Measurements <br>Between Months</span>
<rzslider class="gageplot-slider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
<span id="months2show" style="margin-bottom: 10px; width: 70px"></span>
</div>
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements Between Years</span>
<rzslider class="rzSlider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
<span id="years2show"></span>
<div class="slider-wrapper" ng-if="vm.error == false">
<span class="slider-text">Plot USGS Measurements <br>Between Years</span>
<rzslider class="gageplot-slider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
<span id="years2show" style="margin-bottom: 10px; margin-left: 20px; width: 70px;"></span>
</div>
</div>

<!-- End Sliders -->
<!--End Sliders -->

<!-- Start Legend -->
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<!--Begin Plot Options (log checkbox, age and quality radios)-->
<div class="age-quality-container">
<br style="line-height: 25px" />
<input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()" >
<label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label><br>
<input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()" >
<label for="ageData" ng-if="vm.error == false"> Age</label>

<input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')" >
<label for="qualityData" ng-if="vm.error == false"> Quality</label>
</div>
<!--End Plot Options -->

<!-- Start Legend -->
<div class="ageQualityLegend" ng-if="vm.error == false">
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Age:</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Quality:</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" style="clear:left; width: 230px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color: red;">Most Recent Measurement</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: red;">Most Recent Measurement</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: orange;">Measurements in the Last Year</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
<span style="color: orange;">Measurements in the Last Year</span>
</div>
</div>

<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color:#2ED017;">Excellent - Good</span>
</div>
<div class="ageQualityLegend-item">
<span style="color:#E7F317;">Fair</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #FFA200;">Poor</span>
</div>
<span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
</div>
</div>

<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" style="clear:left; width: 130px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color:#2ED017;">Excellent - Good</span>
</div>
<div class="ageQualityLegend-item">
<span style="color:#E7F317;">Fair</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #FFA200;">Poor</span>
</div>
</div>
</div>
<!--End Legend -->
</div>
<!-- End Legend -->


<highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
<div class="data-sources">
Data:
Expand Down
2 changes: 1 addition & 1 deletion src/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ var StreamStats;
'StreamStats.Services',
'StreamStats.Controllers',
'WiM.Services', 'WiM.Event', 'wim_angular', 'rzModule', 'nvd3', 'daterangepicker',
'angularjs-dropdown-multiselect',
'angularjs-dropdown-multiselect',
'ngSanitize',
'highcharts-ng'
])
Expand Down
86 changes: 72 additions & 14 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1100,7 +1100,7 @@ div.leaflet-top > .elevation {
}

.ageQualityLegend {
position: absolute;
position: flex;
bottom: 220px;
left: 680px;
background-color: white;
Expand All @@ -1110,12 +1110,30 @@ div.leaflet-top > .elevation {
font-size: 13px;
font-weight: bold;
z-index: 100;
}

.ageQualityLegend-item {
margin-left: -10px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px
}

.ageQualityLegend-item {
display: flex;
align-items: center;
}
}

.age-quality-container {
width: 20%;
margin-top: 10px;
margin-right: 20px;
margin-left: -35px;
padding: 0 0%;
}

.age-quality-wrapper {
justify-content: left;
float: left

}


/*
Expand Down Expand Up @@ -1568,23 +1586,63 @@ Batch processor modal
padding: 0 0 0 3px !important;
}

.slider-container {
.stagedischarge-inputs-container {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 20%;
width: 80%;
padding: 0 0%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 60px
}

.slider-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
width: 20%;
margin-right: 50px;
}
.gageplot-slider .rz-pointer {
top: -22px;
z-index: 3;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #0db9f0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 5;
}

.gageplot-slider .rz-pointer.rz-active:after {
background-color: #0db9f0;
}

.gageplot-slider .rz-bubble {
bottom: -15px;
padding: 1px 3px;
color: #55637d;
cursor: default;
}

.gageplot-slider .rz-pointer:after {
position: absolute;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
background: #0db9f0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
content: '';
}

.gageplot-slider .rz-pointer:hover:after {
background-color: #0db9f0;
}

.slider-text {
font-size: 14px;
font-size: 13px;
white-space: nowrap;
color: #2D3146BF;
}

#months2show, #years2show {
Expand Down

0 comments on commit bd23c55

Please sign in to comment.