histogram reorganized to accommodate more data types

4 files changed, 86 insertions, 65 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5ef033e35..426eaa14d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1143,7 +1143,7 @@ export namespace Docs {
         }
 
         export function DataVizDocument(url: string, options?: DocumentOptions, overwriteDoc?: Doc) {
-            return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options }, undefined, undefined, undefined, overwriteDoc);
+            return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', type: 'dataviz',  ...options }, undefined, undefined, undefined, overwriteDoc);
         }
 
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c07c85f7e..5fbe92563 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -38,6 +38,9 @@ export class Histogram extends React.Component<HistogramProps> {
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private numericalData: boolean = false;
+    private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
+    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;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
@@ -45,7 +48,7 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
-            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
+            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalXData = true }
             return this.props.pairs
                 ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
@@ -53,7 +56,8 @@ export class Histogram extends React.Component<HistogramProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;}
+        if (/\d/.test(this.props.pairs[0][ax1]) && this.props.pairs.length < this.maxBins) { this.numericalYData = true;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -79,7 +83,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .lastElement();
     }
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
-        if (this.numericalData){
+        if (this.numericalXData){
             const data = this.data(this._histogramData);
             return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
         }
@@ -182,7 +186,7 @@ export class Histogram extends React.Component<HistogramProps> {
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'line doc selection' + this._currSelected?.x,
+            title: 'histogram doc selection' + this._currSelected?.x,
         });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
         anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
@@ -227,9 +231,9 @@ export class Histogram extends React.Component<HistogramProps> {
             })
             return valid;
         })
-        var field = dataSet[0]? Object.keys(dataSet[0])[0]: undefined;
+        var field = dataSet[0]? Object.keys(dataSet[0])[0] : undefined;
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '') }
+            if (this.numericalXData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
             return d[field!]
         })
         return data;
