diff options
3 files changed, 125 insertions, 30 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 6d0a8bf75..64e61fca8 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -443,21 +443,8 @@ export class Histogram extends React.Component<HistogramProps> { this.defaultBarColor = color; }; - @computed get editableTitle() { - const title = this.graphTitle; - return ( - <EditableText - val={title} - setVal={action(val => this.graphTitle = val as string)} - color={"black"} - size={Size.LARGE} - fillWidth - /> - ); - } - render() { - + const title = this.graphTitle; var selected: string; if (this._currSelected){ selected = '{ '; @@ -472,7 +459,13 @@ export class Histogram extends React.Component<HistogramProps> { this.props.axes.length >= 1 ? ( <div className="chart-container" > <div className="graph-title"> - {this.editableTitle} + <EditableText + val={title} + setVal={action(val => this.graphTitle = val as string)} + color={"black"} + size={Size.LARGE} + fillWidth + /> <ColorPicker tooltip={'Change Default Bar Color'} diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 5080f0c74..47d4fb23e 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -382,20 +382,8 @@ export class PieChart extends React.Component<PieChartProps> { this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color; }; - @computed get editableTitle() { - const title = this.graphTitle; - return ( - <EditableText - val={title} - setVal={action(val => this.graphTitle = val as string)} - color={"black"} - size={Size.LARGE} - fillWidth - /> - ); - } - render() { + const title = this.graphTitle; var selected: string; if (this._currSelected){ selected = '{ '; @@ -409,7 +397,15 @@ export class PieChart extends React.Component<PieChartProps> { return ( this.props.axes.length >= 1 ? ( <div className="chart-container"> - <div className="graph-title"> {this.editableTitle} </div> + <div className="graph-title"> + <EditableText + val={title} + setVal={action(val => this.graphTitle = val as string)} + color={"black"} + size={Size.LARGE} + fillWidth + /> + </div> {selected != 'none' ? <div className={'selected-data'}> Selected: {selected} diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 500e7b639..aaedba202 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,4 +1,4 @@ -import { action, computed } from 'mobx'; +import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc } from '../../../../../fields/Doc'; @@ -10,6 +10,7 @@ import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import { LinkManager } from '../../../../util/LinkManager'; import { DocCast } from '../../../../../fields/Types'; +import { EditableText, Size, Type } from 'browndash-components'; interface TableBoxProps { rootDoc: Doc; @@ -21,6 +22,8 @@ interface TableBoxProps { @observer export class TableBox extends React.Component<TableBoxProps> { + @observable editableHeaders = this.columns; + @observable editableCells = this._tableData; @computed get _tableData() { if (this.incomingLinks.length! <= 0) return this.props.pairs; @@ -39,6 +42,106 @@ export class TableBox extends React.Component<TableBoxProps> { return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : []; } + // render() { + // return ( + // <div className="table-container"> + // <table className="table"> + // <thead> + // <tr className="table-row"> + // {this.editableHeaders + // .filter(col => !col.startsWith('select')) + // .map(col => { + // const header = React.createRef<HTMLElement>(); + // const displayColName = col; + // return ( + // <th + // key={this.editableHeaders.indexOf(col)} + // ref={header as any} + // style={{ + // color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined, + // fontWeight: this.props.axes.includes(col) ? 'bolder' : 'normal', + // }} + // onPointerDown={e => { + // const downX = e.clientX; + // const downY = e.clientY; + // setupMoveUpEvents( + // {}, + // e, + // e => { + // const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + // const targetCreator = (annotationOn: Doc | undefined) => { + // const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + // embedding._dataVizView = DataVizView.LINECHART; + // embedding._data_vizAxes = new List<string>([col, col]); + // embedding._draggedFrom = this.props.docView?.()!.rootDoc!; + // embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; + // return embedding; + // }; + // if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + // DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { + // dragComplete: e => { + // if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { + // e.linkDocument.link_displayLine = true; + // e.linkDocument.link_matchEmbeddings = true; + // // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; + // // e.annoDragData.linkSourceDoc.followLinkZoom = false; + // } + // }, + // }); + // return true; + // } + // return false; + // }, + // emptyFunction, + // action(e => { + // const newAxes = this.props.axes; + // if (newAxes.includes(col)) { + // newAxes.splice(newAxes.indexOf(col), 1); + // } else if (newAxes.length >= 1) { + // newAxes[1] = col; + // } else { + // newAxes[0] = col; + // } + // this.props.selectAxes(newAxes); + // }) + // ); + // }}> + // <EditableText + // val={displayColName} + // setVal={action(val => { + // this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string + // this.props.pairs.map(pair => { + // pair[val as string] = pair[col]; + // delete pair[col] + // }) + // })} + // color={"black"} + // size={Size.LARGE} + // /> + // </th> + // ); + // })} + // </tr> + // </thead> + // <tbody> + // {this._tableData?.map((p, i) => { + // return ( + // <tr key={i} className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}> + // {this.editableHeaders.map(col => ( + // <td key={this.editableHeaders.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}> + // {p[col]} + // </td> + // ))} + // </tr> + // ); + // })} + // </tbody> + // </table> + // </div> + // ); + // } + + render() { return ( <div className="table-container"> @@ -125,4 +228,7 @@ export class TableBox extends React.Component<TableBoxProps> { </div> ); } + + + } |