Custom range date picker buttons

[Jared Wiltshire]

@sbaik contrary to the advise of my colleagues I would recommend that you do not modify or override the mangoUi~ngMango.js file. This is a bad idea and will likely cause errors and/or missing features and fixes when you upgrade the UI module.

This should do what you need, modify to add whatever buttons you need.

<div class="ma-designer-root" id="eebcb042-7a75-4837-bf26-d76efc6a05e2" style="width: 1366px; height: 768px; position: relative;" ng-init="">
    <ma-now ng-if="!dateBar.preset" update-interval="5 seconds" output="now" on-change="dateBar.from = ($value | maMoment:'subtract':numDays:'days'); dateBar.to = $value"></ma-now>
    <ma-button id="9cc2c144-4df9-41de-bb53-523016daa8b1" raised="true" style="position: absolute; left: 169px; top: 175px;" label="Last 2 days" ng-click="dateBar.preset = null; numDays = 2;"></ma-button>
    <ma-button id="1209dae7-9cf8-43fb-8f26-e9650eeae913" raised="true" style="position: absolute; left: 273px; top: 175px;" label="Last 3 days" ng-click="dateBar.preset = null; numDays = 3;"></ma-button>
</div> 

It basically starts its own update timer which sets the date bar dates whenever a preset is not selected.

[sbaik]

@jared-wiltshire said in Custom range date picker buttons:

It basically starts its own update timer which sets the date bar dates whenever a preset is not selected.

This did work for me and I was able to create multiple buttons of custom date ranges with various update rates to help with the max points issue I had brought up in a different post.

I removed the custom date picker I used shown in my original post and used these new buttons. This works fine as they don't need all the presets in the drop down. The problem is that they want the ability to pick the from and to date and time that the custom date picker had. I know this can be done in the dateBar, but my pages are in root level to display the page only for the end user and does not have access to the dateBar.

How would I incorporate the buttons into the custom date picker code in my OP?

Thanks,

[Jared Wiltshire]

There's examples for using date pickers under the examples menu.

[sbaik]

@jared-wiltshire

Found it.

Another thing:
The buttons make the preset null, so it does not display when a page is loaded and no buttons have been pressed yet. I like the preset being defaulted to last 1 day.

[Jared Wiltshire]

See the ng-init? Set it to ng-init="dateBar.preset = 'LAST_1_DAYS'"

[sbaik]

@jared-wiltshire

Awesome. Thank you Jared.

[sbaik]

@jared-wiltshire said in Custom range date picker buttons:

See the ng-init? Set it to ng-init="dateBar.preset = 'LAST_1_DAYS'"

I thought this had worked but apparently not. I'm not sure if it has to do with the fact that the custom pages are a root page to hide the side and top bar, or something else.

It does populate the point name with the colored squares at the bottom of the chart but it does not populate the graph itself until one of the date buttons is clicked.

<div class="ma-designer-root" id="6bdb9bd5-45a2-4d17-a299-086cb5416f5e" style="width: 1920px; height: 980px; position: relative; background-color: rgb(0, 130, 125); font-size: 30px;" ma-center="true" ma-scale-to="ma-ui-page-view" ng-init="dateBar.preset = 'LAST_1_DAYS'">

