Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support discrete events (e.g. annotations) #5

Closed
wants to merge 22 commits into from
Closed

Support discrete events (e.g. annotations) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
81224e6
Add basic support for discrete document events
retzkek Mar 28, 2017
e8c2496
Calculate event width from duration
retzkek Mar 28, 2017
1d25cbd
Remove debug log
retzkek Mar 28, 2017
733aa42
Add option to query data regardless of timepicker
retzkek Mar 28, 2017
72a9cca
make mousover highlighting of events optional
retzkek Mar 28, 2017
2e13c69
Make metric name color configurable
retzkek Mar 28, 2017
697040b
Make event fields configurable
retzkek Mar 28, 2017
ed862d5
Display tooltip for correct row
retzkek Mar 28, 2017
2668e7c
Tweak legend and tooltips
retzkek Mar 28, 2017
db89a75
Make background (no data) and lines configurable.
retzkek Mar 28, 2017
d2c88db
Make value text color configurable.
retzkek Mar 28, 2017
a83def5
Parse start and end times as UTC
retzkek Mar 29, 2017
ae920ef
Add configurable padding (not exposed in UI)
retzkek Mar 29, 2017
5dc655e
Fix padding for metric names
retzkek Mar 29, 2017
323045c
Fix padding for lines
retzkek Mar 29, 2017
16ff691
Revert padding options, needs some tweaking
retzkek Mar 29, 2017
2c23173
Padding take 2, using CSS margins
retzkek Mar 29, 2017
a53a287
Scale fonts with row height
retzkek Mar 29, 2017
34cbad5
Add option to put metric names on right side.
retzkek Mar 29, 2017
bf738cd
Truncate events that extend beyond end time
retzkek Mar 29, 2017
1c67937
Truncate events that start before the time range
retzkek Jun 26, 2017
1297492
Fix time ranges/zoom when names are on right.
retzkek Jun 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/canvas-metric.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/canvas-metric.js.map
View file
Open in desktop

Large diffs are not rendered by default.

45 changes: 45 additions & 0 deletions dist/colors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,49 @@

<div class="editor-row">
<h5 class="page-heading">Text Colors</h5>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label">
Metric Names
</span>
<input type="text" placeholder="text" ng-model="ctrl.panel.metricNameColor" class="gf-form-input max-width-12" ng-blur="ctrl.updateColorInfo()">
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.metricNameColor" ng-change="ctrl.updateColorInfo()" ></spectrum-picker>
</span>
</div>

<div class="gf-form">
<span class="gf-form-label">
Value Text
</span>
<input type="text" placeholder="text" ng-model="ctrl.panel.valueTextColor" class="gf-form-input max-width-12" ng-blur="ctrl.updateColorInfo()">
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.valueTextColor" ng-change="ctrl.updateColorInfo()" ></spectrum-picker>
</span>
</div>

<div class="gf-form">
<span class="gf-form-label">
Background
</span>
<input type="text" placeholder="text" ng-model="ctrl.panel.backgroundColor" class="gf-form-input max-width-12" ng-blur="ctrl.updateColorInfo()">
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.backgroundColor" ng-change="ctrl.updateColorInfo()" ></spectrum-picker>
</span>
</div>

<div class="gf-form">
<span class="gf-form-label">
Lines
</span>
<input type="text" placeholder="text" ng-model="ctrl.panel.lineColor" class="gf-form-input max-width-12" ng-blur="ctrl.updateColorInfo()">
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.lineColor" ng-change="ctrl.updateColorInfo()" ></spectrum-picker>
</span>
</div>
</div>
</div>


<div class="editor-row">
<h5 class="page-heading">Color Mappings</h5>
Expand Down
71 changes: 60 additions & 11 deletions dist/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,18 @@
</div>

