From 3b6b673cf1fd1e951c28210983d0b1d6176fc013 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Mon, 26 Feb 2024 00:57:44 -0500 Subject: select title col ui --- .../views/nodes/DataVizBox/components/Chart.scss | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/components/Chart.scss') diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 41ce637ac..15d289abf 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -120,11 +120,18 @@ } } } -.selectAll-buttons { - display: flex; - flex-direction: row; - justify-content: flex-end; +.select-buttons { margin-top: 5px; - margin-right: 10px; - float: right; + margin-left: 25px; + display: inline-block; + .selectTitle { + display: inline-block; + + } + .selectAll { + display: flex; + flex-direction: row; + float: right; + margin-right: 10px; + } } -- cgit v1.2.3-70-g09d2 From 8fc97eb6e093d4217f28919bf836425b75fdfea3 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Sun, 10 Mar 2024 14:00:08 -0400 Subject: filter tables --- .../views/nodes/DataVizBox/components/Chart.scss | 54 +++++++++- .../views/nodes/DataVizBox/components/TableBox.tsx | 118 +++++++++++++++++++-- 2 files changed, 157 insertions(+), 15 deletions(-) (limited to 'src/client/views/nodes/DataVizBox/components/Chart.scss') diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 15d289abf..cf0007cfd 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -120,18 +120,62 @@ } } } -.select-buttons { +.tableBox-selectButtons { margin-top: 5px; margin-left: 25px; display: inline-block; - .selectTitle { - display: inline-block; - + padding: 2px; + .tableBox-selectTitle { + display: inline-flex; + flex-direction: row; } - .selectAll { + .tableBox-filtering { display: flex; flex-direction: row; float: right; margin-right: 10px; + .tableBox-filterAll { + min-width: 75px; + } + } +} + +.tableBox-filterPopup { + background: $light-gray; + position: absolute; + min-width: 235px; + top: 60px; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 2; + padding: 7px; + border-radius: 5px; + margin: 3px; + .tableBox-filterPopup-selectColumn { + margin-top: 5px; + flex-direction: row; + .tableBox-filterPopup-selectColumn-each { + margin-left: 25px; + border-radius: 3px; + background: $light-gray; + } + } + .tableBox-filterPopup-setValue { + margin-top: 5px; + display: flex; + flex-direction: row; + .tableBox-filterPopup-setValue-each { + margin-right: 5px; + border-radius: 3px; + background: $light-gray; + } + .tableBox-filterPopup-setValue-input { + margin: 5px; + } + } + .tableBox-filterPopup-setFilter { + margin-top: 5px; + align-self: center; } } diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index c9491da59..05429e82b 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -12,6 +12,7 @@ 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 interface TableBoxProps { Document: Doc; @@ -36,7 +37,13 @@ interface TableBoxProps { export class TableBox extends ObservableReactComponent { _inputChangedDisposer?: IReactionDisposer; _containerRef: HTMLDivElement | null = null; - @observable settingTitle: boolean = false; + + @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 _scrollTop = -1; @observable _tableHeight = 0; @@ -50,6 +57,8 @@ export class TableBox extends ObservableReactComponent { // if the tableData changes (ie., when records are selected by the parent (input) visulization), // 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; this.handleScroll(); } componentWillUnmount() { @@ -65,9 +74,6 @@ export class TableBox extends ObservableReactComponent { @computed get parentViz() { return DocCast(this._props.Document.dataViz_parentViz); - // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links - // .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // get links where this chart doc is the target of the link - // .map(link => DocCast(link.link_anchor_1)); // then return the source of the link } @computed get columns() { @@ -116,6 +122,7 @@ export class TableBox extends ObservableReactComponent { } else selected?.push(rowId); } e.stopPropagation(); + this.hasRowsToFilter = (selected.length>0)? true : false; }; columnPointerDown = (e: React.PointerEvent, col: string) => { @@ -173,6 +180,88 @@ export class TableBox extends ObservableReactComponent { ); }; + /** + * These functions handle the filtering popup for when the "filter" button is pressed to select rows + */ + @undoBatch + filter = (e: any) => { + this._tableDataIds.forEach(rowID => { + if (this.filteringType=="Value"){ + if (this._props.records[rowID][this.filteringColumn]==this.filteringVal[0]) { + this.tableRowClick(e, rowID); + } + } + else { + if (this.filteringVal[0]<=this._props.records[rowID][this.filteringColumn] && this._props.records[rowID][this.filteringColumn]<=this.filteringVal[1]){ + this.tableRowClick(e, rowID); + } + } + }) + this.filtering = false; + this.filteringColumn = ""; + this.filteringVal = ["", ""]; + } + @action + setFilterColumn = (e:any) => { + this.filteringColumn = e.currentTarget.value; + } + @action + setFilterType = (e:any) => { + this.filteringType = e.currentTarget.value; + } + changeFilterValue = action((e: React.ChangeEvent) => { + this.filteringVal[0] = e.target.value; + }); + changeFilterRange0 = action((e: React.ChangeEvent) => { + this.filteringVal[0] = e.target.value; + }); + changeFilterRange1 = action((e: React.ChangeEvent) => { + this.filteringVal[1] = e.target.value; + }); + @computed get renderFiltering() { + if (this.filteringColumn==="") this.filteringColumn = this.columns[0]; + return ( +
+
+ Column: + +
+
+ + : + {this.filteringType=="Value"? + {e.stopPropagation();}} + type="text" placeholder="" id="search-input" + /> + : +
+ {e.stopPropagation();}} + type="text" placeholder="" id="search-input" style={{width: this._props.width*.15}} + /> + to + {e.stopPropagation();}} + type="text" placeholder="" id="search-input" style={{width: this._props.width*.15}} + /> +
+ } +
+
+
+
+ ) + } + render() { if (this._tableData.length > 0) { return ( @@ -186,13 +275,22 @@ export class TableBox extends ObservableReactComponent { this._props.layoutDoc.dataViz_selectedRows = new List(this._tableDataIds); } }}> -
-
-
+
+ {this.filtering? this.renderFiltering : null} +
-
-