Version 1.8.0 (#72)

* CSS overhaul of data view

* change category positions

* sorting data

* clickable class

* Change category io in data view

* Removed logs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "private": true,
   "author": {
     "name": "Julian Martinsson Bonde",

src/components/DataList.vue

@@ -10,14 +10,38 @@
                 <table class="table-fixed-header table table-sm table-striped">
                     <thead>
                         <tr>
-                            <th class="header" v-for="c in categories" :key="c.id">
-                                <div class="rotated-header"><span>{{ c.title }}</span></div>
+                            <th class="header" v-for="c in categoriesSorted" :key="c.id">
+                                <div class="rotated-header" :title="c.title"><span>{{ c.title }}</span></div>
+                                <div @click="shiftIO(c)" class="clickable">
+                                    <span v-if="c.io"><span :class="{'text-success': c.io == 'input', 'text-danger': c.io == 'output'}">[{{c.io.toUpperCase()}}]</span></span>
+                                    <span v-else class="text-info">[undef]</span>
+                                </div>
+                                <div class="header-tool-box">
+                                    <div>
+                                        <faicon class="clickable me-1" title="Move left" icon="fa-solid fa-circle-arrow-left" 
+                                        @click="moveCategory(c, -1)" />
+                                    </div>
+                                    <div>
+                                        <faicon class="clickable me-1" :class="{'text-info': sortCategoryID === c.id}" title="Sort" icon="fa-solid fa-sort" @click="sortBy(c)" />
+
+                                        <span v-if="!c.enabled" class="text-danger" @click="toggleDisableEnable(c)">
+                                            <faicon class="clickable me-1" title="Disabled" icon="fa-solid fa-circle-xmark" />
+                                        </span>
+                                        <span v-else class="text-success" @click="toggleDisableEnable(c)">
+                                            <faicon class="clickable me-1" title="Enabled" icon="fa-solid fa-circle-check" />
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <faicon class="clickable me-1" title="Move right" icon="fa-solid fa-circle-arrow-right" 
+                                        @click="moveCategory(c, 1)" />
+                                    </div>
+                                </div>
                             </th>
                         </tr>
                     </thead>
                     <tbody class="table-bordered">
-                        <tr v-for="(d, index) in data.filter(dataStore.dataPointFilterCheck)" :key="index">
-                            <td v-for="c in categories" :key="c.id">
+                        <tr v-for="(d, index) in data.filter(dataStore.dataPointFilterCheck).sort(sortFunction)" :key="index">
+                            <td v-for="c in categoriesSorted" :key="c.id">
                                 {{ d[c.title] }}
                             </td>
                         </tr>
@@ -34,24 +58,87 @@ import { reactive, ref, onMounted, onUpdated } from "vue"
 import { storeToRefs } from "pinia"
 
 import {useDataStore} from "@/store/DataStore"
+import {useStateStore} from "@/store/StateStore"
 
 const dataStore = useDataStore()
-const {data, filters, categories} = storeToRefs(dataStore)
+const stateStore = useStateStore()
+const {data, filters, categoriesSorted} = storeToRefs(dataStore)
+
+// Sorting
+const sortCategoryID = ref(null)
+const sortReversed = ref(false)
+const sortFunction = ref((a,b) => {
+    return a
+})
+
+function shiftIO (category) {
+    if (category.io === 'input') category.io = 'output'
+    else if (category.io === 'output') category.io = null
+    else if (category.io === null) category.io = 'input'
+}
+
+function moveCategory (category, n) {
+    dataStore.moveCategory(category, n)
+}
+
+
+function sortBy (category) {
+    stateStore.setLoading('Sorting data')
+
+    if (sortCategoryID.value) {
+        if (sortCategoryID.value === category.id) {
+            sortReversed.value = !sortReversed.value
+        }
+    }
+    
+    setTimeout(() => {
+        sortFunction.value = (a,b) => {
+            let valA = a[category.title]
+            let valB = b[category.title]
+            if (!category.usesCategoricalData) {
+                valA = parseFloat(valA)
+                valB = parseFloat(valB)
+            }
+            if (valA > valB) return sortReversed.value ? -1 : 1
+            if (valA < valB) return sortReversed.value ? 1 : -1
+            return 0
+        }
+        sortCategoryID.value = category.id
+        stateStore.clearLoading()
+    }, 100)
+
+}
+
+function toggleDisableEnable (category) {
+    category.enabled = !category.enabled
+}
 
 </script>
 
 <style lang="scss" scoped>
     .table-fixed-header {
-        font-size: 0.7em;
+        font-size: 0.8em;
         font-family: monospace;
         overflow: auto;
         border-collapse: separate;
         border-spacing: 0;
+        
+        .header-tool-box {
+            border: 1px solid whitesmoke; 
+            text-align: left;
+            padding: 2px 5px 0px 5px;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            font-size: 0.9rem;
+
+            div {
+                text-align: center;
+            }
+        }
 
         .header {
             vertical-align: bottom;
         }
-
         thead tr {
             position: sticky;
             top: 0;
@@ -60,7 +147,7 @@ const {data, filters, categories} = storeToRefs(dataStore)
         }
 
         th {
-            height: 140px;
+            height: 200px;
             white-space: nowrap;
             padding: 0 !important;
             border-bottom: 2px solid black;

src/components/LoadingModal.vue

@@ -2,7 +2,7 @@
     <div class="modal-mask loading modal-container" v-if="loadingReason">
         <div class="message-container anim-pulse">
             <span>{{loadingReason}}</span><br />
-            <span class="icon"><font-awesome-icon icon="fa-solid fa-spinner" class="anim-rotate-step-8" /></span>
+            <span class="icon"><faicon icon="fa-solid fa-spinner" class="anim-rotate-step-8" /></span>
         </div>
     </div>
 </template>

src/fontawesome.js

@@ -1,7 +1,8 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faTrash, faCirclePlus, faRightLeft, faBars, faPenToSquare, faBroom, faSpinner } from "@fortawesome/free-solid-svg-icons"
+import { faTrash, faCirclePlus, faRightLeft, faBars, faPenToSquare, faBroom, faSpinner, faSort, faBan, faCircleArrowRight, faCircleArrowLeft, faCircleCheck, faCircleXmark } from "@fortawesome/free-solid-svg-icons"
+// import { ... } from '@fortawesome/free-regular-svg-icons'
 
-library.add(faTrash, faCirclePlus, faRightLeft, faBars, faPenToSquare, faBroom, faSpinner)
+library.add(faTrash, faCirclePlus, faRightLeft, faBars, faPenToSquare, faBroom, faSpinner, faSort, faBan, faCircleArrowRight, faCircleArrowLeft, faCircleCheck, faCircleXmark)
 
 export default FontAwesomeIcon

src/main.js

@@ -15,7 +15,7 @@ const eventBus = mitt()
 const app = createApp(App)
 app.provide('eventBus', eventBus)
 app.use(createPinia())
-app.component("font-awesome-icon", faIcons)
+app.component("faicon", faIcons)
 app.mount('#app')
 
 

src/scss/GlobalStyles.scss

@@ -4,3 +4,4 @@
 @import 'SideMenu';
 @import 'Effects';
 @import 'Animations';
+@import 'Utils';

src/scss/Utils.scss

@@ -0,0 +1,3 @@
+.clickable {
+    cursor: pointer;
+}

src/store/DataStore.js

@@ -36,6 +36,13 @@ export const useDataStore = defineStore('data', {
             })
             return enabledCats.length
         },
+        categoriesSorted: (state) => {
+            return state.categories.sort((a, b) => {
+                if (a.position > b.position) return 1
+                if (a.position < b.position) return -1
+                return 0
+            })
+        },
         /**
          * Returns all enabled categories, sorted by position
          * @param {*} state 
@@ -185,6 +192,39 @@ export const useDataStore = defineStore('data', {
                 normalizedArray.push(scaledValue)
             }
             return normalizedArray
+        },
+        /**
+         * 
+         * @param {*} category category to move
+         * @param {*} n negative numbers moves to left, positive to the right
+         */
+        moveCategory (category, n) {
+            if (n === 0) return 
+            if (category.position === 0 && n < 0) {
+                return 
+            }
+            if (category.position === this.categories.length - 1 && n > 0) {
+                return 
+            }  
+
+            const p0 = category.position
+            category.position += n
+
+            this.categories.forEach((c) => {
+                if (c.id == category.id) return c
+                if (n < 0) {
+                    // Down-shift
+                    if (c.position >= p0 + n && c.position < p0) {
+                        c.position += 1
+                    }
+                } else {
+                    // Up-shift
+                    if (c.position <= p0 + n && c.position > p0) {
+                        c.position -= 1
+                    }
+                }
+                return c
+            })
         }
     },
 })