<div class="gf-form">
<gf-form-switch class="gf-form"
label="Write Metric Names"
label-class="query-keyword width-12"
checked="ctrl.panel.writeMetricNames"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<gf-form-switch class="gf-form"
label="Write Metric Names"
label-class="query-keyword width-12"
checked="ctrl.panel.writeMetricNames"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<gf-form-switch class="gf-form" ng-if="ctrl.panel.writeMetricNames"
label="on right"
label-class="query-keyword width-8"
checked="ctrl.panel.writeMetricNamesOnRight"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<span class="gf-form-label" ng-if="ctrl.panel.writeMetricNames && ctrl.panel.writeMetricNamesOnRight">width</span>
<input type="number" ng-model="ctrl.panel.metricNamesOnRightWidth" class="gf-form-input max-width-6" ng-blur="ctrl.render()" ng-if="ctrl.panel.writeMetricNames && ctrl.panel.writeMetricNamesOnRight">
</div>

<div class="gf-form">
Expand All @@ -31,18 +38,60 @@

<div class="gf-form">
<gf-form-switch class="gf-form"
label="Show Legend"
label-class="query-keyword width-12"
checked="ctrl.panel.showLegend"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
label="Show Legend"
label-class="query-keyword width-12"
checked="ctrl.panel.showLegend"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<gf-form-switch class="gf-form" ng-if="ctrl.panel.showLegend"
label="Show Metric Names"
label-class="query-keyword width-12"
checked="ctrl.panel.showLegendNames"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<gf-form-switch class="gf-form" ng-if="ctrl.panel.showLegend"
label="Show Percent"
label-class="query-keyword width-12"
checked="ctrl.panel.showLegendPercent"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
</div>

<div class="gf-form">
<gf-form-switch class="gf-form"
label="Show Legend Percent"
label="Highlight on Mouseover"
label-class="query-keyword width-12"
checked="ctrl.panel.showLegendPercent"
checked="ctrl.panel.highlightOnMouseover"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
</div>

</div>

<div class="editor-row">
<h5 class="page-heading">Events</h5>
<div class"section gf-form-group">
<div class="gf-form">
<gf-form-switch class="gf-form"
label="Query all data"
label-class="query-keyword width-12"
checked="ctrl.panel.queryAllData"
on-change="ctrl.onConfigChanged()"></gf-form-switch>
<p>Warning! This will expand the data selection interval to &quot;all time&quot;,
regardless of the time picker settings. This should only be used with discrete
event data, e.g. from Elasticsearch. Only events that cover the time range
from the time picker or override will be shown, however.</p>
</div>
</div>

<div class="gf-form">
<span class="gf-form-label">Event Begin Time Field</span>
<input type="text" ng-model="ctrl.panel.eventBeginField" class="gf-form-input max-width-12" ng-blur="ctrl.render()">
</div>

<div class="gf-form">
<span class="gf-form-label">Event End Time Field</span>
<input type="text" ng-model="ctrl.panel.eventEndField" class="gf-form-input max-width-12" ng-blur="ctrl.render()">
</div>

<div class="gf-form">
<span class="gf-form-label">Event Name Field</span>
<input type="text" ng-model="ctrl.panel.eventNameField" class="gf-form-input max-width-12" ng-blur="ctrl.render()">
</div>
</div>
11 changes: 7 additions & 4 deletions dist/module.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@


<div ng-show="ctrl.panel.showLegend">
<div ng-repeat="info in ctrl.data[0].legendInfo | orderBy:'-ms'" style="cursor: default; display:inline-block; margin-right:15px;" ng-mousemove="ctrl.showLegandTooltip($event, info);" ng-mouseleave="ctrl.clearTT()">
<div ng-style="{ 'background-color': ctrl.getColor(info.val) }" style="width:10px; height:10px; display:inline-block;"></div> {{ info.val }}
<span ng-show="ctrl.panel.showLegendPercent">({{info.per}}%)</span>
</div
<div ng-repeat="metric in ctrl.data">
<span ng-show="ctrl.panel.showLegendNames">{{ metric.name }}: </span>
<div ng-repeat="info in metric.legendInfo | orderBy:'-ms'" style="cursor: default; display:inline-block; margin-right:15px;" ng-mousemove="ctrl.showLegandTooltip($event, info);" ng-mouseleave="ctrl.clearTT()">
<div ng-style="{ 'background-color': ctrl.getColor(info.val) }" style="width:10px; height:10px; display:inline-block;"></div> {{ info.val }}
<span ng-show="ctrl.panel.showLegendPercent">({{info.per}}%)</span>
</div>
</div>
</div>
Loading