Widget Tricks - ods-adv-analysis

<div class="container">
    <h2>Simple example to get and display the min and max of a date</h2>
    <ods-dataset-context context="stats"
                 stats-dataset="ods-api-monitoring"
                 stats-source="monitoring">
        <div ods-adv-analysis="dateanalysis"
             ods-adv-analysis-context="stats"
             ods-adv-analysis-select="min(timestamp) as mindate, max(timestamp) as maxdate">
            <h3>ods-adv-analysis result:</h3>
            <div class="row">
                <div class="col-sm-4">
                    <p>Min timestamp: {{ dateanalysis[0].mindate | date : 'medium' }}</p>
                    <p>Max timestamp: {{ dateanalysis[0].maxdate | date : 'medium' }}</p>
                </div>
                <div class="col-sm-8">
                    <pre style="margin:0"><code>{{ dateanalysis }}</code></pre>
                </div>
            </div>
        </div>
    </ods-dataset-context>

    <br/>

    <h2>Useful example with an ods-date-range-slider</h2>
    <ods-dataset-context context="stats,getdate"
                         stats-dataset="ods-api-monitoring"
                         stats-source="monitoring"
                         getdate-dataset="ods-api-monitoring"
                         getdate-source="monitoring">

        <div class="range-slider-ctn"
             ng-init="bounds = {'min':undefined, 'max':undefined, 'minselection':undefined, 'maxselection':undefined}">

            <!--
                Get the date range
            -->
            <div ods-adv-analysis="dateanalysis"
                 ods-adv-analysis-context="getdate"
                 ods-adv-analysis-select="min(timestamp) as mindate, max(timestamp) as maxdate">
                <!-- Process the min and max to get the correct format -->
                {{ bounds.min = (dateanalysis[0].mindate | moment : 'YYYY-MM-DD') ; '' }}
                {{ bounds.max = (dateanalysis[0].maxdate | moment : 'YYYY-MM-DD') ; '' }}
            </div>

            <!-- Init the date slider when min and max are ready -->
            <ods-date-range-slider ng-if="bounds.min && bounds.max"
                                   context="stats"
                                   initial-from="{{ bounds.min }}"
                                   initial-to="{{ bounds.max }}"
                                   start-bound="bounds.min"
                                   end-bound="bounds.max"
                                   date-field="timestamp"
                                   precision="day"
                                   from="bounds.minselection"
                                   to="bounds.maxselection">
            </ods-date-range-slider>

            <!-- Resetting the range by setting widget "from" and "to" to the min/max bounds computed with ods-adv-analysis -->
            <div ng-if="bounds.min && bounds.max"
                 class="range-slider-reset-button"
                 ng-class="{'range-slider-reset-button-disabled':
                             bounds.minselection == bounds.min && bounds.maxselection == bounds.max}"
                 ng-click="bounds.minselection = bounds.min;
                           bounds.maxselection = bounds.max">
                The entire period <i class="fa fa-arrows-h" aria-hidden="true"></i>
            </div>
        </div>

        <ods-table context="stats"></ods-table>

    </ods-dataset-context>
</div>

.range-slider-ctn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 13px 26px 32px 26px;
}

.odswidget-date-range-slider {
    width: 100%;
}

.range-slider-reset-button {
    margin-left: 0;
    margin-top: 13px;
    white-space: nowrap;
    font-size: 12px;
    padding: 3px 6px;
    line-height: 0;
    background-color: #e1e4e9;
    border-radius: 4px;
}

.range-slider-reset-button:not(.range-slider-reset-button-disabled):hover {
    opacity: 0.65;
}

.range-slider-reset-button-disabled {
    opacity: 0.5;
    pointer-event: none;
    text-decoration: none;
}

@media screen and (min-width: 500px) {
    .range-slider-ctn {
        flex-direction: row;
    }

    .range-slider-reset-button {
        margin-left: 50px;
        margin-top: 0;
    }
}

<ods-dataset-context context="ctx"
                     ctx-dataset="ods-api-monitoring"
                     ctx-source="monitoring">
    <div ods-adv-analysis="analysis"
         ods-adv-analysis-context="ctx"
         ods-adv-analysis-select="sum(nhits) as total"
         ods-adv-analysis-where="timestamp > now(days=-7)"
         ods-adv-analysis-group-by="date_format(timestamp, 'YYYY-MM-dd') as date">

        <h3>How many hits per day on Userclub domain, this past week ?</h3>
        <ul>
            <li ng-repeat="item in analysis">
                <strong>{{ item.total | number }} hits</strong> on {{ item.date | date }}
            </li>
        </ul>

        <h3>Average number of hits on Userclub domain, this past week</h3>
        <div ods-subaggregation="analysis"
             ods-subaggregation-serie-dayavg="MEAN(total)">
            An average of <strong>{{ results[0].dayavg | number:0 }} hits</strong> per day
        </div>
    </div>
</ods-dataset-context>