2 column pie charts, click on numerical slices

1 files changed, 13 insertions, 15 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index b3e604483..8be8b7c7c 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -52,13 +52,10 @@ export class PieChart extends React.Component<PieChartProps> {
     // organized by specified number percentages/ratios if one column is selected and it contains numbers
     // otherwise, assume data is organized by categories
     @computed get byCategory() {
-        if (this.props.axes.length === 1) {
-            return !/\d/.test(this.props.records[0][this.props.axes[0]]);
-        }
-        return true;
+        return !/\d/.test(this.props.records[0][this.props.axes[0]]);
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
-    @computed get _piechartData() {
+    @computed get _pieChartData() {
         if (this.props.axes.length < 1) return [];
 
         const ax0 = this.props.axes[0];
@@ -90,7 +87,7 @@ export class PieChart extends React.Component<PieChartProps> {
     }
     componentDidMount = () => {
         this._disposers.chartData = reaction(
-            () => ({ dataSet: this._piechartData, w: this.width, h: this.height }),
+            () => ({ dataSet: this._pieChartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
                 if (dataSet!.length > 0) {
                     this.drawChart(dataSet, w, h);
@@ -163,7 +160,7 @@ export class PieChart extends React.Component<PieChartProps> {
             }
             if (lineCrossCount % 2 != 0) {
                 // inside the slice of it crosses an odd number of edges
-                var showSelected = this.byCategory ? pieDataSet[index] : this._piechartData[index];
+                var showSelected = this.byCategory ? pieDataSet[index] : this._pieChartData[index];
                 if (changeSelectedVariables) {
                     // for when a bar is selected - not just hovered over
                     sameAsCurrent = this._currSelected
@@ -267,9 +264,10 @@ export class PieChart extends React.Component<PieChartProps> {
                 }
                 var sliceColor;
                 if (dataPoint) {
-                    var accessByName = StrCast(dataPoint[this.props.axes[0]]).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                    const sliceTitle = dataPoint[this.props.axes[0]];
+                    const accessByName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
                     var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
-                    sliceColors.forEach(each => each[0] == StrCast(accessByName) && (sliceColor = each[1]));
+                    sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1]));
                 }
                 return sliceColor ? StrCast(sliceColor) : d3.schemeSet3[i] ? d3.schemeSet3[i] : d3.schemeSet3[i % d3.schemeSet3.length];
             })
@@ -318,7 +316,8 @@ 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, '');
+        const sliceTitle = this._currSelected[this.props.axes[0]];
+        const sliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
 
         const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
         sliceColors.map(each => {
@@ -336,7 +335,8 @@ export class PieChart extends React.Component<PieChartProps> {
         var selected: string;
         var curSelectedSliceName = '';
         if (this._currSelected) {
-            curSelectedSliceName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+            const sliceTitle = this._currSelected[this.props.axes[0]];
+            curSelectedSliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key != '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
@@ -346,11 +346,9 @@ export class PieChart extends React.Component<PieChartProps> {
         } else selected = 'none';
         var selectedSliceColor;
         var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
-        sliceColors.map(each => {
-            if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
-        });
+        sliceColors.forEach(each => { if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1] });
 
-        if (this._piechartData.length > 0 || !this.parentViz) {
+        if (this._pieChartData.length > 0 || !this.parentViz) {
             return this.props.axes.length >= 1 ? (
                 <div className="chart-container">
                     <div className="graph-title">