mirror of
https://github.com/timberjoegithub/grafana-statusmap.git
synced 2026-07-22 07:49:47 +00:00
864 lines
26 KiB
TypeScript
864 lines
26 KiB
TypeScript
import _ from 'lodash';
|
||
import $ from 'jquery';
|
||
import moment from 'moment';
|
||
import kbn from 'app/core/utils/kbn';
|
||
import {appEvents, contextSrv} from 'app/core/core';
|
||
import * as d3 from 'd3';
|
||
import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
|
||
import {StatusmapTooltip} from './tooltip';
|
||
import {AnnotationTooltip} from './annotations';
|
||
import { Bucket, BucketMatrix, BucketMatrixPager } from './statusmap_data';
|
||
import { StatusHeatmapCtrl, renderComplete } from './module';
|
||
import { CoreEvents, PanelEvents } from './libs/grafana/events/index';
|
||
|
||
let MIN_CARD_SIZE = 5,
|
||
CARD_H_SPACING = 2,
|
||
CARD_V_SPACING = 2,
|
||
CARD_ROUND = 0,
|
||
DATA_RANGE_WIDING_FACTOR = 1.2,
|
||
DEFAULT_X_TICK_SIZE_PX = 100,
|
||
DEFAULT_Y_TICK_SIZE_PX = 50,
|
||
X_AXIS_TICK_PADDING = 10,
|
||
Y_AXIS_TICK_PADDING = 5,
|
||
MIN_SELECTION_WIDTH = 2;
|
||
|
||
export default function rendering(scope: any, elem: any, attrs: any, ctrl: any) {
|
||
return new StatusmapRenderer(scope, elem, attrs, ctrl);
|
||
}
|
||
|
||
class Statusmap {
|
||
$svg: any;
|
||
svg: any;
|
||
bucketMatrix: BucketMatrix;
|
||
|
||
timeRange: {from: number, to: number} = {from:0, to:0};
|
||
|
||
constructor() {
|
||
|
||
}
|
||
}
|
||
|
||
export class StatusmapRenderer {
|
||
width: number = 0;
|
||
height: number = 0;
|
||
yScale: any;
|
||
xScale: any;
|
||
chartWidth: number = 0;
|
||
chartHeight: number = 0;
|
||
chartTop: number = 0;
|
||
chartBottom: number = 0;
|
||
yAxisWidth: number = 0;
|
||
xAxisHeight: number = 0;
|
||
cardVSpacing: number = 0;
|
||
cardHSpacing: number = 0;
|
||
cardRound: number = 0;
|
||
cardWidth: number = 0;
|
||
cardHeight: number = 0;
|
||
colorScale: any;
|
||
opacityScale: any;
|
||
mouseUpHandler: any;
|
||
xGridSize: number = 0;
|
||
yGridSize: number = 0;
|
||
|
||
bucketMatrix: BucketMatrix;
|
||
bucketMatrixPager: BucketMatrixPager;
|
||
panel: any;
|
||
$heatmap: any;
|
||
tooltip: StatusmapTooltip;
|
||
annotationTooltip: AnnotationTooltip;
|
||
heatmap: any;
|
||
timeRange: any;
|
||
|
||
yOffset: number;
|
||
selection: any;
|
||
padding: any;
|
||
margin: any;
|
||
dataRangeWidingFactor: number = DATA_RANGE_WIDING_FACTOR;
|
||
|
||
constructor(private scope: any, private elem: any, attrs: any, private ctrl: StatusHeatmapCtrl) {
|
||
// $heatmap is JQuery object, but heatmap is D3
|
||
this.$heatmap = this.elem.find('.statusmap-panel');
|
||
this.tooltip = new StatusmapTooltip(this.$heatmap, this.scope);
|
||
this.annotationTooltip = new AnnotationTooltip(this.$heatmap, this.scope);
|
||
|
||
this.yOffset = 0;
|
||
|
||
this.selection = {
|
||
active: false,
|
||
x1: -1,
|
||
x2: -1,
|
||
};
|
||
|
||
this.padding = { left: 0, right: 0, top: 0, bottom: 0 };
|
||
this.margin = { left: 25, right: 15, top: 10, bottom: 20 };
|
||
|
||
this.ctrl.events.on(PanelEvents.render, this.onRender.bind(this));
|
||
|
||
this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this);
|
||
|
||
/////////////////////////////
|
||
// Selection and crosshair //
|
||
/////////////////////////////
|
||
|
||
// Shared crosshair and tooltip this.empty = true;
|
||
|
||
appEvents.on( CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
|
||
|
||
appEvents.on( CoreEvents.graphHoverClear, this.onGraphHoverClear.bind(this), this.scope);
|
||
|
||
// Register selection listeners
|
||
this.$heatmap.on('mousedown', this.onMouseDown.bind(this));
|
||
this.$heatmap.on('mousemove', this.onMouseMove.bind(this));
|
||
this.$heatmap.on('mouseleave', this.onMouseLeave.bind(this));
|
||
this.$heatmap.on('click', this.onMouseClick.bind(this));
|
||
}
|
||
|
||
onGraphHoverClear() {
|
||
this.clearCrosshair();
|
||
}
|
||
|
||
onGraphHover(event: { pos: any }) {
|
||
this.drawSharedCrosshair(event.pos);
|
||
}
|
||
|
||
onRender() {
|
||
this.render();
|
||
this.ctrl.renderingCompleted();
|
||
}
|
||
|
||
|
||
setElementHeight(): boolean {
|
||
try {
|
||
var height = this.ctrl.height || this.panel.height || this.ctrl.row.height;
|
||
if (_.isString(height)) {
|
||
height = parseInt(height.replace('px', ''), 10);
|
||
}
|
||
|
||
if (this.panel.usingPagination) {
|
||
// TODO get height of pagination controls.
|
||
// reserve height for legend and for a row of pagination controls.
|
||
height -= this.panel.legend.show ? 70 : 40; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
|
||
} else {
|
||
// reserve height for legend
|
||
height -= this.panel.legend.show ? 32 : 4; // bottom padding and space for legend. Change margin in .status-heatmap-color-legend !
|
||
}
|
||
|
||
this.$heatmap.css('height', height + 'px');
|
||
|
||
return true;
|
||
} catch (e) { // IE throws errors sometimes
|
||
return false;
|
||
}
|
||
}
|
||
|
||
getYAxisWidth(elem: any): number {
|
||
const axisText = elem.selectAll(".axis-y text").nodes();
|
||
const maxTextWidth = _.max(_.map(axisText, text => {
|
||
// Use SVG getBBox method
|
||
return text.getBBox().width;
|
||
}));
|
||
|
||
return Math.ceil(maxTextWidth);
|
||
}
|
||
|
||
getXAxisHeight(elem: any): number {
|
||
let axisLine = elem.select(".axis-x line");
|
||
if (!axisLine.empty()) {
|
||
let axisLinePosition = parseFloat(elem.select(".axis-x line").attr("y2"));
|
||
let canvasWidth = parseFloat(elem.attr("height"));
|
||
return canvasWidth - axisLinePosition;
|
||
} else {
|
||
// Default height
|
||
return 30;
|
||
}
|
||
}
|
||
|
||
addXAxis() {
|
||
// Scale timestamps to cards centers
|
||
//this.scope.xScale = this.xScale = d3.scaleTime()
|
||
// .domain([this.timeRange.from, this.timeRange.to])
|
||
// .range([this.xGridSize/2, this.chartWidth-this.xGridSize/2]);
|
||
// Buckets without the most recent
|
||
this.scope.xScale = this.xScale = d3.scaleTime()
|
||
.domain([this.timeRange.from, this.timeRange.to])
|
||
.range([this.xGridSize/2, this.chartWidth-this.xGridSize/2]);
|
||
|
||
let ticks = this.chartWidth / DEFAULT_X_TICK_SIZE_PX;
|
||
let grafanaTimeFormatter = grafanaTimeFormat(ticks, this.timeRange.from, this.timeRange.to);
|
||
let timeFormat;
|
||
let dashboardTimeZone = this.ctrl.dashboard.getTimezone();
|
||
if (dashboardTimeZone === 'utc') {
|
||
timeFormat = d3.utcFormat(grafanaTimeFormatter);
|
||
} else {
|
||
timeFormat = d3.timeFormat(grafanaTimeFormatter);
|
||
}
|
||
|
||
let xAxis = d3
|
||
.axisBottom(this.xScale)
|
||
.ticks(ticks)
|
||
.tickFormat(timeFormat)
|
||
.tickPadding(X_AXIS_TICK_PADDING)
|
||
.tickSize(this.chartHeight);
|
||
|
||
let posY = this.chartTop; // this.margin.top !
|
||
let posX = this.yAxisWidth;
|
||
|
||
this.heatmap.append("g")
|
||
.attr("class", "axis axis-x")
|
||
.attr("transform", "translate(" + posX + "," + posY + ")")
|
||
.call(xAxis);
|
||
|
||
// Remove horizontal line in the top of axis labels (called domain in d3)
|
||
this.heatmap
|
||
.select(".axis-x")
|
||
.select(".domain")
|
||
.remove();
|
||
}
|
||
|
||
// divide chart height by ticks for cards drawing
|
||
getYScale(ticks: any[]) {
|
||
let range:any[] = [];
|
||
let step = this.chartHeight / ticks.length;
|
||
// svg has y=0 on the top, so top card should have a minimal value in range
|
||
range.push(step);
|
||
for (let i = 1; i < ticks.length; i++) {
|
||
range.push(step * (i+1));
|
||
}
|
||
return d3.scaleOrdinal()
|
||
.domain(ticks)
|
||
.range(range);
|
||
}
|
||
|
||
// divide chart height by ticks with offset for ticks drawing
|
||
getYAxisScale(ticks: any[]) {
|
||
let range:any[] = [];
|
||
let step = this.chartHeight / ticks.length;
|
||
// svg has y=0 on the top, so top tick should have a minimal value in range
|
||
range.push(this.yOffset);
|
||
for (let i = 1; i < ticks.length; i++) {
|
||
range.push(step * i + this.yOffset);
|
||
}
|
||
return d3.scaleOrdinal()
|
||
.domain(ticks)
|
||
.range(range);
|
||
}
|
||
|
||
addYAxis() {
|
||
let ticks = this.bucketMatrixPager.targets();
|
||
|
||
// TODO move sorting into bucketMatrixPager.
|
||
if (this.panel.yAxisSort == 'a → z') {
|
||
ticks.sort((a, b) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
|
||
} else if (this.panel.yAxisSort == 'z → a') {
|
||
ticks.sort((b, a) => a.localeCompare(b, 'en', {ignorePunctuation: false, numeric: true}));
|
||
}
|
||
|
||
let yAxisScale = this.getYAxisScale(ticks);
|
||
this.scope.yScale = this.yScale = this.getYScale(ticks);
|
||
|
||
let yAxis = d3
|
||
.axisLeft(yAxisScale)
|
||
.tickValues(ticks)
|
||
.tickSizeInner(0 - this.width)
|
||
.tickPadding(Y_AXIS_TICK_PADDING);
|
||
|
||
this.heatmap
|
||
.append("g")
|
||
.attr("class", "axis axis-y")
|
||
.call(yAxis);
|
||
|
||
// Calculate Y axis width first, then move axis into visible area
|
||
let posY = this.margin.top;
|
||
let posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
|
||
this.heatmap.select(".axis-y").attr("transform", "translate(" + posX + "," + posY + ")");
|
||
|
||
// Remove vertical line in the right of axis labels (called domain in d3)
|
||
this.heatmap.select(".axis-y").select(".domain").remove();
|
||
this.heatmap.select(".axis-y").selectAll(".tick line").remove();
|
||
}
|
||
|
||
// Wide Y values range and adjust to bucket size
|
||
wideYAxisRange(min: number, max: number, tickInterval: number) {
|
||
let y_widing = (max * (this.dataRangeWidingFactor - 1) - min * (this.dataRangeWidingFactor - 1)) / 2;
|
||
let y_min, y_max;
|
||
|
||
if (tickInterval === 0) {
|
||
y_max = max * this.dataRangeWidingFactor;
|
||
y_min = min - min * (this.dataRangeWidingFactor - 1);
|
||
tickInterval = (y_max - y_min) / 2;
|
||
} else {
|
||
y_max = Math.ceil((max + y_widing) / tickInterval) * tickInterval;
|
||
y_min = Math.floor((min - y_widing) / tickInterval) * tickInterval;
|
||
}
|
||
|
||
// Don't wide axis below 0 if all values are positive
|
||
if (min >= 0 && y_min < 0) {
|
||
y_min = 0;
|
||
}
|
||
|
||
return {y_min, y_max};
|
||
}
|
||
|
||
tickValueFormatter(decimals, scaledDecimals = null) {
|
||
let format = this.panel.yAxis.format;
|
||
return function(value) {
|
||
return kbn.valueFormats[format](value, decimals, scaledDecimals);
|
||
};
|
||
}
|
||
|
||
// Create svg element, add axes and
|
||
// calculate sizes for cards drawing
|
||
addStatusmapCanvas() {
|
||
let heatmap_elem = this.$heatmap[0];
|
||
|
||
this.width = Math.floor(this.$heatmap.width()) - this.padding.right;
|
||
this.height = Math.floor(this.$heatmap.height()) - this.padding.bottom;
|
||
|
||
if (this.heatmap) {
|
||
this.heatmap.remove();
|
||
}
|
||
|
||
// Insert svg as a first child into heatmap_elem
|
||
// as the frozen tooltip moving logiс assumes that tooltip is the last child.
|
||
this.heatmap = d3.select(heatmap_elem)
|
||
.insert("svg",":first-child")
|
||
.attr("width", this.width)
|
||
.attr("height", this.height);
|
||
|
||
this.chartHeight = this.height - this.margin.top - this.margin.bottom;
|
||
this.chartTop = this.margin.top;
|
||
this.chartBottom = this.chartTop + this.chartHeight;
|
||
|
||
this.cardHSpacing = this.panel.cards.cardHSpacing !== null ? this.panel.cards.cardHSpacing : CARD_H_SPACING;
|
||
this.cardVSpacing = this.panel.cards.cardVSpacing !== null ? this.panel.cards.cardVSpacing : CARD_V_SPACING;
|
||
this.cardRound = this.panel.cards.cardRound !== null ? this.panel.cards.cardRound : CARD_ROUND;
|
||
|
||
// calculate yOffset for YAxis
|
||
this.yGridSize = this.chartHeight;
|
||
if (this.bucketMatrixPager.targets().length > 0) {
|
||
this.yGridSize = Math.floor(this.chartHeight / this.bucketMatrixPager.targets().length);
|
||
}
|
||
this.cardHeight = this.yGridSize ? this.yGridSize - this.cardVSpacing : 0;
|
||
this.yOffset = this.cardHeight / 2;
|
||
|
||
this.addYAxis();
|
||
|
||
this.yAxisWidth = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING;
|
||
this.chartWidth = this.width - this.yAxisWidth - this.margin.right;
|
||
|
||
// TODO allow per-y cardWidth!
|
||
// we need to fill chartWidth with xBucketSize cards.
|
||
this.xGridSize = this.chartWidth / (this.bucketMatrix.xBucketSize+1);
|
||
this.cardWidth = this.xGridSize - this.cardHSpacing;
|
||
|
||
this.addXAxis();
|
||
this.xAxisHeight = this.getXAxisHeight(this.heatmap);
|
||
|
||
if (!this.panel.yAxis.show) {
|
||
this.heatmap.select(".axis-y").selectAll("line").style("opacity", 0);
|
||
}
|
||
|
||
if (!this.panel.xAxis.show) {
|
||
this.heatmap.select(".axis-x").selectAll("line").style("opacity", 0);
|
||
}
|
||
}
|
||
|
||
addStatusmap():void {
|
||
let maxValue = this.panel.color.max != null ? this.panel.color.max : this.bucketMatrix.maxValue;
|
||
let minValue = this.panel.color.min != null ? this.panel.color.min : this.bucketMatrix.minValue;
|
||
|
||
if (this.panel.color.mode !== 'discrete') {
|
||
this.colorScale = this.getColorScale(maxValue, minValue);
|
||
}
|
||
this.setOpacityScale(maxValue);
|
||
|
||
// Draw cards from buckets.
|
||
this.heatmap.selectAll(".statusmap-cards-row").data(this.bucketMatrixPager.targets())
|
||
.enter()
|
||
.selectAll(".statustmap-card")
|
||
.data((target:string) => this.bucketMatrix.buckets[target])
|
||
.enter()
|
||
.append("rect")
|
||
.attr("cardId", (b:Bucket) => b.id)
|
||
.attr("xid", (b:Bucket) => b.xid)
|
||
.attr("yid", (b:Bucket) => b.yLabel)
|
||
.attr("x", this.getCardX.bind(this))
|
||
.attr("width", this.getCardWidth.bind(this))
|
||
.attr("y", this.getCardY.bind(this))
|
||
.attr("height", this.getCardHeight.bind(this))
|
||
.attr("rx", this.cardRound)
|
||
.attr("ry", this.cardRound)
|
||
.attr("class", (b:Bucket) => b.isEmpty() ? "empty-card" : "bordered statusmap-card")
|
||
.style("fill", this.getCardColor.bind(this))
|
||
.style("stroke", this.getCardColor.bind(this))
|
||
.style("stroke-width", 0)
|
||
//.style("stroke-width", getCardStrokeWidth)
|
||
//.style("stroke-dasharray", "3,3")
|
||
.style("opacity", this.getCardOpacity.bind(this));
|
||
|
||
// Set mouse events on cards.
|
||
let $cards = this.$heatmap.find(".statusmap-card + .bordered");
|
||
$cards
|
||
.on("mouseenter", (event) => {
|
||
this.tooltip.mouseOverBucket = true;
|
||
this.highlightCard(event);
|
||
})
|
||
.on("mouseleave", (event) => {
|
||
this.tooltip.mouseOverBucket = false;
|
||
this.resetCardHighLight(event);
|
||
});
|
||
|
||
this._renderAnnotations();
|
||
|
||
this.ctrl.events.emit(renderComplete, {
|
||
"chartWidth": this.chartWidth
|
||
});
|
||
}
|
||
|
||
highlightCard(event) {
|
||
const color = d3.select(event.target).style("fill");
|
||
const highlightColor = d3.color(color).darker(2);
|
||
const strokeColor = d3.color(color).brighter(4);
|
||
const current_card = d3.select(event.target);
|
||
this.tooltip.originalFillColor = color;
|
||
current_card
|
||
.style("fill", highlightColor.toString())
|
||
.style("stroke", strokeColor.toString())
|
||
.style("stroke-width", 1);
|
||
}
|
||
|
||
resetCardHighLight(event) {
|
||
d3.select(event.target)
|
||
.style("fill", this.tooltip.originalFillColor)
|
||
.style("stroke", this.tooltip.originalFillColor)
|
||
.style("stroke-width", 0);
|
||
}
|
||
|
||
getColorScale(maxValue, minValue = 0) {
|
||
let colorScheme = _.find(this.ctrl.colorSchemes, {value: this.panel.color.colorScheme});
|
||
let colorInterpolator = d3ScaleChromatic[colorScheme.value];
|
||
let colorScaleInverted = colorScheme.invert === 'always' ||
|
||
(colorScheme.invert === 'dark' && !contextSrv.user.lightTheme);
|
||
|
||
if (maxValue == minValue)
|
||
maxValue = minValue + 1;
|
||
|
||
let start = colorScaleInverted ? maxValue : minValue;
|
||
let end = colorScaleInverted ? minValue : maxValue;
|
||
|
||
return d3.scaleSequential(colorInterpolator).domain([start, end]);
|
||
}
|
||
|
||
setOpacityScale(maxValue) {
|
||
if (this.panel.color.colorScale === 'linear') {
|
||
this.opacityScale = d3.scaleLinear()
|
||
.domain([0, maxValue])
|
||
.range([0, 1]);
|
||
} else if (this.panel.color.colorScale === 'sqrt') {
|
||
this.opacityScale = d3.scalePow().exponent(this.panel.color.exponent)
|
||
.domain([0, maxValue])
|
||
.range([0, 1]);
|
||
}
|
||
}
|
||
|
||
getCardX(b: Bucket) {
|
||
let x;
|
||
// cx is the center of the card. Card should be placed to the left.
|
||
//let cx = this.xScale(d.x);
|
||
let rightX = (b.relTo / this.bucketMatrix.rangeMs) * this.chartWidth;
|
||
let cx = rightX - this.cardWidth/2;
|
||
|
||
if (cx - this.cardWidth/2 < 0) {
|
||
x = this.yAxisWidth + this.cardHSpacing/2;
|
||
} else {
|
||
x = this.yAxisWidth + cx - this.cardWidth/2;
|
||
}
|
||
|
||
return x;
|
||
}
|
||
|
||
// xScale returns card center. Adjust cardWidth in case of overlaping.
|
||
getCardWidth(b: Bucket) {
|
||
//return 20;
|
||
let w;
|
||
|
||
let rightX = (b.relTo / this.bucketMatrix.rangeMs) * this.chartWidth;
|
||
let cx = rightX - this.cardWidth/2;
|
||
//let cx = this.xScale(d.x);
|
||
|
||
if (cx < this.cardWidth/2) {
|
||
// Center should not exceed half of card.
|
||
// Cut card to the left to prevent overlay of y axis.
|
||
let cutted_width = (cx - this.cardHSpacing/2) + this.cardWidth/2;
|
||
w = cutted_width > 0 ? cutted_width : 0;
|
||
} else if (this.chartWidth - cx < this.cardWidth/2) {
|
||
// Cut card to the right to prevent overlay of right graph edge.
|
||
w = this.cardWidth/2 + (this.chartWidth - cx - this.cardHSpacing/2);
|
||
} else {
|
||
w = this.cardWidth;
|
||
}
|
||
|
||
// Card width should be MIN_CARD_SIZE at least
|
||
w = Math.max(w, MIN_CARD_SIZE);
|
||
|
||
if (this.cardHSpacing == 0) {
|
||
w = w+1;
|
||
}
|
||
|
||
return w;
|
||
}
|
||
|
||
// Top y for card.
|
||
// yScale gives ???
|
||
getCardY(b: Bucket) {
|
||
return this.yScale(b.yLabel) + this.chartTop - this.cardHeight - this.cardVSpacing/2;
|
||
}
|
||
|
||
getCardHeight(b: Bucket) {
|
||
//return 20;
|
||
let ys = this.yScale(b.yLabel);
|
||
let y = ys + this.chartTop - this.cardHeight - this.cardVSpacing/2;
|
||
let h = this.cardHeight;
|
||
|
||
// Cut card height to prevent overlay
|
||
if (y < this.chartTop) {
|
||
h = ys - this.cardVSpacing/2;
|
||
} else if (ys > this.chartBottom) {
|
||
h = this.chartBottom - y;
|
||
} else if (y + this.cardHeight > this.chartBottom) {
|
||
h = this.chartBottom - y;
|
||
}
|
||
|
||
// Height can't be more than chart height
|
||
h = Math.min(h, this.chartHeight);
|
||
// Card height should be MIN_CARD_SIZE at least
|
||
h = Math.max(h, MIN_CARD_SIZE);
|
||
|
||
if (this.cardVSpacing == 0) {
|
||
h = h+1
|
||
}
|
||
|
||
return h;
|
||
}
|
||
|
||
getCardColor(bucket: Bucket) {
|
||
if (this.panel.color.mode === 'opacity') {
|
||
return this.panel.color.cardColor;
|
||
} else if (this.panel.color.mode === 'spectrum') {
|
||
return this.colorScale(bucket.value);
|
||
} else if (this.panel.color.mode === 'discrete') {
|
||
if (this.panel.seriesFilterIndex != null && this.panel.seriesFilterIndex != -1) {
|
||
return this.ctrl.discreteExtraSeries.getBucketColorSingle(bucket.values[this.panel.seriesFilterIndex]);
|
||
} else {
|
||
return this.ctrl.discreteExtraSeries.getBucketColor(bucket.values);
|
||
}
|
||
}
|
||
}
|
||
|
||
getCardOpacity(bucket: Bucket) {
|
||
if (this.panel.nullPointMode === 'as empty' && bucket.value == null ) {
|
||
return 0;
|
||
}
|
||
if (this.panel.color.mode === 'opacity') {
|
||
return this.opacityScale(bucket.value);
|
||
} else {
|
||
return 1;
|
||
}
|
||
}
|
||
|
||
getCardStrokeWidth(b: Bucket) {
|
||
if (this.panel.color.mode === 'discrete') {
|
||
return '1';
|
||
}
|
||
return '0';
|
||
}
|
||
|
||
|
||
/////////////////////////////
|
||
// Selection and crosshair //
|
||
/////////////////////////////
|
||
|
||
getEventOffset(event) {
|
||
const elemOffset = this.$heatmap.offset();
|
||
const x = Math.floor(event.clientX - elemOffset.left);
|
||
const y = Math.floor(event.clientY - elemOffset.top);
|
||
return { x, y };
|
||
}
|
||
|
||
onMouseDown(event) {
|
||
const offset = this.getEventOffset(event);
|
||
this.selection.active = true;
|
||
this.selection.x1 = offset.x;
|
||
|
||
this.mouseUpHandler = () => {
|
||
this.onMouseUp();
|
||
};
|
||
|
||
$(document).one("mouseup", this.mouseUpHandler.bind(this));
|
||
}
|
||
|
||
onMouseUp() {
|
||
$(document).unbind("mouseup", this.mouseUpHandler.bind(this));
|
||
this.mouseUpHandler = null;
|
||
this.selection.active = false;
|
||
|
||
let selectionRange = Math.abs(this.selection.x2 - this.selection.x1);
|
||
if (this.selection.x2 >= 0 && selectionRange > MIN_SELECTION_WIDTH) {
|
||
let timeFrom = this.xScale.invert(Math.min(this.selection.x1, this.selection.x2) - this.yAxisWidth - this.xGridSize/2);
|
||
let timeTo = this.xScale.invert(Math.max(this.selection.x1, this.selection.x2) - this.yAxisWidth - this.xGridSize/2);
|
||
|
||
this.ctrl.timeSrv.setTime({
|
||
from: moment.utc(timeFrom),
|
||
to: moment.utc(timeTo)
|
||
});
|
||
}
|
||
|
||
this.clearSelection();
|
||
}
|
||
|
||
onMouseLeave(e) {
|
||
appEvents.emit(CoreEvents.graphHoverClear);
|
||
this.clearCrosshair();
|
||
this.annotationTooltip.destroy();
|
||
}
|
||
|
||
onMouseMove(event: MouseEvent) {
|
||
if (!this.heatmap) { return; }
|
||
|
||
const offset = this.getEventOffset(event);
|
||
if (this.selection.active) {
|
||
// Clear crosshair and tooltip
|
||
this.clearCrosshair();
|
||
this.tooltip.destroy();
|
||
this.annotationTooltip.destroy();
|
||
|
||
this.selection.x2 = this.limitSelection(event.offsetX);
|
||
this.drawSelection(this.selection.x1, this.selection.x2);
|
||
} else {
|
||
//const pos = this.getEventPos(event, offset);
|
||
this.emitGraphHoverEvent(event);
|
||
this.drawCrosshair(offset.x);
|
||
this.tooltip.show(event);
|
||
this.annotationTooltip.show(event);
|
||
}
|
||
}
|
||
|
||
// TODO emit an event and move logic to panelCtrl
|
||
public onMouseClick(e: MouseEvent) {
|
||
if (this.ctrl.panel.tooltip.freezeOnClick) {
|
||
this.tooltip.showFrozen(e);
|
||
this.tooltip.destroy();
|
||
}
|
||
}
|
||
|
||
getEventPos(event, offset) {
|
||
const x = this.xScale.invert(offset.x - this.yAxisWidth).valueOf();
|
||
const y = this.yScale.invert(offset.y - this.chartTop);
|
||
const pos = {
|
||
pageX: event.pageX,
|
||
pageY: event.pageY,
|
||
x: x,
|
||
x1: x,
|
||
y: y,
|
||
y1: y,
|
||
panelRelY: null,
|
||
offset,
|
||
};
|
||
|
||
return pos;
|
||
}
|
||
|
||
emitGraphHoverEvent(event) {
|
||
let x = this.xScale.invert(event.offsetX - this.yAxisWidth - this.xGridSize/2).valueOf();
|
||
let y = this.yScale(event.offsetY);
|
||
let pos = {
|
||
pageX: event.pageX,
|
||
pageY: event.pageY,
|
||
x: x, x1: x,
|
||
y: y, y1: y,
|
||
panelRelY: 0
|
||
};
|
||
|
||
// Set minimum offset to prevent showing legend from another panel
|
||
pos.panelRelY = Math.max(event.offsetY / this.height, 0.001);
|
||
|
||
// broadcast to other graph panels that we are hovering
|
||
appEvents.emit(CoreEvents.graphHover, {pos: pos, panel: this.panel});
|
||
}
|
||
|
||
limitSelection(x2) {
|
||
x2 = Math.max(x2, this.yAxisWidth);
|
||
x2 = Math.min(x2, this.chartWidth + this.yAxisWidth);
|
||
return x2;
|
||
}
|
||
|
||
drawSelection(posX1, posX2) {
|
||
if (this.heatmap) {
|
||
this.heatmap.selectAll(".status-heatmap-selection").remove();
|
||
let selectionX = Math.min(posX1, posX2);
|
||
let selectionWidth = Math.abs(posX1 - posX2);
|
||
|
||
if (selectionWidth > MIN_SELECTION_WIDTH) {
|
||
this.heatmap.append("rect")
|
||
.attr("class", "status-heatmap-selection")
|
||
.attr("x", selectionX)
|
||
.attr("width", selectionWidth)
|
||
.attr("y", this.chartTop)
|
||
.attr("height", this.chartHeight);
|
||
}
|
||
}
|
||
}
|
||
|
||
clearSelection() {
|
||
this.selection.x1 = -1;
|
||
this.selection.x2 = -1;
|
||
|
||
if (this.heatmap) {
|
||
this.heatmap.selectAll(".status-heatmap-selection").remove();
|
||
}
|
||
}
|
||
|
||
|
||
drawCrosshair(position) {
|
||
if (this.heatmap) {
|
||
this.heatmap.selectAll(".status-heatmap-crosshair").remove();
|
||
|
||
let posX = position;
|
||
posX = Math.max(posX, this.yAxisWidth);
|
||
posX = Math.min(posX, this.chartWidth + this.yAxisWidth);
|
||
|
||
this.heatmap.append("g")
|
||
.attr("class", "status-heatmap-crosshair")
|
||
.attr("transform", "translate(" + posX + ",0)")
|
||
.append("line")
|
||
.attr("x1", 1)
|
||
.attr("y1", this.chartTop)
|
||
.attr("x2", 1)
|
||
.attr("y2", this.chartBottom)
|
||
.attr("stroke-width", 1);
|
||
}
|
||
}
|
||
|
||
// map time to X
|
||
drawSharedCrosshair(pos) {
|
||
if (this.heatmap && this.ctrl.dashboard.graphTooltip !== 0) {
|
||
const posX = this.xScale(pos.x) + this.yAxisWidth;
|
||
this.drawCrosshair(posX);
|
||
}
|
||
}
|
||
|
||
clearCrosshair() {
|
||
if (this.heatmap) {
|
||
this.heatmap.selectAll(".status-heatmap-crosshair").remove();
|
||
}
|
||
}
|
||
|
||
render() {
|
||
this.panel = this.ctrl.panel;
|
||
this.timeRange = this.ctrl.range;
|
||
this.bucketMatrix = this.ctrl.bucketMatrix;
|
||
this.bucketMatrixPager = this.ctrl.bucketMatrixPager;
|
||
|
||
if (!this.bucketMatrix || !this.setElementHeight()) {
|
||
return;
|
||
}
|
||
|
||
// Draw default axes and return if no data
|
||
this.addStatusmapCanvas();
|
||
if (this.bucketMatrix.noDatapoints) {
|
||
return;
|
||
}
|
||
|
||
this.addStatusmap();
|
||
this.scope.yAxisWidth = this.yAxisWidth;
|
||
this.scope.xAxisHeight = this.xAxisHeight;
|
||
this.scope.chartHeight = this.chartHeight;
|
||
this.scope.chartWidth = this.chartWidth;
|
||
this.scope.chartTop = this.chartTop;
|
||
}
|
||
|
||
_renderAnnotations() {
|
||
if (!this.ctrl.annotations || this.ctrl.annotations.length == 0) {
|
||
return;
|
||
}
|
||
|
||
if (!this.heatmap) {
|
||
return;
|
||
}
|
||
|
||
|
||
|
||
let annoData = _.map(this.ctrl.annotations, (d,i) => ({"x": Math.floor(this.yAxisWidth + this.xScale(d.time)), "id":i, "anno": d.source}));
|
||
|
||
//({"ctrl_annotations": this.ctrl.annotations, "annoData": annoData});
|
||
|
||
let anno = this.heatmap
|
||
.append("g")
|
||
.attr("class", "statusmap-annotations")
|
||
.attr("transform", "translate(0.5,0)")
|
||
.selectAll(".statusmap-annotations")
|
||
.data(annoData)
|
||
.enter().append("g")
|
||
;
|
||
anno.append("line")
|
||
//.attr("class", "statusmap-annotation-tick")
|
||
.attr("x1", d => d.x)
|
||
.attr("y1", this.chartTop)
|
||
.attr("x2", d => d.x)
|
||
.attr("y2", this.chartBottom)
|
||
.style("stroke", d => d.anno.iconColor)
|
||
.style("stroke-width", 1)
|
||
.style("stroke-dasharray", "3,3")
|
||
;
|
||
anno.append("polygon")
|
||
.attr("points", d => [[d.x, this.chartBottom+1], [d.x-5, this.chartBottom+6], [d.x+5, this.chartBottom+6]].join(" "))
|
||
.style("stroke-width", 0)
|
||
.style("fill", d => d.anno.iconColor)
|
||
;
|
||
// Polygons didn't fire mouseevents
|
||
anno.append("rect")
|
||
.attr("x", d => d.x-5)
|
||
.attr("width", 10)
|
||
.attr("y", this.chartBottom+1)
|
||
.attr("height", 5)
|
||
.attr("class", "statusmap-annotation-tick")
|
||
.attr("annoId", d => d.id)
|
||
.style("opacity", 0)
|
||
;
|
||
|
||
let $ticks = this.$heatmap.find(".statusmap-annotation-tick");
|
||
$ticks
|
||
.on("mouseenter", (event) => {
|
||
this.annotationTooltip.mouseOverAnnotationTick = true;
|
||
})
|
||
.on("mouseleave", (event) => {
|
||
this.annotationTooltip.mouseOverAnnotationTick = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
function grafanaTimeFormat(ticks, min, max) {
|
||
if (min && max && ticks) {
|
||
let range = max - min;
|
||
let secPerTick = (range/ticks) / 1000;
|
||
let oneDay = 86400000;
|
||
let oneYear = 31536000000;
|
||
|
||
if (secPerTick <= 45) {
|
||
return "%H:%M:%S";
|
||
}
|
||
if (secPerTick <= 7200 || range <= oneDay) {
|
||
return "%H:%M";
|
||
}
|
||
if (secPerTick <= 80000) {
|
||
return "%m/%d %H:%M";
|
||
}
|
||
if (secPerTick <= 2419200 || range <= oneYear) {
|
||
return "%m/%d";
|
||
}
|
||
return "%Y-%m";
|
||
}
|
||
|
||
return "%H:%M";
|
||
}
|