/** * Created by michaelbessey on 10/30/16. */ import { barLayoutCreator, ScaleContainerTypeEnum, ScaleTypeEnum } from "../mmviz-layout/index"; import {BarComponentSvg} from "../mmviz-component-svg/index"; import {DetailsBehavior} from "../mmviz-behavior/index"; import {getBarPadding, OrientationEnum} from "../mmviz-common/index"; import {ChartBuilderSvg} from "./builder"; export class BarChartBuilderSvg extends ChartBuilderSvg { component: BarComponentSvg; padding: number; colorScaleKey: string; customColorScale: any; colorRangeMapper: Function; orientationEnum: OrientationEnum; constructor(selector: string) { super(selector); this.component = new BarComponentSvg(selector); this.detailsBehavior = new DetailsBehavior(selector, this.component.selector); this.colorScaleKey = "color"; this.orientationEnum = OrientationEnum.VERTICAL; } setPadding(padding: number){ this.padding = padding; return this; } setOrientation(orientation: OrientationEnum){ this.orientationEnum = orientation; return this; } setDataModel(dataModel){ super.setDataModel(dataModel); if(this.padding === undefined){ this.padding = getBarPadding(dataModel.dataArray.length); } return this; } createView(){ super.createView(); if (OrientationEnum.VERTICAL === this.orientationEnum) { this.chartView.addContentTypeClass("bar-content"); this.chartView.addContentTypeClass("bar-vertical"); } else if (OrientationEnum.HORIZONTAL === this.orientationEnum) { this.chartView.addContentTypeClass("bar-content"); this.chartView.addContentTypeClass("bar-horizontal"); } return this; } updateView(){ if(!this.chartView.isViewable){ return this; } let viewModel: any, layouter: Function, layoutExtender = barLayoutCreator(this.orientationEnum, this.colorScaleKey), axisViewModel: any; super.updateView(); if (OrientationEnum.VERTICAL === this.orientationEnum) { this.layoutScale .xScaleSetup(ScaleTypeEnum.BAND) .yScaleSetup(ScaleTypeEnum.LINEAR) .xScale.padding(this.padding); } else if (OrientationEnum.HORIZONTAL === this.orientationEnum) { this.layoutScale .xScaleSetup(ScaleTypeEnum.LINEAR) .yScaleSetup(ScaleTypeEnum.BAND) .yScale.padding(this.padding); } // setup color scale if(this.colorRangeMapper){ this.layoutScale.createMapCustomOrdinalScaleContainer(this.colorScaleKey, this.dataModel, this.colorRangeMapper); } else if(this.customColorScale){ this.layoutScale.createCustomScaleObjectContainer(this.colorScaleKey, ScaleTypeEnum.ORDINAL, this.customColorScale); } else { this.layoutScale.createScaleContainer(this.colorScaleKey, ScaleContainerTypeEnum.COLOR_CATEGORICAL_LIGHT); } layouter = layoutExtender(this.dataModel,this.layoutScale); this.displayAxies(); viewModel = layouter(); this.component.updateView(this.chartView.stage, viewModel); super.updateComponents(); return this; } resizeView(){ return this.updateView(); } }