<!--Trends-->
<ma-now ng-if="!dateBar.preset" update-interval="5 seconds" output="now" on-change="dateBar.from = ($value | maMoment:'subtract':numDays:'days'); dateBar.to = $value"></ma-now>
<ma-button id="9cc2c144-4df9-41de-bb79-523016daa8b1" raised="true" style="position: absolute; left: 1017px; top: 729px; font-weight: bolder;" label="Last 1 day" ng-click="dateBar.preset = null; numDays = 1;" hue="hue-2" palette="warn"></ma-button>
<ma-now ng-if="!dateBar.preset" update-interval="5 seconds" output="now" on-change="dateBar.from = ($value | maMoment:'subtract':numDays:'days'); dateBar.to = $value"></ma-now>
<ma-button id="9cc2c144-4df9-41de-bb53-523016daa8b1" raised="true" style="position: absolute; left: 1017px; top: 780px; font-weight: bolder;" label="Last 2 days" ng-click="dateBar.preset = null; numDays = 2;" hue="hue-2" palette="warn"></ma-button>
<ma-now ng-if="!dateBar.preset" update-interval="5 seconds" output="now" on-change="dateBar.from = ($value | maMoment:'subtract':numDays:'days'); dateBar.to = $value"></ma-now>
<ma-button id="1209dae7-9cf8-43fb-8f26-e9650eeae913" raised="true" style="position: absolute; left: 1017px; top: 831px; width: 104px; height: 48px; font-weight: bolder;" label="Last 3 days" ng-click="dateBar.preset = null; numDays = 3;" hue="hue-2" palette="warn"></ma-button>
<ma-now ng-if="!dateBar.preset" update-interval="5 minutes" output="now" on-change="dateBar.from = ($value | maMoment:'subtract':numDays:'days'); dateBar.to = $value"></ma-now>
<ma-button id="1209dae7-9cf8-43fb-8f26-e9650ehrw913" raised="true" style="position: absolute; left: 1017px; top: 882px; font-weight: bolder;" label="Last 1 week" ng-click="dateBar.preset = null; numDays = 7;" hue="hue-2" palette="warn"></ma-button>
  
<ma-watch-list-get ng-model="watchList2" on-points-change="watchList2Points = $points" watch-list-xid="LocalTankLevel"></ma-watch-list-get>
<ma-watch-list-chart id="tank1" watch-list="watchList2" points="watchList2Points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" simplify-tolerance="dateBar.simplifyTolerance" style="position: absolute; width: 750px; height: 400px; left: 1141px; top: 129px; background-color: rgb(36, 36, 36); z-index: 0;" ng-init="dateBar.preset = 'LAST_1_DAYS'"></ma-watch-list-chart>
<ma-watch-list-get ng-model="watchList3" on-points-change="watchList3Points = $points" watch-list-xid="43PSPressure"></ma-watch-list-get>
<ma-watch-list-chart id="tank2" watch-list="watchList3" points="watchList3Points" from="dateBar.from" to="dateBar.to" rollup-type="dateBar.rollupType" rollup-intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" simplify-tolerance="dateBar.simplifyTolerance" style="position: absolute; width: 750px; height: 400px; left: 1141px; top: 552px; background-color: rgb(36, 36, 36); z-index: 0;"></ma-watch-list-chart>
<div id="5d6fde5a-5bc4-4bcc-9cce-5ee6481813fd" style="position: absolute; left: 1398px; top: 552px; color: rgb(255, 254, 254); font-size: 25px; font-weight: bold; width: 250px; height: 24.1406px; text-align: center; z-index: 2;">PRESSURE</div>
<div id="40b6ab15-6a7f-41f5-8c30-d50f8c196d38" style="position: absolute; left: 1398px; top: 129px; color: rgb(255, 254, 254); font-size: 25px; font-weight: bold; width: 250px; height: 24.1406px; text-align: center; z-index: 2;">TANK LEVEL</div>    
</div>

What it should look like, or what it looks like after pressing button

[Jared Wiltshire]

@sbaik sorry I must not have noticed that you were not using the date bar. I would do something like this -

