diff options
4 files changed, 61 insertions, 17 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 70fed91ef..12aa2ae34 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -120,7 +120,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9; const margin = { top: 10, right: 25, bottom: 50, left: 25 }; if (!this.pairs) return 'no data'; - console.log('new pie') return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />; } @computed get selectView() { diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index da5a274a5..fc0c4cea3 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -11,20 +11,32 @@ .graph-title{ align-items: center; font-size: larger; + display: flex; + flex-direction: row; + margin-top: -10px; + margin-bottom: -10px; } .selected-data{ align-items: center; + text-align: center; + display: flex; + flex-direction: row; + margin: 10px; + margin-top: 0px; + margin-bottom: -5px; } .slice { &.hover { stroke: black; + stroke-width: 2px; } } .histogram-bar{ outline: thin solid black; &.hover{ - outline: 5px solid black; + outline: 3px solid black; + outline-offset: -3px; } } diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 998636a42..6d0a8bf75 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -14,7 +14,7 @@ import { PinProps, PresBox } from "../../trails"; import { Docs } from "../../../../documents/Documents"; import { List } from "../../../../../fields/List"; import './Chart.scss'; -import { ColorPicker, Size, Type } from "browndash-components"; +import { ColorPicker, EditableText, Size, Type } from "browndash-components"; import { FaFillDrip } from "react-icons/fa"; export interface HistogramProps { @@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> { private curBarSelected: any = undefined; private barColors: any = {}; private defaultBarColor: string = '#69b3a2'; + @observable graphTitle: string = this.defaultGraphTitle; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates @computed get _histogramData() { @@ -71,7 +72,7 @@ export class Histogram extends React.Component<HistogramProps> { .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })) .sort((a, b) => (a.x < b.x ? -1 : 1)); } - @computed get graphTitle(){ + @computed get defaultGraphTitle(){ var ax0 = this.props.axes[0]; var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined; if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){ @@ -432,6 +433,7 @@ export class Histogram extends React.Component<HistogramProps> { this.curBarSelected.attr("fill", color); this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color; }; + @action changeDefaultColor = (color: string) => { const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => { if (this.barColors[d[0]]) return false; @@ -441,6 +443,19 @@ 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() { var selected: string; @@ -456,18 +471,22 @@ export class Histogram extends React.Component<HistogramProps> { return ( this.props.axes.length >= 1 ? ( <div className="chart-container" > - <div className="graph-title"> {this.graphTitle} </div> - <ColorPicker - tooltip={'Change Default Slice Color'} - type={Type.SEC} - icon={<FaFillDrip/>} - selectedColor={this.defaultBarColor} - setSelectedColor={color => this.changeDefaultColor(color)} - size={Size.XSMALL} - /> + <div className="graph-title"> + {this.editableTitle} + + <ColorPicker + tooltip={'Change Default Bar Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={this.defaultBarColor} + setSelectedColor={color => this.changeDefaultColor(color)} + size={Size.XSMALL} + /> + </div> {selected != 'none' ? <div className={'selected-data'}> Selected: {selected} + <ColorPicker tooltip={'Change Slice Color'} type={Type.SEC} diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 872bf9af1..5080f0c74 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -14,7 +14,7 @@ import { PinProps, PresBox } from "../../trails"; import { Docs } from "../../../../documents/Documents"; import { List } from "../../../../../fields/List"; import './Chart.scss'; -import { ColorPicker, Size, Type } from "browndash-components"; +import { ColorPicker, EditableText, Size, Type } from "browndash-components"; import { FaFillDrip } from "react-icons/fa"; export interface PieChartProps { @@ -43,6 +43,7 @@ export class PieChart extends React.Component<PieChartProps> { @observable _currSelected: any | undefined = undefined; private curSliceSelected: any = undefined; private sliceColors: any = {}; + @observable graphTitle: string = this.defaultGraphTitle; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates @computed get _piechartData() { @@ -67,7 +68,7 @@ export class PieChart extends React.Component<PieChartProps> { .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })) .sort((a, b) => (a.x < b.x ? -1 : 1)); } - @computed get graphTitle(){ + @computed get defaultGraphTitle(){ var ax0 = this.props.axes[0]; var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined; if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){ @@ -381,8 +382,20 @@ 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() { - console.log(this.sliceColors) var selected: string; if (this._currSelected){ selected = '{ '; @@ -396,10 +409,11 @@ export class PieChart extends React.Component<PieChartProps> { return ( this.props.axes.length >= 1 ? ( <div className="chart-container"> - <div className="graph-title"> {this.graphTitle} </div> + <div className="graph-title"> {this.editableTitle} </div> {selected != 'none' ? <div className={'selected-data'}> Selected: {selected} + <ColorPicker tooltip={'Change Slice Color'} type={Type.SEC} |