all files / src/visualizations/ cal_heatmap.js

23.26% Statements 10/43
0% Branches 0/10
0% Functions 0/8
25.64% Lines 10/39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84                                                                                                                                                    
import d3 from 'd3';
 
import { colorScalerFactory } from '../modules/colors';
import CalHeatMap from '../../vendor/cal-heatmap/cal-heatmap';
import '../../vendor/cal-heatmap/cal-heatmap.css';
import { d3TimeFormatPreset, d3FormatPreset } from '../modules/utils';
import './cal_heatmap.css';
import { UTC } from '../modules/dates';
 
const UTCTS = uts => UTC(new Date(uts)).getTime();
 
function calHeatmap(slice, payload) {
  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;
 
  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 = d3.range(steps).map(i => extents[0] + (step * i));
    const legendColors = legend.map(colorScale);
 
    const cal = new CalHeatMap();
 
    cal.init({
      start: UTCTS(data.start),
      data: timestamps,
      itemSelector: calContainer[0][0],
      legendVerticalPosition: 'top',
      cellSize,
      cellPadding,
      cellRadius,
      legendCellSize: cellSize,
      legendCellPadding: 2,
      legendCellRadius: cellRadius,
      tooltip: true,
      domain: data.domain,
      subDomain: data.subdomain,
      range: data.range,
      browsing: true,
      legend,
      legendColors: {
        colorScale,
        min: legendColors[0],
        max: legendColors[legendColors.length - 1],
        empty: 'white',
      },
      displayLegend: fd.show_legend,
      itemName: '',
      valueFormatter,
      timeFormatter,
      subDomainTextFormat,
    });
  });
}
module.exports = calHeatmap;