From 7da381226f86467729c4fcad685dac17e30c9bf9 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Mon, 31 Jul 2023 13:47:28 -0400 Subject: color ui fix + editable titles --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 1 - .../views/nodes/DataVizBox/components/Chart.scss | 14 +++++++- .../nodes/DataVizBox/components/Histogram.tsx | 41 ++++++++++++++++------ .../views/nodes/DataVizBox/components/PieChart.tsx | 22 +++++++++--- 4 files changed, 61 insertions(+), 17 deletions(-) (limited to 'src') 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() { 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 ; } @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 { 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 { .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 { this.curBarSelected.attr("fill", color); this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\ { 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 { this.defaultBarColor = color; }; + @computed get editableTitle() { + const title = this.graphTitle; + return ( + 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 { return ( this.props.axes.length >= 1 ? (
-
{this.graphTitle}
- } - selectedColor={this.defaultBarColor} - setSelectedColor={color => this.changeDefaultColor(color)} - size={Size.XSMALL} - /> +
+ {this.editableTitle} +     + } + selectedColor={this.defaultBarColor} + setSelectedColor={color => this.changeDefaultColor(color)} + size={Size.XSMALL} + /> +
{selected != 'none' ?
Selected: {selected} +     { @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 { .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 { this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\ 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 { return ( this.props.axes.length >= 1 ? (
-
{this.graphTitle}
+
{this.editableTitle}
{selected != 'none' ?
Selected: {selected} +