betodealmeida commented on a change in pull request #4800: Improve the calendar 
heatmap
URL: 
https://github.com/apache/incubator-superset/pull/4800#discussion_r180900714
 
 

 ##########
 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:
   This is more a general comment about our dependencies... some files use 
jquery, others use underscore. D3 provides a `range` function, maybe we could 
use it here and get rid of the underscore dependency at least in this file?
   
   I did that in the multi line viz that I'm working on. I noticed that on the 
multi deck.gl viz we're using jquery for async requests, but we can use 
`d3.json` instead, and get rid of the jquery dependency in those files.

----------------------------------------------------------------
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

Reply via email to