src/plugins/HeatmapPlugin.js
function tdStyle(cellData, { columnSummary, column, rowData, isBottomData }) {
  let domain;
  let backgroundScale;
  let colorScale;
  let colorShift;
  let colorScheme;
  let reverseColors;
  let includeBottomData;

  // read in from plugin options
  if (column.plugins && column.plugins.heatmap) {
    domain = column.plugins.heatmap.domain;
    backgroundScale = column.plugins.heatmap.backgroundScale;
    colorScale = column.plugins.heatmap.colorScale;
    colorShift = column.plugins.heatmap.colorShift;
    colorScheme = column.plugins.heatmap.colorScheme;
    reverseColors = column.plugins.heatmap.reverseColors;
    includeBottomData = column.plugins.heatmap.includeBottomData;
  }


  // skip in bottom data area unless this column explicitly says to include it
  if (isBottomData && !includeBottomData) {
    return undefined;
  }

  // compute the sort value
  const sortValue = Utils.getSortValueFromCellData(cellData, column, rowData);

  // do not heatmap null or undefined values
  if (sortValue == null) {
    return undefined;
  }

  // default domain if not provided comes from columnSummary
  if (!domain) {
    // if we didn't get a min/max, just use [0, 1]
    const colMin = columnSummary.min == null ? 0 : columnSummary.min;
    const colMax = columnSummary.max == null ? 1 : columnSummary.max;
    domain = [colMin, colMax];
  }

  // reverse the domain if specified to get the color scheme inverted
  if (reverseColors) {
    domain = domain.slice().reverse();
  }

  const domainScale = d3.scaleLinear().domain(domain)
    .range([0, 1])
    .clamp(true);


  // if a background scale is provided, use it
  let backgroundColor;
  if (backgroundScale) {
    if (backgroundScale.domain) {
      backgroundScale.domain(domain);
    }
    backgroundColor = backgroundScale(sortValue);
  }

  // if a color scale is provided, use it
  let color;
  if (colorScale) {
    if (colorScale.domain) {
      colorScale.domain(domain);
    }
    color = colorScale(sortValue);

  // if a color shift is defined, shift the background color by this amount (0, 1)
  } else if (backgroundScale && colorShift) {
    const shiftedValue = domainScale.invert((domainScale(sortValue) + colorShift) % 1);
    color = backgroundScale(shiftedValue);
  }

  // if no background scale and color scale provided, use default - magma
  if (backgroundScale == null) {
    colorScheme = colorScheme || defaultColorScheme;

    backgroundColor = d3[`interpolate${colorScheme}`](domainScale(sortValue));
    if (!colorScale) {
      colorShift = colorShift || 0.5;
      color = d3[`interpolate${colorScheme}`]((domainScale(sortValue) + colorShift) % 1);
    }
  }

  return {
    backgroundColor,
    color,
  };
}
function tdStyle(cellData, { columnSummary, column, rowData, isBottomData }) {
  let domain;
  let backgroundScale;
  let colorScale;
  let colorShift;
  let colorScheme;
  let reverseColors;
  let includeBottomData;

  // read in from plugin options
  if (column.plugins && column.plugins.heatmap) {
    domain = column.plugins.heatmap.domain;
    backgroundScale = column.plugins.heatmap.backgroundScale;
    colorScale = column.plugins.heatmap.colorScale;
    colorShift = column.plugins.heatmap.colorShift;
    colorScheme = column.plugins.heatmap.colorScheme;
    reverseColors = column.plugins.heatmap.reverseColors;
    includeBottomData = column.plugins.heatmap.includeBottomData;
  }


  // skip in bottom data area unless this column explicitly says to include it
  if (isBottomData && !includeBottomData) {
    return undefined;
  }

  // compute the sort value
  const sortValue = Utils.getSortValueFromCellData(cellData, column, rowData);

  // do not heatmap null or undefined values
  if (sortValue == null) {
    return undefined;
  }

  // default domain if not provided comes from columnSummary
  if (!domain) {
    // if we didn't get a min/max, just use [0, 1]
    const colMin = columnSummary.min == null ? 0 : columnSummary.min;
    const colMax = columnSummary.max == null ? 1 : columnSummary.max;
    domain = [colMin, colMax];
  }

  // reverse the domain if specified to get the color scheme inverted
  if (reverseColors) {
    domain = domain.slice().reverse();
  }

  const domainScale = d3.scaleLinear().domain(domain)
    .range([0, 1])
    .clamp(true);


  // if a background scale is provided, use it
  let backgroundColor;
  if (backgroundScale) {
    if (backgroundScale.domain) {
      backgroundScale.domain(domain);
    }
    backgroundColor = backgroundScale(sortValue);
  }

  // if a color scale is provided, use it
  let color;
  if (colorScale) {
    if (colorScale.domain) {
      colorScale.domain(domain);
    }
    color = colorScale(sortValue);

  // if a color shift is defined, shift the background color by this amount (0, 1)
  } else if (backgroundScale && colorShift) {
    const shiftedValue = domainScale.invert((domainScale(sortValue) + colorShift) % 1);
    color = backgroundScale(shiftedValue);
  }

  // if no background scale and color scale provided, use default - magma
  if (backgroundScale == null) {
    colorScheme = colorScheme || defaultColorScheme;

    backgroundColor = d3[`interpolate${colorScheme}`](domainScale(sortValue));
    if (!colorScale) {
      colorShift = colorShift || 0.5;
      color = d3[`interpolate${colorScheme}`]((domainScale(sortValue) + colorShift) % 1);
    }
  }

  return {
    backgroundColor,
    color,
  };
}
function tdStyle ( cellData , { columnSummary , column , rowData , isBottomData } ) { let domain ; let backgroundScale ; let colorScale ; let colorShift ; let colorScheme ; let reverseColors ; let includeBottomData ; // read in from plugin options if ( column . plugins && column . plugins . heatmap ) { domain = column . plugins . heatmap . domain ; backgroundScale = column . plugins . heatmap . backgroundScale ; colorScale = column . plugins . heatmap . colorScale ; colorShift = column . plugins . heatmap . colorShift ; colorScheme = column . plugins . heatmap . colorScheme ; reverseColors = column . plugins . heatmap . reverseColors ; includeBottomData = column . plugins . heatmap . includeBottomData ; } // skip in bottom data area unless this column explicitly says to include it if ( isBottomData && ! includeBottomData ) { return undefined ; } // compute the sort value const sortValue = Utils . getSortValueFromCellData ( cellData , column , rowData ) ; // do not heatmap null or undefined values if ( sortValue == null ) { return undefined ; } // default domain if not provided comes from columnSummary if ( ! domain ) { // if we didn't get a min/max, just use [0, 1] const colMin = columnSummary . min == null ? 0 : columnSummary . min ; const colMax = columnSummary . max == null ? 1 : columnSummary . max ; domain = [ colMin , colMax ] ; } // reverse the domain if specified to get the color scheme inverted if ( reverseColors ) { domain = domain . slice ( ) . reverse ( ) ; } const domainScale = d3 . scaleLinear ( ) . domain ( domain ) . range ( [ 0 , 1 ] ) . clamp ( true ) ; // if a background scale is provided, use it let backgroundColor ; if ( backgroundScale ) { if ( backgroundScale . domain ) { backgroundScale . domain ( domain ) ; } backgroundColor = backgroundScale ( sortValue ) ; } // if a color scale is provided, use it let color ; if ( colorScale ) { if ( colorScale . domain ) { colorScale . domain ( domain ) ; } color = colorScale ( sortValue ) ; // if a color shift is defined, shift the background color by this amount (0, 1) } else if ( backgroundScale && colorShift ) { const shiftedValue = domainScale . invert ( ( domainScale ( sortValue ) + colorShift ) % 1 ) ; color = backgroundScale ( shiftedValue ) ; } // if no background scale and color scale provided, use default - magma if ( backgroundScale == null ) { colorScheme = colorScheme || defaultColorScheme ; backgroundColor = d3 [ ` ${ colorScheme } ` ] ( domainScale ( sortValue ) ) ; if ( ! colorScale ) { colorShift = colorShift || 0.5 ; color = d3 [ ` ${ colorScheme } ` ] ( ( domainScale ( sortValue ) + colorShift ) % 1 ) ; } } return { backgroundColor , color , } ; }
Compute the style for the td elements by setting the background and color
based on the sort value.

@param {Object} cellData the data for the cell
@param {Object} props Additional properties for the cell
@param {Object} props.columnSummary the column summary
@param {Object} props.column The column definition
@param {Object} props.rowData the data for the row
@param {Boolean} props.isBottomData whether the row is in bottom data area
@return {Object} the style object
Compute the style for the td elements by setting the background and color based on the sort value .