Add undefined to optional properties, part D (DefinitelyTyped#54356)

* Add undefined to optional properties, part D

In preparation for exactOptionalPropertyTypes in Typescript 4.4, add undefined to all optional properties. #no-publishing-comment

This PR covers non-widely used packages starting with d- and following.

microsoft/dtslint#335

* reformat for shorter line length

* Add missing whitespace

Author: sandersn

types/d3-cloud/d3-cloud-tests.ts

@@ -10,9 +10,9 @@ d3.layout.cloud();
 interface ICompTextSize {
     text: string;
     size: number;
-    x?: number;
-    y?: number;
-    rotate?: number;
+    x?: number | undefined;
+    y?: number | undefined;
+    rotate?: number | undefined;
 }
 
 function archimedeanSpiral(size: [number, number]): (t: number) => [number, number] {

types/d3-cloud/index.d.ts

@@ -14,15 +14,15 @@ declare module 'd3' {
 
         namespace cloud {
             interface Word {
-                text?: string;
-                font?: string;
-                style?: string;
-                weight?: string | number;
-                rotate?: number;
-                size?: number;
-                padding?: number;
-                x?: number;
-                y?: number;
+                text?: string | undefined;
+                font?: string | undefined;
+                style?: string | undefined;
+                weight?: string | number | undefined;
+                rotate?: number | undefined;
+                size?: number | undefined;
+                padding?: number | undefined;
+                x?: number | undefined;
+                y?: number | undefined;
             }
         }
 

types/d3-graphviz/index.d.ts

@@ -419,23 +419,23 @@ export type KeyMode = 'title' | 'id' | 'tag-index' | 'index';
  * Most map directly to methods that can be used to set their values.
  */
 export interface GraphvizOptions {
-    useWorker?: boolean;
-    engine?: Engine;
-    totalMemory?: number;
-    keyMode?: KeyMode;
-    fade?: boolean;
-    tweenPaths?: boolean;
-    tweenShapes?: boolean;
-    convertEqualSidedPolygons?: boolean;
-    tweenPrecision?: number | string;
-    growEnteringEdges?: boolean;
-    zoom?: boolean;
-    zoomScaleExtent?: [number, number];
-    zoomTranslateExtent?: [[number, number], [number, number]];
-    width?: number;
-    height?: number;
-    scale?: number;
-    fit?: boolean;
+    useWorker?: boolean | undefined;
+    engine?: Engine | undefined;
+    totalMemory?: number | undefined;
+    keyMode?: KeyMode | undefined;
+    fade?: boolean | undefined;
+    tweenPaths?: boolean | undefined;
+    tweenShapes?: boolean | undefined;
+    convertEqualSidedPolygons?: boolean | undefined;
+    tweenPrecision?: number | string | undefined;
+    growEnteringEdges?: boolean | undefined;
+    zoom?: boolean | undefined;
+    zoomScaleExtent?: [number, number] | undefined;
+    zoomTranslateExtent?: [[number, number], [number, number]] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    scale?: number | undefined;
+    fit?: boolean | undefined;
 }
 
 /**

types/d3kit/index.d.ts

@@ -78,35 +78,35 @@ export class AbstractChart extends Base {
 }
 
 export interface ChartMargin {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
+    top?: number | undefined;
+    right?: number | undefined;
+    bottom?: number | undefined;
+    left?: number | undefined;
 }
 
 export interface ChartOptions {
-    initialWidth?: number;
-    initialHeight?: number;
-    margin?: ChartMargin;
-    offset?: [number, number];
-    pixelRatio?: number;
+    initialWidth?: number | undefined;
+    initialHeight?: number | undefined;
+    margin?: ChartMargin | undefined;
+    offset?: [number, number] | undefined;
+    pixelRatio?: number | undefined;
 }
 
 // from https://github.com/kristw/slimfit
 export interface FitOptions {
-    mode?: string;
-    width?: string|number;
-    height?: string|number;
-    ratio?: number;
-    maxWidth?: string|number;
-    maxHeight?: string|number;
+    mode?: string | undefined;
+    width?: string|number | undefined;
+    height?: string|number | undefined;
+    ratio?: number | undefined;
+    maxWidth?: string|number | undefined;
+    maxHeight?: string|number | undefined;
 }
 
 // from https://github.com/kristw/slimfit
 export interface WatchOptions {
-    mode?: string;
-    target?: Element|[number, number]|{width: number, height: number}|null;
-    interval?: number;
+    mode?: string | undefined;
+    target?: Element|[number, number]|{width: number, height: number}|null | undefined;
+    interval?: number | undefined;
 }
 
 export class SvgChart extends AbstractChart {

types/d3kit/v1/index.d.ts

@@ -9,17 +9,17 @@ import * as d3 from "d3";
 declare namespace d3kit {
 
     export interface ChartMargin {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+        left?: number | undefined;
     }
 
     export interface ChartOptions {
-        margin?: ChartMargin;
-        offset?: [number,number];
-        initialWidth?: number;
-        initialHeight?: number;
+        margin?: ChartMargin | undefined;
+        offset?: [number,number] | undefined;
+        initialWidth?: number | undefined;
+        initialHeight?: number | undefined;
         [name: string]: any;
     }
 
@@ -108,9 +108,9 @@ declare namespace d3kit {
     }
 
     interface LayerConfig {
-        name?: string,
-        names?: Array<string>,
-        sublayers?: LayerConfig
+        name?: string | undefined,
+        names?: Array<string> | undefined,
+        sublayers?: LayerConfig | undefined
     }
 
     export class LayerOrganizer {

types/d3pie/index.d.ts

@@ -14,128 +14,128 @@ declare namespace d3pie {
   }
 
   interface ID3PieStyleOptions {
-    color?: string
-    fontSize?: number
-    font?: string
+    color?: string | undefined
+    fontSize?: number | undefined
+    font?: string | undefined
   }
 
   interface ID3PieTextOptions extends ID3PieStyleOptions {
-    text?: string
+    text?: string | undefined
   }
 
   interface ID3PieLabelsOptions {
-    format?: 'label' | 'value' | 'percentage' | 'label-value1' | 'label-value2' | 'label-percentage1' | 'label-percentage2'
-    hideWhenLessThanPercentage?: number
+    format?: 'label' | 'value' | 'percentage' | 'label-value1' | 'label-value2' | 'label-percentage1' | 'label-percentage2' | undefined
+    hideWhenLessThanPercentage?: number | undefined
   }
 
   interface ID3PieOptions {
     header?: {
-      title?: ID3PieTextOptions
-      subtitle?: ID3PieTextOptions
-      location?: 'top-center' | 'top-left' | 'pie-center'
-      titleSubtitlePadding?: number
-    }
-    footer?: { location?: 'left' } & ID3PieTextOptions
+      title?: ID3PieTextOptions | undefined
+      subtitle?: ID3PieTextOptions | undefined
+      location?: 'top-center' | 'top-left' | 'pie-center' | undefined
+      titleSubtitlePadding?: number | undefined
+    } | undefined
+    footer?: { location?: 'left' | undefined } & ID3PieTextOptions | undefined
     size?: {
-      canvasHeight?: number
-      canvasWidth?: number
-      pieOuterRadius?: string | number
-      pieInnerRadius?: string | number
-    }
+      canvasHeight?: number | undefined
+      canvasWidth?: number | undefined
+      pieOuterRadius?: string | number | undefined
+      pieInnerRadius?: string | number | undefined
+    } | undefined
     data: {
-      sortOrder?: 'none' | 'random' | 'value-asc' | 'value-desc' | 'label-asc' | 'label-desc'
+      sortOrder?: 'none' | 'random' | 'value-asc' | 'value-desc' | 'label-asc' | 'label-desc' | undefined
       smallSegmentGrouping?: {
-        enabled?: boolean
-        value?: number
-        valueType?: 'percentage' | 'value'
-        label?: string
-        color?: string
-      }
+        enabled?: boolean | undefined
+        value?: number | undefined
+        valueType?: 'percentage' | 'value' | undefined
+        label?: string | undefined
+        color?: string | undefined
+      } | undefined
       content: {
         label: string
         value: number
-        color?: string
+        color?: string | undefined
       }[]
     }
     labels?: {
-      outer?: { pieDistance?: number } & ID3PieLabelsOptions
-      inner?: ID3PieLabelsOptions
-      mainLabel?: ID3PieStyleOptions
-      percentage?: { decimalPlaces?: number } & ID3PieStyleOptions
-      value?: ID3PieStyleOptions
+      outer?: { pieDistance?: number | undefined } & ID3PieLabelsOptions | undefined
+      inner?: ID3PieLabelsOptions | undefined
+      mainLabel?: ID3PieStyleOptions | undefined
+      percentage?: { decimalPlaces?: number | undefined } & ID3PieStyleOptions | undefined
+      value?: ID3PieStyleOptions | undefined
       lines?: {
-        enabled?: boolean
-        style?: 'curved' | 'straight'
-        color?: string
-      }
+        enabled?: boolean | undefined
+        style?: 'curved' | 'straight' | undefined
+        color?: string | undefined
+      } | undefined
       truncation?: {
-        enabled?: boolean
-        truncateLength?: number
-      }
-      formatter?: (context: {
+        enabled?: boolean | undefined
+        truncateLength?: number | undefined
+      } | undefined
+      formatter?: ((context: {
         section: 'outer' | 'inner'
         value: number
         label: string
-      }) => string
-    }
+      }) => string) | undefined
+    } | undefined
     effects?: {
       load?: {
-        effect?: 'none' | 'default'
-        speed?: number
-      }
+        effect?: 'none' | 'default' | undefined
+        speed?: number | undefined
+      } | undefined
       pullOutSegmentOnClick?: {
-        effect?: 'none' | 'linear' | 'bounce' | 'elastic' | 'back'
-        speed?: number
-        size?: number
-      }
-      highlightSegmentOnMouseover?: boolean
-      highlightLuminosity?: number
-    }
+        effect?: 'none' | 'linear' | 'bounce' | 'elastic' | 'back' | undefined
+        speed?: number | undefined
+        size?: number | undefined
+      } | undefined
+      highlightSegmentOnMouseover?: boolean | undefined
+      highlightLuminosity?: number | undefined
+    } | undefined
     tooltips?: {
-      enabled?: boolean
-      type?: 'placeholder' | 'caption'
-      string?: string
-      placeholderParser?: (index: number, data: { label?: string, percentage?: number, value?: number }) => void
+      enabled?: boolean | undefined
+      type?: 'placeholder' | 'caption' | undefined
+      string?: string | undefined
+      placeholderParser?: ((index: number, data: { label?: string | undefined, percentage?: number | undefined, value?: number | undefined }) => void) | undefined
       styles?: {
-        fadeInSpeed?: number
-        backgroundColor?: string
-        backgroundOpacity?: number
-        color?: string
-        borderRadius?: number
-        font?: string
-        fontSize?: number
-        padding?: number
-      }
-    }
+        fadeInSpeed?: number | undefined
+        backgroundColor?: string | undefined
+        backgroundOpacity?: number | undefined
+        color?: string | undefined
+        borderRadius?: number | undefined
+        font?: string | undefined
+        fontSize?: number | undefined
+        padding?: number | undefined
+      } | undefined
+    } | undefined
     misc?: {
       colors?: {
-        background?: string
-        segments?: string[]
-        segmentStroke?: string
-      }
+        background?: string | undefined
+        segments?: string[] | undefined
+        segmentStroke?: string | undefined
+      } | undefined
       gradient?: {
-        enabled?: boolean
-        percentage?: number
-        color?: string
-      }
+        enabled?: boolean | undefined
+        percentage?: number | undefined
+        color?: string | undefined
+      } | undefined
       canvasPadding?: {
-        top?: number
-        right?: number
-        bottom?: number
-        left?: number
-      }
+        top?: number | undefined
+        right?: number | undefined
+        bottom?: number | undefined
+        left?: number | undefined
+      } | undefined
       pieCenterOffset?: {
-        x?: number
-        y?: number
-      }
-      cssPrefix?: string
-    }
+        x?: number | undefined
+        y?: number | undefined
+      } | undefined
+      cssPrefix?: string | undefined
+    } | undefined
     callbacks?: {
-      onload?: Function
-      onMouseoverSegment?: Function
-      onMouseoutSegment?: Function
-      onClickSegment?: Function
-    }
+      onload?: Function | undefined
+      onMouseoverSegment?: Function | undefined
+      onMouseoutSegment?: Function | undefined
+      onClickSegment?: Function | undefined
+    } | undefined
   }
 
   interface ID3PieClass {