aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/PieChart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/PieChart.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/PieChart.tsx22
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}
/>