changes with FAQ page

front-end/src/graphs/AreaChart.js

@@ -1,17 +1,65 @@
-import React from 'react'
-import Plot from 'react-plotly.js'
+import createPlotlyComponent from 'react-plotlyjs';
+//npm install react-plotlyjs
+import React from 'react';
+import Plotly from 'plotly.js/dist/plotly-cartesian';
+const PlotlyComponent = createPlotlyComponent(Plotly);
+
+const AreaChart = ({ data, xAxisAttribute, yAxisAttribute }) => {
+  console.log(data);
+
+  let xData = data.map((d) => {
+    if (d[xAxisAttribute] === undefined || d[xAxisAttribute] === 'NULL') {
+      return 'UNKOWN';
+    }
+    return d[xAxisAttribute];
+  });
+
+  let yData = data.map((d) => {
+    if (d[yAxisAttribute] === undefined || d[yAxisAttribute] === 'NULL') {
+      return 'UNKOWN';
+    }
+    return d[yAxisAttribute];
+  });
+  console.log(xData);
+  console.log(yData);
+  let dataKeys=[
+     {
+          fill: 'tozeroy',
+          type: 'scatter',
+          x: xData, 
+          y: yData,
+          // x: [1, 2, 3, 4],
+          // y: [3, 5, 1, 7],
+          marker:{
+            color:'(16,32,77)'
+          }
+        },
+        {
+          fill: 'tonexty',
+          type: 'scatter',
+          x: xData,
+          y: yData,
+          // x: [1, 2, 3, 4],
+          // y: [0, 2, 3, 5],
+        }
+  ];
+  let layout = {
+    autosize: true,
+    xaxis: { title: xAxisAttribute },
+    yaxis: { title: yAxisAttribute },
+    // yaxis: { title: 'Count' },
+  };
+  let config = {
+    showLink: false,
+    displayModeBar: true
+  };
 
-function AreaChart() {
   return (
     <>
-      <div>
-        <h2 className="header-text">Area Chart </h2>
-        <div className="block">
-          <p className="full-text">TBH</p>
-        </div>
-      </div>
+    <PlotlyComponent className="" data={dataKeys} layout={layout} config={config}/>
     </>
-  )
-}
+  );
+
+  }
+export default AreaChart;
 
-export default AreaChart

front-end/src/graphs/GraphDisplay.js

@@ -18,6 +18,7 @@ import './GraphDisplay.css';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import { useState } from 'react';
 
+
 //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)
@@ -26,6 +27,9 @@ function GraphDisplay() {
   const selectBoxData = dataKeys.map((d) => ({ fieldName: d, value: d }));
 
   const [histoXAttr, setHistoXAttr] = useState('ID');
+  //area chart attribute
+  const [areaXattr, setAreaXattr] = useState('ID');
+  const [areaYattr, setAreaYattr] = useState('ID');
   //Below is the html code (return value)
   return (
     <>
@@ -57,8 +61,37 @@ function GraphDisplay() {
               </div>
             </div>
           </div>
+
         </div>
+        <div className="rounded overflow-hidden shadow-lg m-auto p-4">
+             <p>Area Chart</p>
+             <AreaChart
+               data={dataNonGeo}
+               xAxisAttribute={areaXattr}
+               yAxisAttribute={areaYattr}
+             ></AreaChart>
+             </div>
+
       </div>
+      <div className='font-bold text-xl py-2'>
+                Area Chart X Axis Data of Non-Geo Data
+              </div>
+              <div className='m-auto w-64'>
+                <SelectBox
+                  data={selectBoxData}
+                  onValueChange={setAreaXattr}
+                ></SelectBox>
+        </div>
+        <div className='font-bold text-xl py-2'>
+                Area Chart Y Axis Data of Non-Geo Data
+              </div>
+              <div className='m-auto w-64'>
+                <SelectBox
+                  data={selectBoxData}
+                  onValueChange={setAreaYattr}
+                ></SelectBox>
+        </div>
+
     </>
   );
 }