Axis

src/api/api.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const client = axios.create({
 	baseURL: "https://peagle-backend.herokuapp.com"
-	//baseURL: "http://localhost:5000"
+	// baseURL: "http://localhost:5000"
 });
 
 const printOutput = true;

src/components/dashboards/Chart.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import {widgets, widgetDict} from './Constants';
 import EditModal from './EditModal';
-import { ResponsiveContainer } from 'recharts';
 import './Dashboards.css';
 import DraftWidgetModal from './DraftWidgetModal';
 

src/components/dashboards/EditModal.jsx

@@ -11,7 +11,7 @@ import DataDropdown from "../data/DataDropdown";
 import { useEffect } from 'react';
 
 const EditModal = props => {
-
+    console.log(props)
     const [title, setTitle] = useState(props.el.chartTitle);
     const [dataProps, setDataProps] = useState(props.el.dataProps || {});
     const [dataId, setDataId] = useState(props.el.data);
@@ -36,7 +36,11 @@ const EditModal = props => {
             .then(res => {
                 const axes = Object.keys(res.file_data[0]);
                 const newData = { data: res.file_data };
-                axes.forEach(axis => newData[axis] = axis);
+                //axis needs to be selectable by user..
+                newData['dataTitle'] = res.title;
+                //axes.forEach(axis => newData[axis] = axis);
+                newData['x'] = (axes.length > 0) ? axes[0] : 'x';
+                newData['y'] = (axes.length > 1) ? axes[1] : 'y';
                 setDataProps(newData)
                 setDataId(e)
             })
@@ -74,6 +78,8 @@ const EditModal = props => {
     const selectedWidget = widgetDict[props.el.widgetType];
     const WidgetRender = selectedWidget || <div />;
 
+    const singleAxis = ['Bubble chart', 'Simple pie chart', 'Active shape pie chart', 'Simple radial bar chart', 'Tree map']
+    const axisMap = singleAxis.includes(props.el.widgetType) ? ['y'] : ['x', 'y']
     const headers = ['h1', 'h2', 'h3']
     const axesConfig =
 			headers.length !== 0 ? (
@@ -83,10 +89,10 @@ const EditModal = props => {
           			</div>
 					<div style={{ margin: "1rem" }}>
 						<Row gutter={48}>
-							{["x", "y"].map((axis, index) => (
+							{axisMap.map((axis, index) => (
 								<React.Fragment key={index}>
 									<Col span={4} key={index}>
-										{axis}-axis
+										{singleAxis.includes(props.el.widgetType) ? 'Column': `${axis}-axis`}
                     					<br />
 										<Dropdown
 											overlay={
@@ -100,7 +106,7 @@ const EditModal = props => {
 											}
 										>
 											<Button>
-												{dataProps[axis]}
+												{dataProps[axis]? dataProps[axis]: axis}
                                                 <DownOutlined />
 											</Button>
 										</Dropdown>
@@ -138,7 +144,7 @@ const EditModal = props => {
                 <div>
                     Select data
                 </div>
-                <DataDropdown onSelectData={updateDataProps} currentData={props.el.dataProps ? props.el.dataProps.dataTitle: null}/>
+                <DataDropdown onSelectData={updateDataProps} currentData={dataProps ? dataProps.dataTitle: null}/>
                 {axesConfig}
             </Col>
             {
@@ -156,11 +162,6 @@ const EditModal = props => {
                 </Col>
             }
 
-
-
-
-
-
         </Modal>
 
     )

src/components/layout/SideBar.jsx

@@ -81,7 +81,7 @@ const SideBar = props => {
 				>
 					{
 						context.categories.map(cat => {
-							return <Menu.Item key={cat._id} className="menu-item" onClick={changeCategoryPage} style={subStyles}>{cat.name}</Menu.Item>
+							return <Menu.Item key={cat._id} className="menu-item" onClick={changeCategoryPage} style={subStyles} >{cat.name}</Menu.Item>
 						})
 					}
 					<CategoryModal style={subStyles}/>

src/components/widgetSelection/WidgetDataEntry.jsx

@@ -16,56 +16,25 @@ class WidgetDataEntry extends React.PureComponent {
 	}
 	state = {
 		selected: "",
-		fileList: [],
 		processedFile: { contents: "", headers: [] },
 		axes: {},
 		chartTitle: "",
 		rerenderWidget: false,
-		dataId: ""
+		dataId: "",
+		title: ""
 	};
 
 	static contextType = Context;
 
-	handleFileChange = info => {
-		this.setState({
-			fileList: info.fileList.slice(-1) // only allow upload of one file
-		});
-	};
-
-	// Adding file from file explorer
-	onFileChange({ file, onSuccess }) {
-		const reader = new FileReader();
-		reader.onload = () => {
-			const workBook = reader.result;
-			const wb = XLSX.read(workBook, { type: "binary" });
-			const wsname = wb.SheetNames[0];
-			const ws = wb.Sheets[wsname];
-			const jsonContentData = wb.SheetNames.reduce((initial, name) => {
-				// Gets all data
-				// ex. initial[name] = [{x: 1, y: 10, __rowNum__: 1}, {x: 2, y: 1, __rowNum__: 2}, ...]
-				initial[name] = XLSX.utils.sheet_to_json(ws, { defval: null });
-				return initial;
-			}, {});
-
-			// Only gets data for first workbook for now
-			const content = Object.values(jsonContentData)[0];
-			this.processData(content)
-
-			// Mark file finished reading
-			onSuccess("Done", file);
-		}
-		reader.readAsBinaryString(file);
-	}
-
-	processData = content => {
+	processData = (content, title) => {
 		// Only gets headers for first workbook for now (we can get headers simply from the content at any time)
 		let headers = Object.keys(content[0]);
 		this.setState({
 			processedFile: { content, headers },
 			axes: { x: headers[0], y: headers[1] || headers[0] },
 			chartTitle: ""
 		}); 
-		const dataProps = { data: content, ...this.state.axes, id: this.state.dataId };
+		const dataProps = { data: content, ...this.state.axes, id: this.state.dataId, dataTitle: title };
 		this.props.onReceiveDataProps(dataProps);
 	}
 
@@ -75,7 +44,7 @@ class WidgetDataEntry extends React.PureComponent {
 			.then(res => {
 				this.setId(id)
 				const content = Object.values(res.file_data);
-				this.processData(content)
+				this.processData(content, res.title);
 			});
 	}
 
@@ -91,6 +60,7 @@ class WidgetDataEntry extends React.PureComponent {
 		this.setState({ axes: { ...this.state.axes, [axis]: headers[key] } }, () => {
 			this.props.onReceiveDataProps({ data: content, ...this.state.axes, id: this.state.dataId });
 		});
+
 	};
 
 	handleChartTitleChange = e => {
@@ -110,6 +80,8 @@ class WidgetDataEntry extends React.PureComponent {
 			<Menu.Item key={index}>{header}</Menu.Item>
 		));
 
+		const singleAxis = ['Bubble chart', 'Simple pie chart', 'Active shape pie chart', 'Simple radial bar chart', 'Tree map']
+		const axisMap = singleAxis.includes(this.props.widget) ? ['y'] : ['x', 'y']
 		const axesConfig =
 			headers.length !== 0 ? (
 				<React.Fragment>
@@ -118,10 +90,10 @@ class WidgetDataEntry extends React.PureComponent {
 					</div>
 					<div style={{ margin: "1rem" }}>
 						<Row gutter={48}>
-							{["x", "y"].map((axis, index) => (
+							{axisMap.map((axis, index) => (
 								<React.Fragment key={index}>
 									<Col span={4} key={index}>
-										{axis}-axis
+									{singleAxis.includes(this.props.widget) ? 'Column': `${axis}-axis`}
 										<br />
 										<Dropdown
 											overlay={
@@ -164,7 +136,6 @@ class WidgetDataEntry extends React.PureComponent {
 
 
 		const dataProps = content ? { data: content, ...this.state.axes } : {};
-		console.log(dataProps)
 
 		return (
 			<div>
@@ -178,26 +149,11 @@ class WidgetDataEntry extends React.PureComponent {
 					<Col style={{ height: "20rem" }} span={24}>
 						<WidgetRender setTitle={this.props.setTitle} updateChart={this.props.updateChart} {...dataProps} {...(selectedWidget.value === "Text Box" ? { el: { chartTitle: this.props.title } } : {})} />
 					</Col>
-					{this.props.widget !== "Text Box" && <div><Col span={24}>
-						<div className="widget-header"> Upload your .XLSX or your .CSV file here.</div>
+					{this.props.widget !== "Text Box" && <div style={{width: '100%'}}><Col span={24}>
+						<div className="widget-header"> Select data for your chart.</div>
 
 						<DataDropdown onSelectData={this.onSelectData}/>
 
-						<div style={{ margin: "1rem" }}>
-							<Upload
-								accept=".csv, .xlsx"
-								multiple={false}
-								name="file"
-								fileList={this.state.fileList}
-								action="memory"
-								customRequest={this.onFileChange.bind(this)}
-								onChange={this.handleFileChange}
-							>
-								<Button>
-									<UploadOutlined /> Upload Data
-								</Button>
-							</Upload>
-						</div>
 					</Col>
 						<Col span={24}>{axesConfig}</Col>
 						<Col span={24}>{inputTitle}</Col>

src/components/widgets/DashedLineChart.jsx

@@ -30,9 +30,10 @@ class SimpleLineChart extends React.Component {
 
 		return (
 			<ResponsiveContainer width="100%" height="100%">
-				<LineChart data={this.props.data || data}>
-					<XAxis dataKey={this.props.x || "name"} />
-					<YAxis />
+				<LineChart data={this.props.data || data}
+					margin={{top: 5, right: 5, bottom: 35, left: 15 }}>
+					<XAxis dataKey={this.props.x || "name"} label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}} />
+					<YAxis label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}} />
 					<CartesianGrid strokeDasharray="3 3" />
 					<Tooltip />
 					<Legend />

src/components/widgets/JointLineScatterChart.jsx

@@ -20,19 +20,17 @@ export default class Example extends PureComponent {
 				<ScatterChart
 					width={500}
 					height={400}
-					margin={{
-						top: 20, right: 20, bottom: 20, left: 20,
-					}}
+					margin={{top: 5, right: 5, bottom: 35, left: 15 }}
 				>
 					<CartesianGrid />
 					<XAxis dataKey={this.props.x || "x"}
 						type="number"
-						name={this.props.xName || "stature"}
-						unit={this.props.xUnit || "cm"} />
+						label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}}
+						/>
 					<YAxis dataKey={this.props.y || "y"}
 						type="number"
-						name={this.props.yName || "weight"}
-						unit={this.props.yUnit || "kg"} />
+						label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}}
+						/>
 					<ZAxis type="number" range={[100]} />
 					<Tooltip cursor={{ strokeDasharray: '3 3' }} />
 					<Legend />

src/components/widgets/PosAndNegBarChart.jsx

@@ -37,10 +37,11 @@ export default class PosAndNegBarChart extends PureComponent {
 			<ResponsiveContainer width="100%" height="100%">
 				<BarChart
 					data={this.props.data || data}
+					margin={{top: 5, right: 5, bottom: 35, left: 15 }}
 				>
 					<CartesianGrid strokeDasharray="3 3" />
-					<XAxis dataKey={this.props.x || "name"} />
-					<YAxis />
+					<XAxis  dataKey={this.props.x || "name"} label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}} />
+					<YAxis label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}} />
 					<Tooltip />
 					<Legend />
 					<ReferenceLine y={0} stroke="#000" />

src/components/widgets/SimpleAreaChart.jsx

@@ -29,10 +29,11 @@ class SimpleAreaChart extends React.Component {
 
 		return (
 			<ResponsiveContainer width="100%" height="100%">
-				<AreaChart data={this.props.data || data}>
+				<AreaChart data={this.props.data || data}
+				margin={{top: 5, right: 5, bottom: 35, left: 15 }} >
 					<CartesianGrid strokeDasharray="3 3" />
-					<XAxis dataKey={this.props.x || "name"} />
-					<YAxis />
+					<XAxis  dataKey={this.props.x || "name"} label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}} />
+					<YAxis label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}} />
 					<Tooltip />
 					<Area
 						type="monotone"

src/components/widgets/SimpleBarChart.jsx

@@ -32,11 +32,11 @@ class SimpleBarChart extends React.Component {
 			<ResponsiveContainer width="100%" height="100%">
 				<BarChart 
 					data={this.props.data || data}
-					margin={{top: 5, right: 5, bottom: 5, left: -5 }}
+					margin={{top: 5, right: 5, bottom: 35, left: 15 }}
 				>
 					<CartesianGrid strokeDasharray="3 3" />
-					<XAxis dataKey={this.props.x || "name"} />
-					<YAxis />
+					<XAxis  dataKey={this.props.x || "name"} label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}} />
+					<YAxis label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}} />
 					<Tooltip />
 					<Legend />
 					<Bar dataKey={this.props.y || "pv"} fill={primary} />

src/components/widgets/SimpleLineChart.jsx

@@ -22,20 +22,22 @@ const data = [
 ];
 
 class SimpleLineChart extends React.Component {
+
+
 	static contextType = Context;
 
 	render() {
 		const { context } = this.context;
 		const { secondary } = context;
-
+		
 		return (
 			<ResponsiveContainer width="100%" height="100%">
 				<LineChart 
 					data={this.props.data || data}
-					margin={{top: 5, right: 5, bottom: 5, left: -5 }}
+					margin={{top: 5, right: 5, bottom: 35, left: 15 }}
 				>
-					<XAxis dataKey={this.props.x || "name"} />
-					<YAxis />
+					<XAxis  dataKey={this.props.x || "name"} label={{ value: `${this.props.x || "name"}`, position: 'bottom', offset:25}} />
+					<YAxis label={{ value: `${this.props.y || "name"}`, angle: -90, position: 'left'}} />
 					<CartesianGrid strokeDasharray="3 3" />
 					<Tooltip />
 					<Legend />

src/components/widgets/SimplePieChart.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts";
 import { Context } from "../../context/Context";
 
 const data = [
@@ -46,6 +46,7 @@ class SimplePieChart extends React.Component {
 		return (
 			<ResponsiveContainer width="100%" height="100%">
 				<PieChart>
+					<Legend verticalAlign="top" height={36}/>
 					<Pie
 						data={this.props.data || data}
 						labelLine={false}
@@ -60,6 +61,7 @@ class SimplePieChart extends React.Component {
 							/>
 						))}
 					</Pie>
+
 				</PieChart>
 			</ResponsiveContainer>
 		);

src/components/widgets/SimpleRadialBarChart.jsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { RadialBarChart, RadialBar, ResponsiveContainer } from 'recharts';
+import { RadialBarChart, RadialBar, ResponsiveContainer, Legend } from 'recharts';
 import { Context } from "../../context/Context";
 
 const data = [
@@ -30,7 +30,9 @@ export default class SimpleRadialBarChart extends PureComponent {
 		return (
 			<ResponsiveContainer width="100%" height="100%">
 				<RadialBarChart data={this.props.data || data}>
+					{/* <Legend verticalAlign="top" height={36}/> */}
 					<RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey={this.props.x || "uv"} fill={primary} />
+					{/* <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey={this.props.x || "uv"}  /> */}
 				</RadialBarChart>
 			</ResponsiveContainer>
 		);