Skip to content

Commit 2bfbcce

Browse files
committed
Fixing IE Annotations
- Adding class for histogram-marker - Adding immage for annotations - Modifying jquery.flot.events to accept an image for an annotation - Changing annotations to use histogram-marker
1 parent 430efde commit 2bfbcce

File tree

5 files changed

+30
-15
lines changed

5 files changed

+30
-15
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.aws-config.json
3-
dist
3+
dist
4+
.DS_Store

src/app/panels/histogram/module.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,15 @@
3232
.form-inline .checkbox {
3333
display: inline-block;
3434
}
35+
36+
.histogram-marker {
37+
display: block;
38+
width: 20px;
39+
height: 21px;
40+
background-image: url('img/annotation-icon.png');
41+
background-repeat: no-repeat;
42+
}
43+
3544
</style>
3645
<div>
3746
<span ng-show='panel.options'>
@@ -96,4 +105,4 @@
96105
</form>
97106
<center><img ng-show='panel.loading' src="img/load_big.gif"></center>
98107
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
99-
</div>
108+
</div>

src/app/panels/histogram/module.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -700,10 +700,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
700700
'annotation': {
701701
level: 1,
702702
icon: {
703-
icon: "icon-tag icon-flip-vertical",
704-
size: 20,
705-
color: "#222",
706-
outline: "#bbb"
703+
width: 20,
704+
height: 21,
705+
icon: "histogram-marker"
707706
}
708707
}
709708
}

src/img/annotation-icon.png

4.58 KB
Loading

src/vendor/jquery/jquery.flot.events.js

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -324,17 +324,23 @@
324324

325325
div = $('<i style="position:absolute" class="'+icon.icon+'"></i>').appendTo(container);
326326

327-
top = o.top + plot.height() - icon.size + 1;
328-
left = xaxis.p2c(event.min) + o.left - icon.size / 2;
327+
var width = icon.size || icon.width;
328+
var height = icon.size || icon.height;
329+
330+
top = o.top + plot.height() - height + 1;
331+
left = xaxis.p2c(event.min) + o.left - width / 2;
329332

330333
// Positions the marker
331-
div.css({
334+
var cssOptions = {
332335
left: left + 'px',
333-
top: top,
334-
color: icon.color,
335-
"text-shadow" : "1px 1px "+icon.outline+", -1px -1px "+icon.outline+", -1px 1px "+icon.outline+", 1px -1px "+icon.outline,
336-
'font-size': icon['size']+'px',
337-
});
336+
top: top
337+
};
338+
339+
if (icon.outline) cssOptions['text-shadow'] = "1px 1px "+icon.outline+", -1px -1px "+icon.outline+", -1px 1px "+icon.outline+", 1px -1px "+icon.outline;
340+
if (icon.size) cssOptions['font-size'] = icon['size']+'px';
341+
if (icon.color) cssOptions.color = icon.color;
342+
343+
div.css(cssOptions);
338344
div.hide();
339345
div.data({
340346
"event": event
@@ -626,4 +632,4 @@
626632
};
627633

628634

629-
})(jQuery);
635+
})(jQuery);

0 commit comments

Comments
 (0)