<div class="ma-designer-root" id="b5c5db4b-13f5-4433-bdf5-98c065c91954" style="width: 1366px; height: 768px; position: relative;" ng-init="date = {preset: 'LAST_1_DAYS'}">

    <pre id="bba84701-48c3-42b0-8279-1d476a201e67" style="position: absolute; left: 104px; top: 433px; width: 380px; height: 184px;" ng-bind="date | json"></pre>
    
    <md-input-container id="162fa0bd-34ec-4e48-ad06-fa202fdfb041" style="position: absolute; left: 128px; top: 212px; width: 200px;">
        <label>From date</label>
        <ma-date-picker ng-model="date.from" ng-change="date.preset = null"></ma-date-picker>
    </md-input-container>
    
    <md-input-container id="89fc0bf0-68f7-4c52-ab58-8239cd51f7b0" style="position: absolute; left: 332px; top: 212px; width: 200px;">
        <label>To date</label>
        <ma-date-picker ng-model="date.to" ng-change="date.preset = null"></ma-date-picker>
    </md-input-container>
    
    <ma-now ng-if="date.preset === 'LAST_1_DAYS'" output="date.now" update-interval="5 minutes" on-change="date.from = ($value | maMoment:'subtract':1:'days'); date.to = $value"></ma-now>
    <ma-now ng-if="date.preset === 'LAST_2_DAYS'" output="date.now" update-interval="1 hours" on-change="date.from = ($value | maMoment:'subtract':2:'days'); date.to = $value"></ma-now>
    <ma-now ng-if="date.preset === 'LAST_3_DAYS'" output="date.now" update-interval="1 hours" on-change="date.from = ($value | maMoment:'subtract':3:'days'); date.to = $value"></ma-now>
    <ma-now ng-if="date.preset === 'LAST_1_WEEKS'" output="date.now" update-interval="1 hours" on-change="date.from = ($value | maMoment:'subtract':1:'weeks'); date.to = $value"></ma-now>
    <ma-now ng-if="date.preset === 'LAST_1_MONTHS'" output="date.now" update-interval="2 hours" on-change="date.from = ($value | maMoment:'subtract':1:'months'); date.to = $value"></ma-now>

    <md-button id="9937c368-84c6-4e63-a7f1-1c04e1cec714" style="position: absolute; left: 159px; top: 315px;" ng-click="date.preset = 'LAST_1_DAYS'" class="md-button md-raised" ng-class="{'md-accent': date.preset === 'LAST_1_DAYS'}">Last 1 day</md-button>
    <md-button id="4db6e480-bba2-4b4e-9605-a871b71d3235" style="position: absolute; left: 263px; top: 315px;" ng-click="date.preset = 'LAST_2_DAYS'" class="md-button md-raised" ng-class="{'md-accent': date.preset === 'LAST_2_DAYS'}">Last 2 days</md-button>
    <md-button id="f6282cb7-4a65-4cef-a1da-0651e0738f4a" style="position: absolute; left: 367px; top: 315px;" ng-click="date.preset = 'LAST_3_DAYS'" class="md-button md-raised" ng-class="{'md-accent': date.preset === 'LAST_3_DAYS'}">Last 3 days</md-button>
    <md-button id="d4dfe756-bbca-4bf8-addb-74ebae291a97" style="position: absolute; left: 471px; top: 315px;" ng-click="date.preset = 'LAST_1_WEEKS'" class="md-button md-raised" ng-class="{'md-accent': date.preset === 'LAST_1_WEEKS'}">Last 1 week</md-button>
    <md-button id="997a42d5-7aa0-4341-b51e-7d9267e6824a" style="position: absolute; left: 575.453px; top: 315px;" ng-click="date.preset = 'LAST_1_MONTHS'" class="md-button md-raised" ng-class="{'md-accent': date.preset === 'LAST_1_MONTHS'}">Last 1 month</md-button>
</div>

I've added time pickers so you can select an exact range, and used <md-button>s which highlight when clicked. Also added a button for last 1 month just so you can see that you can use any time unit. The multiple <ma-now> components are needed so that the dates update immediately when the button is clicked.

You probably want to adjust update-interval for each <ma-now> to suit your liking, this is the rate at which it will update the graph for the selected time period.

[sbaik]

@jared-wiltshire

Thank you for the quick response. That worked beautifully.

[sasa]

@Jared-Wiltshire how to change the time? It should not use "now" - instead a fix time like 06:00 a.m.

Thanks!