diff --git a/src/components/grid.ts b/src/components/grid.ts index 2b097d8..a9bdd49 100644 --- a/src/components/grid.ts +++ b/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, - 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(() => '') ); } diff --git a/src/index.ts b/src/index.ts index e966ff3..e2aa858 100644 --- a/src/index.ts +++ b/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 { } 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 { diff --git a/src/types.ts b/src/types.ts index 249fa7d..5a898a5 100644 --- a/src/types.ts +++ b/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,