diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Histogram.tsx | 48 |
1 files changed, 44 insertions, 4 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 14cfda559..12e2be341 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -105,11 +105,29 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]()); } componentDidMount() { + // draw histogram this._disposers.chartData = reaction( () => ({ dataSet: this._histogramData, w: this.width, h: this.height }), ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h), { fireImmediately: true } ); + + // restore selected bars + var svg = this._histogramSvg; + if (svg) { + const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData) + svg.selectAll('rect').attr('class', (d: any) => { + let selected = false; + selectedDataBars.map(eachSelectedData => { + if (d[0]==eachSelectedData) selected = true; + }) + if (selected){ + this.selectedData.push(d); + return 'histogram-bar hover' + } + else return 'histogram-bar'; + }); + } } @action @@ -164,6 +182,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { // for when a bar is selected - not just hovered over sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false; let sameAsAny = false; + const selectedDataBars = Cast(this._props.layoutDoc.dataViz_histogram_selectedData, listSpec('number'), null); this.selectedData.map(eachData => { if (!sameAsAny){ let match = true; @@ -174,14 +193,17 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { sameAsAny = true; let index = this.selectedData.indexOf(eachData) this.selectedData.splice(index, 1); + selectedDataBars.splice(index, 1); this._currSelected = undefined; } } }) if(!sameAsAny) { this.selectedData.push(d); + selectedDataBars.push(d[0]); this._currSelected = this.selectedData.length>1? undefined : showSelected; } + console.log(selectedDataBars.length) // for filtering child dataviz docs if (this._props.layoutDoc.dataViz_filterSelection){ @@ -357,7 +379,6 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { if (d[0]==eachSelectedData[0]) selected = true; }) return (hoverOverBar && hoverOverBar[0] == d[0]) || selected ? 'histogram-bar hover' : 'histogram-bar'; - return (hoverOverBar && hoverOverBar[0] == d[0]) || (selectedData && selectedData[0] == d[0]) ? 'histogram-bar hover' : 'histogram-bar'; }); }; svg.on('click', onPointClick).on('mouseover', onHover).on('mouseout', mouseOut); @@ -451,9 +472,11 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1)); }; - updateBarColors = () => { + // reloads the bar colors and selected bars + updateSavedUI = () => { var svg = this._histogramSvg; - if (svg) + if (svg) { + // bar color svg.selectAll('rect').attr('fill', (d: any) => { var barColor; const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::')); @@ -466,10 +489,26 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { }); return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor); }); + // selected bars + // const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_histogram_selectedData) + // let filledSelectedData = this.selectedData.length>0; + // console.log(selectedDataBars.length) + // svg.selectAll('rect').attr('class', (d: any) => { + // let selected = false; + // selectedDataBars.map(eachSelectedData => { + // if (d[0]==eachSelectedData) selected = true; + // }) + // if (selected){ + // if (!filledSelectedData) this.selectedData.push(d); + // return 'histogram-bar hover' + // } + // else return 'histogram-bar'; + // }); + } }; render() { - this.updateBarColors(); + this.updateSavedUI(); this._histogramData; var curSelectedBarName = ''; var titleAccessor: any = 'dataViz_histogram_title'; @@ -478,6 +517,7 @@ export class Histogram extends ObservableReactComponent<HistogramProps> { if (!this._props.layoutDoc[titleAccessor]) this._props.layoutDoc[titleAccessor] = this.defaultGraphTitle; if (!this._props.layoutDoc.dataViz_histogram_defaultColor) this._props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2'; if (!this._props.layoutDoc.dataViz_histogram_barColors) this._props.layoutDoc.dataViz_histogram_barColors = new List<string>(); + if (!this._props.layoutDoc.dataViz_histogram_selectedData) this._props.layoutDoc.dataViz_histogram_selectedData = new List<string>(); var selected = 'none'; if (this._currSelected) { curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')); |