aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/TableBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/TableBox.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/TableBox.tsx202
1 files changed, 130 insertions, 72 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 26e1eeeff..67e1c67bd 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -12,8 +12,8 @@ import { ObservableReactComponent } from '../../../ObservableReactComponent';
import { DocumentView } from '../../DocumentView';
import { DataVizView } from '../DataVizBox';
import './Chart.scss';
-import { undoBatch } from '../../../../util/UndoManager';
-const { default: { DATA_VIZ_TABLE_ROW_HEIGHT } } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
+import { undoable } from '../../../../util/UndoManager';
+const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
interface TableBoxProps {
Document: Doc;
layoutDoc: Doc;
@@ -41,9 +41,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
@observable settingTitle: boolean = false; // true when setting a title column
@observable hasRowsToFilter: boolean = false; // true when any rows are selected
@observable filtering: boolean = false; // true when the filtering menu is open
- @observable filteringColumn: any = ""; // column to filter
- @observable filteringType: string = "Value"; // "Value" or "Range"
- filteringVal: any[] = ["", ""]; // value or range to filter the column with
+ @observable filteringColumn: any = ''; // column to filter
+ @observable filteringType: string = 'Value'; // "Value" or "Range"
+ filteringVal: any[] = ['', '']; // value or range to filter the column with
@observable _scrollTop = -1;
@observable _tableHeight = 0;
@@ -58,7 +58,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
// then we need to remove any selected rows that are no longer part of the visualized dataset.
this._inputChangedDisposer = reaction(() => this._tableData.slice(), this.filterSelectedRowsDown, { fireImmediately: true });
const selected = NumListCast(this._props.layoutDoc.dataViz_selectedRows);
- if (selected.length>0) this.hasRowsToFilter = true;
+ if (selected.length > 0) this.hasRowsToFilter = true;
this.handleScroll();
}
componentWillUnmount() {
@@ -122,7 +122,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
} else selected?.push(rowId);
}
e.stopPropagation();
- this.hasRowsToFilter = (selected.length>0)? true : false;
+ this.hasRowsToFilter = selected.length > 0 ? true : false;
};
columnPointerDown = (e: React.PointerEvent, col: string) => {
@@ -163,16 +163,15 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
},
emptyFunction,
action(e => {
- if (e.shiftKey || this.settingTitle){
+ if (e.shiftKey || this.settingTitle) {
if (this.settingTitle) this.settingTitle = false;
- if (this._props.titleCol == col) this._props.titleCol = "";
+ if (this._props.titleCol == col) this._props.titleCol = '';
else this._props.titleCol = col;
this._props.selectTitleCol(this._props.titleCol);
- }
- else{
+ } else {
const newAxes = this._props.axes;
if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
- else if (newAxes.length > 2) newAxes[newAxes.length-1] = col;
+ else if (newAxes.length > 2) newAxes[newAxes.length - 1] = col;
else newAxes.push(col);
this._props.selectAxes(newAxes);
}
@@ -183,45 +182,43 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
/**
* These functions handle the filtering popup for when the "filter" button is pressed to select rows
*/
- @undoBatch
- filter = (e: any) => {
+ filter = undoable((e: any) => {
var start: any;
var end: any;
- if (this.filteringType=="Range"){
- start = (this.filteringVal[0] as Number)? Number(this.filteringVal[0]): this.filteringVal[0]
- end = (this.filteringVal[1] as Number)? Number(this.filteringVal[1]): this.filteringVal[0]
+ if (this.filteringType == 'Range') {
+ start = (this.filteringVal[0] as Number) ? Number(this.filteringVal[0]) : this.filteringVal[0];
+ end = (this.filteringVal[1] as Number) ? Number(this.filteringVal[1]) : this.filteringVal[0];
}
this._tableDataIds.forEach(rowID => {
- if (this.filteringType=="Value"){
- if (this._props.records[rowID][this.filteringColumn]==this.filteringVal[0]) {
+ if (this.filteringType == 'Value') {
+ if (this._props.records[rowID][this.filteringColumn] == this.filteringVal[0]) {
if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) {
this.tableRowClick(e, rowID);
}
}
- }
- else {
- let compare = this._props.records[rowID][this.filteringColumn]
- if (compare as Number) compare = Number(compare)
- if (start<=compare && compare<=end){
+ } else {
+ let compare = this._props.records[rowID][this.filteringColumn];
+ if (compare as Number) compare = Number(compare);
+ if (start <= compare && compare <= end) {
if (!NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowID)) {
this.tableRowClick(e, rowID);
}
}
}
- })
+ });
this.filtering = false;
- this.filteringColumn = "";
- this.filteringVal = ["", ""];
- }
+ this.filteringColumn = '';
+ this.filteringVal = ['', ''];
+ }, 'filter table');
@action
- setFilterColumn = (e:any) => {
+ setFilterColumn = (e: any) => {
this.filteringColumn = e.currentTarget.value;
- }
+ };
@action
- setFilterType = (e:any) => {
+ setFilterType = (e: any) => {
this.filteringType = e.currentTarget.value;
- }
+ };
changeFilterValue = action((e: React.ChangeEvent<HTMLInputElement>) => {
this.filteringVal[0] = e.target.value;
});
@@ -232,47 +229,82 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
this.filteringVal[1] = e.target.value;
});
@computed get renderFiltering() {
- if (this.filteringColumn==="") this.filteringColumn = this.columns[0];
+ if (this.filteringColumn === '') this.filteringColumn = this.columns[0];
return (
- <div className="tableBox-filterPopup" style={{right: this._props.width*.05}}>
+ <div className="tableBox-filterPopup" style={{ right: this._props.width * 0.05 }}>
<div className="tableBox-filterPopup-selectColumn">
Column:
- <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn!=""? this.filteringColumn : this.columns[0]} onChange={e => this.setFilterColumn(e)}>
+ <select className="tableBox-filterPopup-selectColumn-each" value={this.filteringColumn != '' ? this.filteringColumn : this.columns[0]} onChange={e => this.setFilterColumn(e)}>
{this.columns.map(column => (
- <option className="" key={column} value={column}> {column} </option>
+ <option className="" key={column} value={column}>
+ {' '}
+ {column}{' '}
+ </option>
))}
</select>
</div>
<div className="tableBox-filterPopup-setValue">
<select className="tableBox-filterPopup-setValue-each" value={this.filteringType} onChange={e => this.setFilterType(e)}>
- <option className="" key={"Value"} value={"Value"}> {"Value"} </option>
- <option className="" key={"Range"} value={"Range"}> {"Range"} </option>
+ <option className="" key={'Value'} value={'Value'}>
+ {' '}
+ {'Value'}{' '}
+ </option>
+ <option className="" key={'Range'} value={'Range'}>
+ {' '}
+ {'Range'}{' '}
+ </option>
</select>
:
- {this.filteringType=="Value"?
- <input className="tableBox-filterPopup-setValue-input" defaultValue="" autoComplete="off"
- onChange={this.changeFilterValue} onKeyDown={e => {e.stopPropagation();}}
- type="text" placeholder="" id="search-input"
+ {this.filteringType == 'Value' ? (
+ <input
+ className="tableBox-filterPopup-setValue-input"
+ defaultValue=""
+ autoComplete="off"
+ onChange={this.changeFilterValue}
+ onKeyDown={e => {
+ e.stopPropagation();
+ }}
+ type="text"
+ placeholder=""
+ id="search-input"
/>
- :
+ ) : (
<div>
- <input className="tableBox-filterPopup-setValue-input" defaultValue="" autoComplete="off"
- onChange={this.changeFilterRange0} onKeyDown={e => {e.stopPropagation();}}
- type="text" placeholder="" id="search-input" style={{width: this._props.width*.15}}
+ <input
+ className="tableBox-filterPopup-setValue-input"
+ defaultValue=""
+ autoComplete="off"
+ onChange={this.changeFilterRange0}
+ onKeyDown={e => {
+ e.stopPropagation();
+ }}
+ type="text"
+ placeholder=""
+ id="search-input"
+ style={{ width: this._props.width * 0.15 }}
/>
- to
- <input className="tableBox-filterPopup-setValue-input" defaultValue="" autoComplete="off"
- onChange={this.changeFilterRange1} onKeyDown={e => {e.stopPropagation();}}
- type="text" placeholder="" id="search-input" style={{width: this._props.width*.15}}
+ to
+ <input
+ className="tableBox-filterPopup-setValue-input"
+ defaultValue=""
+ autoComplete="off"
+ onChange={this.changeFilterRange1}
+ onKeyDown={e => {
+ e.stopPropagation();
+ }}
+ type="text"
+ placeholder=""
+ id="search-input"
+ style={{ width: this._props.width * 0.15 }}
/>
</div>
- }
+ )}
</div>
<div className="tableBox-filterPopup-setFilter">
- <Button onClick={action((e) => this.filter(e))} text="Set Filter" type={Type.SEC} color={'black'} />
+ <Button onClick={action(e => this.filter(e))} text="Set Filter" type={Type.SEC} color={'black'} />
</div>
</div>
- )
+ );
}
render() {
@@ -293,16 +325,32 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
<Button onClick={action(() => (this.settingTitle = !this.settingTitle))} text="Select Title Column" type={Type.SEC} color={'black'} />
</div>
<div className="tableBox-filtering">
- {this.filtering? this.renderFiltering : null}
+ {this.filtering ? this.renderFiltering : null}
<Button onClick={action(() => (this.filtering = !this.filtering))} text="Filter" type={Type.SEC} color={'black'} />
<div className="tableBox-filterAll">
- {this.hasRowsToFilter? <Button onClick={action(() => {
- this._props.layoutDoc.dataViz_selectedRows = new List<number>();
- this.hasRowsToFilter = false; })} text="Deselect All" type={Type.SEC} color={'black'} tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one." />
- : <Button onClick={action(() => {
- this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)
- this.hasRowsToFilter = true; })} text="Select All" type={Type.SEC} color={'black'} tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one." />
- }
+ {this.hasRowsToFilter ? (
+ <Button
+ onClick={action(() => {
+ this._props.layoutDoc.dataViz_selectedRows = new List<number>();
+ this.hasRowsToFilter = false;
+ })}
+ text="Deselect All"
+ type={Type.SEC}
+ color={'black'}
+ tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one."
+ />
+ ) : (
+ <Button
+ onClick={action(() => {
+ this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds);
+ this.hasRowsToFilter = true;
+ })}
+ text="Select All"
+ type={Type.SEC}
+ color={'black'}
+ tooltip="Select rows to be displayed in any DataViz boxes dragged off of this one."
+ />
+ )}
</div>
</div>
</div>
@@ -338,13 +386,23 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
<th
key={this.columns.indexOf(col)}
style={{
- color: this._props.axes.slice().reverse().lastElement() === col ? 'darkgreen'
- : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? 'darkred'
- : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? 'darkblue' : undefined,
- background: this.settingTitle? 'lightgrey'
- : this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb'
- : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? '#Fbdbdb'
- : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? '#c6ebf7' : undefined,
+ color:
+ this._props.axes.slice().reverse().lastElement() === col
+ ? 'darkgreen'
+ : this._props.axes.length > 2 && this._props.axes.lastElement() === col
+ ? 'darkred'
+ : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] == col)
+ ? 'darkblue'
+ : undefined,
+ background: this.settingTitle
+ ? 'lightgrey'
+ : this._props.axes.slice().reverse().lastElement() === col
+ ? '#E3fbdb'
+ : this._props.axes.length > 2 && this._props.axes.lastElement() === col
+ ? '#Fbdbdb'
+ : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] == col)
+ ? '#c6ebf7'
+ : undefined,
fontWeight: 'bolder',
border: '3px solid black',
}}
@@ -367,10 +425,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
}}>
{this.columns.map(col => {
var colSelected = false;
- if (this._props.axes.length>2) colSelected = this._props.axes[0]==col || this._props.axes[1]==col || this._props.axes[2]==col;
- else if (this._props.axes.length>1) colSelected = this._props.axes[0]==col || this._props.axes[1]==col;
- else if (this._props.axes.length>0) colSelected = this._props.axes[0]==col;
- if (this._props.titleCol==col) colSelected = true;
+ if (this._props.axes.length > 2) colSelected = this._props.axes[0] == col || this._props.axes[1] == col || this._props.axes[2] == col;
+ else if (this._props.axes.length > 1) colSelected = this._props.axes[0] == col || this._props.axes[1] == col;
+ else if (this._props.axes.length > 0) colSelected = this._props.axes[0] == col;
+ if (this._props.titleCol == col) colSelected = true;
return (
<td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
<div className="tableBox-cell">{this._props.records[rowId][col]}</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:37:42 +0000