Merge branch 'main' of https://git.dchen4.au/dchen4/data-analyse

format.py

@@ -0,0 +1,40 @@
+#it is used to clean and create the database
+import sqlite3
+import pandas
+conn = sqlite3.connect("data.sqlite3")
+cur = conn.cursor()
+df = pandas.read_csv("offencebymonth.csv")
+#drop empty value
+new_df = df.dropna()
+#get rid of spaces
+new_df.replace(' ', '_', regex=True)
+LGA = df['LGA'].unique()
+subdiv = df['Statistical Division or Subdivision'].unique()
+cat = df["Offence category"].unique()
+#database split to 3 tables, main statistics, subdiv index and statistics4
+#Enale foreign key support
+print(cat)
+
+cur.execute("PRAGMA foreign_keys = ON;")
+
+categories = """CREATE TABLE IF NOT EXISTS categories(id INTEGER AUTO INCREMENT PRIMARY KEY, name TEXT)""" 
+subcat = """CREATE TABLE IF NOT EXISTS subcat(id INTEGER AUTO INCREMENT PRIMARY KEY, name TEXT, cat_id INTEGER, FOREIGN KEY(cat_id) REFERENCES categories(id))"""
+location = """CREATE TABLE IF NOT EXISTS location(id INTEGER AUTO INCREMENT PRIMARY KEY, subdiv TEXT, LGA TEXT)"""
+stat = """CREATE TABLE IF NOT EXISTS statistics(id INTEGER AUTO INCREMENT PRIMARY KEY, category_id INTEGER, subcat_id INTEGER, location_id INTEGER, month TEXT NOT NULL, count INTEGER NOT NULL,FOREIGN KEY(category_id) REFERENCES categories(id), FOREIGN KEY(subcat_id) REFERENCES subcat(id), FOREIGN KEY(location_id) REFERENCES location(id))"""
+cur.execute(categories)
+cur.execute(subcat)
+cur.execute(location)
+cur.execute(stat)
+#insert statements
+categories_ins = """INSERT INTO categories VALUES(NULL, ?)"""
+subcat_ins = """INSERT INTO subcat VALUES(NULL, ?, ?)"""
+location_ins = """INSERT INTO location(NULL, ?, ?)"""
+stat_ins = """INSERT INTO statistics(NULL, ?,?,?,?,?)"""
+cat = cat.tolist()
+print(cat)
+for category in cat:
+    print(category)
+    cur.executemany(categories_ins, category)
+
+cur.execute("SELECT * FROM categories")
+print(cur.fetchall())

index.html

@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Crime Statistics</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">    
-        <!-- dependencies -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    </head>
-    <body>
-        <!-- bootstrap-->
-        <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
-        <!-- vue stuff--> 
-        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-        <!-- SQL -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.2.1/dist/sql-wasm.js"></script>
-
-
-        <!--nav-->
-        <nav class="navbar navbar-expand-lg navbar-light bg-warning">
-          <a class="navbar-brand" href="#">&nbsp;&nbsp;Crime statistic analysis</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-
-          <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item active">
-                <a class="nav-link" href="#">Home</a>
-              </li>
-
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  View
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <a class="dropdown-item" href="#">By year</a>
-                  <a class="dropdown-item" href="#">By LGA</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">By Crime category</a>
-                </div>
-              </li>
-             </ul>
-          </div>
-        </nav>
-        <br><br>
-
-        <!-- page columns -->
-        <div class="container text-center " id="body">
-              <div class="row">
-                <!-- now to vue-->
-                <div class="col-2 border border-primary text-left" id="filters">
-                  <ul class="">
-                        <li class="list-group-item text-left" v-for="item in filters">
-                            <span v-html="item.html"></span>
-                        </li>
-                  </ul>
-                </div>
-                <div class="col-10">
-                </div>
-              </div>
-         </div>
-    <!-- my stuff-->
-    <script src="index.js"></script>
-    </body>
-</html>

index.js

@@ -1,60 +1,47 @@
-const initSqlJs = window.initSqlJs
+class db_handler {
-const SQL = await initSqlJs({
+    constructor (sqlite3){
-  // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
+        this.db = sqlite3;
-  // You can omit locateFile completely when running in node
+    }
-  locateFile: file => `https://sql.js.org/dist/${file}`
+    
-});
+    select_all(table){
+        var stmt = ("SELECT * FROM "+table+";");
+        console.log(stmt);
+        return this.db.exec(stmt, {"returnValue":"resultRows"})
+    }
+    
+    select(column, condition, table){
+        console.log(column,condition);
+        var stmt = this.db.prepare("SELECT * FROM "+table+" WHERE $column = $condition").bind([column,condition]);
+        return stmt.finalize();
+    }
+}
 
-// Create a database
+class component {
-const db = new SQL.Database();
+    constructor(dbhandler){
+        this.handler = dbhandler;
+    }
+}
 
+class filter extends component{
+    constructor(dbhandler){
+        super(dbhandler);
+        this.init();
+    }
+    
+    init(){
+        var all_location = this.handler.select_all("locations");    
+        console.log(all_location);
+        var some_location = this.handler.select("id","1","locations");
+        console.log(some_location);
+    }
+    
+    
+}
 
+function init(sqlite3){
+    var global_component = new filter(new db_handler(sqlite3));
+}
 
-
+function filtergen(){
-const { createApp, ref } = Vue
+    console.log(this.sqlite3);
-
+}
-//filters module
-  createApp({
-        props: ['dbConnObj'],
-        
-        data(){
-            return {
-                filters : [{"html": a}]
-            }
-            
-        },
-        
-        methods:{
-            sqlStatements(opt, val = 0){
-                var stmt;
-                switch(opt){
-                    case 0:
-                        stmt = "SELECT * FROM index";
-                        break;
-                    case 1:
-                        stmt = "SELECT DISTINCT lga FROM index";
-                        break;
-                    case 2:
-                        stmt = "SELECT DISTINCT crime_category FROM index";
-                        break;
-                    case 3:
-                        stmt = "SELECT record_id FROM index";
-                    case 4:
-                        stmt = db.prepare("SELECT * FROM records WHERE record_id=:id");
-                        stmt = stmt.
-                    default 
-                        break;
-                }
-                return stmt;
-            } ,
-
-            init(){
-                db.exec(sqlStatements(0))
-            }
-        },
-        
-        beforeMount(){
-            this.init;
-        }
-        
-  }, {"dbConnObj": db}).mount('#filters');