feat: add ResponsiveOptions type helper, add generic type to Svg#getNode method

Author: dangreen

package.json

@@ -97,6 +97,7 @@
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.5.1",
     "@types/node": "^17.0.34",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "browserslist": "^4.20.2",

pnpm-lock.yaml

@@ -7,7 +7,7 @@ import type {
   BarDrawEvent,
   BarChartEventsTypes
 } from './BarChart.types';
-import type { NormalizedSeries } from '../../core';
+import type { NormalizedSeries, ResponsiveOptions } from '../../core';
 import {
   isNumeric,
   noop,
@@ -180,7 +180,7 @@ export class BarChart extends BaseChart<BarChartEventsTypes> {
     query: string | Element | null,
     protected override data: BarChartData,
     options?: BarChartOptions,
-    responsiveOptions?: [string, BarChartOptions][]
+    responsiveOptions?: ResponsiveOptions<BarChartOptions>
   ) {
     super(
       query,

src/charts/BarChart/BarChart.ts

@@ -1,4 +1,4 @@
-import type { Data, Options, DataEvent } from '../core';
+import type { Data, Options, DataEvent, ResponsiveOptions } from '../core';
 import type { Svg } from '../svg';
 import type { BaseChartEventsTypes } from './types';
 import { OptionsProvider, optionsProvider } from '../core';
@@ -25,7 +25,7 @@ export abstract class BaseChart<TEventsTypes = BaseChartEventsTypes> {
     protected data: Data,
     private readonly defaultOptions: Options,
     private options: Options,
-    private readonly responsiveOptions?: [string, Options][]
+    private readonly responsiveOptions?: ResponsiveOptions<Options>
   ) {
     const container =
       typeof query === 'string' ? document.querySelector(query) : query;

src/charts/BaseChart.ts

@@ -9,7 +9,12 @@ import type {
   AreaDrawEvent,
   LineChartEventsTypes
 } from './LineChart.types';
-import type { SegmentData, Series, SeriesObject } from '../../core';
+import type {
+  SegmentData,
+  Series,
+  SeriesObject,
+  ResponsiveOptions
+} from '../../core';
 import {
   alphaNumerate,
   normalizeData,
@@ -228,7 +233,7 @@ export class LineChart extends BaseChart<LineChartEventsTypes> {
     query: string | Element | null,
     protected override data: LineChartData,
     options?: LineChartOptions,
-    responsiveOptions?: [string, LineChartOptions][]
+    responsiveOptions?: ResponsiveOptions<LineChartOptions>
   ) {
     super(
       query,

src/charts/LineChart/LineChart.ts

@@ -11,6 +11,7 @@ import type {
   PieChartEventsTypes
 } from './PieChart.types';
 import type { Svg } from '../../svg';
+import type { ResponsiveOptions } from '../../core';
 import {
   alphaNumerate,
   quantity,
@@ -169,7 +170,7 @@ export class PieChart extends BaseChart<PieChartEventsTypes> {
     query: string | Element | null,
     protected override data: PieChartData,
     options?: PieChartOptions,
-    responsiveOptions?: [string, PieChartOptions][]
+    responsiveOptions?: ResponsiveOptions<PieChartOptions>
   ) {
     super(
       query,

src/charts/PieChart/PieChart.ts

@@ -1,5 +1,5 @@
 import type { EventEmitter } from '../event';
-import type { OptionsChangedEvent } from './types';
+import type { OptionsChangedEvent, ResponsiveOptions } from './types';
 import { extend } from '../utils';
 
 export interface OptionsProvider<T = unknown> {
@@ -16,7 +16,7 @@ export interface OptionsProvider<T = unknown> {
  */
 export function optionsProvider<T = unknown>(
   options: T,
-  responsiveOptions: [string, T][] | undefined,
+  responsiveOptions: ResponsiveOptions<T> | undefined,
   eventEmitter: EventEmitter
 ): OptionsProvider<T> {
   let currentOptions: T;

src/core/optionsProvider.ts

@@ -81,6 +81,8 @@ export type OptionsWithDefaults = RequiredKeys<
   'axisX' | 'axisY' | 'classNames'
 >;
 
+export type ResponsiveOptions<T = Options> = [string, T][];
+
 export interface Bounds {
   high: number;
   low: number;
@@ -109,14 +111,14 @@ export type AxisName = 'x' | 'y';
 
 export type Multi =
   | {
-      x: number | string | null;
-      y: number | string | null;
+      x: number | string | Date | null;
+      y: number | string | Date | null;
     }
   | {
-      x: number | string | null;
+      x: number | string | Date | null;
     }
   | {
-      y: number | string | null;
+      y: number | string | Date | null;
     };
 
 export type NormalizedMulti =

src/core/types.ts

@@ -167,8 +167,8 @@ export class Svg {
   /**
    * Returns the underlying SVG node for the current element.
    */
-  getNode() {
-    return this._node;
+  getNode<T extends Element = Element>() {
+    return this._node as T;
   }
 
   /**