2015-11-05 06:13:13 -06:00
< div class = "editor-row" >
2016-09-21 00:40:12 -05:00
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Data< / h5 >
2016-09-21 04:23:39 -05:00
< div class = "gf-form" >
< label class = "gf-form-label width-10" > Table Transform< / label >
< div class = "gf-form-select-wrapper max-width-15" >
< select class = "gf-form-input" ng-model = "editor.panel.transform" ng-options = "k as v.description for (k, v) in editor.transformers" ng-change = "editor.transformChanged()" > < / select >
< / div >
< / div >
< div class = "gf-form-inline" >
< div class = "gf-form" >
< label class = "gf-form-label width-10" > Columns< / label >
< / div >
2016-09-21 00:40:12 -05:00
< div class = "gf-form" ng-repeat = "column in editor.panel.columns" >
< label class = "gf-form-label" >
< i class = "pointer fa fa-remove" ng-click = "editor.removeColumn(column)" > < / i >
< span > {{column.text}}< / span >
< / label >
< / div >
< div class = "gf-form" >
< metric-segment segment = "editor.addColumnSegment" get-options = "editor.getColumnOptions()" on-change = "editor.addColumn()" > < / metric-segment >
2015-11-05 06:13:13 -06:00
< / div >
< / div >
< / div >
2016-09-21 00:40:12 -05:00
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Table Display< / h5 >
2017-05-08 08:57:15 -05:00
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Rows per page< / label >
< input type = "number" class = "gf-form-input width-6"
placeholder="100" data-placement="right"
ng-model="editor.panel.pageSize"
ng-change="editor.render()"
ng-model-onblur>
< / div >
< gf-form-switch class = "gf-form" label-class = "width-8" switch-class = "max-width-6" label = "Scroll" checked = "editor.panel.scroll" on-change = "editor.render()" > < / gf-form-switch >
< div class = "gf-form max-width-17" >
< label class = "gf-form-label width-8" > Font size< / label >
< div class = "gf-form-select-wrapper width-6" >
< select class = "gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.render()">< / select >
< / div >
< / div >
< / div >
2015-11-05 06:13:13 -06:00
< / div >
2017-05-08 04:17:29 -05:00
< h5 class = "section-heading" >
2017-05-08 08:57:15 -05:00
< span style = "padding-right: 10px;" > Column Style Rules< / span >
< button class = "btn btn-secondary btn-small" ng-click = "editor.addColumnStyle()" >
< i class = "fa fa-plus" > < / i > Add
< / button >
2017-05-08 04:17:29 -05:00
< / h5 >
2017-04-27 14:23:49 -05:00
2017-05-08 04:17:29 -05:00
< div class = "form-tabs-wrapper" >
2017-05-08 08:57:15 -05:00
< ul class = "gf-tabs" >
< li class = "gf-tabs-item" ng-repeat = "style in editor.panel.styles" >
< a class = "gf-tabs-link" ng-click = "editor.activeStyleIndex = $index" ng-class = "{active: editor.activeStyleIndex === $index}" > {{style.pattern || 'New rule'}}< / a >
< / li >
< / ul >
2017-05-08 04:17:29 -05:00
< / div >
< div class = "form-tabs-content" ng-repeat = "style in editor.panel.styles" ng-if = "editor.activeStyleIndex === $index" >
2017-04-27 14:23:49 -05:00
2017-05-08 08:57:15 -05:00
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Options< / h5 >
< div class = "gf-form-inline" >
< div class = "gf-form" >
< label class = "gf-form-label width-13" > Apply to columns named< / label >
< input type = "text" placeholder = "Name or regex" class = "gf-form-input width-13" ng-model = "style.pattern" bs-tooltip = "'Specify regex using /my.*regex/ syntax'" bs-typeahead = "editor.getColumnNames" ng-blur = "editor.render()" data-min-length = 0 data-items = 100 ng-model-onblur data-placement = "right" >
< / div >
< / div >
< div class = "gf-form" ng-if = "style.type !== 'hidden'" >
< label class = "gf-form-label width-13" > Column Header< / label >
< input type = "text" class = "gf-form-input width-13" ng-model = "style.alias" ng-change = "editor.render()" ng-model-onblur placeholder = "Override header label" >
< / div >
< / div >
2017-05-08 04:17:29 -05:00
2017-05-08 08:57:15 -05:00
< div class = "section gf-form-group" >
< h5 class = "section-heading" > Type< / h5 >
2017-05-08 08:26:05 -05:00
2017-05-08 08:57:15 -05:00
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Type< / label >
< div class = "gf-form-select-wrapper width-12" >
< select class = "gf-form-input" ng-model = "style.type" ng-options = "c.value as c.text for c in editor.columnTypes" ng-change = "editor.render()" > < / select >
< / div >
< / div >
< div class = "gf-form" ng-if = "style.type === 'date'" >
< label class = "gf-form-label width-8" > Date Format< / label >
< metric-segment-model property = "style.dateFormat" options = "editor.dateFormats" on-change = "editor.render()" custom = "true" > < / metric-segment-model >
< / div >
2016-09-21 04:23:39 -05:00
2017-05-08 08:57:15 -05:00
< div ng-if = "style.type === 'string'" >
< gf-form-switch class = "gf-form" label-class = "width-8" ng-if = "style.type === 'string'" label = "Sanitize HTML" checked = "style.sanitize" change = "editor.render()" > < / gf-form-switch >
< / div >
2017-05-08 04:17:29 -05:00
2017-05-08 08:57:15 -05:00
< div ng-if = "style.type === 'number'" >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Unit< / label >
< div class = "gf-form-dropdown-typeahead width-12" ng-model = "style.unit" dropdown-typeahead2 = "editor.unitFormats" dropdown-typeahead-on-select = "editor.setUnitFormat(style, $subItem)" > < / div >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Decimals< / label >
< input type = "number" class = "gf-form-input width-4" data-placement = "right" ng-model = "style.decimals" ng-change = "editor.render()" ng-model-onblur >
< / div >
< / div >
< / div >
2017-05-08 04:17:29 -05:00
2017-05-08 08:57:15 -05:00
< div class = "section gf-form-group" ng-if = "style.type === 'number'" >
< h5 class = "section-heading" > Thresholds< / h5 >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Thresholds< tip > Comma separated values< / tip > < / label >
< input type = "text" class = "gf-form-input width-10" ng-model = "style.thresholds" placeholder = "50,80" ng-blur = "editor.render()" array-join ng-model-onblur >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Color Mode< / label >
< div class = "gf-form-select-wrapper width-10" >
< select class = "gf-form-input" ng-model = "style.colorMode" ng-options = "c.value as c.text for c in editor.colorModes" ng-change = "editor.render()" > < / select >
< / div >
< / div >
< div class = "gf-form" >
< label class = "gf-form-label width-8" > Colors< / label >
< span class = "gf-form-label" >
< spectrum-picker ng-model = "style.colors[0]" ng-change = "editor.render()" > < / spectrum-picker >
< / span >
< span class = "gf-form-label" >
2017-05-08 08:26:05 -05:00
< spectrum-picker ng-model = "style.colors[1]" ng-change = "editor.render()" > < / spectrum-picker >
< / span >
< span class = "gf-form-label" >
< spectrum-picker ng-model = "style.colors[2]" ng-change = "editor.render()" > < / spectrum-picker >
< / span >
< div class = "gf-form-label" >
< a class = "pointer" ng-click = "editor.invertColorOrder($index)" > Invert< / a >
2017-04-27 14:23:49 -05:00
< / div >
2017-05-08 04:17:29 -05:00
< / div >
< / div >
2016-09-21 04:23:39 -05:00
2017-05-08 08:26:05 -05:00
< div class = "clearfix" > < / div >
2017-05-08 04:17:29 -05:00
< button class = "btn btn-danger btn-small" ng-click = "editor.removeColumnStyle(style)" >
< i class = "fa fa-trash" > < / i > Remove Rule
< / button >
< br / >
< br / >
2015-11-05 06:13:13 -06:00
< / div >