chore(frontend): comprehensive TypeScript quality improvements (#37625)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.tsx

@@ -18,35 +18,34 @@
  */
 /* eslint-disable react/jsx-sort-default-props, react/sort-prop-types */
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { extent as d3Extent } from 'd3-array';
 import { ensureIsArray } from '@superset-ui/core';
 import { styled } from '@apache-superset/core/ui';
 import HorizonRow, { DEFAULT_COLORS } from './HorizonRow';
 
-const propTypes = {
-  className: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  seriesHeight: PropTypes.number,
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.arrayOf(PropTypes.string),
-      values: PropTypes.arrayOf(
-        PropTypes.shape({
-          y: PropTypes.number,
-        }),
-      ),
-    }),
-  ).isRequired,
-  // number of bands in each direction (positive / negative)
-  bands: PropTypes.number,
-  colors: PropTypes.arrayOf(PropTypes.string),
-  colorScale: PropTypes.string,
-  mode: PropTypes.string,
-  offsetX: PropTypes.number,
-};
-const defaultProps = {
+interface DataValue {
+  y: number;
+}
+
+interface DataSeries {
+  key: string[];
+  values: DataValue[];
+}
+
+interface HorizonChartProps {
+  className?: string;
+  width?: number;
+  height?: number;
+  seriesHeight?: number;
+  data: DataSeries[];
+  bands?: number;
+  colors?: string[];
+  colorScale?: string;
+  mode?: string;
+  offsetX?: number;
+}
+
+const defaultProps: Partial<HorizonChartProps> = {
   className: '',
   width: 800,
   height: 600,
@@ -81,7 +80,9 @@ const StyledDiv = styled.div`
   `}
 `;
 
-class HorizonChart extends PureComponent {
+class HorizonChart extends PureComponent<HorizonChartProps> {
+  static defaultProps = defaultProps;
+
   render() {
     const {
       className,
@@ -96,13 +97,17 @@ class HorizonChart extends PureComponent {
       offsetX,
     } = this.props;
 
-    let yDomain;
+    let yDomain: [number, number] | undefined;
     if (colorScale === 'overall') {
-      const allValues = data.reduce(
+      const allValues = data.reduce<DataValue[]>(
         (acc, current) => acc.concat(current.values),
         [],
       );
-      yDomain = d3Extent(allValues, d => d.y);
+      const rawExtent = d3Extent(allValues, d => d.y);
+      // Only set yDomain if we have valid min and max values
+      if (rawExtent[0] != null && rawExtent[1] != null) {
+        yDomain = [rawExtent[0], rawExtent[1]];
+      }
     }
 
     return (
@@ -113,7 +118,7 @@ class HorizonChart extends PureComponent {
         >
           {data.map(row => (
             <HorizonRow
-              key={row.key}
+              key={row.key.join(',')}
               width={width}
               height={seriesHeight}
               title={ensureIsArray(row.key).join(', ')}
@@ -132,7 +137,4 @@ class HorizonChart extends PureComponent {
   }
 }
 
-HorizonChart.propTypes = propTypes;
-HorizonChart.defaultProps = defaultProps;
-
 export default HorizonChart;

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonRow.tsx

@@ -20,7 +20,6 @@
 /* eslint-disable react/jsx-sort-default-props */
 /* eslint-disable react/sort-prop-types */
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { extent as d3Extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 
@@ -35,25 +34,25 @@ export const DEFAULT_COLORS = [
   '#d73027',
 ];
 
-const propTypes = {
-  className: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      y: PropTypes.number,
-    }),
-  ).isRequired,
-  bands: PropTypes.number,
-  colors: PropTypes.arrayOf(PropTypes.string),
-  colorScale: PropTypes.string,
-  mode: PropTypes.string,
-  offsetX: PropTypes.number,
-  title: PropTypes.string,
-  yDomain: PropTypes.arrayOf(PropTypes.number),
-};
+interface DataPoint {
+  y: number;
+}
 
-const defaultProps = {
+interface HorizonRowProps {
+  className?: string;
+  width?: number;
+  height?: number;
+  data: DataPoint[];
+  bands?: number;
+  colors?: string[];
+  colorScale?: string;
+  mode?: string;
+  offsetX?: number;
+  title?: string;
+  yDomain?: [number, number];
+}
+
+const defaultProps: Partial<HorizonRowProps> = {
   className: '',
   width: 800,
   height: 20,
@@ -66,7 +65,11 @@ const defaultProps = {
   yDomain: undefined,
 };
 
-class HorizonRow extends PureComponent {
+class HorizonRow extends PureComponent<HorizonRowProps> {
+  static defaultProps = defaultProps;
+
+  private canvas: HTMLCanvasElement | null = null;
+
   componentDidMount() {
     this.drawChart();
   }
@@ -84,12 +87,12 @@ class HorizonRow extends PureComponent {
       const {
         data: rawData,
         yDomain,
-        width,
-        height,
-        bands,
-        colors,
+        width = 800,
+        height = 20,
+        bands = DEFAULT_COLORS.length >> 1,
+        colors = DEFAULT_COLORS,
         colorScale,
-        offsetX,
+        offsetX = 0,
         mode,
       } = this.props;
 
@@ -99,6 +102,7 @@ class HorizonRow extends PureComponent {
           : rawData;
 
       const context = this.canvas.getContext('2d');
+      if (!context) return;
       context.imageSmoothingEnabled = false;
       context.clearRect(0, 0, width, height);
       // Reset transform
@@ -118,7 +122,8 @@ class HorizonRow extends PureComponent {
       }
 
       // Create y-scale
-      const [min, max] = yDomain || d3Extent(data, d => d.y);
+      const [min, max] =
+        yDomain || (d3Extent(data, d => d.y) as [number, number]);
       const y = scaleLinear()
         .domain([0, Math.max(-min, max)])
         .range([0, height]);
@@ -127,8 +132,8 @@ class HorizonRow extends PureComponent {
       // http://www.html5rocks.com/en/tutorials/canvas/performance/
       let hasNegative = false;
       // draw positive bands
-      let value;
-      let bExtents;
+      let value: number;
+      let bExtents: number;
       for (let b = 0; b < bands; b += 1) {
         context.fillStyle = colors[bands + b];
 
@@ -146,9 +151,9 @@ class HorizonRow extends PureComponent {
           if (value !== undefined) {
             context.fillRect(
               offsetX + i * step,
-              y(value),
+              y(value)!,
               step + 1,
-              y(0) - y(value),
+              y(0)! - y(value)!,
             );
           }
         }
@@ -177,9 +182,9 @@ class HorizonRow extends PureComponent {
             }
             context.fillRect(
               offsetX + ii * step,
-              y(-value),
+              y(-value)!,
               step + 1,
-              y(0) - y(-value),
+              y(0)! - y(-value)!,
             );
           }
         }
@@ -205,7 +210,4 @@ class HorizonRow extends PureComponent {
   }
 }
 
-HorizonRow.propTypes = propTypes;
-HorizonRow.defaultProps = defaultProps;
-
 export default HorizonRow;

superset-frontend/plugins/legacy-plugin-chart-horizon/src/transformProps.ts

@@ -16,15 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export default function transformProps(chartProps) {
-  const { height, width, formData, queriesData } = chartProps;
-  const { horizonColorScale, seriesHeight } = formData;
+import { ChartProps } from '@superset-ui/core';
 
+export default function transformProps(chartProps: ChartProps) {
+  const { height, width, formData, queriesData } = chartProps;
+  const {
+    horizon_color_scale: horizonColorScale,
+    series_height: seriesHeight,
+  } = formData;
+
+  // Only include colorScale if defined, otherwise let defaultProps apply
   return {
-    colorScale: horizonColorScale,
+    ...(horizonColorScale !== undefined && {
+      colorScale: horizonColorScale as string,
+    }),
     data: queriesData[0].data,
     height,
-    seriesHeight: parseInt(seriesHeight, 10),
+    seriesHeight: parseInt(String(seriesHeight ?? 20), 10),
     width,
   };
 }