Heatmap Visualization

/**
 * Internal function that renders a heatmap visualization in the specified DOM element
 * Used automatically by the ReactHeatmap component wrapper
 * @param element - DOM element to render the heatmap into
 * @param props - Configuration properties for the visualization
 */
function Heatmap(element: HTMLElement, props: HeatmapProps): void;

interface HeatmapProps {
  /** Data structure containing records and value bounds */
  data: {
    records: HeatmapRecord[];
    extents: [number, number];
  };
  /** Chart width in pixels */
  width: number;
  /** Chart height in pixels */  
  height: number;
  /** Bottom margin configuration (auto or pixel value) */
  bottomMargin: string | number;
  /** Canvas image rendering mode */
  canvasImageRendering: 'pixelated' | 'auto';
  /** Color scheme identifier */
  colorScheme: string;
  /** X-axis column name */
  columnX: string;
  /** Y-axis column name */
  columnY: string;
  /** Left margin configuration (auto or pixel value) */
  leftMargin: string | number;
  /** Metric configuration (string name or object) */
  metric: string | { label: string; [key: string]: any };
  /** Whether to use normalized values for coloring */
  normalized: boolean;
  /** Number format string for value display */
  numberFormat: string;
  /** Whether to show color legend */
  showLegend: boolean;
  /** Whether to show percentage in tooltips */
  showPercentage: boolean;
  /** Whether to show values inside cells */
  showValues: boolean;
  /** X-axis sorting method */
  sortXAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
  /** Y-axis sorting method */
  sortYAxis: 'alpha_asc' | 'alpha_desc' | 'value_asc' | 'value_desc';
  /** X-axis scale interval for tick marks */
  xScaleInterval: number;
  /** Y-axis scale interval for tick marks */
  yScaleInterval: number;
  /** Value bounds for color scale [min, max] */
  yAxisBounds: [number | null, number | null];
}

interface HeatmapRecord {
  /** X-axis category value */
  x: string;
  /** Y-axis category value */
  y: string;
  /** Numeric value for the cell */
  v: number;
  /** Percentage value (0-1) */
  perc: number;
  /** Rank value for normalization (0-1) */
  rank: number;
}

/**
 * React wrapper component created using reactify pattern
 * Converts the D3 Heatmap function into a React component
 */
const ReactComponent = reactify(Component);

/**
 * Main React Heatmap component with styling and theming
 * @param props - React props including className and heatmap properties
 * @returns Styled React component with Global emotion styles
 */
function ReactHeatmap(props: ReactHeatmapProps): React.ReactElement;

interface ReactHeatmapProps extends HeatmapProps {
  /** CSS class name for styling */
  className?: string;
}

const propTypes = {
  data: PropTypes.shape({
    records: PropTypes.arrayOf(
      PropTypes.shape({
        x: PropTypes.string,
        y: PropTypes.string,
        v: PropTypes.number,
        perc: PropTypes.number,
        rank: PropTypes.number,
      }),
    ),
    extents: PropTypes.arrayOf(PropTypes.number),
  }),
  width: PropTypes.number,
  height: PropTypes.number,
  bottomMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  colorScheme: PropTypes.string,
  columnX: PropTypes.string,
  columnY: PropTypes.string,
  leftMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  metric: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  normalized: PropTypes.bool,
  numberFormat: PropTypes.string,
  showLegend: PropTypes.bool,
  showPercentage: PropTypes.bool,
  showValues: PropTypes.bool,
  sortXAxis: PropTypes.string,
  sortYAxis: PropTypes.string,
  xScaleInterval: PropTypes.number,
  yScaleInterval: PropTypes.number,
  yAxisBounds: PropTypes.arrayOf(PropTypes.number),
};

// Note: Heatmap function is not directly exported - it's used through ReactHeatmap
import ReactHeatmap from '@superset-ui/legacy-plugin-chart-heatmap';

const element = document.getElementById('heatmap-container');
const props = {
  data: {
    records: [
      { x: 'Product A', y: 'Region 1', v: 100, perc: 0.2, rank: 0.5 },
      { x: 'Product B', y: 'Region 2', v: 150, perc: 0.3, rank: 0.7 },
    ],
    extents: [0, 200]
  },
  width: 600,
  height: 400,
  colorScheme: 'schemeBlues',
  columnX: 'Product',
  columnY: 'Region',
  metric: 'Sales',
  showLegend: true,
  showValues: false,
  normalized: false,
  numberFormat: '.2f',
  sortXAxis: 'alpha_asc',
  sortYAxis: 'value_desc',
  xScaleInterval: 1,
  yScaleInterval: 1,
  leftMargin: 'auto',
  bottomMargin: 'auto',
  yAxisBounds: [null, null]
};

// For direct D3 usage, you would need to import the internal component
// This is not the recommended approach - use ReactHeatmap instead

import ReactHeatmap from '@superset-ui/legacy-plugin-chart-heatmap';

function MyComponent() {
  return (
    <ReactHeatmap
      data={{
        records: [
          { x: 'Mon', y: 'Hour 9', v: 25, perc: 0.15, rank: 0.4 },
          { x: 'Tue', y: 'Hour 10', v: 40, perc: 0.25, rank: 0.6 },
        ],
        extents: [0, 100]
      }}
      width={800}
      height={600}
      colorScheme='schemeReds'
      columnX='Day'
      columnY='Time'
      metric='Activity'
      showLegend={true}
      showValues={true}
      showPercentage={true}
      normalized={false}
    />
  );
}

// Complex heatmap with custom styling and normalization
const advancedProps = {
  data: correlationMatrix, // Large dataset
  width: 1000,
  height: 800,
  colorScheme: 'schemePiYG', // Diverging color scheme
  normalized: true, // Use rank-based coloring
  showLegend: true,
  showValues: false, // Too many cells for values
  showPercentage: true,
  leftMargin: 120, // Fixed margin for long labels
  bottomMargin: 80,
  xScaleInterval: 2, // Show every 2nd label
  yScaleInterval: 3, // Show every 3rd label
  sortXAxis: 'value_desc', // Sort by correlation strength
  sortYAxis: 'value_desc',
  yAxisBounds: [-1, 1], // Correlation bounds
  numberFormat: '.3f', // 3 decimal places
  canvasImageRendering: 'pixelated' // Sharp edges
};