You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
5.4 KiB
122 lines
5.4 KiB
<div class="gf-form-group">
|
|
<h5>Legend</h5>
|
|
<div class="gf-form">
|
|
<editor-checkbox text="Series Table" model="ctrl.panel.legend.show" class="gf-form-checkbox" ></editor-checkbox>
|
|
<div ng-show="ctrl.panel.legend.show">
|
|
<editor-checkbox text="Min" model="ctrl.panel.legend.min" class="gf-form-checkbox" ></editor-checkbox>
|
|
<editor-checkbox text="Max" model="ctrl.panel.legend.max" class="gf-form-checkbox" ></editor-checkbox>
|
|
<editor-checkbox text="Avg" model="ctrl.panel.legend.avg" class="gf-form-checkbox" ></editor-checkbox>
|
|
<editor-checkbox text="Total" model="ctrl.panel.legend.total" class="gf-form-checkbox" ></editor-checkbox>
|
|
<editor-checkbox text="Current" model="ctrl.panel.legend.current" class="gf-form-checkbox" ></editor-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="gf-form">
|
|
<editor-checkbox text="Heatmap" model="ctrl.panel.treeMap.showLegend" class="gf-form-checkbox" ></editor-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-group">
|
|
<h5>Options</h5>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Mode</label>
|
|
<select
|
|
ng-options="option for option in ctrl.options.treeMap.modes"
|
|
ng-model="ctrl.panel.treeMap.mode" ng-change="ctrl.refresh()"></select>
|
|
</div>
|
|
<!-- <div class="gf-form">
|
|
<label class="gf-form-label width-10">Node Size Min</label>
|
|
<input type="text" placeholder="auto" class="input-small gf-form-input width-10" ng-model="ctrl.panel.treeMap.sizeDomainMin" ng-change="ctrl.refresh()"></input>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Node Size Max</label>
|
|
<input type="text" placeholder="auto" class="input-small gf-form-input width-10" ng-model="ctrl.panel.treeMap.sizeDomainMax" ng-change="ctrl.refresh()"></input>
|
|
</div> -->
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Thresholds
|
|
<tip>Define threshold values to map the colors</tip>
|
|
</label>
|
|
<input
|
|
type="text" class="input-small gf-form-input width-10"
|
|
ng-model="ctrl.panel.thresholds" ng-change="ctrl.updateThresholds()"
|
|
placeholder="0,10" ng-model-onblur />
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Colors</label>
|
|
<div class="gf-form-inline" ng-repeat="color in ctrl.panel.colors track by $index">
|
|
<label class="gf-form-label">
|
|
<a ng-click="ctrl.removeColor($index)"><i class="pointer fa fa-remove"> </i></a>
|
|
<spectrum-picker ng-model="color" ng-change="ctrl.changeColor($index, color)" ng-model-onblur></spectrum-picker>
|
|
</label>
|
|
</div>
|
|
<span class="gf-form-label">
|
|
<a ng-click="ctrl.addColor()">
|
|
<i class="fa fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<span class="gf-form-label">
|
|
<a ng-click="ctrl.invertColorOrder()">
|
|
Invert
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Color By<tip>falls back to 'value' field on non-aggregated data</tip></label>
|
|
<select ng-options="option for option in ctrl.options.aggregationFunctions" ng-model="ctrl.panel.treeMap.colorByFunction" ng-change="ctrl.refresh()"></select>
|
|
</div>
|
|
<div class="gf-form">
|
|
<label class="gf-form-label width-10">Size By<tip>falls back to 'value' field on non-aggregated data</tip></label>
|
|
<select ng-model="ctrl.panel.treeMap.sizeByFunction" ng-change="ctrl.refresh()">
|
|
<option>constant</option>
|
|
<option ng-repeat="option in ctrl.options.aggregationFunctions">{{option}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gf-form-group" ng-show="false">
|
|
<div class="edit-tab-content">
|
|
<div class="gf-form-group">
|
|
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
|
|
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesHeatmapCtrl">
|
|
<div class="gf-form">
|
|
<label class="gf-form-label">alias or regex</label>
|
|
</div>
|
|
<div class="gf-form width-15">
|
|
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15">
|
|
</div>
|
|
<div class="gf-form" ng-repeat="option in currentOverrides">
|
|
<label class="gf-form-label">
|
|
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
|
|
<span ng-show="option.propertyName === 'color'">
|
|
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
|
|
</span>
|
|
<span ng-show="option.propertyName === 'thresholds'">
|
|
Thresholds: <input ng-model="option.value" ng-blur="thresholdsChanged(option)"></input>
|
|
</span>
|
|
<span ng-show="option.propertyName !== 'color' && option.propertyName !== 'thresholds'">
|
|
{{option.name}}: {{option.value}}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="gf-form">
|
|
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="gf-form gf-form--grow">
|
|
<div class="gf-form-label gf-form-label--grow"></div>
|
|
</div>
|
|
|
|
<div class="gf-form">
|
|
<label class="gf-form-label">
|
|
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
|
|
<i class="fa fa-plus"></i> Add override
|
|
</button>
|
|
</div>
|
|
</div>
|