<div ng-class="css('rowFluid')">
    <div class="page-header">
        <h1>Reporting</h1>
        Unlock the data with just a few lines of configuration
    </div>
</div>

<div class="container-fluid" ng-controller="DemoCtrl">
    <div ng-class="css('rowFluid')">
        <div class="col-sm-3 span3">
            <affix></affix>
        </div>

    <div class="col-sm-9 span9 affix-section">
    <p>Simple reports can be produced by navigating to URLs of the format /#/analyse/modelname - see example <a
            href="/#!/analyse/b_using_options">here</a>.</p>

    <p>More useful reports can be run by passing an <a href="http://docs.mongodb.org/manual/core/aggregation-pipeline/">aggregation
        pipeline</a>
        to the server using the format <strong>/#/analyse/model?r=[pipeline]</strong> - for example
        <a href="/#!/analyse/g_conditional_fields?r=%5B%7B%22$group%22:%7B%22_id%22:%22$sex%22,%22count%22:%7B%22$sum%22:1%7D%7D%7D%5D">/#/analyse/g_conditional_fields?r=[{"$group":{"_id":"$sex","count":{"$sum":1}}}]</a>
        produces a breakdown of the men and women in a collection.</p>

    <section id="options" name="Options" affix-scroll>
        <h3>Options</h3>
    </section>

    <p>Reports can be enhanced by passing an object containing the pipeline as a property, along with a number of
        options:</p>
    <ul>
        <li><strong>title</strong> this option allows a title to be specified. The default is the model name.</li>
        <li><strong>columnDefs</strong> an array of column instruction objects which determines the output order and
            appearance.
            For full details see <a href="https://github.com/angular-ui/ng-grid/wiki/Defining-columns">the ng-grid
                documentation</a>
            but the most common uses are:
            <ul>
                <li><strong>field</strong> the name of the field in the model.</li>
                <li><strong>displayName</strong> (optional) the column heading.</li>
                <li><strong>width</strong> (optional) the desired display width.</li>
                <li><strong>align</strong> (optional - default left) the desired text alignment. If present must be one
                    of left, right, centre, center.
                </li>
                <li><strong>cellClass</strong> (optional) a CSS class to be added to the cell.</li>
                <li><strong>cellFilter</strong> (optional) an Angular filter (such as <em>number</em> or
                    <em>currency</em> to be applied to the value.
                </li>
                <li><strong>totalsRow</strong> (optional - <strong>an extension to ng-grid</strong>) a text value
                    (generally "Total") or <em>$SUM</em></li>
            </ul>
        <li><strong>columnTranslations</strong> an array of objects giving instructions for translating returned data.
            The objects are made up as follows:
            <ul>
                <li><strong>field</strong> (mandatory) the name of the results column to translate</li>
                <li><strong>fn</strong> a function(row,callback) which modifies a row of the results set and then calls the callback.
                    There is an example in <a href="/code/g_conditional_fields.js">this file</a> (search for "functiondemo")</li>
                <li><strong>translations</strong> an array of value&rarr;display mappings, such as <strong>[{value:'M',
                    display:'Male'},{value:'F', display:'Female'}]</strong></li>
                <li><strong>ref</strong> the name of a Mongoose model to use to look up the current value against
                    (returning a concatenation of the fields with a truthy <strong>list</strong> key)
                </li>
            </ul>
            If there is more than one of <strong>fn</strong>, <strong>translations</strong> and <strong>ref</strong> they are performed in that order.
        </li>
        <li><strong>drilldown</strong> a url that clicking on the row will navigate to. A |fieldname| will be replaced
            with the value of the fieldname in the current row. For example a report
            listing one row per item might have a drilldown of <em>model/|_id|/edit</em> as seen in <a href="/#!/analyse/g_conditional_fields/totals">this</a> report.</li>
        <li><strong>params</strong> contains an array of parameters that can be used in the pipeline, normally in a
            $match such as {$match:{sex:("sex")}}. Parameters can have the following properties:
            <ul>
                <li><strong>value</strong> is the (mandatory) value used for the query when the page is first generated
                </li>
                <li><strong>type</strong> can be <em>'text'</em> (default), <em>'number'</em> or <em>'select'</em>. In
                    the case of <em>'select'</em> values must be defined for
                </li>
                <li><strong>label</strong> allows you to override the default input label</li>
                <li><strong>size</strong> sets <a href="http://twitter.github.io/bootstrap/base-css.html#forms">input control
                    width</a>.
                    Options are: mini, small (default), medium, large, xlarge, xxlarge and block-level..
                </li>

                <li><strong>enum</strong> an array of values to populate a select input</li>
                <li><strong>required</strong> should set to true if the query cannot be run without the parameter</li>
                <li><strong>noInput</strong> can be set to true to prevent the parameter being prompted for. Normally
                    used in conjunction with
                </li>
                <li><strong>conversionExpression</strong> an angular expression which generates and / or formats the
                    parameter at runtime.
                    For example
                    <pre>param + ' ' + record.surname | uppercase</pre>
                    would concatenate the values fom the current parameter
                    and the surname parameter and convert them to uppercase.
                </li>
            </ul>
        </li>
    </ul>
    <p>Use of date parameters is quite tricky. The following works (quotes omitted for clarity):</p>
        <pre>
        reportSchema = {
            pipeline: [
                { '$match': {$and : [{birth : {$lt:"(periodFinish)"}},{birth : {$gt:"(periodStart)"}}]}},
                {$group:{_id:'People',count:{$sum:1}}
            ],
            params: {
                periodStart: {value: "1800-01-01T00:00:00.000Z", type: 'text', add: 'ui-date ui-date-format ', conversionExpression: "param | date:'yyyy-MM-ddThh:mm:ss.sssZ'"},
                periodFinish: {value: "2099-01-01T00:00:00.000Z", type: 'text', add: 'ui-date ui-date-format ', conversionExpression: "param | date:'yyyy-MM-ddThh:mm:ss.sssZ'"}
                }
        };
        </pre>

    <p>Using these options the report above can be <a
            href="/#!/analyse/g_conditional_fields?r=%7B%22pipeline%22:%5B%7B%22$group%22:%7B%22_id%22:%22$sex%22,%22count%22:%7B%22$sum%22:1%7D%7D%7D%5D,%22title%22:%22Breakdown%20By%20Sex%22,%22columnDefs%22:%5B%7B%22field%22:%22_id%22,%22displayName%22:%22Sex%22%7D,%7B%22field%22:%22count%22,%22displayName%22:%22No%20of%20Applicants%22%7D%5D%7D">tidied
        up</a>.</p>

    <section id="schemas" name="Schemas" affix-scroll>
        <h3>Schemas</h3>
    </section>
    <p>If you looked at the link to that last report you would have realised that using the URL to specify a report
        format
        quickly becomes unmanageable. A neater alternative is to put the options into an object which is served up via a
        static in the model file - see <a href="/code/g_conditional_fields.js">here</a> for
        <a href="/#!/analyse/g_conditional_fields/breakdownbysex">some</a>
        <a href="/#!/analyse/g_conditional_fields/totalforonesex">examples</a>.</p>
</section>
</div>
</div>
</div>