├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── capture_img.png ├── craco.config.js ├── debug.log ├── exxample.png ├── package-lock.json ├── package.json ├── public ├── exs.csv ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── App.js ├── App2.js ├── __tests__ │ └── App.test.js ├── components │ ├── Chart.js │ ├── ChartPlane.js │ ├── ChartsViz.js │ ├── DataTable.js │ ├── DataTables.js │ └── SidePlanes │ │ ├── Arithemtic.js │ │ ├── Describe.js │ │ ├── Df2df.js │ │ ├── Query.js │ │ ├── SidePlane.js │ │ └── index.js ├── index.css ├── index.js ├── logo.svg └── reducer.js ├── tailwind.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | # A special property that should be specified at the top of the file outside of 4 | # any sections. Set to true to stop .editor config file search on current file 5 | root = true 6 | 7 | [*] 8 | # Indentation style 9 | # Possible values - tab, space 10 | indent_style = space 11 | 12 | # Indentation size in single-spaced characters 13 | # Possible values - an integer, tab 14 | indent_size = 2 15 | 16 | # Line ending file format 17 | # Possible values - lf, crlf, cr 18 | end_of_line = lf 19 | 20 | # File character encoding 21 | # Possible values - latin1, utf-8, utf-16be, utf-16le 22 | charset = utf-8 23 | 24 | # Denotes whether to trim whitespace at the end of lines 25 | # Possible values - true, false 26 | trim_trailing_whitespace = true 27 | 28 | # Denotes whether file should end with a newline 29 | # Possible values - true, false 30 | insert_final_newline = true 31 | 32 | [*.hbs] 33 | insert_final_newline = false 34 | 35 | [*.ts] 36 | indent_size = 2 37 | 38 | [{package}.json] 39 | indent_size = 2 40 | 41 | [*.md] 42 | max_line_length = 0 43 | trim_trailing_whitespace = false 44 | 45 | [*.yml] 46 | indent_size = 2 47 | 48 | [Makefile] 49 | indent_style = tab 50 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // module.exports = { 2 | // env: { 3 | // browser: true, 4 | // es6: true, 5 | // node: true, 6 | // jest: true, 7 | // }, 8 | // extends: [ 9 | // "airbnb-base", 10 | // "eslint:recommended", 11 | // "plugin:jsx-a11y/recommended", 12 | // "plugin:react-hooks/recommended", 13 | // "plugin:react/recommended", 14 | // "plugin:prettier/recommended", 15 | // ], 16 | // plugins: ["prettier"], 17 | // globals: { 18 | // Atomics: "readonly", 19 | // SharedArrayBuffer: "readonly", 20 | // }, 21 | 22 | // parserOptions: { 23 | // ecmaVersion: 2018, 24 | // sourceType: "module", 25 | // }, 26 | // rules: { 27 | // "no-param-reassign": ["error", { props: false }], 28 | // camelcase: "off", 29 | // "linebreak-style": 0, 30 | // /// "prettier/prettier": "error", 31 | // "prettier/prettier": [ 32 | // "error", 33 | // { 34 | // "endOfLine": "auto" 35 | // }, 36 | // ], 37 | // }, 38 | // settings: { 39 | // react: { 40 | // version: "detect", 41 | // }, 42 | // }, 43 | // }; 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "prettier": { 3 | "printWidth": 90, 4 | "bracketSpacing": false, 5 | "trailingComma": "es5" 6 | } 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # No Code Data Platform 2 | 3 | Enabling data visualisation and Analysis/Proccessing visually like an Artist with Danfojs 4 | 5 | Clone the repo and cd into the repo directory and then run `yarn` 6 | 7 | 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): 8 | 9 | ![](exxample.png) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /capture_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptdata/Data-aRT/fa8a28f88fd028b000a93c489ae5e56eb866a873/capture_img.png -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require("tailwindcss"), require("autoprefixer")], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0101/134724.452:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | -------------------------------------------------------------------------------- /exxample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptdata/Data-aRT/fa8a28f88fd028b000a93c489ae5e56eb866a873/exxample.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project-xz", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.0.0", 7 | "@tailwindcss/postcss7-compat": "^2.0.2", 8 | "@testing-library/jest-dom": "^5.11.5", 9 | "@testing-library/react": "^11.1.1", 10 | "@testing-library/user-event": "^12.2.0", 11 | "autoprefixer": "^9", 12 | "chart.js": "^2.9.4", 13 | "danfojs": "^0.2.2", 14 | "react-table-v6": "^6.8.6", 15 | "danfojs-node": "^0.2.6", 16 | "postcss": "^7", 17 | "react": "^17.0.1", 18 | "react-chartjs-2": "^2.11.1", 19 | "react-dom": "^17.0.1", 20 | "react-draggable": "^4.4.3", 21 | "react-router-dom": "^5.2.0", 22 | "react-scripts": "4.0.0", 23 | "react-table-v6": "^6.8.6", 24 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0", 25 | "web-vitals": "^0.2.4" 26 | }, 27 | "scripts": { 28 | "start": "craco start", 29 | "build": "craco build", 30 | "test": "craco test", 31 | "eject": "react-scripts eject", 32 | "lint": "eslint .", 33 | "lint:fix": "eslint . --fix" 34 | }, 35 | "eslintConfig": { 36 | "extends": [ 37 | "react-app", 38 | "react-app/jest" 39 | ] 40 | }, 41 | "browserslist": { 42 | "production": [ 43 | ">0.2%", 44 | "not dead", 45 | "not op_mini all" 46 | ], 47 | "development": [ 48 | "last 1 chrome version", 49 | "last 1 firefox version", 50 | "last 1 safari version" 51 | ] 52 | }, 53 | "devDependencies": { 54 | "eslint-config-airbnb-base": "^14.2.1", 55 | "eslint-config-prettier": "^7.0.0", 56 | "eslint-plugin-import": "^2.22.1", 57 | "eslint-plugin-jsx-a11y": "^6.4.1", 58 | "eslint-plugin-prettier": "^3.2.0", 59 | "eslint-plugin-react": "^7.21.5", 60 | "eslint-plugin-react-hooks": "^4.2.0", 61 | "prettier": "^2.2.1", 62 | "test": "^0.6.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /public/exs.csv: -------------------------------------------------------------------------------- 1 | A,B,C 2 | 1,2,20 3 | 2,3,10 4 | 3,3.2,30 5 | 4,5,60 6 | 5,2,70 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptdata/Data-aRT/fa8a28f88fd028b000a93c489ae5e56eb866a873/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 15 | 19 | 20 | 29 | React App 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import DataTables from './components/DataTables'; 3 | import { SidePlane } from './components/SidePlanes' 4 | import ChartsViz from './components/ChartsViz' 5 | import ChartPlane from './components/ChartPlane' 6 | import { read_csv } from 'danfojs/src/io/reader' 7 | 8 | function App() { 9 | const [dataComp, setDataComp] = useState([]) 10 | const [showSidePlane, setSidePlane] = useState(false) 11 | const [compIndex, setCompIndex] = useState() 12 | const [chartType, setChartType] = useState() 13 | const [dfOpsType, setDfOpsType] = useState() 14 | const [chartComp, setChartComp] = useState([]) 15 | 16 | const changeHandler = function (event) { 17 | const content = event.target.files[0] 18 | const url = URL.createObjectURL(content) 19 | 20 | read_csv(url).then(df => { 21 | const columns = df.columns 22 | const values = df.values 23 | setDataComp(prev => { 24 | let new_data = prev.slice() 25 | let key = new_data.length + 1 26 | let dict = { 27 | columns: columns, 28 | values: values, 29 | df: df, 30 | keys: "df" + key 31 | } 32 | new_data.push(dict) 33 | return new_data 34 | }) 35 | 36 | 37 | }).catch((error) => { 38 | console.log(error) 39 | }) 40 | } 41 | 42 | const charts = ["BarChart", "LineChart", "PieChart"] 43 | const dataFrameOps = ["Arithemtic", "Describe", "Df2df", "Query"] 44 | 45 | const handleChart = (e) => { 46 | const value = e.target.innerHTML 47 | 48 | setChartType(value) 49 | setSidePlane("chart") 50 | } 51 | 52 | const handleDfops = (e) => { 53 | const value = e.target.value 54 | 55 | setDfOpsType(value) 56 | setSidePlane("datatable") 57 | 58 | } 59 | let classes = dataComp.length > 0 ? "bg-blue-500 p-2 text-white rounded-sm mr-2" : "bg-gray-200 p-2 text-white rounded-sm mr-2" 60 | return ( 61 |
62 |
63 |
64 | 65 |
66 | { 67 | 68 | charts.map((chart, i) => { 69 | return 75 | }) 76 | } 77 |
78 |
79 | DataFrame Operations 80 | 88 |
89 | 90 |
91 |
92 |
93 |
94 | {(dataComp.length > 0) && 95 | 101 | } 102 | 103 | {(chartComp.length > 0) && 104 | 108 | } 109 |
110 | 111 |
112 | {showSidePlane 113 | && 114 | ( 115 | showSidePlane === "datatable" ? 116 |
117 | 124 |
: 125 |
126 | 131 |
132 | 133 | ) 134 | 135 | 136 | } 137 |
138 |
139 | 140 | 141 |
142 | ) 143 | } 144 | 145 | export default App -------------------------------------------------------------------------------- /src/App2.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { read_csv } from 'danfojs/src/io/reader' 3 | import DataTables from './components/DataTables'; 4 | import { SidePlane } from './components/SidePlanes' 5 | import ChartsViz from './components/ChartsViz' 6 | import ChartPlane from './components/ChartPlane' 7 | 8 | function App2() { 9 | const [file, setFile] = useState() 10 | const [dataComp, setDataComp] = useState([]) 11 | const [compIndex, setCompIndex] = useState() 12 | const [dfOpsType, setDfOpsType] = useState() 13 | const [showSidePlane, setSidePlane] = useState(false) 14 | const [chartType, setChartType] = useState() 15 | const [chartComp, setChartComp] = useState([]) 16 | 17 | const changeHandler = function (event) { 18 | const content = event.target.files[0] 19 | const url = URL.createObjectURL(content) 20 | 21 | read_csv(url).then(df => { 22 | const columns = df.columns 23 | const values = df.values 24 | setDataComp(prev => { 25 | let new_data = prev.slice() 26 | let key = new_data.length + 1 27 | let dict = { 28 | columns: columns, 29 | values: values, 30 | df: df, 31 | keys: "df" + key 32 | } 33 | new_data.push(dict) 34 | return new_data 35 | }) 36 | setFile(true); 37 | 38 | 39 | }).catch((error) => { 40 | console.log(error) 41 | }) 42 | } 43 | const charts = ["BarChart", "LineChart", "PieChart"] 44 | const dataFrameOps = ["Arithemtic", "Describe", "Df2df", "Query"] 45 | 46 | const handleChart = (e) => { 47 | const value = e.target.innerHTML 48 | 49 | setChartType(value) 50 | setSidePlane("chart") 51 | } 52 | 53 | const handleDfops = (e) => { 54 | const value = e.target.value 55 | 56 | setDfOpsType(value) 57 | setSidePlane("datatable") 58 | 59 | } 60 | let classes = dataComp.length > 0 ? "bg-blue-500 p-2 text-white rounded-sm mr-2" : "bg-gray-200 p-2 text-white rounded-sm mr-2" 61 | return ( 62 | 63 |
64 |
65 |
66 | {/* step 1 */} 67 | 68 |
69 | { 70 | 71 | charts.map((chart, i) => { 72 | return 78 | }) 79 | } 80 |
81 |
82 | DataFrame Operations 83 | 91 |
92 |
93 |
94 |
95 |
96 | 97 | {(dataComp.length > 0) && 98 | 102 | } 103 | {(chartComp.length > 0) && 104 | 108 | } 109 |
110 |
111 |
112 | 113 | {showSidePlane 114 | && 115 | ( 116 | showSidePlane === "datatable" ? 117 |
118 | 125 |
: 126 |
127 | 132 |
133 | ) 134 | } 135 |
136 |
137 |
138 |
139 | ); 140 | } 141 | export default App2 -------------------------------------------------------------------------------- /src/__tests__/App.test.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptdata/Data-aRT/fa8a28f88fd028b000a93c489ae5e56eb866a873/src/__tests__/App.test.js -------------------------------------------------------------------------------- /src/components/Chart.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Bar as BarChart } from 'react-chartjs-2'; 3 | import { Line as LineChart } from "react-chartjs-2"; 4 | import { Pie as PieChart } from "react-chartjs-2"; 5 | import Draggable from 'react-draggable'; 6 | 7 | export default function Chart({ labels, dataset, type, del, remover }) { 8 | //let type= "BarChart"; 9 | console.log(del) 10 | let data = { 11 | labels: labels, 12 | datasets: [{ 13 | backgroundColor: [ 14 | 'rgba(255, 99, 132, 0.2)', 15 | 'rgba(54, 162, 235, 0.2)', 16 | 'rgba(255, 206, 86, 0.2)', 17 | 'rgba(75, 192, 192, 0.2)', 18 | 'rgba(153, 102, 255, 0.2)', 19 | 'rgba(255, 159, 64, 0.2)' 20 | ], 21 | borderColor: [ 22 | 'rgba(255,99,132,1)', 23 | 'rgba(54, 162, 235, 1)', 24 | 'rgba(255, 206, 86, 1)', 25 | 'rgba(75, 192, 192, 1)', 26 | 'rgba(153, 102, 255, 1)', 27 | 'rgba(255, 159, 64, 1)' 28 | ], 29 | borderWidth: 1, 30 | data: dataset, 31 | }] 32 | }; 33 | let options = { 34 | scales: { 35 | xAxes: [{ 36 | stacked: true 37 | }], 38 | yAxes: [{ 39 | stacked: true 40 | }] 41 | } 42 | } 43 | if (type === "BarChart") { 44 | return ( 45 | 46 |
47 | {/* */} 48 | 49 |
50 | 51 | 52 | ) 53 | } 54 | else if (type === "LineChart") { 55 | return ( 56 | 57 |
58 | {/* */} 59 | 60 | 61 |
62 | 63 | 64 | ) 65 | } 66 | 67 | else if (type === "PieChart") { 68 | return ( 69 | 70 |
71 | {/* */} 72 | 73 | 74 |
75 | 76 | 77 | ) 78 | } 79 | return ( 80 | <> 81 |
82 |

NO Chart

83 |
84 | 85 | 86 | ) 87 | } 88 | -------------------------------------------------------------------------------- /src/components/ChartPlane.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | 3 | export default function ChartPlane({ setChartComp, dataComp, chartType }) { 4 | 5 | const df = dataComp.df 6 | 7 | const compCols = dataComp.columns 8 | let x; 9 | let y; 10 | if (compCols[0] === "index") { 11 | x = compCols 12 | console.log(dataComp.values[0]) 13 | //sanity check 14 | y = dataComp.values[0].map((val, index) => { 15 | if (typeof val != "string") { 16 | return compCols[index] 17 | } 18 | }) 19 | } else { 20 | x = df.columns 21 | const dtypes = df.dtypes 22 | y = dtypes.map((val, i) => { 23 | if (val != "string") { 24 | return x[i] 25 | } 26 | }) 27 | } 28 | 29 | 30 | const xRef = useRef() 31 | const yRef = useRef() 32 | 33 | const handleChart = () => { 34 | const xVal = xRef.current.value 35 | const yVal = yRef.current.value 36 | 37 | const labels = xVal === "index" ? df.index : df[xVal].values 38 | const data = yVal === "index" ? df.index : df[yVal].values 39 | 40 | setChartComp((prev) => { 41 | const newChart = prev.slice() 42 | const key = newChart.length + 1 43 | const dict = { 44 | labels: labels, 45 | data: data, 46 | key: "chart" + key, 47 | type: chartType 48 | } 49 | 50 | newChart.push(dict) 51 | return newChart 52 | }) 53 | } 54 | return ( 55 |
56 |
57 |
58 | x: 59 | 66 |
67 |
68 | y: 69 | 76 |
77 |
78 | 79 |
80 | ) 81 | } 82 | -------------------------------------------------------------------------------- /src/components/ChartsViz.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Chart from './Chart' 3 | 4 | export default function ChartsViz({chartComp,setChartComp}) { 5 | const remover = (key) => { 6 | setChartComp(chartComp.filter((el) => el.key !==key)); 7 | } 8 | return ( 9 |
10 | { 11 | chartComp.map((chart)=> { 12 | console.log(chart.key) 13 | return( 14 | <> 15 | 16 | {/* */} 17 | 24 | 25 | ) 26 | }) 27 | } 28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/components/DataTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactTable from 'react-table-v6' 3 | import Draggable from 'react-draggable'; 4 | import 'react-table-v6/react-table.css' 5 | 6 | function DataTable({ columns, values, setCompIndex, index, setSidePlane, remover, keys }) { 7 | 8 | const dataColumns = columns.map((val, index) => { 9 | return { 10 | Header: val, 11 | accessor: val, 12 | Cell: (props) => ( 13 |
14 | {props.value} 15 |
16 | ), 17 | width: 18 | index === 0 && (1280 * 0.8333 - 30) / columns.length < 130 19 | ? 130 20 | : undefined, 21 | } 22 | }); 23 | 24 | const data = values.map(val => { 25 | let rows_data = {} 26 | 27 | val.forEach((val2, index) => { 28 | let col = columns[index]; 29 | rows_data[col] = val2; 30 | }) 31 | return rows_data; 32 | }) 33 | 34 | const handleSidePlane = () => { 35 | setCompIndex(index) 36 | // setSidePlane(true) 37 | } 38 | return ( 39 | 40 |
handleSidePlane()}> 41 | {/* */} 42 | { 46 | return { style: { wordWrap: 'break-word', whiteSpace: 'initial' } } 47 | }} 48 | showPageJump={true} 49 | showPagination={true} 50 | defaultPageSize={10} 51 | showPageSizeOptions={true} 52 | minRows={10} 53 | /> 54 |
55 | 56 | ) 57 | 58 | 59 | } 60 | 61 | export default DataTable 62 | -------------------------------------------------------------------------------- /src/components/DataTables.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DataTable from './DataTable' 3 | 4 | export default function DataTables({ datacomp, setCompIndex, setSidePlane, setDataComp }) { 5 | const remover = (keys) => { 6 | setDataComp(datacomp.filter((el) => el.keys !== keys)); 7 | } 8 | return ( 9 |
10 | {datacomp.map((val, index) => { 11 | return ( 12 | <> 13 | 23 | 24 | ) 25 | })} 26 |
27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /src/components/SidePlanes/Arithemtic.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | 3 | export default function Arithemtic({ dataComp, setDataComp }) { 4 | 5 | const seriesOps = ["median", "min", "max", "std", "var", "count", "sum"] 6 | const dfOps = ["cumsum", "cummax", "cumprod", "cummin"] 7 | const all = ["median", "min", "max", "std", "var", "count", "sum", 8 | "cumsum", "cummax", "cumprod", "cummin"] 9 | 10 | const axisRef = useRef() 11 | const opsRef = useRef() 12 | 13 | const arithemtic = () => { 14 | 15 | let sOps = opsRef.current.value 16 | let axis = axisRef.current.value 17 | // let df; 18 | if (seriesOps.includes(sOps)) { 19 | let df_comp = dataComp.df 20 | let df = eval(`df_comp.${sOps}(axis=${axis})`) 21 | 22 | let columns = Array.isArray(df.columns) ? df.columns.slice() : [df.columns] 23 | columns.splice(0, 0, "index") 24 | let values = df.values.map((val, index) => { 25 | 26 | return [df.index[index], val] 27 | }) 28 | 29 | setDataComp(prev => { 30 | let new_data = prev.slice() 31 | let dict = { 32 | columns: columns, 33 | values: values, 34 | df: df 35 | } 36 | new_data.push(dict) 37 | return new_data 38 | }) 39 | 40 | } else { 41 | 42 | let df_comp2 = dataComp.df 43 | let df = eval(`df_comp2.${sOps}({axis:${axis}})`) 44 | 45 | setDataComp(prev => { 46 | let new_data = prev.slice() 47 | let dict = { 48 | columns: df.columns, 49 | values: df.values, 50 | df: df 51 | } 52 | new_data.push(dict) 53 | return new_data 54 | }) 55 | } 56 | } 57 | 58 | return ( 59 |
60 |
61 |
62 | Operation 63 | 70 |
71 |
72 | axis 73 | 80 |
81 |
82 | 83 |
84 | ) 85 | } 86 | -------------------------------------------------------------------------------- /src/components/SidePlanes/Describe.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | export default function Describe({ dataComp, setDataComp }) { 3 | 4 | const describe = () => { 5 | 6 | const df = dataComp.df.describe() 7 | let column = df.columns.slice() 8 | column.splice(0, 0, "index") 9 | const values = df.values 10 | const indexes = df.index 11 | 12 | const new_values = values.map((val, index) => { 13 | let new_val = val.slice() 14 | new_val.splice(0, 0, indexes[index]) 15 | return new_val 16 | }) 17 | 18 | setDataComp(prev => { 19 | let new_data = prev.slice() 20 | let dict = { 21 | columns: column, 22 | values: new_values, 23 | df: df 24 | } 25 | new_data.push(dict) 26 | return new_data 27 | }) 28 | } 29 | return ( 30 |
31 | {/* step 1 */} 32 | 33 |
34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /src/components/SidePlanes/Df2df.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import { concat } from 'danfojs/src/core/concat' 3 | 4 | export default function Df2df({ dataComp, dataComps, df_index, setDataComp }) { 5 | 6 | const dfRef = useRef() 7 | const inpRef = useRef() 8 | const axisRef = useRef() 9 | const opsRef = useRef() 10 | 11 | const allOps = [ 12 | "lt", "ge", "ne", 13 | "eq", "gt", "add", 14 | "sub", "mul", "div", 15 | "pow", "concat" 16 | ] 17 | 18 | 19 | const df2df = () => { 20 | let dfIndex = dfRef.current.value 21 | let inp = parseInt(inpRef.current.value) 22 | let axis = parseInt(axisRef.current.value) 23 | let ops = opsRef.current.value 24 | 25 | 26 | if (ops != "concat") { 27 | let value = dfIndex === "None" ? inp : dataComps[dfIndex].df 28 | let df = dataComp.df 29 | 30 | let rslt = eval(`df.${ops}(value, axis=${axis})`) 31 | 32 | setDataComp(prev => { 33 | let new_data = prev.slice() 34 | let key = new_data.length + 1 35 | let dict = { 36 | columns: rslt.columns, 37 | values: rslt.values, 38 | df: rslt, 39 | keys: "df" + key 40 | } 41 | new_data.push(dict) 42 | return new_data 43 | }) 44 | } else { 45 | 46 | let df2 = dataComps[dfIndex].df 47 | let df1 = dataComp.df 48 | let df_concat = concat 49 | // let rslt = eval(`df_concat({df_list: [df1,df2], axis: axis})`) 50 | let rslt = concat({ df_list: [df1, df2], axis: axis }) 51 | 52 | let column = rslt.columns.slice() 53 | column.splice(0, 0, "index") 54 | 55 | let rsltValues = rslt.values.map((val, index) => { 56 | let newVal = val.slice() 57 | newVal.splice(0, 0, rslt.index[index]) 58 | return newVal 59 | }) 60 | 61 | setDataComp(prev => { 62 | let new_data = prev.slice() 63 | let key = new_data.length + 1 64 | let dict = { 65 | columns: column, 66 | values: rsltValues, 67 | df: rslt, 68 | keys: "df" + key 69 | } 70 | new_data.push(dict) 71 | return new_data 72 | }) 73 | 74 | 75 | } 76 | 77 | 78 | 79 | 80 | } 81 | return ( 82 |
83 |
84 |
85 | Operations 86 | 93 |
94 |
95 | DataFrames 96 | 106 |
107 | {/* 108 | don't input any value if a dataframe is chosen, 109 | one of the two will be chosen by default 110 | */} 111 |
112 | input a value 113 | 114 |
115 |
116 | axis 117 | 124 |
125 |
126 | 127 |
128 | ) 129 | } 130 | -------------------------------------------------------------------------------- /src/components/SidePlanes/Query.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | 3 | export default function Query({ dataComp, setDataComp }) { 4 | 5 | const columnRef = useRef() 6 | const logicRef = useRef() 7 | const valuesRef = useRef() 8 | 9 | const columns = dataComp.columns 10 | const logics = [">", "<", "<=", ">=", "==", "!="] 11 | 12 | const query = () => { 13 | 14 | const qColumn = columnRef.current.value 15 | const qLogic = logicRef.current.value 16 | const qValue = valuesRef.current.value 17 | 18 | const df = dataComp.df.query({ column: qColumn, is: qLogic, to: qValue }) 19 | 20 | setDataComp(prev => { 21 | let new_data = prev.slice() 22 | let dict = { 23 | columns: df.columns, 24 | values: df.values, 25 | df: df 26 | } 27 | new_data.push(dict) 28 | return new_data 29 | }) 30 | } 31 | 32 | return ( 33 |
34 |
35 |
36 | Column 37 | 44 |
45 |
46 | is 47 | 54 |
55 |
56 | to 57 | 58 |
59 |
60 | 61 |
62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /src/components/SidePlanes/SidePlane.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Arithemtic from './Arithemtic' 3 | import Describe from './Describe' 4 | import Df2df from './Df2df' 5 | import Query from './Query' 6 | 7 | export default function SidePlanes({dataComp, 8 | dataComps, 9 | setDataComp, 10 | df_index, 11 | dfOpsType}) { 12 | 13 | if(dfOpsType === "Arithemtic") { 14 | return 18 | } 19 | else if(dfOpsType === "Describe") { 20 | return 24 | } 25 | else if(dfOpsType === "Df2df") { 26 | return 32 | } 33 | else if(dfOpsType === "Query") { 34 | return 38 | } 39 | 40 | 41 | return ( 42 |
43 | No chart 44 |
45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /src/components/SidePlanes/index.js: -------------------------------------------------------------------------------- 1 | import SidePlane from './SidePlane' 2 | 3 | export { SidePlane } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | @tailwind base; 15 | @tailwind components; 16 | @tailwind utilities; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | // import App from "./App"; 5 | import App2 from "./App2"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/reducer.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | // eslint-disable-next-line consistent-return 3 | // export const reducer = (state, action) => {}; 4 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | }; 12 | --------------------------------------------------------------------------------