src/lib/layout/facet.js
function(svg, options) {
    var widthCfg;

    // the svg element to render charts to
    this._svg = svg.classed('facet-layout',true);
    this._attributes = options || {};

    this._animDuration = commonOptionDefaults.duration;

    // outer margins
    this._margin = {
        top: 0,
        bottom: 50,
        left: this._attributes.yScales.primary.displayOnAxis === 'left' ? 75 : 25,
        right: this._attributes.yScales.primary.displayOnAxis === 'left' ? 25 : 75
    };

    // collection of facet panels created
    this._facetPanels = [];

    this._chartCount = 0; // the number of facetd charts to be displayed
    this._colCount = 0; // number of columns
    this._rowCount = 1; // number of rows
    this._colWidth = 0; // width of column
    this._chartHeight = 0; // the height of the chart

    // facet.width configuration needs to be interpreted
    // could be column width (FIXED) OR number of columns (FLEXING)
    widthCfg = this._interpretWidthConfig(options.facet.width);
    this._layoutMode = widthCfg.mode;
    if (widthCfg.mode === 'fixed') {
        this._colWidth = widthCfg.value;
    }
    else if (widthCfg.mode === 'flex') {
        this._colCount = widthCfg.value;
    }

    this._facetTitleHeight = (options.facet.fields.length * FACET_LABEL_HEIGHT) + FACET_LABEL_PADDING; // the total height of vertically stacked facet field labels
    this._facetHeight = this._getFacetHeight(); // the height of the facet (incl titles and chart)

}
function(svg, options) {
    var widthCfg;

    // the svg element to render charts to
    this._svg = svg.classed('facet-layout',true);
    this._attributes = options || {};

    this._animDuration = commonOptionDefaults.duration;

    // outer margins
    this._margin = {
        top: 0,
        bottom: 50,
        left: this._attributes.yScales.primary.displayOnAxis === 'left' ? 75 : 25,
        right: this._attributes.yScales.primary.displayOnAxis === 'left' ? 25 : 75
    };

    // collection of facet panels created
    this._facetPanels = [];

    this._chartCount = 0; // the number of facetd charts to be displayed
    this._colCount = 0; // number of columns
    this._rowCount = 1; // number of rows
    this._colWidth = 0; // width of column
    this._chartHeight = 0; // the height of the chart

    // facet.width configuration needs to be interpreted
    // could be column width (FIXED) OR number of columns (FLEXING)
    widthCfg = this._interpretWidthConfig(options.facet.width);
    this._layoutMode = widthCfg.mode;
    if (widthCfg.mode === 'fixed') {
        this._colWidth = widthCfg.value;
    }
    else if (widthCfg.mode === 'flex') {
        this._colCount = widthCfg.value;
    }

    this._facetTitleHeight = (options.facet.fields.length * FACET_LABEL_HEIGHT) + FACET_LABEL_PADDING; // the total height of vertically stacked facet field labels
    this._facetHeight = this._getFacetHeight(); // the height of the facet (incl titles and chart)

}
function ( svg , options ) { var widthCfg ; // the svg element to render charts to this . _svg = svg . classed ( 'facet-layout' , true ) ; this . _attributes = options || { } ; this . _animDuration = commonOptionDefaults . duration ; // outer margins this . _margin = { top : 0 , bottom : 50 , left : this . _attributes . yScales . primary . displayOnAxis === 'left' ? 75 : 25 , right : this . _attributes . yScales . primary . displayOnAxis === 'left' ? 25 : 75 } ; // collection of facet panels created this . _facetPanels = [ ] ; this . _chartCount = 0 ; // the number of facetd charts to be displayed this . _colCount = 0 ; // number of columns this . _rowCount = 1 ; // number of rows this . _colWidth = 0 ; // width of column this . _chartHeight = 0 ; // the height of the chart // facet.width configuration needs to be interpreted // could be column width (FIXED) OR number of columns (FLEXING) widthCfg = this . _interpretWidthConfig ( options . facet . width ) ; this . _layoutMode = widthCfg . mode ; if ( widthCfg . mode === 'fixed' ) { this . _colWidth = widthCfg . value ; } else if ( widthCfg . mode === 'flex' ) { this . _colCount = widthCfg . value ; } this . _facetTitleHeight = ( options . facet . fields . length * FACET_LABEL_HEIGHT ) + FACET_LABEL_PADDING ; // the total height of vertically stacked facet field labels this . _facetHeight = this . _getFacetHeight ( ) ; // the height of the facet (incl titles and chart) }
Faceted Chart Layout
@param {Object} svg the element
@param {Object} options
Faceted Chart Layout