src/Axis.ts

   1/**

   2 * # Axis class

   3 * 

   4 */

   5

   6 /** */

   7import { Data }             from 'hsdatab';

   8import { log as gLog }      from 'hsutil';   const log = gLog('d3.Axis');

   9import { GraphComponent }   from './GraphComponent'

  10import { GraphCfg }         from './ConfigTypes';

  11import { d3Base }           from './ConfigTypes';

  12import { AxisDefaults }     from './DefaultTypes';

  13import { defaultLine }      from './Defaults';

  14import * as d3Axis          from "d3-axis";

  15

  16const axisWidth:number = 50;

  17const tickWidth:number = 10;

  18

  19export enum Direction {

  20    Horizontal  = 'hor',

  21    Vertical    = 'ver'

  22}

  23

  24export class Axis extends GraphComponent {

  25    private dir: Direction;

  26    private svg: d3Base;

  27    private defaults: AxisDefaults;

  28

  29    constructor(cfg:GraphCfg, dir:Direction) {

  30        super(cfg);

  31        this.dir = dir;

  32        this.svg = cfg.baseSVG.append('g').classed(`${dir}Axis`, true);

  33    }

  34

  35    render(data:Data) {

  36        const scales = this.config.scales;

  37        const style = this.config.defaults.Axes[this.dir];

  38        let axis;

  39        this.svg

  40            .attr('stroke', style.line.color)

  41            .attr('stroke-width', style.line.width)

  42            .attr('stroke-opacity', style.line.opacity);

  43

  44        if (this.dir===Direction.Horizontal) {

  45            const yCrossing = Math.max(axisWidth, Math.min(scales.ver.scale(0), this.config.viewPort.height-axisWidth));

  46            axis = d3Axis.axisTop(this.config.scales.hor.scale);

  47            this.svg.attr("transform", `translate(0, ${yCrossing})`);

  48        } else {

  49            const xCrossing = Math.max(axisWidth, Math.min(scales.hor.scale(0), this.config.viewPort.width-axisWidth));

  50            axis = d3Axis.axisRight(this.config.scales.ver.scale);

  51            this.svg.attr("transform", `translate(${xCrossing}, 0)`);

  52        }

  53        axis.tickSize(tickWidth);

  54        this.svg.call(axis);

  55        this.svg.selectAll('text').transition().duration(1000)

  56            .attr('style', `font-family:${style.tickLabel.font.family}; font-size:${style.tickLabel.font.size}px; font-style:${style.tickLabel.font.style}; font-weight:${style.tickLabel.font.weight};`);

  57    }

  58}