grafana/panels/map2/editor.html

<style>
    .tabDetails {
        border-bottom: 1px solid #ddd;
        padding-bottom:20px;
    }
    .tabDetails td {
        padding-right: 10px;
        padding-bottom:10px;
    }
</style>
<div class="row-fluid" ng-controller="map2">
    <div class="span11">
        The map panel uses 2 letter country or US state codes to plot concentrations
        on a map. Darker terroritories mean more records matched that area. If
        multiple queries are sent from a single panel the <strong>first query will be
        displayed</strong>
    </div>
</div>

<div class="row-fluid">
    <div class="span3">
        <form>
            <h6>Field</h6>
            <input type="text" class="input-small" ng-model="panel.field">
        </form>
    </div>

    <div class="span6">
        <form class="input-append">
            <h6>Query</h6><input type="text" ng-model="panel.query">
        </form>
    </div>

    <div class="span1">
        <h6>Map</h6>
    </div>
</div>

<div class="row-fluid">
    <div class="span11">
        <h4>Display Options</h4>
    </div>
    <!--
        Rolling our own tab control here because the Angular-Strap Tab directive doesn't allow
        updates to components inside, which is quite bizarre.  Or I just can't figure it out...
    -->

    <div class="span11">
        <ul class="nav nav-tabs" ng-cloak="">
            <li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
                <a ng-click="tabClick(tab)">{{tab}}</a>
            </li>
        </ul>
    </div>
</div>

<div class="row-fluid tabDetails" ng-show="isActive('geopoints')">
    <div class="span8 offset1">
        <table>
            <tbody  >
            <tr>
                <td>Geopoints</td>
                <td>
                    <button type="button" class="btn" bs-button
                        ng-change="$emit('render')"
                        ng-class="{'btn-success': panel.display.geopoints.enabled}"
                        ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
                </td>
            </tr>
            <tr>
                <td>Point size</td>
                <td>
                    <input type="text" style="width:100px"
                        ng-change="$emit('render')"
                        data-placement="right"
                        bs-tooltip="'Controls the size of the geopoints on the map'"
                        ng-model="panel.display.geopoints.pointSize"
                        value="{{panel.display.geopoints.pointSize}}" />
                </td>
            </tr>
            <tr>
                <td>Point Transparency</td>
                <td>
                    <input type="text" style="width:100px"
                           ng-change="$emit('render')"
                           data-placement="right"
                           bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'"
                           ng-model="panel.display.geopoints.pointAlpha"
                           value="{{panel.display.geopoints.pointAlpha}}" />
                </td>
            </tr>
            <tr>
                <td>Autosizing</td>
                <td>
                    <input type="checkbox"
                           ng-change="$emit('render')"
                           data-placement="right"
                           bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row-fluid tabDetails" ng-show="isActive('binning')">
    <div class="span8 offset1">
        <table>
            <tbody  >
            <tr>
                <td>Binning</td>
                <td>
                    <button type="button" class="btn" bs-button
                            ng-change="$emit('render')"
                            ng-class="{'btn-success': panel.display.binning.enabled}"
                            ng-model="panel.display.binning.enabled">{{panel.display.binning.enabled|enabledText}}</button>
                </td>
            </tr>
            <tr>
                <td>Hexagon size</td>
                <td>
                    <input type="text" style="width:100px"
                           ng-change="$emit('render')"
                           data-placement="right"
                           bs-tooltip="'Controls the size of the hexagonal binning'"
                           ng-model="panel.display.binning.hexagonSize"
                           value="{{panel.display.binning.hexagonSize}}" />
                </td>
            </tr>
            <tr>
                <td>Hexagon Transparency</td>
                <td>
                    <input type="text" style="width:100px"
                           ng-change="$emit('render')"
                           data-placement="right"
                           bs-tooltip="'Controls the transparency of hexagonal bins. Valid numbers are between 0.0 and 1.0'"
                           ng-model="panel.display.binning.hexagonAlpha"
                           value="{{panel.display.binning.hexagonAlpha}}" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row-fluid tabDetails" ng-show="isActive('data')">
    <div class="span8 offset1">
        <table>
            <tbody  >
            <tr>
                <td>Data Points</td>
                <td>
                    <input type="text" style="width:100px"
                           ng-change="get_data()"
                           data-placement="right"
                           bs-tooltip="'Controls the number of samples used in the map. Be careful with this value!'"
                           ng-model="panel.display.data.samples"
                           value="{{panel.display.data.samples}}" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<h5>Panel Spy</h5>

<div class="row-fluid">
    <div class="span2">
        <label class="small">Spyable</label> <input type="checkbox" ng-model=
            "panel.spyable" ng-checked="panel.spyable">
    </div>

    <div class="span9 small">
        The panel spy shows 'behind the scenes' information about a panel. It can be
        accessed by clicking the in the top right of the panel.
    </div>
</div>