Chart

README.md

@@ -7,3 +7,6 @@ Clone the repo and cd into the repo directory and then run `yarn`
 This a work in progres and lack some styling. The major part of `Data-aRT` is fully implemented here is what it looks like (in simple wireframe design):
 
 ![](exxample.png)
+
+
+

package.json

@@ -11,6 +11,8 @@
     "autoprefixer": "^9",
     "chart.js": "^2.9.4",
     "danfojs": "^0.2.2",
+    "react-table-v6": "^6.8.6",
+    "danfojs-node": "^0.2.6",
     "postcss": "^7",
     "react": "^17.0.1",
     "react-chartjs-2": "^2.11.1",

public/exs.csv

@@ -0,0 +1,6 @@
+A,B,C
+1,2,20
+2,3,10
+3,3.2,30
+4,5,60
+5,2,70

src/App.js

@@ -17,7 +17,8 @@ function App() {
   const changeHandler = function(event) {
       const content = event.target.files[0]
       const url = URL.createObjectURL(content)
-
+
+      //"http://localhost:3000/exs.csv"
       read_csv(url, {start: 0, end: 20}).then(df => {
           const columns = df.columns
           const values = df.values
@@ -36,7 +37,9 @@ function App() {
         setFile(true);
 
 
-      })
+      }).catch((error) => {
+            console.log(error)
+          })
   }
 
   const charts = ["BarChart", "LineChart", "PieChart"]
@@ -56,17 +59,18 @@ function App() {
     setSidePlane("datatable")
 
   }
-
+  let classes=file?"bg-blue-500 p-2 text-white rounded-sm mr-2":"bg-gray-200 p-2 text-white rounded-sm mr-2"
   return (
     <div className="max-w-full mx-auto border-2 mt-10">
       <div className="flex flex-col">
         <div className="border-2 mb-10 flex flex-row">
           <input type="file" name="file" onChange={changeHandler} />
           <div className="mr-4">
             {
+
               charts.map((chart, i)=>{
-                return <button 
-                          className="bg-blue-500 p-2 text-white rounded-sm mr-2"
+                return <button disabled={file?false:true}
+                          className={classes}
                           onClick={handleChart}
                       >
                         {chart}
@@ -95,12 +99,14 @@ function App() {
                     datacomp={dataComp} 
                     setSidePlane={setSidePlane}
                     setCompIndex={setCompIndex}
+                    setDataComp={setDataComp}
                 /> 
               }
 
               { (chartComp.length > 0) && 
                 <ChartsViz
                     chartComp={chartComp}
+                    setChartComp={setChartComp}
                 /> 
               }
             </div>

src/components/Chart.js

@@ -4,8 +4,9 @@ import { Line as LineChart } from "react-chartjs-2";
 import { Pie as PieChart} from "react-chartjs-2";
 import Draggable from 'react-draggable';
 
-export default function Chart({labels, dataset,type}) {
+export default function Chart({labels, dataset,type,del,remover}) {
   //let type= "BarChart";
+  console.log(del)
   let data = {
     labels: labels,
     datasets: [{
@@ -44,6 +45,7 @@ export default function Chart({labels, dataset,type}) {
     return(
       <Draggable>
         <div className="max-w-md">
+        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
          <BarChart data={data} options={options} width="100" height="100" />
       </div>
       </Draggable>
@@ -54,6 +56,7 @@ export default function Chart({labels, dataset,type}) {
     return(
       <Draggable>
         <div className="max-w-md">
+        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
         <LineChart data={data} options={options} width="100" height="100"/>
 
       </div>
@@ -66,6 +69,7 @@ export default function Chart({labels, dataset,type}) {
     return(
       <Draggable>
         <div className="max-w-md">
+        <button onClick={()=> remover(del)} className="bg-red-700 text-white rounded-sm p-2">X</button>
           <PieChart data={data} options={options} width="100" height="100" />
 
         </div>

src/components/ChartsViz.js

@@ -1,17 +1,28 @@
 import React from 'react'
 import Chart from './Chart'
 
-export default function ChartsViz({chartComp}) {
+export default function ChartsViz({chartComp,setChartComp}) {
+  const remover = (key) => {
+    setChartComp(chartComp.filter((el) => el.key !==key));
+  }
   return (
     <div>
       {
         chartComp.map((chart)=> {
-          return <Chart 
+          console.log(chart.key)
+          return(
+            <>
+
+         {/* <button onClick={()=> remover(chart.key)} className="bg-red-700 text-white rounded-sm p-2">Delete</button>  */}
+            <Chart 
               labels={chart.labels}
               dataset={chart.data}
               type={chart.type}
-              key={chart.key}
+              del={chart.key}
+              remover={remover}
           />
+          </>
+          )
         })
       }
     </div>

src/components/DataTable.js

@@ -3,7 +3,7 @@ import ReactTable from 'react-table-v6'
 import Draggable from 'react-draggable';
 import 'react-table-v6/react-table.css'
 
-function DataTable({ columns, values, setCompIndex, index, setSidePlane }) {
+function DataTable({ columns, values, setCompIndex, index, setSidePlane,remover,keys }) {
 
   const dataColumns = columns.map((val, index) => {
     return { Header: val, 
@@ -37,6 +37,7 @@ function DataTable({ columns, values, setCompIndex, index, setSidePlane }) {
   return (
     <Draggable >
         <div className="w-1/2" onClick={()=> handleSidePlane()}>
+        <button onClick={()=> remover(keys)} className="bg-red-700 text-white rounded-sm p-2">X</button>
         <ReactTable
           data={data}
           columns={dataColumns}

src/components/DataTables.js

@@ -1,19 +1,28 @@
 import React from 'react'
 import DataTable from './DataTable'
 
-export default function DataTables({datacomp, setCompIndex, setSidePlane}) {
-
+export default function DataTables({datacomp, setCompIndex, setSidePlane,setDataComp}) {
+  const remover = (keys) => {
+    setDataComp(datacomp.filter((el) => el.keys !==keys));
+  }
   return (
     <div>
       {datacomp.map((val,index) => {
-        return <DataTable 
+        return( 
+                <>
+                {/* <button onClick={()=> remover(val.keys)} className="bg-red-700 text-white rounded-sm p-2">Delete</button> */}
+                <DataTable 
                   key={index} 
                   columns={val.columns} 
                   values={val.values} 
                   setCompIndex={setCompIndex}
                   index={index}
                   setSidePlane={setSidePlane}
+                  remover={remover}
+                  keys={val.keys}
                 />
+                </>
+                )
       })}
     </div>
   )