marcusolsson / grafana-hourly-heatmap-panel

A panel plugin for Grafana to visualize hourly heatmaps.

Hourly Heatmap for Grafana

Maintenance: As I'm no longer working at Grafana Labs, nor am I using Grafana where I'm at now, I'm no longer able to actively maintain this plugin. I'm exploring ways to keep the project going. Check back here to stay updated!

A panel plugin for Grafana to visualize hourly heatmaps.

An hourly heatmap aggregates data into buckets by day and hour to analyze activity or traffic during the day.

Motivation

The carpet-plot panel plugin is one of the most used plugins for Grafana. Unfortunately, it's no longer being actively maintained.

Grafana 7.0 introduced a new plugin architecture based on React. Instead of migrating the original plugin from Angular, this is completely rewritten from scratch, using inspiration from the original plugin.

Configuration

This section lists the available configuration options for the JSON API data source.

Panel options

Dimensions

Option	Description
Time	Name of the field to use for time. Defaults to the first time field.
Value	Name of the field to use for value. Defaults to the first number field.

Display

Option	Description
Show cell border	Toggles a cell border to make it easier to distinguish cells with similar values
Show tooltip	Toggles the tooltip. Due to the current tooltip implementation, this severely impacts performance and I recommend that you disable this for large time intervals. For more information, refer to #12.
From and To	Lets you choose the hours to display. This can be used to set working hours, or to filter parts of the day with low traffic

Legend

Option	Description
Show legend	Toggles the color spectrum
Show value indicator	Toggles an indicator that shows the current value in the legend
Gradient quality	Determines the quality of the color spectrum. Higher quality means more SVG elements being drawn. Reduce the quality if you experience degraded performance.

Field options

Option	Description
Group by	Size of each bucket
Calculation	Calculation to use for reducing data within a bucket
Color palette	Colors to use for the heatmap. Select from any of the predefined color palettes, or select Custom to create your own. Select Field options to use the colors from the built-in Color scheme field option
Invert color palette	Inverts the currently selected color palette
Null value color	Color to display when a bucket contains no data as opposed to a data value of 0.

Troubleshooting

Missing data

By default, data sources limits the number of data points to the width of the panel in pixels. If you're visualizing data over a long time, then you may need to adjust the Max data points under Query options in the query editor.

grafana-hourly-heatmap-panel's Issues

Plugin fails with: Error loading

Behaviour:

I noticed that there's also issue #21 but I think this one is not related, since I'm logged in and it still doesn't work.

The grafana log file doesn't show any helpful message related to this.

Browser console shows this:

When I debug what the original error was, it shows:

"TypeError: Object(...) is not a function
    at Module.eval (http://192.168.178.100:3000/public/plugins/marcusolsson-hourly-heatmap-panel/module.js:1:15720)

Version: Grafana v6.7.3 (a04ef6cefc)

package.json:

 "name": "grafana-hourly-heatmap-panel",
  "version": "0.6.0",

I installed this using grafana-cli plugins install marcusolsson-hourly-heatmap-panel

Grafana 9.4.1 seems to have broken plugin

I am aware that this plugin is sadly not under active development, but just in case:

I upgraded Grafana to 9.4.1 (from 9.4.0, I think) yesterday, and that broke the (absolutely amazing) hourly heatmap plugin.
The error I get is "rt is undefined", nothing more.

Plugin version is 2.0.1.

Plugin fails to load if not logged in

First of all nice work on this plugin. It's exactly what I was looking for.

Coming to issue, I am trying to share my dashboard with others but this plugin keeps giving Error loading: marcusolsson-hourly-heatmap-panel. Rest of the visualizations load without any issue. Moreover if I login the plugin does not show any issue.

Note that the issue occurs only with anonymous users.

Any suggestions regarding this? Thanks in advance.

Heat map time range inconsistent with data

This is a pretty neat plugin! Thanks for making it available.

Came across an issue when data stops after a certain point, The heat map time range seems to be inconsistent. Don't know whether this is by design but it didn't appear to be quite intuitive. The issue may be better explained by two examples:

Query A - expected results:
30 day time period; heat maps show the full 30 days.
https://portal.netsage.global/grafana/d/80IVUboZk/individual-flows-per-country?orgId=2&from=1610092800000&to=1612771199000&var-src=United%20States&var-dest=Germany

Query B - unexpected results:
30 day time period, but heat maps show only a week.
https://portal.netsage.global/grafana/d/80IVUboZk/individual-flows-per-country?orgId=2&var-src=Austria&var-dest=Philippines&from=1607438294129&to=1610030294129

Any pointers in resolving this would be greatly appreciated!

Problem with Elasticsearch datasource

I am using this panel with ES datasource (Grafana 7.0.3) but don't show heatmap.

Tooltip show corret values:

Thanks

Grafana v7.5.3/7.5.4 - Color scheme doesn't work

I use the heatmap panel in 1 dashboard 3 times. 1 of 3 is displayed without issues, but the other 2 are just without a color. Adding new heatmaps or changing the data doesn't help. It looks like the issue is to have multiple heatmaps in 1 dashboard.

Also I tried to use another color scheme but this doesn't solve it too.

Time Region Support

Hi,

Firstly thanks, this is an amazing plugin thanks again for your hard work.

-- Enhancement request--
I would like to see all hours on the heatmap for a given day, however, I'd like to add Time Regions to highlight normal operating hours were I expect to see data. ie: 9am to 5pm.

Standard Graph with Time Regions:

Same data in Hourly Heat Panel with additional time region added:

It looks great, however, I'd like to add time region, current time, a bonus feature, anything outside of the region changes red...

Thanks!

In a Custom Palette, Spectrum & Colors are not calculated correctly for negative thresholds

see screenshot:

• for negative values, there is no spectrum, but only a single color...
• positive values and predefined spectrums are working fine

Min or max value of 0 resolves to Number.NEGATIVE_INFINITY or Number.POSITIVE_INFINITY

As seen on the RHS panel, all values are clamped to a single colour.

After digging into this a little bit I found that the minimum value of 0 was reaching certain components but then was reaching the Legend component as NEGATIVE_INFINITY.

I've tested locally and see that this can be fixed by using ?? instead of ||.
I'll follow up with a PR.

Display day of week on X-axis

Current version left out the option of picking the way date were displayed. Carpet plug-in was capable of displaying the week day on the x axis which is useful. Cheers for the great work and enhancements like being capable of picking the range of time that should be shown.

Custom Color Mappings

Many combinations of colors in the custom mapping result in null color values and nothing rendered.
I found basically any combination moving from blue to red through purple resulted in a failed mapping.
I would like to contribute to a more generic gradient designer for grafana, that could be used across panels. I've dug pretty deep into this for some of my plugins, but it seems silly reinvent the wheel each time.

When I use sum calculation, the value is wrong

As title,when I use the sum calculation
The value of 12/21 00:00~01:00 is 474000 (100000 + 150000 + 24000 + 200000)
But the chart only shows 200000, I guess that value is the last one

When I use the count calculation, I have the same problem, it only returns 1 data.
The correct answer is 4 times

Add option to reverse the color scheme?

First of all, great tool. I never used carpet-plot, but this panel is a great addition to my dashboard.

I'm trying to display event occurrences and highlight clusters of events. A high count of event occurrences is currently shown with the white end of the color scale while a low count is shown with a deep color (red/green/etc). Is it possible to reverse (or have an option to reverse) the color scheme so that a the high number of occurrences are shaded deeply with the chosen color scheme? Thanks again!

Do not filter by time range

The plugin filters the rows from the data source according to the time range selected in Grafana,e.g., the last 6 hours.

Thus, it is not possible to display the heatmap over all data points of a query. I think the time filter should be left to the data source query with $__timeFilter().

In bucket.ts lines 110 - 119 would need to be removed, at least.

Would this be possible?

Color option for null values

If there is a null value in the data, the heatmap prints black color. It would be nice to have a color palette to select a color for null values.

Display broken when time range is more than 17 days

The black spaces become higher and higher the longer the selected time span is

It doesn't change for longer than a year time spans anymore

Heatmap plugin failed to load on Samsung TV web browser

Hey,
Like in subject, works everywhere except Samsung TV, hide_version = false is already done, please advice, below screens

Invalid digital Signature

Hourly Heatmap not taking into account the UTC Grafana is set to

I set Grafana dashboard to UTC to obtain my data that has dates in UTC. But when they are graphed, it converts my data to browser time, so it appears that something that was at 7 am UTC (in my data) was at 10 am (in the graph).

Is there a way to change the graph time zone to be the same as in Grafana? Or a way for the graph to take the correct times the data table gets?

Doesn't seem to work with 3rd party mongodb datasource

Hi, is there a way for this to work with 3rd party mongodb datasource like mongodb-grafana-backend?

Feature request: group across weeks

It is fairly common in a carpet plot / hourly heatmap to visualize weekly trends by aggregating many weeks together and displaying the total or average of the underlying timeframe grouped by hour of week. The aggregation could be done in the query, but then the absolute time would be misleading since the date would still be an arbitrary specific date. Better would be to provide the ability to group across weeks in the panel, then erase the date component from the display leaving only weekday in the display.
If there were a way to change the date format to only show weekday, then leave it up to the query to aggregate across weeks, that would accomplish the same thing but be less user friendly. Since the aggregation by 60 minute, 30 minute, 15 minute is already built in to the panel it would make more sense to keep this function in the panel.

Ability to Aggregate Days of Week over X timeframe

I'm surprised this hasn't been requested already, but I didn't see it in any of the open or closed issues.

A way to aggregate data across days of the week would be nice to identify long term patterns/trends. For example, aggregate every Monday for the last X months. You could then see if you have a trend of high occurrences on Monday at 11:00, for example.

Essentially, it would be binning X months of data into 168 bins based on the day of the week and the hour of the day -> 24 hours a day, 7 days a week = 168 bin.

Tooltip slows down panel refresh

The tooltip is being loaded for every bucket on panel refresh, leading to poor performance for large time ranges.

From the Chrome DevTools:

All the small bars under Heatmap are Tippy updates.

Might be worth looking into making the Tippy instance a singleton: atomiks/tippyjs-react#42 (comment) or switch to a different tooltip library.

Offending lines of code:

grafana-hourly-heatmap-panel/src/components/Heatmap.tsx

Lines 58 to 80 in 7e8ce9e

	<Tippy
	key={i}
	content={
	<div>
	<Tooltip
	bucketStartTime={bucketStart}
	displayValue={displayValue}
	numBuckets={numBuckets}
	tz={timeZone}
	/>
	</div>
	}
	placement="bottom"
	animation={false}
	>
	<rect
	x={x(startOfDay.valueOf().toString())}
	y={Math.ceil(y(minutesSinceStartOfDay))}
	fill={colorScale(d.value)}
	width={cellWidth}
	height={cellHeight}
	/>
	</Tippy>

Max when use SUM calculation

Hi.

When I use SUM calculation, the max is the same that when I use AVG calculation, so, the most of cells are over the max and I must set the max manually.

Legend and tooltip ignores global date formatting

It seems that dates are not formatted according to the format set up globally for Grafana -- this makes it hard to use in the regions not using US date-format

Data link support

We would love to have Data Link support with hourly heatmap. Currently if I setup a data link it simply doesn't do anything. Clicking on an hour in the heatmap shows a weird border, that's it (see below).

The data link would allow a link to a detailed view (dashboard) of the hour in question.

Group by 120 minutes

I thought it is easy and I just have to add a new option, but if I do so, the plugin disappears after a Grafana restart. If it is just adding a new option I am happy to create a pull request. Don't know if Grafana has a conflict if I make changes manually.

Maybe one additional question: If I have 2 overlapping entries, how would they be displayed? Next to each other or grouped?

Color palette custom return "PT is undefined"

Hi all, sorry for bad eng.
I am on grafana v10.2.2 and the plugin is working fine but when i change the color palette to "Custom" it returns this error "PT is undefined"


I am using the "TestData DB" as data source.
Some one has the same problem?

u is not a function

Using the hourly timemap I'm getting this error during the configuration of the heatmap

Frame for each time group

Hey guys, is it possible to add a frame for each time group to have each time slot visually separated? After that I think it is easier to identify each time group, especially if the colors are similar.

Add bucket summary in tooltip

Hey there,

Feature Request/Implementation question. I am adding an hourly heatmap to a grafana dashboard I am working on, but I have 4 status' of an hourly task that I want to report on a heatmap eg ('done', 'running', 'error', 'pending').

I was able to implement this by changing those status' to a number, but now I would like to override that number back to the status name proper. Is this something that is currently accessible within the heatmap?

Thanks!

[Feature request] Highlight the legend section for the selected hour

This is a suggestion for improving the readability of the control.
In the current version (0.6.0), the mouse hover on a specific hour provides a tooltip with a pretty good summary for that interval:

I wonder if apart from visualizing that tooltip, it would be possible to highlight the legend area for that specific hour. When you have a gradient of similar colors, it is not easy to distinguish the applicable interval (without reading the actual numbers... that takes "more" time):

A thin line rounding the applicable box in the legend would be enough. But could be nice other options like a circle in the applicable box: