one column numerical pie histogram vs weighted slices checkbox

2 files changed, 27 insertions, 1 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 9359919c6..50dfe7f05 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -17,6 +17,18 @@
         margin-top: -10px;
         margin-bottom: -10px;
     }
+    .asHistogram-checkBox {
+        // display: flex;
+        // flex-direction: row;
+        align-items: left;
+        align-self: left;
+        align-content: left;
+        justify-content: flex-end;
+        float: left;
+        left: 0;
+        position: relative;
+        margin-bottom: -35px;
+    }
     .selected-data{
         align-items: center;
         text-align: center;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 4e23a114a..4bd476bf3 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -12,6 +12,7 @@ import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
 import { PinProps, PresBox } from '../../trails';
 import './Chart.scss';
+import { Checkbox } from '@material-ui/core';
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -51,7 +52,8 @@ 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() {
-        return !/\d/.test(this.props.records[0][this.props.axes[0]]);
+        if (this.props.layoutDoc.dataViz_pie_asHistogram==undefined) this.props.layoutDoc.dataViz_pie_asHistogram = false;
+        return !/\d/.test(this.props.records[0][this.props.axes[0]]) || this.props.layoutDoc.dataViz_pie_asHistogram;
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _pieChartData() {
@@ -321,6 +323,11 @@ export class PieChart extends React.Component<PieChartProps> {
         sliceColors.push(StrCast(sliceName + '::' + color));
     };
 
+    @action changeHistogramCheckBox = () => {
+        this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram 
+        this.drawChart(this._pieChartData, this.width, this.height)
+    }
+
     render() {
         var titleAccessor: any = '';
         if (this.props.axes.length == 2) titleAccessor = 'dataViz_pie_title' + this.props.axes[0] + '-' + this.props.axes[1];
@@ -360,6 +367,13 @@ export class PieChart extends React.Component<PieChartProps> {
                             fillWidth
                         />
                     </div>
+                    { (this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]))?
+                        <div className={"asHistogram-checkBox"} style={{width: this.props.width}}>
+                            <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this.props.layoutDoc.dataViz_pie_asHistogram as boolean} />
+                            Organize data as histogram
+                        </div> 
+                        : null
+                    }
                     <div ref={this._piechartRef} />
                     {selected != 'none' ? (
                         <div className={'selected-data'}>