Issue 207 build faq

front-end/README.md

@@ -71,6 +71,47 @@ export default function () {
   );
 }
 ```
+## Week 4
+
+### Get started with real data
+
+#### Take a look first
+
+If the Mock JS Data doesn't seem to be enough, or you simply want to see how your graph might look in application, it is a good idea to get started with the real data and further develop your design 👻
+
+Prior to joining the team, all of you already had access to the [product data](https://drive.google.com/drive/u/0/folders/1SWSNZYz0JwZycDfM1-fB48ic513riQrU) folder. Inside, you can find csv files of nyc census data. Take a look at the files and see if you can figure out what is the difference between `coded` and `decoded` data.
+
+![product-data](./images/product-data.png)
+
+To better understand the big data in front of you, open [variable codebook](https://drive.google.com/drive/u/0/folders/1SWSNZYz0JwZycDfM1-fB48ic513riQrU) file. The codebook walks you through each variables in the datasheet. If you want to make notes, **make a copy** of the codebook and **name** it for yourself. 
+
+For example, I made a copy and color coded the `numerical` and `categorical` variable for further use. 
+
+![test-codebook](./images/test-codebook.png)
+
+***
+
+#### import (part of) the real data
+
+Firstly, the real data is _huge_. A simple way to just give the real data a try is to convert part of the **csv** data to **json**. You can easily do that with online converter. I use [this](https://csvjson.com/) online converter to convert 2000 datapoints into json. 
+
+![online-converter](./images/online-converter.png)
+
+Then, create a new file in  `front-end/src/utils/`, e.g.  `../utils/MockData-Winny.js`. Refer to `MockData.js` to structure your test data as below. 
+
+```javascript
+const data = [...
+];
+
+export { data };
+```
+
+Don't forget to import it in `GraphDisplay.js` file, and done!
+
+```javascript
+import { data } from '../utils/MockData-Winny.js';
+```
+
 
 ## Resources
 

front-end/src/components/FaqTabs.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+const FaqTabs = ({ children }) => {
+  const [activeTab, setActiveTab] = useState(children[0].props.label);
+
+  const handleTabClick = (e, newActiveTab) => {
+    e.preventDefault();
+    setActiveTab(newActiveTab);
+  };
+
+  return (
+    <div className='flex flex-row w-full'>
+      <ul className='w-1/4 h-3/4 bg-gray-100 m-0 min-w-max list-none text-xl'>
+        {children.map((tab) => {
+          const tabName = tab.props.label;
+
+          return (
+            <li
+              key={tabName}
+              // className={tabName === activeTab ? styles.current : ''}
+              className={`
+              ${
+                tabName === activeTab
+                  ? 'text-green-600 font-bold'
+                  : ''
+              }
+              px-12 py-10`}
+            >
+              <button onClick={(e) => handleTabClick(e, tabName)}>
+                {tabName}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {/* <div className={styles.content}>{children}</div> */}
+      <div className='m-2 text-left w-3/4 h-3/4'>
+        {children.map((content) => {
+          const tabName = content.props.label;
+
+          if (tabName === activeTab)
+            return <div key={tabName}>{content.props.children}</div>;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FaqTabs;

front-end/src/components/QuestionTabs.js

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+
+function QuestionTabs({ question, answer }) {
+  const [isActive, setIsActive] = useState(false)
+  return (
+    <>
+    <div className="w-full relative select-none cursor-pointer"
+    onClick={(e) => setIsActive(!isActive)}>
+      <div className='flex'>
+      {isActive ? (
+            <p className='text-2xl px-6 py-5'>-</p>
+          ) : (
+            <p className='text-2xl px-6 py-5'>+</p>
+            )}
+        <p className="text-xl px-6 py-6">{question}</p>
+      </div>
+
+      {isActive && (
+        <div className="w-9/10 px-12 pb-4 text-lg">
+          {answer}
+        </div>
+      )}
+    </div>
+    {/* <div className='w-9/10 mx-6 min-h-1 bg-gray-400'></div> */}
+  </>
+  )
+}
+
+export default QuestionTabs

front-end/src/graphs/GraphDisplay.css

@@ -18,3 +18,9 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #46a98a;
 }
+
+/* This is necessary to make Plotly points selectable. */
+.scatterlayer .trace:last-child path {
+  pointer-events: all;
+}
+

front-end/src/graphs/GraphDisplay.js

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 //Important! Below the mock data is imported from the utils folder
-import { dataGeo, dataNonGeo } from '../utils/MockData.js';
+import { USCensusMetadata, dataGeo, dataNonGeo } from '../utils/MockData.js';
 import Histogram from './Histogram';
 import HeaderText from '@components/HeaderText.js';
 import SelectBox from '@components/SelectBox.js';
+import DropdownMenu from '@components/DropdownMenu.js';
+
+import DataSelectBox from '@graphs/components/DataSelectBox.js';
+import DataCheckBoxGroup from './components/DataCheckBoxGroup.js';
 
 import BarChart from './BarChart';
 import BoxPlot from './BoxPlot';
@@ -13,54 +17,53 @@ import HeatMap from './HeatMap';
 import LineGraph from './LineGraph';
 import ScatterPlot from './ScatterPlot';
 import StackedBarChart from './StackedBarChart';
-import './GraphDisplay.css';
 
 import { ChevronDownIcon } from '@heroicons/react/solid';
-import { useState } from 'react';
+import DataTextField from './components/DataTextField.js';
+
+import Select from 'react-select';
+import makeAnimated from 'react-select/animated';
 
 //Main component that displays your created graph
 //Components in React can be in the form of functions, classes etc.
 //and consist of both javascript code and html code (html is the return value)
 function GraphDisplay() {
   const dataKeys = Object.keys(dataNonGeo[0]);
-  const selectBoxData = dataKeys.map((d) => ({ fieldName: d, value: d }));
+
+
+
+  const test = ['Year', 'Age', 'Family Size', 'Immigration Year', 'EDSCORE50', 'OCCSCORE', 'PRESGL']
+  const testKeys = test.map((d) => ({ label: d, value: d }));
+  const [selectedOption, setSelectedOption] = useState('0');
+  const animatedComponents = makeAnimated();
 
-  const [histoXAttr, setHistoXAttr] = useState('ID');
   //Below is the html code (return value)
   return (
+
     <>
-      <div>
+      <div> 
         <HeaderText>A page that displays your graph component</HeaderText>
 
-        <div className='flex flex-wrap justify-between'>
-          <div className='rounded-lg overflow-hidden shadow-lg m-auto p-4 bg-white'>
-            {
-              //Put your graph component below the Histogram Component
-            }
-            <div className='w-1/2 text-3xl text-center font-bold border-b-2 p-2 m-auto'>
-              Histogram
-            </div>
-            <Histogram
-              data={dataNonGeo}
-              xAxisAttribute={histoXAttr}
-              title={`People from Different ${histoXAttr}`}
-            ></Histogram>
-            <div className='text-center border-t-2 py-2'>
-              <div className='font-bold text-xl py-2'>
-                Histogram of Non-Geo Data
-              </div>
-              <div className='m-auto w-64'>
-                <SelectBox
-                  data={selectBoxData}
-                  onValueChange={setHistoXAttr}
-                ></SelectBox>
-              </div>
-            </div>
+        <div className='flex flex-col justify-between'>
+          <div className='w-1/2 text-3xl text-center font-bold border-b-2 p-2 m-auto'>
+              Correlation Graph
           </div>
-        </div>
+            <Correlation data={dataNonGeo}
+               bothAxisAttribute={selectedOption}></Correlation>
+            <Select
+              // defaultValue={[testKeys[0]]}
+              closeMenuOnSelect={false}
+              components={animatedComponents}
+              isMulti
+              options={testKeys}
+              onChange={setSelectedOption}
+            />
+        </div> 
       </div>
     </>
   );
 }
 
 export default GraphDisplay;
+
+

front-end/src/graphs/Histogram.js

@@ -1,7 +1,7 @@
 import Plot from 'react-plotly.js';
 
 const Histogram = ({ data, xAxisAttribute, title }) => {
-  console.log(data);
+  // console.log(data);
   let layout = {
     autosize: true,
     // width: 500,
@@ -24,8 +24,8 @@ const Histogram = ({ data, xAxisAttribute, title }) => {
     }
     return d[xAxisAttribute];
   });
-  console.log(data);
-  console.log(xData);
+  // console.log(data);
+  // console.log(xData);
 
   return (
     <Plot