Options
All
  • Public
  • Public/Protected
  • All
Menu

External module "ext/CvGraphPanel"

Index

Interfaces

Variables

Object literals

Variables

CV_GRAPH_DEFAULT_COLORS

CV_GRAPH_DEFAULT_COLORS: string[] = ['#1E6FF2', '#F29500', '#15BFA2', '#6F5F5A']

CvBarChart

CvBarChart: ClassicComponentClass<CvBarChartProps> = React.createClass<CvBarChartProps, {}>({mixins: [CvChart],render: function () {const graphDef = this.props.graphContext.graphDef;const {minX, maxX, minY, maxY, xAxisLabel, yAxisLabel} = this.getMetaValues(graphDef, this.props.data);const xType = this.isNumeric(this.props.graphContext, graphDef.identityDataPointDef.name, this.props.data) ? 'numeric' : 'category';const yType = this.isNumeric(this.props.graphContext, graphDef.dataPointDefs[0].name, this.props.data) ? 'numeric' : 'category';return (<div className="cv-graph-container"><ResponsiveContainer width="99%" height="95%"><BarChart data={this.props.data} margin={{top: 20, right: 50, left: 20, bottom: 5}}><XAxis dataKey={this.props.identPropName} domain={[minX, maxX]} label={xAxisLabel} /><YAxis domain={[minY, maxY]} label={yAxisLabel} /><CartesianGrid strokeDasharray="3 3"/><Tooltip/><Legend />{graphDef.dataPointDefs.map((dataPointDef:GraphDataPointDef, i:number)=>{const legendKey = dataPointDef.legendKey || dataPointDef.name;const props = {dataKey:dataPointDef.name,name:legendKey,fill:this.colorForDataPointDef(dataPointDef, i),onClick:(data)=>{this.handleClick(data.id)},key:i};if(this.props.stack) props['stackId'] = 'a';return <Bar {...props}/>})}</BarChart></ResponsiveContainer></div>);}})

CvGraph

CvGraph: ClassicComponentClass<CvGraphProps> = React.createClass<CvGraphProps, CvGraphState>({mixins: [CvBaseMixin],componentDidMount: function () {},getDefaultProps: function () {return {graphContext: null,lastRefreshTime: null,navigationListeners: [],selectionListener: null,stateChangeListeners: [],actionListeners: [],defaultSeriesColors: CV_GRAPH_DEFAULT_COLORS,navTarget: null,}},getInitialState: function () {return {}},render: function () {const graphContext:GraphContext = this.props.graphContext;const selectionAdapter:CvValueAdapter<Array<string>> = new CvValueAdapter<Array<string>>();const selectionListener:CvValueListener<Array<string>> = selectionAdapter.createValueListener();return <CvAction actionId={graphContext.graphDef.defaultActionId}paneContext={graphContext}navigationListeners={this.props.navigationListeners}actionListeners={this.props.actionListeners}stateChangeListeners={this.props.stateChangeListeners}selectionProvider={selectionAdapter}renderer={(cvContext:CvContext, callback?:CvActionCallback)=>{const clickHandler = (id:string) => { selectionListener([id]); callback.fireAction();}const graphDef:GraphDef = graphContext.graphDef;const records:Array<EntityRec> = ArrayUtil.copy<EntityRec>(graphContext.scroller.buffer);const points:Array<any> = graphDef.graphType === GraphDef.GRAPH_TYPE_PIE ?this._generateDataForPieChart(graphContext, records) : this._generateData(graphContext, records);const identPropName = graphDef.identityDataPointDef.name;const plotTypes = graphDef.dataPointDefs.map((dataPointDef:GraphDataPointDef)=>{ return dataPointDef.plotType }).filter((v:string)=>{ return !!v; });if(graphDef.graphType === GraphDef.GRAPH_TYPE_CARTESIAN) {if (plotTypes.length === 0 || plotTypes.indexOf(GraphDef.PLOT_TYPE_BAR) > -1){return <CvBarChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} clickHandler={clickHandler}/>} else if(plotTypes.indexOf(GraphDef.PLOT_TYPE_LINE) > -1) {return <CvLineChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} clickHandler={clickHandler}/>} else if(plotTypes.indexOf(GraphDef.PLOT_TYPE_STACKED) > -1) {return <CvBarChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} stack={true} clickHandler={clickHandler}/>} else if(plotTypes.indexOf(GraphDef.PLOT_TYPE_SCATTER) > -1) {return <CvScatterChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} clickHandler={clickHandler}/>}else if(plotTypes.indexOf(GraphDef.PLOT_TYPE_BUBBLE) > -1 ) {return <CvScatterChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} bubble={true} clickHandler={clickHandler}/>} else {return null;}} else if(graphDef.graphType === GraphDef.GRAPH_TYPE_PIE) {return <CvPieChart graphContext={graphContext} data={points} identPropName={identPropName}defaultSeriesColors={this.props.defaultSeriesColors} clickHandler={clickHandler}/>} else {return null;}}}/>},shouldComponentUpdate(nextProps, nextState) {/*This is an 'inclusive' change list - updates DO NOT happen by defaultDesired updates should be explicitly added here*///update if we have new list dataif (nextProps.lastRefreshTime) {if (this.props.lastRefreshTime) {if (nextProps.lastRefreshTime.getTime() > this.props.lastRefreshTime.getTime()) {return true;}} else {return true;}}return false;},_formatProp: function(prop:Prop, propDef:PropDef) {if(propDef) {const formattedProp:string = (CvProp as any).formatDataType(prop, propDef);return propDef.isNumericType ? Number(formattedProp) : formattedProp;} else {if(typeof prop.value !== 'number') {return (CvProp as any).formatDataType(prop, null);} else {return prop.value;}}},_generateData: function(graphContext:GraphContext, records:Array<EntityRec>):Array<any> {const graphDef:GraphDef = graphContext.graphDef;//prop for 1 axis (or dimension)const identPropName = graphDef.identityDataPointDef.name;const points = records.map((record:EntityRec)=>{const item = {}item['id'] = record.objectId;item[identPropName] = this._formatProp(record.propAtName(identPropName), graphContext.propDefAtName(identPropName));//possible props for other axes (or dimensions)graphDef.dataPointDefs.forEach((dataPointDef:GraphDataPointDef)=>{const propName = dataPointDef.name;if(propName) item[propName] = this._formatProp(record.propAtName(propName), graphContext.propDefAtName(propName));const xAxisName = dataPointDef.xAxisName;if(xAxisName) item[xAxisName] = this._formatProp(record.propAtName(xAxisName), graphContext.propDefAtName(xAxisName));const radiusName = dataPointDef.bubbleRadiusName;if(radiusName) item[radiusName] = Number(record.propAtName(radiusName).value);});return item;});return points;},_generateDataForPieChart: function(graphContext:GraphContext, records:Array<EntityRec>) {/* The pie chart requires the primary series to be numeric */const graphDef:GraphDef = graphContext.graphDef;//prop for 1 axis (or dimension)const identPropName = graphDef.identityDataPointDef.name;const points = records.map((record:EntityRec)=>{const item = {}item['id'] = record.objectId;item[identPropName] = this._formatProp(record.propAtName(identPropName), graphContext.propDefAtName(identPropName));graphDef.dataPointDefs.forEach((dataPointDef:GraphDataPointDef)=>{const propName = dataPointDef.name;//force numeric typingif(propName) item[propName] = Number(record.propAtName(propName).value);});return item;});return points;},})

CvGraphPanel

CvGraphPanel: ClassicComponentClass<CvGraphPanelProps> = React.createClass<CvGraphPanelProps, CvGraphPanelState>({mixins: [CvBaseMixin],componentDidMount: function () {},getDefaultProps: function () {return {paneRef: null,formContext: null,graphContext: null,navigationListeners: [],selectionListener: null,stateChangeListeners: [],actionListeners: [],defaultSeriesColors: CV_GRAPH_DEFAULT_COLORS,navTarget: null,actionProvider: null}},getInitialState: function () {return {}},render: function () {const {} = this.state;const graphPaneProps = {paneRef: this.props.paneRef,formContext: this.props.formContext,queryContext: this.props.graphContext,stateChangeListeners: this.props.stateChangeListeners,actionListeners: this.props.actionListeners,actionProvider: this.props.actionProvider}return (<CvQueryPane {...graphPaneProps} queryRenderer={(cvContext:CvContext, callback:CvQueryPaneCallback)=>{const graphContext:GraphContext = cvContext.scopeCtx.scopeObj;return <CvGraph graphContext={graphContext}lastRefreshTime={graphContext.lastRefreshTime}navigationListeners={this.props.navigationListeners}selectionListener={this.props.selectionListener}actionListeners={this.props.actionListeners}stateChangeListeners={this.props.stateChangeListeners}navTarget={this.props.navTarget}defaultSeriesColors={this.props.defaultSeriesColors}/>}}/>);},})

CvLineChart

CvLineChart: ClassicComponentClass<CvChartProps> = React.createClass<CvChartProps, {}>({mixins: [CvChart],render: function () {const graphDef = this.props.graphContext.graphDef;const {minX, maxX, minY, maxY, xAxisLabel, yAxisLabel} = this.getMetaValues(graphDef, this.props.data);const xType = this.isNumeric(this.props.graphContext, graphDef.identityDataPointDef.name, this.props.data) ? 'number' : 'category';const yType = this.isNumeric(this.props.graphContext, graphDef.dataPointDefs[0].name, this.props.data) ? 'number' : 'category';return (<div className="cv-graph-container"><ResponsiveContainer width="99%" height="95%"><LineChart data={this.props.data} margin={{top: 20, right: 50, left: 20, bottom: 5}}><XAxis dataKey={this.props.identPropName} domain={[minX, maxX]} label={xAxisLabel} type={xType}/><YAxis domain={[minY, maxY]} label={yAxisLabel} allowDecimals={true} type={yType}/><CartesianGrid strokeDasharray="3 3"/><Tooltip/><Legend />{graphDef.dataPointDefs.map((dataPointDef:GraphDataPointDef, i:number)=>{const color = this.colorForDataPointDef(dataPointDef, i);const legendKey = dataPointDef.legendKey || dataPointDef.name;return <Line key={i} type="monotone" dataKey={dataPointDef.name} name={legendKey}dot={true} activeDot={true} stroke={color}/>})}</LineChart></ResponsiveContainer></div>);},})

CvPieChart

CvPieChart: ClassicComponentClass<CvPieChartProps> = React.createClass<CvPieChartProps, {}>({mixins: [CvChart],render: function () {const graphDef = this.props.graphContext.graphDef;//note: to support multiple 'pie levels' the data set has to be broken in corresponding discrete sets//for now, we're taking the first dataPointDef onlyconst dataPointDef = graphDef.dataPointDefs[0];if(dataPointDef) {const legendKey = dataPointDef.legendKey || dataPointDef.name;return (<div className="cv-graph-container"><ResponsiveContainer width="99%" height="95%"><PieChart margin={{top: 20, right: 50, left: 20, bottom: 5}} onClick={(data)=>{this.handleClick(data.payload.id)}}><Tooltip cursor={{strokeDasharray: '3 3'}}/><Legend/><Pie data={this.props.data} fill={this.colorForDataPointDef(dataPointDef, 0)}nameKey={this.props.identPropName} valueKey={dataPointDef.name} label={true}/></PieChart></ResponsiveContainer></div>);} else {return null;}}})

CvScatterChart

CvScatterChart: ClassicComponentClass<CvScatterChartProps> = React.createClass<CvScatterChartProps, {}>({mixins: [CvChart],render: function () {const graphDef = this.props.graphContext.graphDef;const {minX, maxX, minY, maxY, xAxisLabel, yAxisLabel} = this.getMetaValues(graphDef, this.props.data);//note: to support multiple 'scatter series' the data set has to be broken in corresponding discrete sets//for now, we're taking the first dataPointDef onlyconst dataPointDef = graphDef.dataPointDefs[0];const xType = this.isNumeric(this.props.graphContext, dataPointDef.xAxisName, this.props.data) ? 'numeric' : 'category';const yType = this.isNumeric(this.props.graphContext, dataPointDef.name, this.props.data) ? 'numeric' : 'category';if(dataPointDef) {const legendKey = dataPointDef.legendKey || dataPointDef.name;return (<div className="cv-graph-container"><ResponsiveContainer width="99%" height="95%"><ScatterChart margin={{top: 20, right: 50, left: 20, bottom: 5}}><XAxis dataKey={dataPointDef.xAxisName} name={dataPointDef.xAxisName} domain={[minX, maxX]} label={xAxisLabel} /><YAxis dataKey={dataPointDef.name} name={legendKey} domain={[minY, maxY]} label={yAxisLabel} />{(()=>{if(this.props.bubble) {if(dataPointDef.bubbleRadiusName) {return <ZAxis dataKey={dataPointDef.bubbleRadiusName} name={dataPointDef.bubbleRadiusName} range={[10000, 50000]}/>} else {return <ZAxis dataKey={dataPointDef.bubbleRadiusName} name={dataPointDef.bubbleRadiusName} range={[10000, 10000]}/>}} else {return <ZAxis/>}})()}<CartesianGrid/><Tooltip cursor={{strokeDasharray: '3 3'}}/><Legend/><Scatter data={this.props.data} fill={this.colorForDataPointDef(dataPointDef, 0)} onClick={(data)=>{}}/></ScatterChart></ResponsiveContainer></div>);} else {return null;}}})

Object literals

CvChart

CvChart: object

_calculateMax

  • _calculateMax(): string

  • Returns string

_calculateMin

  • _calculateMin(): number

  • Returns number

_getSampleValue

  • _getSampleValue(data: Array<any>, name: string): any

  • Parameters

    • data: Array<any>
    • name: string

    Returns any

colorForDataPointDef

  • colorForDataPointDef(dataPointDef: GraphDataPointDef, i: number): any

  • Parameters

    • dataPointDef: GraphDataPointDef
    • i: number

    Returns any

getMetaValues

  • getMetaValues(graphDef: GraphDef, data: Array<any>): object

  • Parameters

    • graphDef: GraphDef
    • data: Array<any>

    Returns object

    • maxX: any
    • maxY: any
    • minX: any
    • minY: any
    • xAxisLabel: string
    • yAxisLabel: string

handleClick

  • handleClick(id: any): void

  • Parameters

    • id: any

    Returns void

isNumeric

  • isNumeric(graphContext: GraphContext, propName: string, data: Array<any>): boolean

  • Parameters

    • graphContext: GraphContext
    • propName: string
    • data: Array<any>

    Returns boolean

Generated using TypeDoc