src/Grid.ts

   1/**

   2 * # Grid

   3 * renders the major and minor gridlines in each direction.

   4 * 

   5 * ### Attributes

   6 * The `Chart` class is called by {@link Graph.Graph `Graph`} as 

   7 * `m(Grid, { cfg:cfg.grid, scales:scales })`

   8 * with the following attributes:

   9 * - cfg: a {@link Grid.GridsConfig GridsConfig} object

  10 * - scales: a {@link Axes.Scales Scales } object

  11 * 

  12 * ### Configurations and Defaults

  13 * See {@link Grid.Grid.defaultConfig Grid.defaultConfig}

  14 * 

  15 */

  16

  17/** */

  18export const m = require("mithril");

  19export type Vnode = typeof m.Vnode;

  20import { Config, 

  21         VisibleCfg }   from './Graph';

  22import { SVGElem }      from './SVGElem';

  23import { NumRange }     from 'hsdatab';

  24import { Scale }        from './Scale';

  25import { TickDefs,

  26         Scales }       from './AxesTypes';

  27

  28/** defines configurable parameters for a grid */

  29export interface GridCfg extends VisibleCfg{

  30}

  31

  32/** defines configurable parameters for horizontal and vertical grids */

  33export interface  GridsCfg {

  34    hor: GridCfg;

  35    ver: GridCfg;

  36}

  37

  38/** Defines configurable settings. */

  39export interface GridsConfig {

  40    /** major grid lines */

  41    major: GridsCfg;

  42

  43    /** minor grid lines */

  44    minor: GridsCfg;

  45}

  46

  47export class Grid extends SVGElem{ 

  48    /** 

  49     * Defines default values for all configurable parameters in `Graph`

  50     * See {@link Graph.Graph.makeConfig Graph.makeConfig} for the sequence of initializations.

  51     * 

  52     * ### Configurations and Defaults

  53     * ```

  54     *  cfg.grid = {@link Grid.GridsConfig }{

  55     *      major: {

  56     *          hor: { visible:true },

  57     *          ver: { visible:true }

  58     *      },

  59     *      minor: {

  60     *          hor: { visible:false },

  61     *          ver: { visible:false }

  62     *      }

  63     *  } 

  64     * ``` 

  65     * @param cfg the configuration object, containing default settings for all 

  66     * previously configured components.

  67     */

  68    static defaultConfig(cfg:Config) {

  69        cfg.grid = {

  70            major: {

  71                hor: { visible:true },

  72                ver: { visible:true }

  73            },

  74            minor: {

  75                hor: { visible:false },

  76                ver: { visible:false }

  77            }

  78        };

  79    }

  80

  81    /**

  82     * Makes adjustments to cfg based on current settings

  83     * @param cfg the configuration object, containing default settings for all components

  84     */

  85    static adjustConfig(cfg:Config) {     

  86    }

  87    

  88    /** 

  89     * Draws horizontal gridlines parallel to the x-axis

  90     */

  91    private drawHorGrid(cfg:{visible:boolean}, scale:Scale, range:NumRange, ticks:TickDefs) {

  92        return !cfg.visible? m('svg') : m('svg', { class:'hs-graph-grid-hor' }, ticks.marks.map((t) =>

  93            this.horLine(range[0], range[1], scale.convert(t))

  94        ));

  95    }

  96

  97    /** 

  98     * Draws vertical gridlines parallel to the y-axis

  99     */

 100    private drawVerGrid(cfg:{visible:boolean}, scale:Scale, range:NumRange, ticks:TickDefs) {

 101        return !cfg.visible? m('svg') : m('svg', { class:'hs-graph-grid-ver' }, ticks.marks.map((t) =>

 102            this.verLine(scale.convert(t), range[0], range[1])

 103        ));

 104    }

 105

 106

 107    view(node?: Vnode): Vnode {

 108        const cfg:GridsConfig = node.attrs.cfg;

 109        const scales:Scales = node.attrs.scales;

 110        const ps = scales.primary;

 111        return m('svg', { class:'hs-graph-grid'}, [

 112            m('svg', { class:'hs-graph-grid-minor' }, [

 113                this.drawHorGrid(cfg.minor.hor, ps.y, ps.x.range(), ps.y.ticks().minor),

 114                this.drawVerGrid(cfg.minor.ver, ps.x, ps.y.range(), ps.x.ticks().minor)

 115            ]),

 116            m('svg', { class:'hs-graph-grid-major' }, [

 117                this.drawHorGrid(cfg.major.hor, ps.y, ps.x.range(), ps.y.ticks().major),

 118                this.drawVerGrid(cfg.major.ver, ps.x, ps.y.range(), ps.x.ticks().major)

 119            ])

 120        ]);

 121    }

 122}

 123