diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components')
3 files changed, 75 insertions, 6 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 5945840b5..da5a274a5 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -23,9 +23,8 @@ .histogram-bar{ outline: thin solid black; - fill: #69b3a2; &.hover{ - fill: grey; + outline: 5px solid black; } } diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index fdde29c81..998636a42 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -14,6 +14,8 @@ 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 { FaFillDrip } from "react-icons/fa"; export interface HistogramProps { rootDoc: Doc; @@ -41,6 +43,9 @@ export class Histogram extends React.Component<HistogramProps> { private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency private maxBins = 15; // maximum number of bins that is readable on a normal sized doc @observable _currSelected: any | undefined = undefined; + private curBarSelected: any = undefined; + private barColors: any = {}; + private defaultBarColor: string = '#69b3a2'; // 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() { @@ -381,6 +386,11 @@ export class Histogram extends React.Component<HistogramProps> { elements[i].classList.remove('hover'); } if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover'); + if (sameAsCurrent!) this.curBarSelected = undefined; + else { + selected.attr('class', 'histogram-bar hover') + this.curBarSelected = selected; + } }); svg.on('click', onPointClick); @@ -415,6 +425,20 @@ export class Histogram extends React.Component<HistogramProps> { return height - y(d.length)}) .attr("width", eachRectWidth) .attr("class", 'histogram-bar') + .attr("fill", (d)=>{ return this.barColors[d[0]]? this.barColors[d[0]] : this.defaultBarColor}) + }; + + @action changeSelectedColor = (color: string) => { + 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; + else return true; + }) + defaultColorBars.attr("fill", color); + this.defaultBarColor = color; }; render() { @@ -433,7 +457,27 @@ export class Histogram extends React.Component<HistogramProps> { this.props.axes.length >= 1 ? ( <div className="chart-container" > <div className="graph-title"> {this.graphTitle} </div> - <div className={'selected-data'}> {`Selected: ${selected}`}</div> + <ColorPicker + tooltip={'Change Default Slice Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={this.defaultBarColor} + setSelectedColor={color => this.changeDefaultColor(color)} + size={Size.XSMALL} + /> + {selected != 'none' ? + <div className={'selected-data'}> + Selected: {selected} + <ColorPicker + tooltip={'Change Slice Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={this.curBarSelected.attr("fill")} + setSelectedColor={color => this.changeSelectedColor(color)} + size={Size.XSMALL} + /> + </div> + : null} <div ref={this._histogramRef} /> </div> ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index 27653b847..872bf9af1 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -14,6 +14,8 @@ 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 { FaFillDrip } from "react-icons/fa"; export interface PieChartProps { rootDoc: Doc; @@ -39,6 +41,8 @@ export class PieChart extends React.Component<PieChartProps> { private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined; private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios @observable _currSelected: any | undefined = undefined; + private curSliceSelected: any = undefined; + private sliceColors: any = {}; // 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() { @@ -332,7 +336,11 @@ export class PieChart extends React.Component<PieChartProps> { for (let i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } - if (!sameAsCurrent!) selected.attr('class', 'slice hover'); + if (sameAsCurrent!) this.curSliceSelected = undefined; + else { + selected.attr('class', 'slice hover') + this.curSliceSelected = selected; + } }); var arcs = g.selectAll("arc") @@ -340,7 +348,7 @@ export class PieChart extends React.Component<PieChartProps> { .enter() .append("g") arcs.append("path") - .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) + .attr("fill", (data, i)=>{ return this.sliceColors[data.data.valueOf()]? this.sliceColors[data.data.valueOf()] : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) .attr("class", 'slice') .attr("d", arc) .on('click', onPointClick) @@ -368,7 +376,13 @@ export class PieChart extends React.Component<PieChartProps> { }; + @action changeSelectedColor = (color: string) => { + this.curSliceSelected.attr("fill", color); + this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color; + }; + render() { + console.log(this.sliceColors) var selected: string; if (this._currSelected){ selected = '{ '; @@ -383,7 +397,19 @@ export class PieChart extends React.Component<PieChartProps> { this.props.axes.length >= 1 ? ( <div className="chart-container"> <div className="graph-title"> {this.graphTitle} </div> - <div className={'selected-data'}> {`Selected: ${selected}`}</div> + {selected != 'none' ? + <div className={'selected-data'}> + Selected: {selected} + <ColorPicker + tooltip={'Change Slice Color'} + type={Type.SEC} + icon={<FaFillDrip/>} + selectedColor={this.curSliceSelected.attr("fill")} + setSelectedColor={color => this.changeSelectedColor(color)} + size={Size.XSMALL} + /> + </div> + : null} <div ref={this._piechartRef} /> </div> ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span> |