diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/PieChart.tsx')
-rw-r--r-- | src/client/views/nodes/DataVizBox/components/PieChart.tsx | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index f3a72a53b..8fdead3d7 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, observable, reaction } from "mobx"; import { LinkManager } from "../../../../util/LinkManager"; -import { DocCast, StrCast} from "../../../../../fields/Types"; +import { Cast, DocCast, StrCast} from "../../../../../fields/Types"; import { DocumentManager } from "../../../../util/DocumentManager"; import { Id } from "../../../../../fields/FieldSymbols"; import { DataVizBox } from "../DataVizBox"; @@ -14,6 +14,7 @@ import { List } from "../../../../../fields/List"; import './Chart.scss'; import { ColorPicker, EditableText, Size, Type } from "browndash-components"; import { FaFillDrip } from "react-icons/fa"; +import { listSpec } from "../../../../../fields/Schema"; export interface PieChartProps { rootDoc: Doc; @@ -180,7 +181,7 @@ export class PieChart extends React.Component<PieChartProps> { title: 'piechart doc selection' + this._currSelected, }); PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc); - anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined; + // anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined; return anchor; }; @@ -327,7 +328,10 @@ export class PieChart extends React.Component<PieChartProps> { trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1; } var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField]; - return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) + var sliceColor; + var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::')); + sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]}); + return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] }) .attr("class", selected? function(d) { return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice'; @@ -364,7 +368,10 @@ export class PieChart extends React.Component<PieChartProps> { @action changeSelectedColor = (color: string) => { this.curSliceSelected.attr("fill", color); var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') - this.props.layoutDoc['pieSliceColors-'+sliceName] = color; + + const sliceColors = Cast(this.props.layoutDoc.pieSliceColors, listSpec("string"), null); + sliceColors.map(each => { if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1) }); + sliceColors.push(StrCast(sliceName + '::' + color)); }; render() { @@ -373,6 +380,7 @@ export class PieChart extends React.Component<PieChartProps> { if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]; else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0]; if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle; + if (!this.props.layoutDoc.pieSliceColors) this.props.layoutDoc.pieSliceColors = new List<string>(); var selected: string; var curSelectedSliceName; if (this._currSelected){ @@ -385,6 +393,10 @@ export class PieChart extends React.Component<PieChartProps> { selected += ' }'; } else selected = 'none'; + var selectedSliceColor; + var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::')); + sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]}); + return ( this.props.axes.length >= 1 ? ( <div className="chart-container"> @@ -405,7 +417,7 @@ export class PieChart extends React.Component<PieChartProps> { tooltip={'Change Slice Color'} type={Type.SEC} icon={<FaFillDrip/>} - selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")} + selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")} setSelectedColor={color => this.changeSelectedColor(color)} size={Size.XSMALL} /> |