svgElOptions -> svgElParams

src/components/grid.ts

@@ -1,4 +1,4 @@
-import { GridOptions, SvgElOptions } from '../types';
+import { GridOptions, SvgElParams } from '../types';
 
 
 // we import only d3 types here
@@ -23,7 +23,7 @@ const DEFAULT_GRID_OPTIONS: GridOptions = {
 // All components have construcor with required args: svg element which will be filled with this component and options for it.
 // All compoтents have a reqiured method "render", which will be called in core costructor. <- this solution is temporary.
 // Each component has its own default options.
-// svgElement should be a separate class with its own height, width, xScale, yScale params to avoid SvgElOptions as argument.
+// svgElement should be a separate class with its own height, width, xScale, yScale params to avoid SvgElParams as argument.
 // We have a general problem with passing d3 as argument everywhere. Fix it, and remove from arg in constructor here.
 export class Grid {
   protected gridOptions: GridOptions;
@@ -31,7 +31,7 @@ export class Grid {
   constructor(
     private _d3: typeof d3,
     private _svgEl: d3.Selection<SVGElement, unknown, null, undefined>,
-    private _svgElOptions: SvgElOptions,
+    private _svgElParams: SvgElParams,
     _gridOptions: GridOptions,
   ) {
     this.gridOptions = this.setOptionDefaults(_gridOptions);
@@ -56,13 +56,13 @@ export class Grid {
     }
     this._svgEl
       .append('g')
-      .attr('transform', `translate(0,${this._svgElOptions.height})`)
+      .attr('transform', `translate(0,${this._svgElParams.height})`)
       .attr('class', 'grid x-grid')
       .style('pointer-events', 'none')
       .call(
-        this._d3.axisBottom(this._svgElOptions.xScale)
+        this._d3.axisBottom(this._svgElParams.xScale)
           .ticks(this.gridOptions.x.ticksCount)
-          .tickSize(-this._svgElOptions.height)
+          .tickSize(-this._svgElParams.height)
           .tickFormat(() => '')
       );
   }
@@ -76,9 +76,9 @@ export class Grid {
       .attr('class', 'grid y-grid')
       .style('pointer-events', 'none')
       .call(
-        this._d3.axisLeft(this._svgElOptions.yScale)
+        this._d3.axisLeft(this._svgElParams.yScale)
           .ticks(this.gridOptions.y.ticksCount)
-          .tickSize(-this._svgElOptions)
+          .tickSize(-this._svgElParams)
           .tickFormat(() => '')
       );
   }

src/index.ts

@@ -19,7 +19,7 @@ import {
   yAxisOrientation,
   ScrollPanOrientation,
   AxisOption,
-  SvgElOptions,
+  SvgElParams,
 } from './types';
 import { uid } from './utils';
 import { palette } from './colors';
@@ -239,15 +239,15 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
   }
 
   protected initComponents(): void {
-    // TODO: make chartContainer a separate class with SvgElOptions inside to avoid duplication
-    const svgElOptions = {
+    // TODO: make chartContainer a separate class with SvgElParams inside to avoid duplication
+    const svgElParams = {
       height: this.height,
       width: this.width,
       xScale: this.xScale,
       yScale: this.yScale,
     }
   
-    this.grid = new Grid(this.d3, this.chartContainer, svgElOptions, this.options.grid);
+    this.grid = new Grid(this.d3, this.chartContainer, svgElParams, this.options.grid);
   }
 
   protected createSvg(): void {

src/types.ts

@@ -165,7 +165,7 @@ export enum yAxisOrientation {
   RIGHT = 'right',
   BOTH = 'both'
 }
-export type SvgElOptions = {
+export type SvgElParams = {
   height: number,
   width: number,
   xScale: d3.ScaleLinear<number, number>,