grafana/public/app/plugins/panel/graph/tab_display.html
Adela Almasan 2beee35567
Timeseries: Time regions migration (#66998)
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
2023-04-27 05:28:58 +03:00

179 lines
5.3 KiB
HTML

<div class="gf-form-group">
<div class="grafana-info-box">
<h5>Migration</h5>
<p>
Consider switching to the Time series visualization type. It is a more capable and performant version of this panel.
</p>
<p>
<button class="btn btn-primary" ng-click="ctrl.migrateToReact()">
Migrate
</button>
</p>
<p>Some features are not supported in the new panel yet.</p>
</div>
<gf-form-switch
class="gf-form"
label="Bars"
label-class="width-8"
checked="ctrl.panel.bars"
on-change="ctrl.render()"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Lines"
label-class="width-8"
checked="ctrl.panel.lines"
on-change="ctrl.render()"
></gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.lines">
<label class="gf-form-label width-8" for="linewidth-select-input">Line width</label>
<div class="gf-form-select-wrapper max-width-5">
<select
id="linewidth-select-input"
class="gf-form-input"
ng-model="ctrl.panel.linewidth"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<gf-form-switch
ng-disabled="!ctrl.panel.lines"
class="gf-form"
label="Staircase"
label-class="width-8"
checked="ctrl.panel.steppedLine"
on-change="ctrl.render()"
></gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.lines">
<label class="gf-form-label width-8" for="fill-select-input">Area fill</label>
<div class="gf-form-select-wrapper max-width-5">
<select
id="fill-select-input"
class="gf-form-input"
ng-model="ctrl.panel.fill"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form" ng-if="ctrl.panel.lines && ctrl.panel.fill">
<label class="gf-form-label width-8">Fill gradient</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.fillGradient"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<gf-form-switch
class="gf-form"
label="Points"
label-class="width-8"
checked="ctrl.panel.points"
on-change="ctrl.render()"
></gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.points">
<label class="gf-form-label width-8" for="pointradius-select-input">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5">
<select
id="pointradius-select-input"
class="gf-form-input"
ng-model="ctrl.panel.pointradius"
ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<gf-form-switch
class="gf-form"
label="Alert thresholds"
label-class="width-8"
checked="ctrl.panel.options.alertThreshold"
on-change="ctrl.render()"
></gf-form-switch>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Stacking and null value</h5>
<gf-form-switch
class="gf-form"
label="Stack"
label-class="width-7"
checked="ctrl.panel.stack"
on-change="ctrl.render()"
>
</gf-form-switch>
<gf-form-switch
class="gf-form"
ng-show="ctrl.panel.stack"
label="Percent"
label-class="width-7"
checked="ctrl.panel.percentage"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7" for="null-value-select-input">Null value</label>
<div class="gf-form-select-wrapper">
<select
id="null-value-select-input"
class="gf-form-input max-width-9"
ng-model="ctrl.panel.nullPointMode"
ng-options="f for f in ['connected', 'null', 'null as zero']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
<label class="gf-form-label width-9" for="tooltip-mode-select-input">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select
id="tooltip-mode-select-input"
class="gf-form-input"
ng-model="ctrl.panel.tooltip.shared"
ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9" for="tooltip-sort-select-input">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select
id="tooltip-sort-select-input"
class="gf-form-input"
ng-model="ctrl.panel.tooltip.sort"
ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.value_type"
ng-options="f for f in ['cumulative','individual']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>