mistercrunch commented on a change in pull request #4800: Improve the calendar
heatmap
URL:
https://github.com/apache/incubator-superset/pull/4800#discussion_r180904351
##########
File path: superset/assets/visualizations/cal_heatmap.js
##########
@@ -1,38 +1,84 @@
-// JS
import d3 from 'd3';
+import _ from 'underscore';
-// CSS
-require('./cal_heatmap.css');
-require('../node_modules/cal-heatmap/cal-heatmap.css');
+import { colorScalerFactory } from '../javascripts/modules/colors';
+import CalHeatMap from '../vendor/cal-heatmap/cal-heatmap';
+import '../vendor/cal-heatmap/cal-heatmap.css';
+import { d3TimeFormatPreset, d3FormatPreset } from
'../javascripts/modules/utils';
+import './cal_heatmap.css';
+import { UTC } from '../javascripts/modules/dates';
-const CalHeatMap = require('cal-heatmap');
+const UTCTS = uts => UTC(new Date(uts)).getTime();
function calHeatmap(slice, payload) {
- const div = d3.select(slice.selector);
+ const fd = slice.formData;
+ const steps = fd.steps;
+ const valueFormatter = d3FormatPreset(fd.y_axis_format);
+ const timeFormatter = d3TimeFormatPreset(fd.x_axis_time_format);
+
+ const container = d3.select(slice.selector).style('height', slice.height());
+ container.selectAll('*').remove();
+ const div = container.append('div');
const data = payload.data;
- div.selectAll('*').remove();
- const cal = new CalHeatMap();
+ const subDomainTextFormat = fd.show_values ? (date, value) =>
valueFormatter(value) : null;
+ const cellPadding = fd.cell_padding !== '' ? fd.cell_padding : 2;
+ const cellRadius = fd.cell_radius || 0;
+ const cellSize = fd.cell_size || 10;
+
+ // Trick to convert all timestamps to UTC
+ const metricsData = {};
+ Object.keys(data.data).forEach((metric) => {
+ metricsData[metric] = {};
+ Object.keys(data.data[metric]).forEach((ts) => {
+ metricsData[metric][UTCTS(ts * 1000) / 1000] = data.data[metric][ts];
+ });
+ });
+
+ Object.keys(metricsData).forEach((metric) => {
+ const calContainer = div.append('div');
+ if (fd.show_metric_name) {
+ calContainer.append('h4').text(slice.verboseMetricName(metric));
+ }
+ const timestamps = metricsData[metric];
+ const extents = d3.extent(Object.keys(timestamps), key => timestamps[key]);
+ const step = (extents[1] - extents[0]) / (steps - 1);
+ const colorScale = colorScalerFactory(fd.linear_color_scheme, null, null,
extents);
+
+ const legend = _.range(steps).map(i => extents[0] + (step * i));
Review comment:
Oh nice, didn't know d3 had a range function. Definitely should limit the
deps in the visualizations as we'll likely break them off as different bundles.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
