added new output component: area graph

src/components/outputcomponents/AreaGraphOutput/AreaGraphOutput.js

@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+import SingleOutput from './SingleOutput';
+
+const GraphOutput = ({ headers, calling_context, data }) => {
+  return (
+    <div>
+      <div key={Math.random()} className="six wide stackable stretched grid container">
+        <br /><br />
+        {headers.map((header, index) =>
+          [<SingleOutput
+              key={Math.random()}
+              calling_context={calling_context}
+              index={index}
+              header={header}
+              data={data[index]}
+           />,
+            <br key={Math.random()} />,
+            <br key={Math.random()} />]
+        )}
+      </div>
+    </div>
+  );
+};
+
+GraphOutput.propTypes = {
+  headers: PropTypes.array.isRequired,
+  calling_context: PropTypes.string.isRequired,
+  data: PropTypes.array
+};
+
+export default GraphOutput;

src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputPreview.js

@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import AreaGraphOutput from './AreaGraphOutput';
+
+
+class AreaGraphOutputPreview extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      headers: props.functions.getHeaders(),
+      open: true
+    };
+    this.hidePreviewDialog = props.functions.hidePreviewDialog;
+    this.handleOk = this.handleOk.bind(this);
+  }
+
+
+  handleOk() {
+    this.hidePreviewDialog();
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        key={0}
+        label="Ok"
+        primary
+        keyboardFocused
+        onTouchTap={this.handleOk}
+      />
+    ];
+    return (<Dialog
+      title="Preview Area Graph Output Component"
+      actions={actions}
+      modal
+      autoScrollBodyContent
+      open={this.state.open}
+            >
+      <AreaGraphOutput
+        headers={this.state.headers}
+        calling_context="demo"
+        data={
+          new Array(this.state.headers.length).fill(
+            [
+              { x: 1, y: 2 },
+              { x: 2, y: 5 },
+              { x: 3, y: 8 },
+              { x: 4, y: 9 },
+              { x: 5, y: 13 }
+            ]
+          )
+        }
+      />
+    </Dialog>);
+  }
+}
+
+AreaGraphOutputPreview.propTypes = {
+  functions: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputPreview;

src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseCard.js

@@ -0,0 +1,158 @@
+import React, { PropTypes } from 'react';
+import { browserHistory } from 'react-router';
+import CustomCard from '../../stateless/cards';
+import AreaGraphOutputShowcaseModifyDialog from './AreaGraphOutputShowcaseModifyDialog';
+import AreaGraphOutputPreview from './AreaGraphOutputPreview';
+import toastr from 'toastr';
+
+class AreaGraphOutputShowcaseCard extends React.Component {
+  constructor(props) {
+    super(props);
+    let initHeaders = [];
+    if (props.demoProps.outputComponentDemoModel.baseComponentId === 6) {
+      initHeaders = props.demoProps.outputComponentDemoModel.props;
+      this.selected = props.demoProps.outputComponentDemoModel.baseComponentId === props.demoProps.selected;
+    }
+    this.state = {
+      headers: initHeaders,
+      modifyDialogDisplay: false,
+      previewDialogDisplay: false
+    };
+    this.demoModel = props.demoProps.demoModel;
+    this.user = props.demoProps.user;
+    this.outputComponentDemoModel = props.demoProps.outputComponentDemoModel;
+    this.outputComponentDemoModelActions = props.demoProps.outputComponentDemoModelActions;
+    this.forwardAddress = props.demoProps.forwardAddress;
+    this.forwardAddressAlternate = props.demoProps.forwardAddressAlternate;
+    this.showModifyDialog = this.showModifyDialog.bind(this);
+    this.getHeaderRealLength = this.getHeaderRealLength.bind(this);
+    this.showPreviewDialog = this.showPreviewDialog.bind(this);
+    this.updateOutputComponentModel = this.updateOutputComponentModel.bind(this);
+    this.updateHeaders = this.updateHeaders.bind(this);
+    this.getHeaders = this.getHeaders.bind(this);
+    this.hideModifyDialog = this.hideModifyDialog.bind(this);
+    this.hidePreviewDialog = this.hidePreviewDialog.bind(this);
+  }
+
+  showModifyDialog() {
+    this.setState({ modifyDialogDisplay: true });
+  }
+
+  hideModifyDialog() {
+    this.setState({ modifyDialogDisplay: false });
+  }
+
+  showPreviewDialog() {
+    this.setState({ previewDialogDisplay: true });
+  }
+
+  hidePreviewDialog() {
+    this.setState({ previewDialogDisplay: false });
+  }
+
+  updateOutputComponentModel() {
+    if (Object.keys(this.demoModel).length === 0) {
+      toastr.error('Registration info not found! Register again');
+      browserHistory.push('/');
+    } else {
+      let propsToStore = [];
+      this.state.headers.map((header) => {
+        propsToStore.push(header);
+      });
+      this.outputComponentDemoModelActions.updateOutputComponentModel({
+        id: this.demoModel.id,
+        userid: this.user.id,
+        baseComponentId: 6,
+        props: propsToStore
+      }).then(() => {
+        if (this.props.demoProps.params.type === 'modify') {
+          browserHistory.push('/ngh/user');
+        } else {
+          if (this.forwardAddressAlternate) {
+            if (this.demoModel.status === 'input') {
+              browserHistory.push(this.forwardAddress);
+            } else if (this.demoModel.status === 'demo') {
+              browserHistory.push(this.forwardAddressAlternate);
+            }
+          } else {
+            browserHistory.push(this.forwardAddress);
+          }
+        }
+      });
+    }
+  }
+
+  updateHeaders(data) {
+    let dataToUpdate = [];
+    data.map((value) => {
+      dataToUpdate.push(value);
+    });
+    this.setState({ headers: dataToUpdate });
+  }
+
+  getHeaderRealLength() {
+    let counter = 0;
+    this.state.headers.map(() => {
+      counter += 1;
+    });
+    return counter;
+  }
+
+  getHeaders() {
+    return this.state.headers;
+  }
+
+  render() {
+    return (
+      <div>
+        <CustomCard
+          header="Area Graph Output"
+          width="five"
+          context="selection"
+          selected={this.selected}
+          centeredParent
+          centeredSegment
+          displayData = {[
+            `Number of Outputs: ${this.getHeaderRealLength()}`
+          ]}
+          buttonData = {[
+            {
+              label: 'Modify',
+              onDeployClick: () => this.showModifyDialog()
+            },
+            {
+              label: 'Preview',
+              onDeployClick: () => this.showPreviewDialog()
+            },
+            {
+              label: 'Save',
+              onDeployClick: () => this.updateOutputComponentModel()
+            }
+          ]}
+        />
+        {this.state.modifyDialogDisplay && <AreaGraphOutputShowcaseModifyDialog
+          functions={{
+            updateHeaders: this.updateHeaders,
+            hideModifyDialog: this.hideModifyDialog,
+            getHeaders: this.getHeaders
+          }}
+                                           />}
+
+        {this.state.previewDialogDisplay && <AreaGraphOutputPreview
+          functions={{
+            getHeaders: this.getHeaders,
+            hidePreviewDialog: this.hidePreviewDialog
+          }}
+                                            />}
+      </div>
+
+    );
+  }
+}
+
+AreaGraphOutputShowcaseCard.propTypes = {
+  demoProps: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputShowcaseCard;
+

src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseModifyDialog.js

@@ -0,0 +1,135 @@
+import React, { PropTypes } from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import OverloadedAreaGraphHeader from './OverloadedAreaGraphHeader';
+
+class AreaGraphOutputShowcaseModifyDialog extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      textFields: this.makeTextFieldsFromParentHeaders(props.functions.getHeaders()),
+      headers: props.functions.getHeaders(),
+      open: true
+    };
+    this.updateHeadersInParent = props.functions.updateHeaders;
+    this.getLabelsFromParent = props.functions.getLabels;
+    this.hideModifyDialog = props.functions.hideModifyDialog;
+    this.makeTextFieldsFromParentHeaders = this.makeTextFieldsFromParentHeaders.bind(this);
+    this.addLocalHeaders = this.addLocalHeaders.bind(this);
+    this.deleteLocalHeaders = this.deleteLocalHeaders.bind(this);
+    this.addMoreTextFields = this.addMoreTextFields.bind(this);
+    this.getNewField = this.getNewField.bind(this);
+    this.handleOk = this.handleOk.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  makeTextFieldsFromParentHeaders(allHeaders) {
+    let tempText = [];
+    allHeaders.map((header, index) => {
+      let currentIndex = allHeaders.findIndex((x) => x === header);
+      tempText[currentIndex] = (
+        <div>
+          <TextField
+            key={Math.random()}
+            hintText="Header"
+            defaultValue={header}
+            onChange={(e) => this.addLocalHeaders(currentIndex, e.target.value)}
+          />
+          &nbsp;&nbsp;&nbsp;
+          <RaisedButton
+            label="Delete"
+            primary
+            onMouseDown={() => this.deleteLocalHeaders(currentIndex)}
+          />
+        </div>
+      );
+    });
+    return tempText;
+  }
+
+  addLocalHeaders(index, data) {
+    let temptext = Object.assign([], this.state.headers);
+    temptext[index] = data;
+    this.setState({ headers: temptext });
+  }
+
+  deleteLocalHeaders(elementId) {
+    let temptext = Object.assign([], this.state.headers);
+    let temptextfield = Object.assign([], this.state.textFields);
+    delete temptext[elementId];
+    delete temptextfield[elementId];
+    this.setState({ headers: temptext });
+    this.setState({ textFields: temptextfield });
+  }
+
+  getNewField() {
+    return (
+      <OverloadedAreaGraphHeader
+        data={{
+          headerLength: this.state.headers.length,
+          addLocalHeaders: this.addLocalHeaders,
+          deleteLocalHeaders: this.deleteLocalHeaders
+        }}
+      />
+    );
+  }
+
+  addMoreTextFields() {
+    let tempstate = Object.assign([], this.state.textFields);
+    tempstate.push(this.getNewField());
+    this.setState({ textFields: tempstate });
+  }
+
+  handleOk() {
+    this.hideModifyDialog();
+    this.updateHeadersInParent(this.state.headers);
+  }
+
+  handleCancel() {
+    this.hideModifyDialog();
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        key={0}
+        label="Ok"
+        primary
+        keyboardFocused
+        onTouchTap={this.handleOk}
+      />,
+      <FlatButton
+        key={1}
+        label="Cancel"
+        primary
+        onTouchTap={this.handleCancel}
+      />
+    ];
+    return (
+      <Dialog
+        title="Modify Area Graph Output Component"
+        actions={actions}
+        modal
+        autoScrollBodyContent
+        open={this.state.open}
+      >
+        {this.state.textFields.map((field) =>
+          [field, <br key={Math.random()} />]
+        )}
+        <RaisedButton key={Math.random()}
+                      label="Add Output Field"
+                      primary
+                      onClick={() => this.addMoreTextFields()}
+                      style={{ marginTop: '2%' }}
+        />
+      </Dialog>);
+  }
+}
+
+AreaGraphOutputShowcaseModifyDialog.propTypes = {
+  functions: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputShowcaseModifyDialog;