├── LICENSE
├── README.md
├── _config.yml
├── index.js
├── package.json
└── public
├── d3_timeline_heatmap.js
├── timeline_heatmap.less
├── timeline_heatmap_controller.html
├── timeline_heatmap_controller.js
├── timeline_heatmap_tooltip.html
├── timeline_heatmap_tooltip_formatter.js
├── timeline_heatmap_vis.js
└── timeline_heatmap_vis_params.html
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Timeline Heatmap
2 |
3 | ## Plugin Visualization Versions
4 | * [Kibana 4](https://github.com/JacobBrandt/timeline_heatmap/tree/4.6)
5 | * [Kibana 5](https://github.com/JacobBrandt/timeline_heatmap/tree/5.1)
6 |
7 | 
8 |
9 | # New Features!
10 | * Axis Bar Chart - Visualizes metric count for entire source or time event. Color is configurable.
11 | * Axis Filtering - Brush along the X or Y Axis to narrow down your time or source respectively
12 | * Zoom Filtering - Brushing in the heatmap graph will zoom into the bounding box. Essentially applying the time and source filter.
13 | * Toggle Heatmap - Toggle between overall heatmap and individual heatmaps by time interval (columns) or source (rows).
14 |
15 | # Additional Features
16 | * Metric Filtering (Internal) - Brush on the legend to quickly find values within the heatmap. An internal filter that preserves the original data.
17 | * Tooltips - Displays Source Label, Metric Label, and Time
18 |
19 | 
20 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-tactile
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | export default function (kibana) {
2 | return new kibana.Plugin({
3 | // Plugin configuration
4 | uiExports: {
5 | visTypes: ['plugins/timeline_heatmap/timeline_heatmap_vis']
6 | }
7 | });
8 | };
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "timeline_heatmap",
3 | "version": "kibana"
4 | }
5 |
--------------------------------------------------------------------------------
/public/d3_timeline_heatmap.js:
--------------------------------------------------------------------------------
1 | function heatmap(element, chartData, settings) {
2 | var interval = settings.interval;
3 | var min = parseInt(settings.min);
4 | var max = parseInt(settings.max) + interval;
5 | var onTimeChange = settings.onTimeChange;
6 | var onSourceChange = settings.onSourceChange;
7 | var formatTooltip = settings.formatTooltip;
8 | var showTooltip = settings.showTooltip;
9 | var showLegend = settings.showLegend;
10 | var xAxisFormatter = settings.xAxisFormatter;
11 | var rangeBandPct = settings.rangeBandPct;
12 | var sourceType = settings.sourceType;
13 | var heatmapType = settings.type;
14 | var showCrosshair = settings.showCrosshair;
15 |
16 | var selection = d3.select(element);
17 | var visualizeEl = element.parentNode.parentNode;
18 |
19 | // Overall dimensions
20 | var graphHeight = visualizeEl.clientHeight - 20;
21 | var margin = { top: 10, right: 20, bottom: 30, left: 70 },
22 | width = visualizeEl.clientWidth - margin.left - margin.right,
23 | height = graphHeight - margin.top - margin.bottom;
24 |
25 | var xScale, yScale;
26 | var xAxis, yAxis;
27 | var graph;
28 | var legend;
29 | var legendBrush;
30 | var legendScale;
31 | var legendHeight = 16;
32 | var legendMargin = { top: 0, right: 20, bottom: 20, left: margin.left };
33 | if (showLegend) {
34 | height -= (legendHeight + legendMargin.top + legendMargin.bottom);
35 | }
36 | var graphCtx, crosshairCtx, canvasTooltips, tooltip;
37 |
38 | // Heatmap dimensions
39 | var axisChartSize = 15;
40 | var heatWidth = width - axisChartSize;
41 | var heatHeight = height - axisChartSize;
42 |
43 | // Get colors
44 | var colorTypes = new Map();
45 | colorTypes.set('Spectral', ["#5e4fa2", "#3288bd", "#66c2a5", "#abdda4", "#e6f598", "#fee08b", "#fdae61", "#f46d43", "#d53e4f", "#9e0142"]);
46 | colorTypes.set('Orange', ['#fee0b6', '#fdb863', '#e08214', '#b35806', '#7f3b08']);
47 | colorTypes.set('Purple', ['#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b']);
48 | colorTypes.set('Pink', ['#FFFFFF', '#FFECFC', '#FFDAF9', '#FFC7F7', '#FFB5F4', '#FFA3F2', '#FF90EF', '#FF7EEC', '#FF6BEA', '#FF59E7', '#FF00DB']);
49 | var colors = colorTypes.get(settings.colorType);
50 | var horizonColors = colorTypes.get(settings.axisColorType);
51 |
52 | let timeOverallData = [];
53 | let sourceOverallData = [];
54 | let timeMin = [];
55 | let timeMax = [];
56 | chartData.forEach(function (series, index, data) {
57 | // Find the min/max within this series
58 | let min = Infinity;
59 | let max = -Infinity;
60 | let count = 0;
61 | series.data.forEach(function (serData) {
62 | count += serData.count;
63 | // Check min/max of series
64 | min = Math.min(min, serData.count);
65 | max = Math.max(max, serData.count);
66 |
67 | // Check min/max of time
68 | timeMin[serData.time] = timeMin[serData.time] ? Math.min(timeMin[serData.time], serData.count) : serData.count;
69 | timeMax[serData.time] = timeMax[serData.time] ? Math.max(timeMax[serData.time], serData.count) : serData.count;
70 |
71 | // Populate time overall data
72 | timeOverallData[serData.time] = {
73 | count: timeOverallData[serData.time] ? timeOverallData[serData.time].count + serData.count : serData.count
74 | };
75 | });
76 | // Populate source overall data
77 | data[index].min = min;
78 | data[index].max = max;
79 | data[index].count = count;
80 | data[index].colorScale = d3.scale.linear()
81 | .domain(linspace(min, max, colors.length))
82 | .range(colors);
83 | sourceOverallData[series.name] = {
84 | count: sourceOverallData[series.name] ? sourceOverallData[series.name].count + count : count
85 | }
86 | });
87 |
88 | // Gather data
89 | var countMax = 0;
90 | var data = [];
91 | var sources = chartData;
92 | sources.forEach(function (source) {
93 | source.data.forEach(function (d) {
94 | countMax = Math.max(countMax, d.count);
95 | d.name = source.name;
96 | d.sourceMin = source.min;
97 | d.sourceMax = source.max;
98 | d.sourceColorScale = source.colorScale;
99 | d.timeColorScale = d3.scale.linear()
100 | .domain(linspace(timeMin[d.time], timeMax[d.time], colors.length))
101 | .range(colors);
102 | data.push(d);
103 | });
104 | });
105 | // Sort by count for faster rendering
106 | data.sort(function (a, b) {
107 | return d3.ascending(a.count, b.count);
108 | });
109 |
110 | // Set heatmap color scale and default legend extents
111 | var heatmapColorScale = d3.scale.linear()
112 | .domain(linspace(0, countMax, colors.length))
113 | .range(colors);
114 | var legendExtents = {
115 | min: 0,
116 | max: countMax
117 | };
118 |
119 | var sourceNames = [];
120 | sources.forEach(function (source) {
121 | sourceNames.push(source.name);
122 | });
123 |
124 | function createGraphScales() {
125 | xScale = d3.time.scale()
126 | .domain([min, max])
127 | .range([0, heatWidth])
128 |
129 | yScale = d3.scale.ordinal()
130 | .domain(sourceNames)
131 | .rangeBands([0, heatHeight], (100 - rangeBandPct) / 100);
132 | }
133 |
134 | function createAxis() {
135 | xAxis = d3.svg.axis()
136 | .scale(xScale)
137 | .orient("bottom")
138 | .tickFormat(xAxisFormatter)
139 | .tickSize(15);
140 | yAxis = d3.svg.axis()
141 | .scale(yScale)
142 | .tickSize(15)
143 | .orient("left");
144 | let sourceLabelHeight = 17.5
145 | if (sourceNames.length * sourceLabelHeight > heatHeight) {
146 | var interval = Math.floor(sourceNames.length / Math.floor(heatHeight / sourceLabelHeight));
147 | yAxis.tickValues(yScale.domain().filter(function (d, i) { return i == 0 || !(i % interval) }))
148 | }
149 | }
150 |
151 | function createLegend() {
152 | selection.selectAll(".heatmap-legend").remove();
153 | if (!showLegend) {
154 | return;
155 | }
156 | legend = selection.append("svg")
157 | .attr("class", "heatmap-legend")
158 | .attr("width", width + legendMargin.left + legendMargin.right)
159 | .attr("height", legendHeight + legendMargin.top + legendMargin.bottom)
160 | .append("g")
161 | .attr("transform", "translate(" + legendMargin.left + ",0)");
162 |
163 | let gradient = legend.append("defs")
164 | .append('linearGradient')
165 | .attr("id", "gradient");
166 |
167 | let pct = linspace(0, 100, colors.length).map(function (d) {
168 | return Math.round(d) + '%';
169 | });
170 |
171 | let colourPct = d3.zip(pct, colors);
172 | colourPct.forEach(function (d) {
173 | gradient.append('stop')
174 | .attr('offset', d[0])
175 | .attr('stop-color', d[1])
176 | .attr('stop-opacity', 1);
177 | });
178 |
179 | legend.append('rect')
180 | .attr('width', width)
181 | .attr('height', legendHeight)
182 | .style('fill', 'url(#gradient)');
183 |
184 | legendScale = d3.scale.linear()
185 | .domain([0, countMax])
186 | .range([0, width]);
187 |
188 | let legendAxis = d3.svg.axis()
189 | .scale(legendScale)
190 | .orient("bottom");
191 |
192 | legend.append("g")
193 | .attr("class", "axis legend")
194 | .attr("transform", "translate(0, " + legendHeight + ")")
195 | .call(legendAxis);
196 |
197 | legend.append("text")
198 | .attr("class", "extents")
199 | .attr("transform", "translate(0, " + (legendHeight + legendMargin.bottom) + ")")
200 | .text("");
201 | }
202 |
203 | function truncateText() {
204 | var self = d3.select(this),
205 | textLength = self.node().getComputedTextLength(),
206 | text = self.text();
207 | while (textLength > (margin.left - 12) && text.length > 0) {
208 | text = text.slice(0, -1);
209 | self.text(text + '...');
210 | textLength = self.node().getComputedTextLength();
211 | }
212 | }
213 |
214 | function createGraph() {
215 | selection.selectAll(".heatmap-main").remove();
216 | graph = selection.append("svg")
217 | .attr("class", "heatmap-main")
218 | .attr("width", heatWidth + margin.left + margin.right)
219 | .attr("height", heatHeight + margin.top + margin.bottom)
220 | .append("g")
221 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
222 |
223 | graph.append("g")
224 | .attr("class", "axis axis--x")
225 | .attr("transform", "translate(0," + (heatHeight) + ")")
226 | .call(xAxis);
227 |
228 | graph.append("g")
229 | .attr("class", "axis axis--y")
230 | .call(yAxis);
231 |
232 | let graphYAxis = d3.select(".axis--y");
233 | graphYAxis.selectAll(".tick")
234 | .selectAll("text")
235 | .html("")
236 | .append('tspan').text(function (d) {
237 | return d;
238 | })
239 | // .attr("full-text", function(d) {return d})
240 | .each(truncateText)
241 | .append('title').text(function (d) {
242 | return d;
243 | });
244 | }
245 |
246 | function createXBarChart() {
247 | selection.selectAll(".heatmap-x-bars").remove();
248 | var canvas = selection.append("canvas")
249 | .attr("class", "heatmap-x-bars")
250 | .attr("width", heatWidth)
251 | .attr("height", axisChartSize)
252 | .style("position", "absolute")
253 | .style("z-index", "-1")
254 | .style("left", margin.left + "px")
255 | .style("top", margin.top + heatHeight + "px");
256 |
257 | let ctx = canvas.node().getContext("2d");
258 | ctx.clearRect(0, 0, heatWidth, axisChartSize);
259 | let min = Infinity;
260 | let max = -Infinity;
261 | Object.keys(timeOverallData).forEach(function (time) {
262 | let timeData = timeOverallData[time];
263 | min = Math.min(min, timeData.count);
264 | max = Math.max(max, timeData.count);
265 | });
266 |
267 | var xHorizonColorScale = d3.scale.linear()
268 | .domain(linspace(min, max, horizonColors.length))
269 | .range(horizonColors);
270 | let heightScale = d3.scale.linear()
271 | .domain([min, max])
272 | .range([0, axisChartSize]);
273 |
274 | Object.keys(timeOverallData).forEach(function (time) {
275 | let timeData = timeOverallData[time];
276 | let start = xScale(time);
277 | ctx.fillStyle = xHorizonColorScale(timeData.count);
278 | ctx.fillRect(start, 0, xScale(time - interval) - start, heightScale(timeData.count));
279 | });
280 | }
281 |
282 | function createYBarChart() {
283 | selection.selectAll(".heatmap-y-bars").remove();
284 | var canvas = selection.append("canvas")
285 | .attr("class", "heatmap-y-bars")
286 | .attr("width", axisChartSize)
287 | .attr("height", heatHeight)
288 | .style("position", "absolute")
289 | .style("z-index", "-1")
290 | .style("left", (margin.left - axisChartSize) + "px")
291 | .style("top", margin.top + "px");
292 |
293 | let ctx = canvas.node().getContext("2d");
294 | ctx.clearRect(0, 0, axisChartSize, heatHeight);
295 |
296 | let min = Infinity;
297 | let max = -Infinity;
298 | Object.keys(sourceOverallData).forEach(function (source) {
299 | let sourceData = sourceOverallData[source];
300 | min = Math.min(min, sourceData.count);
301 | max = Math.max(max, sourceData.count);
302 | });
303 | var yHorizonColorScale = d3.scale.linear()
304 | .domain(linspace(min, max, horizonColors.length))
305 | .range(horizonColors);
306 |
307 | let widthScale = d3.scale.linear()
308 | .domain([min, max])
309 | .range([0, axisChartSize]);
310 |
311 | Object.keys(sourceOverallData).forEach(function (source) {
312 | let sourceData = sourceOverallData[source];
313 | ctx.fillStyle = yHorizonColorScale(sourceData.count);
314 | ctx.fillRect(axisChartSize, yScale(source), -widthScale(sourceData.count), yScale.rangeBand());
315 | });
316 | }
317 |
318 | function createGraphBrush() {
319 | let graphBrush = d3.svg.brush()
320 | .x(xScale)
321 | .y(yScale)
322 | .on("brushend", function () {
323 | let minExtent = graphBrush.extent()[0];
324 | let maxExtent = graphBrush.extent()[1];
325 | if (minExtent[0].toString() == maxExtent[0].toString() && minExtent[1].toString() == maxExtent[1].toString()) {
326 | return;
327 | }
328 |
329 | onTimeChange(minExtent[0], maxExtent[0]);
330 | triggerSourceExtents(minExtent[1], maxExtent[1])
331 | });
332 |
333 | graph.append("g")
334 | .attr("class", "x brush brush-graph")
335 | .call(graphBrush)
336 | .selectAll("rect")
337 | .attr("y", 1)
338 | .attr("height", heatHeight);
339 |
340 | selection.selectAll(".heatmap-tooltip").remove();
341 | tooltip = selection.append("div")
342 | .attr("class", "heatmap-tooltip vis-tooltip")
343 | .style("opacity", 0)
344 | .style("position", "absolute")
345 | .style("visibility", "visible");
346 |
347 | if (showTooltip) {
348 | graph.select(".brush-graph")
349 | .on("mouseout", function () {
350 | tooltip.style("opacity", 0);
351 | crosshairCtx.clearRect(0, 0, heatWidth, heatHeight);
352 | })
353 | .on("mousemove", function () {
354 | var mouse = d3.mouse(this);
355 | var mouseX = mouse[0];
356 | var mouseY = mouse[1];
357 | if (showCrosshair) {
358 | crosshairCtx.clearRect(0, 0, heatWidth, heatHeight);
359 | crosshairCtx.strokeStyle = "#FF47E5";
360 | crosshairCtx.beginPath();
361 | crosshairCtx.moveTo(mouseX, heatHeight);
362 | crosshairCtx.lineTo(mouseX, heatHeight - 10);
363 | crosshairCtx.stroke();
364 | crosshairCtx.moveTo(0, mouseY);
365 | crosshairCtx.lineTo(10, mouseY);
366 | crosshairCtx.stroke();
367 | }
368 | var selectedTip = null;
369 | var lane = 0;
370 | canvasTooltips.forEach(function (tip) {
371 | if (tip.x >= mouseX && mouseX + tip.width >= tip.x) {
372 | if (tip.y <= mouseY && tip.y + tip.height >= mouseY) {
373 | selectedTip = tip;
374 | }
375 | }
376 | });
377 | if (selectedTip !== null) {
378 | tooltip.html(formatTooltip(selectedTip));
379 | let tooltipEl = tooltip[0][0];
380 | let left = mouseX + margin.left;
381 | if (left + tooltipEl.clientWidth > heatWidth) {
382 | left -= tooltipEl.clientWidth;
383 | }
384 | let top = mouseY;
385 | if (top + tooltipEl.clientHeight > heatHeight) {
386 | top -= tooltipEl.clientHeight;
387 | }
388 | tooltip.style("left", left + "px")
389 | .style("top", top + "px");
390 | tooltip.style("opacity", .9);
391 | }
392 | else {
393 | tooltip.style("opacity", 0);
394 | }
395 | });
396 | }
397 | }
398 |
399 | function createSourceBrush() {
400 | let sourceBrush = d3.svg.brush()
401 | .y(yScale);
402 |
403 | let brushRect = graph.append("g")
404 | .attr("class", "y brush brush-source")
405 | .call(sourceBrush)
406 | .selectAll("rect")
407 | .attr("y", 0)
408 | .attr("transform", "translate(" + (-axisChartSize - 8) + ",0)")
409 | .attr("width", axisChartSize + 8);
410 |
411 | sourceBrush
412 | .on("brushstart", function () {
413 | brushRect
414 | .attr("width", heatWidth + axisChartSize + 8);
415 | })
416 | .on("brushend", function () {
417 | brushRect
418 | .attr("transform", "translate(" + (-axisChartSize - 8) + ",0)")
419 | .attr("width", axisChartSize + 8);
420 | let minExtent = sourceBrush.extent()[0];
421 | let maxExtent = sourceBrush.extent()[1];
422 | if (minExtent.toString() == maxExtent.toString()) {
423 | return;
424 | }
425 |
426 | triggerSourceExtents(minExtent, maxExtent);
427 | });
428 | }
429 |
430 | function createTimeBrush() {
431 | let timeBrush = d3.svg.brush()
432 | .x(xScale);
433 |
434 | let brushRect = graph.append("g")
435 | .attr("class", "y brush brush-time")
436 | .call(timeBrush)
437 | .selectAll("rect")
438 | .attr("y", 1)
439 | .attr("transform", "translate(0," + (heatHeight) + ")")
440 | .attr("height", axisChartSize);
441 |
442 | timeBrush
443 | .on("brushstart", function () {
444 | brushRect
445 | .attr("transform", "translate(0, 0)")
446 | .attr("height", heatHeight + axisChartSize);
447 | })
448 | .on("brushend", function () {
449 | brushRect
450 | .attr("transform", "translate(0," + (heatHeight) + ")")
451 | .attr("height", axisChartSize);
452 | let minExtent = timeBrush.extent()[0];
453 | let maxExtent = timeBrush.extent()[1];
454 | if (minExtent.toString() == maxExtent.toString()) {
455 | return;
456 | }
457 |
458 | onTimeChange(minExtent, maxExtent);
459 | });
460 |
461 | }
462 |
463 | function createLegendBrush() {
464 | if (!showLegend) {
465 | return;
466 | }
467 | legendBrush = d3.svg.brush()
468 | .x(legendScale)
469 | .on("brush", function () {
470 | let minExtent = legendBrush.extent()[0];
471 | let maxExtent = legendBrush.extent()[1];
472 | legendExtents.min = minExtent;
473 | legendExtents.max = maxExtent;
474 | if (minExtent.toString() == maxExtent.toString()) {
475 | legendExtents.min = 0;
476 | legendExtents.max = countMax;
477 | }
478 | drawCanvas();
479 | });
480 |
481 | legend.append("g")
482 | .attr("class", "x brush")
483 | .call(legendBrush)
484 | .selectAll("rect")
485 | .attr("y", 1)
486 | .attr("height", legendHeight + 24);
487 | }
488 |
489 | function triggerSourceExtents(minExtent, maxExtent) {
490 | var selected = yScale.domain().filter(function (d) {
491 | let y = yScale(d);
492 | return minExtent <= y + yScale.rangeBand() && maxExtent >= y;
493 | });
494 |
495 | if (selected.length) {
496 | onSourceChange(selected);
497 | }
498 | return null;
499 | }
500 |
501 | function linspace(a, b, n) {
502 | let out = [];
503 | let delta = (b - a) / (n - 1);
504 | let i = 0;
505 | while (i < (n - 1)) {
506 | out.push(a + (i * delta));
507 | i++;
508 | }
509 | out.push(b);
510 | return out;
511 | }
512 |
513 | function drawCanvas() {
514 | let brushHeight
515 | selection.selectAll(".heatmap-canvas-brush").remove();
516 | let brush = selection.append("canvas")
517 | .attr("class", "heatmap-canvas-brush")
518 | .attr("width", "3px")
519 | .attr("height", "3px");
520 |
521 |
522 | canvasTooltips = [];
523 | graphCtx.clearRect(0, 0, heatWidth, heatHeight);
524 | let previousValue = null;
525 | data.forEach(function (d) {
526 | if (d.count !== null && d.count >= legendExtents.min && d.count <= legendExtents.max) {
527 | let start = xScale(d.time);
528 | if (heatmapType === "overall" && previousValue != d.count) {
529 | graphCtx.fillStyle = heatmapColorScale(d.count);
530 | previousValue = d.count;
531 | } else if (heatmapType === "bySource") {
532 | graphCtx.fillStyle = d.sourceColorScale(d.count);
533 | } else if (heatmapType === "byTime") {
534 | graphCtx.fillStyle = d.timeColorScale(d.count);
535 | }
536 | graphCtx.fillRect(start, yScale(d.name), xScale(d.time - interval) - start, yScale.rangeBand());
537 | if (showTooltip) {
538 | canvasTooltips.push({
539 | x: start,
540 | y: yScale(d.name),
541 | width: Math.abs(xScale(d.time - interval) - start),
542 | height: yScale.rangeBand(),
543 | tip: d.count,
544 | lane: d.name,
545 | time: d.time
546 | });
547 | }
548 | }
549 | });
550 | }
551 |
552 | function createHeatmapSwitcher() {
553 | let size = 15;
554 | let switcherCtx;
555 | selection.selectAll(".heatmap-type-text").remove();
556 | let switcherType = selection.append("div")
557 | .attr("class", "heatmap-type-text")
558 | .style("position", "absolute")
559 | .style("left", "0px")
560 | .style("text-align", "center")
561 | .style("font-size", "10px")
562 | .style("width", "50px")
563 | .style("top", (margin.top + heatHeight) + "px");
564 | function drawHeatmapSwitcher() {
565 | switcherCtx.clearRect(0, 0, size, size);
566 | let grad;
567 | if (heatmapType === "overall") {
568 | switcherCtx.setTransform(1, 0, 0, 1, 0, 0);
569 | grad = switcherCtx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size * .7071);
570 | }
571 | else if (heatmapType === "byTime") {
572 | grad = switcherCtx.createLinearGradient(size / 2, size, size / 2, 0);
573 | }
574 | else if (heatmapType === "bySource") {
575 | grad = switcherCtx.createLinearGradient(0, size / 2, size, size / 2);
576 | }
577 | grad.addColorStop(1, 'rgba(94,79,162,1)');
578 | grad.addColorStop(0.75, 'rgba(102,194,165,1)');
579 | grad.addColorStop(0.5, 'rgba(230,245,152,1)');
580 | grad.addColorStop(0.25, 'rgba(244,109,67,1)');
581 | grad.addColorStop(0, 'rgba(158,1,66,1)');
582 | switcherCtx.fillStyle = grad;
583 | if (heatmapType === "overall") {
584 | switcherCtx.fillRect(0, 0, size, size);
585 | switcherType.node().innerHTML = "Overall";
586 | }
587 | else if (heatmapType === "byTime") {
588 | switcherCtx.fillRect(size / 4, 0, size / 2, size);
589 | switcherType.node().innerHTML = "Time";
590 | }
591 | else if (heatmapType === "bySource") {
592 | switcherCtx.fillRect(0, size / 4, size, size / 2);
593 | switcherType.node().innerHTML = "Source";
594 | }
595 | }
596 |
597 | selection.select(".heatmap-switcher").remove();
598 | let switcher = selection.append("canvas")
599 | .attr("class", "heatmap-switcher")
600 | .attr("width", size + "px")
601 | .attr("height", size + "px")
602 | .style("position", "absolute")
603 | .style("opacity", ".8")
604 | .style("cursor", "pointer")
605 | .style("left", (margin.left - size - 2) + "px")
606 | .style("top", (margin.top + heatHeight) + "px")
607 | .style("border", "1px solid #ddd")
608 | .on("click", function () {
609 | if (heatmapType === "overall") {
610 | heatmapType = "byTime";
611 | }
612 | else if (heatmapType === "byTime") {
613 | heatmapType = "bySource";
614 | }
615 | else {
616 | heatmapType = "overall";
617 | }
618 | drawHeatmapSwitcher();
619 | drawCanvas();
620 | });
621 | switcherCtx = switcher.node().getContext("2d");
622 | drawHeatmapSwitcher();
623 | }
624 |
625 | function draw() {
626 | selection.selectAll(".heatmap-canvas").remove();
627 | var canvas = selection.append("canvas")
628 | .attr("class", "heatmap-canvas")
629 | .attr("width", heatWidth)
630 | .attr("height", heatHeight)
631 | .style("position", "absolute")
632 | .style("z-index", "-1")
633 | .style("left", margin.left + "px")
634 | .style("top", margin.top + "px");
635 | graphCtx = canvas.node().getContext("2d");
636 | var crosshair = selection.append("canvas")
637 | .attr("class", "heatmap-canvas")
638 | .attr("width", heatWidth)
639 | .attr("height", heatHeight)
640 | .style("position", "absolute")
641 | .style("z-index", "-1")
642 | .style("left", margin.left + "px")
643 | .style("top", margin.top + "px");
644 | crosshairCtx = crosshair.node().getContext("2d");
645 | drawCanvas();
646 | }
647 |
648 | createGraphScales();
649 | createAxis();
650 | createGraph();
651 | createXBarChart();
652 | createYBarChart();
653 | createGraphBrush();
654 | createSourceBrush();
655 | createTimeBrush();
656 |
657 | createLegend();
658 | createLegendBrush();
659 |
660 | createHeatmapSwitcher();
661 |
662 | draw();
663 | }
664 |
665 | export default heatmap;
666 |
--------------------------------------------------------------------------------
/public/timeline_heatmap.less:
--------------------------------------------------------------------------------
1 | #timeline-heatmap {
2 | position: relative;
3 | z-index: 10;
4 | }
5 |
--------------------------------------------------------------------------------
/public/timeline_heatmap_controller.html:
--------------------------------------------------------------------------------
1 |