feat: pass color range parameters to the heatmap component

superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js

@@ -71,6 +71,9 @@ function Calendar(element, props) {
     valueFormatter,
     verboseMap,
     theme,
+    colorRangeEnd,
+    colorRangeStart,
+    useCustomColorRange,
   } = props;
 
   const container = d3Select(element)
@@ -93,7 +96,9 @@ function Calendar(element, props) {
       calContainer.text(`${METRIC_TEXT}: ${verboseMap[metric] || metric}`);
     }
     const timestamps = metricsData[metric];
-    const extents = d3Extent(Object.keys(timestamps), key => timestamps[key]);
+    const extents = useCustomColorRange
+      ? [colorRangeStart, colorRangeEnd - 1]
+      : d3Extent(Object.keys(timestamps), key => timestamps[key]);
     const step = (extents[1] - extents[0]) / (steps - 1);
     const colorScale = getSequentialSchemeRegistry()
       .get(linearColorScheme)

superset-frontend/plugins/legacy-plugin-chart-calendar/src/transformProps.js

@@ -35,12 +35,21 @@ export default function transformProps(chartProps) {
     subdomainGranularity,
     xAxisTimeFormat,
     yAxisFormat,
+    colorRangeEnd,
+    colorRangeStart,
   } = formData;
 
   const { verboseMap } = datasource;
   const timeFormatter = ts => getFormattedUTCTime(ts, xAxisTimeFormat);
   const valueFormatter = getNumberFormatter(yAxisFormat);
 
+  // Get the color range if both are specified
+  const useCustomColorRange =
+    colorRangeEnd !== undefined &&
+    colorRangeEnd !== '' &&
+    colorRangeStart !== undefined &&
+    colorRangeStart !== '';
+
   return {
     height,
     data: queriesData[0].data,
@@ -57,5 +66,8 @@ export default function transformProps(chartProps) {
     timeFormatter,
     valueFormatter,
     verboseMap,
+    colorRangeEnd,
+    colorRangeStart,
+    useCustomColorRange,
   };
 }