diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 50 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 14 |
2 files changed, 38 insertions, 26 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 9330e3b7f..b154a3607 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -155,7 +155,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { * @param e */ sidebarBtnDown = (e: React.PointerEvent) => { - console.log('down') setupMoveUpEvents( this, e, @@ -190,29 +189,32 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { - if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); - const docs = doc instanceof Doc ? [doc] : doc; - docs.forEach(doc => { - let existingPin = Docs.Create.TextDocument("test"); - //let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin; - // if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) { - // existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map)); - // } - if (existingPin) { - setTimeout(() => { - // we use a timeout in case this is called from the sidebar which may have just added a link that hasn't made its way into th elink manager yet - if (!LinkManager.Instance.getAllRelatedLinks(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) { - // const anchor = this.getAnchor(true, undefined, existingPin); - const anchor = this.getAnchor(true, undefined); - anchor && DocUtils.MakeLink(anchor, doc, { link_relationship: 'link to datapoint' }); - // doc.latitude = existingPin?.latitude; - // doc.longitude = existingPin?.longitude; - } - }); - } - }); //add to annotation list + console.log('sideBarAddDoc') + if (!this.SidebarShown) this.toggleSidebar(); + return this.addDocument(doc, sidebarKey); + // if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar(); + // const docs = doc instanceof Doc ? [doc] : doc; + // docs.forEach(doc => { + // let existingPin = Docs.Create.TextDocument("test"); + // //let existingPin = this.allPushpins.find(pin => pin.latitude === doc.latitude && pin.longitude === doc.longitude) ?? this.selectedPin; + // // if (doc.latitude !== undefined && doc.longitude !== undefined && !existingPin) { + // // existingPin = this.createPushpin(NumCast(doc.latitude), NumCast(doc.longitude), StrCast(doc.map)); + // // } + // if (existingPin) { + // setTimeout(() => { + // // we use a timeout in case this is called from the sidebar which may have just added a link that hasn't made its way into th elink manager yet + // if (!LinkManager.Instance.getAllRelatedLinks(doc).some(link => DocCast(link.link_anchor_1)?.mapPin === existingPin || DocCast(link.link_anchor_2)?.mapPin === existingPin)) { + // // const anchor = this.getAnchor(true, undefined, existingPin); + // const anchor = this.getAnchor(true, undefined); + // anchor && DocUtils.MakeLink(anchor, doc, { link_relationship: 'link to datapoint' }); + // // doc.latitude = existingPin?.latitude; + // // doc.longitude = existingPin?.longitude; + // } + // }); + // } + // }); //add to annotation list - return this.addDocument(doc, sidebarKey); // add to sidebar list + // return this.addDocument(doc, sidebarKey); // add to sidebar list }; sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeDocument(doc, sidebarKey); @@ -243,7 +245,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { case DataVizView.TABLE: return <TableBox {...sharedProps} docView={this.props.DocumentView} selectAxes={this.selectAxes} />; case DataVizView.LINECHART: - return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; + return <LineChart vizBox={this} {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; case DataVizView.PIECHART: diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index 11bdcc3d6..007d0259c 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -1,4 +1,4 @@ -import { EditableText, Size } from 'browndash-components'; +import { Button, EditableText, Size } from 'browndash-components'; import * as d3 from 'd3'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; @@ -23,6 +23,7 @@ export interface SelectedDataPoint extends DataPoint { elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>; } export interface LineChartProps { + vizBox: DataVizBox; rootDoc: Doc; layoutDoc: Doc; axes: string[]; @@ -366,7 +367,16 @@ export class LineChart extends React.Component<LineChartProps> { /> </div> <div ref={this._lineChartRef} /> - {selectedPt != 'none' ? <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> : null} + {selectedPt != 'none' ? + <div className={'selected-data'}> + {`Selected: ${selectedPt}`} + <Button onClick={e=>{ + console.log("test plzz") + this.props.vizBox.sidebarBtnDown; + this.props.vizBox.sidebarAddDocument;} + }></Button> + </div> + : null} </div> ) : ( <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span> |