diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DataVizBox.tsx')
-rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 80 |
1 files changed, 36 insertions, 44 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index c5ad3c84d..a4a4028f2 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -1,25 +1,22 @@ -import { action, computed, observable } from "mobx"; -import { observer } from "mobx-react"; -import * as React from "react"; -import { Cast, StrCast } from "../../../../fields/Types"; -import { CsvField } from "../../../../fields/URLField"; -import { Utils } from "../../../../Utils"; -import { ViewBoxBaseComponent } from "../../DocComponent"; -import { FieldViewProps, FieldView } from "../FieldView"; -import { ChartBox } from "./ChartBox"; -import "./DataVizBox.scss"; -import { HistogramBox } from "./HistogramBox"; -import { TableBox } from "./TableBox"; +import { action, computed, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Cast, StrCast } from '../../../../fields/Types'; +import { CsvField } from '../../../../fields/URLField'; +import { ViewBoxBaseComponent } from '../../DocComponent'; +import { FieldViewProps, FieldView } from '../FieldView'; +import { ChartBox } from './ChartBox'; +import './DataVizBox.scss'; +import { TableBox } from './TableBox'; enum DataVizView { - TABLE = "table", - HISTOGRAM= "histogram" + TABLE = 'table', + HISTOGRAM = 'histogram', } - @observer export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() { - @observable private pairs: {x: number, y:number}[] = []; + @observable private pairs: { x: number; y: number }[] = []; // TODO: nda - make this use enum values instead // @observable private currView: DataVizView = DataVizView.TABLE; @@ -27,7 +24,7 @@ export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() { if (this.rootDoc._dataVizView) { return StrCast(this.rootDoc._dataVizView); } else { - return "table"; + return 'table'; } } @@ -35,71 +32,66 @@ export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() { super(props); if (!this.rootDoc._dataVizView) { // TODO: nda - this might not always want to default to "table" - this.rootDoc._dataVizView = "table"; + this.rootDoc._dataVizView = 'table'; } } - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DataVizBox, fieldKey); } + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(DataVizBox, fieldKey); + } @computed get selectView() { - switch(this.currView) { - case "table": - return (<TableBox pairs={this.pairs} />); - case "histogram": - return (<ChartBox rootDoc={this.rootDoc} pairs={this.pairs}/>); + switch (this.currView) { + case 'table': + return <TableBox pairs={this.pairs} />; + case 'histogram': + return <ChartBox rootDoc={this.rootDoc} pairs={this.pairs} />; // case "histogram": - // return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>) + // return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>) } } @computed get pairVals() { - return fetch("/csvData?uri=" + this.dataUrl?.url.href).then(res => res.json()); + return fetch('/csvData?uri=' + this.dataUrl?.url.href).then(res => res.json()); } - @computed get dataUrl() { return Cast(this.dataDoc[this.fieldKey], CsvField) } + @computed get dataUrl() { + return Cast(this.dataDoc[this.fieldKey], CsvField); + } componentDidMount() { // this.createPairs(); this.fetchData(); } - // async fetchData() { - // console.log(Cast(this.dataDoc[this.fieldKey], CsvField)); - // const uri = this.dataUrl?.url.href; - // console.log(uri); - // const res = await fetch("/csvData?uri=" + uri); - // return await res.json(); - // } - fetchData() { const uri = this.dataUrl?.url.href; - fetch("/csvData?uri=" + uri).then( - res => res.json().then( + fetch('/csvData?uri=' + uri).then(res => + res.json().then( action(res => { this.pairs = res; }) - )) + ) + ); } - // handle changing the view using a button @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) { e.preventDefault(); e.stopPropagation(); - this.rootDoc._dataVizView = this.currView == "table" ? "histogram" : "table"; + this.rootDoc._dataVizView = this.currView == 'table' ? 'histogram' : 'table'; } render() { - if (this.pairs.length == 0) { - return <div>Loading...</div> + return <div>Loading...</div>; } return ( <div className="dataViz"> - <button onClick={(e) => this.changeViewHandler(e)}>Change View</button> + <button onClick={e => this.changeViewHandler(e)}>Change View</button> {this.selectView} </div> ); } -}
\ No newline at end of file +} |