diff options
4 files changed, 40 insertions, 23 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index f167346de..9a4de3c36 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -70,8 +70,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes))); Object.keys(this.layoutDoc).map(key => { if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor') - || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ - console.log(key) + || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){ this.layoutDoc['_'+key] = data[key]; } }) @@ -97,7 +96,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined; Object.keys(this.layoutDoc).map(key => { if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor') - || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ + || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){ anchor[key] = this.layoutDoc[key]; } }) diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index c6e3b4cd1..e5e3ccd53 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -446,9 +446,9 @@ export class Histogram extends React.Component<HistogramProps> { this.componentDidMount(); var curSelectedBarName; var titleAccessor: any=''; - if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]]); - else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]]); - const title = titleAccessor? titleAccessor : this.defaultGraphTitle; + if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]; + else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0]; + if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; var selected: string; if (this._currSelected){ curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) @@ -465,9 +465,8 @@ export class Histogram extends React.Component<HistogramProps> { <div className="chart-container" > <div className="graph-title"> <EditableText - val={title} - setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['histogram-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string - : this.props.layoutDoc['histogram-title-'+this.props.axes[0]] = val as string})} + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)} color={"black"} size={Size.LARGE} fillWidth diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 0142e96ad..0e699bb99 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -350,19 +350,19 @@ export class LineChart extends React.Component<LineChartProps> { } render() { + this.componentDidMount(); var titleAccessor:any = ''; - if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]); - else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]]); - const title = titleAccessor? titleAccessor : this.defaultGraphTitle; + if (this.props.axes.length==2) titleAccessor = 'lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]; + else if (this.props.axes.length>0) titleAccessor = 'lineChart-title-'+this.props.axes[0]; + if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none'; return ( this.props.axes.length >= 2 ? ( <div className="chart-container" > <div className="graph-title"> <EditableText - val={title} - setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string - : this.props.layoutDoc['lineChart-title-'+this.props.axes[0]] = val as string})} + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)} color={"black"} size={Size.LARGE} fillWidth diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index f0c27866d..98c79f95a 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -348,10 +348,27 @@ export class PieChart extends React.Component<PieChartProps> { .enter() .append("g") arcs.append("path") - .attr("fill", (data, i)=>{ return this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]? StrCast(this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) + .attr("fill", (d, i)=>{ + var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => { + try { + return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"") + } catch (error) { + return each[percentField]==d.data + }}) + var dataPoint; + if (possibleDataPoints.length==1) dataPoint = possibleDataPoints[0]; + else{ + dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]] + trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1; + } + var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField]; + return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) .attr("class", 'slice') .attr("d", arc) .on('click', onPointClick) + + trackDuplicates = {}; + data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null) arcs.append("text") .attr("transform",function(d){ var centroid = arc.centroid(d as unknown as d3.DefaultArcObject) @@ -383,12 +400,15 @@ export class PieChart extends React.Component<PieChartProps> { }; render() { + this.componentDidMount(); var titleAccessor: any=''; - if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]); - else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]]); - const title = titleAccessor? titleAccessor : this.defaultGraphTitle; + if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]; + else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0]; + if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; var selected: string; + var curSelectedSliceName; if (this._currSelected){ + curSelectedSliceName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) selected = '{ '; Object.keys(this._currSelected).map(key => { key!=''? selected += key + ': ' + this._currSelected[key] + ', ': ''; @@ -402,9 +422,8 @@ export class PieChart extends React.Component<PieChartProps> { <div className="chart-container"> <div className="graph-title"> <EditableText - val={title} - setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string - : this.props.layoutDoc['pieChart-title-'+this.props.axes[0]] = val as string})} + val={StrCast(this.props.layoutDoc[titleAccessor])} + setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)} color={"black"} size={Size.LARGE} fillWidth @@ -418,7 +437,7 @@ export class PieChart extends React.Component<PieChartProps> { tooltip={'Change Slice Color'} type={Type.SEC} icon={<FaFillDrip/>} - selectedColor={this.curSliceSelected.attr("fill")} + selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")} setSelectedColor={color => this.changeSelectedColor(color)} size={Size.XSMALL} /> |