From 481a847b1074c9544e947e409b96778ac4d4f852 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 9 Aug 2023 15:24:03 -0400
Subject: numerical y axis data fix

---
 .../views/nodes/DataVizBox/components/Histogram.tsx | 11 ++++-------
 .../views/nodes/DataVizBox/components/PieChart.tsx  | 21 +++++++++------------
 .../views/nodes/DataVizBox/components/TableBox.tsx  |  4 ++--
 3 files changed, 15 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e04d37094..ed663006f 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,13 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
+import { Doc, StrListCast } from "../../../../../fields/Doc";
 import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
 import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
-import { DocumentManager } from "../../../../util/DocumentManager";
-import { Id } from "../../../../../fields/FieldSymbols";
-import { DataVizBox } from "../DataVizBox";
 import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
@@ -299,7 +296,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
         // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
-            return Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))})
+            return d[yAxisTitle]? Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) : 0})
                     : d3.max(bins, function(d) { return d.length; })
         var y = d3.scaleLinear()
             .range([height, 0]);
@@ -359,14 +356,14 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("transform", this.numericalYData?
                     function (d) {
                         var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
-                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var length = eachData.length? eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
                         return "translate(" + x(d.x0!) + "," + y(length) + ")";
                     }
                     : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("height", this.numericalYData? 
                     function(d) {
                         var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
-                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var length = eachData.length? eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
                         return height-y(length)}
                     : function(d) { 
                         return height - y(d.length)})
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 133e3a33a..6581b6b75 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -1,13 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
+import { Doc, StrListCast } from "../../../../../fields/Doc";
 import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
 import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
-import { DocumentManager } from "../../../../util/DocumentManager";
-import { Id } from "../../../../../fields/FieldSymbols";
-import { DataVizBox } from "../DataVizBox";
 import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
@@ -256,7 +253,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .attr("fill", (d, i)=>{ 
                 var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
                     try {
-                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                        return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))==Number(d.data)
                     } catch (error) {
                         return each[percentField]==d.data
                     }})
@@ -266,10 +263,12 @@ export class PieChart extends React.Component<PieChartProps> {
                     dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
-                var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
                 var sliceColor;
-                var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
-                sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+                if (dataPoint){
+                    var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
+                    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%(d3.schemeSet3.length)] })
                 .attr("class", selected? 
                 function(d) {
@@ -292,7 +291,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .text(function(d){ 
                 var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
                     try {
-                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                        return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))==Number(d.data)
                     } catch (error) {
                         return each[percentField]==d.data
                     }})
@@ -302,9 +301,7 @@ export class PieChart extends React.Component<PieChartProps> {
                     dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
-                return dataPoint[percentField]! 
-                + (!descriptionField? '' : (' - ' + dataPoint[descriptionField]))!})
-
+                return dataPoint? dataPoint[percentField]! + (!descriptionField? '' : (' - ' + dataPoint[descriptionField]))! : ''})
     };
 
     @action changeSelectedColor = (color: string) => {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 277ee83ec..f80cbdf99 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -123,10 +123,10 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                             const newAxes = this.props.axes;
                                                             if (newAxes.includes(col)) {
                                                                 newAxes.splice(newAxes.indexOf(col), 1);
-                                                            } else if (newAxes.length >= 1) {
+                                                            } else if (newAxes.length > 1) {
                                                                 newAxes[1] = col;
                                                             } else {
-                                                                newAxes[0] = col;
+                                                                newAxes.push(col);
                                                             }
                                                             this.props.selectAxes(newAxes);
                                                         })
-- 
cgit v1.2.3-70-g09d2