diff options
| author | srichman333 <sarah_n_richman@brown.edu> | 2023-08-13 17:13:31 -0400 |
|---|---|---|
| committer | srichman333 <sarah_n_richman@brown.edu> | 2023-08-13 17:13:31 -0400 |
| commit | da893c2739c9589bac04c00df3d22ebbfd78c09d (patch) | |
| tree | 7fddc419cd3c55a4e6a06c76982117ee09f100a2 | |
| parent | 5417c64b0723df1bc011efbea2f0f286100d9bf3 (diff) | |
LineChart ui fixes + selected columns bolded
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/TableBox.tsx | 17 |
2 files changed, 10 insertions, 11 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 49ef577e4..d27aaafbc 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -348,7 +348,7 @@ export class LineChart extends React.Component<LineChartProps> { tooltip .html(() => `<b>(${d0.x},${d0.y})</b>`) // text content for tooltip .style('pointer-events', 'none') - .style('transform', `translate(${xScale(d0.x) - this.width / 2}px,${yScale(d0.y) - 30}px)`); + .style('transform', `translate(${xScale(d0.x)-this.width}px,${yScale(d0.y)}px)`); } render() { @@ -357,7 +357,7 @@ export class LineChart extends React.Component<LineChartProps> { 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'; + const selectedPt = this._currSelected ? `{ ${this.props.axes[0]}: ${this._currSelected.x} ${this.props.axes[1]}: ${this._currSelected.y} }` : 'none'; return ( this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? ( <div className="chart-container" > diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index f80cbdf99..f56d34fa6 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -81,7 +81,8 @@ export class TableBox extends React.Component<TableBoxProps> { key={this.columns.indexOf(col)} ref={header as any} style={{ - color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined, + color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined, + background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined, fontWeight: 'bolder', border: '3px solid black' }} onPointerDown={e => { @@ -151,17 +152,15 @@ export class TableBox extends React.Component<TableBoxProps> { if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1); else { selected.push(guid)}; - })} style={ - { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'bold' : '' , width: '110%', - background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '' }}> - {this.columns.map(col => ( - (this.props.layoutDoc.selected)? + })} style={{ background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '', width: '110%' }}> + {this.columns.map(col => { // each cell - <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> + var colSelected = this.props.axes[0]==col || this.props.axes[1]==col; + return ( + <td key={this.columns.indexOf(col)} style={{border: colSelected? '3px solid black' : '1px solid black', fontWeight: colSelected? 'bolder' : 'normal'}}> {p[col]} </td> - : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td> - ))} + )})} </tr> ); } |