Browse Source

svgElOptions -> svgElParams

merge-requests/4/head
vargburz 3 years ago
parent
commit
1d2050ce7a
  1. 16
      src/components/grid.ts
  2. 8
      src/index.ts
  3. 2
      src/types.ts

16
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(() => '')
);
}

8
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 {

2
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>,

Loading…
Cancel
Save