@@ -239,26 +243,43 @@ export class Histogram extends React.Component<HistogramProps> {
         d3.select(this._histogramRef.current).select('svg').remove();
         d3.select(this._histogramRef.current).select('.tooltip').remove();
 
-        var field = Object.keys(dataSet[0])[0]
-        const data = this.data(dataSet);
+        var data = this.data(dataSet);
         
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = uniqueArr.length
-        var startingPoint = 0;
-        var endingPoint = numBins;
-        var translateXAxis = 0;
-        if (this.numericalData) {
-            if (Number.isInteger(this.rangeVals.xMin!)){
-                numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+        var numBins = this.numericalXData? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
+        if (numBins>this.maxBins) numBins = this.maxBins;
+        var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
+        var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
+        var xAxisTitle = Object.keys(dataSet[0])[0]
+        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
+        var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
+            var valid = true;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        });
+        if (!this.numericalXData) {
+            var histStringDataSet: { frequency: any, label: any }[] = [];
+            if (this.numericalYData){
+                for (let i=0; i<dataSet.length; i++){
+                    histStringDataSet.push({frequency: dataSet[i][yAxisTitle], label: dataSet[i][xAxisTitle]})
+                }
+            }
+            else{
+                for (let i=0; i<uniqueArr.length; i++){
+                    histStringDataSet.push({frequency: 0, label: uniqueArr[i]})
+                }
+                for (let i=0; i<data.length; i++){
+                    let sliceData = histStringDataSet.filter(each => each.label==data[i])
+                    sliceData[0].frequency = sliceData[0].frequency + 1;
+                }
             }
-            startingPoint = this.rangeVals.xMin!;
-            endingPoint = this.rangeVals.xMax!;
-            if (numBins>15) numBins = 15;
-            else translateXAxis = width/(numBins+1) / 2;
+            histDataSet = histStringDataSet
         }
-        else translateXAxis = width/(numBins+1) / 2;
 
-        const svg = (this._histogramSvg = d3
+        var svg = (this._histogramSvg = d3
             .select(this._histogramRef.current)
             .append("svg")
                 .attr("class", "graph")
@@ -268,32 +289,24 @@ export class Histogram extends React.Component<HistogramProps> {
                 .attr("transform",
                       "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
 
-        var x: any;
-        if (this.numericalData){
-            x = d3.scaleLinear()
-                .domain([startingPoint!, endingPoint!])
+        var x = d3.scaleLinear()
+                .domain(this.numericalXData? [startingPoint!, endingPoint!] : [0, numBins])
                 .range([0, width ]);
-        }
-        else {
-            x = d3.scaleLinear()
-                .domain([0, numBins])
-                .range([0, width]);
-        }
-        
         var histogram = d3.histogram()
             .value(function(d) {return d})
             .domain([startingPoint!, endingPoint!])
             .thresholds(x.ticks(numBins-1))
         var bins = histogram(data)
         var eachRectWidth = width/(bins.length)
-        var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!)
+        var graphStartingPoint = bins[0].x1? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint])
              .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
         var xAxis;
 
-        if (!this.numericalData) { // if the data is strings rather than numbers
-            uniqueArr.sort()
+        if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
+            // uniqueArr.sort()
+            histDataSet.sort()
             for (let i=0; i<data.length; i++){
                 var index = 0
                 for (let j=0; j<uniqueArr.length; j++){
@@ -303,23 +316,27 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 bins[index].push(data[i])
             }
+            bins.pop();
+            eachRectWidth = width/(bins.length)
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
-                .ticks(numBins-1)
+                .ticks(bins.length-1)
                 .tickFormat( i => uniqueArr[i])
                 .tickPadding(10)
+            x.range([0, width-eachRectWidth])
+            x.domain([0, bins.length-1])
             translateXAxis = eachRectWidth / 2;
         }
         else {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-
-        const maxFrequency = d3.max(bins, function(d) { return d.length; })
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) {return d.frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+                    : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
             .range([height, 0]);
-            y.domain([0, maxFrequency!]);
+            y.domain([0, +maxFrequency!]);
         var yAxis = d3.axisLeft(y)
             .ticks(maxFrequency!)
         svg.append("g")
@@ -337,16 +354,14 @@ export class Histogram extends React.Component<HistogramProps> {
                 var left = this.numericalData? d.x0-1: d.x0;
                 var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
                 if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
-                    // var showSelected = !this.numericalData? dataSet[index] : this.props.pairs[index];
-                    var showSelected = dataSet[index]
-                    showSelected['frequency'] = d.length;
-                    console.log('showSelected', showSelected)
-                    console.log('current', this._currSelected)
+                    var showSelected = histDataSet[index]
+                    var selectedDisplay = {[xAxisTitle]: showSelected.label, [yAxisTitle]: showSelected.frequency}
+                    // showSelected['frequency'] = d.length;
                     sameAsCurrent = this._currSelected? 
-                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
-                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
+                      && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
-                    this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this._currSelected = sameAsCurrent? undefined: selectedDisplay;
                     return true
                 }
                 return false;
@@ -358,30 +373,37 @@ export class Histogram extends React.Component<HistogramProps> {
             }
             if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
         });
-
         svg.on('click', onPointClick);
 
-        // axis titles
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
-            .text(field);
+            .text(xAxisTitle);
         svg.append("text")
-            .attr("transform", "rotate(-90)")
+            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
             .attr("x", -(height/2))
             .attr("y", -20)
             .style("text-anchor", "middle")
-            .text('frequency');
-
+            .text(yAxisTitle);
         d3.format('.0f')
-
         svg.selectAll("rect")
             .data(bins)
             .enter()
             .append("rect")
-              .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
+              .attr("transform", this.numericalYData?
+                    function (d) {
+                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
+                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        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: { label: number; }) => {return data.label==d[0]}) 
+                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        return height-y(length)}
+                    : function(d) { return height - y(d.length)})
               .attr("width", eachRectWidth)
-              .attr("height", function(d) { return height - y(d.length); })
               .attr("class", 'histogram-bar')
     };
 
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 637ed0ead..91baf095d 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -310,7 +310,7 @@ export class LineChart extends React.Component<LineChartProps> {
             .style("text-anchor", "middle")
             .text(this.props.axes[0]);
         svg.append("text")
-            .attr("transform", "rotate(-90)")
+            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
             .attr("x", -(height/2))
             .attr("y", -20)
             .attr("height", 20)
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 37c435411..fc24e5821 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -182,7 +182,7 @@ export class PieChart extends React.Component<PieChartProps> {
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'line doc selection' + this._currSelected?.x,
+            title: 'piechart doc selection' + this._currSelected?.x,
         });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
         anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
@@ -260,12 +260,6 @@ export class PieChart extends React.Component<PieChartProps> {
             })
             return valid;
         });
-
-        var pie = d3.pie();
-        var arc = d3.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
-        
         if (this.byCategory){
             let uniqueCategories = [...new Set(data)]
             var pieStringDataSet: { frequency: any, label: any }[] = [];
@@ -282,6 +276,11 @@ export class PieChart extends React.Component<PieChartProps> {
         var trackDuplicates : {[key: string]: any} = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
 
+        var pie = d3.pie();
+        var arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+
         const onPointClick = action((e: any) => {
             // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
             const pointer = d3.pointer(e);