diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Chart.scss | 12 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/PieChart.tsx | 16 |
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'}> |